Move inner table outside the parent table (#1)

mild-blue · Jul 21, 2023 · 914533f · 914533f
1 parent e49c265
commit 914533f
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 2 deletions.
diff --git a/demo/script.ts b/demo/script.ts
@@ -12,6 +12,9 @@ window.onload = () => {
       imageResize: true,
       table: false,
       "better-table": {
+        table: {
+          tableInTableError: "This inner table was placed outside the parent table",
+        },
         operationMenu: {
           items: {
             unmergeCells: {

diff --git a/src/modules/better-table/quill-better-table.ts b/src/modules/better-table/quill-better-table.ts
@@ -151,7 +151,7 @@ export default class BetterTable extends Module {
     // or pasting
     quill.clipboard.addMatcher("td", matchTableCell);
     quill.clipboard.addMatcher("th", matchTableHeader);
-    quill.clipboard.addMatcher("table", matchTable);
+    quill.clipboard.addMatcher("table", (node, delta) => matchTable(node, delta, quill, options));
     quill.clipboard.addMatcher(Node.ELEMENT_NODE, (node, delta) => matchElement(quill, node, delta));
     // quill.clipboard.addMatcher('h1, h2, h3, h4, h5, h6', matchHeader)
 

diff --git a/...dules/better-table/utils/node-matchers.js → ...dules/better-table/utils/node-matchers.ts b/...dules/better-table/utils/node-matchers.js → ...dules/better-table/utils/node-matchers.ts
@@ -1,3 +1,5 @@
+// @ts-nocheck
+
 import Quill from "quill";
 import { _omit, convertToHex } from "./index";
 import { TableCellLine } from "../formats/table";
@@ -162,7 +164,20 @@ export function matchTableHeader(node, delta, scroll) {
 }
 
 // supplement colgroup and col
-export function matchTable(node, delta, scroll) {
+export function matchTable(node, delta, quill: Quill, options) {
+  const isBrokenTable = delta.ops.find((op) => "row" in op.attributes && "table-col" in op.attributes);
+  if (isBrokenTable) {
+    // delete broken tables from main table
+    const innerTables = Array.from(node.getElementsByTagName("table"));
+    const innerTablesHtml = innerTables
+      .map((table) => `<br /> ${options?.table?.tableInTableError ?? ""}` + table.outerHTML)
+      .join("");
+    innerTables.forEach((table) => table.parentNode.removeChild(table));
+
+    // append inner tables after main table
+    return quill.clipboard.convert({ html: node.outerHTML + innerTablesHtml });
+  }
+
   let newColDelta = new Delta();
   const topRow = node.querySelector("tr");