feat(editor): redesign examples app and fix bubble menu bugs#3094
feat(editor): redesign examples app and fix bubble menu bugs#3094joaopcm wants to merge 3 commits intofeat/ai-oss-editorfrom
Conversation
…mples Rethink the examples app from 4 flat tabs to 11 curated examples organized by difficulty (Getting Started, Intermediate, Advanced) with a fixed sidebar and hash-based routing. Editor improvements: - Fix bubble menu collision bug caused by shared pluginKey across all menus - Add excludeMarks support to BubbleMenuRoot for mark-based exclusion - Add ButtonBubbleMenu form + unlink components for editing button links - Fix LinkBubbleMenu form not syncing href on edit - Align bubble menu sizing across text, link, and button menus - Add link and button default styles to editor theme - Bump version to 0.0.0-experimental.30
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
commit: |
![cubic-dev-ai[bot]](https://avatars.githubusercontent.com/in/1082092?s=60&v=4){kind=small}
|
Auto-merge enabled (squash) via PR Sentinel. |
joaopcm
force-pushed
the
joaopcm/editor-examples-app
branch
from
14600e2 to
26657e2
Compare
|
Auto-merge disabled via PR Sentinel. |
| type EditorTheme = 'basic' | 'minimal'; | ||
|
|
||
| export function EmailThemingExample() { | ||
| const [theme, setTheme] = useState<EditorTheme>('basic'); |
There was a problem hiding this comment.
this could actually be set without having to re-render the entire tree, only thing is it's not a great api right now. you'd do editor.commands.setGlobalContent('theme', 'basic') maybe we should add a better API there and then use it here?
2 participants
Summary
Redesigns the editor examples app from 4 flat tabs to 11 curated examples organized by difficulty (Getting Started → Intermediate → Advanced) with a fixed sidebar and hash-based routing (
useHashRoutehook, zero dependencies).Demo
https://www.loom.com/share/c414c564696a4318b0aa9decfb25b035
Examples app changes:
ExampleShellfor consistent layoutsections[]array drives sidebar + routing)Editor bug fixes and improvements:
pluginKey = 'bubbleMenu', causingshouldShowfunctions to cross-contaminate via tiptap'supdateOptionsmechanism. Each menu now has a unique key (textBubbleMenu,linkBubbleMenu,buttonBubbleMenu,imageBubbleMenu)excludeMarkstoBubbleMenuRoot: allows hiding text bubble menu when a mark (likelink) is active, complementing existingexcludeNodesButtonBubbleMenuForm+ButtonBubbleMenuUnlink: button bubble menu can now edit/remove button links (pencil + unlink icons)LinkBubbleMenuFormstale input:inputValuenow syncs withdisplayHrefwhen editing starts0.375rem, icons0.875rem)Testing steps
pnpm devinpackages/editor/examplesand verify sidebar renders all 11 examplesSummary by cubic
Redesigned the
@react-email/editorexamples app into 11 curated demos with a fixed sidebar and hash-based routing. Fixed bubble menu collisions and improved link/button menus and default theming.New Features
useHashRoute,ExampleShell, and a registry-drivensections[](Getting Started → Intermediate → Advanced) covering: Basic Editor, Bubble Menu, Slash Commands, Custom Bubble Menu, Link Editing, Column Layouts, Buttons, Email Theming, Email Export, Custom Extensions, Full Email Builder.excludeMarkstoBubbleMenu.Root/BubbleMenu.Default,excludeNodesnow checks ancestors; unified menu padding (0.375rem) and icon size (0.875rem); added default link and button theme styles.validateUrl,onLinkApply,onLinkRemove, plus unlink action; edit icon switched to pencil and unlink shows only when a link exists.Bug Fixes
pluginKeys:textBubbleMenu,linkBubbleMenu,buttonBubbleMenu,imageBubbleMenu.displayHrefwhen editing starts and removes the double border.shouldShowsignature and button menu behavior.Written for commit 26657e2. Summary will update on new commits.