jeffemmett
/
canvas-website
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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 499534e6da
commit ee0e34c5bf
1 changed files with 50 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

93
src/shapes/MarkdownShapeUtil.tsx
View File

@ -48,7 +48,7 @@ export class MarkdownShape extends BaseBoxShapeUtil<IMarkdownShape> {
getDefaultProps(): IMarkdownShape['props'] {
return {
w: 500,
w: 650,
h: 400,
text: '',
pinnedToView: false,
@ -236,47 +236,54 @@ export class MarkdownShape extends BaseBoxShapeUtil<IMarkdownShape> {
// Toolbar
toolbarPlugin({
toolbarContents: () => (
<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 />
<Separator />
<BoldItalicUnderlineToggles />
<Separator />
<BlockTypeSelect />
<Separator />
<ListsToggle />
<Separator />
<CreateLink />
<InsertTable />
<Separator />
<DiffSourceToggleWrapper>
<></>
</DiffSourceToggleWrapper>
</>
)}
</div>
isToolbarMinimized ? (
// When minimized, show nothing - the toggle button is rendered outside
<></>
) : (
<div style={{ display: 'flex', alignItems: 'center', width: '100%', gap: '4px' }}>
<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>
{/* Custom styles for the MDXEditor */}
@ -292,12 +299,12 @@ export class MarkdownShape extends BaseBoxShapeUtil<IMarkdownShape> {
flex-shrink: 0;
border-bottom: 1px solid #e5e7eb;
background: #f9fafb;
padding: 4px 8px;
gap: 2px;
padding: 4px 6px;
padding-right: 36px; /* Space for toggle button */
gap: 1px;
flex-wrap: nowrap;
overflow-x: auto;
overflow-y: hidden;
min-height: ${isToolbarMinimized ? '32px' : 'auto'};
overflow: hidden;
display: ${isToolbarMinimized ? 'none' : 'flex'};
}
.mdxeditor [role="toolbar"] button {