Add Markdown table support to the Note node (#2072)

package-lock.json

@@ -15,6 +15,10 @@
         "@primevue/themes": "^4.0.5",
         "@tiptap/core": "^2.10.4",
         "@tiptap/extension-link": "^2.10.4",
+        "@tiptap/extension-table": "^2.10.4",
+        "@tiptap/extension-table-cell": "^2.10.4",
+        "@tiptap/extension-table-header": "^2.10.4",
+        "@tiptap/extension-table-row": "^2.10.4",
         "@tiptap/starter-kit": "^2.10.4",
         "@vueuse/core": "^11.0.0",
         "@xterm/addon-fit": "^0.10.0",
@@ -4762,6 +4766,59 @@
         "@tiptap/core": "^2.7.0"
       }
     },
+    "node_modules/@tiptap/extension-table": {
+      "version": "2.10.4",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-table/-/extension-table-2.10.4.tgz",
+      "integrity": "sha512-ak1RT8n0WQFNnVsZ9e6QFLWlRQP0IjT+Yp/PTsx5fSmqkiiwQKGs1ILCJWlBB3H0hV7N69aaOtK3h/35lmqoEg==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "^2.7.0",
+        "@tiptap/pm": "^2.7.0"
+      }
+    },
+    "node_modules/@tiptap/extension-table-cell": {
+      "version": "2.10.4",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-table-cell/-/extension-table-cell-2.10.4.tgz",
+      "integrity": "sha512-vYwRYt3xPaAU4hxoz3OMGPQzcAxaxEVri6VSRMWg4BN3x4DwWevBTAk59Ho9nkJpaRuXO6c5pIxcwWCZM0Aw0w==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "^2.7.0"
+      }
+    },
+    "node_modules/@tiptap/extension-table-header": {
+      "version": "2.10.4",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-table-header/-/extension-table-header-2.10.4.tgz",
+      "integrity": "sha512-NVi/KMBh9IAzpukjptCsH+gibZB3VxgCc+wuFk41QqI5ABnTPKWflnQ0wRo7IC6wC/tUi4YBahh20dL/wBJn3w==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "^2.7.0"
+      }
+    },
+    "node_modules/@tiptap/extension-table-row": {
+      "version": "2.10.4",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-table-row/-/extension-table-row-2.10.4.tgz",
+      "integrity": "sha512-kpQQSZQNYHhencIk+lzs+zWtgg6nUXHIVQKZUg5dVT0VP2JNO7wPM6d8HgnscvxOkJNRVF/Q5dYe0Cb4tROIKg==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "^2.7.0"
+      }
+    },
     "node_modules/@tiptap/extension-text": {
       "version": "2.10.4",
       "resolved": "https://registry.npmjs.org/@tiptap/extension-text/-/extension-text-2.10.4.tgz",

package.json

@@ -87,6 +87,10 @@
     "@primevue/themes": "^4.0.5",
     "@tiptap/core": "^2.10.4",
     "@tiptap/extension-link": "^2.10.4",
+    "@tiptap/extension-table": "^2.10.4",
+    "@tiptap/extension-table-cell": "^2.10.4",
+    "@tiptap/extension-table-header": "^2.10.4",
+    "@tiptap/extension-table-row": "^2.10.4",
     "@tiptap/starter-kit": "^2.10.4",
     "@vueuse/core": "^11.0.0",
     "@xterm/addon-fit": "^0.10.0",

src/assets/css/style.css

@@ -197,6 +197,21 @@ body {
   padding: 0.5em;
 }
 
+.comfy-markdown .tiptap table {
+  border-collapse: collapse;
+}
+
+.comfy-markdown .tiptap th {
+  text-align: left;
+  background: var(--comfy-menu-bg);
+}
+
+.comfy-markdown .tiptap th,
+.comfy-markdown .tiptap td {
+  padding: 0.5em;
+  border: thin solid;
+}
+
 .comfy-modal {
   display: none; /* Hidden by default */
   position: fixed; /* Stay in place */

src/scripts/widgets.ts

@@ -11,6 +11,10 @@ import { Editor as TiptapEditor } from '@tiptap/core'
 import TiptapStarterKit from '@tiptap/starter-kit'
 import { Markdown as TiptapMarkdown } from 'tiptap-markdown'
 import TiptapLink from '@tiptap/extension-link'
+import TiptapTable from '@tiptap/extension-table'
+import TiptapTableCell from '@tiptap/extension-table-cell'
+import TiptapTableHeader from '@tiptap/extension-table-header'
+import TiptapTableRow from '@tiptap/extension-table-row'
 
 export type ComfyWidgetConstructor = (
   node: LGraphNode,
@@ -373,7 +377,15 @@ function addMarkdownWidget(node, name: string, opts, app: ComfyApp) {
     transformPastedText: true
   })
   const editor = new TiptapEditor({
-    extensions: [TiptapStarterKit, TiptapMarkdown, TiptapLink],
+    extensions: [
+      TiptapStarterKit,
+      TiptapMarkdown,
+      TiptapLink,
+      TiptapTable,
+      TiptapTableCell,
+      TiptapTableHeader,
+      TiptapTableRow
+    ],
     content: opts.defaultVal,
     editable: false
   })