Added an extension to Paragraph to use divs insteap of p tags and introduced a property to the component to toggle the setting

Author: anarravula-dialpad

packages/dialtone-vue2/components/rich_text_editor/extensions/div/div.js

@@ -0,0 +1,17 @@
+import { mergeAttributes } from '@tiptap/core';
+import Paragraph from '@tiptap/extension-paragraph';
+
+/** Extension for div tag support
+ * Replaces the default p tags when typing text to div tags
+ * Extends the following extension: https://github.com/ueberdosis/tiptap/blob/main/packages/extension-paragraph/src/paragraph.ts
+ */
+export const DivParagraph = Paragraph.extend({
+  parseHTML () {
+    return [{ tag: 'div' }];
+  },
+
+  renderHTML ({ HTMLAttributes }) {
+    return ['div', mergeAttributes(this.options.HTMLAttributes, HTMLAttributes), 0];
+  },
+
+});

packages/dialtone-vue2/components/rich_text_editor/extensions/div/index.js

@@ -0,0 +1,3 @@
+import { DivParagraph } from './div';
+
+export default DivParagraph;

packages/dialtone-vue2/components/rich_text_editor/rich_text_editor.stories.js

@@ -156,5 +156,6 @@ export const WithCustomExtensions = {
     allowCode: false,
     allowCodeblock: false,
     link: false,
+    useDivTags: false,
   },
 };

packages/dialtone-vue2/components/rich_text_editor/rich_text_editor.vue

@@ -78,6 +78,7 @@ import History from '@tiptap/extension-history';
 import Emoji from './extensions/emoji';
 import CustomLink from './extensions/custom_link';
 import ConfigurableImage from './extensions/image';
+import DivParagraph from './extensions/div';
 import { MentionPlugin } from './extensions/mentions/mention';
 import { ChannelPlugin } from './extensions/channels/channel';
 import { SlashCommandPlugin } from './extensions/slash_command/slash_command';
@@ -367,6 +368,14 @@ export default {
       type: Boolean,
       default: false,
     },
+
+    /**
+     * Show text in HTML div tags instead of paragraph tags
+     */
+    useDivTags: {
+      type: Boolean,
+      default: false,
+    },
   },
 
   emits: [
@@ -466,7 +475,8 @@ export default {
     // eslint-disable-next-line complexity
     extensions () {
       // These are the default extensions needed just for plain text.
-      const extensions = [Document, Paragraph, Text, History, HardBreak];
+      const extensions = [Document, Text, History, HardBreak];
+      extensions.push(this.useDivTags ? DivParagraph : Paragraph);
 
       if (this.allowBlockquote) {
         extensions.push(Blockquote);

packages/dialtone-vue2/components/rich_text_editor/rich_text_editor_default.story.vue

@@ -23,6 +23,7 @@
     :allow-underline="$attrs.allowUnderline"
     :additional-extensions="$attrs.additionalExtensions"
     :hide-link-bubble-menu="$attrs.hideLinkBubbleMenu"
+    :use-div-tags="$attrs.useDivTags"
     @blur="$attrs.onBlur"
     @input="$attrs.onInput"
     @edit-link="$attrs.onEditLink"

packages/dialtone-vue2/recipes/conversation_view/editor/editor.test.js

@@ -597,5 +597,17 @@ describe('DtRecipeEditor tests', () => {
         expect('quick-replies-click' in wrapper.emitted()).toBeTruthy();
       });
     });
+
+    describe('When use div tags is enabled', () => {
+      beforeEach(async () => {
+        _mountWrapper();
+        await wrapper.setProps({ useDivTags: true });
+        await wrapper.vm.$nextTick();
+        _setChildWrappers();
+      });
+      it('should contain the initial value in div tags', function () {
+        expect(editor.html()).toContain(`<div>${testText}</div>`);
+      });
+    });
   });
 });

packages/dialtone-vue2/recipes/conversation_view/editor/editor.vue

@@ -168,6 +168,7 @@
         :link="true"
         :output-format="htmlOutputFormat"
         :placeholder="placeholder"
+        :use-div-tags="useDivTags"
         data-qa="dt-rich-text-editor"
         v-bind="$attrs"
         @blur="onBlur"
@@ -462,6 +463,14 @@ export default {
         setLinkInputAriaLabel: 'Input field to add link',
       }),
     },
+
+    /**
+     * Use div tags instead of paragraph tags to show text
+     */
+    useDivTags: {
+      type: Boolean,
+      default: false,
+    },
   },
 
   emits: [

packages/dialtone-vue2/recipes/conversation_view/editor/editor_default.story.vue

@@ -15,6 +15,7 @@
       :cancel-set-link-button="$attrs.cancelSetLinkButton"
       :confirm-set-link-button="$attrs.confirmSetLinkButton"
       :remove-link-button="$attrs.removeLinkButton"
+      :use-div-tags="$attrs.useDivTags"
       :show-bold-button="$attrs.showBoldButton"
       :show-italics-button="$attrs.showItalicsButton"
       :show-strike-button="$attrs.showStrikeButton"