@inshapardaz/likhari-react 0.1.5 → 0.1.6-dev.43

package/dist/image/imageEdit.js

@@ -0,0 +1,103 @@
+/** 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 });
+}
+/** 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,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/theme/editor.css

@@ -235,6 +235,86 @@
   margin: 1.5em 0;
 }
 
+/* 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 {
+  margin: 0 0 1em 0;
+}
+
+.likhari-image-figure {
+  display: block;
+  margin: 0;
+  text-align: center;
+}
+
+.likhari-image-wrap {
+  position: relative;
+  display: inline-block;
+  max-width: 100%;
+  line-height: 0;
+}
+
+.likhari-image {
+  display: 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-resize-handle {
+  position: absolute;
+  right: -6px;
+  bottom: -6px;
+  width: 12px;
+  height: 12px;
+  border: 2px solid var(--editor-paper);
+  border-radius: 3px;
+  background: var(--editor-accent);
+  cursor: nwse-resize;
+  touch-action: none;
+}
+
+.likhari-image-caption {
+  margin-top: 6px;
+  color: var(--editor-ink-soft);
+  font-size: 0.85em;
+  line-height: 1.4;
+  text-align: center;
+}
+
+/* Image dialog — crop stage. The selection dims everything outside it. */
+.likhari-cropper-stage {
+  position: relative;
+  display: inline-block;
+  align-self: center;
+  max-width: 100%;
+  overflow: hidden;
+  line-height: 0;
+  cursor: crosshair;
+  touch-action: none;
+  user-select: none;
+}
+
+.likhari-cropper-image {
+  display: block;
+  max-width: 100%;
+  max-height: 320px;
+}
+
+.likhari-cropper-selection {
+  position: absolute;
+  border: 2px solid #fff;
+  outline: 1px solid rgba(0, 0, 0, 0.5);
+  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.5);
+  pointer-events: none;
+}
+
 /* Link menu: the URL item shows one truncated line. */
 .likhari-link-menu-url {
   max-width: 100%;

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/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"}

package/dist/utils/style.js

@@ -0,0 +1,15 @@
+/** Sets (or replaces) one property in an inline CSS string like Lexical's
+ * TextNode style, keeping every other property as-is. */
+export function setStyleProperty(css, property, value) {
+    const entries = css
+        .split(';')
+        .map((part) => part.trim())
+        .filter(Boolean)
+        .map((part) => {
+        const i = part.indexOf(':');
+        return [part.slice(0, i).trim(), part.slice(i + 1).trim()];
+    })
+        .filter(([name]) => name !== property);
+    entries.push([property, value]);
+    return entries.map(([name, val]) => `${name}: ${val};`).join(' ');
+}

package/package.json

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