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

package/dist/EditorRoot.d.ts

@@ -3,6 +3,7 @@ import type { SerializedEditorState } from 'lexical';
 import { type FormatId } from '@inshapardaz/likhari-converters';
 import { type EditorFeatureConfig, type FeatureConfigPresetName } from '@inshapardaz/likhari-core';
 import { type FontOption } from './fonts/index.js';
+import { type Locale } from './i18n/index.js';
 export interface EditorInitialContent {
     format: Extract<FormatId, 'lexical-json' | 'plain-text'>;
     value: string;
@@ -14,7 +15,15 @@ export interface EditorRootProps {
     featurePreset?: FeatureConfigPresetName;
     theme?: MantineThemeOverride;
     colorScheme?: 'light' | 'dark';
-    locale?: 'en' | 'ur' | 'pa-shahmukhi';
+    /**
+     * A CSS color (e.g. `'#2B6E6E'`) overriding the editor's default accent —
+     * both Mantine's own primary color (buttons, portaled dropdowns' active-item
+     * highlight, etc.) and the `--editor-accent` / `--editor-accent-soft` CSS
+     * variables the toolbar/canvas use directly. Omit to use the built-in
+     * default tokens (packages/core/src/theme/tokens.ts).
+     */
+    accentColor?: string;
+    locale?: Locale;
     placeholder?: string;
     /**
      * CSS height for the editor box (toolbar + canvas together) — accepts any
@@ -38,6 +47,21 @@ export interface EditorRootProps {
      * the unsaved-changes state) or to hide it while keeping `onSave`.
      */
     showSave?: boolean;
+    /**
+     * Stores an uploaded image and returns the URL to reference it by. Without
+     * it, uploaded images are embedded in the document as base64 data URIs —
+     * simple, but they bloat the document (see `images.maxSizeMB`).
+     */
+    onImageUpload?: (file: File) => Promise<string>;
+    /**
+     * Downloads a linked image's bytes when converting it to an embedded copy
+     * or applying a crop/rotate/flip. Without it, the browser fetches the URL
+     * directly, which fails for any image server that doesn't send CORS
+     * headers — that restriction can't be worked around from the browser
+     * alone. Provide this to route the request through your own backend (or a
+     * CORS proxy) instead.
+     */
+    fetchImage?: (url: string) => Promise<Blob>;
     /**
      * Entries for the toolbar's font-family dropdown. Defaults to
      * `DEFAULT_FONT_OPTIONS` (generic Latin faces plus the Urdu/Arabic-script
@@ -46,6 +70,24 @@ export interface EditorRootProps {
      * `[...DEFAULT_FONT_OPTIONS, { name: 'Mine', family: '"Mine", serif' }]`.
      */
     fontOptions?: FontOption[];
+    /**
+     * Debounced autosave of the current content to `localStorage`, namespaced
+     * by `documentId` (lexical-editor-spec.md §6.1–§6.2) — a resilience net
+     * against an accidental tab close, independent of `onSave`/the Save
+     * button. Requires `documentId` to be set; a draft newer than the initial
+     * content prompts (via `window.confirm`) to restore it on mount, and is
+     * cleared on a successful explicit save. Defaults to `true`.
+     */
+    autosave?: boolean;
+    /** Debounce delay before writing an autosave draft, in ms. Default `750`. */
+    autosaveDelayMs?: number;
+    /**
+     * Skips (rather than throwing) an autosave write whose JSON would exceed
+     * this size — `localStorage` has a shared ~5-10MB per-origin ceiling, so a
+     * single document with embedded base64 images must not be allowed to
+     * autosave past a sane limit. Default `2_000_000` (~2MB).
+     */
+    autosaveMaxBytes?: number;
 }
 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;AAKzH,OAAO,EAAyB,KAAK,UAAU,EAAE,MAAM,SAAS,CAAC;AAGjE,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;IACnB;;;;;;OAMG;IACH,WAAW,CAAC,EAAE,UAAU,EAAE,CAAC;CAC5B;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,uGA6HrB,CAAC"}
+{"version":3,"file":"EditorRoot.d.ts","sourceRoot":"","sources":["../src/EditorRoot.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,eAAe,CAAC;AAU1D,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;AAKzH,OAAO,EAAyB,KAAK,UAAU,EAAE,MAAM,SAAS,CAAC;AAMjE,OAAO,EAAgC,KAAK,MAAM,EAAE,MAAM,QAAQ,CAAC;AAKnE,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;;;;;;OAMG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,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;IACnB;;;;OAIG;IACH,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,OAAO,CAAC,MAAM,CAAC,CAAC;IAChD;;;;;;;OAOG;IACH,UAAU,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAC5C;;;;;;OAMG;IACH,WAAW,CAAC,EAAE,UAAU,EAAE,CAAC;IAC3B;;;;;;;OAOG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,6EAA6E;IAC7E,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;;;;OAKG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B;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,uGA6NrB,CAAC"}

package/dist/EditorRoot.js

@@ -1,10 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import { forwardRef, useEffect, useId, useImperativeHandle, useMemo, useRef, useState } from 'react';
 import { LexicalComposer } from '@lexical/react/LexicalComposer';
 import { RichTextPlugin } from '@lexical/react/LexicalRichTextPlugin';
 import { ContentEditable } from '@lexical/react/LexicalContentEditable';
 import { HistoryPlugin } from '@lexical/react/LexicalHistoryPlugin';
 import { ListPlugin } from '@lexical/react/LexicalListPlugin';
+import { CheckListPlugin } from '@lexical/react/LexicalCheckListPlugin';
 import { LinkPlugin } from '@lexical/react/LexicalLinkPlugin';
 import { OnChangePlugin } from '@lexical/react/LexicalOnChangePlugin';
 import { LexicalErrorBoundary } from '@lexical/react/LexicalErrorBoundary';
@@ -16,34 +17,83 @@ import { EditorThemeProvider } from './theme/EditorThemeProvider.js';
 import { Toolbar } from './components/Toolbar.js';
 import { injectUrduWebFontsCss } from './fonts/index.js';
 import { LinkPastePlugin } from './plugins/LinkPastePlugin.js';
+import { AutosaveRestorePlugin } from './plugins/AutosaveRestorePlugin.js';
+import { clearDraft, writeDraft } from './persistence/draftStorage.js';
+import { ImageOptionsContext } from './image/ImageOptionsContext.js';
+import { PortalTargetContext } from './PortalTargetContext.js';
+import { UiStringsContext, getStrings } from './i18n/index.js';
+const DEFAULT_AUTOSAVE_DELAY_MS = 750;
+const DEFAULT_AUTOSAVE_MAX_BYTES = 2000000;
 function initialEditorStateJson(initialContent) {
     if (!initialContent)
         return undefined;
     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, showSave = Boolean(onSave), fontOptions, }, ref) {
+export const EditorRoot = forwardRef(function EditorRoot({ documentId, initialContent, featureConfig, featurePreset, theme, colorScheme, accentColor, locale = 'en', placeholder, height = '480px', onChange, onSave, showSave = Boolean(onSave), onImageUpload, fetchImage, fontOptions, autosave = true, autosaveDelayMs = DEFAULT_AUTOSAVE_DELAY_MS, autosaveMaxBytes = DEFAULT_AUTOSAVE_MAX_BYTES, }, ref) {
     const config = useMemo(() => resolveFeatureConfig(featureConfig, featurePreset), [featureConfig, featurePreset]);
+    const strings = useMemo(() => getStrings(locale), [locale]);
+    const resolvedPlaceholder = placeholder ?? strings.editor.placeholder;
+    const autosaveEnabled = autosave && Boolean(documentId);
     // The urdu-web-fonts stylesheets are needed for the font dropdown and for
     // RTL content, whose canvas font (editor.css) is one of those families.
     useEffect(() => {
         if (config.font.family || locale !== 'en')
             injectUrduWebFontsCss();
     }, [config.font.family, locale]);
+    const imageOptions = useMemo(() => ({
+        allowLinked: config.images.linked,
+        allowEmbedded: config.images.embedded,
+        allowCaption: config.images.caption,
+        maxSizeMB: config.images.maxSizeMB,
+        onImageUpload,
+        fetchImage,
+    }), [config.images.linked, config.images.embedded, config.images.caption, config.images.maxSizeMB, onImageUpload, fetchImage]);
     const editorStateRef = useRef(null);
     const lastSavedJsonRef = useRef(null);
     const [isDirty, setIsDirty] = useState(false);
+    const isDirtyRef = useRef(isDirty);
+    isDirtyRef.current = isDirty;
+    const autosaveTimerRef = useRef(null);
+    // Computed once, before the first autosave write could possibly run, so
+    // the restore-prompt plugin below can tell a stored draft that's merely
+    // identical to the initial content apart (no prompt needed) from one that
+    // actually represents newer, unsaved work.
+    const initialContentJsonRef = useRef(undefined);
+    if (initialContentJsonRef.current === undefined) {
+        initialContentJsonRef.current = initialEditorStateJson(initialContent);
+    }
     const initialConfig = useMemo(() => ({
         namespace: `likhari-editor-${documentId ?? 'anonymous'}`,
         nodes: EDITOR_NODES,
         theme: editorTheme,
-        editorState: initialEditorStateJson(initialContent),
+        editorState: initialContentJsonRef.current,
         onError(error) {
             throw error;
         },
     }), 
     // eslint-disable-next-line react-hooks/exhaustive-deps
     []);
+    // beforeunload (lexical-editor-spec.md §6.4): the automatic half of the
+    // navigation guard — hasUnsavedChanges()/confirmDiscard() below are the
+    // imperative half a host's own router guard calls for in-app navigation,
+    // which the editor can't intercept on its own.
+    useEffect(() => {
+        if (typeof window === 'undefined')
+            return;
+        const handleBeforeUnload = (event) => {
+            if (!isDirtyRef.current)
+                return;
+            event.preventDefault();
+            event.returnValue = '';
+        };
+        window.addEventListener('beforeunload', handleBeforeUnload);
+        return () => window.removeEventListener('beforeunload', handleBeforeUnload);
+    }, []);
+    useEffect(() => () => {
+        if (autosaveTimerRef.current)
+            clearTimeout(autosaveTimerRef.current);
+    }, []);
     useImperativeHandle(ref, () => ({
         getContent(format) {
             if (!editorStateRef.current)
@@ -68,18 +118,25 @@ export const EditorRoot = forwardRef(function EditorRoot({ documentId, initialCo
                 return true;
             if (typeof window === 'undefined')
                 return true;
-            return window.confirm('You have unsaved changes. Discard them?');
+            return window.confirm(strings.editor.confirmDiscard);
         },
         focus() {
             rootElementRef.current?.focus();
         },
-    }), [isDirty]);
+    }), [isDirty, strings]);
     const rootElementRef = useRef(null);
     const handleChange = (state) => {
         editorStateRef.current = state;
         const json = JSON.stringify(state.toJSON());
         setIsDirty(json !== lastSavedJsonRef.current);
         onChange?.(state.toJSON());
+        if (autosaveEnabled && documentId) {
+            if (autosaveTimerRef.current)
+                clearTimeout(autosaveTimerRef.current);
+            autosaveTimerRef.current = setTimeout(() => {
+                writeDraft(documentId, json, autosaveMaxBytes);
+            }, autosaveDelayMs);
+        }
     };
     const handleSave = () => {
         if (!editorStateRef.current)
@@ -89,8 +146,22 @@ export const EditorRoot = forwardRef(function EditorRoot({ documentId, initialCo
         const content = defaultFormatRegistry.serialize(format, json);
         lastSavedJsonRef.current = JSON.stringify(json);
         setIsDirty(false);
+        // A successful explicit save supersedes any in-progress/queued autosave
+        // draft — don't let a stale one linger and falsely prompt to "restore"
+        // older content next time this document is opened (§6.2).
+        if (autosaveTimerRef.current) {
+            clearTimeout(autosaveTimerRef.current);
+            autosaveTimerRef.current = null;
+        }
+        if (documentId)
+            clearDraft(documentId);
         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: handleSave, isDirty: isDirty, showSave: showSave, fontOptions: fontOptions, direction: dir }), _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, {}), config.links && _jsx(LinkPastePlugin, {}), _jsx(OnChangePlugin, { onChange: handleChange })] }) }) }));
