@inshapardaz/likhari-react 0.1.4 → 0.1.5-dev.41

package/dist/image/ImageDialog.d.ts

@@ -0,0 +1,25 @@
+import type { ImageLinkType } from './ImageNode.js';
+export interface ImageDialogResult {
+    src: string;
+    altText: string;
+    caption: string | null;
+    linkType: ImageLinkType;
+}
+export interface ImageDialogProps {
+    opened: boolean;
+    /** `images.linked` — allow an external URL. */
+    allowLinked: boolean;
+    /** `images.embedded` — allow uploading a file. */
+    allowEmbedded: boolean;
+    /** `images.caption` — image gets an (initially empty) caption. */
+    allowCaption: boolean;
+    /** `images.maxSizeMB` */
+    maxSizeMB: number;
+    /** Host upload handler; when absent, uploads are embedded as base64 data URIs. */
+    onImageUpload?: (file: File) => Promise<string>;
+    onSubmit: (image: ImageDialogResult) => void;
+    onClose: () => void;
+}
+/** Insert-image dialog (UI spec §6): an external URL and/or an uploaded file. */
+export declare function ImageDialog({ opened, allowLinked, allowEmbedded, allowCaption, maxSizeMB, onImageUpload, onSubmit, onClose, }: ImageDialogProps): import("react").JSX.Element;
+//# sourceMappingURL=ImageDialog.d.ts.map

package/dist/image/ImageDialog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImageDialog.d.ts","sourceRoot":"","sources":["../../src/image/ImageDialog.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAEjD,MAAM,WAAW,iBAAiB;IAChC,GAAG,EAAE,MAAM,CAAC;IACZ,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,GAAG,IAAI,CAAC;IACvB,QAAQ,EAAE,aAAa,CAAC;CACzB;AAED,MAAM,WAAW,gBAAgB;IAC/B,MAAM,EAAE,OAAO,CAAC;IAChB,+CAA+C;IAC/C,WAAW,EAAE,OAAO,CAAC;IACrB,kDAAkD;IAClD,aAAa,EAAE,OAAO,CAAC;IACvB,kEAAkE;IAClE,YAAY,EAAE,OAAO,CAAC;IACtB,yBAAyB;IACzB,SAAS,EAAE,MAAM,CAAC;IAClB,kFAAkF;IAClF,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,OAAO,CAAC,MAAM,CAAC,CAAC;IAChD,QAAQ,EAAE,CAAC,KAAK,EAAE,iBAAiB,KAAK,IAAI,CAAC;IAC7C,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAWD,iFAAiF;AACjF,wBAAgB,WAAW,CAAC,EAC1B,MAAM,EACN,WAAW,EACX,aAAa,EACb,YAAY,EACZ,SAAS,EACT,aAAa,EACb,QAAQ,EACR,OAAO,GACR,EAAE,gBAAgB,+BAmHlB"}

package/dist/image/ImageDialog.js

