edytor 2.0.0 → 4.0.0

package/dist/plugins/media/media.js

@@ -1,6 +1,5 @@
 import { attach } from '../chrome.js';
 import { mediaKinds } from '../../crdt/semantics.js';
-import { sanitizeLinkHref } from '../richtext/richTextOperations.js';
 import { escapeHtml } from '../../clipboard/serializeClipboardFragment.js';
 import { keywordsOf, labelsOf, mediaEnglish } from '../../labels.js';
 import { MEDIA_ICONS } from './empty.svelte.js';
@@ -56,197 +55,5 @@ export const mediaPlugin = (kind, keywords, own) => (edytor) => {
         }
     };
 };
-/**
- * A web page's URL a media block may store or render: the link sanitizer's
- * reading of it (`sanitizeLinkHref`: ASCII control characters and spaces stripped,
- * tab/newline anywhere), then only an absolute `http:`/`https:` URL with a
- * host. `null` for anything else: a script or `data:` URL, a `mailto:`, a
- * relative path, a bare domain.
- */
-export const safeWebUrl = (value) => {
-    const href = sanitizeLinkHref(value);
-    if (href === null)
-        return null;
-    try {
-        const url = new URL(href);
-        return (url.protocol === 'http:' || url.protocol === 'https:') && url.host ? href : null;
-    }
-    catch {
-        return null;
-    }
-};
-/**
- * A media file's source (a video, an audio track, an attachment): a
- * {@link safeWebUrl}, or a `blob:` URL an upload answered. Never `data:`:
- * an inline file would be stored in the document and sent in every update.
- */
-export const safeMediaSrc = (value) => {
-    const blob = typeof value === 'string' ? /^blob:(.*)$/is.exec(value.trim()) : null;
-    const origin = blob && safeWebUrl(blob[1]);
-    return origin ? `blob:${origin}` : safeWebUrl(value);
-};
-/** The frame's `sandbox`: scripts and the provider's own origin, popups that leave it; no top navigation, modals, downloads or forms. */
-export const EMBED_SANDBOX = 'allow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox allow-presentation';
-/** The frame's permissions (`allow`): what a player needs, nothing that reads the viewer. */
-export const EMBED_ALLOW = 'fullscreen; picture-in-picture; encrypted-media; clipboard-write';
-const ID = /^[\w-]{1,128}$/;
-const HASH = /^[\da-f]{1,32}$/i;
-/** `url`'s path segments (empty ones dropped) when its host is one of `hosts`, else none. */
-const on = (url, ...hosts) => hosts.includes(url.hostname.toLowerCase()) ? url.pathname.split('/').filter(Boolean) : [];
-/** A YouTube start time (`t=42`, `t=42s`, `start=42`) in seconds. */
-const youtubeStart = (url) => {
-    const t = url.searchParams.get('t') ?? url.searchParams.get('start');
-    return t && /^\d{1,6}s?$/.test(t) ? `?start=${parseInt(t, 10)}` : '';
-};
-const youtube = {
-    name: 'YouTube',
-    embed: (url) => {
-        const [first, second] = on(url, 'youtu.be', 'youtube.com', 'www.youtube.com', 'm.youtube.com', 'music.youtube.com', 'www.youtube-nocookie.com');
-        const id = url.hostname.toLowerCase() === 'youtu.be'
-            ? first
-            : first === 'watch'
-                ? url.searchParams.get('v')
-                : first && ['shorts', 'embed', 'live'].includes(first)
-                    ? second
-                    : undefined;
-        return id && /^[\w-]{11}$/.test(id)
-            ? `https://www.youtube-nocookie.com/embed/${id}${youtubeStart(url)}`
-            : null;
-    }
-};
-const vimeo = {
-    name: 'Vimeo',
-    embed: (url) => {
-        const [player, ...video] = on(url, 'player.vimeo.com');
-        const [id, hash] = player === 'video' ? video : on(url, 'vimeo.com', 'www.vimeo.com');
-        if (!id || !/^\d{1,12}$/.test(id))
-            return null;
-        const h = hash && HASH.test(hash) ? hash : url.searchParams.get('h');
-        return `https://player.vimeo.com/video/${id}${h && HASH.test(h) ? `?h=${h}` : ''}`;
-    }
-};
-const loom = {
-    name: 'Loom',
-    embed: (url) => {
-        const [kind, id] = on(url, 'loom.com', 'www.loom.com');
-        return (kind === 'share' || kind === 'embed') && id && /^[\da-f]{32}$/i.test(id)
-            ? `https://www.loom.com/embed/${id}`
-            : null;
-    }
-};
-const figma = {
-    name: 'Figma',
-    embed: (url) => {
-        const [kind, key] = on(url, 'figma.com', 'www.figma.com');
-        return key &&
-            ID.test(key) &&
-            ['file', 'design', 'proto', 'board', 'slides', 'deck'].includes(kind)
-            ? `https://www.figma.com/embed?embed_host=edytor&url=${encodeURIComponent(url.href)}`
-            : null;
-    }
-};
-const codepen = {
-    name: 'CodePen',
-    embed: (url) => {
-        const [user, kind, id] = on(url, 'codepen.io');
-        return user && ID.test(user) && (kind === 'pen' || kind === 'embed') && id && ID.test(id)
-            ? `https://codepen.io/${user}/embed/${id}?default-tab=result`
-            : null;
-    },
-    height: 400
-};
-const spotify = {
-    name: 'Spotify',
-    embed: (url) => {
-        let parts = on(url, 'open.spotify.com');
-        if (parts[0] === 'embed' || /^intl-[a-z-]+$/i.test(parts[0] ?? ''))
-            parts = parts.slice(1);
-        const [kind, id] = parts;
-        return ['track', 'album', 'playlist', 'episode', 'show', 'artist'].includes(kind) &&
-            id &&
-            /^[A-Za-z0-9]{1,64}$/.test(id)
-            ? `https://open.spotify.com/embed/${kind}/${id}`
-            : null;
-    },
-    height: 352
-};
-/**
- * The default allowlist: YouTube (through `youtube-nocookie.com`), Vimeo,
- * Loom, Figma, CodePen and Spotify. A link no provider plays renders no
- * frame. Extend it with `createEmbedPlugin({ providers: [...EMBED_PROVIDERS, mine] })`.
- */
-export const EMBED_PROVIDERS = Object.freeze([
-    youtube,
-    vimeo,
-    loom,
-    figma,
-    codepen,
-    spotify
-]);
-/**
- * `url` is on the page's own origin (in a browser): a frame there with
- * `allow-scripts` and `allow-same-origin` could remove its own sandbox.
- */
-const sameOrigin = (url) => {
-    const origin = globalThis.location?.origin;
-    return typeof origin === 'string' && url.origin === origin;
-};
-/**
- * The player for `value` (a stored or pasted link): the first provider of
- * `providers` that plays it, and its `https:` player URL. `null` when the
- * link is not a {@link safeWebUrl}, no provider plays it, or the player URL
- * a provider answers is not `https:` or is on the page's own origin. The frame's `src` is always this
- * answer, never the stored value.
- */
-export const embedSourceOf = (value, providers = EMBED_PROVIDERS) => {
-    const href = safeWebUrl(value);
-    if (!href)
-        return null;
-    const url = new URL(href);
-    for (const provider of providers) {
-        let src;
-        try {
-            src = provider.embed(new URL(url.href));
-        }
-        catch {
-            continue;
-        }
-        if (src === null || src === undefined)
-            continue;
-        try {
-            const player = new URL(src);
-            if (player.protocol === 'https:' && safeWebUrl(src) === src && !sameOrigin(player))
-                return { src, provider };
-        }
-        catch {
-            // An unparsable player URL is refused like any other non-https one.
-        }
-        return null;
-    }
-    return null;
-};
-/** A file's display name from its URL's last path segment, decoded. */
-export const fileNameOf = (src) => {
-    try {
-        const last = new URL(src).pathname.split('/').filter(Boolean).at(-1);
-        return last ? decodeURIComponent(last) : src;
-    }
-    catch {
-        return src;
-    }
-};
-/**
- * The element a media kind's HTML import reads: `element` itself when it
- * is a `tag` (not inside a `figure`, which claims it), or a `figure`'s own
- * `tag` child.
- */
-export const claimed = (element, tag) => {
-    if (element.localName === 'figure')
-        return [...element.children].find((child) => child.localName === tag);
-    return element.localName === tag && element.parentElement?.localName !== 'figure'
-        ? element
-        : undefined;
-};
-/** An imported `video`'s or `audio`'s source: its `src`, else its first `source`'s. */
-export const mediaSourceOf = (element) => safeMediaSrc(element?.getAttribute('src') ?? element?.querySelector('source[src]')?.getAttribute('src'));
+export * from './sources.js';
 export { escapeHtml };