+    // A stable per-instance id for the portal-anchor div below, so multiple
+    // EditorRoot instances on one page each get their own portal target
+    // rather than colliding on a shared one.
+    const portalTargetId = useId();
+    const portalTargetSelector = `#${CSS.escape(portalTargetId)}`;
+    return (_jsx(EditorThemeProvider, { theme: theme, colorScheme: colorScheme, accentColor: accentColor, scopeElementId: portalTargetId, children: _jsxs("div", { className: "likhari-root", dir: dir, ref: rootElementRef, "data-document-id": documentId, style: { height: typeof height === 'number' ? `${height}px` : height }, children: [_jsx("div", { id: portalTargetId, className: "likhari-portal-target" }), _jsx(PortalTargetContext.Provider, { value: portalTargetSelector, children: _jsx(UiStringsContext.Provider, { value: strings, children: _jsx(ImageOptionsContext.Provider, { value: imageOptions, children: _jsxs(LexicalComposer, { initialConfig: initialConfig, children: [_jsx(Toolbar, { config: config, onSave: handleSave, isDirty: isDirty, showSave: showSave, fontOptions: fontOptions, direction: dir, locale: locale }), _jsx("div", { className: "likhari-canvas", children: _jsx(RichTextPlugin, { contentEditable: _jsx(ContentEditable, { className: "likhari-content-editable", dir: dir, "aria-label": strings.editor.contentLabel }), placeholder: _jsx("div", { className: "likhari-placeholder", children: resolvedPlaceholder }), ErrorBoundary: LexicalErrorBoundary }) }), config.history && _jsx(HistoryPlugin, {}), (config.lists.bullet || config.lists.numbered || config.lists.check) && _jsx(ListPlugin, {}), config.lists.check && _jsx(CheckListPlugin, {}), config.links && _jsx(LinkPlugin, {}), config.links && _jsx(LinkPastePlugin, {}), _jsx(OnChangePlugin, { onChange: handleChange }), _jsx(AutosaveRestorePlugin, { documentId: documentId, enabled: autosaveEnabled, initialJson: initialContentJsonRef.current, confirmMessage: strings.editor.restoreDraftConfirm })] }) }) }) })] }) }));
 });

