fix(rich-text-editor, editor): DLT-2175 editor loses text formatting …

…while pasting (#543) Co-authored-by: Eugenia Mariotti <eugenia.mariotti@dialpad.com>
dialpad · Oct 24, 2024 · fd719a4 · fd719a4
1 parent 534c781
commit fd719a4
Show file tree

Hide file tree

Showing 6 changed files with 96 additions and 56 deletions.
diff --git a/packages/dialtone-vue2/components/rich_text_editor/rich_text_editor.vue b/packages/dialtone-vue2/components/rich_text_editor/rich_text_editor.vue
@@ -289,6 +289,14 @@ export default {
       type: Array,
       default: () => [],
     },
+
+    /**
+     * Use default paste handler.
+     */
+    useDefaultPasteHandler: {
+      type: Boolean,
+      default: false,
+    },
   },
 
   emits: [
@@ -530,43 +538,45 @@ export default {
             to fix our issue of line breaks outputting as paragraphs. Code taken from this thread:
             https://discuss.prosemirror.net/t/how-to-preserve-hard-breaks-when-pasting-html-into-a-plain-text-schema/4202/4
           */
-          handlePaste: function (view, event, slice) {
-            const { state } = view;
-            const { tr } = state;
+          ...(!this.useDefaultPasteHandler && { handlePaste: this.handlerPreserveBreaksOnPaste }),
+        },
+      });
+      this.addEditorListeners();
+    },
 
-            if (!state.schema.nodes.hardBreak) {
-              return false;
-            }
+    handlerPreserveBreaksOnPaste (view, event, slice) {
+      const { state } = view;
+      const { tr } = state;
 
-            const clipboardText = event.clipboardData?.getData('text/plain').trim();
+      if (!state.schema.nodes.hardBreak) {
+        return false;
+      }
 
-            if (!clipboardText) {
-              return false;
-            }
+      const clipboardText = event.clipboardData?.getData('text/plain').trim();
 
-            const textLines = clipboardText.split(/(?:\r\n|\r|\n)/g);
+      if (!clipboardText) {
+        return false;
+      }
 
-            const nodes = textLines.reduce((nodes, line, index) => {
-              if (line.length > 0) {
-                nodes.push(state.schema.text(line));
-              }
+      const textLines = clipboardText.split(/(?:\r\n|\r|\n)/g);
 
-              if (index < textLines.length - 1) {
-                nodes.push(state.schema.nodes.hardBreak.create());
-              }
+      const nodes = textLines.reduce((nodes, line, index) => {
+        if (line.length > 0) {
+          nodes.push(state.schema.text(line));
+        }
 
-              return nodes;
-            }, []);
+        if (index < textLines.length - 1) {
+          nodes.push(state.schema.nodes.hardBreak.create());
+        }
 
-            view.dispatch(
-              tr.replaceSelection(Slice.maxOpen(Fragment.fromArray(nodes))).scrollIntoView(),
-            );
+        return nodes;
+      }, []);
 
-            return true;
-          },
-        },
-      });
-      this.addEditorListeners();
+      view.dispatch(
+        tr.replaceSelection(Slice.maxOpen(Fragment.fromArray(nodes))).scrollIntoView(),
+      );
+
+      return true;
     },
 
     processValue (newValue, returnIfEqual = true) {

diff --git a/packages/dialtone-vue2/recipes/conversation_view/editor/editor.vue b/packages/dialtone-vue2/recipes/conversation_view/editor/editor.vue
@@ -163,6 +163,7 @@
         :output-format="htmlOutputFormat"
         :auto-focus="autoFocus"
         :placeholder="placeholder"
+        :use-default-paste-handler="useDefaultPasteHandler"
         :allow-line-breaks="true"
         :link="true"
         v-bind="$attrs"
@@ -458,6 +459,14 @@ export default {
         setLinkInputAriaLabel: 'Input field to add link',
       }),
     },
