feat: Revamp editor for message and article (#6145)

Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Co-authored-by: Muhsin Keloth <muhsinkeramam@gmail.com>
This commit is contained in:
Nithin David Thomas
2023-01-16 22:38:47 +05:30
committed by GitHub
parent 0d894e0abc
commit e707778490
7 changed files with 307 additions and 73 deletions

View File

@@ -15,29 +15,25 @@
</template>
<script>
import { EditorView } from 'prosemirror-view';
import { defaultMarkdownSerializer } from 'prosemirror-markdown';
import {
addMentionsToMarkdownSerializer,
addMentionsToMarkdownParser,
schemaWithMentions,
} from '@chatwoot/prosemirror-schema/src/mentions/schema';
messageSchema,
wootMessageWriterSetup,
EditorView,
MessageMarkdownTransformer,
MessageMarkdownSerializer,
EditorState,
Selection,
} from '@chatwoot/prosemirror-schema';
import {
suggestionsPlugin,
triggerCharacters,
} from '@chatwoot/prosemirror-schema/src/mentions/plugin';
import { EditorState, Selection } from 'prosemirror-state';
import { defaultMarkdownParser } from 'prosemirror-markdown';
import { wootWriterSetup } from '@chatwoot/prosemirror-schema';
import TagAgents from '../conversation/TagAgents';
import CannedResponse from '../conversation/CannedResponse';
const TYPING_INDICATOR_IDLE_TIME = 4000;
import '@chatwoot/prosemirror-schema/src/woot-editor.css';
import {
hasPressedEnterAndNotCmdOrShift,
hasPressedCommandAndEnter,
@@ -53,9 +49,9 @@ import AnalyticsHelper, {
const createState = (content, placeholder, plugins = []) => {
return EditorState.create({
doc: addMentionsToMarkdownParser(defaultMarkdownParser).parse(content),
plugins: wootWriterSetup({
schema: schemaWithMentions,
doc: new MessageMarkdownTransformer(messageSchema).parse(content),
plugins: wootMessageWriterSetup({
schema: messageSchema,
placeholder,
plugins,
}),
@@ -88,9 +84,7 @@ export default {
},
computed: {
contentFromEditor() {
return addMentionsToMarkdownSerializer(
defaultMarkdownSerializer
).serialize(this.editorView.state.doc);
return MessageMarkdownSerializer.serialize(this.editorView.state.doc);
},
plugins() {
if (!this.enableSuggestions) {
@@ -282,11 +276,11 @@ export default {
}
let from = this.range.from - 1;
let node = addMentionsToMarkdownParser(defaultMarkdownParser).parse(
let node = new MessageMarkdownTransformer(messageSchema).parse(
cannedItem
);
if (node.childCount === 1) {
if (node.textContent === cannedItem) {
node = this.editorView.state.schema.text(cannedItem);
from = this.range.from;
}
@@ -372,6 +366,8 @@ export default {
</script>
<style lang="scss">
@import '~@chatwoot/prosemirror-schema/src/styles/base.scss';
.ProseMirror-menubar-wrapper {
display: flex;
flex-direction: column;
@@ -388,6 +384,7 @@ export default {
.editor-root {
width: 100%;
position: relative;
}
.ProseMirror-woot-style {
@@ -410,6 +407,9 @@ export default {
color: var(--s-900);
padding: 0 var(--space-smaller);
}
.ProseMirror-menubar {
background: var(--y-50);
}
}
.editor-wrap {

View File

@@ -0,0 +1,167 @@
<template>
<div>
<div class="editor-root editor--article">
<div ref="editor" />
</div>
</div>
</template>
<script>
import {
fullSchema,
wootArticleWriterSetup,
EditorView,
ArticleMarkdownSerializer,
ArticleMarkdownTransformer,
EditorState,
Selection,
} from '@chatwoot/prosemirror-schema';
import eventListenerMixins from 'shared/mixins/eventListenerMixins';
import uiSettingsMixin from 'dashboard/mixins/uiSettings';
const createState = (content, placeholder, plugins = []) => {
return EditorState.create({
doc: new ArticleMarkdownTransformer(fullSchema).parse(content),
plugins: wootArticleWriterSetup({
schema: fullSchema,
placeholder,
plugins,
}),
});
};
export default {
mixins: [eventListenerMixins, uiSettingsMixin],
props: {
value: { type: String, default: '' },
editorId: { type: String, default: '' },
placeholder: { type: String, default: '' },
},
data() {
return {
editorView: null,
state: undefined,
plugins: [],
};
},
computed: {
contentFromEditor() {
if (this.editorView) {
return ArticleMarkdownSerializer.serialize(this.editorView.state.doc);
}
return '';
},
},
watch: {
value(newValue = '') {
if (newValue !== this.contentFromEditor) {
this.reloadState();
}
},
editorId() {
this.reloadState();
},
},
created() {
this.state = createState(this.value, this.placeholder, this.plugins);
},
mounted() {
this.createEditorView();
this.editorView.updateState(this.state);
this.focusEditorInputField();
},
methods: {
reloadState() {
this.state = createState(this.value, this.placeholder, this.plugins);
this.editorView.updateState(this.state);
this.focusEditorInputField();
},
createEditorView() {
this.editorView = new EditorView(this.$refs.editor, {
state: this.state,
dispatchTransaction: tx => {
this.state = this.state.apply(tx);
this.emitOnChange();
},
handleDOMEvents: {
keyup: () => {
this.onKeyup();
},
keydown: (view, event) => {
this.onKeydown(event);
},
focus: () => {
this.onFocus();
},
blur: () => {
this.onBlur();
},
},
});
},
handleKeyEvents() {},
focusEditorInputField() {
const { tr } = this.editorView.state;
const selection = Selection.atEnd(tr.doc);
this.editorView.dispatch(tr.setSelection(selection));
this.editorView.focus();
},
emitOnChange() {
this.editorView.updateState(this.state);
this.$emit('input', this.contentFromEditor);
},
onKeyup() {
this.$emit('keyup');
},
onKeydown() {
this.$emit('keydown');
},
onBlur() {
this.$emit('blur');
},
onFocus() {
this.$emit('focus');
},
},
};
</script>
<style lang="scss">
@import '~@chatwoot/prosemirror-schema/src/styles/article.scss';
.ProseMirror-menubar-wrapper {
display: flex;
flex-direction: column;
> .ProseMirror {
padding: 0;
word-break: break-word;
}
}
.editor-root {
width: 100%;
}
.ProseMirror-woot-style {
min-height: 8rem;
max-height: 12rem;
overflow: auto;
}
.ProseMirror-prompt {
z-index: var(--z-index-highest);
background: var(--white);
box-shadow: var(--shadow-large);
border-radius: var(--border-radius-normal);
border: 1px solid var(--color-border);
min-width: 40rem;
}
</style>

View File

@@ -1,22 +1,23 @@
<template>
<ul
v-if="items.length"
class="vertical dropdown menu mention--box"
:style="{ top: getTopPadding() + 'rem' }"
>
<li
<div v-if="items.length" ref="mentionsListContainer" class="mention--box">
<ul class="vertical dropdown menu">
<woot-dropdown-item
v-for="(item, index) in items"
:id="`mention-item-${index}`"
:key="item.key"
:class="{ active: index === selectedIndex }"
@click="onListItemSelection(index)"
@mouseover="onHover(index)"
>
<a class="text-truncate">
<woot-button
size="small"
class="text-truncate"
:variant="index === selectedIndex ? 'smooth' : 'clear'"
@click="onListItemSelection(index)"
>
<strong>{{ item.label }}</strong> - {{ item.description }}
</a>
</li>
</woot-button>
</woot-dropdown-item>
</ul>
</div>
</template>
<script>
@@ -69,16 +70,22 @@ export default {
<style scoped lang="scss">
.mention--box {
background: var(--white);
border-bottom: var(--space-small) solid var(--white);
box-shadow: var(--shadow-medium);
border-radius: var(--border-radius-normal);
border-top: 1px solid var(--color-border);
left: 0;
max-height: 14rem;
bottom: 100%;
max-height: 18rem;
overflow: auto;
padding-top: var(--space-small);
padding: var(--space-small) var(--space-small) 0;
position: absolute;
width: 100%;
z-index: 100;
.dropdown-menu__item:last-child {
padding-bottom: var(--space-smaller);
}
.active a {
background: var(--w-500);
}

View File

@@ -10,12 +10,10 @@
@blur="onBlur"
@input="onTitleInput"
/>
<woot-message-editor
<woot-article-editor
v-model="articleContent"
class="article-content"
:placeholder="$t('HELP_CENTER.EDIT_ARTICLE.CONTENT_PLACEHOLDER')"
:is-format-mode="true"
:override-line-breaks="true"
@focus="onFocus"
@blur="onBlur"
@input="onContentInput"
@@ -26,11 +24,11 @@
<script>
import { debounce } from '@chatwoot/utils';
import ResizableTextArea from 'shared/components/ResizableTextArea';
import WootMessageEditor from 'dashboard/components/widgets/WootWriter/Editor.vue';
import WootArticleEditor from 'dashboard/components/widgets/WootWriter/FullEditor.vue';
export default {
components: {
WootMessageEditor,
WootArticleEditor,
ResizableTextArea,
},
props: {
@@ -81,41 +79,41 @@ export default {
<style lang="scss" scoped>
.edit-article--container {
margin: var(--space-large) auto;
width: 640px;
padding: 0 var(--space-medium);
max-width: 89.6rem;
width: 100%;
}
.article-heading {
font-size: var(--font-size-giga);
font-weight: var(--font-weight-bold);
width: 100%;
min-height: var(--space-jumbo);
max-height: 64rem;
height: auto;
margin-bottom: var(--space-small);
border: 0px solid transparent;
padding: 0;
color: var(--s-900);
padding: var(--space-normal);
resize: none;
&:hover {
background: var(--s-25);
border-radius: var(--border-radius-normal);
}
}
.article-content {
padding: 0 var(--space-normal);
height: fit-content;
}
::v-deep {
.ProseMirror-menubar-wrapper {
.ProseMirror-menubar .ProseMirror-menuitem {
.ProseMirror-icon {
margin-right: var(--space-normal);
font-size: var(--font-size-small);
}
}
.ProseMirror-woot-style {
min-height: var(--space-giga);
max-height: 100%;
p {
font-size: var(--font-size-default);
line-height: 1.5;
}
li::marker {
font-size: var(--font-size-default);
}
}
}
}

View File

@@ -18,7 +18,7 @@ const Template = (args, { argTypes }) => ({
props: Object.keys(argTypes),
components: { ArticleEditor },
template:
'<article-editor v-bind="$props" @focus="onFocus" @blur="onBlur"></-article>',
'<article-editor v-bind="$props" @focus="onFocus" @blur="onBlur"></article-editor>',
});
export const EditArticleView = Template.bind({});

View File

@@ -19,7 +19,7 @@
},
"dependencies": {
"@braid/vue-formulate": "^2.5.2",
"@chatwoot/prosemirror-schema": "https://github.com/chatwoot/prosemirror-schema.git#7e8acadd10d7b932c0dc0bd0a18f804434f83517",
"@chatwoot/prosemirror-schema": "https://github.com/chatwoot/prosemirror-schema.git#beta",
"@chatwoot/utils": "^0.0.10",
"@hcaptcha/vue-hcaptcha": "^0.3.2",
"@june-so/analytics-next": "^1.36.5",
@@ -47,9 +47,6 @@
"md5": "^2.3.0",
"ninja-keys": "^1.1.9",
"opus-recorder": "^8.0.5",
"prosemirror-markdown": "1.5.1",
"prosemirror-state": "1.3.4",
"prosemirror-view": "1.18.4",
"semver": "7.3.5",
"spinkit": "~1.2.5",
"tailwindcss": "^1.9.6",

View File

@@ -1391,9 +1391,9 @@
is-url "^1.2.4"
nanoid "^2.1.11"
"@chatwoot/prosemirror-schema@https://github.com/chatwoot/prosemirror-schema.git#7e8acadd10d7b932c0dc0bd0a18f804434f83517":
"@chatwoot/prosemirror-schema@https://github.com/chatwoot/prosemirror-schema.git#beta":
version "1.0.0"
resolved "https://github.com/chatwoot/prosemirror-schema.git#7e8acadd10d7b932c0dc0bd0a18f804434f83517"
resolved "https://github.com/chatwoot/prosemirror-schema.git#e74e54cca4acaa4d87f3e0e48d47ffaea283ec88"
dependencies:
prosemirror-commands "^1.1.4"
prosemirror-dropcursor "^1.3.2"
@@ -1401,9 +1401,13 @@
prosemirror-history "^1.1.3"
prosemirror-inputrules "^1.1.3"
prosemirror-keymap "^1.1.4"
prosemirror-markdown "1.5.1"
prosemirror-menu "^1.1.4"
prosemirror-model "^1.1.0"
prosemirror-schema-list "^1.1.4"
prosemirror-state "^1.3.3"
prosemirror-tables "^1.3.0"
prosemirror-utils "^0.9.6"
prosemirror-view "^1.17.2"
"@chatwoot/utils@^0.0.10":
@@ -11408,7 +11412,7 @@ mdn-data@2.0.4:
mdurl@^1.0.0, mdurl@^1.0.1:
version "1.0.1"
resolved "https://registry.yarnpkg.com/mdurl/-/mdurl-1.0.1.tgz#fe85b2ec75a59037f2adfec100fd6c601761152e"
integrity sha1-/oWy7HWlkDfyrf7BAP1sYBdhFS4=
integrity sha512-/sKlQJCBYVY9Ers9hqzKou4H6V5UWc/M59TH2dvkt+84itfnq7uFOMLpOiOS4ujvHP4etln18fmIxA5R5fll0g==
media-typer@0.3.0:
version "0.3.0"
@@ -12244,6 +12248,11 @@ orderedmap@^1.1.0:
resolved "https://registry.yarnpkg.com/orderedmap/-/orderedmap-1.1.1.tgz#c618e77611b3b21d0fe3edc92586265e0059c789"
integrity sha512-3Ux8um0zXbVacKUkcytc0u3HgC0b0bBLT+I60r2J/En72cI0nZffqrA7Xtf2Hqs27j1g82llR5Mhbd0Z1XW4AQ==
orderedmap@^2.0.0:
version "2.1.0"
resolved "https://registry.yarnpkg.com/orderedmap/-/orderedmap-2.1.0.tgz#819457082fa3a06abd316d83a281a1ca467437cd"
integrity sha512-/pIFexOm6S70EPdznemIz3BQZoJ4VTFrhqzu0ACBqBgeLsLxq8e6Jim63ImIfwW/zAD1AlXpRMlOv3aghmo4dA==
original@^1.0.0:
version "1.0.2"
resolved "https://registry.yarnpkg.com/original/-/original-1.0.2.tgz#e442a61cffe1c5fd20a65f3261c26663b303f25f"
@@ -13661,6 +13670,14 @@ prosemirror-keymap@^1.0.0, prosemirror-keymap@^1.1.4:
prosemirror-state "^1.0.0"
w3c-keyname "^2.2.0"
prosemirror-keymap@^1.1.2:
version "1.2.0"
resolved "https://registry.yarnpkg.com/prosemirror-keymap/-/prosemirror-keymap-1.2.0.tgz#d5cc9da9b712020690a994b50b92a0e448a60bf5"
integrity sha512-TdSfu+YyLDd54ufN/ZeD1VtBRYpgZnTPnnbY+4R08DDgs84KrIPEPbJL8t1Lm2dkljFx6xeBE26YWH3aIzkPKg==
dependencies:
prosemirror-state "^1.0.0"
w3c-keyname "^2.2.0"
prosemirror-markdown@1.5.1:
version "1.5.1"
resolved "https://registry.yarnpkg.com/prosemirror-markdown/-/prosemirror-markdown-1.5.1.tgz#877c7faea2225d3c52e988599bbe4457bcb3190f"
@@ -13686,6 +13703,13 @@ prosemirror-model@^1.0.0, prosemirror-model@^1.1.0:
dependencies:
orderedmap "^1.1.0"
prosemirror-model@^1.16.0, prosemirror-model@^1.8.1:
version "1.18.3"
resolved "https://registry.yarnpkg.com/prosemirror-model/-/prosemirror-model-1.18.3.tgz#d1026a78cff928fd600e90d87cf7d162e0a4e3fd"
integrity sha512-yUVejauEY3F1r7PDy4UJKEGeIU+KFc71JQl5sNvG66CLVdKXRjhWpBW6KMeduGsmGOsw85f6EGrs6QxIKOVILA==
dependencies:
orderedmap "^2.0.0"
prosemirror-schema-list@^1.1.4:
version "1.1.4"
resolved "https://registry.yarnpkg.com/prosemirror-schema-list/-/prosemirror-schema-list-1.1.4.tgz#471f9caf2d2bed93641d2e490434c0d2d4330df1"
@@ -13694,7 +13718,7 @@ prosemirror-schema-list@^1.1.4:
prosemirror-model "^1.0.0"
prosemirror-transform "^1.0.0"
prosemirror-state@1.3.4, prosemirror-state@^1.0.0, prosemirror-state@^1.2.2, prosemirror-state@^1.3.3:
prosemirror-state@^1.0.0, prosemirror-state@^1.2.2, prosemirror-state@^1.3.3:
version "1.3.4"
resolved "https://registry.yarnpkg.com/prosemirror-state/-/prosemirror-state-1.3.4.tgz#4c6b52628216e753fc901c6d2bfd84ce109e8952"
integrity sha512-Xkkrpd1y/TQ6HKzN3agsQIGRcLckUMA9u3j207L04mt8ToRgpGeyhbVv0HI7omDORIBHjR29b7AwlATFFf2GLA==
@@ -13702,6 +13726,26 @@ prosemirror-state@1.3.4, prosemirror-state@^1.0.0, prosemirror-state@^1.2.2, pro
prosemirror-model "^1.0.0"
prosemirror-transform "^1.0.0"
prosemirror-state@^1.3.1:
version "1.4.2"
resolved "https://registry.yarnpkg.com/prosemirror-state/-/prosemirror-state-1.4.2.tgz#f93bd8a33a4454efab917ba9b738259d828db7e5"
integrity sha512-puuzLD2mz/oTdfgd8msFbe0A42j5eNudKAAPDB0+QJRw8cO1ygjLmhLrg9RvDpf87Dkd6D4t93qdef00KKNacQ==
dependencies:
prosemirror-model "^1.0.0"
prosemirror-transform "^1.0.0"
prosemirror-view "^1.27.0"
prosemirror-tables@^1.3.0:
version "1.3.0"
resolved "https://registry.yarnpkg.com/prosemirror-tables/-/prosemirror-tables-1.3.0.tgz#262fa7d030f7bebef7b5fd9a045bce9a786c198c"
integrity sha512-ujzOb37O2ahmqI626Y0N0V/SZxuA9OGNYnsIMWdfecwkc8S8OShOqeD4kKUxpD0JcP81Z8qy/ulrXQuKhS4WUg==
dependencies:
prosemirror-keymap "^1.1.2"
prosemirror-model "^1.8.1"
prosemirror-state "^1.3.1"
prosemirror-transform "^1.2.1"
prosemirror-view "^1.13.3"
prosemirror-transform@^1.0.0, prosemirror-transform@^1.1.0:
version "1.3.2"
resolved "https://registry.yarnpkg.com/prosemirror-transform/-/prosemirror-transform-1.3.2.tgz#5620ebe7379e6fae4f34ecc881886cb22ce96579"
@@ -13709,7 +13753,19 @@ prosemirror-transform@^1.0.0, prosemirror-transform@^1.1.0:
dependencies:
prosemirror-model "^1.0.0"
prosemirror-view@1.18.4, prosemirror-view@^1.0.0, prosemirror-view@^1.1.0, prosemirror-view@^1.17.2:
prosemirror-transform@^1.2.1:
version "1.7.0"
resolved "https://registry.yarnpkg.com/prosemirror-transform/-/prosemirror-transform-1.7.0.tgz#a8a0768f3ee6418d26ebef435beda9d43c65e472"
integrity sha512-O4T697Cqilw06Zvc3Wm+e237R6eZtJL/xGMliCi+Uo8VL6qHk6afz1qq0zNjT3eZMuYwnP8ZS0+YxX/tfcE9TQ==
dependencies:
prosemirror-model "^1.0.0"
prosemirror-utils@^0.9.6:
version "0.9.6"
resolved "https://registry.yarnpkg.com/prosemirror-utils/-/prosemirror-utils-0.9.6.tgz#3d97bd85897e3b535555867dc95a51399116a973"
integrity sha512-UC+j9hQQ1POYfMc5p7UFxBTptRiGPR7Kkmbl3jVvU8VgQbkI89tR/GK+3QYC8n+VvBZrtAoCrJItNhWSxX3slA==
prosemirror-view@^1.0.0, prosemirror-view@^1.1.0, prosemirror-view@^1.17.2:
version "1.18.4"
resolved "https://registry.yarnpkg.com/prosemirror-view/-/prosemirror-view-1.18.4.tgz#179141df117cf414434ade08115f2e233d135f6d"
integrity sha512-6oi62XRK5WxhMX1Amjk5uMsWILUEcFbFF75i09BzpAdI+5glhs7heCaRvKOj4v3YRJ7LJVkOXS9xvjetlE3+pA==
@@ -13718,6 +13774,15 @@ prosemirror-view@1.18.4, prosemirror-view@^1.0.0, prosemirror-view@^1.1.0, prose
prosemirror-state "^1.0.0"
prosemirror-transform "^1.1.0"
prosemirror-view@^1.13.3, prosemirror-view@^1.27.0:
version "1.29.1"
resolved "https://registry.yarnpkg.com/prosemirror-view/-/prosemirror-view-1.29.1.tgz#9a4938d1a863ca76e23c6573d30e3ece2b17d9a0"
integrity sha512-OhujVZSDsh0l0PyHNdfaBj6DBkbhYaCfbaxmTeFrMKd/eWS+G6IC+OAbmR9IsLC8Se1HSbphMaXnsXjupHL3UQ==
dependencies:
prosemirror-model "^1.16.0"
prosemirror-state "^1.0.0"
prosemirror-transform "^1.1.0"
proto-list@~1.2.1:
version "1.2.4"
resolved "https://registry.yarnpkg.com/proto-list/-/proto-list-1.2.4.tgz#212d5bfe1318306a420f6402b8e26ff39647a849"