@inshapardaz/likhari-react 0.1.2-dev.15 → 0.1.2-dev.20

package/dist/EditorRoot.d.ts

@@ -25,7 +25,18 @@ export interface EditorRootProps {
      */
     height?: string | number;
     onChange?: (state: SerializedEditorState) => void;
+    /**
+     * Handler for the toolbar's Save button. Receives the serialized content
+     * (plain text when that format is enabled, otherwise Lexical JSON).
+     */
     onSave?: (content: string, format: FormatId) => void;
+    /**
+     * Whether the Save button (icon-only) is shown. Defaults to `true` when
+     * `onSave` is provided and `false` otherwise, i.e. the previous behavior.
+     * Set explicitly to show the button without a handler (saving still clears
+     * the unsaved-changes state) or to hide it while keeping `onSave`.
+     */
+    showSave?: boolean;
 }
 export interface EditorRef {
     getContent(format: FormatId): string;

package/dist/EditorRoot.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"EditorRoot.d.ts","sourceRoot":"","sources":["../src/EditorRoot.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,eAAe,CAAC;AAS1D,OAAO,KAAK,EAAe,qBAAqB,EAAE,MAAM,SAAS,CAAC;AAClE,OAAO,EAAyB,KAAK,QAAQ,EAAE,MAAM,iCAAiC,CAAC;AACvF,OAAO,EAAwB,KAAK,mBAAmB,EAAE,KAAK,uBAAuB,EAAE,MAAM,2BAA2B,CAAC;AAMzH,MAAM,WAAW,oBAAoB;IACnC,MAAM,EAAE,OAAO,CAAC,QAAQ,EAAE,cAAc,GAAG,YAAY,CAAC,CAAC;IACzD,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,eAAe;IAC9B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,cAAc,CAAC,EAAE,oBAAoB,CAAC;IACtC,aAAa,CAAC,EAAE,mBAAmB,CAAC;IACpC,aAAa,CAAC,EAAE,uBAAuB,CAAC;IACxC,KAAK,CAAC,EAAE,oBAAoB,CAAC;IAC7B,WAAW,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAC/B,MAAM,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,cAAc,CAAC;IACtC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;;;;;OAOG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,qBAAqB,KAAK,IAAI,CAAC;IAClD,MAAM,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,KAAK,IAAI,CAAC;CACtD;AAED,MAAM,WAAW,SAAS;IACxB,UAAU,CAAC,MAAM,EAAE,QAAQ,GAAG,MAAM,CAAC;IACrC,UAAU,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,GAAG,IAAI,CAAC;IAClD,iBAAiB,IAAI,OAAO,CAAC;IAC7B,cAAc,IAAI,OAAO,CAAC,OAAO,CAAC,CAAC;IACnC,KAAK,IAAI,IAAI,CAAC;CACf;AAQD,eAAO,MAAM,UAAU,uGAoHrB,CAAC"}
+{"version":3,"file":"EditorRoot.d.ts","sourceRoot":"","sources":["../src/EditorRoot.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,eAAe,CAAC;AAS1D,OAAO,KAAK,EAAe,qBAAqB,EAAE,MAAM,SAAS,CAAC;AAClE,OAAO,EAAyB,KAAK,QAAQ,EAAE,MAAM,iCAAiC,CAAC;AACvF,OAAO,EAAwB,KAAK,mBAAmB,EAAE,KAAK,uBAAuB,EAAE,MAAM,2BAA2B,CAAC;AAMzH,MAAM,WAAW,oBAAoB;IACnC,MAAM,EAAE,OAAO,CAAC,QAAQ,EAAE,cAAc,GAAG,YAAY,CAAC,CAAC;IACzD,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,eAAe;IAC9B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,cAAc,CAAC,EAAE,oBAAoB,CAAC;IACtC,aAAa,CAAC,EAAE,mBAAmB,CAAC;IACpC,aAAa,CAAC,EAAE,uBAAuB,CAAC;IACxC,KAAK,CAAC,EAAE,oBAAoB,CAAC;IAC7B,WAAW,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAC/B,MAAM,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,cAAc,CAAC;IACtC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;;;;;OAOG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,qBAAqB,KAAK,IAAI,CAAC;IAClD;;;OAGG;IACH,MAAM,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,KAAK,IAAI,CAAC;IACrD;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,SAAS;IACxB,UAAU,CAAC,MAAM,EAAE,QAAQ,GAAG,MAAM,CAAC;IACrC,UAAU,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,GAAG,IAAI,CAAC;IAClD,iBAAiB,IAAI,OAAO,CAAC;IAC7B,cAAc,IAAI,OAAO,CAAC,OAAO,CAAC,CAAC;IACnC,KAAK,IAAI,IAAI,CAAC;CACf;AAQD,eAAO,MAAM,UAAU,uGAqHrB,CAAC"}

package/dist/EditorRoot.js

@@ -20,7 +20,7 @@ function initialEditorStateJson(initialContent) {
     const state = defaultFormatRegistry.parse(initialContent.format, initialContent.value);
     return JSON.stringify(state);
 }
-export const EditorRoot = forwardRef(function EditorRoot({ documentId, initialContent, featureConfig, featurePreset, theme, colorScheme, locale = 'en', placeholder = 'Start writing…', height = '480px', onChange, onSave, }, ref) {
+export const EditorRoot = forwardRef(function EditorRoot({ documentId, initialContent, featureConfig, featurePreset, theme, colorScheme, locale = 'en', placeholder = 'Start writing…', height = '480px', onChange, onSave, showSave = Boolean(onSave), }, ref) {
     const config = useMemo(() => resolveFeatureConfig(featureConfig, featurePreset), [featureConfig, featurePreset]);
     const editorStateRef = useRef(null);
     const lastSavedJsonRef = useRef(null);
@@ -84,5 +84,5 @@ export const EditorRoot = forwardRef(function EditorRoot({ documentId, initialCo
         onSave?.(content, format);
     };
     const dir = locale === 'en' ? 'ltr' : 'rtl';
-    return (_jsx(EditorThemeProvider, { theme: theme, colorScheme: colorScheme, children: _jsx("div", { className: "likhari-root", dir: dir, ref: rootElementRef, "data-document-id": documentId, style: { height: typeof height === 'number' ? `${height}px` : height }, children: _jsxs(LexicalComposer, { initialConfig: initialConfig, children: [_jsx(Toolbar, { config: config, onSave: onSave ? handleSave : undefined, isDirty: isDirty, showSave: Boolean(onSave) }), _jsx("div", { className: "likhari-canvas", children: _jsx(RichTextPlugin, { contentEditable: _jsx(ContentEditable, { className: "likhari-content-editable", dir: dir, "aria-label": "Editor content" }), placeholder: _jsx("div", { className: "likhari-placeholder", children: placeholder }), ErrorBoundary: LexicalErrorBoundary }) }), config.history && _jsx(HistoryPlugin, {}), (config.lists.bullet || config.lists.numbered || config.lists.check) && _jsx(ListPlugin, {}), config.links && _jsx(LinkPlugin, {}), _jsx(OnChangePlugin, { onChange: handleChange })] }) }) }));
+    return (_jsx(EditorThemeProvider, { theme: theme, colorScheme: colorScheme, children: _jsx("div", { className: "likhari-root", dir: dir, ref: rootElementRef, "data-document-id": documentId, style: { height: typeof height === 'number' ? `${height}px` : height }, children: _jsxs(LexicalComposer, { initialConfig: initialConfig, children: [_jsx(Toolbar, { config: config, onSave: handleSave, isDirty: isDirty, showSave: showSave }), _jsx("div", { className: "likhari-canvas", children: _jsx(RichTextPlugin, { contentEditable: _jsx(ContentEditable, { className: "likhari-content-editable", dir: dir, "aria-label": "Editor content" }), placeholder: _jsx("div", { className: "likhari-placeholder", children: placeholder }), ErrorBoundary: LexicalErrorBoundary }) }), config.history && _jsx(HistoryPlugin, {}), (config.lists.bullet || config.lists.numbered || config.lists.check) && _jsx(ListPlugin, {}), config.links && _jsx(LinkPlugin, {}), _jsx(OnChangePlugin, { onChange: handleChange })] }) }) }));
 });

package/dist/components/Toolbar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Toolbar.d.ts","sourceRoot":"","sources":["../../src/components/Toolbar.tsx"],"names":[],"mappings":"AA+BA,OAAO,KAAK,EAAE,2BAA2B,EAAE,MAAM,2BAA2B,CAAC;AAsH7E,MAAM,WAAW,YAAY;IAC3B,MAAM,EAAE,2BAA2B,CAAC;IACpC,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,wBAAgB,OAAO,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,QAAQ,EAAE,EAAE,YAAY,+BAgY1E"}
+{"version":3,"file":"Toolbar.d.ts","sourceRoot":"","sources":["../../src/components/Toolbar.tsx"],"names":[],"mappings":"AAkCA,OAAO,KAAK,EAAE,2BAA2B,EAAE,MAAM,2BAA2B,CAAC;AA4K7E,MAAM,WAAW,YAAY;IAC3B,MAAM,EAAE,2BAA2B,CAAC;IACpC,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,wBAAgB,OAAO,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,QAAQ,EAAE,EAAE,YAAY,+BA4W1E"}

package/dist/components/Toolbar.js

@@ -1,7 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useCallback, useEffect, useRef, useState } from 'react';
+import { Menu, Select } from '@mantine/core';
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
-import { $getSelection, $isRangeSelection, $isElementNode, FORMAT_TEXT_COMMAND, FORMAT_ELEMENT_COMMAND, INDENT_CONTENT_COMMAND, OUTDENT_CONTENT_COMMAND, UNDO_COMMAND, REDO_COMMAND, SELECTION_CHANGE_COMMAND, CAN_UNDO_COMMAND, CAN_REDO_COMMAND, COMMAND_PRIORITY_LOW, } from 'lexical';
+import { $getSelection, $isRangeSelection, $isElementNode, $setSelection, FORMAT_TEXT_COMMAND, FORMAT_ELEMENT_COMMAND, INDENT_CONTENT_COMMAND, OUTDENT_CONTENT_COMMAND, UNDO_COMMAND, REDO_COMMAND, SELECTION_CHANGE_COMMAND, CAN_UNDO_COMMAND, CAN_REDO_COMMAND, COMMAND_PRIORITY_LOW, } from 'lexical';
 import { $setBlocksType } from '@lexical/selection';
 import { $createParagraphNode } from 'lexical';
 import { $createHeadingNode, $createQuoteNode, $isHeadingNode, $isQuoteNode } from '@lexical/rich-text';
@@ -26,8 +27,8 @@ const ALIGN_ICONS = {
     right: IconAlignRight,
     justify: IconAlignJustified,
 };
-function ToolbarButton({ icon: Icon, title, active, disabled, onClick, }) {
-    return (_jsx("button", { type: "button", className: "likhari-toolbar-button", "data-active": active ? 'true' : 'false', disabled: disabled, "aria-pressed": active, "aria-label": title, title: title, onMouseDown: (e) => e.preventDefault(), onClick: onClick, children: _jsx(Icon, { size: ICON_SIZE, stroke: ICON_STROKE }) }));
+function ToolbarButton({ icon: Icon, title, active, dirty, disabled, onClick, }) {
+    return (_jsx("button", { type: "button", className: "likhari-toolbar-button", "data-active": active ? 'true' : 'false', "data-dirty": dirty === undefined ? undefined : dirty ? 'true' : 'false', disabled: disabled, "aria-pressed": active, "aria-label": title, title: title, onMouseDown: (e) => e.preventDefault(), onClick: onClick, children: _jsx(Icon, { size: ICON_SIZE, stroke: ICON_STROKE }) }));
 }
 /** A disabled placeholder for a feature whose config flag is on but that
  * isn't implemented yet (link/image/poetry/font/language-tooling — see
@@ -36,16 +37,21 @@ function ToolbarButton({ icon: Icon, title, active, disabled, onClick, }) {
 function StubButton({ icon, title }) {
     return _jsx(ToolbarButton, { icon: icon, title: `${title} (coming soon)`, disabled: true, onClick: undefined });
 }
-/** Icon shown to the left of a <select> — native selects can't render icons
- * per-option, so this labels the control itself instead. */
-function SelectIcon({ icon: Icon }) {
-    return (_jsx("span", { className: "likhari-toolbar-select-icon", "aria-hidden": "true", children: _jsx(Icon, { size: 15, stroke: ICON_STROKE }) }));
+/** Mantine Select (combobox) for the toolbar's dropdown controls. The icon
+ * labels the control itself, since a dropdown can't show one per option in
+ * its closed state. The dropdown portals to <body>, so it is not clipped by
+ * the editor's `overflow: hidden` frame. */
+function ToolbarSelect({ icon: Icon, label, value, data, width, disabled, placeholder, onChange }) {
+    return (_jsx(Select, { size: "xs", w: width, "aria-label": label, title: disabled ? `${label} (coming soon)` : label, data: data, value: value, placeholder: placeholder, disabled: disabled, allowDeselect: false, leftSection: _jsx(Icon, { size: 15, stroke: ICON_STROKE }), comboboxProps: { withinPortal: true, position: 'bottom-start', middlewares: { flip: true, shift: true } }, classNames: { input: 'likhari-toolbar-select-input', dropdown: 'likhari-toolbar-select-dropdown' }, onChange: (v) => v && onChange?.(v) }));
+}
+function OverflowItem({ icon: Icon, label, active, onClick, }) {
+    return (_jsx(Menu.Item, { leftSection: _jsx(Icon, { size: ICON_SIZE, stroke: ICON_STROKE }), "data-active": active ? 'true' : 'false', className: "likhari-overflow-item", 
+        // Keep the editor's selection: a mousedown here would blur the canvas.
+        onMouseDown: (e) => e.preventDefault(), onClick: onClick, children: label }));
 }
 export function Toolbar({ config, onSave, isDirty, showSave }) {
     const [editor] = useLexicalComposerContext();
     const [state, setState] = useState(INITIAL_STATE);
-    const [overflowOpen, setOverflowOpen] = useState(false);
-    const overflowRef = useRef(null);
     const updateToolbar = useCallback(() => {
         editor.getEditorState().read(() => {
             const selection = $getSelection();
@@ -99,25 +105,6 @@ export function Toolbar({ config, onSave, isDirty, showSave }) {
             return false;
         }, COMMAND_PRIORITY_LOW);
     }, [editor]);
-    // Close the overflow panel on outside click or Escape.
-    useEffect(() => {
-        if (!overflowOpen)
-            return;
-        const handlePointerDown = (e) => {
-            if (overflowRef.current && !overflowRef.current.contains(e.target))
-                setOverflowOpen(false);
-        };
-        const handleKeyDown = (e) => {
-            if (e.key === 'Escape')
-                setOverflowOpen(false);
-        };
-        document.addEventListener('mousedown', handlePointerDown);
-        document.addEventListener('keydown', handleKeyDown);
-        return () => {
-            document.removeEventListener('mousedown', handlePointerDown);
-            document.removeEventListener('keydown', handleKeyDown);
-        };
-    }, [overflowOpen]);
     const setBlockType = (type) => {
         editor.update(() => {
             const selection = $getSelection();
@@ -151,6 +138,29 @@ export function Toolbar({ config, onSave, isDirty, showSave }) {
         }
         setBlockType(value);
     };
+    /** Runs a toolbar-select action, then returns focus to the canvas — the
+     * combobox otherwise keeps it, so typing after picking would go nowhere. */
+    // Opening the overflow Menu moves focus into its dropdown, which makes
+    // Lexical drop the canvas selection — so snapshot it on open and restore it
+    // before an item's action runs.
+    const menuSelectionRef = useRef(null);
+    const snapshotSelection = () => {
+        editor.getEditorState().read(() => {
+            const selection = $getSelection();
+            menuSelectionRef.current = selection ? selection.clone() : null;
+        });
+    };
+    const runOverflowAction = (action) => () => {
+        const saved = menuSelectionRef.current;
+        if (saved)
+            editor.update(() => $setSelection(saved.clone()), { discrete: true });
+        action();
+        editor.focus();
+    };
+    const withRefocus = (fn) => (value) => {
+        fn(value);
+        editor.focus();
+    };
     const formatText = (format) => editor.dispatchCommand(FORMAT_TEXT_COMMAND, format);
     const formatElement = (format) => editor.dispatchCommand(FORMAT_ELEMENT_COMMAND, format);
     const applyCaseTransform = (transform) => {
@@ -198,7 +208,23 @@ export function Toolbar({ config, onSave, isDirty, showSave }) {
     const showInsertPoetryGroup = config.links || config.images.linked || config.images.embedded || config.poetry.enabled;
     const showLanguageGroup = config.language.autocorrect || config.language.textCleanup || config.language.spellCheck;
     const showOverflowMenu = fmt.strikethrough || fmt.superscript || fmt.subscript || fmt.caseTransforms || fmt.clearFormatting || config.indent;
+    const formattingOptions = [
+        { value: 'paragraph', label: 'Paragraph' },
+        ...headingLevels.map((level) => ({ value: `h${level}`, label: `Heading ${level}` })),
+        ...(config.lists.numbered ? [{ value: 'number', label: 'Numbered list' }] : []),
+        ...(config.lists.bullet ? [{ value: 'bullet', label: 'Bullet list' }] : []),
+        ...(config.lists.check ? [{ value: 'check', label: 'Task list' }] : []),
+        ...(config.blocks.quote ? [{ value: 'quote', label: 'Quote' }] : []),
+    ];
+    const alignOptions = [
+        ...(config.alignment.start ? [{ value: 'start', label: 'Align start' }] : []),
+        ...(config.alignment.center ? [{ value: 'center', label: 'Align center' }] : []),
+        ...(config.alignment.start ? [{ value: 'end', label: 'Align end' }] : []),
+        ...(config.alignment.justify ? [{ value: 'justify', label: 'Justify' }] : []),
+        ...(config.alignment.left ? [{ value: 'left', label: 'Align left' }] : []),
+        ...(config.alignment.right ? [{ value: 'right', label: 'Align right' }] : []),
+    ];
     const formattingValue = state.listType ?? state.blockType;
     const AlignIcon = ALIGN_ICONS[state.elementFormat] ?? IconAlignLeft;
-    return (_jsxs("div", { className: "likhari-toolbar", role: "toolbar", "aria-label": "Formatting", children: [showSave && (_jsxs("button", { type: "button", className: "likhari-save-button", "data-dirty": isDirty ? 'true' : 'false', onClick: onSave, children: [_jsx(IconDeviceFloppy, { size: 16, stroke: ICON_STROKE }), "Save"] })), config.history && (_jsxs("div", { className: "likhari-toolbar-group", children: [_jsx(ToolbarButton, { icon: IconArrowBackUp, title: "Undo", disabled: !state.canUndo, onClick: () => editor.dispatchCommand(UNDO_COMMAND, undefined) }), _jsx(ToolbarButton, { icon: IconArrowForwardUp, title: "Redo", disabled: !state.canRedo, onClick: () => editor.dispatchCommand(REDO_COMMAND, undefined) })] })), showFormattingGroup && (_jsxs("div", { className: "likhari-toolbar-group likhari-toolbar-select-group", children: [_jsx(SelectIcon, { icon: IconPilcrow }), _jsxs("select", { className: "likhari-toolbar-select", "aria-label": "Formatting", value: formattingValue, onChange: (e) => applyFormatting(e.target.value), children: [_jsx("option", { value: "paragraph", children: "Paragraph" }), headingLevels.map((level) => (_jsxs("option", { value: `h${level}`, children: ["Heading ", level] }, level))), config.lists.numbered && _jsx("option", { value: "number", children: "Numbered list" }), config.lists.bullet && _jsx("option", { value: "bullet", children: "Bullet list" }), config.lists.check && _jsx("option", { value: "check", children: "Task list" }), config.blocks.quote && _jsx("option", { value: "quote", children: "Quote" })] })] })), showInlineGroup && (_jsxs("div", { className: "likhari-toolbar-group", children: [fmt.bold && (_jsx(ToolbarButton, { icon: IconBold, title: "Bold", active: state.activeFormats.has('bold'), onClick: () => formatText('bold') })), fmt.italic && (_jsx(ToolbarButton, { icon: IconItalic, title: "Italic", active: state.activeFormats.has('italic'), onClick: () => formatText('italic') })), fmt.underline && (_jsx(ToolbarButton, { icon: IconUnderline, title: "Underline", active: state.activeFormats.has('underline'), onClick: () => formatText('underline') }))] })), (config.font.family || config.font.size) && (_jsxs("div", { className: "likhari-toolbar-group likhari-toolbar-group--collapse-tablet likhari-toolbar-select-group", children: [config.font.family && (_jsxs(_Fragment, { children: [_jsx(SelectIcon, { icon: IconTypography }), _jsx("select", { className: "likhari-toolbar-select", "aria-label": "Font family", disabled: true, title: "Font family (coming soon)", children: _jsx("option", { children: "Font" }) })] })), config.font.size && (_jsxs(_Fragment, { children: [_jsx(SelectIcon, { icon: IconTextSize }), _jsx("select", { className: "likhari-toolbar-select", "aria-label": "Font size", disabled: true, title: "Font size (coming soon)", children: _jsx("option", { children: "Size" }) })] }))] })), showAlignGroup && (_jsxs("div", { className: "likhari-toolbar-group likhari-toolbar-select-group", children: [_jsx(SelectIcon, { icon: AlignIcon }), _jsxs("select", { className: "likhari-toolbar-select", "aria-label": "Alignment", value: state.elementFormat || 'start', onChange: (e) => formatElement(e.target.value), children: [config.alignment.start && _jsx("option", { value: "start", children: "Align start" }), config.alignment.center && _jsx("option", { value: "center", children: "Align center" }), config.alignment.start && _jsx("option", { value: "end", children: "Align end" }), config.alignment.justify && _jsx("option", { value: "justify", children: "Justify" }), config.alignment.left && _jsx("option", { value: "left", children: "Align left" }), config.alignment.right && _jsx("option", { value: "right", children: "Align right" })] })] })), showInsertPoetryGroup && (_jsxs("div", { className: "likhari-toolbar-group likhari-toolbar-group--collapse-tablet", children: [config.links && _jsx(StubButton, { icon: IconLink, title: "Insert link" }), (config.images.linked || config.images.embedded) && _jsx(StubButton, { icon: IconPhoto, title: "Insert image" }), config.poetry.enabled && _jsx(StubButton, { icon: IconFeather, title: "Poetry blocks" })] })), showLanguageGroup && (_jsxs("div", { className: "likhari-toolbar-group likhari-toolbar-group--collapse-tablet", children: [config.language.autocorrect && _jsx(StubButton, { icon: IconWand, title: "Auto-correct" }), config.language.textCleanup && _jsx(StubButton, { icon: IconSparkles, title: "Text cleanup" }), config.language.spellCheck && _jsx(StubButton, { icon: IconAbc, title: "Spell-checker" })] })), showOverflowMenu && (_jsxs("div", { className: "likhari-toolbar-overflow", ref: overflowRef, children: [_jsx(ToolbarButton, { icon: IconDots, title: "More formatting", active: overflowOpen, onClick: () => setOverflowOpen((o) => !o) }), overflowOpen && (_jsxs("div", { className: "likhari-toolbar-overflow-panel", role: "menu", children: [fmt.strikethrough && (_jsx(ToolbarButton, { icon: IconStrikethrough, title: "Strikethrough", active: state.activeFormats.has('strikethrough'), onClick: () => formatText('strikethrough') })), fmt.superscript && (_jsx(ToolbarButton, { icon: IconSuperscript, title: "Superscript", active: state.activeFormats.has('superscript'), onClick: () => formatText('superscript') })), fmt.subscript && (_jsx(ToolbarButton, { icon: IconSubscript, title: "Subscript", active: state.activeFormats.has('subscript'), onClick: () => formatText('subscript') })), fmt.caseTransforms && (_jsxs(_Fragment, { children: [_jsx(ToolbarButton, { icon: IconLetterCaseUpper, title: "UPPERCASE", onClick: () => applyCaseTransform('upper') }), _jsx(ToolbarButton, { icon: IconLetterCaseLower, title: "lowercase", onClick: () => applyCaseTransform('lower') }), _jsx(ToolbarButton, { icon: IconLetterCase, title: "Capitalize", onClick: () => applyCaseTransform('capitalize') })] })), fmt.clearFormatting && _jsx(ToolbarButton, { icon: IconClearFormatting, title: "Clear formatting", onClick: clearFormatting }), config.indent && (_jsxs(_Fragment, { children: [_jsx(ToolbarButton, { icon: IconIndentDecrease, title: "Outdent", onClick: () => editor.dispatchCommand(OUTDENT_CONTENT_COMMAND, undefined) }), _jsx(ToolbarButton, { icon: IconIndentIncrease, title: "Indent", onClick: () => editor.dispatchCommand(INDENT_CONTENT_COMMAND, undefined) })] }))] }))] }))] }));
+    return (_jsxs("div", { className: "likhari-toolbar", role: "toolbar", "aria-label": "Formatting", children: [showSave && (_jsx("div", { className: "likhari-toolbar-group", children: _jsx(ToolbarButton, { icon: IconDeviceFloppy, title: "Save", dirty: Boolean(isDirty), onClick: onSave }) })), config.history && (_jsxs("div", { className: "likhari-toolbar-group", children: [_jsx(ToolbarButton, { icon: IconArrowBackUp, title: "Undo", disabled: !state.canUndo, onClick: () => editor.dispatchCommand(UNDO_COMMAND, undefined) }), _jsx(ToolbarButton, { icon: IconArrowForwardUp, title: "Redo", disabled: !state.canRedo, onClick: () => editor.dispatchCommand(REDO_COMMAND, undefined) })] })), showFormattingGroup && (_jsx("div", { className: "likhari-toolbar-group", children: _jsx(ToolbarSelect, { icon: IconPilcrow, label: "Formatting", width: 148, value: formattingValue, data: formattingOptions, onChange: withRefocus((v) => applyFormatting(v)) }) })), showInlineGroup && (_jsxs("div", { className: "likhari-toolbar-group", children: [fmt.bold && (_jsx(ToolbarButton, { icon: IconBold, title: "Bold", active: state.activeFormats.has('bold'), onClick: () => formatText('bold') })), fmt.italic && (_jsx(ToolbarButton, { icon: IconItalic, title: "Italic", active: state.activeFormats.has('italic'), onClick: () => formatText('italic') })), fmt.underline && (_jsx(ToolbarButton, { icon: IconUnderline, title: "Underline", active: state.activeFormats.has('underline'), onClick: () => formatText('underline') }))] })), (config.font.family || config.font.size) && (_jsxs("div", { className: "likhari-toolbar-group likhari-toolbar-group--collapse-tablet", children: [config.font.family && (_jsx(ToolbarSelect, { icon: IconTypography, label: "Font family", width: 110, value: null, placeholder: "Font", data: [], disabled: true })), config.font.size && (_jsx(ToolbarSelect, { icon: IconTextSize, label: "Font size", width: 90, value: null, placeholder: "Size", data: [], disabled: true }))] })), showAlignGroup && (_jsx("div", { className: "likhari-toolbar-group", children: _jsx(ToolbarSelect, { icon: AlignIcon, label: "Alignment", width: 138, value: state.elementFormat || 'start', data: alignOptions, onChange: withRefocus((v) => formatElement(v)) }) })), showInsertPoetryGroup && (_jsxs("div", { className: "likhari-toolbar-group likhari-toolbar-group--collapse-tablet", children: [config.links && _jsx(StubButton, { icon: IconLink, title: "Insert link" }), (config.images.linked || config.images.embedded) && _jsx(StubButton, { icon: IconPhoto, title: "Insert image" }), config.poetry.enabled && _jsx(StubButton, { icon: IconFeather, title: "Poetry blocks" })] })), showLanguageGroup && (_jsxs("div", { className: "likhari-toolbar-group likhari-toolbar-group--collapse-tablet", children: [config.language.autocorrect && _jsx(StubButton, { icon: IconWand, title: "Auto-correct" }), config.language.textCleanup && _jsx(StubButton, { icon: IconSparkles, title: "Text cleanup" }), config.language.spellCheck && _jsx(StubButton, { icon: IconAbc, title: "Spell-checker" })] })), showOverflowMenu && (_jsxs(Menu, { position: "bottom-end", withinPortal: true, shadow: "sm", width: 210, closeOnItemClick: true, onOpen: snapshotSelection, children: [_jsx(Menu.Target, { children: _jsx("button", { type: "button", className: "likhari-toolbar-button", "aria-label": "More formatting", title: "More formatting", onMouseDown: (e) => e.preventDefault(), children: _jsx(IconDots, { size: ICON_SIZE, stroke: ICON_STROKE }) }) }), _jsxs(Menu.Dropdown, { children: [fmt.strikethrough && (_jsx(OverflowItem, { icon: IconStrikethrough, label: "Strikethrough", active: state.activeFormats.has('strikethrough'), onClick: runOverflowAction(() => formatText('strikethrough')) })), fmt.superscript && (_jsx(OverflowItem, { icon: IconSuperscript, label: "Superscript", active: state.activeFormats.has('superscript'), onClick: runOverflowAction(() => formatText('superscript')) })), fmt.subscript && (_jsx(OverflowItem, { icon: IconSubscript, label: "Subscript", active: state.activeFormats.has('subscript'), onClick: runOverflowAction(() => formatText('subscript')) })), fmt.caseTransforms && (_jsxs(_Fragment, { children: [_jsx(OverflowItem, { icon: IconLetterCaseUpper, label: "UPPERCASE", onClick: runOverflowAction(() => applyCaseTransform('upper')) }), _jsx(OverflowItem, { icon: IconLetterCaseLower, label: "lowercase", onClick: runOverflowAction(() => applyCaseTransform('lower')) }), _jsx(OverflowItem, { icon: IconLetterCase, label: "Capitalize", onClick: runOverflowAction(() => applyCaseTransform('capitalize')) })] })), fmt.clearFormatting && _jsx(OverflowItem, { icon: IconClearFormatting, label: "Clear formatting", onClick: runOverflowAction(clearFormatting) }), config.indent && (_jsxs(_Fragment, { children: [_jsx(OverflowItem, { icon: IconIndentDecrease, label: "Outdent", onClick: runOverflowAction(() => editor.dispatchCommand(OUTDENT_CONTENT_COMMAND, undefined)) }), _jsx(OverflowItem, { icon: IconIndentIncrease, label: "Indent", onClick: runOverflowAction(() => editor.dispatchCommand(INDENT_CONTENT_COMMAND, undefined)) })] }))] })] }))] }));
 }

package/dist/theme/editor.css

@@ -23,11 +23,14 @@
   align-items: center;
   gap: 8px;
   min-height: 46px;
-  padding: 0 8px;
+  padding: 4px 8px;
   background: var(--editor-paper-dim);
   border-bottom: 1px solid var(--editor-line);
-  flex-wrap: nowrap;
-  overflow-x: auto;
+  /* Wrap instead of scroll: an overflow container would clip menus and grow
+     a scrollbar. Dropdowns (Select/Menu) portal out, so nothing needs to
+     escape this box. */
+  flex-wrap: wrap;
+  row-gap: 4px;
 }
 
 .likhari-toolbar-group {
@@ -35,11 +38,11 @@
   align-items: center;
   gap: 2px;
   padding: 0 6px;
-  border-right: 0.5px solid var(--editor-line);
+  border-inline-end: 0.5px solid var(--editor-line);
 }
 
 .likhari-toolbar-group:last-child {
-  border-right: none;
+  border-inline-end: none;
 }
 
 .likhari-toolbar-button {
@@ -79,86 +82,54 @@
   cursor: not-allowed;
 }
 
-.likhari-toolbar-select {
+/* Mantine Select inside the toolbar — sized to the 30px control height and
+   themed from the --editor-* tokens (the closed input only; the dropdown is
+   portaled to <body>, outside the token scope, so it uses Mantine's own
+   variables, which the editor's MantineProvider already maps to the accent). */
+.likhari-toolbar-select-input {
   height: 30px;
-  max-width: 116px;
+  min-height: 30px;
   font-size: 12px;
   border-radius: 6px;
   border: 1px solid var(--editor-line-strong);
   background: var(--editor-paper);
   color: var(--editor-ink);
-  padding: 0 6px;
 }
 
-.likhari-toolbar-select:disabled {
+.likhari-toolbar-select-input:disabled {
   opacity: 0.4;
   cursor: not-allowed;
 }
 
-/* Icon shown to the left of a <select> — native selects can't render an
-   icon per-option, so the control itself is labeled this way instead. */
-.likhari-toolbar-select-group {
-  gap: 4px;
-}
-
-.likhari-toolbar-select-icon {
-  display: inline-flex;
-  align-items: center;
-  color: var(--editor-ink-soft);
-}
-
-/* Overflow menu ("⋯") — houses less-frequent formatting (strikethrough,
-   super/subscript, case transforms, clear formatting, indent/outdent) so
-   the primary row stays compact on small/mobile viewports. */
-.likhari-toolbar-overflow {
-  position: relative;
-  display: flex;
-  align-items: center;
-}
-
-.likhari-toolbar-overflow-panel {
-  position: absolute;
-  top: calc(100% + 4px);
-  inset-inline-end: 0;
-  z-index: 20;
-  display: flex;
-  flex-wrap: wrap;
-  gap: 2px;
-  width: 168px;
-  padding: 6px;
-  background: var(--editor-paper);
-  border: 0.5px solid var(--editor-line);
-  border-radius: 8px;
+.likhari-overflow-item[data-active='true'] {
+  background: var(--mantine-primary-color-light);
+  color: var(--mantine-primary-color-filled);
 }
 
 /* Responsive collapse — editor-ui-design-spec.md §3.3. These groups hold
    only not-yet-implemented placeholders, so hiding them below the tablet
    breakpoint costs nothing functional while keeping the primary row usable
-   on small screens; the toolbar's horizontal scroll (below) remains the
-   fallback if the still-visible controls alone overflow a narrow viewport. */
+   on small screens; the toolbar wraps onto a second row if the
+   still-visible controls alone overflow a narrow viewport. */
 @media (max-width: 900px) {
   .likhari-toolbar-group--collapse-tablet {
     display: none;
   }
 }
 
-.likhari-save-button {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  height: 30px;
-  padding: 0 14px;
-  border-radius: 6px;
-  border: 1px solid var(--editor-accent);
+/* Save (icon-only ToolbarButton): filled accent while there are unsaved
+   changes, back to the plain outline once saved — editor-ui-design-spec.md §7. */
+.likhari-toolbar-button[data-dirty='true'] {
   background: var(--editor-accent);
   color: var(--editor-paper);
-  font-size: 12px;
-  font-weight: 500;
-  cursor: pointer;
 }
 
-.likhari-save-button[data-dirty='false'] {
-  background: transparent;
+.likhari-toolbar-button[data-dirty='true']:hover {
+  background: var(--editor-accent);
+  filter: brightness(1.1);
+}
+
+.likhari-toolbar-button[data-dirty='false'] {
   color: var(--editor-accent);
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inshapardaz/likhari-react",
-  "version": "0.1.2-dev.15",
+  "version": "0.1.2-dev.20",
   "description": "React implementation of the Likhari editor, built on @lexical/react.",
   "license": "MIT",
   "repository": {