@lapismd/mira 0.0.1

package/CHANGELOG.md

@@ -0,0 +1,7 @@
+# @lapismd/mira
+
+## 0.0.1
+
+### Patch Changes
+
+- Initial public release.

package/LICENSE.md

@@ -0,0 +1,4 @@
+AGPL-3.0-or-later
+
+This project is licensed under the GNU Affero General Public License v3.0 or later.
+See <https://www.gnu.org/licenses/agpl-3.0.en.html>.

package/README.md

@@ -0,0 +1,52 @@
+# `@lapismd/mira`
+
+Composable Svelte Markdown editor and Mira's shared portable runtime.
+
+```svelte
+<script lang="ts">
+  import Mira from "@lapismd/mira";
+  import "@lapismd/mira/styles.css";
+
+  let value = "# Hello Mira";
+</script>
+
+<Mira bind:value mode="live-preview" />
+```
+
+Add the optional selected-text formatting toolbar through the portable
+extension API:
+
+```svelte
+<script lang="ts">
+  import Mira from "@lapismd/mira";
+  import { selectionToolbarExtension } from "@lapismd/mira/extensions";
+  import "@lapismd/mira/styles.css";
+
+  let value = "Select text to format it.";
+  const extensions = [
+    selectionToolbarExtension({
+      actions: ["link", "bold", "italic", "strikethrough"],
+      placement: "below",
+    }),
+  ];
+</script>
+
+<Mira bind:value mode="live-preview" {extensions} />
+```
+
+The four actions above are the defaults. Configure their order, labels, and
+preferred `above` or `below` placement without adding framework-specific
+behavior.
+
+Supported advanced entrypoints are `/core`, `/extensions`, `/codemirror`,
+`/preview`, `/tables`, `/ui`, `/ui/*`, `/themes/mira.css`,
+`/themes/obsidian.css`, `/themes.css`, and `/styles.css`. Source under
+`src/internal` is not a consumer API.
+
+`theme` accepts an opaque whitespace-separated token list such as
+`"obsidian company-brand"`; `colorMode` independently accepts `inherit`,
+`light`, `dark`, or `system`. Consumer CSS loaded after Mira can override any
+documented `--mira-*` token for its own theme token.
+
+See Storybook for examples and `spec/src/packages.md` for the normative package
+contract.

package/dist/codemirror.d.ts

@@ -0,0 +1,5 @@
+export * from "./internal/codemirror/base/index";
+export * from "./internal/codemirror/markdown/index";
+export * from "./internal/codemirror/rich/index";
+export { createTableExtensions } from "./tables/index";
+//# sourceMappingURL=codemirror.d.ts.map

package/dist/codemirror.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"codemirror.d.ts","sourceRoot":"","sources":["../src/codemirror.ts"],"names":[],"mappings":"AAAA,cAAc,kCAAkC,CAAC;AACjD,cAAc,sCAAsC,CAAC;AACrD,cAAc,kCAAkC,CAAC;AACjD,OAAO,EAAE,qBAAqB,EAAE,MAAM,gBAAgB,CAAC"}

package/dist/codemirror.js

@@ -0,0 +1,4 @@
+export * from "./internal/codemirror/base/index";
+export * from "./internal/codemirror/markdown/index";
+export * from "./internal/codemirror/rich/index";
+export { createTableExtensions } from "./tables/index";

package/dist/core/code-mirror.d.ts

@@ -0,0 +1,29 @@
+import type { Extension } from "@codemirror/state";
+import type { EditorView } from "@codemirror/view";
+import { type MiraAssetResolver, type MiraBlockControlsOptions, type MiraExtension, type MiraExtensionRuntimeContext, type MiraFileAdapter, type MiraImageConfig, type MiraLinkResolver, type MiraMarkdownAuthoringConfig, type MiraMode } from "../extensions/index";
+export type MiraCodeMirrorExtensionsOptions = {
+    mode: MiraMode;
+    includeBaseExtensions?: boolean;
+    readonly?: boolean;
+    placeholder?: string;
+    lineWrapping?: boolean;
+    spellcheck?: boolean;
+    blockControls?: boolean | MiraBlockControlsOptions;
+    indentGuides?: boolean;
+    indentWithTabs?: boolean;
+    indentWidth?: number;
+    extensions?: MiraExtension[];
+    sourcePath?: string;
+    linkResolver?: MiraLinkResolver;
+    assetResolver?: MiraAssetResolver;
+    fileAdapter?: MiraFileAdapter;
+    imageConfig?: MiraImageConfig;
+    authoring?: MiraMarkdownAuthoringConfig;
+    frontmatterOpen?: boolean;
+    frontmatterConfig?: unknown;
+    runtimeContext: (view: EditorView) => MiraExtensionRuntimeContext;
+    onChange?: (replacement: string, from: number, to: number, nextValue: string) => void;
+    onFrontmatterChange?: (nextYaml: string, nextValue: string) => void;
+};
+export declare function createMiraCodeMirrorExtensions(options: MiraCodeMirrorExtensionsOptions): Extension[];
+//# sourceMappingURL=code-mirror.d.ts.map

package/dist/core/code-mirror.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"code-mirror.d.ts","sourceRoot":"","sources":["../../src/core/code-mirror.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AACnD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAWnD,OAAO,EAKL,KAAK,iBAAiB,EACtB,KAAK,wBAAwB,EAE7B,KAAK,aAAa,EAClB,KAAK,2BAA2B,EAChC,KAAK,eAAe,EACpB,KAAK,eAAe,EACpB,KAAK,gBAAgB,EACrB,KAAK,2BAA2B,EAChC,KAAK,QAAQ,EACd,MAAM,qBAAqB,CAAC;AAG7B,MAAM,MAAM,+BAA+B,GAAG;IAC5C,IAAI,EAAE,QAAQ,CAAC;IACf,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,aAAa,CAAC,EAAE,OAAO,GAAG,wBAAwB,CAAC;IACnD,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,aAAa,EAAE,CAAC;IAC7B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,YAAY,CAAC,EAAE,gBAAgB,CAAC;IAChC,aAAa,CAAC,EAAE,iBAAiB,CAAC;IAClC,WAAW,CAAC,EAAE,eAAe,CAAC;IAC9B,WAAW,CAAC,EAAE,eAAe,CAAC;IAC9B,SAAS,CAAC,EAAE,2BAA2B,CAAC;IACxC,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,cAAc,EAAE,CAAC,IAAI,EAAE,UAAU,KAAK,2BAA2B,CAAC;IAClE,QAAQ,CAAC,EAAE,CACT,WAAW,EAAE,MAAM,EACnB,IAAI,EAAE,MAAM,EACZ,EAAE,EAAE,MAAM,EACV,SAAS,EAAE,MAAM,KACd,IAAI,CAAC;IACV,mBAAmB,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;CACrE,CAAC;AAEF,wBAAgB,8BAA8B,CAC5C,OAAO,EAAE,+BAA+B,GACvC,SAAS,EAAE,CA6Fb"}

package/dist/core/code-mirror.js

@@ -0,0 +1,74 @@
+import { createBaseCodeMirrorExtensions, createSlashCommandExtensions, } from "../internal/codemirror/base/index";
+import { createMarkdownAuthoringExtensions, createMarkdownCodeMirrorExtensions, } from "../internal/codemirror/markdown/index";
+import { createRichEditorExtensions } from "../internal/codemirror/rich/index";
+import { createTableExtensions } from "../tables/index";
+import { createMiraCommandKeymap, executeMiraCommand, isMiraCommandEnabled, resolveMiraExtensions, } from "../extensions/index";
+import { createImageDropPasteExtension } from "./images";
+export function createMiraCodeMirrorExtensions(options) {
+    const { mode, includeBaseExtensions = true, readonly = false, placeholder, lineWrapping, spellcheck, blockControls, indentGuides, indentWithTabs, indentWidth, extensions = [], sourcePath, linkResolver, assetResolver, fileAdapter, imageConfig, authoring, frontmatterOpen, frontmatterConfig, runtimeContext, onChange, onFrontmatterChange, } = options;
+    const resolved = resolveMiraExtensions(extensions, {
+        mode,
+        readonly,
+        sourcePath,
+    });
+    const toolbarBlockActions = resolved.toolbarItems
+        .filter((item) => item.placements?.includes("block-menu"))
+        .map((item) => ({
+        id: `toolbar-${item.id}`,
+        label: item.label,
+        group: item.group,
+        icon: item.icon,
+        shortcut: item.shortcut,
+        placements: ["block-menu"],
+        disabled(context) {
+            const command = resolved.commands.find((candidate) => candidate.id === item.command);
+            return !command || !isMiraCommandEnabled(command, context);
+        },
+        run(context) {
+            executeMiraCommand(resolved.commands, item.command, context);
+        },
+    }));
+    return [
+        includeBaseExtensions
+            ? createBaseCodeMirrorExtensions({
+                readonly,
+                placeholder,
+                lineWrapping,
+                spellcheck,
+                indentWithTabs,
+                indentWidth,
+            })
+            : [],
+        createSlashCommandExtensions({ commands: resolved.slashCommands }),
+        createMiraCommandKeymap(resolved.commands, runtimeContext),
+        createMarkdownCodeMirrorExtensions({
+            codeLanguages: resolved.codeLanguages,
+            sourceMode: mode === "source",
+        }),
+        createTableExtensions(),
+        createImageDropPasteExtension(imageConfig),
+        createMarkdownAuthoringExtensions({
+            config: authoring,
+            fileAdapter,
+            sourcePath,
+        }),
+        createRichEditorExtensions({
+            blockActions: [...resolved.blockActions, ...toolbarBlockActions],
+            blockControls: mode !== "preview" && !readonly ? blockControls : false,
+            insertImage: (view) => runtimeContext(view).insertImage?.(),
+            livePreview: mode === "live-preview",
+            readonly,
+            indentGuides,
+            extensions,
+            sourcePath,
+            linkResolver,
+            assetResolver,
+            fileAdapter,
+            frontmatterOpen,
+            frontmatterConfig,
+            onChange,
+            onFrontmatterChange,
+        }),
+        resolved.codeMirror,
+    ].flat();
+}

package/dist/core/code-mirror.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=code-mirror.test.d.ts.map

package/dist/core/code-mirror.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"code-mirror.test.d.ts","sourceRoot":"","sources":["../../src/core/code-mirror.test.ts"],"names":[],"mappings":""}

package/dist/core/code-mirror.test.js

@@ -0,0 +1,68 @@
+// @vitest-environment jsdom
+import { describe, expect, it } from "vitest";
+import { EditorView } from "@codemirror/view";
+import { defineMiraExtension } from "../extensions";
+import { createBaseCodeMirrorExtensions } from "../internal/codemirror/base";
+import { createMiraCodeMirrorExtensions } from "./code-mirror";
+const runtimeContext = (view) => ({
+    view,
+    mode: "source",
+    getValue: () => view.state.doc.toString(),
+    setValue: (value) => {
+        view.dispatch({
+            changes: { from: 0, to: view.state.doc.length, insert: value },
+        });
+    },
+    focus: () => view.focus(),
+    insertMarkdown: () => undefined,
+});
+describe("createMiraCodeMirrorExtensions", () => {
+    it("includes the base CodeMirror layer by default", () => {
+        const parent = document.createElement("div");
+        const view = new EditorView({
+            extensions: createMiraCodeMirrorExtensions({
+                mode: "source",
+                runtimeContext,
+            }),
+            parent,
+        });
+        expect(view.dom.classList.contains("mira-codemirror")).toBe(true);
+        expect(view.contentDOM.getAttribute("aria-label")).toBe("Markdown editor");
+        view.destroy();
+    });
+    it("omits only the base layer while retaining portable contributions", () => {
+        const contribution = defineMiraExtension({
+            name: "consumer-authoring",
+            codeMirror: () => EditorView.editorAttributes.of({ class: "consumer-authoring" }),
+            slashCommands: [
+                {
+                    id: "consumer-command",
+                    label: "Consumer command",
+                    insert: "Consumer command",
+                },
+            ],
+        });
+        const shared = {
+            mode: "source",
+            extensions: [contribution],
+            blockControls: true,
+            runtimeContext,
+        };
+        const withBase = createMiraCodeMirrorExtensions(shared);
+        const withoutBase = createMiraCodeMirrorExtensions({
+            ...shared,
+            includeBaseExtensions: false,
+        });
+        expect(withBase).toHaveLength(withoutBase.length + createBaseCodeMirrorExtensions().length);
+        const parent = document.createElement("div");
+        const view = new EditorView({
+            doc: "/",
+            extensions: withoutBase,
+            parent,
+        });
+        expect(view.dom.classList.contains("mira-codemirror")).toBe(false);
+        expect(view.dom.classList.contains("consumer-authoring")).toBe(true);
+        expect(parent.querySelector(".mira-block-controls-gutter")).not.toBeNull();
+        view.destroy();
+    });
+});

package/dist/core/images.d.ts

@@ -0,0 +1,30 @@
+import { EditorView } from "@codemirror/view";
+import type { Extension } from "@codemirror/state";
+import type { MiraImageConfig, MiraImageSyntax } from "@lapismd/mira/extensions";
+export declare const defaultMiraEditorImageMaxSizeBytes: number;
+export declare const defaultMiraEditorImageMimeTypes: string[];
+/** URL scheme used in temporary uploading placeholders (not a real asset). */
+export declare const miraUploadingImageScheme = "mira-uploading:";
+export type ResolvedMiraImageConfig = {
+    imageUpload: (file: File) => Promise<string>;
+    imageMaxSizeBytes: number;
+    imageMimeTypes: string[];
+    imageSyntax: MiraImageSyntax;
+    onImageUploadError?: (error: unknown, file: File) => void;
+};
+export declare function resolveMiraImageConfig(config?: MiraImageConfig): ResolvedMiraImageConfig;
+export declare function createImageDropPasteExtension(config?: MiraImageConfig): Extension;
+export declare function insertImageFiles(view: EditorView, files: File[], config?: MiraImageConfig | ResolvedMiraImageConfig, position?: number): Promise<void>;
+export declare function openImageFilePicker(view: EditorView, config?: MiraImageConfig): void;
+/**
+ * GitHub-style uploading placeholder. Uses a unique `mira-uploading:` URL so
+ * concurrent pastes can be replaced reliably after upload finishes.
+ */
+export declare function createUploadingImageMarkdown(file: File, id?: string): string;
+export declare function createImageMarkdown({ alt, doc, src, syntax, }: {
+    alt: string;
+    doc: string;
+    src: string;
+    syntax: MiraImageSyntax;
+}): string;
+//# sourceMappingURL=images.d.ts.map

package/dist/core/images.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"images.d.ts","sourceRoot":"","sources":["../../src/core/images.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AACnD,OAAO,KAAK,EACV,eAAe,EACf,eAAe,EAChB,MAAM,0BAA0B,CAAC;AAElC,eAAO,MAAM,kCAAkC,QAAkB,CAAC;AAElE,eAAO,MAAM,+BAA+B,UAM3C,CAAC;AAEF,8EAA8E;AAC9E,eAAO,MAAM,wBAAwB,oBAAoB,CAAC;AAE1D,MAAM,MAAM,uBAAuB,GAAG;IACpC,WAAW,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,OAAO,CAAC,MAAM,CAAC,CAAC;IAC7C,iBAAiB,EAAE,MAAM,CAAC;IAC1B,cAAc,EAAE,MAAM,EAAE,CAAC;IACzB,WAAW,EAAE,eAAe,CAAC;IAC7B,kBAAkB,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;CAC3D,CAAC;AAEF,wBAAgB,sBAAsB,CACpC,MAAM,GAAE,eAAoB,GAC3B,uBAAuB,CASzB;AAED,wBAAgB,6BAA6B,CAC3C,MAAM,GAAE,eAAoB,GAC3B,SAAS,CA2BX;AAED,wBAAsB,gBAAgB,CACpC,IAAI,EAAE,UAAU,EAChB,KAAK,EAAE,IAAI,EAAE,EACb,MAAM,GAAE,eAAe,GAAG,uBAA4B,EACtD,QAAQ,CAAC,EAAE,MAAM,GAChB,OAAO,CAAC,IAAI,CAAC,CAoDf;AAaD,wBAAgB,mBAAmB,CACjC,IAAI,EAAE,UAAU,EAChB,MAAM,GAAE,eAAoB,GAC3B,IAAI,CAuBN;AA4BD;;;GAGG;AACH,wBAAgB,4BAA4B,CAC1C,IAAI,EAAE,IAAI,EACV,EAAE,GAAE,MAA4B,GAC/B,MAAM,CAIR;AAED,wBAAgB,mBAAmB,CAAC,EAClC,GAAG,EACH,GAAG,EACH,GAAG,EACH,MAAM,GACP,EAAE;IACD,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,EAAE,MAAM,CAAC;IACZ,MAAM,EAAE,eAAe,CAAC;CACzB,GAAG,MAAM,CAQT"}

package/dist/core/images.js

@@ -0,0 +1,226 @@
+import { EditorSelection } from "@codemirror/state";
+import { EditorView } from "@codemirror/view";
+export const defaultMiraEditorImageMaxSizeBytes = 5 * 1024 * 1024;
+export const defaultMiraEditorImageMimeTypes = [
+    "image/png",
+    "image/jpeg",
+    "image/gif",
+    "image/webp",
+    "image/avif",
+];
+/** URL scheme used in temporary uploading placeholders (not a real asset). */
+export const miraUploadingImageScheme = "mira-uploading:";
+export function resolveMiraImageConfig(config = {}) {
+    return {
+        imageUpload: config.imageUpload ?? readFileAsDataUrl,
+        imageMaxSizeBytes: config.imageMaxSizeBytes ?? defaultMiraEditorImageMaxSizeBytes,
+        imageMimeTypes: config.imageMimeTypes ?? defaultMiraEditorImageMimeTypes,
+        imageSyntax: config.imageSyntax ?? "reference",
+        onImageUploadError: config.onImageUploadError,
+    };
+}
+export function createImageDropPasteExtension(config = {}) {
+    const resolved = resolveMiraImageConfig(config);
+    return EditorView.domEventHandlers({
+        paste(event, view) {
+            const files = imageFilesFromItems(event.clipboardData?.items, resolved);
+            if (files.length === 0) {
+                return false;
+            }
+            event.preventDefault();
+            void insertImageFiles(view, files, resolved);
+            return true;
+        },
+        drop(event, view) {
+            const files = imageFilesFromItems(event.dataTransfer?.items, resolved);
+            if (files.length === 0) {
+                return false;
+            }
+            event.preventDefault();
+            const position = view.posAtCoords({
+                x: event.clientX,
+                y: event.clientY,
+            });
+            void insertImageFiles(view, files, resolved, position ?? undefined);
+            return true;
+        },
+    });
+}
+export async function insertImageFiles(view, files, config = {}, position) {
+    const resolved = isResolvedMiraImageConfig(config)
+        ? config
+        : resolveMiraImageConfig(config);
+    const pending = [];
+    for (const file of files) {
+        try {
+            validateImageFile(file, resolved);
+            pending.push({
+                file,
+                placeholder: createUploadingImageMarkdown(file),
+            });
+        }
+        catch (error) {
+            resolved.onImageUploadError?.(error, file);
+        }
+    }
+    if (pending.length === 0) {
+        return;
+    }
+    const selection = view.state.selection.main;
+    const from = position ?? selection.from;
+    const to = position ?? selection.to;
+    const insert = pending.map((item) => item.placeholder).join("\n\n");
+    view.dispatch({
+        changes: { from, to, insert },
+        selection: EditorSelection.cursor(from + insert.length),
+        scrollIntoView: true,
+        userEvent: "input.image",
+    });
+    view.focus();
+    await Promise.all(pending.map(async ({ file, placeholder }) => {
+        try {
+            const src = await resolved.imageUpload(file);
+            const finalMarkdown = createImageMarkdown({
+                alt: imageAltFromFile(file),
+                src,
+                syntax: resolved.imageSyntax,
+                doc: view.state.doc.toString(),
+            });
+            replaceImagePlaceholder(view, placeholder, finalMarkdown);
+        }
+        catch (error) {
+            replaceImagePlaceholder(view, placeholder, "");
+            resolved.onImageUploadError?.(error, file);
+        }
+    }));
+}
+function isResolvedMiraImageConfig(config) {
+    return (typeof config.imageUpload === "function" &&
+        typeof config.imageMaxSizeBytes === "number" &&
+        Array.isArray(config.imageMimeTypes) &&
+        (config.imageSyntax === "reference" || config.imageSyntax === "inline"));
+}
+export function openImageFilePicker(view, config = {}) {
+    if (typeof document === "undefined") {
+        return;
+    }
+    const resolved = resolveMiraImageConfig(config);
+    const input = document.createElement("input");
+    input.type = "file";
+    input.accept = resolved.imageMimeTypes.join(",");
+    input.multiple = true;
+    input.style.display = "none";
+    input.addEventListener("change", () => {
+        const files = Array.from(input.files ?? []);
+        void insertImageFiles(view, files, resolved).finally(() => input.remove());
+    }, { once: true });
+    document.body.append(input);
+    input.click();
+}
+function validateImageFile(file, config) {
+    if (!config.imageMimeTypes.includes(file.type)) {
+        throw new Error(`Unsupported image type: ${file.type || "unknown"}`);
+    }
+    if (file.size > config.imageMaxSizeBytes) {
+        throw new Error(`Image exceeds ${config.imageMaxSizeBytes} bytes`);
+    }
+}
+function imageFilesFromItems(items, config) {
+    if (!items) {
+        return [];
+    }
+    return Array.from(items)
+        .filter((item) => item.kind === "file" && config.imageMimeTypes.includes(item.type))
+        .map((item) => item.getAsFile())
+        .filter((file) => Boolean(file));
+}
+/**
+ * GitHub-style uploading placeholder. Uses a unique `mira-uploading:` URL so
+ * concurrent pastes can be replaced reliably after upload finishes.
+ */
+export function createUploadingImageMarkdown(file, id = createUploadingId()) {
+    const name = file.name.trim() || "image";
+    const escapedName = name.replace(/[[\]\\]/g, "\\$&");
+    return `![Uploading ${escapedName}…](${miraUploadingImageScheme}${id})`;
+}
+export function createImageMarkdown({ alt, doc, src, syntax, }) {
+    const escapedAlt = alt.replace(/[[\]\\]/g, "\\$&");
+    if (syntax === "inline") {
+        return `![${escapedAlt}](${src})`;
+    }
+    const label = uniqueImageLabel(alt, doc);
+    return `![${escapedAlt}][${label}]\n\n[${label}]: ${src}`;
+}
+function replaceImagePlaceholder(view, placeholder, replacement) {
+    const doc = view.state.doc.toString();
+    const index = doc.indexOf(placeholder);
+    if (index === -1) {
+        return;
+    }
+    let from = index;
+    let to = index + placeholder.length;
+    // Trim surrounding blank lines when removing a failed upload placeholder.
+    if (replacement === "") {
+        if (from >= 2 && doc.slice(from - 2, from) === "\n\n") {
+            from -= 2;
+        }
+        else if (to + 2 <= doc.length && doc.slice(to, to + 2) === "\n\n") {
+            to += 2;
+        }
+        else if (from >= 1 && doc[from - 1] === "\n") {
+            from -= 1;
+        }
+        else if (to < doc.length && doc[to] === "\n") {
+            to += 1;
+        }
+    }
+    view.dispatch({
+        changes: { from, to, insert: replacement },
+        userEvent: "input.image",
+    });
+}
+function uniqueImageLabel(alt, doc) {
+    const base = slug(alt) || "image";
+    let label = base;
+    let index = 2;
+    while (new RegExp(`^\\[${escapeRegExp(label)}\\]:`, "im").test(doc)) {
+        label = `${base}-${index}`;
+        index += 1;
+    }
+    return label;
+}
+function imageAltFromFile(file) {
+    return file.name.replace(/\.[^.]+$/, "") || "image";
+}
+function slug(value) {
+    return value
+        .toLowerCase()
+        .replace(/[^a-z0-9]+/g, "-")
+        .replace(/^-+|-+$/g, "");
+}
+function escapeRegExp(value) {
+    return value.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+}
+function createUploadingId() {
+    if (typeof crypto !== "undefined" && "randomUUID" in crypto) {
+        return crypto.randomUUID();
+    }
+    return `${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 10)}`;
+}
+function readFileAsDataUrl(file) {
+    return new Promise((resolve, reject) => {
+        const reader = new FileReader();
+        reader.addEventListener("load", () => {
+            if (typeof reader.result === "string") {
+                resolve(reader.result);
+            }
+            else {
+                reject(new Error("Image could not be read as a data URL"));
+            }
+        });
+        reader.addEventListener("error", () => {
+            reject(reader.error ?? new Error("Image could not be read"));
+        });
+        reader.readAsDataURL(file);
+    });
+}

package/dist/core/images.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=images.test.d.ts.map

package/dist/core/images.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"images.test.d.ts","sourceRoot":"","sources":["../../src/core/images.test.ts"],"names":[],"mappings":""}

package/dist/core/images.test.js

@@ -0,0 +1,109 @@
+// @vitest-environment jsdom
+import { EditorView } from "@codemirror/view";
+import { describe, expect, it, vi } from "vitest";
+import { createImageMarkdown, createUploadingImageMarkdown, insertImageFiles, miraUploadingImageScheme, } from "./images";
+function createView(doc = "") {
+    const parent = document.createElement("div");
+    document.body.append(parent);
+    const view = new EditorView({ doc, parent });
+    return {
+        view,
+        destroy() {
+            view.destroy();
+            parent.remove();
+        },
+    };
+}
+function pngFile(name = "shot.png") {
+    return new File([new Uint8Array([137, 80, 78, 71])], name, {
+        type: "image/png",
+    });
+}
+describe("image markdown insertion", () => {
+    it("generates reference-style image markdown by default", () => {
+        expect(createImageMarkdown({
+            alt: "Alt Text",
+            doc: "",
+            src: "data:image/png;base64,abc=",
+            syntax: "reference",
+        })).toBe("![Alt Text][alt-text]\n\n[alt-text]: data:image/png;base64,abc=");
+    });
+    it("avoids colliding with existing image reference labels", () => {
+        expect(createImageMarkdown({
+            alt: "Alt Text",
+            doc: "[alt-text]: old",
+            src: "data:image/png;base64,abc=",
+            syntax: "reference",
+        })).toContain("[alt-text-2]: data:image/png;base64,abc=");
+    });
+    it("can generate Carta-compatible inline image markdown", () => {
+        expect(createImageMarkdown({
+            alt: "Alt Text",
+            doc: "",
+            src: "data:image/png;base64,abc=",
+            syntax: "inline",
+        })).toBe("![Alt Text](data:image/png;base64,abc=)");
+    });
+    it("creates GitHub-style uploading placeholders with unique tokens", () => {
+        const placeholder = createUploadingImageMarkdown(pngFile(), "abc-123");
+        expect(placeholder).toBe(`![Uploading shot.png…](${miraUploadingImageScheme}abc-123)`);
+    });
+    it("inserts uploading placeholders then replaces them when upload finishes", async () => {
+        const { view, destroy } = createView("Before ");
+        view.dispatch({
+            selection: { anchor: view.state.doc.length },
+        });
+        let resolveUpload;
+        const upload = new Promise((resolve) => {
+            resolveUpload = resolve;
+        });
+        const insertPromise = insertImageFiles(view, [pngFile()], {
+            imageUpload: () => upload,
+            imageSyntax: "inline",
+        });
+        expect(view.state.doc.toString()).toMatch(/^Before !\[Uploading shot\.png…\]\(mira-uploading:[^)]+\)$/);
+        resolveUpload("https://cdn.example/shot.png");
+        await insertPromise;
+        expect(view.state.doc.toString()).toBe("Before ![shot](https://cdn.example/shot.png)");
+        destroy();
+    });
+    it("removes the placeholder when upload fails", async () => {
+        const { view, destroy } = createView("Hello");
+        view.dispatch({
+            selection: { anchor: view.state.doc.length },
+        });
+        const onImageUploadError = vi.fn();
+        await insertImageFiles(view, [pngFile()], {
+            imageUpload: async () => {
+                throw new Error("upload failed");
+            },
+            imageSyntax: "inline",
+            onImageUploadError,
+        });
+        expect(view.state.doc.toString()).toBe("Hello");
+        expect(onImageUploadError).toHaveBeenCalledOnce();
+        destroy();
+    });
+    it("uploads multiple images in parallel with distinct placeholders", async () => {
+        const { view, destroy } = createView("");
+        const resolvers = [];
+        const uploads = [
+            new Promise((resolve) => resolvers.push(resolve)),
+            new Promise((resolve) => resolvers.push(resolve)),
+        ];
+        let uploadIndex = 0;
+        const insertPromise = insertImageFiles(view, [pngFile("a.png"), pngFile("b.png")], {
+            imageUpload: () => uploads[uploadIndex++],
+            imageSyntax: "inline",
+        });
+        const during = view.state.doc.toString();
+        expect(during).toContain("![Uploading a.png…](");
+        expect(during).toContain("![Uploading b.png…](");
+        expect(during.match(/mira-uploading:/g)?.length).toBe(2);
+        resolvers[1]("https://cdn.example/b.png");
+        resolvers[0]("https://cdn.example/a.png");
+        await insertPromise;
+        expect(view.state.doc.toString()).toBe("![a](https://cdn.example/a.png)\n\n![b](https://cdn.example/b.png)");
+        destroy();
+    });
+});