fix(editor): clarify markdown-table fallback behavior#5
Conversation
![devin-ai-integration[bot]](https://avatars.githubusercontent.com/in/811515?s=60&v=4){kind=small}
| onClick: () => | ||
| editor | ||
| .chain() | ||
| .focus() | ||
| .insertContent( | ||
| "\n| Column 1 | Column 2 | Column 3 |\n| --- | --- | --- |\n| Value 1 | Value 2 | Value 3 |\n", | ||
| ) | ||
| .run(), |
There was a problem hiding this comment.
🔴 Markdown table template inserted via insertContent with raw \n will not render as multi-line plain text
The table template string "\n| Column 1 | Column 2 | Column 3 |\n| --- | --- | --- |\n| Value 1 | Value 2 | Value 3 |\n" is passed to TipTap's insertContent as a raw string. This will not produce the intended multi-line plain-text output. The editor has tiptap-markdown configured (src/components/editor/extensions/index.ts:128), which intercepts insertContent to parse strings as markdown. Since markdown-it recognizes pipe-table syntax, it will parse this into a <table> HTML structure. However, there is no @tiptap/extension-table registered in the schema (not in package.json or the extensions list), so ProseMirror cannot represent table nodes — the table structure is silently dropped or flattened into plain cell text without pipe characters or separator lines. Even if tiptap-markdown did not intercept the call, TipTap's default behavior treats strings as HTML where \n is whitespace that gets collapsed, producing a single-line paragraph. Either way, the feature is broken. The fix should insert structured ProseMirror content (e.g., an array of paragraph nodes, one per table line) or wrap a code block around the template so it's treated as preformatted text.
Prompt for agents
The insertContent call in getInsertActions (actions.ts:169-176) passes a raw string with \n characters to represent line breaks in a markdown table template. TipTap's insertContent treats strings as HTML (where \n is collapsed whitespace) or, with tiptap-markdown installed, parses them as markdown (where the pipe-table syntax becomes a table node that the schema cannot represent since there is no @tiptap/extension-table).
To fix, use a JSON node array so each table line becomes its own paragraph:
editor.chain().focus().insertContent([
{ type: 'paragraph', content: [{ type: 'text', text: '| Column 1 | Column 2 | Column 3 |' }] },
{ type: 'paragraph', content: [{ type: 'text', text: '| --- | --- | --- |' }] },
{ type: 'paragraph', content: [{ type: 'text', text: '| Value 1 | Value 2 | Value 3 |' }] },
]).run()
Alternatively, wrap the template in a codeBlock node so the whitespace is preserved and displayed as preformatted text. Apply the same fix in suggestion-list.tsx:199-207.
Was this helpful? React with 👍 or 👎 to provide feedback.
| run: ({ editor, range }) => { | ||
| editor | ||
| .chain() | ||
| .focus() | ||
| .deleteRange(range) | ||
| .insertContent( | ||
| "\n| Column 1 | Column 2 | Column 3 |\n| --- | --- | --- |\n| Value 1 | Value 2 | Value 3 |\n", | ||
| ) | ||
| .run(); | ||
| }, |
There was a problem hiding this comment.
🔴 Markdown table template inserted via insertContent with raw \n will not render as multi-line plain text (slash command)
Same issue as the menubar action: the slash command's "Markdown Table" item at suggestion-list.tsx:199-207 passes the same raw markdown table string to insertContent. After deleteRange(range) removes the / trigger text, insertContent receives a \n-delimited string that will either be parsed as a markdown table (losing pipe formatting due to missing table schema node) or treated as HTML (collapsing newlines into whitespace). The result will not be the intended multi-line table template.
Prompt for agents
The insertContent call in the Markdown Table slash command item (suggestion-list.tsx:199-208) has the same issue as the menubar action. The raw string with \n characters will not produce multi-line plain text output.
Apply the same fix as for actions.ts: use a JSON node array to insert each line as a separate paragraph node, or use a codeBlock node. For example:
editor.chain().focus().deleteRange(range).insertContent([
{ type: 'paragraph', content: [{ type: 'text', text: '| Column 1 | Column 2 | Column 3 |' }] },
{ type: 'paragraph', content: [{ type: 'text', text: '| --- | --- | --- |' }] },
{ type: 'paragraph', content: [{ type: 'text', text: '| Value 1 | Value 2 | Value 3 |' }] },
]).run()
Was this helpful? React with 👍 or 👎 to provide feedback.
zhoumowan
force-pushed
the
main
branch
3 times, most recently
from
bc452eb to
8e241a8
Compare
1 participant
Motivation
@tiptap/extension-table*packages (registry 403), so UI wording should reflect the degraded behavior.Description
Markdown表格模板insrc/components/editor/menubar/actions.tsto indicate a plain-text template insertion.Markdown Table/Insert a markdown table template (plain text).insrc/components/editor/slash-command/suggestion-list.tsx.Testing
pnpm exec biome check src/components/editor/menubar/actions.ts src/components/editor/slash-command/suggestion-list.tsxwhich completed successfully.pnpm checkwhich completed with informational output and no blocking errors.pnpm add @tiptap/extension-table @tiptap/extension-table-row @tiptap/extension-table-header @tiptap/extension-table-cellwhich failed withERR_PNPM_FETCH_403(registry returned 403), so the fallback remains in place until packages can be installed.Codex Task