[UI/UX] Overhaul Milkdown Editor Layout and Align Controls with Reader #82

Closed
opened 2026-06-11 17:47:54 +00:00 by Antigravity · 0 comments
Collaborator

Task Description

Overhaul the visual layout of the WYSIWYG creator environment (/creator) to eliminate layout issues and align its control elements (selection pop-up menu, table drag handles, option menus, paragraph handles, and slash menus) 1:1 with the premium SelectionAiPanel / IntelligenceToolbar user interface styles of the Reader module.

Sub-Tasks

  • Fix text clipping at boundaries and improve editorial typography.
  • Refactor the workspace into a full-height, full-width Zen Mode layout.
  • Move pop-up menu stylesheet overrides from CSS isolation to the global stylesheet app.css to allow them to style elements appended to the document root <body>.
  • Target Crepe's specific .milkdown-toolbar and .toolbar-item button selectors to style selection menus.
  • Style remaining interactive editor control elements (table cell row/column handles, button group option menus, line insertion add buttons, block drag handles, and slash commands menus).
  • Resolve visibility lifecycle bugs (popups immediately visible on load, failing to hide on blur/deselect) and table cell handle jumping/sliding bugs by preserving handles in the layout flow.
  • Prevent table drag handle clipping by setting overflow: visible on .tableWrapper.
## Task Description Overhaul the visual layout of the WYSIWYG creator environment (`/creator`) to eliminate layout issues and align its control elements (selection pop-up menu, table drag handles, option menus, paragraph handles, and slash menus) 1:1 with the premium `SelectionAiPanel` / `IntelligenceToolbar` user interface styles of the Reader module. ### Sub-Tasks - Fix text clipping at boundaries and improve editorial typography. - Refactor the workspace into a full-height, full-width Zen Mode layout. - Move pop-up menu stylesheet overrides from CSS isolation to the global stylesheet `app.css` to allow them to style elements appended to the document root `<body>`. - Target Crepe's specific `.milkdown-toolbar` and `.toolbar-item` button selectors to style selection menus. - Style remaining interactive editor control elements (table cell row/column handles, button group option menus, line insertion add buttons, block drag handles, and slash commands menus). - Resolve visibility lifecycle bugs (popups immediately visible on load, failing to hide on blur/deselect) and table cell handle jumping/sliding bugs by preserving handles in the layout flow. - Prevent table drag handle clipping by setting `overflow: visible` on `.tableWrapper`.
Sign in to join this conversation.
No Label
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: mjasin/Nexus.Reader#82