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

package/dist/image/ImageNode.js

@@ -0,0 +1,133 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { DecoratorNode, } from 'lexical';
+import { ImageComponent } from './ImageComponent.js';
+/**
+ * Block-level image (editor-architecture-design.md §3.5). The caption is a
+ * plain string (null = no caption) edited through the image's right-click menu
+ * / edit dialog — not the nested sub-editor the architecture doc leaves open —
+ * which keeps every edit 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;
+    }
+    getLinkType() {
+        return this.__linkType;
+    }
+    getWidth() {
+        return this.__width;
+    }
+    getHeight() {
+        return this.__height;
+    }
+    setCaption(caption) {
+        const writable = this.getWritable();
+        writable.__caption = caption || null;
+        return writable;
+    }
+    setAltText(altText) {
+        const writable = this.getWritable();
+        writable.__altText = altText;
+        return writable;
+    }
+    /** Points the node at new image data (a replaced URL/upload, or edited pixels). */
+    setSource(src, linkType) {
+        const writable = this.getWritable();
+        writable.__src = src;
+        writable.__linkType = linkType;
+        return writable;
+    }
+    /** Display size in px; null = the image's natural size. */
+    setDimensions(width, height) {
+        const writable = this.getWritable();
+        writable.__width = width;
+        writable.__height = height;
+        return writable;
+    }
+    getTextContent() {
+        return this.__altText || this.__caption || '';
+    }
+    decorate() {
+        return (_jsx(ImageComponent, { nodeKey: this.getKey(), src: this.__src, altText: this.__altText, caption: this.__caption, linkType: this.__linkType, 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;
+}

package/dist/image/ImageOptionsContext.d.ts

@@ -0,0 +1,24 @@
+/** Image settings from `EditorRoot` (feature config + upload handler), shared
+ * with the toolbar's insert dialog and with each image's own edit menu/dialog. */
+export interface ImageOptions {
+    /** `images.linked` — images may reference an external URL. */
+    allowLinked: boolean;
+    /** `images.embedded` — images may be uploaded. */
+    allowEmbedded: boolean;
+    /** `images.caption` — images may have a caption. */
+    allowCaption: boolean;
+    /** `images.maxSizeMB` */
+    maxSizeMB: number;
+    /** Host upload handler; without it, uploads are embedded as base64 data URIs. */
+    onImageUpload?: (file: File) => Promise<string>;
+    /** Host override for downloading a linked image's bytes, used when converting
+     * a link to an embedded image or applying a crop/rotate/flip. Without it, the
+     * browser fetches the URL directly, which fails for any server that doesn't
+     * send CORS headers. A host can provide this to route the request through
+     * its own backend (or a CORS proxy) instead, since that restriction can only
+     * be worked around server-side, never from the browser alone. */
+    fetchImage?: (url: string) => Promise<Blob>;
+}
+export declare const ImageOptionsContext: import("react").Context<ImageOptions>;
+export declare function useImageOptions(): ImageOptions;
+//# sourceMappingURL=ImageOptionsContext.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ImageOptionsContext.d.ts","sourceRoot":"","sources":["../../src/image/ImageOptionsContext.tsx"],"names":[],"mappings":"AAEA;kFACkF;AAClF,MAAM,WAAW,YAAY;IAC3B,8DAA8D;IAC9D,WAAW,EAAE,OAAO,CAAC;IACrB,kDAAkD;IAClD,aAAa,EAAE,OAAO,CAAC;IACvB,oDAAoD;IACpD,YAAY,EAAE,OAAO,CAAC;IACtB,yBAAyB;IACzB,SAAS,EAAE,MAAM,CAAC;IAClB,iFAAiF;IACjF,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,OAAO,CAAC,MAAM,CAAC,CAAC;IAChD;;;;;qEAKiE;IACjE,UAAU,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;CAC7C;AAED,eAAO,MAAM,mBAAmB,uCAK9B,CAAC;AAEH,wBAAgB,eAAe,IAAI,YAAY,CAE9C"}

package/dist/image/ImageOptionsContext.js

@@ -0,0 +1,10 @@
+import { createContext, useContext } from 'react';
+export const ImageOptionsContext = createContext({
+    allowLinked: true,
+    allowEmbedded: true,
+    allowCaption: true,
+    maxSizeMB: 5,
+});
+export function useImageOptions() {
+    return useContext(ImageOptionsContext);
+}

package/dist/image/cropMath.d.ts

@@ -0,0 +1,35 @@
+import type { CropRect } from './imageEdit.js';
+export type CropHandle = 'n' | 's' | 'e' | 'w' | 'ne' | 'nw' | 'se' | 'sw';
+/** Smallest selection, as a fraction of the image. */
+export declare const MIN_CROP = 0.02;
+/** Size of the image's on-screen box in px; needed to keep an aspect ratio,
+ * since rectangle coordinates are fractions. */
+export interface Box {
+    width: number;
+    height: number;
+}
+/**
+ * A new selection dragged from `anchor` to `point` (both fractions). With a
+ * `ratio` (width / height, in pixels) the selection keeps it, shrinking to stay
+ * inside the image.
+ */
+export declare function rectFromDrag(anchor: {
+    x: number;
+    y: number;
+}, point: {
+    x: number;
+    y: number;
+}, ratio: number | null, box: Box): CropRect;
+/** Moves a selection by (dx, dy) fractions, keeping it inside the image. */
+export declare function moveRect(rect: CropRect, dx: number, dy: number): CropRect;
+/**
+ * Resizes a selection by dragging one of its handles to `point` (a fraction).
+ * Corners anchor the opposite corner; edges move one side. With a `ratio` the
+ * aspect is kept (an edge handle then grows the other dimension around the
+ * selection's centre). Never smaller than MIN_CROP, never outside the image.
+ */
+export declare function resizeRect(rect: CropRect, handle: CropHandle, point: {
+    x: number;
+    y: number;
+}, ratio: number | null, box: Box): CropRect;
+//# sourceMappingURL=cropMath.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"cropMath.d.ts","sourceRoot":"","sources":["../../src/image/cropMath.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAE5C,MAAM,MAAM,UAAU,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE3E,sDAAsD;AACtD,eAAO,MAAM,QAAQ,OAAO,CAAC;AAE7B;gDACgD;AAChD,MAAM,WAAW,GAAG;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAChB;AAID;;;;GAIG;AACH,wBAAgB,YAAY,CAAC,MAAM,EAAE;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAAE,EAAE,KAAK,EAAE;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAAE,EAAE,KAAK,EAAE,MAAM,GAAG,IAAI,EAAE,GAAG,EAAE,GAAG,GAAG,QAAQ,CAexI;AAED,4EAA4E;AAC5E,wBAAgB,QAAQ,CAAC,IAAI,EAAE,QAAQ,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,GAAG,QAAQ,CAEzE;AAED;;;;;GAKG;AACH,wBAAgB,UAAU,CAAC,IAAI,EAAE,QAAQ,EAAE,MAAM,EAAE,UAAU,EAAE,KAAK,EAAE;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAAE,EAAE,KAAK,EAAE,MAAM,GAAG,IAAI,EAAE,GAAG,EAAE,GAAG,GAAG,QAAQ,CAwDxI"}

package/dist/image/cropMath.js

@@ -0,0 +1,92 @@
+/** Smallest selection, as a fraction of the image. */
+export const MIN_CROP = 0.02;
+const clamp = (v, min = 0, max = 1) => Math.min(Math.max(v, min), max);
+/**
+ * A new selection dragged from `anchor` to `point` (both fractions). With a
+ * `ratio` (width / height, in pixels) the selection keeps it, shrinking to stay
+ * inside the image.
+ */
+export function rectFromDrag(anchor, point, ratio, box) {
+    let dx = clamp(point.x) - anchor.x;
+    let dy = clamp(point.y) - anchor.y;
+    if (ratio) {
+        let widthPx = Math.abs(dx) * box.width;
+        let heightPx = widthPx / ratio;
+        const maxHeightPx = (dy >= 0 ? 1 - anchor.y : anchor.y) * box.height;
+        if (heightPx > maxHeightPx) {
+            heightPx = maxHeightPx;
+            widthPx = heightPx * ratio;
+        }
+        dx = (dx >= 0 ? 1 : -1) * (widthPx / box.width);
+        dy = (dy >= 0 ? 1 : -1) * (heightPx / box.height);
+    }
+    return { x: Math.min(anchor.x, anchor.x + dx), y: Math.min(anchor.y, anchor.y + dy), w: Math.abs(dx), h: Math.abs(dy) };
+}
+/** Moves a selection by (dx, dy) fractions, keeping it inside the image. */
+export function moveRect(rect, dx, dy) {
+    return { ...rect, x: clamp(rect.x + dx, 0, 1 - rect.w), y: clamp(rect.y + dy, 0, 1 - rect.h) };
+}
+/**
+ * Resizes a selection by dragging one of its handles to `point` (a fraction).
+ * Corners anchor the opposite corner; edges move one side. With a `ratio` the
+ * aspect is kept (an edge handle then grows the other dimension around the
+ * selection's centre). Never smaller than MIN_CROP, never outside the image.
+ */
+export function resizeRect(rect, handle, point, ratio, box) {
+    const left = rect.x;
+    const right = rect.x + rect.w;
+    const top = rect.y;
+    const bottom = rect.y + rect.h;
+    const px = clamp(point.x);
+    const py = clamp(point.y);
+    if (handle.length === 2) {
+        // Corner: the opposite corner stays put.
+        const anchor = { x: handle.includes('w') ? right : left, y: handle.includes('n') ? bottom : top };
+        return rectFromDrag(anchor, { x: px, y: py }, ratio, box);
+    }
+    const horizontal = handle === 'e' || handle === 'w';
+    if (!ratio) {
+        const next = { left, right, top, bottom };
+        if (handle === 'w')
+            next.left = Math.min(px, right - MIN_CROP);
+        if (handle === 'e')
+            next.right = Math.max(px, left + MIN_CROP);
+        if (handle === 'n')
+            next.top = Math.min(py, bottom - MIN_CROP);
+        if (handle === 's')
+            next.bottom = Math.max(py, top + MIN_CROP);
+        return { x: next.left, y: next.top, w: next.right - next.left, h: next.bottom - next.top };
+    }
+    // Edge with a locked ratio: the dragged side sets one dimension, the other follows.
+    const cx = left + rect.w / 2;
+    const cy = top + rect.h / 2;
+    if (horizontal) {
+        const fixed = handle === 'e' ? left : right;
+        let w = Math.max(Math.abs(px - fixed), MIN_CROP);
+        let h = w * box.width / ratio / box.height;
+        if (h > 1) {
+            h = 1;
+            w = (h * box.height * ratio) / box.width;
+        }
+        // Stay inside the image horizontally.
+        const room = handle === 'e' ? 1 - left : right;
+        if (w > room) {
+            w = room;
+            h = (w * box.width) / ratio / box.height;
+        }
+        return { x: handle === 'e' ? left : right - w, y: clamp(cy - h / 2, 0, 1 - h), w, h };
+    }
+    const fixed = handle === 's' ? top : bottom;
+    let h = Math.max(Math.abs(py - fixed), MIN_CROP);
+    let w = (h * box.height * ratio) / box.width;
+    if (w > 1) {
+        w = 1;
+        h = (w * box.width) / ratio / box.height;
+    }
+    const room = handle === 's' ? 1 - top : bottom;
+    if (h > room) {
+        h = room;
+        w = (h * box.height * ratio) / box.width;
+    }
+    return { x: clamp(cx - w / 2, 0, 1 - w), y: handle === 's' ? top : bottom - h, w, h };
+}

package/dist/image/imageEdit.d.ts

@@ -0,0 +1,49 @@
+/** A crop rectangle as fractions (0–1) of the image's width and height. */
+export interface CropRect {
+    x: number;
+    y: number;
+    w: number;
+    h: number;
+}
+/** Converts a fractional crop rectangle to whole pixels inside a width x height
+ * image, clamped so it never leaves the image and is at least 1px. */
+export declare function toPixelRect(rect: CropRect, width: number, height: number): {
+    sx: number;
+    sy: number;
+    sw: number;
+    sh: number;
+};
+/** When one dimension changes with the aspect ratio locked, returns both. */
+export declare function fitDimension(changed: 'width' | 'height', value: number, naturalWidth: number, naturalHeight: number): {
+    width: number;
+    height: number;
+};
+/** MIME type to re-encode an edited image as: its own if it is a lossy/lossless
+ * format canvas can write (JPEG, WebP, PNG), otherwise PNG (GIF, SVG, unknown). */
+export declare function mimeFromSrc(src: string): string;
+/** Approximate decoded size, in bytes, of a base64 data URI. */
+export declare function dataUrlBytes(dataUrl: string): number;
+export declare function dataUrlToFile(dataUrl: string, name: string): File;
+export declare const CANNOT_DOWNLOAD = "Couldn't download this image (its server doesn't allow it). Download the file and upload it instead.";
+/** Downloads an image and returns it as a base64 data URI, to embed it in the
+ * document. Without a `fetchBlob` override, needs the image's server to allow
+ * cross-origin reads (CORS) — a host can pass one to route the download
+ * through its own backend or a CORS proxy instead. */
+export declare function fetchImageAsDataUrl(url: string, fetchBlob?: (url: string) => Promise<Blob>): Promise<string>;
+export type PixelOp = {
+    type: 'rotate';
+    direction: 'cw' | 'ccw';
+} | {
+    type: 'flip';
+    axis: 'horizontal' | 'vertical';
+} | {
+    type: 'crop';
+    rect: CropRect;
+};
+/** Loads an image for canvas use. External URLs are requested with CORS so the
+ * canvas isn't tainted; a server that doesn't allow that makes this reject. */
+export declare function loadImage(src: string): Promise<HTMLImageElement>;
+export declare const CANNOT_EDIT_PIXELS = "This image can't be edited here (its server doesn't allow it). Upload the file instead to crop or rotate it.";
+/** Applies a rotate / flip / crop to an image and returns the result as a data URI. */
+export declare function applyPixelOp(src: string, op: PixelOp): Promise<string>;
+//# sourceMappingURL=imageEdit.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"imageEdit.d.ts","sourceRoot":"","sources":["../../src/image/imageEdit.ts"],"names":[],"mappings":"AAEA,2EAA2E;AAC3E,MAAM,WAAW,QAAQ;IACvB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;CACX;AAED;sEACsE;AACtE,wBAAgB,WAAW,CAAC,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM;;;;;EAMxE;AAED,6EAA6E;AAC7E,wBAAgB,YAAY,CAC1B,OAAO,EAAE,OAAO,GAAG,QAAQ,EAC3B,KAAK,EAAE,MAAM,EACb,YAAY,EAAE,MAAM,EACpB,aAAa,EAAE,MAAM,GACpB;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,CAKnC;AAED;mFACmF;AACnF,wBAAgB,WAAW,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAI/C;AASD,gEAAgE;AAChE,wBAAgB,YAAY,CAAC,OAAO,EAAE,MAAM,GAAG,MAAM,CAKpD;AAED,wBAAgB,aAAa,CAAC,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,GAAG,IAAI,CAOjE;AAED,eAAO,MAAM,eAAe,yGAC4E,CAAC;AAEzG;;;sDAGsD;AACtD,wBAAsB,mBAAmB,CACvC,GAAG,EAAE,MAAM,EACX,SAAS,GAAE,CAAC,GAAG,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAIpC,GACH,OAAO,CAAC,MAAM,CAAC,CAejB;AAED,MAAM,MAAM,OAAO,GACf;IAAE,IAAI,EAAE,QAAQ,CAAC;IAAC,SAAS,EAAE,IAAI,GAAG,KAAK,CAAA;CAAE,GAC3C;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,YAAY,GAAG,UAAU,CAAA;CAAE,GACjD;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,QAAQ,CAAA;CAAE,CAAC;AAErC;+EAC+E;AAC/E,wBAAgB,SAAS,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC,gBAAgB,CAAC,CAQhE;AAED,eAAO,MAAM,kBAAkB,iHACiF,CAAC;AAEjH,uFAAuF;AACvF,wBAAsB,YAAY,CAAC,GAAG,EAAE,MAAM,EAAE,EAAE,EAAE,OAAO,GAAG,OAAO,CAAC,MAAM,CAAC,CAuC5E"}

package/dist/image/imageEdit.js

@@ -0,0 +1,132 @@
+import { ACCEPTED_IMAGE_TYPES } from './imageUrl.js';
+/** Converts a fractional crop rectangle to whole pixels inside a width x height
+ * image, clamped so it never leaves the image and is at least 1px. */
+export function toPixelRect(rect, width, height) {
+    const sx = Math.min(Math.max(Math.round(rect.x * width), 0), width - 1);
+    const sy = Math.min(Math.max(Math.round(rect.y * height), 0), height - 1);
+    const sw = Math.min(Math.max(Math.round(rect.w * width), 1), width - sx);
+    const sh = Math.min(Math.max(Math.round(rect.h * height), 1), height - sy);
+    return { sx, sy, sw, sh };
+}
+/** When one dimension changes with the aspect ratio locked, returns both. */
+export function fitDimension(changed, value, naturalWidth, naturalHeight) {
+    const v = Math.max(1, Math.round(value));
+    return changed === 'width'
+        ? { width: v, height: Math.max(1, Math.round((v * naturalHeight) / naturalWidth)) }
+        : { width: Math.max(1, Math.round((v * naturalWidth) / naturalHeight)), height: v };
+}
+/** MIME type to re-encode an edited image as: its own if it is a lossy/lossless
+ * format canvas can write (JPEG, WebP, PNG), otherwise PNG (GIF, SVG, unknown). */
+export function mimeFromSrc(src) {
+    const data = /^data:(image\/[a-z0-9.+-]+)[;,]/i.exec(src);
+    const type = data ? data[1].toLowerCase() : extensionMime(src);
+    return type === 'image/jpeg' || type === 'image/webp' ? type : 'image/png';
+}
+function extensionMime(src) {
+    const match = /\.(jpe?g|webp|png|gif|svg)(?:[?#].*)?$/i.exec(src);
+    if (!match)
+        return 'image/png';
+    const ext = match[1].toLowerCase();
+    return ext === 'jpg' || ext === 'jpeg' ? 'image/jpeg' : ext === 'webp' ? 'image/webp' : 'image/png';
+}
+/** Approximate decoded size, in bytes, of a base64 data URI. */
+export function dataUrlBytes(dataUrl) {
+    const comma = dataUrl.indexOf(',');
+    const base64 = comma === -1 ? '' : dataUrl.slice(comma + 1);
+    const padding = base64.endsWith('==') ? 2 : base64.endsWith('=') ? 1 : 0;
+    return Math.floor((base64.length * 3) / 4) - padding;
+}
+export function dataUrlToFile(dataUrl, name) {
+    const comma = dataUrl.indexOf(',');
+    const mime = /^data:([^;,]+)/.exec(dataUrl)?.[1] ?? 'image/png';
+    const binary = atob(dataUrl.slice(comma + 1));
+    const bytes = new Uint8Array(binary.length);
+    for (let i = 0; i < binary.length; i++)
+        bytes[i] = binary.charCodeAt(i);
+    return new File([bytes], name, { type: mime });
+}
+export const CANNOT_DOWNLOAD = "Couldn't download this image (its server doesn't allow it). Download the file and upload it instead.";
+/** Downloads an image and returns it as a base64 data URI, to embed it in the
+ * document. Without a `fetchBlob` override, needs the image's server to allow
+ * cross-origin reads (CORS) — a host can pass one to route the download
+ * through its own backend or a CORS proxy instead. */
+export async function fetchImageAsDataUrl(url, fetchBlob = (u) => fetch(u, { mode: 'cors' }).then((response) => {
+    if (!response.ok)
+        throw new Error('bad status');
+    return response.blob();
+})) {
+    if (/^data:image\//i.test(url))
+        return url;
+    let blob;
+    try {
+        blob = await fetchBlob(url);
+    }
+    catch {
+        throw new Error(CANNOT_DOWNLOAD);
+    }
+    if (!ACCEPTED_IMAGE_TYPES.includes(blob.type))
+        throw new Error("That URL doesn't point to a PNG, JPEG, GIF, WebP or SVG image");
+    return new Promise((resolve, reject) => {
+        const reader = new FileReader();
+        reader.onload = () => resolve(String(reader.result));
+        reader.onerror = () => reject(new Error(CANNOT_DOWNLOAD));
+        reader.readAsDataURL(blob);
+    });
+}
+/** Loads an image for canvas use. External URLs are requested with CORS so the
+ * canvas isn't tainted; a server that doesn't allow that makes this reject. */
+export function loadImage(src) {
+    return new Promise((resolve, reject) => {
+        const img = new Image();
+        if (/^https?:/i.test(src))
+            img.crossOrigin = 'anonymous';
+        img.onload = () => resolve(img);
+        img.onerror = () => reject(new Error('IMAGE_LOAD_FAILED'));
+        img.src = src;
+    });
+}
+export const CANNOT_EDIT_PIXELS = "This image can't be edited here (its server doesn't allow it). Upload the file instead to crop or rotate it.";
+/** Applies a rotate / flip / crop to an image and returns the result as a data URI. */
+export async function applyPixelOp(src, op) {
+    let img;
+    try {
+        img = await loadImage(src);
+    }
+    catch {
+        throw new Error(CANNOT_EDIT_PIXELS);
+    }
+    const width = img.naturalWidth;
+    const height = img.naturalHeight;
+    if (!width || !height)
+        throw new Error('This image has no pixel size to edit (some SVGs). Upload a PNG or JPEG instead.');
+    const canvas = document.createElement('canvas');
+    const ctx = canvas.getContext('2d');
+    if (!ctx)
+        throw new Error('Image editing is not available in this browser');
+    if (op.type === 'rotate') {
+        canvas.width = height;
+        canvas.height = width;
+        ctx.translate(height / 2, width / 2);
+        ctx.rotate(op.direction === 'cw' ? Math.PI / 2 : -Math.PI / 2);
+        ctx.drawImage(img, -width / 2, -height / 2);
+    }
+    else if (op.type === 'flip') {
+        canvas.width = width;
+        canvas.height = height;
+        ctx.translate(op.axis === 'horizontal' ? width : 0, op.axis === 'vertical' ? height : 0);
+        ctx.scale(op.axis === 'horizontal' ? -1 : 1, op.axis === 'vertical' ? -1 : 1);
+        ctx.drawImage(img, 0, 0);
+    }
+    else {
+        const { sx, sy, sw, sh } = toPixelRect(op.rect, width, height);
+        canvas.width = sw;
+        canvas.height = sh;
+        ctx.drawImage(img, sx, sy, sw, sh, 0, 0, sw, sh);
+    }
+    try {
+        return canvas.toDataURL(mimeFromSrc(src), 0.92);
+    }
+    catch {
+        throw new Error(CANNOT_EDIT_PIXELS);
+    }
+}

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,6 +1,10 @@
 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';
+export { STRINGS, getStrings, useStrings, useUiStrings, UiStringsContext } from './i18n/index.js';
+export type { Locale, Strings } from './i18n/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;AAC3D,OAAO,EAAE,oBAAoB,EAAE,qBAAqB,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AACrF,YAAY,EAAE,UAAU,EAAE,MAAM,SAAS,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;AAC1C,OAAO,EAAE,OAAO,EAAE,UAAU,EAAE,UAAU,EAAE,YAAY,EAAE,gBAAgB,EAAE,MAAM,QAAQ,CAAC;AACzF,YAAY,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC"}

package/dist/index.js

@@ -1,3 +1,5 @@
 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';
+export { STRINGS, getStrings, useStrings, useUiStrings, UiStringsContext } from './i18n/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/theme/EditorThemeProvider.d.ts

@@ -1,10 +1,25 @@
 import { type MantineThemeOverride } from '@mantine/core';
-import '@mantine/core/styles.css';
 import './editor.css';
 export interface EditorThemeProviderProps {
     theme?: MantineThemeOverride;
     colorScheme?: 'light' | 'dark';
+    /** Overrides both Mantine's primary color and the `--editor-accent` /
+     * `--editor-accent-soft` CSS variables — see EditorRootProps.accentColor. */
+    accentColor?: string;
+    /**
+     * The id of the portal-anchor element EditorRoot renders inside
+     * `.likhari-root` (see PortalTargetContext.tsx). Scopes Mantine's OWN
+     * `data-mantine-color-scheme` attribute and CSS variables to that single
+     * element instead of the default `document.documentElement` — without
+     * this, Mantine's Modal/Menu/Select/Tooltip surfaces (background, text,
+     * border colors) would always render in Mantine's global light scheme
+     * regardless of `colorScheme`, since nothing ever told MantineProvider
+     * which scheme to use; forcing it at `document.documentElement` instead
+     * would work but would leak dark mode onto the rest of the host page and
+     * collide between multiple EditorRoot instances with different schemes.
+     */
+    scopeElementId?: string;
     children: React.ReactNode;
 }
-export declare function EditorThemeProvider({ theme, colorScheme, children }: EditorThemeProviderProps): import("react").JSX.Element;
+export declare function EditorThemeProvider({ theme, colorScheme, accentColor, scopeElementId, children }: EditorThemeProviderProps): import("react").JSX.Element;
 //# sourceMappingURL=EditorThemeProvider.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"EditorThemeProvider.d.ts","sourceRoot":"","sources":["../../src/theme/EditorThemeProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAmB,KAAK,oBAAoB,EAAE,MAAM,eAAe,CAAC;AAC3E,OAAO,0BAA0B,CAAC;AAGlC,OAAO,cAAc,CAAC;AAsBtB,MAAM,WAAW,wBAAwB;IACvC,KAAK,CAAC,EAAE,oBAAoB,CAAC;IAC7B,WAAW,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAC/B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,wBAAgB,mBAAmB,CAAC,EAAE,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,EAAE,wBAAwB,+BAa7F"}
+{"version":3,"file":"EditorThemeProvider.d.ts","sourceRoot":"","sources":["../../src/theme/EditorThemeProvider.tsx"],"names":[],"mappings":"AACA,OAAO,EAAmB,KAAK,oBAAoB,EAAE,MAAM,eAAe,CAAC;AAO3E,OAAO,cAAc,CAAC;AAsBtB,MAAM,WAAW,wBAAwB;IACvC,KAAK,CAAC,EAAE,oBAAoB,CAAC;IAC7B,WAAW,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAC/B;iFAC6E;IAC7E,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;;;;;;;;;OAWG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,wBAAgB,mBAAmB,CAAC,EAAE,KAAK,EAAE,WAAW,EAAE,WAAW,EAAE,cAAc,EAAE,QAAQ,EAAE,EAAE,wBAAwB,+BA+C1H"}