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,26 +236,11 @@ export class MarkdownShape extends BaseBoxShapeUtil<IMarkdownShape> {
// Toolbar // Toolbar
toolbarPlugin({ toolbarPlugin({
toolbarContents: () => ( toolbarContents: () => (
isToolbarMinimized ? (
// When minimized, show nothing - the toggle button is rendered outside
<></>
) : (
<div style={{ display: 'flex', alignItems: 'center', width: '100%', gap: '4px' }}> <div style={{ display: 'flex', alignItems: 'center', width: '100%', gap: '4px' }}>
<button
onClick={() => setIsToolbarMinimized(!isToolbarMinimized)}
style={{
background: 'none',
border: 'none',
cursor: 'pointer',
padding: '4px 6px',
fontSize: '12px',
borderRadius: '4px',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
}}
title={isToolbarMinimized ? 'Expand toolbar' : 'Collapse toolbar'}
>
{isToolbarMinimized ? '▶' : '▼'}
</button>
{!isToolbarMinimized && (
<>
<UndoRedo /> <UndoRedo />
<Separator /> <Separator />
<BoldItalicUnderlineToggles /> <BoldItalicUnderlineToggles />
@ -270,13 +255,35 @@ export class MarkdownShape extends BaseBoxShapeUtil<IMarkdownShape> {
<DiffSourceToggleWrapper> <DiffSourceToggleWrapper>
<></> <></>
</DiffSourceToggleWrapper> </DiffSourceToggleWrapper>
</>
)}
</div> </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 {