@inshapardaz/likhari-react 0.1.6 → 0.1.7-dev.73

package/dist/components/Toolbar.js

@@ -1,5 +1,5 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useEffect, useRef, useState } from 'react';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
 import { Menu, Select } from '@mantine/core';
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
 import { $getSelection, $isRangeSelection, $isElementNode, $setSelection, $getRoot, $getNearestNodeFromDOMNode, $createTextNode, KEY_MODIFIER_COMMAND, COMMAND_PRIORITY_NORMAL, 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';
@@ -7,13 +7,17 @@ import { $getSelectionStyleValueForProperty, $patchStyleText, $setBlocksType } f
 import { $createParagraphNode } from 'lexical';
 import { $createHeadingNode, $createQuoteNode, $isHeadingNode, $isQuoteNode } from '@lexical/rich-text';
 import { $isListNode, INSERT_CHECK_LIST_COMMAND, INSERT_ORDERED_LIST_COMMAND, INSERT_UNORDERED_LIST_COMMAND, REMOVE_LIST_COMMAND, } from '@lexical/list';
-import { $findMatchingParent } from '@lexical/utils';
+import { $findMatchingParent, $insertNodeToNearestRoot } from '@lexical/utils';
+import { ImageDialog } from '../image/ImageDialog.js';
+import { $createImageNode } from '../image/ImageNode.js';
 import { $createLinkNode, $isLinkNode, TOGGLE_LINK_COMMAND } from '@lexical/link';
 import { LinkDialog } from './LinkDialog.js';
 import { normalizeLinkUrl } from '../utils/linkUrl.js';
 import { CANVAS_FONT_DEFAULTS, DEFAULT_FONT_OPTIONS, FONT_SIZES_PX } from '../fonts/index.js';
 import { setStyleProperty } from '../utils/style.js';
-import { IconAbc, IconAlignCenter, IconAlignJustified, IconAlignLeft, IconAlignRight, IconArrowBackUp, IconArrowForwardUp, IconBold, IconClearFormatting, IconDeviceFloppy, IconDots, IconExternalLink, IconFeather, IconIndentDecrease, IconIndentIncrease, IconItalic, IconLetterCase, IconLetterCaseLower, IconLetterCaseUpper, IconLink, IconLinkOff, IconPencil, IconPhoto, IconPilcrow, IconSparkles, IconStrikethrough, IconSubscript, IconSuperscript, IconTextSize, IconTypography, IconUnderline, IconWand, } from '@tabler/icons-react';
+import { useStrings } from '../i18n/useStrings.js';
+import { usePortalTarget } from '../PortalTargetContext.js';
+import { IconAbc, IconAlignCenter, IconAlignJustified, IconAlignLeft, IconAlignRight, IconArrowBackUp, IconArrowForwardUp, IconBold, IconClearFormatting, IconDeviceFloppy, IconDots, IconExternalLink, IconFeather, IconH1, IconH2, IconH3, IconH4, IconH5, IconH6, IconIndentDecrease, IconIndentIncrease, IconItalic, IconLetterCase, IconLetterCaseLower, IconLetterCaseUpper, IconLink, IconLinkOff, IconList, IconListCheck, IconListNumbers, IconPencil, IconPhoto, IconPilcrow, IconQuote, IconSparkles, IconStrikethrough, IconSubscript, IconSuperscript, IconTextSize, IconTypography, IconUnderline, IconWand, } from '@tabler/icons-react';
 /** Sentinel for "no inline style": Lexical returns the default it is given when
  * the selection has none, so this tells "unstyled" (show the canvas default)
  * apart from "styled with a value the dropdown doesn't list" (show nothing). */
@@ -40,6 +44,35 @@ const ALIGN_ICONS = {
     right: IconAlignRight,
     justify: IconAlignJustified,
 };
+const HEADING_ICONS = {
+    1: IconH1,
+    2: IconH2,
+    3: IconH3,
+    4: IconH4,
+    5: IconH5,
+    6: IconH6,
+};
+const FORMATTING_ICONS = {
+    paragraph: IconPilcrow,
+    h1: HEADING_ICONS[1],
+    h2: HEADING_ICONS[2],
+    h3: HEADING_ICONS[3],
+    h4: HEADING_ICONS[4],
+    h5: HEADING_ICONS[5],
+    h6: HEADING_ICONS[6],
+    number: IconListNumbers,
+    bullet: IconList,
+    check: IconListCheck,
+    quote: IconQuote,
+};
+/** Shared option renderer for the formatting/alignment dropdowns: an icon
+ * ahead of the label, looked up by the option's own value. */
+function iconOptionRenderer(icons, fallback) {
+    return ({ option }) => {
+        const Icon = icons[option.value] ?? fallback;
+        return (_jsxs("span", { style: { display: 'flex', alignItems: 'center', gap: 8 }, children: [_jsx(Icon, { size: 16, stroke: ICON_STROKE }), option.label] }));
+    };
+}
 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 }) }));
 }