@@ -0,0 +1,76 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { Alert, Button, FileInput, Group, Modal, SegmentedControl, Stack, TextInput } from '@mantine/core';
+import { ACCEPTED_IMAGE_TYPES, normalizeImageUrl, validateImageFile } from './imageUrl.js';
+function readAsDataUrl(file) {
+    return new Promise((resolve, reject) => {
+        const reader = new FileReader();
+        reader.onload = () => resolve(String(reader.result));
+        reader.onerror = () => reject(reader.error ?? new Error('Could not read the file'));
+        reader.readAsDataURL(file);
+    });
+}
+/** Insert-image dialog (UI spec §6): an external URL and/or an uploaded file. */
+export function ImageDialog({ opened, allowLinked, allowEmbedded, allowCaption, maxSizeMB, onImageUpload, onSubmit, onClose, }) {
+    const defaultSource = allowLinked ? 'linked' : 'embedded';
+    const [source, setSource] = useState(defaultSource);
+    const [url, setUrl] = useState('');
+    const [file, setFile] = useState(null);
+    const [altText, setAltText] = useState('');
+    const [error, setError] = useState(null);
+    const [busy, setBusy] = useState(false);
+    useEffect(() => {
+        if (opened) {
+            setSource(defaultSource);
+            setUrl('');
+            setFile(null);
+            setAltText('');
+            setError(null);
+            setBusy(false);
+        }
+    }, [opened, defaultSource]);
+    const handleSubmit = async (e) => {
+        e.preventDefault();
+        setError(null);
+        try {
+            let src;
+            if (source === 'linked') {
+                src = normalizeImageUrl(url);
+                if (!src) {
+                    setError('Enter an http(s) or relative image URL');
+                    return;
+                }
+            }
+            else {
+                if (!file) {
+                    setError('Choose an image file');
+                    return;
+                }
+                const problem = validateImageFile(file, maxSizeMB);
+                if (problem) {
+                    setError(problem);
+                    return;
+                }
+                setBusy(true);
+                src = onImageUpload ? await onImageUpload(file) : await readAsDataUrl(file);
+                if (!normalizeImageUrl(src)) {
+                    setError('The upload handler returned an unusable image URL');
+                    setBusy(false);
+                    return;
+                }
+            }
+            onSubmit({ src, altText: altText.trim(), caption: allowCaption ? '' : null, linkType: source });
+        }
+        catch (err) {
+            setError(err instanceof Error ? err.message : 'Could not add the image');
+            setBusy(false);
+        }
+    };
+    return (_jsx(Modal, { opened: opened, onClose: onClose, title: "Insert image", centered: true, size: "sm", children: _jsx("form", { onSubmit: handleSubmit, children: _jsxs(Stack, { gap: "sm", children: [allowLinked && allowEmbedded && (_jsx(SegmentedControl, { fullWidth: true, value: source, onChange: (v) => {
+                            setSource(v);
+                            setError(null);
+                        }, data: [
+                            { value: 'linked', label: 'From URL' },
+                            { value: 'embedded', label: 'Upload' },
+                        ] })), source === 'linked' ? (_jsx(TextInput, { label: "Image URL", placeholder: "https://example.com/photo.jpg", value: url, onChange: (e) => setUrl(e.currentTarget.value), "data-autofocus": true })) : (_jsx(FileInput, { label: "Image file", placeholder: "Choose an image", accept: ACCEPTED_IMAGE_TYPES.join(','), value: file, onChange: setFile, description: `Up to ${maxSizeMB} MB${onImageUpload ? '' : '; stored inside the document'}` })), _jsx(TextInput, { label: "Alt text", description: "Describes the image for screen readers", value: altText, onChange: (e) => setAltText(e.currentTarget.value) }), error && (_jsx(Alert, { color: "red", variant: "light", p: "xs", children: error })), _jsxs(Group, { justify: "flex-end", gap: "xs", children: [_jsx(Button, { variant: "default", onClick: onClose, children: "Cancel" }), _jsx(Button, { type: "submit", loading: busy, children: "Insert" })] })] }) }) }));
+}

package/dist/image/ImageNode.d.ts

@@ -0,0 +1,56 @@
+import { type ReactElement } from 'react';
+import { DecoratorNode, type DOMExportOutput, type EditorConfig, type LexicalNode, type NodeKey, type SerializedLexicalNode, type Spread } from 'lexical';
+/** How the image's bytes are held: an external URL, or embedded in the
+ * document (a base64 data URI, or a URL returned by the host's upload handler). */
+export type ImageLinkType = 'linked' | 'embedded';
+export interface ImagePayload {
+    src: string;
+    altText?: string;
+    /** null = no caption; '' = caption enabled but empty */
+    caption?: string | null;
+    linkType: ImageLinkType;
+    width?: number | null;
+    height?: number | null;
+    key?: NodeKey;
+}
+export type SerializedImageNode = Spread<{
+    src: string;
+    altText: string;
+    caption: string | null;
+    linkType: ImageLinkType;
+    width: number | null;
+    height: number | null;
+}, SerializedLexicalNode>;
+/**
+ * Block-level image (editor-architecture-design.md §3.5). The caption is a
+ * plain string edited through an input under the image — not the nested
+ * sub-editor the architecture doc leaves open — which keeps caption edits in
+ * the parent editor's undo history.
+ */
+export declare class ImageNode extends DecoratorNode<ReactElement> {
+    __src: string;
+    __altText: string;
+    __caption: string | null;
+    __linkType: ImageLinkType;
+    __width: number | null;
+    __height: number | null;
+    static getType(): string;
+    static clone(node: ImageNode): ImageNode;
+    static importJSON(json: SerializedImageNode): ImageNode;
+    constructor(src: string, altText?: string, caption?: string | null, linkType?: ImageLinkType, width?: number | null, height?: number | null, key?: NodeKey);
+    exportJSON(): SerializedImageNode;
+    /** `<figure><img><figcaption>` — the figure/figcaption semantics from spec §4.7. */
+    exportDOM(): DOMExportOutput;
+    createDOM(config: EditorConfig): HTMLElement;
+    updateDOM(): false;
+    isInline(): false;
+    getSrc(): string;
+    getAltText(): string;
+    getCaption(): string | null;
+    setCaption(caption: string | null): this;
+    getTextContent(): string;
+    decorate(): ReactElement;
+}
+export declare function $createImageNode({ src, altText, caption, linkType, width, height, key }: ImagePayload): ImageNode;
+export declare function $isImageNode(node: LexicalNode | null | undefined): node is ImageNode;
+//# sourceMappingURL=ImageNode.d.ts.map

