@inshapardaz/likhari-react 0.1.7-dev.81 → 0.1.7-dev.86

package/dist/persistence/draftUi.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"draftUi.d.ts","sourceRoot":"","sources":["../../src/persistence/draftUi.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAC7C,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,SAAS,CAAC;AAEtC;;qDAEqD;AACrD,wBAAgB,kBAAkB,CAAC,MAAM,EAAE,aAAa,EAAE,IAAI,EAAE,MAAM,GAAG,OAAO,CAO/E;AAID,8DAA8D;AAC9D,wBAAgB,eAAe,CAAC,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,GAAG,MAAM,CAOvE"}

package/dist/persistence/draftUi.js

@@ -0,0 +1,23 @@
+/** Replaces the editor's content with a stored draft's Lexical JSON. Returns
+ * false (leaving the editor untouched) if the draft is corrupt or from an
+ * incompatible node schema, rather than throwing. */
+export function applyDraftToEditor(editor, json) {
+    try {
+        editor.setEditorState(editor.parseEditorState(json));
+        return true;
+    }
+    catch {
+        return false;
+    }
+}
+const INTL_LOCALES = { en: 'en', ur: 'ur', 'pa-shahmukhi': 'pa-Arab' };
+/** A draft's save time as a short localized date and time. */
+export function formatDraftTime(savedAt, locale) {
+    const date = new Date(savedAt);
+    try {
+        return new Intl.DateTimeFormat(INTL_LOCALES[locale], { dateStyle: 'medium', timeStyle: 'short' }).format(date);
+    }
+    catch {
+        return date.toLocaleString();
+    }
+}

package/dist/theme/editor.css

@@ -253,45 +253,6 @@
   margin: 1.5em 0;
 }
 