package/dist/PortalTargetContext.d.ts

@@ -0,0 +1,16 @@
+/**
+ * CSS selector for the portal-anchor `<div>` `EditorRoot` renders as the
+ * first child of `.likhari-root` (see EditorRoot.tsx). Mantine's `Menu`,
+ * `Modal`, `Select`'s combobox and `Tooltip` all default to portaling their
+ * content to `document.body` — outside the DOM subtree that carries the
+ * `--editor-*` CSS custom properties (`.likhari-theme-scope`) and the `dir`
+ * attribute (`.likhari-root`), so none of that styling/direction reaches
+ * them. Passing this selector as the target fixes that by portaling into a
+ * genuine descendant of both instead.
+ *
+ * `undefined` (the default, outside any `EditorRoot`, or before it has
+ * mounted) falls back to Mantine's own default portal behavior.
+ */
+export declare const PortalTargetContext: import("react").Context<string | undefined>;
+export declare function usePortalTarget(): string | undefined;
+//# sourceMappingURL=PortalTargetContext.d.ts.map

package/dist/PortalTargetContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PortalTargetContext.d.ts","sourceRoot":"","sources":["../src/PortalTargetContext.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,mBAAmB,6CAA+C,CAAC;AAEhF,wBAAgB,eAAe,IAAI,MAAM,GAAG,SAAS,CAEpD"}