package/dist/plugins/media/sources.d.ts

@@ -0,0 +1,60 @@
+/**
+ * The media kinds' pure source rules: which URL a media block may store or
+ * render, the embed providers and their players, a file's name, the element
+ * an import reads. No DOM state, no Svelte: the export entry reads them too.
+ */
+import { safeMediaSrc, safeWebUrl } from '../../utils/sanitize.js';
+export { safeMediaSrc, safeWebUrl };
+/** One allowlisted embed provider: which links it plays, and its player. */
+export type EmbedProvider = {
+    /** The provider's name: the frame's `title`. */
+    name: string;
+    /**
+     * The player's URL for a link of this provider, else `null`. It must be
+     * `https:` on another origin than the page's: any other answer is
+     * refused (the frame has `allow-scripts` and `allow-same-origin`, so a
+     * player on the page's origin, or on one that can script it, could lift
+     * its own sandbox). Match the host exactly (never a
+     * suffix or a substring) and check every id you copy into the player URL.
+     */
+    embed: (url: URL) => string | null;
+    /** The frame's CSS `aspect-ratio` (default `16 / 9`); ignored with `height`. */
+    aspectRatio?: string;
+    /** A fixed frame height in pixels (a music player). */
+    height?: number;
+};
+/** The frame's `sandbox`: scripts and the provider's own origin, popups that leave it; no top navigation, modals, downloads or forms. */
+export declare const EMBED_SANDBOX = "allow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox allow-presentation";
+/** The frame's permissions (`allow`): what a player needs, nothing that reads the viewer. */
+export declare const EMBED_ALLOW = "fullscreen; picture-in-picture; encrypted-media; clipboard-write";
+/**
+ * The default allowlist: YouTube (through `youtube-nocookie.com`), Vimeo,
+ * Loom, Figma, CodePen and Spotify. A link no provider plays renders no
+ * frame. Extend it with `createEmbedPlugin({ providers: [...EMBED_PROVIDERS, mine] })`.
+ */
+export declare const EMBED_PROVIDERS: readonly EmbedProvider[];
+/**
+ * The player for `value` (a stored or pasted link): the first provider of
+ * `providers` that plays it, and its `https:` player URL. `null` when the
+ * link is not a {@link safeWebUrl}, no provider plays it, or the player URL
+ * a provider answers is not `https:` or is on the page's own origin. The frame's `src` is always this
+ * answer, never the stored value.
+ */
+export declare const embedSourceOf: (value: unknown, providers?: readonly EmbedProvider[]) => {
+    src: string;
+    provider: EmbedProvider;
+} | null;
+/** A file's display name from its URL's last path segment, decoded. */
+export declare const fileNameOf: (src: string) => string;
+/** A file block's name: its stored `name`, else its source's last segment (`''` without one). */
+export declare const fileNameFor: (data: {
+    name?: unknown;
+} | undefined, src: string | null) => string;
+/**
+ * The element a media kind's HTML import reads: `element` itself when it
+ * is a `tag` (not inside a `figure`, which claims it), or a `figure`'s own
+ * `tag` child.
+ */
+export declare const claimed: (element: HTMLElement, tag: string) => HTMLElement | undefined;
+/** An imported `video`'s or `audio`'s source: its `src`, else its first `source`'s. */
+export declare const mediaSourceOf: (element: HTMLElement | undefined) => string | null;

