✨ Feature: Copy Table as Markdown in Editor Bubble Menu

[nqdd]

Summary

This PR introduces a new feature to the Acreom editor: Copy Table as Markdown, allowing users to seamlessly export any table in the editor to a clean, GitHub-compatible Markdown format with a single click.

🔍 What’s New

• UI Addition:

  • Added a new button to the editor’s bubble menu, adjacent to existing table controls.
  • Includes tooltip: “Copy as markdown”.

• Functionality:

  • Locates the parent table node of the current selection using findParentNodeClosestToPos.
  • Extracts and serializes the table content into Markdown format.
  • Beautifies the Markdown for consistent column alignment.
  • Copies the formatted Markdown to the clipboard and notifies the user.

• Error Handling:

  • Displays a user-friendly notification if copying fails.

🧠 Clipboard Extension Improvements

• Markdown Table Parsing on Paste:

  • Added a new clipboard handler that detects Markdown tables (e.g., copied from GitHub) and converts them into Acreom’s internal table format when pasted.
  • Prevents table parsing if pasted inside an existing table node to avoid conflicts.

• New Extension table-clipboard-handler:

  • Based on markdown-it for parsing.
  • Automatically converts Markdown table text into proper ProseMirror table nodes.

🧩 Dependencies Added

• markdown-it: Lightweight Markdown parser used to render tables from text.
• @types/markdown-it, @types/linkify-it, @types/mdurl: TypeScript support for the new parser.

🧪 Tested

• ✅ Copying tables with various column counts and cell contents.
• ✅ Beautified Markdown output aligned as expected.
• ✅ Correct parsing and rendering of pasted Markdown tables.
• ✅ Clipboard integration and notifications tested on multiple environments.

📸 Preview

Screen.Recording.2025-05-25.at.23.43.15.mov

✨

Description by Callstackai

This PR introduces a new feature to the Acreom editor that allows users to copy tables as Markdown, enhancing the editor's functionality and user experience.

Diagrams of code changes

sequenceDiagram
    participant User
    participant BubbleMenu
    participant TableClipboardHandler
    participant MarkdownParser

    %% Copy table as markdown flow
    User->>BubbleMenu: Click "Copy as markdown"
    BubbleMenu->>BubbleMenu: parseTableToMarkdown()
    BubbleMenu->>BubbleMenu: beautifyMarkdownTable()
    BubbleMenu-->>User: Copy formatted markdown to clipboard

    %% Paste markdown table flow
    User->>TableClipboardHandler: Paste markdown table
    TableClipboardHandler->>TableClipboardHandler: Check if valid table format
    TableClipboardHandler->>MarkdownParser: Parse markdown to HTML
    MarkdownParser-->>TableClipboardHandler: Return HTML table
    TableClipboardHandler->>TableClipboardHandler: Convert to ProseMirror nodes
    TableClipboardHandler-->>User: Insert table at cursor position

Loading

Files Changed

File	Summary
frontend/components/editor/bubble-menu/BubbleMenu.default.vue	Added a button to copy tables as Markdown in the editor's bubble menu.
frontend/components/editor/extensions/clipboard/index.ts	Updated clipboard extension to include new functionality.
frontend/components/editor/extensions/clipboard/table.ts	Implemented Markdown table parsing for clipboard pasting.
frontend/package.json	Added dependencies for markdown-it and its TypeScript types.

This PR includes files in programming languages that we currently do not support. We have not reviewed files with the extensions .vue, .ts, .json. See list of supported languages.

[netlify]

✅ Deploy Preview for acreom-app ready!

Name	Link
🔨 Latest commit	3714523
🔍 Latest deploy log	https://app.netlify.com/projects/acreom-app/deploys/68334b1991ef8800074ff0b5
😎 Deploy Preview	https://deploy-preview-41.preview.acreom.com
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.