package/dist/PortalTargetContext.js

@@ -0,0 +1,18 @@
+import { createContext, useContext } from 'react';
+/**
+ * CSS selector for the portal-anchor `<div>` `EditorRoot` renders as the
+ * first child of `.likhari-root` (see EditorRoot.tsx). Mantine's `Menu`,
+ * `Modal`, `Select`'s combobox and `Tooltip` all default to portaling their
+ * content to `document.body` — outside the DOM subtree that carries the
+ * `--editor-*` CSS custom properties (`.likhari-theme-scope`) and the `dir`
+ * attribute (`.likhari-root`), so none of that styling/direction reaches
+ * them. Passing this selector as the target fixes that by portaling into a
+ * genuine descendant of both instead.
+ *
+ * `undefined` (the default, outside any `EditorRoot`, or before it has
+ * mounted) falls back to Mantine's own default portal behavior.
+ */
+export const PortalTargetContext = createContext(undefined);
+export function usePortalTarget() {
+    return useContext(PortalTargetContext);
+}

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

@@ -1 +1 @@
-{"version":3,"file":"LinkDialog.d.ts","sourceRoot":"","sources":["../../src/components/LinkDialog.tsx"],"names":[],"mappings":"AAIA,MAAM,WAAW,eAAe;IAC9B,MAAM,EAAE,OAAO,CAAC;IAChB,8DAA8D;IAC9D,UAAU,EAAE,MAAM,CAAC;IACnB,wFAAwF;IACxF,aAAa,EAAE,OAAO,CAAC;IACvB,QAAQ,EAAE,CAAC,IAAI,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IACxD,kDAAkD;IAClD,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED;gDACgD;AAChD,wBAAgB,UAAU,CAAC,EAAE,MAAM,EAAE,UAAU,EAAE,aAAa,EAAE,QAAQ,EAAE,QAAQ,EAAE,OAAO,EAAE,EAAE,eAAe,+BAgE7G"}
+{"version":3,"file":"LinkDialog.d.ts","sourceRoot":"","sources":["../../src/components/LinkDialog.tsx"],"names":[],"mappings":"AAMA,MAAM,WAAW,eAAe;IAC9B,MAAM,EAAE,OAAO,CAAC;IAChB,8DAA8D;IAC9D,UAAU,EAAE,MAAM,CAAC;IACnB,wFAAwF;IACxF,aAAa,EAAE,OAAO,CAAC;IACvB,QAAQ,EAAE,CAAC,IAAI,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IACxD,kDAAkD;IAClD,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED;gDACgD;AAChD,wBAAgB,UAAU,CAAC,EAAE,MAAM,EAAE,UAAU,EAAE,aAAa,EAAE,QAAQ,EAAE,QAAQ,EAAE,OAAO,EAAE,EAAE,eAAe,+BAyE7G"}