package/dist/image/ImageNode.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImageNode.d.ts","sourceRoot":"","sources":["../../src/image/ImageNode.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAkC,KAAK,YAAY,EAAE,MAAM,OAAO,CAAC;AAG1E,OAAO,EAML,aAAa,EAGb,KAAK,eAAe,EACpB,KAAK,YAAY,EACjB,KAAK,WAAW,EAChB,KAAK,OAAO,EACZ,KAAK,qBAAqB,EAC1B,KAAK,MAAM,EACZ,MAAM,SAAS,CAAC;AAEjB;mFACmF;AACnF,MAAM,MAAM,aAAa,GAAG,QAAQ,GAAG,UAAU,CAAC;AAElD,MAAM,WAAW,YAAY;IAC3B,GAAG,EAAE,MAAM,CAAC;IACZ,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,wDAAwD;IACxD,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,QAAQ,EAAE,aAAa,CAAC;IACxB,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACvB,GAAG,CAAC,EAAE,OAAO,CAAC;CACf;AAED,MAAM,MAAM,mBAAmB,GAAG,MAAM,CACtC;IACE,GAAG,EAAE,MAAM,CAAC;IACZ,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,GAAG,IAAI,CAAC;IACvB,QAAQ,EAAE,aAAa,CAAC;IACxB,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC;CACvB,EACD,qBAAqB,CACtB,CAAC;AAEF;;;;;GAKG;AACH,qBAAa,SAAU,SAAQ,aAAa,CAAC,YAAY,CAAC;IACxD,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,UAAU,EAAE,aAAa,CAAC;IAC1B,OAAO,EAAE,MAAM,GAAG,IAAI,CAAC;IACvB,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAC;IAExB,MAAM,CAAC,OAAO,IAAI,MAAM;IAIxB,MAAM,CAAC,KAAK,CAAC,IAAI,EAAE,SAAS,GAAG,SAAS;IAIxC,MAAM,CAAC,UAAU,CAAC,IAAI,EAAE,mBAAmB,GAAG,SAAS;gBAYrD,GAAG,EAAE,MAAM,EACX,OAAO,SAAK,EACZ,OAAO,GAAE,MAAM,GAAG,IAAW,EAC7B,QAAQ,GAAE,aAAwB,EAClC,KAAK,GAAE,MAAM,GAAG,IAAW,EAC3B,MAAM,GAAE,MAAM,GAAG,IAAW,EAC5B,GAAG,CAAC,EAAE,OAAO;IAWf,UAAU,IAAI,mBAAmB;IAajC,oFAAoF;IACpF,SAAS,IAAI,eAAe;IAgB5B,SAAS,CAAC,MAAM,EAAE,YAAY,GAAG,WAAW;IAO5C,SAAS,IAAI,KAAK;IAIlB,QAAQ,IAAI,KAAK;IAIjB,MAAM,IAAI,MAAM;IAIhB,UAAU,IAAI,MAAM;IAIpB,UAAU,IAAI,MAAM,GAAG,IAAI;IAI3B,UAAU,CAAC,OAAO,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI;IAMxC,cAAc,IAAI,MAAM;IAIxB,QAAQ,IAAI,YAAY;CAYzB;AAED,wBAAgB,gBAAgB,CAAC,EAAE,GAAG,EAAE,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,EAAE,YAAY,GAAG,SAAS,CAEjH;AAED,wBAAgB,YAAY,CAAC,IAAI,EAAE,WAAW,GAAG,IAAI,GAAG,SAAS,GAAG,IAAI,IAAI,SAAS,CAEpF"}