+
+    /**
+     * Use default paste handler.
+     */
+    useDefaultPasteHandler: {
+      type: Boolean,
+      default: false,
+    },
   },
 
   emits: [

diff --git a/packages/dialtone-vue2/recipes/conversation_view/editor/editor_default.story.vue b/packages/dialtone-vue2/recipes/conversation_view/editor/editor_default.story.vue
@@ -28,6 +28,7 @@
       :show-quote-button="$attrs.showQuoteButton"
       :show-quick-replies-button="$attrs.showQuickRepliesButton"
       :show-code-block-button="$attrs.showCodeBlockButton"
+      :use-default-paste-handler="$attrs.useDefaultPasteHandler"
       @focus="$attrs.onFocus"
       @blur="$attrs.onBlur"
       @input="$attrs.onInput"

diff --git a/packages/dialtone-vue3/components/rich_text_editor/rich_text_editor.vue b/packages/dialtone-vue3/components/rich_text_editor/rich_text_editor.vue
@@ -289,6 +289,14 @@ export default {
       type: Array,
       default: () => [],
     },
+
+    /**
+     * Use default paste handler.
+     */
+    useDefaultPasteHandler: {
+      type: Boolean,
+      default: false,
+    },
   },
 
   emits: [
@@ -530,43 +538,45 @@ export default {
             to fix our issue of line breaks outputting as paragraphs. Code taken from this thread:
             https://discuss.prosemirror.net/t/how-to-preserve-hard-breaks-when-pasting-html-into-a-plain-text-schema/4202/4
           */
-          handlePaste: function (view, event, slice) {
-            const { state } = view;
-            const { tr } = state;
+          ...(!this.useDefaultPasteHandler && { handlePaste: this.handlerPreserveBreaksOnPaste }),
+        },
+      });
+      this.addEditorListeners();
+    },
 
-            if (!state.schema.nodes.hardBreak) {
-              return false;
-            }
+    handlerPreserveBreaksOnPaste (view, event, slice) {
+      const { state } = view;
+      const { tr } = state;
 
-            const clipboardText = event.clipboardData?.getData('text/plain').trim();
+      if (!state.schema.nodes.hardBreak) {
+        return false;
+      }
 
-            if (!clipboardText) {
-              return false;
-            }
+      const clipboardText = event.clipboardData?.getData('text/plain').trim();
 
-            const textLines = clipboardText.split(/(?:\r\n|\r|\n)/g);
+      if (!clipboardText) {
+        return false;
+      }
 
-            const nodes = textLines.reduce((nodes, line, index) => {
-              if (line.length > 0) {
-                nodes.push(state.schema.text(line));
-              }
+      const textLines = clipboardText.split(/(?:\r\n|\r|\n)/g);
 
-              if (index < textLines.length - 1) {
-                nodes.push(state.schema.nodes.hardBreak.create());
-              }
+      const nodes = textLines.reduce((nodes, line, index) => {
+        if (line.length > 0) {
+          nodes.push(state.schema.text(line));
+        }
 
-              return nodes;
-            }, []);
+        if (index < textLines.length - 1) {
+          nodes.push(state.schema.nodes.hardBreak.create());
+        }
 
-            view.dispatch(
-              tr.replaceSelection(Slice.maxOpen(Fragment.fromArray(nodes))).scrollIntoView(),
-            );
+        return nodes;
+      }, []);
 
-            return true;
-          },
-        },
-      });
-      this.addEditorListeners();
+      view.dispatch(
+        tr.replaceSelection(Slice.maxOpen(Fragment.fromArray(nodes))).scrollIntoView(),
+      );
+
+      return true;
     },
 
     processValue (newValue, returnIfEqual = true) {

diff --git a/packages/dialtone-vue3/recipes/conversation_view/editor/editor.vue b/packages/dialtone-vue3/recipes/conversation_view/editor/editor.vue
@@ -164,6 +164,7 @@
         :output-format="htmlOutputFormat"
         :auto-focus="autoFocus"
         :placeholder="placeholder"
+        :use-default-paste-handler="useDefaultPasteHandler"
         :allow-line-breaks="true"
         :link="true"
         v-bind="$attrs"
@@ -461,6 +462,14 @@ export default {
         setLinkInputAriaLabel: 'Input field to add link',
       }),
     },
+
+    /**
+     * Use default paste handler.
+     */
+    useDefaultPasteHandler: {
+      type: Boolean,
+      default: false,
+    },
   },
 
   emits: [

diff --git a/packages/dialtone-vue3/recipes/conversation_view/editor/editor_default.story.vue b/packages/dialtone-vue3/recipes/conversation_view/editor/editor_default.story.vue
@@ -28,6 +28,7 @@
       :show-quote-button="$attrs.showQuoteButton"
       :show-quick-replies-button="$attrs.showQuickRepliesButton"
       :show-code-block-button="$attrs.showCodeBlockButton"
+      :use-default-paste-handler="$attrs.useDefaultPasteHandler"
       @focus="$attrs.onFocus"
       @blur="$attrs.onBlur"
       @input="$attrs.onInput"