package/dist/components/LinkDialog.js

@@ -2,9 +2,13 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useState } from 'react';
 import { Button, Group, Modal, TextInput } from '@mantine/core';
 import { normalizeLinkUrl } from '../utils/linkUrl.js';
+import { useUiStrings } from '../i18n/useStrings.js';
+import { usePortalTarget } from '../PortalTargetContext.js';
 /** Insert/edit-link dialog (UI spec §6). Mantine Modal supplies focus
  * trapping, Escape-to-close and the overlay. */
 export function LinkDialog({ opened, initialUrl, showTextField, onSubmit, onRemove, onClose }) {
+    const strings = useUiStrings();
+    const portalTarget = usePortalTarget();
     const [url, setUrl] = useState(initialUrl);
     const [text, setText] = useState('');
     const [error, setError] = useState(null);
@@ -19,13 +23,13 @@ export function LinkDialog({ opened, initialUrl, showTextField, onSubmit, onRemo
         e.preventDefault();
         const normalized = normalizeLinkUrl(url);
         if (!normalized) {
-            setError('Enter a valid http(s), mailto, tel or relative URL');
+            setError(strings.linkDialog.invalidUrl);
             return;
         }
         onSubmit({ url: normalized, text: text.trim() || normalized });
     };
-    return (_jsx(Modal, { opened: opened, onClose: onClose, title: onRemove ? 'Edit link' : 'Insert link', centered: true, size: "sm", children: _jsxs("form", { onSubmit: handleSubmit, children: [_jsx(TextInput, { label: "URL", placeholder: "https://example.com", value: url, onChange: (e) => {
+    return (_jsx(Modal, { opened: opened, onClose: onClose, title: onRemove ? strings.linkDialog.titleEdit : strings.linkDialog.titleInsert, centered: true, size: "sm", portalProps: { target: portalTarget }, children: _jsxs("form", { onSubmit: handleSubmit, children: [_jsx(TextInput, { label: strings.linkDialog.urlLabel, placeholder: strings.linkDialog.urlPlaceholder, value: url, onChange: (e) => {
                         setUrl(e.currentTarget.value);
                         setError(null);
-                    }, error: error, "data-autofocus": true }), showTextField && (_jsx(TextInput, { mt: "sm", label: "Text", placeholder: "Link text (defaults to the URL)", value: text, onChange: (e) => setText(e.currentTarget.value) })), _jsxs(Group, { justify: "space-between", mt: "md", children: [onRemove ? (_jsx(Button, { variant: "subtle", color: "red", onClick: onRemove, children: "Remove link" })) : (_jsx("span", {})), _jsxs(Group, { gap: "xs", children: [_jsx(Button, { variant: "default", onClick: onClose, children: "Cancel" }), _jsx(Button, { type: "submit", children: "Apply" })] })] })] }) }));
+                    }, error: error, "data-autofocus": true }), showTextField && (_jsx(TextInput, { mt: "sm", label: strings.linkDialog.textLabel, placeholder: strings.linkDialog.textPlaceholder, value: text, onChange: (e) => setText(e.currentTarget.value) })), _jsxs(Group, { justify: "space-between", mt: "md", children: [onRemove ? (_jsx(Button, { variant: "subtle", color: "red", onClick: onRemove, children: strings.link.removeLink })) : (_jsx("span", {})), _jsxs(Group, { gap: "xs", children: [_jsx(Button, { variant: "default", onClick: onClose, children: strings.common.cancel }), _jsx(Button, { type: "submit", children: strings.linkDialog.apply })] })] })] }) }));
 }

package/dist/components/Toolbar.d.ts

@@ -1,5 +1,6 @@
 import type { ResolvedEditorFeatureConfig } from '@inshapardaz/likhari-core';
 import { type FontOption } from '../fonts/index.js';
+import type { Locale } from '../i18n/strings.js';
 export interface ToolbarProps {
     config: ResolvedEditorFeatureConfig;
     onSave?: () => void;
@@ -9,6 +10,8 @@ export interface ToolbarProps {
     fontOptions?: FontOption[];
     /** Text direction of the canvas; picks which default font and size are pre-selected. */
     direction?: 'ltr' | 'rtl';
+    /** UI locale — picks the translated strings for labels, tooltips and menu items. */
+    locale?: Locale;
 }
-export declare function Toolbar({ config, onSave, isDirty, showSave, fontOptions, direction }: ToolbarProps): import("react").JSX.Element;
+export declare function Toolbar({ config, onSave, isDirty, showSave, fontOptions, direction, locale }: ToolbarProps): import("react").JSX.Element;
 //# sourceMappingURL=Toolbar.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Toolbar.d.ts","sourceRoot":"","sources":["../../src/components/Toolbar.tsx"],"names":[],"mappings":"AA0CA,OAAO,KAAK,EAAE,2BAA2B,EAAE,MAAM,2BAA2B,CAAC;AAC7E,OAAO,EAA6D,KAAK,UAAU,EAAE,MAAM,UAAU,CAAC;AAmPtG,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;IACnB,sEAAsE;IACtE,WAAW,CAAC,EAAE,UAAU,EAAE,CAAC;IAC3B,wFAAwF;IACxF,SAAS,CAAC,EAAE,KAAK,GAAG,KAAK,CAAC;CAC3B;AAED,wBAAgB,OAAO,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,QAAQ,EAAE,WAAkC,EAAE,SAAiB,EAAE,EAAE,YAAY,+BAqmBjI"}
+{"version":3,"file":"Toolbar.d.ts","sourceRoot":"","sources":["../../src/components/Toolbar.tsx"],"names":[],"mappings":"AA4CA,OAAO,KAAK,EAAE,2BAA2B,EAAE,MAAM,2BAA2B,CAAC;AAC7E,OAAO,EAA6D,KAAK,UAAU,EAAE,MAAM,UAAU,CAAC;AAItG,OAAO,KAAK,EAAE,MAAM,EAAW,MAAM,iBAAiB,CAAC;AAqUvD,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;IACnB,sEAAsE;IACtE,WAAW,CAAC,EAAE,UAAU,EAAE,CAAC;IAC3B,wFAAwF;IACxF,SAAS,CAAC,EAAE,KAAK,GAAG,KAAK,CAAC;IAC1B,oFAAoF;IACpF,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,wBAAgB,OAAO,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,QAAQ,EAAE,WAAkC,EAAE,SAAiB,EAAE,MAAa,EAAE,EAAE,YAAY,+BA8wBhJ"}