package/dist/plugins/media/sources.js

@@ -0,0 +1,165 @@
+/**
+ * The media kinds' pure source rules: which URL a media block may store or
+ * render, the embed providers and their players, a file's name, the element
+ * an import reads. No DOM state, no Svelte: the export entry reads them too.
+ */
+import { safeMediaSrc, safeWebUrl } from '../../utils/sanitize.js';
+export { safeMediaSrc, safeWebUrl };
+/** The frame's `sandbox`: scripts and the provider's own origin, popups that leave it; no top navigation, modals, downloads or forms. */
+export const EMBED_SANDBOX = 'allow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox allow-presentation';
+/** The frame's permissions (`allow`): what a player needs, nothing that reads the viewer. */
+export const EMBED_ALLOW = 'fullscreen; picture-in-picture; encrypted-media; clipboard-write';
+const ID = /^[\w-]{1,128}$/;
+const HASH = /^[\da-f]{1,32}$/i;
+/** `url`'s path segments (empty ones dropped) when its host is exactly one `hosts` matches, else none. */
+const on = (url, hosts) => hosts.test(url.hostname) ? url.pathname.split('/').filter(Boolean) : [];
+const youtube = {
+    name: 'YouTube',
+    embed: (url) => {
+        const [first = '', second] = on(url, /^((www\.|m\.|music\.)?youtube\.com|youtu\.be|www\.youtube-nocookie\.com)$/);
+        const id = url.hostname === 'youtu.be'
+            ? first
+            : first === 'watch'
+                ? url.searchParams.get('v')
+                : /^(shorts|embed|live)$/.test(first) && second;
+        // A start time (`t=42`, `t=42s`, `start=42`) in seconds.
+        const t = url.searchParams.get('t') ?? url.searchParams.get('start');
+        return id && /^[\w-]{11}$/.test(id)
+            ? `https://www.youtube-nocookie.com/embed/${id}${t && /^\d{1,6}s?$/.test(t) ? `?start=${parseInt(t, 10)}` : ''}`
+            : null;
+    }
+};
+const vimeo = {
+    name: 'Vimeo',
+    embed: (url) => {
+        const [player, ...video] = on(url, /^player\.vimeo\.com$/);
+        const [id, hash] = player === 'video' ? video : on(url, /^(www\.)?vimeo\.com$/);
+        const h = hash && HASH.test(hash) ? hash : url.searchParams.get('h');
+        return id && /^\d{1,12}$/.test(id)
+            ? `https://player.vimeo.com/video/${id}${h && HASH.test(h) ? `?h=${h}` : ''}`
+            : null;
+    }
+};
+const loom = {
+    name: 'Loom',
+    embed: (url) => {
+        const [kind = '', id = ''] = on(url, /^(www\.)?loom\.com$/);
+        return /^(share|embed)$/.test(kind) && /^[\da-f]{32}$/i.test(id)
+            ? `https://www.loom.com/embed/${id}`
+            : null;
+    }
+};
+const figma = {
+    name: 'Figma',
+    embed: (url) => {
+        const [kind = '', key = ''] = on(url, /^(www\.)?figma\.com$/);
+        return ID.test(key) && /^(file|design|proto|board|slides|deck)$/.test(kind)
+            ? `https://www.figma.com/embed?embed_host=edytor&url=${encodeURIComponent(url.href)}`
+            : null;
+    }
+};
+const codepen = {
+    name: 'CodePen',
+    embed: (url) => {
+        const [user = '', kind = '', id = ''] = on(url, /^codepen\.io$/);
+        return ID.test(user) && /^(pen|embed)$/.test(kind) && ID.test(id)
+            ? `https://codepen.io/${user}/embed/${id}?default-tab=result`
+            : null;
+    },
+    height: 400
+};
+const spotify = {
+    name: 'Spotify',
+    embed: (url) => {
+        let parts = on(url, /^open\.spotify\.com$/);
+        if (/^(embed|intl-[a-z-]+)$/i.test(parts[0] ?? ''))
+            parts = parts.slice(1);
+        const [kind = '', id = ''] = parts;
+        return /^(track|album|playlist|episode|show|artist)$/.test(kind) &&
+            /^[A-Za-z0-9]{1,64}$/.test(id)
+            ? `https://open.spotify.com/embed/${kind}/${id}`
+            : null;
+    },
+    height: 352
+};
+/**
+ * The default allowlist: YouTube (through `youtube-nocookie.com`), Vimeo,
+ * Loom, Figma, CodePen and Spotify. A link no provider plays renders no
+ * frame. Extend it with `createEmbedPlugin({ providers: [...EMBED_PROVIDERS, mine] })`.
+ */
+export const EMBED_PROVIDERS = Object.freeze([
+    youtube,
+    vimeo,
+    loom,
+    figma,
+    codepen,
+    spotify
+]);
+/**
+ * `url` is on the page's own origin (in a browser): a frame there with
+ * `allow-scripts` and `allow-same-origin` could remove its own sandbox.
+ */
+const sameOrigin = (url) => {
+    const origin = globalThis.location?.origin;
+    return typeof origin === 'string' && url.origin === origin;
+};
+/**
+ * The player for `value` (a stored or pasted link): the first provider of
+ * `providers` that plays it, and its `https:` player URL. `null` when the
+ * link is not a {@link safeWebUrl}, no provider plays it, or the player URL
+ * a provider answers is not `https:` or is on the page's own origin. The frame's `src` is always this
+ * answer, never the stored value.
+ */
+export const embedSourceOf = (value, providers = EMBED_PROVIDERS) => {
+    const href = safeWebUrl(value);
+    if (!href)
+        return null;
+    const url = new URL(href);
+    for (const provider of providers) {
+        let src;
+        try {
+            src = provider.embed(new URL(url.href));
+        }
+        catch {
+            continue;
+        }
+        if (src === null || src === undefined)
+            continue;
+        try {
+            const player = new URL(src);
+            if (player.protocol === 'https:' && safeWebUrl(src) === src && !sameOrigin(player))
+                return { src, provider };
+        }
+        catch {
+            // An unparsable player URL is refused like any other non-https one.
+        }
+        return null;
+    }
+    return null;
+};
+/** A file's display name from its URL's last path segment, decoded. */
+export const fileNameOf = (src) => {
+    try {
+        const last = new URL(src).pathname.split('/').filter(Boolean).at(-1);
+        return last ? decodeURIComponent(last) : src;
+    }
+    catch {
+        return src;
+    }
+};
+/** A file block's name: its stored `name`, else its source's last segment (`''` without one). */
+export const fileNameFor = (data, src) => String(data?.name || (src && fileNameOf(src)) || '');
+/**
+ * The element a media kind's HTML import reads: `element` itself when it
+ * is a `tag` (not inside a `figure`, which claims it), or a `figure`'s own
+ * `tag` child.
+ */
+export const claimed = (element, tag) => {
+    if (element.localName === 'figure')
+        return [...element.children].find((child) => child.localName === tag);
+    return element.localName === tag && element.parentElement?.localName !== 'figure'
+        ? element
+        : undefined;
+};
+/** An imported `video`'s or `audio`'s source: its `src`, else its first `source`'s. */
+export const mediaSourceOf = (element) => safeMediaSrc(element?.getAttribute('src') ?? element?.querySelector('source[src]')?.getAttribute('src'));

