Add header parsing functionality to table utility (#9)

A new function, `matchHeader`, has been added to the table utility. This function enables the parsing of headers within the table cells as they are not directly supported.
mild-blue · Feb 13, 2024 · cc574b5 · cc574b5
1 parent b334923
commit cc574b5
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 3 deletions.
diff --git a/src/modules/better-table/modules/table-operation-menu.ts b/src/modules/better-table/modules/table-operation-menu.ts
@@ -401,7 +401,7 @@ export default class TableOperationMenu {
   }
 
   deleteItemCreator() {
-    const { text, iconSrc, handler } = {...MENU_ITEMS_DEFAULT[DELETE_TABLE_KEY], ...this.menuItems[DELETE_TABLE_KEY]};
+    const { text, iconSrc, handler } = { ...MENU_ITEMS_DEFAULT[DELETE_TABLE_KEY], ...this.menuItems[DELETE_TABLE_KEY] };
     const node = document.createElement("div");
     node.classList.add("qlbt-delete-menu-item");
 

diff --git a/src/modules/better-table/quill-better-table.ts b/src/modules/better-table/quill-better-table.ts
@@ -6,7 +6,7 @@ import TableSelection from "./modules/table-selection";
 import TableOperationMenu from "./modules/table-operation-menu";
 
 // import table node matchers
-import { matchTableCell, matchTableHeader, matchTable, matchElement } from "./utils/node-matchers";
+import { matchTableCell, matchTableHeader, matchTable, matchElement, matchHeader } from "./utils/node-matchers";
 
 import { getEventComposedPath } from "./utils/index";
 
@@ -153,7 +153,7 @@ export default class BetterTable extends Module {
     quill.clipboard.addMatcher("th", matchTableHeader);
     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)
+    quill.clipboard.addMatcher("h1, h2, h3, h4, h5, h6", (_, delta) => matchHeader(quill, delta));
 
     // remove matcher for tr tag
     quill.clipboard.matchers = quill.clipboard.matchers.filter((matcher) => {

diff --git a/src/modules/better-table/utils/node-matchers.ts b/src/modules/better-table/utils/node-matchers.ts
@@ -243,3 +243,38 @@ export function matchElement(quill, node, delta) {
 
   return delta;
 }
+
+export function matchHeader(quill, delta) {
+  const range = quill.getSelection();
+  const currentBlot = quill.getLeaf(range?.index)[0];
+
+  const parseHeadingSize = (size: number) => {
+    switch (size) {
+      case 1:
+        return "26px";
+      case 2:
+        return "20px";
+      case 3:
+        return "16px";
+      default:
+        return "11px";
+    }
+  };
+
+  // Replace headings with p since headings in tables are not supported
+  if (currentBlot && isInTableCell(currentBlot)) {
+    const newDelta = new Delta();
+
+    delta.ops.map((op) => {
+      if ("header" in op.attributes) {
+        newDelta.insert(op.insert, { bold: true, size: parseHeadingSize(op.attributes.header) });
+      } else {
+        newDelta.insert(op.insert, op.attributes);
+      }
+    });
+
+    return newDelta;
+  }
+
+  return delta;
+}