-/* Page break — a print/export concept with no visual meaning while editing
-   on screen, so it gets its own clearly-labeled dashed marker rather than
-   masquerading as a horizontal rule. The actual page-break behavior only
-   takes effect when printing (lexical-editor-spec.md §4.3/§4.6). */
-.likhari-page-break {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  margin: 1.5em 0;
-  font-size: 12px;
-  cursor: default;
-}
-
-.likhari-page-break-line {
-  flex: 1 1 auto;
-  border-top: 1px dashed var(--editor-line);
-}
-
-.likhari-page-break-label {
-  color: var(--editor-ink-soft);
-  white-space: nowrap;
-}
-
-.likhari-page-break-selected {
-  outline: 2px solid var(--editor-accent);
-  outline-offset: 2px;
-  border-radius: 4px;
-}
-
-@media print {
-  .likhari-page-break {
-    page-break-after: always;
-    /* Hide the on-screen marker itself when actually printing — the
-       browser's own pagination (triggered by page-break-after) is what
-       matters there, not the editing-time label. */
-    visibility: hidden;
-  }
-}
-
 /* Images — block-level figure; the caption is static text (edited in the
    image's dialog), and a selected image gets a corner resize handle. */
 .likhari-image-block {
@@ -409,3 +370,77 @@
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+
+/* Restore-draft banner: a strip between the toolbar and the canvas. Uses the
+   editor's own tokens, so it follows the accent color and dark mode. */
+.likhari-draft-banner {
+  display: flex;
+  flex-shrink: 0;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px 12px;
+  padding: 8px 12px;
+  background: var(--editor-accent-soft);
+  border-bottom: 1px solid var(--editor-line);
+  color: var(--editor-ink);
+  font-size: 13px;
+}
+
+.likhari-draft-banner-message {
+  display: flex;
+  flex: 1 1 240px;
+  align-items: center;
+  gap: 8px;
+}
+
+.likhari-draft-banner-message svg {
+  flex-shrink: 0;
+  color: var(--editor-accent);
+}
+
+.likhari-draft-banner-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+
+.likhari-draft-banner-button {
+  height: 28px;
+  padding: 0 12px;
+  border: 1px solid var(--editor-line-strong);
+  border-radius: 6px;
+  background: var(--editor-paper);
+  color: var(--editor-ink);
+  font: inherit;
+  font-weight: 500;
+  cursor: pointer;
+}
+
+.likhari-draft-banner-button:hover {
+  background: var(--editor-paper-dim);
+}
+
+.likhari-draft-banner-button[data-variant='primary'] {
+  border-color: var(--editor-accent);
+  background: var(--editor-accent);
+  color: var(--editor-paper);
+}
+
+.likhari-draft-banner-button[data-variant='primary']:hover {
+  filter: brightness(1.1);
+}
+
+.likhari-draft-banner-button[data-variant='danger'] {
+  border-color: transparent;
+  background: transparent;
+  color: var(--editor-danger);
+}
+
+.likhari-draft-banner-button[data-variant='danger']:hover {
+  background: var(--editor-paper-dim);
+}
+
+.likhari-draft-banner-button:focus-visible {
+  outline: 2px solid var(--editor-accent);
+  outline-offset: 1px;
+}

package/dist/theme/editorTheme.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"editorTheme.d.ts","sourceRoot":"","sources":["../../src/theme/editorTheme.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAElD;;;;GAIG;AACH,eAAO,MAAM,WAAW,EAAE,kBA+BzB,CAAC"}
+{"version":3,"file":"editorTheme.d.ts","sourceRoot":"","sources":["../../src/theme/editorTheme.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAElD;;;;GAIG;AACH,eAAO,MAAM,WAAW,EAAE,kBA8BzB,CAAC"}

package/dist/theme/editorTheme.js

@@ -33,5 +33,4 @@ export const editorTheme = {
     },
     hr: 'likhari-hr',
     image: 'likhari-image-block',
-    pageBreak: 'likhari-page-break',
 };

package/package.json

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

package/dist/blocks/PageBreakNode.d.ts

@@ -1,30 +0,0 @@
-import { type ReactElement } from 'react';
-import { DecoratorNode, type DOMConversionMap, type DOMExportOutput, type EditorConfig, type LexicalCommand, type LexicalNode, type SerializedLexicalNode } from 'lexical';
-export declare const INSERT_PAGE_BREAK_COMMAND: LexicalCommand<void>;
-export type SerializedPageBreakNode = SerializedLexicalNode;
-/**
- * A manual page break — a print/paginated-export concept with no native
- * Lexical node (lexical-editor-spec.md §4.3/§4.6). Renders as a visible
- * dashed marker while editing, and as `page-break-after: always` both live
- * (a print stylesheet, editor.css) and in exported HTML (`exportDOM`).
- *
- * Mirrors @lexical/react's HorizontalRuleNode pattern: `createDOM` returns
- * the actual visible element (the click target `PageBreakComponent` wires
- * selection/delete against), rather than `decorate()` rendering visuals.
- */
-export declare class PageBreakNode extends DecoratorNode<ReactElement> {
-    static getType(): string;
-    static clone(node: PageBreakNode): PageBreakNode;
-    static importJSON(): PageBreakNode;
-    exportJSON(): SerializedPageBreakNode;
-    static importDOM(): DOMConversionMap | null;
-    exportDOM(): DOMExportOutput;
-    createDOM(config: EditorConfig): HTMLElement;
-    getTextContent(): string;
-    isInline(): false;
-    updateDOM(): boolean;
-    decorate(): import("react").JSX.Element;
-}
-export declare function $createPageBreakNode(): PageBreakNode;
-export declare function $isPageBreakNode(node: LexicalNode | null | undefined): node is PageBreakNode;
-//# sourceMappingURL=PageBreakNode.d.ts.map

package/dist/blocks/PageBreakNode.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"PageBreakNode.d.ts","sourceRoot":"","sources":["../../src/blocks/PageBreakNode.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA0B,KAAK,YAAY,EAAE,MAAM,OAAO,CAAC;AAKlE,OAAO,EAOL,aAAa,EAGb,KAAK,gBAAgB,EACrB,KAAK,eAAe,EACpB,KAAK,YAAY,EACjB,KAAK,cAAc,EACnB,KAAK,WAAW,EAEhB,KAAK,qBAAqB,EAC3B,MAAM,SAAS,CAAC;AAEjB,eAAO,MAAM,yBAAyB,EAAE,cAAc,CAAC,IAAI,CAA8C,CAAC;AAE1G,MAAM,MAAM,uBAAuB,GAAG,qBAAqB,CAAC;AA2D5D;;;;;;;;;GASG;AACH,qBAAa,aAAc,SAAQ,aAAa,CAAC,YAAY,CAAC;IAC5D,MAAM,CAAC,OAAO,IAAI,MAAM;IAIxB,MAAM,CAAC,KAAK,CAAC,IAAI,EAAE,aAAa,GAAG,aAAa;IAIhD,MAAM,CAAC,UAAU,IAAI,aAAa;IAIlC,UAAU,IAAI,uBAAuB;IAIrC,MAAM,CAAC,SAAS,IAAI,gBAAgB,GAAG,IAAI;IAS3C,SAAS,IAAI,eAAe;IAO5B,SAAS,CAAC,MAAM,EAAE,YAAY,GAAG,WAAW;IAM5C,cAAc,IAAI,MAAM;IAIxB,QAAQ,IAAI,KAAK;IAIjB,SAAS,IAAI,OAAO;IAIpB,QAAQ;CAGT;AAED,wBAAgB,oBAAoB,IAAI,aAAa,CAEpD;AAED,wBAAgB,gBAAgB,CAAC,IAAI,EAAE,WAAW,GAAG,IAAI,GAAG,SAAS,GAAG,IAAI,IAAI,aAAa,CAE5F"}

package/dist/blocks/PageBreakNode.js

@@ -1,110 +0,0 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useEffect } from 'react';
-import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
-import { useLexicalNodeSelection } from '@lexical/react/useLexicalNodeSelection';
-import { addClassNamesToElement, mergeRegister, removeClassNamesFromElement } from '@lexical/utils';
-import { useUiStrings } from '../i18n/useStrings.js';
-import { $applyNodeReplacement, $getSelection, $isNodeSelection, CLICK_COMMAND, COMMAND_PRIORITY_LOW, createCommand, DecoratorNode, KEY_BACKSPACE_COMMAND, KEY_DELETE_COMMAND, } from 'lexical';
-export const INSERT_PAGE_BREAK_COMMAND = createCommand('INSERT_PAGE_BREAK_COMMAND');
-const SELECTED_CLASS_NAME = 'likhari-page-break-selected';
-function PageBreakComponent({ nodeKey }) {
-    const [editor] = useLexicalComposerContext();
-    const strings = useUiStrings();
-    const [isSelected, setSelected, clearSelection] = useLexicalNodeSelection(nodeKey);
-    const onDelete = useCallback((event) => {
-        const selection = $getSelection();
-        if (isSelected && $isNodeSelection(selection)) {
-            event.preventDefault();
-            editor.update(() => {
-                selection.getNodes().forEach((node) => {
-                    if ($isPageBreakNode(node))
-                        node.remove();
-                });
-            });
-        }
-        return false;
-    }, [editor, isSelected]);
-    useEffect(() => {
-        return mergeRegister(editor.registerCommand(CLICK_COMMAND, (event) => {
-            const element = editor.getElementByKey(nodeKey);
-            if (event.target !== element)
-                return false;
-            if (!event.shiftKey)
-                clearSelection();
-            setSelected(!isSelected);
-            return true;
-        }, COMMAND_PRIORITY_LOW), editor.registerCommand(KEY_DELETE_COMMAND, onDelete, COMMAND_PRIORITY_LOW), editor.registerCommand(KEY_BACKSPACE_COMMAND, onDelete, COMMAND_PRIORITY_LOW));
-    }, [clearSelection, editor, isSelected, nodeKey, onDelete, setSelected]);
-    useEffect(() => {
-        const element = editor.getElementByKey(nodeKey);
-        if (!element)
-            return;
-        if (isSelected)
-            addClassNamesToElement(element, SELECTED_CLASS_NAME);
-        else
-            removeClassNamesFromElement(element, SELECTED_CLASS_NAME);
-    }, [editor, isSelected, nodeKey]);
-    return (_jsxs(_Fragment, { children: [_jsx("span", { className: "likhari-page-break-line", "aria-hidden": "true" }), _jsx("span", { className: "likhari-page-break-label", children: strings.editor.pageBreakLabel }), _jsx("span", { className: "likhari-page-break-line", "aria-hidden": "true" })] }));
-}
-/**
- * A manual page break — a print/paginated-export concept with no native
- * Lexical node (lexical-editor-spec.md §4.3/§4.6). Renders as a visible
- * dashed marker while editing, and as `page-break-after: always` both live
- * (a print stylesheet, editor.css) and in exported HTML (`exportDOM`).
- *
- * Mirrors @lexical/react's HorizontalRuleNode pattern: `createDOM` returns
- * the actual visible element (the click target `PageBreakComponent` wires
- * selection/delete against), rather than `decorate()` rendering visuals.
- */
-export class PageBreakNode extends DecoratorNode {
-    static getType() {
-        return 'page-break';
-    }
-    static clone(node) {
-        return new PageBreakNode(node.__key);
-    }
-    static importJSON() {
-        return $createPageBreakNode();
-    }
-    exportJSON() {
-        return { type: 'page-break', version: 1 };
-    }
-    static importDOM() {
-        return {
-            div: (domNode) => {
-                if (!domNode.hasAttribute('data-likhari-page-break'))
-                    return null;
-                return { conversion: () => ({ node: $createPageBreakNode() }), priority: 2 };
-            },
-        };
-    }
-    exportDOM() {
-        const element = document.createElement('div');
-        element.setAttribute('data-likhari-page-break', '');
-        element.style.pageBreakAfter = 'always';
-        return { element };
-    }
-    createDOM(config) {
-        const element = document.createElement('div');
-        addClassNamesToElement(element, config.theme.pageBreak ?? 'likhari-page-break');
-        return element;
-    }
-    getTextContent() {
-        return '\n';
-    }
-    isInline() {
-        return false;
-    }
-    updateDOM() {
-        return false;
-    }
-    decorate() {
-        return _jsx(PageBreakComponent, { nodeKey: this.__key });
-    }
-}
-export function $createPageBreakNode() {
-    return $applyNodeReplacement(new PageBreakNode());
-}
-export function $isPageBreakNode(node) {
-    return node instanceof PageBreakNode;
-}