package/dist/image/ImageNode.js

@@ -0,0 +1,151 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useRef } from 'react';
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { useLexicalNodeSelection } from '@lexical/react/useLexicalNodeSelection';
+import { $getNodeByKey, $getSelection, $isNodeSelection, CLICK_COMMAND, COMMAND_PRIORITY_LOW, DecoratorNode, KEY_BACKSPACE_COMMAND, KEY_DELETE_COMMAND, } from 'lexical';
+/**
+ * Block-level image (editor-architecture-design.md §3.5). The caption is a
+ * plain string edited through an input under the image — not the nested
+ * sub-editor the architecture doc leaves open — which keeps caption edits in
+ * the parent editor's undo history.
+ */
+export class ImageNode extends DecoratorNode {
+    static getType() {
+        return 'image';
+    }
+    static clone(node) {
+        return new ImageNode(node.__src, node.__altText, node.__caption, node.__linkType, node.__width, node.__height, node.__key);
+    }
+    static importJSON(json) {
+        return $createImageNode({
+            src: json.src,
+            altText: json.altText,
+            caption: json.caption,
+            linkType: json.linkType,
+            width: json.width,
+            height: json.height,
+        });
+    }
+    constructor(src, altText = '', caption = null, linkType = 'linked', width = null, height = null, key) {
+        super(key);
+        this.__src = src;
+        this.__altText = altText;
+        this.__caption = caption;
+        this.__linkType = linkType;
+        this.__width = width;
+        this.__height = height;
+    }
+    exportJSON() {
+        return {
+            type: 'image',
+            version: 1,
+            src: this.__src,
+            altText: this.__altText,
+            caption: this.__caption,
+            linkType: this.__linkType,
+            width: this.__width,
+            height: this.__height,
+        };
+    }
+    /** `<figure><img><figcaption>` — the figure/figcaption semantics from spec §4.7. */
+    exportDOM() {
+        const figure = document.createElement('figure');
+        const img = document.createElement('img');
+        img.setAttribute('src', this.__src);
+        img.setAttribute('alt', this.__altText);
+        if (this.__width)
+            img.setAttribute('width', String(this.__width));
+        if (this.__height)
+            img.setAttribute('height', String(this.__height));
+        figure.appendChild(img);
+        if (this.__caption) {
+            const caption = document.createElement('figcaption');
+            caption.textContent = this.__caption;
+            figure.appendChild(caption);
+        }
+        return { element: figure };
+    }
+    createDOM(config) {
+        const div = document.createElement('div');
+        const className = config.theme.image;
+        if (typeof className === 'string')
+            div.className = className;
+        return div;
+    }
+    updateDOM() {
+        return false;
+    }
+    isInline() {
+        return false;
+    }
+    getSrc() {
+        return this.__src;
+    }
+    getAltText() {
+        return this.__altText;
+    }
+    getCaption() {
+        return this.__caption;
+    }
+    setCaption(caption) {
+        const writable = this.getWritable();
+        writable.__caption = caption;
+        return writable;
+    }
+    getTextContent() {
+        return this.__altText || this.__caption || '';
+    }
+    decorate() {
+        return (_jsx(ImageComponent, { nodeKey: this.getKey(), src: this.__src, altText: this.__altText, caption: this.__caption, width: this.__width, height: this.__height }));
+    }
+}
+export function $createImageNode({ src, altText, caption, linkType, width, height, key }) {
+    return new ImageNode(src, altText, caption ?? null, linkType, width ?? null, height ?? null, key);
+}
+export function $isImageNode(node) {
+    return node instanceof ImageNode;
+}
+function ImageComponent({ nodeKey, src, altText, caption, width, height }) {
+    const [editor] = useLexicalComposerContext();
+    const [isSelected, setSelected, clearSelection] = useLexicalNodeSelection(nodeKey);
+    const imageRef = useRef(null);
+    // Selecting must go through CLICK_COMMAND (returning true) rather than a
+    // React onClick: otherwise Lexical's own click handling turns the DOM
+    // selection into a range selection right after, undoing the node selection.
+    useEffect(() => {
+        return editor.registerCommand(CLICK_COMMAND, (event) => {
+            if (event.target !== imageRef.current)
+                return false;
+            clearSelection();
+            setSelected(true);
+            return true;
+        }, COMMAND_PRIORITY_LOW);
+    }, [editor, clearSelection, setSelected]);
+    // Delete/Backspace removes the selected image — but not while typing in the
+    // caption input, whose keystrokes also reach the editor's root listener.
+    const onDelete = useCallback((event) => {
+        if (!isSelected || event.target instanceof HTMLInputElement)
+            return false;
+        if (!$isNodeSelection($getSelection()))
+            return false;
+        event.preventDefault();
+        $getNodeByKey(nodeKey)?.remove();
+        return true;
+    }, [isSelected, nodeKey]);
+    useEffect(() => {
+        const unregisterDelete = editor.registerCommand(KEY_DELETE_COMMAND, onDelete, COMMAND_PRIORITY_LOW);
+        const unregisterBackspace = editor.registerCommand(KEY_BACKSPACE_COMMAND, onDelete, COMMAND_PRIORITY_LOW);
+        return () => {
+            unregisterDelete();
+            unregisterBackspace();
+        };
+    }, [editor, onDelete]);
+    const setCaption = (value) => {
+        editor.update(() => {
+            const node = $getNodeByKey(nodeKey);
+            if ($isImageNode(node))
+                node.setCaption(value);
+        });
+    };
+    return (_jsxs("figure", { className: "likhari-image-figure", "data-selected": isSelected ? 'true' : 'false', contentEditable: false, children: [_jsx("img", { ref: imageRef, className: "likhari-image", src: src, alt: altText, width: width ?? undefined, height: height ?? undefined, draggable: false }), caption !== null && (_jsx("input", { className: "likhari-image-caption", type: "text", "aria-label": "Image caption", placeholder: "Add a caption\u2026", value: caption, onChange: (e) => setCaption(e.currentTarget.value) }))] }));
+}

