Quill: Fix table insert

DevExpress · Nov 9, 2023 · 44ac303 · 44ac303
1 parent 14f911b
commit 44ac303
Show file tree

Hide file tree

Showing 3 changed files with 72 additions and 8 deletions.
diff --git a/formats/table/index.js b/formats/table/index.js
@@ -350,16 +350,22 @@ class RowContainer extends Container {
       this.statics.requiredContainer
       && !(this.parent instanceof this.statics.requiredContainer)
     ) {
-      const { domNode } = this.children.head.children.head.children.head;
+      const domNode = this.children.head.children.head.children?.head?.domNode || null;
       const formats = {};
-      Object.keys(TABLE_FORMATS).forEach((format) => {
-        const value = domNode.dataset[format.toLowerCase()];
-        if (value) {
-          formats[format] = value;
-        }
-      });
+
+      if (domNode) {
+        Object.keys(TABLE_FORMATS).forEach((format) => {
+          const value = domNode.dataset[format.toLowerCase()];
+
+          if (value) {
+            formats[format] = value;
+          }
+        });
+      }
+
       this.wrap(this.statics.requiredContainer.blotName, formats);
     }
+
     super.optimize(...args);
   }
 }
@@ -530,7 +536,7 @@ class TableContainer extends Container {
     const formats = {};
     const childElem = this.cells()[0].domNode.firstElementChild;
     Object.keys(TABLE_FORMATS).forEach((format) => {
-      const value = childElem.dataset[format.toLowerCase()];
+      const value = childElem?.dataset[format.toLowerCase()];
       if (value) {
         formats[format] = value;
       }

diff --git a/test/functional/epic.js b/test/functional/epic.js
@@ -490,6 +490,34 @@ if (!isMac) {
   });
 }
 
+describe('Mutation content with table', function () {
+  it('Should be no errors when table is inserted to editor (T1180959)', async function () {
+    const browser = await puppeteer.launch({
+      headless: false,
+    });
+    const page = await browser.newPage();
+
+    await page.goto(`${HOST}/table_drag_drop.html`);
+    await page.waitForSelector('.ql-editor', { timeout: 10000 });
+
+    page.on('pageerror', () => {
+      expect(true).toEqual(false);
+    });
+
+    await page.evaluate(() => {
+      const editor = document.querySelector('.ql-editor');
+
+      const table = document.createElement('table');
+
+      table.innerHTML = '<tbody><tr><td><p><br/></p></td><td><p>Custom text</p></td></tr></tbody>';
+
+      editor.appendChild(table);
+    });
+
+    expect(true).toEqual(true);
+  });
+});
+
 function getSelectionInTextNode() {
   const {
     anchorNode, anchorOffset, focusNode, focusOffset,

diff --git a/test/functional/example/table_drag_drop.html b/test/functional/example/table_drag_drop.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>DevExtreme-Quill</title>
+    <link rel="stylesheet" type="text/css" href="src/dx-quill.core.css" />
+    <script type="text/javascript" src="src/dx-quill.js"></script>
+</head>
+
+<body>
+    <div>
+        <div id="editor">
+            <p>Init text</p>
+        </div>
+    </div>
+</body>
+
+<script>
+    const editorContainer = document.getElementById('editor');
+    const quillInstance = new DevExpress.Quill(editorContainer, {
+        modules: {
+            table: true
+        }
+    });
+</script>
+
+</html>