package/dist/plugins/media/urlPaste.svelte.d.ts

@@ -43,10 +43,11 @@ export declare class UrlPasteController extends ChromeList {
     } | null;
     constructor(edytor: Edytor);
     protected get count(): number;
-    get readonly(): boolean;
     close: () => void;
     /** Pick a row: keep the link, or turn the line into the offer's kind. */
     pick: (option?: UrlPasteOption | undefined) => void;
+    /** Where the menu stands (`ChromeAnchor`): the pasted line, which your `menu` places itself under. */
+    readonly anchor: import("../chrome.js").ChromeAnchor;
 }
 /**
  * Register `offer` on `edytor`'s URL paste menu. The first plugin to offer

package/dist/plugins/media/urlPaste.svelte.js

@@ -1,9 +1,7 @@
-import { placeNear } from '../../surface/overlay.js';
-import { onPress } from '../../events/onFocus.js';
 import { convertToKind, holdsNothing } from '../../kinds.js';
 import { pastedLink } from '../richtext/richTextOperations.js';
 import { safeWebUrl } from './media.js';
-import { mountChrome } from '../chrome.js';
+import { mountChrome, onPressOutside, virtualAnchor } from '../chrome.js';
 import { ChromeList, inPage, listHotkeys } from '../list.svelte.js';
 /**
  * Pasting a bare URL on an empty line (Notion): the URL lands as a link at
@@ -27,9 +25,6 @@ export class UrlPasteController extends ChromeList {
     get count() {
         return this.open?.options.length ?? 0;
     }
-    get readonly() {
-        return this.edytor.readonly;
-    }
     /** A custom menu (a media plugin's `menu`): the first one a plugin making an offer passed. */
     #menu;
     /** Take `menu` as the view's menu, unless a plugin listed before passed one. @internal */
