feat: Disable options from the message signature editor (#7777)

Co-authored-by: Pranav Raj S <pranav@chatwoot.com>

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

@@ -22,7 +22,7 @@
 <script>
 import {
   messageSchema,
-  wootMessageWriterSetup,
+  buildEditor,
   EditorView,
   MessageMarkdownTransformer,
   MessageMarkdownSerializer,
@@ -52,13 +52,19 @@ import { isEditorHotKeyEnabled } from 'dashboard/mixins/uiSettings';
 import { replaceVariablesInMessage } from '@chatwoot/utils';
 import { CONVERSATION_EVENTS } from '../../../helper/AnalyticsHelper/events';
 
-const createState = (content, placeholder, plugins = []) => {
+const createState = (
+  content,
+  placeholder,
+  plugins = [],
+  enabledMenuOptions
+) => {
   return EditorState.create({
     doc: new MessageMarkdownTransformer(messageSchema).parse(content),
-    plugins: wootMessageWriterSetup({
+    plugins: buildEditor({
       schema: messageSchema,
       placeholder,
       plugins,
+      enabledMenuOptions,
     }),
   });
 };
@@ -78,6 +84,7 @@ export default {
     enableVariables: { type: Boolean, default: false },
     enableCannedResponses: { type: Boolean, default: true },
     variables: { type: Object, default: () => ({}) },
+    enabledMenuOptions: { type: Array, default: () => [] },
   },
   data() {
     return {
@@ -238,7 +245,12 @@ export default {
     },
   },
   created() {
-    this.state = createState(this.value, this.placeholder, this.plugins);
+    this.state = createState(
+      this.value,
+      this.placeholder,
+      this.plugins,
+      this.enabledMenuOptions
+    );
   },
   mounted() {
     this.createEditorView();
@@ -247,7 +259,12 @@ export default {
   },
   methods: {
     reloadState() {
-      this.state = createState(this.value, this.placeholder, this.plugins);
+      this.state = createState(
+        this.value,
+        this.placeholder,
+        this.plugins,
+        this.enabledMenuOptions
+      );
       this.editorView.updateState(this.state);
       this.focusEditorInputField();
     },

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

@@ -16,7 +16,7 @@
 <script>
 import {
   fullSchema,
-  wootArticleWriterSetup,
+  buildEditor,
   EditorView,
   ArticleMarkdownSerializer,
   ArticleMarkdownTransformer,
@@ -33,15 +33,17 @@ const createState = (
   content,
   placeholder,
   plugins = [],
-  onImageUpload = () => {}
+  methods = {},
+  enabledMenuOptions
 ) => {
   return EditorState.create({
     doc: new ArticleMarkdownTransformer(fullSchema).parse(content),
-    plugins: wootArticleWriterSetup({
+    plugins: buildEditor({
       schema: fullSchema,
       placeholder,
+      methods,
       plugins,
-      onImageUpload,
+      enabledMenuOptions,
     }),
   });
 };
@@ -52,6 +54,7 @@ export default {
     value: { type: String, default: '' },
     editorId: { type: String, default: '' },
     placeholder: { type: String, default: '' },
+    enabledMenuOptions: { type: Array, default: () => [] },
   },
   data() {
     return {
@@ -83,7 +86,8 @@ export default {
       this.value,
       this.placeholder,
       this.plugins,
-      this.openFileBrowser
+      { onImageUpload: this.openFileBrowser },
+      this.enabledMenuOptions
     );
   },
   mounted() {
@@ -152,7 +156,8 @@ export default {
         this.value,
         this.placeholder,
         this.plugins,
-        this.openFileBrowser
+        { onImageUpload: this.openFileBrowser },
+        this.enabledMenuOptions
       );
       this.editorView.updateState(this.state);
       this.focusEditorInputField();

app/javascript/dashboard/components/widgets/conversation/ReplyBox.vue

@@ -69,6 +69,7 @@
         :min-height="4"
         :enable-variables="true"
         :variables="messageVariables"
+        :enabled-menu-options="customEditorMenuOptions"
         @typing-off="onTypingOff"
         @typing-on="onTypingOn"
         @focus="onFocus"
@@ -184,6 +185,7 @@ import wootConstants from 'dashboard/constants/globals';
 import { isEditorHotKeyEnabled } from 'dashboard/mixins/uiSettings';
 import { CONVERSATION_EVENTS } from '../../../helper/AnalyticsHelper/events';
 import rtlMixin from 'shared/mixins/rtlMixin';
+import { MESSAGE_EDITOR_MENU_OPTIONS } from 'dashboard/constants/editor';
 
 const EmojiInput = () => import('shared/components/emoji/EmojiInput');
 
@@ -226,6 +228,7 @@ export default {
   data() {
     return {
       message: '',
+      customEditorMenuOptions: MESSAGE_EDITOR_MENU_OPTIONS,
       isFocused: false,
       showEmojiPicker: false,
       attachedFiles: [],

app/javascript/dashboard/constants/editor.js

@@ -0,0 +1,33 @@
+export const MESSAGE_EDITOR_MENU_OPTIONS = [
+  'strong',
+  'em',
+  'link',
+  'undo',
+  'redo',
+  'bulletList',
+  'orderedList',
+  'code',
+];
+
+export const MESSAGE_SIGNATURE_EDITOR_MENU_OPTIONS = [
+  'strong',
+  'em',
+  'link',
+  'undo',
+  'redo',
+];
+
+export const ARTICLE_EDITOR_MENU_OPTIONS = [
+  'strong',
+  'em',
+  'link',
+  'undo',
+  'redo',
+  'bulletList',
+  'orderedList',
+  'h1',
+  'h2',
+  'h3',
+  'imageUpload',
+  'code',
+];

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

@@ -14,6 +14,7 @@
       v-model="articleContent"
       class="article-content"
       :placeholder="$t('HELP_CENTER.EDIT_ARTICLE.CONTENT_PLACEHOLDER')"
+      :enabled-menu-options="customEditorMenuOptions"
       @focus="onFocus"
       @blur="onBlur"
       @input="onContentInput"
@@ -25,6 +26,7 @@
 import { debounce } from '@chatwoot/utils';
 import ResizableTextArea from 'shared/components/ResizableTextArea';
 import WootArticleEditor from 'dashboard/components/widgets/WootWriter/FullEditor.vue';
+import { ARTICLE_EDITOR_MENU_OPTIONS } from 'dashboard/constants/editor';
 
 export default {
   components: {
@@ -46,6 +48,7 @@ export default {
       articleTitle: '',
       articleContent: '',
       saveArticle: () => {},
+      customEditorMenuOptions: ARTICLE_EDITOR_MENU_OPTIONS,
     };
   },
   mounted() {

app/javascript/dashboard/routes/dashboard/settings/profile/MessageSignature.vue

@@ -20,6 +20,7 @@
             :placeholder="
               $t('PROFILE_SETTINGS.FORM.MESSAGE_SIGNATURE.PLACEHOLDER')
             "
+            :enabled-menu-options="customEditorMenuList"
             @blur="$v.messageSignature.$touch"
           />
         </div>
@@ -41,6 +42,7 @@ import { mapGetters } from 'vuex';
 
 import WootMessageEditor from 'dashboard/components/widgets/WootWriter/Editor';
 import alertMixin from 'shared/mixins/alertMixin';
+import { MESSAGE_SIGNATURE_EDITOR_MENU_OPTIONS } from 'dashboard/constants/editor';
 
 export default {
   components: {
@@ -53,6 +55,7 @@ export default {
       enableMessageSignature: false,
       isUpdating: false,
       errorMessage: '',
+      customEditorMenuList: MESSAGE_SIGNATURE_EDITOR_MENU_OPTIONS,
     };
   },
   validations: {