@canvist/web 0.0.0-stage → 0.2.0

package/dist/font-watcher.d.ts

@@ -0,0 +1,28 @@
+/**
+ * Keeping measurements in step with the page's web fonts.
+ *
+ * The canvas resolves font families through `document.fonts`, so every face
+ * the page declares with `@font-face` or adds as a `FontFace` is usable with
+ * no configuration. But a face that is still loading measures and paints as
+ * its fallback. The watcher asks the browser to load the faces layout
+ * actually used, for the characters it used them for (so `unicode-range`
+ * subsets load only when needed), and reports each family as its faces
+ * finish loading, so layout forgets just those measurements.
+ *
+ * @module
+ */
+/** The family name of a face, without the quotes `FontFace.family` may keep. */
+export declare function familyName(face: FontFace): string;
+/** Watches one `FontFaceSet` on behalf of one editor. */
+export declare class FontWatcher {
+    #private;
+    constructor(fonts: FontFaceSet, loaded: (families: readonly string[]) => void);
+    /** Whether faces requested by the watcher are still loading. */
+    get loading(): boolean;
+    /** Resolve once every face the watcher asked for has loaded or failed. */
+    settled(): Promise<void>;
+    /** Load whatever faces the fonts in `used` need for their text and do not have yet. */
+    request(used: ReadonlyMap<string, string>): void;
+    /** Stop listening. */
+    dispose(): void;
+}

package/dist/font-watcher.js

@@ -0,0 +1,88 @@
+/**
+ * Keeping measurements in step with the page's web fonts.
+ *
+ * The canvas resolves font families through `document.fonts`, so every face
+ * the page declares with `@font-face` or adds as a `FontFace` is usable with
+ * no configuration. But a face that is still loading measures and paints as
+ * its fallback. The watcher asks the browser to load the faces layout
+ * actually used, for the characters it used them for (so `unicode-range`
+ * subsets load only when needed), and reports each family as its faces
+ * finish loading, so layout forgets just those measurements.
+ *
+ * @module
+ */
+/** The family name of a face, without the quotes `FontFace.family` may keep. */
+export function familyName(face) {
+    return face.family.replace(/^["']|["']$/g, "");
+}
+/** Watches one `FontFaceSet` on behalf of one editor. */
+export class FontWatcher {
+    #fonts;
+    #loaded;
+    /** Characters already checked or loaded, per CSS font. */
+    #seen = new Map();
+    #pending = new Set();
+    #onLoadingDone;
+    constructor(fonts, loaded) {
+        this.#fonts = fonts;
+        this.#loaded = loaded;
+        this.#onLoadingDone = (event) => {
+            const families = event.fontfaces.map(familyName);
+            if (families.length > 0) {
+                loaded(families);
+            }
+        };
+        fonts.addEventListener("loadingdone", this.#onLoadingDone);
+    }
+    /** Whether faces requested by the watcher are still loading. */
+    get loading() {
+        return this.#pending.size > 0;
+    }
+    /** Resolve once every face the watcher asked for has loaded or failed. */
+    async settled() {
+        while (this.#pending.size > 0) {
+            await Promise.allSettled([...this.#pending]);
+        }
+    }
+    /** Load whatever faces the fonts in `used` need for their text and do not have yet. */
+    request(used) {
+        for (const [font, text] of used) {
+            const fresh = this.#unseen(font, text);
+            if (fresh.length === 0 || this.#fonts.check(font, fresh)) {
+                continue;
+            }
+            this.#load(font, fresh);
+        }
+    }
+    /**
+     * The characters of `text` not yet checked for `font`, marking them seen.
+     * Empty text still checks one character, so the font's primary face loads.
+     */
+    #unseen(font, text) {
+        const seen = this.#seen.get(font) ?? new Set();
+        this.#seen.set(font, seen);
+        let fresh = "";
+        for (const character of text.length === 0 ? "x" : text) {
+            if (!seen.has(character)) {
+                seen.add(character);
+                fresh += character;
+            }
+        }
+        return fresh;
+    }
+    /** Load the faces of `font` that cover `characters`, reporting their families once loaded. */
+    #load(font, characters) {
+        const pending = this.#fonts.load(font, characters).then((faces) => {
+            if (faces.length > 0) {
+                this.#loaded(faces.map(familyName));
+            }
+        }, 
+        // A face that fails to load keeps its fallback, as CSS does.
+        () => undefined).finally(() => this.#pending.delete(pending));
+        this.#pending.add(pending);
+    }
+    /** Stop listening. */
+    dispose() {
+        this.#fonts.removeEventListener("loadingdone", this.#onLoadingDone);
+    }
+}

package/dist/fonts.d.ts

@@ -0,0 +1,130 @@
+/**
+ * The fonts plugin: load fonts the way the web does, without jank.
+ *
+ * The editor already uses every font the page can: installed fonts by
+ * family name, and every face in `document.fonts`, whether the page
+ * declared it with `@font-face` or added a `FontFace`. This plugin adds:
+ *
+ * - **Loading** faces from URLs, bytes, or `local()` names with CSS
+ *   descriptors (`weight`, `style`, `unicodeRange`, `display`, …). Faces
+ *   with a `unicodeRange` load only once the document uses a character in
+ *   it.
+ * - **`font-display`.** Text in a face that is still loading is laid out
+ *   but not drawn for the block period, then drawn in the fallback until the
+ *   face arrives. A face that arrives after its swap period (`fallback`,
+ *   `optional`) is never swapped in, as in CSS.
+ * - **Metric-compatible fallbacks.** Each face gets a `"<family> Fallback"`
+ *   face over a local font, scaled with `size-adjust` and
+ *   `ascent-override`/`descent-override` to the real face's metrics, so
+ *   text laid out in the fallback wraps almost where the real face will.
+ *   Metrics come from `metrics`, or from measuring the face once it loads
+ *   (remembered for the next visit). Use {@link stack} to put it in a
+ *   family list.
+ * - **Discovery**: whether a family is available, and the installed fonts
+ *   through the Local Font Access API where the browser has it.
+ * - **Server rendering**: {@link fontFaceCss} writes the same faces as
+ *   `@font-face` rules, with no DOM.
+ *
+ * ```ts
+ * import { createEditor } from "@canvist/web";
+ * import { fonts, stack } from "@canvist/web/fonts";
+ *
+ * const editor = await createEditor(element, {
+ * 	theme: { bodyFamily: stack("Inter", "sans-serif") },
+ * 	plugins: [fonts({ faces: [{ family: "Inter", source: "/fonts/Inter.woff2", weight: "100 900" }] })],
+ * });
+ * const families = await editor.plugins.fonts.local();
+ * ```
+ *
+ * @module
+ */
+import type { Plugin } from "./plugin.ts";
+declare global {
+    interface FontFaceDescriptors {
+        /** CSS Fonts 5 `size-adjust`, shipped in every engine but missing from TypeScript's DOM types. */
+        sizeAdjust?: string;
+    }
+}
+/** A face's vertical metrics and average width, as fractions of its em. */
+export interface FaceMetrics {
+    readonly ascent: number;
+    readonly descent: number;
+    /** The average advance of {@link WIDTH_SAMPLE}'s characters. */
+    readonly averageWidth: number;
+}
+/** A font face to load, described as `@font-face` describes one. */
+export interface FontSource {
+    /** The family name to register the face under. */
+    readonly family: string;
+    /** A URL, several URLs (tried in order), or the font file's bytes. */
+    readonly source: string | URL | readonly (string | URL)[] | ArrayBuffer | ArrayBufferView;
+    /** CSS `font-weight`, or a range such as `"100 900"` for variable fonts. */
+    readonly weight?: string;
+    /** CSS `font-style`: `"normal"`, `"italic"`, or `"oblique 0deg 10deg"`. */
+    readonly style?: string;
+    readonly stretch?: string;
+    /** Load the face only for text in these ranges, e.g. `"U+0000-00FF"`. */
+    readonly unicodeRange?: string;
+    /** What to show while the face loads. Default `"swap"`. */
+    readonly display?: FontDisplay;
+    readonly featureSettings?: string;
+    readonly variationSettings?: string;
+    /**
+     * Local fonts to build the metric-compatible fallback over, best first,
+     * or `false` for none. Default Arial, Helvetica, Liberation Sans, Roboto.
+     */
+    readonly fallback?: readonly string[] | false;
+    /** The face's metrics, so the fallback is right on the first visit too. */
+    readonly metrics?: FaceMetrics;
+}
+/** Options for {@link fonts}. */
+export interface FontsOptions {
+    /** Faces to load as the editor starts. */
+    readonly faces?: readonly FontSource[];
+}
+/** One installed family, from {@link FontsApi.local}. */
+export interface LocalFamily {
+    readonly family: string;
+    /** Its faces' style names, such as `"Regular"` and `"Bold Italic"`. */
+    readonly styles: readonly string[];
+}
+/** `editor.plugins.fonts`. */
+export interface FontsApi {
+    /** Load a face, as `@font-face` would declare it. Resolves once it is usable or has failed over to its fallback. */
+    load(face: FontSource): Promise<FontFace>;
+    /** Whether text in `family` would render in that family rather than a fallback. */
+    available(family: string): boolean;
+    /**
+     * The installed font families, through the Local Font Access API. Ask in
+     * response to a click: browsers require a user gesture and permission.
+     * `null` where the API is missing (only Chromium has it) or permission is
+     * denied.
+     */
+    local(): Promise<readonly LocalFamily[] | null>;
+    /** Every face this plugin added to the page. */
+    faces(): readonly FontFace[];
+    /** `@font-face` rules for every face loaded from a URL, for server rendering. */
+    css(): string;
+}
+/** The fonts plugin. */
+export declare function fonts(options?: FontsOptions): Plugin<"fonts", FontsApi>;
+/**
+ * A CSS `font-family` list that puts `family`'s metric-compatible fallback
+ * right after it: `stack("Inter", "sans-serif")` is
+ * `"Inter", "Inter Fallback", sans-serif`.
+ */
+export declare function stack(family: string, ...fallbacks: readonly string[]): string;
+/**
+ * `@font-face` rules for `faces` loaded from URLs, so server-rendered HTML
+ * loads the same files the editor does. Runs anywhere, with no DOM. Faces
+ * given as bytes have no URL to point at and are skipped.
+ */
+export declare function fontFaceCss(faces: readonly FontSource[]): string;
+/** The metrics of `family` as the canvas renders it now. */
+export declare function measureFace(document: Document, family: string): FaceMetrics;
+/**
+ * Whether `family` renders as itself: a probe string measures differently
+ * from both the serif and the monospace generic when the family falls
+ * back to neither.
+ */
+export declare function isAvailable(document: Document, family: string): boolean;

package/dist/fonts.js

@@ -0,0 +1,343 @@
+/** The suffix of a face's metric-compatible fallback family. */
+const FALLBACK_SUFFIX = " Fallback";
+/** Text whose average advance stands for a face's average character width. */
+const WIDTH_SAMPLE = "The quick brown fox jumps over the lazy dog 0123456789";
+/** The size faces are measured at, large enough that rounding doesn't matter. */
+const PROBE_SIZE = 100;
+/** Where measured metrics are remembered between visits. */
+const STORAGE_PREFIX = "canvist:font-metrics:";
+/** Local fonts to build fallbacks over when a face names none, tried in order. */
+const DEFAULT_FALLBACKS = ["Arial", "Helvetica", "Liberation Sans", "Roboto"];
+/** CSS Fonts 4's recommended short block and short swap periods, in ms. */
+const SHORT_PERIOD_MS = 3000;
+/** CSS Fonts 4's recommended extremely small block period, in ms. */
+const EXTREMELY_SMALL_PERIOD_MS = 100;
+/** How long text in a loading face stays invisible, and how long a late face may still swap in, per CSS Fonts 4. */
+const DISPLAY_PERIODS = {
+    auto: { block: SHORT_PERIOD_MS, swap: Infinity },
+    block: { block: SHORT_PERIOD_MS, swap: Infinity },
+    swap: { block: 0, swap: Infinity },
+    fallback: { block: EXTREMELY_SMALL_PERIOD_MS, swap: SHORT_PERIOD_MS },
+    optional: {
+        block: EXTREMELY_SMALL_PERIOD_MS,
+        swap: EXTREMELY_SMALL_PERIOD_MS,
+    },
+};
+/** The fonts plugin. */
+export function fonts(options = {}) {
+    return {
+        name: "fonts",
+        setup(context) {
+            const loader = new FaceLoader(context);
+            for (const face of options.faces ?? []) {
+                context.waitFor(loader.load(face));
+            }
+            return {
+                load: (face) => loader.load(face),
+                available: (family) => isAvailable(context.element.ownerDocument, family),
+                local: () => localFamilies(),
+                faces: () => loader.added(),
+                css: () => fontFaceCss(loader.sources()),
+            };
+        },
+    };
+}
+/**
+ * A CSS `font-family` list that puts `family`'s metric-compatible fallback
+ * right after it: `stack("Inter", "sans-serif")` is
+ * `"Inter", "Inter Fallback", sans-serif`.
+ */
+export function stack(family, ...fallbacks) {
+    return [quote(family), quote(family + FALLBACK_SUFFIX), ...fallbacks].join(", ");
+}
+/**
+ * `@font-face` rules for `faces` loaded from URLs, so server-rendered HTML
+ * loads the same files the editor does. Runs anywhere, with no DOM. Faces
+ * given as bytes have no URL to point at and are skipped.
+ */
+export function fontFaceCss(faces) {
+    return faces.flatMap((face) => {
+        const urls = sourceUrls(face.source);
+        if (urls === null) {
+            return [];
+        }
+        const declarations = [
+            `font-family:${quote(face.family)}`,
+            `src:${urls.map((url) => `url(${JSON.stringify(String(url))})`).join(",")}`,
+            face.weight === undefined ? "" : `font-weight:${face.weight}`,
+            face.style === undefined ? "" : `font-style:${face.style}`,
+            face.stretch === undefined ? "" : `font-stretch:${face.stretch}`,
+            face.unicodeRange === undefined
+                ? ""
+                : `unicode-range:${face.unicodeRange}`,
+            `font-display:${face.display ?? "swap"}`,
+        ].filter((declaration) => declaration !== "");
+        return [`@font-face{${declarations.join(";")}}`];
+    }).join("\n");
+}
+/** Loads faces into one document for one editor. */
+class FaceLoader {
+    #context;
+    #document;
+    #added = [];
+    #sources = [];
+    #blocked = new Map();
+    constructor(context) {
+        this.#context = context;
+        this.#document = context.element.ownerDocument;
+    }
+    added() {
+        return this.#added;
+    }
+    sources() {
+        return this.#sources;
+    }
+    /**
+     * Add `source` the way CSS `font-display` would: subsets are added
+     * unloaded for the font watcher to load on demand; whole faces hide their
+     * text for the block period, and are only swapped in if they arrive within
+     * the swap period. A network failure keeps the fallback, like CSS.
+     */
+    async load(source) {
+        this.#sources.push(source);
+        const display = source.display ?? "swap";
+        const periods = DISPLAY_PERIODS[display];
+        const face = new FontFace(source.family, faceSource(source.source), {
+            display,
+            ...descriptors(source),
+        });
+        const fallback = source.fallback === false
+            ? undefined
+            : this.#fallback(source, source.fallback ?? DEFAULT_FALLBACKS);
+        if (source.unicodeRange !== undefined) {
+            // Subsets load when text needs them: the editor's font watcher
+            // asks for exactly the characters the document uses.
+            this.#add(face);
+            await fallback;
+            return face;
+        }
+        const started = performance.now();
+        this.#block(source.family, periods.block);
+        try {
+            await face.load();
+        }
+        catch (error) {
+            if (!(error instanceof DOMException && error.name === "NetworkError")) {
+                throw error;
+            }
+            // A face that fails to load leaves its fallback in place, as CSS does.
+            this.#unblock(source.family);
+            await fallback;
+            return face;
+        }
+        this.#unblock(source.family);
+        if (performance.now() - started <= periods.swap) {
+            this.#add(face);
+            this.#remember(source);
+            this.#context.fontsLoaded([source.family]);
+        }
+        await fallback;
+        return face;
+    }
+    #add(face) {
+        this.#document.fonts.add(face);
+        this.#added.push(face);
+        this.#context.signal.addEventListener("abort", () => this.#document.fonts.delete(face), { once: true });
+    }
+    /** Hide `family`'s text for `period` milliseconds, or until it loads. */
+    #block(family, period) {
+        if (period <= 0) {
+            return;
+        }
+        const timer = window.setTimeout(() => this.#unblock(family), period);
+        this.#blocked.set(family, timer);
+        this.#context.hideFamilies([...this.#blocked.keys()]);
+    }
+    #unblock(family) {
+        const timer = this.#blocked.get(family);
+        if (timer === undefined) {
+            return;
+        }
+        clearTimeout(timer);
+        this.#blocked.delete(family);
+        this.#context.hideFamilies([...this.#blocked.keys()]);
+    }
+    /** Add a metric-compatible fallback for `source` over the first of `locals` installed. */
+    async #fallback(source, locals) {
+        const target = source.metrics ?? recall(source.family);
+        if (target === undefined) {
+            return;
+        }
+        for (const local of locals) {
+            const probe = new FontFace(`${source.family}${FALLBACK_SUFFIX}`, `local(${quote(local)})`);
+            if (!(await installed(probe))) {
+                continue;
+            }
+            const base = measureFace(this.#document, quote(local));
+            const sizeAdjust = target.averageWidth / base.averageWidth;
+            const face = new FontFace(`${source.family}${FALLBACK_SUFFIX}`, `local(${quote(local)})`, {
+                ...descriptors(source),
+                sizeAdjust: percent(sizeAdjust),
+                ascentOverride: percent(target.ascent / sizeAdjust),
+                descentOverride: percent(target.descent / sizeAdjust),
+                lineGapOverride: "0%",
+            });
+            await face.load();
+            this.#add(face);
+            this.#context.fontsLoaded([face.family]);
+            return;
+        }
+    }
+    /** Measure a loaded face and keep its metrics for the next visit's fallback. */
+    #remember(source) {
+        if (source.metrics !== undefined) {
+            return;
+        }
+        const metrics = measureFace(this.#document, quote(source.family));
+        try {
+            localStorage.setItem(STORAGE_PREFIX + source.family, JSON.stringify(metrics));
+        }
+        catch (error) {
+            // Storage can be full or disabled (private browsing); the next
+            // visit then measures again, and nothing else depends on it.
+            if (!(error instanceof DOMException)) {
+                throw error;
+            }
+        }
+    }
+}
+/** Whether the `local()` face `probe` loads: it fails with a NetworkError when the font is not installed. */
+async function installed(probe) {
+    try {
+        await probe.load();
+        return true;
+    }
+    catch (error) {
+        if (error instanceof DOMException && error.name === "NetworkError") {
+            return false;
+        }
+        throw error;
+    }
+}
+/** Metrics measured on a previous visit, if any were stored. */
+function recall(family) {
+    let stored;
+    try {
+        stored = localStorage.getItem(STORAGE_PREFIX + family);
+    }
+    catch (error) {
+        if (error instanceof DOMException) {
+            return undefined;
+        }
+        throw error;
+    }
+    if (stored === null) {
+        return undefined;
+    }
+    const parsed = JSON.parse(stored);
+    return isFaceMetrics(parsed) ? parsed : undefined;
+}
+function isFaceMetrics(value) {
+    return typeof value === "object" && value !== null &&
+        ["ascent", "descent", "averageWidth"].every((key) => typeof value[key] === "number");
+}
+/** The metrics of `family` as the canvas renders it now. */
+export function measureFace(document, family) {
+    const context = document.createElement("canvas").getContext("2d");
+    if (context === null) {
+        throw new Error("canvist needs a 2D canvas context to measure fonts");
+    }
+    context.font = `${PROBE_SIZE}px ${family}`;
+    const box = context.measureText(WIDTH_SAMPLE);
+    return {
+        ascent: box.fontBoundingBoxAscent / PROBE_SIZE,
+        descent: box.fontBoundingBoxDescent / PROBE_SIZE,
+        averageWidth: box.width / PROBE_SIZE / WIDTH_SAMPLE.length,
+    };
+}
+/**
+ * Whether `family` renders as itself: a probe string measures differently
+ * from both the serif and the monospace generic when the family falls
+ * back to neither.
+ */
+export function isAvailable(document, family) {
+    const context = document.createElement("canvas").getContext("2d");
+    if (context === null) {
+        throw new Error("canvist needs a 2D canvas context to measure fonts");
+    }
+    const probe = "mmmmmmmmmmlli10OoWw@#";
+    return ["monospace", "serif"].some((generic) => {
+        context.font = `${PROBE_SIZE}px ${generic}`;
+        const base = context.measureText(probe).width;
+        context.font = `${PROBE_SIZE}px ${quote(family)}, ${generic}`;
+        return context.measureText(probe).width !== base;
+    });
+}
+/**
+ * The installed families and their styles, from the Local Font Access API.
+ * `null` when the browser has no such API or the user denies permission,
+ * so callers can tell "unknown" apart from "no fonts".
+ */
+async function localFamilies() {
+    const query = globalThis.queryLocalFonts;
+    if (query === undefined) {
+        return null;
+    }
+    let fonts;
+    try {
+        fonts = await query();
+    }
+    catch (error) {
+        if (error instanceof DOMException &&
+            (error.name === "NotAllowedError" || error.name === "SecurityError")) {
+            return null;
+        }
+        throw error;
+    }
+    const families = new Map();
+    for (const font of fonts) {
+        const styles = families.get(font.family) ?? [];
+        styles.push(font.style);
+        families.set(font.family, styles);
+    }
+    return [...families].map(([family, styles]) => ({ family, styles }));
+}
+function descriptors(source) {
+    const result = {};
+    const entries = {
+        weight: source.weight,
+        style: source.style,
+        stretch: source.stretch,
+        unicodeRange: source.unicodeRange,
+        featureSettings: source.featureSettings,
+        variationSettings: source.variationSettings,
+    };
+    for (const [key, value] of Object.entries(entries)) {
+        if (value !== undefined) {
+            result[key] = value;
+        }
+    }
+    return result;
+}
+function faceSource(source) {
+    const urls = sourceUrls(source);
+    if (urls === null) {
+        return source;
+    }
+    return urls.map((url) => `url(${JSON.stringify(String(url))})`).join(", ");
+}
+function sourceUrls(source) {
+    if (typeof source === "string" || source instanceof URL) {
+        return [source];
+    }
+    if (Array.isArray(source)) {
+        return source;
+    }
+    return null;
+}
+function quote(family) {
+    return JSON.stringify(family);
+}
+function percent(ratio) {
+    return `${(ratio * 100).toFixed(4)}%`;
+}

package/dist/full.d.ts

@@ -0,0 +1,40 @@
+/**
+ * The editor with every extension canvist ships.
+ *
+ * `createEditor` here makes an editor from a build of canvist with every
+ * extension inside, and the layout and theme for their blocks and marks:
+ * tables, callouts, math, media, ink, and the rest. It is a third
+ * WebAssembly module, so editors with only the StarterKit never download
+ * it. Everything `@canvist/web` exports is here too, and every extension
+ * beyond the StarterKit; `createEditor` here takes them all, and `load`
+ * loads this module.
+ *
+ * ```ts
+ * import { allExtensions, createEditor } from "@canvist/web/full";
+ *
+ * const editor = await createEditor(document.querySelector("#editor")!, {
+ * 	extensions: allExtensions,
+ * 	content: { format: "markdown", input: "| a | b |\n| - | - |\n| 1 | 2 |" },
+ * });
+ * editor.commands.addRowAfter();
+ * ```
+ *
+ * @module
+ */
+import type { Extensions, StarterKit } from "@canvist/headless";
+import { Editor, type EditorOptions } from "./editor.ts";
+import type { WasmSource } from "./load.ts";
+import type { Plugins } from "./plugin.ts";
+export * from "@canvist/headless/extras";
+export * from "./mod.ts";
+/**
+ * Load the full WebAssembly module once. Without a source it is fetched
+ * from next to this file, which bundlers such as Vite follow.
+ */
+export declare function load(source?: WasmSource): Promise<void>;
+/**
+ * Create an editor that can use any extension: `@canvist/web`'s
+ * `createEditor`, with every extension inside. `options.wasm` is where the
+ * full module comes from.
+ */
+export declare function createEditor<const E extends Extensions = StarterKit, const P extends Plugins = []>(element: HTMLElement, options?: EditorOptions<E, P>): Promise<Editor<E, P>>;

package/dist/full.js

@@ -0,0 +1,25 @@
+import init, { WebEditor } from "../wasm-full/canvist_web.js";
+import { Editor } from "./editor.js";
+export * from "@canvist/headless/extras";
+export * from "./mod.js";
+let loading;
+/**
+ * Load the full WebAssembly module once. Without a source it is fetched
+ * from next to this file, which bundlers such as Vite follow.
+ */
+export function load(source) {
+    loading ??= init({
+        module_or_path: source ??
+            new URL("../wasm-full/canvist_web_bg.wasm", import.meta.url),
+    }).then(() => undefined);
+    return loading;
+}
+/**
+ * Create an editor that can use any extension: `@canvist/web`'s
+ * `createEditor`, with every extension inside. `options.wasm` is where the
+ * full module comes from.
+ */
+export async function createEditor(element, options = {}) {
+    await load(options.wasm);
+    return new Editor(element, options, (...args) => new WebEditor(...args));
+}