Skip to content

feat(admin): add table support to PortableText editor#222

Closed
tohaitrieu wants to merge 1 commit into
emdash-cms:mainfrom
tohaitrieu:feat/table-support
Closed

feat(admin): add table support to PortableText editor#222
tohaitrieu wants to merge 1 commit into
emdash-cms:mainfrom
tohaitrieu:feat/table-support

Conversation

@tohaitrieu
Copy link
Copy Markdown

@tohaitrieu tohaitrieu commented Apr 4, 2026

What does this PR do?

Adds table support to the TipTap/PortableText editor in the admin UI. Users can now insert, edit, and manage tables in content with proper toolbar controls.

Changes:

  • Add TipTap table extensions (Table, TableRow, TableCell, TableHeader)
  • Add table controls to editor toolbar
  • Style tables for consistent appearance

Discussion: #217

Type of change

  • Bug fix
  • Feature (requires approved Discussion)
  • Refactor (no behavior change)
  • Documentation
  • Performance improvement
  • Tests
  • Chore (dependencies, CI, tooling)

Checklist

  • I have read CONTRIBUTING.md
  • pnpm typecheck passes
  • pnpm --silent lint:json | jq '.diagnostics | length' returns 0
  • pnpm test passes (or targeted tests for my change)
  • pnpm format has been run
  • I have added/updated tests for my changes (if applicable)
  • I have added a changeset (if this PR changes a published package)
  • New features link to an approved Discussion: Feature: Table support in the editor #217

@changeset-bot
Copy link
Copy Markdown

changeset-bot Bot commented Apr 4, 2026

🦋 Changeset detected

Latest commit: 0be5376

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 13 packages
Name Type
@emdash-cms/admin Major
emdash Major
@emdash-cms/auth-atproto Major
@emdash-cms/cloudflare Major
@emdash-cms/fixture-perf-site Patch
@emdash-cms/perf-demo-site Patch
@emdash-cms/cache-demo-site Patch
@emdash-cms/auth Major
@emdash-cms/blocks Major
@emdash-cms/gutenberg-to-portable-text Major
@emdash-cms/x402 Major
create-emdash Major
@emdash-cms/plugin-embeds Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented Apr 4, 2026

All contributors have signed the CLA ✍️ ✅
Posted by the CLA Assistant Lite bot.

@tohaitrieu
Copy link
Copy Markdown
Author

I have read the CLA Document and I hereby sign the CLA

github-actions Bot added a commit that referenced this pull request Apr 4, 2026
@pkg-pr-new
Copy link
Copy Markdown

pkg-pr-new Bot commented Apr 4, 2026

Open in StackBlitz

@emdash-cms/admin

npm i https://pkg.pr.new/@emdash-cms/admin@222

@emdash-cms/auth

npm i https://pkg.pr.new/@emdash-cms/auth@222

@emdash-cms/blocks

npm i https://pkg.pr.new/@emdash-cms/blocks@222

@emdash-cms/cloudflare

npm i https://pkg.pr.new/@emdash-cms/cloudflare@222

emdash

npm i https://pkg.pr.new/emdash@222

create-emdash

npm i https://pkg.pr.new/create-emdash@222

@emdash-cms/gutenberg-to-portable-text

npm i https://pkg.pr.new/@emdash-cms/gutenberg-to-portable-text@222

@emdash-cms/x402

npm i https://pkg.pr.new/@emdash-cms/x402@222

@emdash-cms/plugin-ai-moderation

npm i https://pkg.pr.new/@emdash-cms/plugin-ai-moderation@222

@emdash-cms/plugin-atproto

npm i https://pkg.pr.new/@emdash-cms/plugin-atproto@222

@emdash-cms/plugin-audit-log

npm i https://pkg.pr.new/@emdash-cms/plugin-audit-log@222

@emdash-cms/plugin-color

npm i https://pkg.pr.new/@emdash-cms/plugin-color@222

@emdash-cms/plugin-embeds

npm i https://pkg.pr.new/@emdash-cms/plugin-embeds@222

@emdash-cms/plugin-forms

npm i https://pkg.pr.new/@emdash-cms/plugin-forms@222

@emdash-cms/plugin-webhook-notifier

npm i https://pkg.pr.new/@emdash-cms/plugin-webhook-notifier@222

commit: 0be5376

@tohaitrieu tohaitrieu force-pushed the feat/table-support branch from 78907f8 to 7ecfe74 Compare April 4, 2026 10:45
@ascorbic
Copy link
Copy Markdown
Collaborator

ascorbic commented Apr 4, 2026

Thanks! Could you add a changeset, so this is included in the changelog and triggers a release. There's more info in CONTRIBUTING.md

@tohaitrieu tohaitrieu force-pushed the feat/table-support branch from 91a8cbf to 09eb300 Compare April 4, 2026 16:43
@ascorbic
Copy link
Copy Markdown
Collaborator

ascorbic commented Apr 4, 2026

There seems to be quite a bit of extra stuff in here, beyond the main feature

@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented Apr 6, 2026

Overlapping PRs

This PR modifies files that are also changed by other open PRs:

This may cause merge conflicts or duplicated work. A maintainer will coordinate.

Copy link
Copy Markdown
Collaborator

@ascorbic ascorbic left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks. This is a great addition. It just needs a few changes. Can you also add unit tests for both conversion directions and ensure oyu have completed the checklist in the description.

Comment thread packages/admin/src/styles.css Outdated

.ProseMirror td,
.ProseMirror th {
border: 1px solid #d1d5db;
Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can we avoid using hard-coded colours. The rest of the admin UI uses Tailwind and Kumo design tokens, and these won't follow that. That applies to the other places in here too.

Comment thread packages/admin/package.json Outdated
Comment on lines +64 to +67
"@tiptap/extension-table": "^3.22.1",
"@tiptap/extension-table-cell": "^3.22.1",
"@tiptap/extension-table-header": "^3.22.1",
"@tiptap/extension-table-row": "^3.22.1",
Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can we use catalog dependencies here, and ensure they match the other tiptap extension versions

: "tableCell";

// Map PortableText marks to ProseMirror marks
const markNameMap: Record<string, string> = {
Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There's already a convertPTMarks function in this file that handles the PT/PM mark mapping. Please use that instead of the inline markNameMap here – it handles link markDefs too, which this version silently drops.

@github-actions
Copy link
Copy Markdown
Contributor

This PR has been inactive for 14 days. It will be closed automatically in 7 days if there is no further activity.

If you're still working on this, please push an update or leave a comment.

@github-actions github-actions Bot added stale and removed stale labels Apr 25, 2026
@ascorbic
Copy link
Copy Markdown
Collaborator

@tohaitrieu it would be great to get this in! It shouldn't take much to get it ready

@tohaitrieu tohaitrieu force-pushed the feat/table-support branch 2 times, most recently from ad03e33 to d68dc52 Compare April 27, 2026 13:26
- Add TipTap table extensions (Table, TableRow, TableCell, TableHeader)
- Add table controls to editor toolbar with slash command (/table)
- Add TableBubbleMenu for editing tables (add/remove rows/columns)
- Update PT↔PM converters with proper markDefs handling for links
- Use Kumo design tokens for table styling (no hard-coded colors)
- Add unit tests for table conversion in both directions
@oiwa-coder
Copy link
Copy Markdown

@tohaitrieu you still working on this? if not ill make one.

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

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants