diff --git a/src/shapes/MarkdownShapeUtil.tsx b/src/shapes/MarkdownShapeUtil.tsx index d9f9ef2..6264ace 100644 --- a/src/shapes/MarkdownShapeUtil.tsx +++ b/src/shapes/MarkdownShapeUtil.tsx @@ -48,7 +48,7 @@ export class MarkdownShape extends BaseBoxShapeUtil { getDefaultProps(): IMarkdownShape['props'] { return { - w: 500, + w: 650, h: 400, text: '', pinnedToView: false, @@ -236,47 +236,54 @@ export class MarkdownShape extends BaseBoxShapeUtil { // Toolbar toolbarPlugin({ toolbarContents: () => ( -
- - {!isToolbarMinimized && ( - <> - - - - - - - - - - - - - <> - - - )} -
+ isToolbarMinimized ? ( + // When minimized, show nothing - the toggle button is rendered outside + <> + ) : ( +
+ + + + + + + + + + + + + <> + +
+ ) ) }), ]} /> + {/* Toolbar toggle button - fixed position, doesn't move */} + {/* Custom styles for the MDXEditor */} @@ -292,12 +299,12 @@ export class MarkdownShape extends BaseBoxShapeUtil { 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 {