package/dist/image/imageUrl.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Validates the source of a linked image. Accepts http(s) URLs, relative
+ * paths, and base64 raster/SVG data URIs (what an embedded image stores);
+ * anything else (javascript:, other data: types, file:, ...) is rejected.
+ * Returns the trimmed URL, or null when it should be refused.
+ */
+export declare function normalizeImageUrl(input: string): string | null;
+export declare const ACCEPTED_IMAGE_TYPES: string[];
+/** Returns an error message if the file can't be inserted, otherwise null. */
+export declare function validateImageFile(file: {
+    type: string;
+    size: number;
+}, maxSizeMB: number): string | null;
+//# sourceMappingURL=imageUrl.d.ts.map

package/dist/image/imageUrl.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"imageUrl.d.ts","sourceRoot":"","sources":["../../src/image/imageUrl.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAO9D;AAED,eAAO,MAAM,oBAAoB,UAA0E,CAAC;AAE5G,8EAA8E;AAC9E,wBAAgB,iBAAiB,CAAC,IAAI,EAAE;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAA;CAAE,EAAE,SAAS,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAIxG"}

package/dist/image/imageUrl.js

@@ -0,0 +1,27 @@
+/**
+ * Validates the source of a linked image. Accepts http(s) URLs, relative
+ * paths, and base64 raster/SVG data URIs (what an embedded image stores);
+ * anything else (javascript:, other data: types, file:, ...) is rejected.
+ * Returns the trimmed URL, or null when it should be refused.
+ */
+export function normalizeImageUrl(input) {
+    const url = input.trim();
+    if (!url)
+        return null;
+    if (/^https?:\/\/\S+$/i.test(url))
+        return url;
+    if (/^(\/|\.\.?\/)\S*$/.test(url))
+        return url;
+    if (/^data:image\/(png|jpe?g|gif|webp|svg\+xml);base64,[a-z0-9+/=]+$/i.test(url))
+        return url;
+    return null;
+}
+export const ACCEPTED_IMAGE_TYPES = ['image/png', 'image/jpeg', 'image/gif', 'image/webp', 'image/svg+xml'];
+/** Returns an error message if the file can't be inserted, otherwise null. */
+export function validateImageFile(file, maxSizeMB) {
+    if (!ACCEPTED_IMAGE_TYPES.includes(file.type))
+        return 'Choose a PNG, JPEG, GIF, WebP or SVG image';
+    if (file.size > maxSizeMB * 1024 * 1024)
+        return `Image is larger than ${maxSizeMB} MB`;
+    return null;
+}

package/dist/index.d.ts

@@ -1,4 +1,8 @@
 export { EditorRoot } from './EditorRoot.js';
 export type { EditorRootProps, EditorRef, EditorInitialContent } from './EditorRoot.js';
 export { defaultMantineTheme } from './theme/mantineTheme.js';
+export { ImageNode, $createImageNode, $isImageNode } from './image/ImageNode.js';
+export type { ImagePayload, ImageLinkType, SerializedImageNode } from './image/ImageNode.js';
+export { DEFAULT_FONT_OPTIONS, URDU_WEB_FONT_OPTIONS, FONT_SIZES_PX } from './fonts/index.js';
+export type { FontOption } from './fonts/index.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,YAAY,EAAE,eAAe,EAAE,SAAS,EAAE,oBAAoB,EAAE,MAAM,cAAc,CAAC;AACrF,OAAO,EAAE,mBAAmB,EAAE,MAAM,sBAAsB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,YAAY,EAAE,eAAe,EAAE,SAAS,EAAE,oBAAoB,EAAE,MAAM,cAAc,CAAC;AACrF,OAAO,EAAE,mBAAmB,EAAE,MAAM,sBAAsB,CAAC;AAC3D,OAAO,EAAE,SAAS,EAAE,gBAAgB,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAC9E,YAAY,EAAE,YAAY,EAAE,aAAa,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAC;AAC1F,OAAO,EAAE,oBAAoB,EAAE,qBAAqB,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AACrF,YAAY,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC"}

package/dist/index.js

@@ -1,2 +1,4 @@
 export { EditorRoot } from './EditorRoot.js';
 export { defaultMantineTheme } from './theme/mantineTheme.js';
+export { ImageNode, $createImageNode, $isImageNode } from './image/ImageNode.js';
+export { DEFAULT_FONT_OPTIONS, URDU_WEB_FONT_OPTIONS, FONT_SIZES_PX } from './fonts/index.js';

package/dist/nodes.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"nodes.d.ts","sourceRoot":"","sources":["../src/nodes.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAMlD;;;;;;;;GAQG;AACH,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,WAAW,CAAC,EAO5C,CAAC"}
+{"version":3,"file":"nodes.d.ts","sourceRoot":"","sources":["../src/nodes.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAOlD;;;;;;;;GAQG;AACH,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,WAAW,CAAC,EAQ5C,CAAC"}

package/dist/nodes.js

@@ -2,6 +2,7 @@ import { HeadingNode, QuoteNode } from '@lexical/rich-text';
 import { ListItemNode, ListNode } from '@lexical/list';
 import { LinkNode } from '@lexical/link';
 import { HorizontalRuleNode } from '@lexical/react/LexicalHorizontalRuleNode';
+import { ImageNode } from './image/ImageNode.js';
 /**
  * Node types registered on the editor at construction time. Per
  * editor-architecture-design.md §2, node registration cannot be conditional
@@ -18,4 +19,5 @@ export const EDITOR_NODES = [
     ListItemNode,
     LinkNode,
     HorizontalRuleNode,
+    ImageNode,
 ];

package/dist/plugins/LinkPastePlugin.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Turns pasted URLs into links instead of inserting them as bare text:
+ *
+ * - a lone URL pasted over selected text links that text (the URL isn't inserted);
+ * - a lone URL pasted at a caret becomes a link whose text is the URL;
+ * - a single line of plain text containing URLs gets a link node per URL.
+ *
+ * Everything else — multi-line text, or anything copied with HTML (Lexical's
+ * own paste already turns `<a>` into links) — falls through to the default paste.
+ */
+export declare function LinkPastePlugin(): null;
+//# sourceMappingURL=LinkPastePlugin.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"LinkPastePlugin.d.ts","sourceRoot":"","sources":["../../src/plugins/LinkPastePlugin.tsx"],"names":[],"mappings":"AAaA;;;;;;;;;GASG;AACH,wBAAgB,eAAe,SAyC9B"}

package/dist/plugins/LinkPastePlugin.js

@@ -0,0 +1,50 @@
+import { useEffect } from 'react';
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { $createLinkNode, $toggleLink } from '@lexical/link';
+import { $createTextNode, $getSelection, $isRangeSelection, COMMAND_PRIORITY_LOW, PASTE_COMMAND, } from 'lexical';
+import { splitPastedText } from '../utils/linkUrl.js';
+/**
+ * Turns pasted URLs into links instead of inserting them as bare text:
+ *
+ * - a lone URL pasted over selected text links that text (the URL isn't inserted);
+ * - a lone URL pasted at a caret becomes a link whose text is the URL;
+ * - a single line of plain text containing URLs gets a link node per URL.
+ *
+ * Everything else — multi-line text, or anything copied with HTML (Lexical's
+ * own paste already turns `<a>` into links) — falls through to the default paste.
+ */
+export function LinkPastePlugin() {
+    const [editor] = useLexicalComposerContext();
+    useEffect(() => {
+        return editor.registerCommand(PASTE_COMMAND, (event) => {
+            const clipboard = 'clipboardData' in event ? event.clipboardData : null;
+            const text = clipboard?.getData('text/plain');
+            if (!clipboard || !text)
+                return false;
+            const segments = splitPastedText(text.trim());
+            const hasLink = segments.some((s) => s.type === 'link');
+            const isLoneUrl = segments.length === 1 && segments[0].type === 'link';
+            const isPlainSingleLine = !clipboard.getData('text/html') && !/[\r\n]/.test(text.trim());
+            if (!hasLink || !(isLoneUrl || isPlainSingleLine))
+                return false;
+            const selection = $getSelection();
+            if (!$isRangeSelection(selection))
+                return false;
+            event.preventDefault();
+            if (isLoneUrl && !selection.isCollapsed()) {
+                $toggleLink(segments[0].url);
+                return true;
+            }
+            const nodes = segments.map((segment) => {
+                if (segment.type === 'text')
+                    return $createTextNode(segment.text);
+                const link = $createLinkNode(segment.url);
+                link.append($createTextNode(segment.text));
+                return link;
+            });
+            selection.insertNodes(nodes);
+            return true;
+        }, COMMAND_PRIORITY_LOW);
+    }, [editor]);
+    return null;
+}

package/dist/theme/editor.css

@@ -234,3 +234,58 @@
   border-top: 1px solid var(--editor-line);
   margin: 1.5em 0;
 }
