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,
-  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 {

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
-    v-if="items.length"
-    class="vertical dropdown menu mention--box"
-    :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">
-        <strong>{{ item.label }}</strong> - {{ item.description }}
-      </a>
-    </li>
-  </ul>
+  <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"
+        @mouseover="onHover(index)"
+      >
+        <woot-button
+          size="small"
+          class="text-truncate"
+          :variant="index === selectedIndex ? 'smooth' : 'clear'"
+          @click="onListItemSelection(index)"
+        >
+          <strong>{{ item.label }}</strong> - {{ item.description }}
+        </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);
   }

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