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 {