feat: improve Markdown tool toolbar UX

- Increase default width from 500px to 650px to fit full toolbar
- Add fixed-position toggle button (top-right) that doesn't move between states
- Remove horizontal scrollbar with overflow: hidden
- Add right padding to toolbar for toggle button space
- Tighten toolbar spacing (gap: 1px, padding: 4px 6px)

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Jeff Emmett 2025-12-04 03:00:48 -08:00
parent 26a931acf5
commit 2cee2cb31b
1 changed files with 50 additions and 43 deletions

View File

@ -48,7 +48,7 @@ export class MarkdownShape extends BaseBoxShapeUtil<IMarkdownShape> {
getDefaultProps(): IMarkdownShape['props'] { getDefaultProps(): IMarkdownShape['props'] {
return { return {
w: 500, w: 650,
h: 400, h: 400,
text: '', text: '',
pinnedToView: false, pinnedToView: false,
@ -236,47 +236,54 @@ export class MarkdownShape extends BaseBoxShapeUtil<IMarkdownShape> {
// Toolbar // Toolbar
toolbarPlugin({ toolbarPlugin({
toolbarContents: () => ( toolbarContents: () => (
<div style={{ display: 'flex', alignItems: 'center', width: '100%', gap: '4px' }}> isToolbarMinimized ? (
<button // When minimized, show nothing - the toggle button is rendered outside
onClick={() => setIsToolbarMinimized(!isToolbarMinimized)} <></>
style={{ ) : (
background: 'none', <div style={{ display: 'flex', alignItems: 'center', width: '100%', gap: '4px' }}>
border: 'none', <UndoRedo />
cursor: 'pointer', <Separator />
padding: '4px 6px', <BoldItalicUnderlineToggles />
fontSize: '12px', <Separator />
borderRadius: '4px', <BlockTypeSelect />
display: 'flex', <Separator />
alignItems: 'center', <ListsToggle />
justifyContent: 'center', <Separator />
}} <CreateLink />
title={isToolbarMinimized ? 'Expand toolbar' : 'Collapse toolbar'} <InsertTable />
> <Separator />
{isToolbarMinimized ? '▶' : '▼'} <DiffSourceToggleWrapper>
</button> <></>
{!isToolbarMinimized && ( </DiffSourceToggleWrapper>
<> </div>
<UndoRedo /> )
<Separator />
<BoldItalicUnderlineToggles />
<Separator />
<BlockTypeSelect />
<Separator />
<ListsToggle />
<Separator />
<CreateLink />
<InsertTable />
<Separator />
<DiffSourceToggleWrapper>
<></>
</DiffSourceToggleWrapper>
</>
)}
</div>
) )
}), }),
]} ]}
/> />
{/* Toolbar toggle button - fixed position, doesn't move */}
<button
onClick={() => setIsToolbarMinimized(!isToolbarMinimized)}
style={{
position: 'absolute',
top: '6px',
right: '8px',
background: isDarkMode ? 'rgba(42, 42, 42, 0.9)' : 'rgba(249, 250, 251, 0.9)',
border: `1px solid ${isDarkMode ? '#404040' : '#e5e7eb'}`,
cursor: 'pointer',
padding: '4px 6px',
fontSize: '10px',
borderRadius: '4px',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
color: isDarkMode ? '#e4e4e4' : '#374151',
zIndex: 10,
}}
title={isToolbarMinimized ? "Show toolbar" : "Hide toolbar"}
>
{isToolbarMinimized ? '▼' : '▲'}
</button>
</div> </div>
{/* Custom styles for the MDXEditor */} {/* Custom styles for the MDXEditor */}
@ -292,12 +299,12 @@ export class MarkdownShape extends BaseBoxShapeUtil<IMarkdownShape> {
flex-shrink: 0; flex-shrink: 0;
border-bottom: 1px solid #e5e7eb; border-bottom: 1px solid #e5e7eb;
background: #f9fafb; background: #f9fafb;
padding: 4px 8px; padding: 4px 6px;
gap: 2px; padding-right: 36px; /* Space for toggle button */
gap: 1px;
flex-wrap: nowrap; flex-wrap: nowrap;
overflow-x: auto; overflow: hidden;
overflow-y: hidden; display: ${isToolbarMinimized ? 'none' : 'flex'};
min-height: ${isToolbarMinimized ? '32px' : 'auto'};
} }
.mdxeditor [role="toolbar"] button { .mdxeditor [role="toolbar"] button {