@@ -47,15 +80,30 @@ function ToolbarButton({ icon: Icon, title, active, dirty, disabled, onClick, })
  * isn't implemented yet (link/image/poetry/font/language-tooling — see
  * docs/lexical-editor-spec.md §13's phasing). Renders so the toolbar's
  * layout is final now and only needs its onClick wired up later. */
-function StubButton({ icon, title }) {
-    return _jsx(ToolbarButton, { icon: icon, title: `${title} (coming soon)`, disabled: true, onClick: undefined });
+function StubButton({ icon, title, comingSoon }) {
+    return _jsx(ToolbarButton, { icon: icon, title: comingSoon(title), disabled: true, onClick: undefined });
 }
 /** 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, searchable, renderOption, 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, searchable: searchable, renderOption: renderOption, nothingFoundMessage: searchable ? 'No match' : undefined, 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 ToolbarSelect({ icon: Icon, label, value, data, width, disabled, placeholder, searchable, renderOption, onChange, comingSoon, noMatchMessage }) {
+    const portalTarget = usePortalTarget();
+    return (_jsx(Select, { size: "xs", w: width, "aria-label": label, title: disabled && comingSoon ? comingSoon(label) : label, data: data, value: value, placeholder: placeholder, disabled: disabled, searchable: searchable, renderOption: renderOption, nothingFoundMessage: searchable ? noMatchMessage : undefined, allowDeselect: false, leftSection: _jsx(Icon, { size: 15, stroke: ICON_STROKE }), comboboxProps: { withinPortal: true, position: 'bottom-start', middlewares: { flip: true, shift: true }, portalProps: { target: portalTarget } }, classNames: { input: 'likhari-toolbar-select-input', dropdown: 'likhari-toolbar-select-dropdown' }, onChange: (v) => v && onChange?.(v) }));
+}
+const EMPTY_OVERFLOW = new Set();
+function setsEqual(a, b) {
+    if (a.size !== b.size)
+        return false;
+    for (const v of a)
+        if (!b.has(v))
+            return false;
+    return true;
+}
+/** Renders a movable group's items as normal inline toolbar buttons (used
+ * both in the real toolbar and in the hidden width-measuring clone). */
+function MovableGroupButtons({ group }) {
+    return (_jsx("div", { className: "likhari-toolbar-group", "data-group-key": group.key, children: group.items.map((item) => (_jsx(ToolbarButton, { icon: item.icon, title: item.label, active: item.active, onClick: item.onClick }, item.key))) }));
 }
 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", 
@@ -64,16 +112,27 @@ function OverflowItem({ icon: Icon, label, active, onClick, }) {
 }
 /** The link menu's contents — shared by the toolbar button and the right-click
  * menu: the URL (opens in a new tab), Edit link, Remove link. */
-function LinkMenuItems({ url, onEdit, onRemove }) {
+function LinkMenuItems({ url, onEdit, onRemove, strings }) {
     // Only offer the link as clickable if it's a URL the editor would have accepted.
     const safeUrl = normalizeLinkUrl(url);
-    return (_jsxs(_Fragment, { children: [_jsx(Menu.Label, { children: "Link" }), safeUrl ? (_jsx(Menu.Item, { component: "a", href: safeUrl, target: "_blank", rel: "noopener noreferrer", leftSection: _jsx(IconExternalLink, { size: ICON_SIZE, stroke: ICON_STROKE }), title: url, className: "likhari-link-menu-url", children: url })) : (
+    return (_jsxs(_Fragment, { children: [_jsx(Menu.Label, { children: strings.link.menuLabel }), safeUrl ? (_jsx(Menu.Item, { component: "a", href: safeUrl, target: "_blank", rel: "noopener noreferrer", leftSection: _jsx(IconExternalLink, { size: ICON_SIZE, stroke: ICON_STROKE }), title: url, className: "likhari-link-menu-url", children: url })) : (
             // Not a URL the editor would accept (e.g. loaded from a document): show it, don't make it clickable.
-            _jsx(Menu.Item, { disabled: true, title: url, className: "likhari-link-menu-url", children: url || '(no URL)' })), _jsx(Menu.Item, { leftSection: _jsx(IconPencil, { size: ICON_SIZE, stroke: ICON_STROKE }), onMouseDown: (e) => e.preventDefault(), onClick: onEdit, children: "Edit link" }), _jsx(Menu.Item, { color: "red", leftSection: _jsx(IconLinkOff, { size: ICON_SIZE, stroke: ICON_STROKE }), onMouseDown: (e) => e.preventDefault(), onClick: onRemove, children: "Remove link" })] }));
+            _jsx(Menu.Item, { disabled: true, title: url, className: "likhari-link-menu-url", children: url || strings.link.noUrl })), _jsx(Menu.Item, { leftSection: _jsx(IconPencil, { size: ICON_SIZE, stroke: ICON_STROKE }), onMouseDown: (e) => e.preventDefault(), onClick: onEdit, children: strings.link.editLink }), _jsx(Menu.Item, { color: "red", leftSection: _jsx(IconLinkOff, { size: ICON_SIZE, stroke: ICON_STROKE }), onMouseDown: (e) => e.preventDefault(), onClick: onRemove, children: strings.link.removeLink })] }));
 }
-export function Toolbar({ config, onSave, isDirty, showSave, fontOptions = DEFAULT_FONT_OPTIONS, direction = 'ltr' }) {
+export function Toolbar({ config, onSave, isDirty, showSave, fontOptions = DEFAULT_FONT_OPTIONS, direction = 'ltr', locale = 'en' }) {
     const [editor] = useLexicalComposerContext();
     const [state, setState] = useState(INITIAL_STATE);
+    const strings = useStrings(locale);
+    const portalTarget = usePortalTarget();
+    // Responsive "priority+" overflow: the toolbar's outer container and a
+    // hidden nowrap clone (rendered with every movable group forced inline)
+    // are both measured; whenever the clone's natural width exceeds the
+    // container's available width, the lowest-priority movable groups are
+    // moved into the "..." menu, lowest-priority first, until what remains
+    // inline fits (or there's nothing left to move).
+    const toolbarContainerRef = useRef(null);
+    const toolbarMeasureRef = useRef(null);
+    const [overflowGroupKeys, setOverflowGroupKeys] = useState(EMPTY_OVERFLOW);
     const updateToolbar = useCallback(() => {
         editor.getEditorState().read(() => {
             const selection = $getSelection();
@@ -195,6 +254,25 @@ export function Toolbar({ config, onSave, isDirty, showSave, fontOptions = DEFAU
         action();
         editor.focus();
     };
+    const [imageDialogOpen, setImageDialogOpen] = useState(false);
+    const openImageDialog = () => {
+        // Snapshot first: the dialog's focus trap makes Lexical drop the selection.
+        snapshotSelection();
+        setImageDialogOpen(true);
+    };
+    const closeImageDialog = () => {
+        setImageDialogOpen(false);
+        editor.focus();
+    };
+    const insertImage = (image) => {
+        const saved = menuSelectionRef.current;
+        if (saved)
+            editor.update(() => $setSelection(saved.clone()), { discrete: true });
+        editor.update(() => {
+            $insertNodeToNearestRoot($createImageNode(image));
+        });
+        closeImageDialog();
+    };
     /** Applies a font property per `config.font.scope`: to the selection, to
      * every text node in the document, or (for 'both') to the selection when
      * there is a range and to the whole document when there isn't. */
@@ -350,7 +428,112 @@ export function Toolbar({ config, onSave, isDirty, showSave, fontOptions = DEFAU
     const showAlignGroup = config.alignment.start || config.alignment.center || config.alignment.justify || config.alignment.left || config.alignment.right;
     const showStubInsertGroup = 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;
+    // The "script & cleanup" and "indent/outdent" groups (UI spec §3.3) render
+    // as normal inline toolbar groups whenever there's room, and only move
+    // into the "..." overflow menu when the measured toolbar content doesn't
+    // fit the available width (see the ResizeObserver effect below) — this
+    // replaces the old always-on overflow menu, which was driven purely by
+    // these config flags regardless of actual space.
+    const scriptCleanupItems = [];
+    if (fmt.strikethrough) {
+        scriptCleanupItems.push({
+            key: 'strikethrough',
+            icon: IconStrikethrough,
+            label: strings.toolbar.strikethrough,
+            active: state.activeFormats.has('strikethrough'),
+            onClick: () => formatText('strikethrough'),
+        });
+    }
+    if (fmt.superscript) {
+        scriptCleanupItems.push({
+            key: 'superscript',
+            icon: IconSuperscript,
+            label: strings.toolbar.superscript,
+            active: state.activeFormats.has('superscript'),
+            onClick: () => formatText('superscript'),
+        });
+    }
+    if (fmt.subscript) {
+        scriptCleanupItems.push({
+            key: 'subscript',
+            icon: IconSubscript,
+            label: strings.toolbar.subscript,
+            active: state.activeFormats.has('subscript'),
+            onClick: () => formatText('subscript'),
+        });
+    }
+    if (fmt.caseTransforms) {
+        scriptCleanupItems.push({ key: 'upper', icon: IconLetterCaseUpper, label: strings.toolbar.uppercase, onClick: () => applyCaseTransform('upper') }, { key: 'lower', icon: IconLetterCaseLower, label: strings.toolbar.lowercase, onClick: () => applyCaseTransform('lower') }, { key: 'capitalize', icon: IconLetterCase, label: strings.toolbar.capitalize, onClick: () => applyCaseTransform('capitalize') });
+    }
+    if (fmt.clearFormatting) {
+        scriptCleanupItems.push({ key: 'clear', icon: IconClearFormatting, label: strings.toolbar.clearFormatting, onClick: clearFormatting });
+    }
+    const indentItems = config.indent
+        ? [
+            {
+                key: 'outdent',
+                icon: IconIndentDecrease,
+                label: strings.toolbar.outdent,
+                onClick: () => editor.dispatchCommand(OUTDENT_CONTENT_COMMAND, undefined),
+            },
+            {
+                key: 'indent',
+                icon: IconIndentIncrease,
+                label: strings.toolbar.indent,
+                onClick: () => editor.dispatchCommand(INDENT_CONTENT_COMMAND, undefined),
+            },
+        ]
+        : [];
+    // Low to high priority: the first group here is the first one pushed into
+    // overflow once content stops fitting (UI spec §3.3).
+    const movableGroups = [
+        { key: 'scriptCleanup', items: scriptCleanupItems },
+        { key: 'indentOutdent', items: indentItems },
+    ].filter((g) => g.items.length > 0);
+    const movableGroupKeys = useMemo(() => movableGroups.map((g) => g.key).join(','), [movableGroups]);
+    // Re-measure whenever the container is resized, or whenever the set of
+    // movable groups (and so the hidden clone's content) changes.
+    useLayoutEffect(() => {
+        const container = toolbarContainerRef.current;
+        const measure = toolbarMeasureRef.current;
+        if (!container || !measure)
+            return;
+        // Rough width of the "..." button itself (icon button + its gap) —
+        // only charged against the budget once something has actually moved
+        // into it, since it isn't rendered at all otherwise.
+        const OVERFLOW_BUTTON_WIDTH = 38;
+        const recompute = () => {
+            const available = container.clientWidth;
+            const total = measure.scrollWidth;
+            if (total <= available) {
+                setOverflowGroupKeys((prev) => (prev.size === 0 ? prev : EMPTY_OVERFLOW));
+                return;
+            }
+            const widths = new Map();
+            measure.querySelectorAll('[data-group-key]').forEach((el) => {
+                widths.set(el.dataset.groupKey, el.getBoundingClientRect().width);
+            });
+            let remaining = total;
+            const next = new Set();
+            for (const key of movableGroupKeys.split(',').filter(Boolean)) {
+                if (remaining <= available)
+                    break;
+                const w = widths.get(key);
+                if (w === undefined)
+                    continue;
+                remaining -= w;
+                next.add(key);
+            }
+            if (next.size > 0)
+                remaining += OVERFLOW_BUTTON_WIDTH;
+            setOverflowGroupKeys((prev) => (setsEqual(prev, next) ? prev : next));
+        };
+        recompute();
+        const ro = new ResizeObserver(recompute);
+        ro.observe(container);
+        ro.observe(measure);
+        return () => ro.disconnect();
+    });
     // Grouped for the dropdown when options declare groups (Latin / Urdu).
     const fontData = (() => {
         const data = [];
@@ -376,33 +559,63 @@ export function Toolbar({ config, onSave, isDirty, showSave, fontOptions = DEFAU
     const shownFontFamily = state.fontFamily === UNSET_STYLE ? canvasDefaults.family : state.fontFamily;
     const shownFontSize = state.fontSize === UNSET_STYLE ? canvasDefaults.size : state.fontSize;
     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' }] : []),
+        { value: 'paragraph', label: strings.toolbar.formattingOptions.paragraph },
+        ...headingLevels.map((level) => ({ value: `h${level}`, label: strings.toolbar.formattingOptions.heading(level) })),
+        ...(config.lists.numbered ? [{ value: 'number', label: strings.toolbar.formattingOptions.numberedList }] : []),
+        ...(config.lists.bullet ? [{ value: 'bullet', label: strings.toolbar.formattingOptions.bulletList }] : []),
+        ...(config.lists.check ? [{ value: 'check', label: strings.toolbar.formattingOptions.taskList }] : []),
+        ...(config.blocks.quote ? [{ value: 'quote', label: strings.toolbar.formattingOptions.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' }] : []),
+        ...(config.alignment.start ? [{ value: 'start', label: strings.toolbar.alignOptions.start }] : []),
+        ...(config.alignment.center ? [{ value: 'center', label: strings.toolbar.alignOptions.center }] : []),
+        ...(config.alignment.start ? [{ value: 'end', label: strings.toolbar.alignOptions.end }] : []),
+        ...(config.alignment.justify ? [{ value: 'justify', label: strings.toolbar.alignOptions.justify }] : []),
+        ...(config.alignment.left ? [{ value: 'left', label: strings.toolbar.alignOptions.left }] : []),
+        ...(config.alignment.right ? [{ value: 'right', label: strings.toolbar.alignOptions.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 && (_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", children: [config.font.family && (_jsx(ToolbarSelect, { icon: IconTypography, label: "Font family", width: 150, value: fontOptions.some((f) => f.family === shownFontFamily) ? shownFontFamily : null, placeholder: "Font", data: fontData, searchable: true, renderOption: ({ option }) => _jsx("span", { style: { fontFamily: option.value }, children: option.label }), onChange: withRefocus((v) => applyFont('font-family', v)) })), config.font.size && (_jsx(ToolbarSelect, { icon: IconTextSize, label: "Font size", width: 84, value: FONT_SIZES_PX.some((px) => `${px}px` === shownFontSize) ? shownFontSize : null, placeholder: "Size", data: FONT_SIZES_PX.map((px) => ({ value: `${px}px`, label: String(px) })), onChange: withRefocus((v) => applyFont('font-size', v)) }))] })), 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)) }) })), config.links && (_jsx("div", { className: "likhari-toolbar-group", children: state.isLink ? (
-                // Caret is in a link: the button opens a menu to see, edit or remove it.
-                _jsxs(Menu, { position: "bottom-start", withinPortal: true, shadow: "sm", width: 240, onOpen: snapshotSelection, children: [_jsx(Menu.Target, { children: _jsx("button", { type: "button", className: "likhari-toolbar-button", "data-active": "true", "aria-pressed": "true", "aria-haspopup": "menu", "aria-label": "Link options", title: "Link options", onMouseDown: (e) => e.preventDefault(), children: _jsx(IconLink, { size: ICON_SIZE, stroke: ICON_STROKE }) }) }), _jsx(Menu.Dropdown, { children: _jsx(LinkMenuItems, { url: state.linkUrl, onEdit: () => {
-                                    restoreSelection();
-                                    openLinkDialog();
-                                }, onRemove: removeLink }) })] })) : (_jsx(ToolbarButton, { icon: IconLink, title: "Insert link (Ctrl+K)", onClick: openLinkDialog })) })), config.links && (_jsxs(Menu, { opened: linkContext !== null, onChange: (opened) => {
+    // The toolbar's "always inline" groups (UI spec §3.3's Desktop tier) —
+    // built as an array so the exact same elements can be rendered both in
+    // the visible toolbar and in the hidden width-measuring clone below,
+    // without duplicating the JSX. The link right-click context menu is kept
+    // out of this list: it's a zero-size, fixed-position anchor, not part of
+    // the toolbar's own layout width.
+    const fixedGroups = [
+        showSave && (_jsx("div", { className: "likhari-toolbar-group", children: _jsx(ToolbarButton, { icon: IconDeviceFloppy, title: strings.toolbar.save, dirty: Boolean(isDirty), onClick: onSave }) }, "save")),
+        config.history && (_jsxs("div", { className: "likhari-toolbar-group", children: [_jsx(ToolbarButton, { icon: IconArrowBackUp, title: strings.toolbar.undo, disabled: !state.canUndo, onClick: () => editor.dispatchCommand(UNDO_COMMAND, undefined) }), _jsx(ToolbarButton, { icon: IconArrowForwardUp, title: strings.toolbar.redo, disabled: !state.canRedo, onClick: () => editor.dispatchCommand(REDO_COMMAND, undefined) })] }, "history")),
+        showFormattingGroup && (_jsx("div", { className: "likhari-toolbar-group", children: _jsx(ToolbarSelect, { icon: IconPilcrow, label: strings.toolbar.formattingLabel, width: 148, value: formattingValue, data: formattingOptions, comingSoon: strings.toolbar.comingSoon, renderOption: iconOptionRenderer(FORMATTING_ICONS, IconPilcrow), onChange: withRefocus((v) => applyFormatting(v)) }) }, "formatting")),
+        showInlineGroup && (_jsxs("div", { className: "likhari-toolbar-group", children: [fmt.bold && (_jsx(ToolbarButton, { icon: IconBold, title: strings.toolbar.bold, active: state.activeFormats.has('bold'), onClick: () => formatText('bold') })), fmt.italic && (_jsx(ToolbarButton, { icon: IconItalic, title: strings.toolbar.italic, active: state.activeFormats.has('italic'), onClick: () => formatText('italic') })), fmt.underline && (_jsx(ToolbarButton, { icon: IconUnderline, title: strings.toolbar.underline, active: state.activeFormats.has('underline'), onClick: () => formatText('underline') }))] }, "inline")),
+        (config.font.family || config.font.size) && (_jsxs("div", { className: "likhari-toolbar-group", children: [config.font.family && (_jsx(ToolbarSelect, { icon: IconTypography, label: strings.toolbar.fontFamily, width: 150, value: fontOptions.some((f) => f.family === shownFontFamily) ? shownFontFamily : null, placeholder: strings.toolbar.fontFamilyPlaceholder, data: fontData, searchable: true, noMatchMessage: strings.toolbar.noMatch, renderOption: ({ option }) => _jsx("span", { style: { fontFamily: option.value }, children: option.label }), onChange: withRefocus((v) => applyFont('font-family', v)) })), config.font.size && (_jsx(ToolbarSelect, { icon: IconTextSize, label: strings.toolbar.fontSize, width: 84, value: FONT_SIZES_PX.some((px) => `${px}px` === shownFontSize) ? shownFontSize : null, placeholder: strings.toolbar.fontSizePlaceholder, data: FONT_SIZES_PX.map((px) => ({ value: `${px}px`, label: String(px) })), onChange: withRefocus((v) => applyFont('font-size', v)) }))] }, "font")),
+        showAlignGroup && (_jsx("div", { className: "likhari-toolbar-group", children: _jsx(ToolbarSelect, { icon: AlignIcon, label: strings.toolbar.alignment, width: 138, value: state.elementFormat || 'start', data: alignOptions, renderOption: iconOptionRenderer(ALIGN_ICONS, IconAlignLeft), onChange: withRefocus((v) => formatElement(v)) }) }, "align")),
+        config.links && (_jsx("div", { className: "likhari-toolbar-group", children: state.isLink ? (
+            // Caret is in a link: the button opens a menu to see, edit or remove it.
+            _jsxs(Menu, { position: "bottom-start", withinPortal: true, portalProps: { target: portalTarget }, shadow: "sm", width: 240, onOpen: snapshotSelection, children: [_jsx(Menu.Target, { children: _jsx("button", { type: "button", className: "likhari-toolbar-button", "data-active": "true", "aria-pressed": "true", "aria-haspopup": "menu", "aria-label": strings.toolbar.linkOptions, title: strings.toolbar.linkOptions, onMouseDown: (e) => e.preventDefault(), children: _jsx(IconLink, { size: ICON_SIZE, stroke: ICON_STROKE }) }) }), _jsx(Menu.Dropdown, { children: _jsx(LinkMenuItems, { url: state.linkUrl, onEdit: () => {
+                                restoreSelection();
+                                openLinkDialog();
+                            }, onRemove: removeLink, strings: strings }) })] })) : (_jsx(ToolbarButton, { icon: IconLink, title: strings.toolbar.insertLink, onClick: openLinkDialog })) }, "link")),
+        showStubInsertGroup && (_jsxs("div", { className: "likhari-toolbar-group likhari-toolbar-group--collapse-tablet", children: [(config.images.linked || config.images.embedded) && (_jsx(ToolbarButton, { icon: IconPhoto, title: strings.toolbar.insertImage, onClick: openImageDialog })), config.poetry.enabled && _jsx(StubButton, { icon: IconFeather, title: strings.toolbar.poetryBlocks, comingSoon: strings.toolbar.comingSoon })] }, "stubInsert")),
+        showLanguageGroup && (_jsxs("div", { className: "likhari-toolbar-group likhari-toolbar-group--collapse-tablet", children: [config.language.autocorrect && _jsx(StubButton, { icon: IconWand, title: strings.toolbar.autocorrect, comingSoon: strings.toolbar.comingSoon }), config.language.textCleanup && _jsx(StubButton, { icon: IconSparkles, title: strings.toolbar.textCleanup, comingSoon: strings.toolbar.comingSoon }), config.language.spellCheck && _jsx(StubButton, { icon: IconAbc, title: strings.toolbar.spellChecker, comingSoon: strings.toolbar.comingSoon })] }, "language")),
+    ];
+    return (_jsxs("div", { className: "likhari-toolbar", role: "toolbar", "aria-label": strings.toolbar.ariaLabel, ref: toolbarContainerRef, children: [fixedGroups, movableGroups
+                .filter((group) => !overflowGroupKeys.has(group.key))
+                .map((group) => (_jsx(MovableGroupButtons, { group: group }, group.key))), overflowGroupKeys.size > 0 && (_jsxs(Menu, { position: "bottom-end", withinPortal: true, portalProps: { target: portalTarget }, shadow: "sm", width: 210, closeOnItemClick: true, onOpen: snapshotSelection, children: [_jsx(Menu.Target, { children: _jsx("button", { type: "button", className: "likhari-toolbar-button", "aria-label": strings.toolbar.moreFormatting, title: strings.toolbar.moreFormatting, onMouseDown: (e) => e.preventDefault(), children: _jsx(IconDots, { size: ICON_SIZE, stroke: ICON_STROKE }) }) }), _jsx(Menu.Dropdown, { children: movableGroups
+                            .filter((group) => overflowGroupKeys.has(group.key))
+                            .flatMap((group) => group.items.map((item) => (_jsx(OverflowItem, { icon: item.icon, label: item.label, active: item.active, onClick: runOverflowAction(item.onClick) }, item.key)))) })] })), config.links && (_jsxs(Menu, { opened: linkContext !== null, onChange: (opened) => {
                     if (!opened)
                         setLinkContext(null);
-                }, position: "bottom-start", withinPortal: true, shadow: "sm", width: 240, children: [_jsx(Menu.Target, { children: _jsx("span", { "aria-hidden": "true", style: { position: 'fixed', left: linkContext?.x ?? -9999, top: linkContext?.y ?? -9999, width: 1, height: 1, pointerEvents: 'none' } }) }), _jsx(Menu.Dropdown, { children: _jsx(LinkMenuItems, { url: linkContext?.url ?? '', onEdit: () => {
+                }, position: "bottom-start", withinPortal: true, portalProps: { target: portalTarget }, shadow: "sm", width: 240, children: [_jsx(Menu.Target, { children: _jsx("span", { "aria-hidden": "true", style: { position: 'fixed', left: linkContext?.x ?? -9999, top: linkContext?.y ?? -9999, width: 1, height: 1, pointerEvents: 'none' } }) }), _jsx(Menu.Dropdown, { children: _jsx(LinkMenuItems, { url: linkContext?.url ?? '', onEdit: () => {
                                 restoreSelection();
                                 openLinkDialog();
-                            }, onRemove: removeLink }) })] })), showStubInsertGroup && (_jsxs("div", { className: "likhari-toolbar-group likhari-toolbar-group--collapse-tablet", children: [(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)) })] }))] })] })), config.links && (_jsx(LinkDialog, { opened: linkDialogOpen, initialUrl: state.linkUrl, showTextField: linkNeedsText, onSubmit: applyLink, onRemove: state.isLink ? removeLink : undefined, onClose: closeLinkDialog }))] }));
+                            }, onRemove: removeLink, strings: strings }) })] })), _jsxs("div", { "aria-hidden": "true", ref: toolbarMeasureRef, style: {
+                    position: 'absolute',
+                    visibility: 'hidden',
+                    pointerEvents: 'none',
+                    top: 0,
+                    left: 0,
+                    display: 'flex',
+                    flexWrap: 'nowrap',
+                    gap: 8,
+                }, children: [fixedGroups, movableGroups.map((group) => (_jsx(MovableGroupButtons, { group: group }, group.key)))] }), (config.images.linked || config.images.embedded) && (_jsx(ImageDialog, { mode: "insert", opened: imageDialogOpen, onSubmit: insertImage, onClose: closeImageDialog })), config.links && (_jsx(LinkDialog, { opened: linkDialogOpen, initialUrl: state.linkUrl, showTextField: linkNeedsText, onSubmit: applyLink, onRemove: state.isLink ? removeLink : undefined, onClose: closeLinkDialog }))] }));
 }

package/dist/i18n/index.d.ts

@@ -0,0 +1,4 @@
+export type { Locale, Strings } from './strings.js';
+export { STRINGS, getStrings } from './strings.js';
+export { useStrings, useUiStrings, UiStringsContext } from './useStrings.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/i18n/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/i18n/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACjD,OAAO,EAAE,OAAO,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC;AAChD,OAAO,EAAE,UAAU,EAAE,YAAY,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC"}

package/dist/i18n/index.js

@@ -0,0 +1,2 @@
+export { STRINGS, getStrings } from './strings.js';
+export { useStrings, useUiStrings, UiStringsContext } from './useStrings.js';

package/dist/i18n/strings.d.ts

@@ -0,0 +1,158 @@
+/**
+ * UI localization strings for the editor's own chrome (toolbar, dialogs,
+ * menus, placeholders) — see docs/lexical-editor-spec.md §3.2. This is
+ * separate from content direction/fonts (handled in EditorRoot) and from
+ * Markdown/HTML/plain-text format translation, which is out of scope here.
+ */
+/** Re-exported from EditorRoot's existing prop type so there is a single
+ * source of truth for which locales the editor knows about. */
+export type Locale = 'en' | 'ur' | 'pa-shahmukhi';
+export interface Strings {
+    editor: {
+        /** Default placeholder shown in an empty editor (overridden by an explicit `placeholder` prop). */
+        placeholder: string;
+        /** aria-label on the contenteditable itself. */
+        contentLabel: string;
+        /** window.confirm() prompt shown by EditorRef.confirmDiscard() when there are unsaved changes. */
+        confirmDiscard: string;
+    };
+    common: {
+        cancel: string;
+        save: string;
+        insert: string;
+    };
+    toolbar: {
+        /** aria-label on the toolbar's own role="toolbar" container. */
+        ariaLabel: string;
+        save: string;
+        undo: string;
+        redo: string;
+        formattingLabel: string;
+        bold: string;
+        italic: string;
+        underline: string;
+        fontFamily: string;
+        fontFamilyPlaceholder: string;
+        fontSize: string;
+        fontSizePlaceholder: string;
+        noMatch: string;
+        alignment: string;
+        linkOptions: string;
+        insertLink: string;
+        insertImage: string;
+        poetryBlocks: string;
+        comingSoon: (label: string) => string;
+        autocorrect: string;
+        textCleanup: string;
+        spellChecker: string;
+        moreFormatting: string;
+        strikethrough: string;
+        superscript: string;
+        subscript: string;
+        uppercase: string;
+        lowercase: string;
+        capitalize: string;
+        clearFormatting: string;
+        outdent: string;
+        indent: string;
+        formattingOptions: {
+            paragraph: string;
+            heading: (level: number) => string;
+            numberedList: string;
+            bulletList: string;
+            taskList: string;
+            quote: string;
+        };
+        alignOptions: {
+            start: string;
+            center: string;
+            end: string;
+            justify: string;
+            left: string;
+            right: string;
+        };
+    };
+    link: {
+        menuLabel: string;
+        noUrl: string;
+        editLink: string;
+        removeLink: string;
+    };
+    linkDialog: {
+        titleInsert: string;
+        titleEdit: string;
+        urlLabel: string;
+        urlPlaceholder: string;
+        textLabel: string;
+        textPlaceholder: string;
+        invalidUrl: string;
+        apply: string;
+    };
+    imageDialog: {
+        titleInsert: string;
+        titleEdit: string;
+        currentImage: string;
+        fromUrl: string;
+        upload: string;
+        embeddedInDocument: string;
+        linkedFrom: (src: string) => string;
+        convertButton: string;
+        convertHint: string;
+        imageUrlLabel: string;
+        imageUrlPlaceholder: string;
+        embedCopyLabel: string;
+        embedCopyDescription: string;
+        convertedFromUrl: string;
+        fileLabel: string;
+        filePlaceholder: string;
+        fileDescription: (maxSizeMB: number, storedInDocument: boolean) => string;
+        altTextLabel: string;
+        altTextDescription: string;
+        captionLabel: string;
+        captionDescription: string;
+        errors: {
+            enterUrl: string;
+            chooseFile: string;
+            noImage: string;
+            uploadUnusable: string;
+            couldNotSave: string;
+            couldNotConvert: string;
+            couldNotReadFile: string;
+            largerThan: (maxSizeMB: number) => string;
+        };
+    };
+    imageCropDialog: {
+        title: string;
+        sizeLabel: string;
+        widthLabel: string;
+        heightLabel: string;
+        autoPlaceholder: string;
+        keepProportions: string;
+        originalSize: string;
+        dragHint: (natural: {
+            width: number;
+            height: number;
+        } | null) => string;
+        errors: {
+            uploadUnusable: string;
+            couldNotSave: string;
+            largerThan: (maxSizeMB: number) => string;
+        };
+    };
+    imageMenu: {
+        editImage: string;
+        convertToEmbedded: string;
+        cropResize: string;
+        addCaption: string;
+        editCaption: string;
+        removeCaption: string;
+        deleteImage: string;
+        resizeImage: string;
+    };
+}
+export declare const STRINGS: Record<Locale, Strings>;
+/** Returns the strings dictionary for `locale`, defensively falling back to
+ * `en` for any locale not present in `STRINGS` (e.g. a future locale value
+ * passed by a caller on an older type definition). */
+export declare function getStrings(locale: Locale): Strings;
+//# sourceMappingURL=strings.d.ts.map

package/dist/i18n/strings.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"strings.d.ts","sourceRoot":"","sources":["../../src/i18n/strings.ts"],"names":[],"mappings":"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"}