Skip to content

feat: markdown tabs in rendered view via ```tabs fenced block - #84

Draft
adam4813 with Copilot wants to merge 4 commits into
mainfrom
copilot/add-tabs-within-rendered-view
Draft

feat: markdown tabs in rendered view via ```tabs fenced block#84
adam4813 with Copilot wants to merge 4 commits into
mainfrom
copilot/add-tabs-within-rendered-view

Conversation

Copilot AI commented Aug 31, 2026

Copy link
Copy Markdown
Contributor

No native way to author tabbed content panels inside a note. Adds a TabGroupExtension TipTap node that renders ```tabs ``` fenced code blocks as interactive tabbed panels in the WYSIWYG editor, round-tripping cleanly back to markdown.

Syntax

```tabs
## Installation
Run `npm install my-package` to get started.

## Usage
Import and call `myPackage.init()`.

## API
See the full reference below.
```

Tabs are delimited by ## headings within the fenced block. Everything before the first heading is ignored.

Changes

  • packages/editor/src/tabs-extension.tsx — new TabGroupExtension TipTap Node:
    • ProseMirror plugin intercepts codeBlock[language=tabs] nodes and replaces them with a tabGroup atom rendered via ReactNodeViewRenderer
    • Exported parseTabsContent / serializeTabsContent helpers for split/join of tab bodies
    • Lightweight inline markdown-to-HTML converter for tab panel bodies (headings, bold/italic, lists, code, links, blockquotes) — no additional parser dependency
    • Heading detection is string-based (no capturing-group regex) to avoid ReDoS
  • packages/editor/src/rendered-editor.tsx — registers TabGroupExtension in the editor extension list
  • packages/editor/src/index.ts — re-exports the new module
  • apps/web/src/styles.css.tab-group component styles using existing CSS design tokens
  • packages/editor/src/tabs-extension.test.ts — 9 unit tests for parse/serialize round-trip

Copilot AI linked an issue Aug 31, 2026 that may be closed by this pull request
Copilot AI and others added 2 commits August 31, 2026 18:32
Adds a `TabGroupExtension` TipTap extension that renders ` ```tabs ``` `
fenced code blocks as interactive tabbed panels.

Syntax:
  ```tabs
  ## Tab 1
  Content for the first tab.

  ## Tab 2
  Content for the second tab.
  ```

- packages/editor/src/tabs-extension.tsx: new extension + parse/serialize helpers
- packages/editor/src/tabs-extension.test.ts: unit tests (9 passing)
- packages/editor/src/rendered-editor.tsx: wire TabGroupExtension into editor
- packages/editor/src/index.ts: re-export new module
- apps/web/src/styles.css: tab-group UI styles

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Copilot AI changed the title [WIP] Add markdown syntax support for tabs in rendered view feat: markdown tabs in rendered view via ```tabs fenced block Aug 31, 2026
Copilot AI requested a review from adam4813 August 31, 2026 18:34
@adam4813

Copy link
Copy Markdown
Owner

@copilot you forgot to run lint and test. Review the lint and test errors/warnings and fix them

Replace /^[*\-] / with /^[*-] / in the tabs-extension markdownToHtml
helper to fix the no-useless-escape lint errors.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

Copilot AI commented Aug 31, 2026

Copy link
Copy Markdown
Contributor Author

@copilot you forgot to run lint and test. Review the lint and test errors/warnings and fix them

Fixed in the latest commit. ESLint flagged 3 no-useless-escape errors in character classes (/^[*\-] //^[*-] /) inside tabs-extension.tsx. Lint is now clean and all 165 tests pass.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Add tabs within rendered view

2 participants