table try to output html when cell contains complex content

Author: riccardoperra

markdown-schema/package.json

@@ -35,12 +35,13 @@
     "happy-dom": "^18.0.1",
     "hast-util-to-html": "^9.0.5",
     "mdast-util-from-markdown": "^2.0.2",
+    "mdast-util-to-hast": "^13.2.1",
     "mdast-util-to-markdown": "^2.1.2",
     "micromark-util-types": "^2.0.2",
     "prosekit": "catalog:",
     "prosemirror-inputrules": "catalog:",
-    "prosemirror-tables": "^1.8.1",
     "prosemirror-model": "catalog:",
+    "prosemirror-tables": "^1.8.1",
     "prosemirror-transformer-markdown": "workspace:*",
     "remark-comment-config": "^8.0.0",
     "remark-gfm": "catalog:"

markdown-schema/src/table/remarkTableOutputHtml.ts

@@ -0,0 +1,54 @@
+/*
+ * Copyright 2025 Riccardo Perra
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { EXIT, visit } from 'unist-util-visit'
+import { toHast } from 'mdast-util-to-hast'
+import { toHtml } from 'hast-util-to-html'
+import type { PhrasingContent, Root } from 'mdast'
+
+const nodeTypes: Array<string> = [
+  'text',
+  'break',
+  'link',
+  'inlineCode',
+  'strong',
+] satisfies Array<PhrasingContent['type']>
+
+export function remarkTableToHtmlOnComplexContent() {
+  return (tree: Root) => {
+    visit(tree, 'table', (node, index, parent) => {
+      let complex = false
+
+      visit(node, 'tableCell', (cell) => {
+        visit(cell, function (node) {
+          if (node.type !== 'tableCell' && !nodeTypes.includes(node.type)) {
+            complex = true
+            return EXIT
+          }
+          if (complex) {
+            return EXIT
+          }
+        })
+      })
+
+      if (complex && parent && typeof index === 'number') {
+        const hast = toHast(node)
+        const html = toHtml(hast)
+        parent.children[index] = { type: 'html', value: html }
+      }
+    })
+  }
+}

markdown-schema/src/table/table.test.ts

@@ -32,26 +32,26 @@ import {
   defineHardbreakMarkdown,
   remarkHtmlHardbreak,
 } from '../hardbreak/hardbreak'
-import { defineListMarkdown } from '../list/list'
+import { defineListMarkdown, unistMergeAdjacentList } from '../list/list'
 import { defineTableMarkdown } from './table'
+import { remarkTableToHtmlOnComplexContent } from './remarkTableOutputHtml'
 
 const extension = getMarksBaseExtensions([
   defineTableMarkdown(),
   defineHardbreakMarkdown(),
   defineListMarkdown(),
 ])
 
-const { doc, p, table, tableHeaderCell, tableRow, tableCell, br } = builders(
-  extension.schema!,
-  {
+const { doc, p, table, tableHeaderCell, tableRow, tableCell, br, list } =
+  builders(extension.schema!, {
     p: { nodeType: 'paragraph' },
     br: { nodeType: 'hardBreak' },
     table: { markType: 'table' },
     tableHeaderCell: { markType: 'tableHeaderCell' },
     tableRow: { markType: 'tableRow' },
     tableCell: { markType: 'tableCell' },
-  },
-)
+    list: { nodeType: 'list' },
+  })
 
 test('markdown -> prosemirror', () => {
   const editor = getEditorInstance(extension)
@@ -176,3 +176,60 @@ test('parse content with line breaks', () => {
 | Still nothing in this cell          | 1. This cell uses line breaks<br>2. to appear as a numbered list |`,
   )
 })
+
+test('render as html tag when includes non-phrasing content', () => {
+  const editor = getEditorInstance(
+    extension,
+    doc(
+      table(
+        tableRow(
+          tableHeaderCell(p('First Header')),
+          tableHeaderCell(p('Second Header')),
+        ),
+        tableRow(
+          tableCell(p('Content Cell 1')),
+          tableCell(
+            list({ kind: 'bullet' }, p('First item')),
+            list({ kind: 'bullet' }, p('Second item')),
+          ),
+        ),
+        tableRow(
+          tableCell(p('Content Cell 3')),
+          tableCell(p('Content Cell 4')),
+        ),
+      ),
+    ),
+  )
+
+  const result = convertPmSchemaToUnist(editor.state.doc, editor.schema, {
+    postProcess: (node) => {
+      unistMergeAdjacentList(node)
+      remarkTableToHtmlOnComplexContent()(node)
+    },
+  })
+
+  sameMarkdown(
+    result,
+    `<table>
+<thead>
+<tr>
+<th><p>First Header</p></th>
+<th><p>Second Header</p></th>
+</tr>
+</thead>
+<tbody>
+<tr>
+<td>Content Cell 1</td>
+<td><ul>
+<li>First item</li>
+<li>Second item</li>
+</ul></td>
+</tr>
+<tr>
+<td>Content Cell 3</td>
+<td>Content Cell 4</td>
+</tr>
+</tbody>
+</table>`,
+  )
+})

markdown-schema/src/table/table.ts

@@ -31,7 +31,9 @@ import { pmNode } from '@prosemirror-processor/unist'
 import { tableEditing } from 'prosemirror-tables'
 import { Fragment, Slice } from 'prosemirror-model'
 import { Transform } from 'prosekit/pm/transform'
-import type { Parent } from 'mdast'
+import type { Parent, PhrasingContent } from 'mdast'
+
+export { remarkTableToHtmlOnComplexContent } from './remarkTableOutputHtml'
 
 export function defineTableMarkdown() {
   return union(
@@ -74,6 +76,20 @@ export function defineTableMarkdown() {
         return tr.doc
       },
       __toUnist: (node, parent, context) => {
+        const { content } = node
+
+        if (
+          content.childCount === 1 &&
+          content.child(0).type.name === 'paragraph'
+        ) {
+          const p = content.child(0)
+          const childNodes = context.handleAll(p)
+          return {
+            type: 'tableCell',
+            children: childNodes as unknown as Array<PhrasingContent>,
+          } as const
+        }
+
         return fromProseMirrorNode('tableCell')(node, parent, context as any)
       },
       unistName: 'tableCell',

pnpm-lock.yaml

@@ -33,22 +33,22 @@ import './editor.css'
 
 import { unistMergeAdjacentList } from '@prosedoc/markdown-schema'
 import { useDocChange, useStateUpdate } from 'prosekit/solid'
-import { unknownNodeHandler } from '../core/custom/unknown-node/unknown-node-handler'
-import { remarkGitHubIssueReferenceSupport } from '../core/custom/issue-reference/remarkGitHubIssueReference'
-import { ProsekitEditor } from '../core/editor/editor'
-import { defineExtension } from '../core/editor/extension'
-import { ConfigStore } from '../config.store'
 import { ExtensionEditorStore } from '../editor.store'
-import { log } from './utils/logger'
-import { patchJsNativeTextareaValue } from './utils/jsNativeTextareaValuePatch'
-import { unistNodeFromMarkdown } from './utils/unistNodeFromMarkdown'
-import { DebugNode } from './DebugNode'
-import { setEditorContent } from './utils/setContent'
+import { ConfigStore } from '../config.store'
+import { defineExtension } from '../core/editor/extension'
+import { ProsekitEditor } from '../core/editor/editor'
+import { remarkGitHubIssueReferenceSupport } from '../core/custom/issue-reference/remarkGitHubIssueReference'
+import { unknownNodeHandler } from '../core/custom/unknown-node/unknown-node-handler'
 import { forceGithubTextAreaSync } from './utils/forceGithubTextAreaSync'
-import type { Root } from 'mdast'
-import type { GitHubUploaderHandler } from '../core/custom/image/github-file-uploader'
-import type { SuggestionData } from './utils/loadSuggestionData'
+import { setEditorContent } from './utils/setContent'
+import { DebugNode } from './DebugNode'
+import { unistNodeFromMarkdown } from './utils/unistNodeFromMarkdown'
+import { patchJsNativeTextareaValue } from './utils/jsNativeTextareaValuePatch'
+import { log } from './utils/logger'
 import type { Schema } from 'prosemirror-model'
+import type { SuggestionData } from './utils/loadSuggestionData'
+import type { GitHubUploaderHandler } from '../core/custom/image/github-file-uploader'
+import type { Root } from 'mdast'
 
 export interface EditorProps {
   suggestions: SuggestionData