package/dist/plugins/PageBreakPlugin.d.ts

@@ -1,3 +0,0 @@
-/** Registers INSERT_PAGE_BREAK_COMMAND — mirrors @lexical/react's own HorizontalRulePlugin. */
-export declare function PageBreakPlugin(): null;
-//# sourceMappingURL=PageBreakPlugin.d.ts.map

package/dist/plugins/PageBreakPlugin.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"PageBreakPlugin.d.ts","sourceRoot":"","sources":["../../src/plugins/PageBreakPlugin.tsx"],"names":[],"mappings":"AAMA,+FAA+F;AAC/F,wBAAgB,eAAe,SAiB9B"}

package/dist/plugins/PageBreakPlugin.js

@@ -1,19 +0,0 @@
-import { useEffect } from 'react';
-import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
-import { $getSelection, $isRangeSelection, COMMAND_PRIORITY_EDITOR } from 'lexical';
-import { $insertNodeToNearestRoot } from '@lexical/utils';
-import { $createPageBreakNode, INSERT_PAGE_BREAK_COMMAND } from '../blocks/PageBreakNode.js';
-/** Registers INSERT_PAGE_BREAK_COMMAND — mirrors @lexical/react's own HorizontalRulePlugin. */
-export function PageBreakPlugin() {
-    const [editor] = useLexicalComposerContext();
-    useEffect(() => {
-        return editor.registerCommand(INSERT_PAGE_BREAK_COMMAND, () => {
-            const selection = $getSelection();
-            if (!$isRangeSelection(selection))
-                return false;
-            $insertNodeToNearestRoot($createPageBreakNode());
-            return true;
-        }, COMMAND_PRIORITY_EDITOR);
-    }, [editor]);
-    return null;
-}