@@ -70,7 +65,7 @@ export class UrlPasteController extends ChromeList {
                 : {};
             edytor.dispatcher.run('insertFromPaste', () => {
                 edytor.insertText(block.id, text.segStart, url, marks);
-                edytor.dispatcher.caret(edytor.idToBlock.get(block.id)?.firstText, url.length);
+                edytor.dispatcher.caretIn(edytor.idToBlock.get(block.id)?.firstText, url.length);
             });
             if (edytor.dispatcher.last?.status !== 'applied')
                 return;
@@ -122,12 +117,7 @@ export class UrlPasteController extends ChromeList {
                 this.close();
         },
         onEdytorAttached: ({ node }) => {
-            const outside = (event) => {
-                const target = event.target;
-                if (!target?.closest?.('[data-edytor-url-paste-host]'))
-                    this.close();
-            };
-            const offPress = onPress(this.edytor, node.ownerDocument, outside, true);
+            const offPress = onPressOutside(this.edytor, node.ownerDocument, '[data-edytor-url-paste-host]', this.close);
             const unmount = mountChrome(this.edytor, this.#menu, this, () => this.open, { name: 'edytor-url-paste-host', zIndex: 50, measure: this.measure }, this.close);
             return () => {
                 offPress();
@@ -136,16 +126,17 @@ export class UrlPasteController extends ChromeList {
             };
         }
     });
-    /** Under the pasted line, kept in the viewport; a gone line closes the menu. @internal */
-    measure = (host) => {
+    /** A gone line closes the menu (measured in the overlay's frame). @internal */
+    measure = () => {
         const { open, edytor } = this;
-        if (!open)
-            return;
-        const block = edytor.idToBlock.get(open.block);
-        if (!block?.isInTree)
+        if (open && !edytor.idToBlock.get(open.block)?.isInTree)
             return () => this.close();
-        const rect = (block.firstText?.node ?? block.node)?.getBoundingClientRect();
-        return rect && placeNear(host, rect, [220, 120], { gap: 4 });
+    };
+    /** Where the menu stands (`ChromeAnchor`): the pasted line, which your `menu` places itself under. */
+    anchor = virtualAnchor(() => this.#line()?.getBoundingClientRect(), () => this.#line());
+    #line = () => {
+        const block = this.open && this.edytor.idToBlock.get(this.open.block);
+        return block ? (block.firstText?.node ?? block.node) : undefined;
     };
 }
 const controllers = new WeakMap();

package/dist/plugins/mention/MentionPlugin.svelte

@@ -1,6 +1,7 @@
 <svelte:options runes />
 
 <script module lang="ts">
+	import { mentionForms } from '../../export/forms.js';
 	import './mention.css';
 	import type { Snippet } from 'svelte';
 	import type {
@@ -11,7 +12,7 @@
 		TriggerContext
 	} from '../../plugins.js';
 	import type { TriggerMenuController } from '../triggers/TriggerController.svelte.js';
-	import { withRulesAndTriggers } from '../triggers/triggers.js';
+	import { placeAtom, withRulesAndTriggers } from '../triggers/triggers.js';
 
 	/** A person the mention menu offers: what your app's directory answers. */
 	export type MentionItem = {
@@ -60,12 +61,6 @@
 		(atom.handle?.edytor.inlineBlocks.get(atom.type) as Partial<MentionKind> | undefined)?.char ??
 		'@';
 
-	const escape = (value: string) =>
-		value.replace(
-			/[&<>"]/g,
-			(c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;' })[c]!
-		);
-
 	/**
 	 * People mentions, as in Notion: `@` opens a menu of the people your app's
 	 * `items(query)` answers; picking one replaces `@query` with a `mention`
@@ -75,30 +70,10 @@
 	export const createMentionPlugin = (options: MentionPluginOptions): Plugin => {
 		const char = options.char ?? '@';
 		const kind = options.kind ?? 'mention';
-		const labelOf = (data: unknown) => {
-			const label = (data as Partial<MentionData> | undefined)?.label;
-			return typeof label === 'string' ? label : '';
-		};
 		const atom: MentionKind = {
 			snippet: mention,
 			char,
-			plain: (data) => char + labelOf(data),
-			html: (data) => {
-				const id = (data as Partial<MentionData> | undefined)?.id;
-				return (
-					`<span data-edytor-mention="${escape(kind)}"` +
-					(typeof id === 'string' ? ` data-mention-id="${escape(id)}"` : '') +
-					`>${escape(char + labelOf(data))}</span>`
-				);
-			},
-			parse: (element) => {
-				// A bare `data-edytor-mention` (an older export) is a `mention`.
-				const own = element.dataset.edytorMention;
-				if (own === undefined || (own || 'mention') !== kind) return undefined;
-				const text = element.textContent ?? '';
-				const label = text.startsWith(char) ? text.slice(char.length) : text;
-				return { id: element.dataset.mentionId ?? '', label };
-			}
+			...mentionForms(kind, char)
 		};
 		return (edytor) =>
 			withRulesAndTriggers(
@@ -113,13 +88,11 @@
 							label: (item: MentionItem) => item.label,
 							key: (item: MentionItem) => item.id,
 							menu: options.menu,
-							onPick: (item: MentionItem, { edytor, block, from, caret }) => {
-								const data: MentionData = { id: item.id, label: item.label };
-								const written =
-									edytor.insertInline(block.id, from, { type: kind, data }).status === 'applied';
-								if (written) caret(from + 1);
-								return written;
-							}
+							onPick: (item: MentionItem, ctx) =>
+								placeAtom(ctx, {
+									type: kind,
+									data: { id: item.id, label: item.label } satisfies MentionData
+								})
 						}
 					]
 				}

package/dist/plugins/page/PagePlugin.svelte

@@ -1,4 +1,5 @@
 <script module lang="ts">
+	import { pageForms } from '../../export/forms.js';
 	import type { Plugin, BlockSnippetPayload } from '../../plugins.js';
 	import { pageKinds } from '../../crdt/semantics.js';
 	import { convertToKind, type KindRow } from '../../kinds.js';
@@ -6,7 +7,6 @@
 	import { getSelectedBlocksInDocumentOrder } from '../../selection/replaceSelection.js';
 	import PageLink from './PageLink.svelte';
 	import {
-		pageHtml,
 		pageIdOf,
 		pageTitleOf,
 		pageOptions as optionsOf,
@@ -63,15 +63,8 @@
 						...pageKinds.page,
 						snippet: page,
 						empty: { content: [], children: [] },
-						html: (block) => pageHtml(block.data, own, labels.untitled),
-						plain: (block) => pageTitleOf(block.data?.title) ?? labels.untitled,
 						// Its own export: a `p[data-edytor-page]` naming the page.
-						parse: (el) => {
-							const pageId = pageIdOf(el.getAttribute('data-edytor-page'));
-							if (el.localName !== 'p' || !pageId) return;
-							const title = pageTitleOf(el.textContent);
-							return { pageId, ...(title && { title }) };
-						}
+						...pageForms(own, labels.untitled).page
 					}
 				},
 				commands: create

package/dist/plugins/page/page.js

@@ -1,4 +1,4 @@
-import { sanitizeLinkHref } from '../richtext/richTextOperations.js';
+import { sanitizeLinkHref } from '../../utils/sanitize.js';
 import { escapeHtml } from '../../clipboard/serializeClipboardFragment.js';
 /** Each view's page options (the first page plugin listed sets them). */
 export const pageOptions = new WeakMap();