Skip to content

Rich Text Editor - Copy/Paste Text from Table Not Behaving Properly

Problem

When copying text inside a table, it is pasted as a table.

GIF_30.08.2023_09-36-08.gif

Implementation guide

If contents of a single cell are copied, only the content should be copied. If more than one cells are selected and copied, it should be copied as a table.

Below patch should fix it:

diff --git a/app/assets/javascripts/content_editor/extensions/copy_paste.js b/app/assets/javascripts/content_editor/extensions/copy_paste.js
index ab9e56196009..e4c993005634 100644
--- a/app/assets/javascripts/content_editor/extensions/copy_paste.js
+++ b/app/assets/javascripts/content_editor/extensions/copy_paste.js
@@ -113,10 +113,21 @@ export default Extension.create({

     const handleCutAndCopy = (view, event) => {
       const slice = view.state.selection.content();
-      const gfmContent = this.options.serializer.serialize({ doc: slice.content });
       const documentFragment = DOMSerializer.fromSchema(view.state.schema).serializeFragment(
         slice.content,
       );
+
+      let gfmContent = this.options.serializer.serialize({ doc: slice.content });
+      const gfmContentWithoutSingleTableCell = gfmContent.replace(
+        /^<table>\n<tr>\n<t[hd]>|<\/t[hd]>\n<\/tr>\n<\/table>$/,
+        '',
+      );
+      const containsSingleTableCell = !/<t[hd]>/.test(gfmContentWithoutSingleTableCell);
+
+      if (containsSingleTableCell) {
+        gfmContent = gfmContentWithoutSingleTableCell;
+      }
+
       const div = document.createElement('div');
       div.appendChild(documentFragment);
Edited by Himanshu Kapoor