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:
parent
26a931acf5
commit
2cee2cb31b
|
|
@ -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 {
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue