ba609c5cb8
Add a localStorage-backed insert-menu toggle (default off) that surfaces the formatting toolbar outside focus mode, and redesign it as a lean inline row: ghost icon buttons grouped by thin dividers, a level-reflecting heading glyph (pilcrow / H1-H3), and the active command as the only filled control. Also keep the editor focused when using the toolbar: command buttons preventDefault on mousedown, and the dropdown menus return focus to the editor on close.
18 lines
842 B
TypeScript
18 lines
842 B
TypeScript
export const FOCUS_MODE_STYLES = {
|
|
backdrop: "fixed inset-0 bg-black/20 backdrop-blur-sm z-40",
|
|
container: {
|
|
base: "fixed z-50 w-auto max-w-5xl mx-auto shadow-2xl border-border h-auto overflow-y-auto",
|
|
spacing: "top-2 left-2 right-2 bottom-2 sm:top-4 sm:left-4 sm:right-4 sm:bottom-4 md:top-8 md:left-8 md:right-8 md:bottom-8",
|
|
},
|
|
transition: "transition-all duration-300 ease-in-out",
|
|
exitButton: "absolute top-2 right-2 z-10 opacity-60 hover:opacity-100",
|
|
} as const;
|
|
|
|
export const EDITOR_HEIGHT = {
|
|
// Max height for normal mode - focus mode uses flex-1 to grow dynamically
|
|
normal: "max-h-[50vh]",
|
|
} as const;
|
|
|
|
// localStorage key for the user's preference to show the formatting toolbar in
|
|
// normal (non-focus) mode. Defaults to off.
|
|
export const FORMATTING_TOOLBAR_STORAGE_KEY = "memos-editor-formatting-toolbar";
|