feat: DP-159552 editor table support when pasting (#1034)

Author: anarravula-dialpad

package.json

@@ -86,6 +86,7 @@
     "@tiptap/extension-document": "2.12.0",
     "@tiptap/extension-floating-menu": "2.12.0",
     "@tiptap/extension-font-family": "2.12.0",
+    "@tiptap/extension-gapcursor": "2.12.0",
     "@tiptap/extension-hard-break": "2.12.0",
     "@tiptap/extension-history": "2.12.0",
     "@tiptap/extension-image": "2.12.0",
@@ -97,6 +98,10 @@
     "@tiptap/extension-paragraph": "2.12.0",
     "@tiptap/extension-placeholder": "2.12.0",
     "@tiptap/extension-strike": "2.12.0",
+    "@tiptap/extension-table": "2.12.0",
+    "@tiptap/extension-table-cell": "2.12.0",
+    "@tiptap/extension-table-header": "2.12.0",
+    "@tiptap/extension-table-row": "2.12.0",
     "@tiptap/extension-text": "2.12.0",
     "@tiptap/extension-text-align": "2.12.0",
     "@tiptap/extension-text-style": "2.12.0",

packages/dialtone-css/lib/build/less/components/rich-text-editor.less

@@ -42,6 +42,15 @@
       padding-left: var(--dt-space-400);
       border-left: var(--dt-size-border-300) solid var(--dt-color-border-subtle);
     }
+
+    table {
+      border-collapse: collapse;
+    }
+
+    td {
+      padding-left: var(--dt-space-200);
+      border: var(--dt-size-border-100) solid var(--dt-color-foreground-primary);
+    }
   }
 }
 

packages/dialtone-vue/components/rich_text_editor/rich_text_editor.test.js

@@ -471,7 +471,64 @@ describe('DtRichTextEditor tests', () => {
           output = wrapper.vm.getOutput();
           expect(output).toBe('<strong>bold pasted text</strong>');
         });
+        it('should preserve tables when pasted', async () => {
+          // When new extensions are added due to change in props editor needs to be recreated
+          wrapper.unmount();
+          props['outputFormat'] = 'html';
+          props['modelValue'] = '';
+          props['allowTables'] = true;
+          editorEl?.remove();
+          wrapper = mount(DtRichTextEditor, {
+            props,
+            components: { EditorContent },
+            listeners,
+            attrs,
+            slots,
+            attachTo: document.body,
+          });
+          await wrapper.vm.$nextTick();
+          editor = wrapper.find('[data-qa="dt-rich-text-editor"]').find('div[contenteditable]');
+          editorEl = document.getElementsByClassName('qa-editor')[0];
+
+          const clipboardData = new DataTransfer();
+          clipboardData.setData('text/plain', 'testtesttesttest');
+          clipboardData.setData('text/html', '<table><tr><td>test</td><td>test</td></tr><tr><td>test</td><td>test</td></tr></table>');
 
+          const pasteEvent = new ClipboardEvent('paste', {
+            clipboardData,
+            bubbles: true,
+            cancelable: true,
+          });
+
+          editorEl.dispatchEvent(pasteEvent);
+          await wrapper.vm.$nextTick();
+          const output = wrapper.vm.getOutput();
+          // Check that the table has been converted to a table with the enforced styling
+          expect(output).toBe(`<table style="min-width: 50px;"><colgroup><col style="min-width: 25px;"><col style="min-width: 25px;"></colgroup><tbody><tr><td colspan="1" rowspan="1"><p>test</p></td><td colspan="1" rowspan="1"><p>test</p></td></tr><tr><td colspan="1" rowspan="1"><p>test</p></td><td colspan="1" rowspan="1"><p>test</p></td></tr></tbody></table>`);
+        });
+
+        it('should not preserve tables when pasted without allow tables', async () => {
+          await wrapper.setProps({
+            pasteRichText: false,
+            outputFormat: 'html',
+            modelValue: '',
+          });
+          const clipboardData = new DataTransfer();
+          clipboardData.setData('text/plain', 'testtesttesttest');
+          clipboardData.setData('text/html', '<table><tr><td>test</td><td>test</td></tr><tr><td>test</td><td>test</td></tr></table>');
+
+          const pasteEvent = new ClipboardEvent('paste', {
+            clipboardData,
+            bubbles: true,
+            cancelable: true,
+          });
+
+          editorEl.dispatchEvent(pasteEvent);
+          await wrapper.vm.$nextTick();
+          const output = wrapper.vm.getOutput();
+          // Check that the table has been converted to text;
+          expect(output).toBe(`<p>testtesttesttest</p>`);
+        });
         it('if pasteRichText is false, line breaks should be preserved as hard breaks', async () => {
           await wrapper.setProps({
             pasteRichText: false,

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

@@ -61,6 +61,7 @@ import Blockquote from '@tiptap/extension-blockquote';
 import CodeBlock from '@tiptap/extension-code-block';
 import Code from '@tiptap/extension-code';
 import Document from '@tiptap/extension-document';
+import Gapcursor from '@tiptap/extension-gapcursor';
 import HardBreak from '@tiptap/extension-hard-break';
 import Paragraph from '@tiptap/extension-paragraph';
 import Placeholder from '@tiptap/extension-placeholder';
@@ -75,6 +76,10 @@ import Underline from '@tiptap/extension-underline';
 import Text from '@tiptap/extension-text';
 import TextAlign from '@tiptap/extension-text-align';
 import History from '@tiptap/extension-history';
+import Table from '@tiptap/extension-table';
+import TableCell from '@tiptap/extension-table-cell';
+import TableHeader from '@tiptap/extension-table-header';
+import TableRow from '@tiptap/extension-table-row';
 import TextStyle from '@tiptap/extension-text-style';
 import Color from '@tiptap/extension-color';
 import FontFamily from '@tiptap/extension-font-family';
@@ -406,6 +411,14 @@ export default {
       type: Boolean,
       default: false,
     },
+
+    /**
+     * Allow Tables to be used in to the editor
+     */
+    allowTables: {
+      type: Boolean,
+      default: false,
+    },
   },
 
   emits: [
@@ -839,6 +852,10 @@ export default {
         extensions.push(...this.additionalExtensions);
       }
 
+      if (this.allowTables) {
+        extensions.push(Table.configure({ resizable: true }), TableRow, TableHeader, TableCell, Gapcursor)
+      }
+
       return extensions;
     },
 
@@ -1251,6 +1268,7 @@ export default {
     focusEditor () {
       this.editor.commands.focus();
     },
+
   },
 };
 </script>

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

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

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

@@ -175,6 +175,7 @@
         :output-format="htmlOutputFormat"
         :placeholder="placeholder"
         :use-div-tags="useDivTags"
+        :allow-tables="allowTables"
         data-qa="dt-rich-text-editor"
         v-bind="removeClassStyleAttrs($attrs)"
         @text-input="onTextInput"
@@ -467,6 +468,14 @@ export default {
       type: Boolean,
       default: false,
     },
+
+    /**
+     * Allow Tables to be used in to the editor
+     */
+    allowTables: {
+      type: Boolean,
+      default: false,
+    },
   },
 
   emits: [

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

@@ -27,6 +27,7 @@
       :show-quick-replies-button="$attrs.showQuickRepliesButton"
       :show-code-block-button="$attrs.showCodeBlockButton"
       :show-inline-image-button="$attrs.showInlineImageButton"
+      :allow-tables="$attrs.allowTables"
       @focus="$attrs.onFocus"
       @blur="$attrs.onBlur"
       @input="$attrs.onInput"