Add Markdown table insertion extension with menubar button and slash command

[zhoumowan]

Motivation

• Provide a quick way to insert a Markdown table template into the editor from the UI and slash menu.
• Encapsulate table generation as a reusable TipTap command with sane row/column limits.

Description

• Add a new MarkdownTable TipTap extension (src/components/editor/extensions/markdown-table/index.ts) that exposes the insertMarkdownTable command and generates a simple table template while clamping rows/columns between 1 and 12.
• Register the new MarkdownTable extension in the editor extensions list (src/components/editor/extensions/index.ts).
• Add a table button to the menubar actions that calls insertMarkdownTable({ columns: 3, rows: 2 }) (src/components/editor/menubar/actions.ts).
• Add a "Table" item to the slash command suggestion list which deletes the slash range and inserts the same markdown table template (src/components/editor/slash-command/suggestion-list.tsx).

Testing

• Ran the project's unit test suite with yarn test and all tests passed.
• Ran the linter with yarn lint and no lint errors were reported.

---

Codex Task

---

[devin-ai-integration]

Devin Review found 1 potential issue.

View 3 additional findings in Devin Review.

[devin-ai-integration]

🔴 insertMarkdownTable uses insertContent with raw markdown string, which is treated as HTML and collapses all newlines

The insertMarkdownTable command passes a raw markdown table string to commands.insertContent(). In TipTap, insertContent with a string treats it as HTML, where newlines are whitespace and get collapsed. The result is a single paragraph with all table rows concatenated on one line (e.g., | Column 1 | Column 2 | ... | | --- | --- | ... | | Value 1-1 | ...), instead of a multi-line table.

The codebase itself demonstrates the correct approach at src/hooks/useAiCopilot.ts:174-193: markdown text must first be converted using editor.storage.markdown.parser.parse() before being passed to insertContentAt. The tiptap-markdown extension does not automatically intercept insertContent to parse markdown — it only provides the parser through storage.

Prompt for agents

The insertMarkdownTable command at markdown-table/index.ts:48 passes raw markdown text to commands.insertContent(), which treats it as HTML, collapsing all newlines into whitespace and producing a single garbled paragraph.

The correct pattern is already established in the codebase at src/hooks/useAiCopilot.ts:174-193: use editor.storage.markdown.parser.parse() to convert markdown text into ProseMirror-compatible content before inserting it.

The fix needs to change the command implementation. Since the command API receives ({ commands, editor }) in the command callback, the editor instance (and its storage.markdown.parser) is accessible. The approach would be:
1. In the addCommands() return, destructure { editor } in addition to { commands } from the command props.
2. Use editor.storage.markdown.parser.parse() to convert the markdown table string into parsed content.
3. Pass the parsed result to commands.insertContent() or commands.insertContentAt().

However, there is an additional concern: since there is no @tiptap/extension-table in the project's dependencies, the ProseMirror schema has no table node types. Even with proper markdown parsing, the HTML table produced by markdown-it would have no corresponding ProseMirror nodes, and the table structure would be lost. A complete fix likely requires either adding the @tiptap/extension-table package or rethinking how the table content is represented (e.g., each row as a separate paragraph preserving the pipe syntax).

---

Was this helpful? React with 👍 or 👎 to provide feedback.

[chatgpt-codex-connector]

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: 7ba1c22e08

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

• Open a pull request for review
• Mark a draft as ready
• Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

[chatgpt-codex-connector]

Use markdown-aware insertion for table template

Switch this command to markdown-aware insertion (insertContentAt or explicit markdown parsing) instead of insertContent. In this repo, tiptap-markdown only overrides setContent/insertContentAt to parse Markdown, so this call inserts the table string as plain text into the current node. The menubar/slash actions therefore produce literal | --- | text rather than parsed Markdown structure, which is especially visible when triggered inside existing blocks (e.g., list items or headings).

Useful? React with 👍 / 👎.