+
+/* Images — block-level figure with an optional caption input. */
+.likhari-image-block {
+  margin: 0 0 1em 0;
+}
+
+.likhari-image-figure {
+  display: block;
+  margin: 0;
+  text-align: center;
+}
+
+.likhari-image {
+  display: inline-block;
+  max-width: 100%;
+  height: auto;
+  border-radius: 4px;
+  cursor: default;
+}
+
+.likhari-image-figure[data-selected='true'] .likhari-image {
+  outline: 2px solid var(--editor-accent);
+  outline-offset: 2px;
+}
+
+.likhari-image-caption {
+  display: block;
+  width: 100%;
+  margin-top: 6px;
+  padding: 2px 4px;
+  border: none;
+  border-bottom: 1px dashed transparent;
+  background: transparent;
+  color: var(--editor-ink-soft);
+  font: inherit;
+  font-size: 0.85em;
+  text-align: center;
+}
+
+.likhari-image-caption:hover,
+.likhari-image-caption:focus {
+  border-bottom-color: var(--editor-line-strong);
+  outline: none;
+}
+
+/* Link menu: the URL item shows one truncated line. */
+.likhari-link-menu-url {
+  max-width: 100%;
+}
+
+.likhari-link-menu-url .mantine-Menu-itemLabel {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}

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,kBA6BzB,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

@@ -32,4 +32,5 @@ export const editorTheme = {
         superscript: 'likhari-text-superscript',
     },
     hr: 'likhari-hr',
+    image: 'likhari-image-block',
 };

package/dist/utils/linkUrl.d.ts

@@ -0,0 +1,25 @@
+/**
+ * Normalizes a URL typed into the link dialog, or returns null if it should
+ * be rejected. Only http(s), mailto, tel, in-page (#), and relative URLs are
+ * accepted — any other scheme (javascript:, data:, vbscript:, ...) is
+ * refused so a pasted link can't carry script into exported HTML. A bare
+ * domain like "example.com/page" gets https:// prefixed.
+ */
+export declare function normalizeLinkUrl(input: string): string | null;
+export type PastedSegment = {
+    type: 'text';
+    text: string;
+} | {
+    type: 'link';
+    text: string;
+    url: string;
+};
+/**
+ * Splits pasted plain text into text and link segments. Only explicit URLs
+ * count (http(s)://, mailto:, or a www. prefix) — a bare "file.txt" or
+ * "example.com" is left as text, since pasted prose is full of those. Trailing
+ * sentence punctuation stays outside the link, and anything normalizeLinkUrl
+ * rejects stays text.
+ */
+export declare function splitPastedText(text: string): PastedSegment[];
+//# sourceMappingURL=linkUrl.d.ts.map

