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>

app/javascript/dashboard/components/widgets/WootWriter/Editor.vue

@@ -15,29 +15,25 @@
 </template>
 
 <script>
-import { EditorView } from 'prosemirror-view';
-
-import { defaultMarkdownSerializer } from 'prosemirror-markdown';
 import {
-  addMentionsToMarkdownSerializer,
+  messageSchema,
-  addMentionsToMarkdownParser,
+  wootMessageWriterSetup,
-  schemaWithMentions,
+  EditorView,
-} from '@chatwoot/prosemirror-schema/src/mentions/schema';
+  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),
+    doc: new MessageMarkdownTransformer(messageSchema).parse(content),
-    plugins: wootWriterSetup({
+    plugins: wootMessageWriterSetup({
-      schema: schemaWithMentions,
+      schema: messageSchema,
       placeholder,
       plugins,
     }),
@@ -88,9 +84,7 @@ export default {
   },
   computed: {
     contentFromEditor() {
-      return addMentionsToMarkdownSerializer(
+      return MessageMarkdownSerializer.serialize(this.editorView.state.doc);
-        defaultMarkdownSerializer
-      ).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 {

app/javascript/dashboard/components/widgets/WootWriter/FullEditor.vue

@@ -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>

app/javascript/dashboard/components/widgets/mentions/MentionBox.vue

@@ -1,22 +1,23 @@
 <template>
-  <ul
+  <div v-if="items.length" ref="mentionsListContainer" class="mention--box">
-    v-if="items.length"
+    <ul class="vertical dropdown menu">
-    class="vertical dropdown menu mention--box"
+      <woot-dropdown-item
-    :style="{ top: getTopPadding() + 'rem' }"
-  >
-    <li
         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>
+        </woot-button>
-    </li>
+      </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);
   }

app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleEditor.vue

@@ -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);
-      }
     }
   }
 }

app/javascript/dashboard/routes/dashboard/helpcenter/components/stories/ArticleEditor.stories.js

@@ -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({});

package.json

@@ -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",

yarn.lock

@@ -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"