package/dist/utils/linkUrl.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"linkUrl.d.ts","sourceRoot":"","sources":["../../src/utils/linkUrl.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAc7D;AAED,MAAM,MAAM,aAAa,GAAG;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAA;CAAE,GAAG;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAC;IAAC,GAAG,EAAE,MAAM,CAAA;CAAE,CAAC;AAKzG;;;;;;GAMG;AACH,wBAAgB,eAAe,CAAC,IAAI,EAAE,MAAM,GAAG,aAAa,EAAE,CA0B7D"}

package/dist/utils/linkUrl.js

@@ -0,0 +1,62 @@
+/**
+ * Normalizes a URL typed into the link dialog, or returns null if it should
+ * be rejected. Only http(s), mailto, tel, in-page (#), and relative URLs are
+ * accepted — any other scheme (javascript:, data:, vbscript:, ...) is
+ * refused so a pasted link can't carry script into exported HTML. A bare
+ * domain like "example.com/page" gets https:// prefixed.
+ */
+export function normalizeLinkUrl(input) {
+    const url = input.trim();
+    if (!url)
+        return null;
+    if (/^(https?:\/\/|mailto:|tel:)\S+$/i.test(url))
+        return url;
+    if (/^(#|\/|\.\.?\/)\S*$/.test(url))
+        return url;
+    // Any other explicit scheme is rejected.
+    if (/^[a-z][a-z0-9+.-]*:/i.test(url))
+        return null;
+    // Looks like a bare domain (no spaces, has a dot in its host part).
+    if (/^[^\s/?#]+\.[^\s/?#]+(?:[/?#]\S*)?$/.test(url))
+        return `https://${url}`;
+    return null;
+}
+const PASTED_URL_PATTERN = /(?:https?:\/\/|mailto:|www\.)[^\s<>"']+/gi;
+const TRAILING_PUNCTUATION = /[.,;:!?)\]}]+$/;
+/**
+ * Splits pasted plain text into text and link segments. Only explicit URLs
+ * count (http(s)://, mailto:, or a www. prefix) — a bare "file.txt" or
+ * "example.com" is left as text, since pasted prose is full of those. Trailing
+ * sentence punctuation stays outside the link, and anything normalizeLinkUrl
+ * rejects stays text.
+ */
+export function splitPastedText(text) {
+    const segments = [];
+    let last = 0;
+    const pushText = (value) => {
+        if (!value)
+            return;
+        const previous = segments[segments.length - 1];
+        if (previous?.type === 'text')
+            previous.text += value;
+        else
+            segments.push({ type: 'text', text: value });
+    };
+    for (const match of text.matchAll(PASTED_URL_PATTERN)) {
+        const start = match.index ?? 0;
+        const raw = match[0];
+        const trimmed = raw.replace(TRAILING_PUNCTUATION, '');
+        const url = normalizeLinkUrl(/^www\./i.test(trimmed) ? `https://${trimmed}` : trimmed);
+        pushText(text.slice(last, start));
+        if (url && trimmed.length > 'www.'.length) {
+            segments.push({ type: 'link', text: trimmed, url });
+            pushText(raw.slice(trimmed.length));
+        }
+        else {
+            pushText(raw);
+        }
+        last = start + raw.length;
+    }
+    pushText(text.slice(last));
+    return segments;
+}

package/dist/utils/style.d.ts

@@ -0,0 +1,4 @@
+/** Sets (or replaces) one property in an inline CSS string like Lexical's
+ * TextNode style, keeping every other property as-is. */
+export declare function setStyleProperty(css: string, property: string, value: string): string;
+//# sourceMappingURL=style.d.ts.map

package/dist/utils/style.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"style.d.ts","sourceRoot":"","sources":["../../src/utils/style.ts"],"names":[],"mappings":"AAAA;yDACyD;AACzD,wBAAgB,gBAAgB,CAAC,GAAG,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,MAAM,CAYrF"}