edytor 1.0.0 → 3.0.0

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,10 +1,18 @@
 <svelte:options runes />
 
 <script module lang="ts">
+	import { mentionForms } from '../../export/forms.js';
+	import './mention.css';
 	import type { Snippet } from 'svelte';
-	import type { InlineBlockSnippetPayload, Plugin, TriggerContext } from '../../plugins.js';
+	import type {
+		InlineBlockDefinition,
+		InlineBlockSnippetPayload,
+		InlineBlockView,
+		Plugin,
+		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 = {
@@ -18,7 +26,7 @@
 		avatar?: string;
 	};
 
-	/** What a `mention` atom stores. */
+	/** What a mention atom stores (whatever its kind). */
 	export type MentionData = { id: string; label: string };
 
 	export type MentionPluginOptions = {
@@ -27,8 +35,15 @@
 			query: string,
 			ctx: TriggerContext
 		) => readonly MentionItem[] | Promise<readonly MentionItem[]>;
-		/** The character that opens the menu (default `@`). */
+		/** The character that opens the menu, and that the atom shows before its label (default `@`). */
 		char?: string;
+		/**
+		 * The inline kind the atoms are (default `mention`), and the name of the
+		 * trigger menu (`controller.trigger.name`). List the plugin once per kind
+		 * to mention several things (`@` people, `$` tickers as `ticker`); two
+		 * instances of one kind: the first listed defines it.
+		 */
+		kind?: string;
 		/**
 		 * The menu's markup and its words; it renders while `controller.isOpen`,
 		 * at the caret (without it, nothing shows). Keep its ARIA with `{@attach
@@ -38,61 +53,58 @@
 		menu?: Snippet<[TriggerMenuController<MentionItem>]>;
 	};
 
+	/** A mention kind's record: its `char` read by the atom's markup. */
+	type MentionKind = InlineBlockDefinition & { char: string };
+
+	/** The char of the atom's kind (the first listed instance's); `@` with no view (a suggestion). */
+	const charOf = (atom: InlineBlockView) =>
+		(atom.handle?.edytor.inlineBlocks.get(atom.type) as Partial<MentionKind> | undefined)?.char ??
+		'@';
+
 	/**
 	 * People mentions, as in Notion: `@` opens a menu of the people your app's
 	 * `items(query)` answers; picking one replaces `@query` with a `mention`
 	 * atom (`{ id, label }`) and puts the caret after it, in one undo step.
+	 * `char` and `kind` make another one (`$` tickers as `ticker` atoms).
 	 */
-	export const createMentionPlugin =
-		(options: MentionPluginOptions): Plugin =>
-		(edytor) =>
+	export const createMentionPlugin = (options: MentionPluginOptions): Plugin => {
+		const char = options.char ?? '@';
+		const kind = options.kind ?? 'mention';
+		const atom: MentionKind = {
+			snippet: mention,
+			char,
+			...mentionForms(kind, char)
+		};
+		return (edytor) =>
 			withRulesAndTriggers(
 				edytor,
-				{
-					inlineBlocks: {
-						mention: {
-							snippet: mention,
-							plain: (data) => {
-								const label = (data as Partial<MentionData> | undefined)?.label;
-								return typeof label === 'string' && label ? `@${label}` : '@';
-							}
-						}
-					}
-				},
+				{ inlineBlocks: { [kind]: atom } },
 				{
 					triggers: [
 						{
-							char: options.char ?? '@',
+							char,
+							name: kind,
 							items: (query, ctx) => options.items(query, ctx),
-							label: (person: MentionItem) => person.label,
-							key: (person: MentionItem) => person.id,
+							label: (item: MentionItem) => item.label,
+							key: (item: MentionItem) => item.id,
 							menu: options.menu,
-							onPick: (person: MentionItem, { edytor, block, from, caret }) => {
-								const data: MentionData = { id: person.id, label: person.label };
-								const written =
-									edytor.insertInline(block.id, from, { type: 'mention', 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
+								})
 						}
 					]
 				}
 			);
+	};
 </script>
 
 {#snippet mention({ block }: InlineBlockSnippetPayload<Partial<MentionData>>)}
 	<span
 		class="edytor-mention"
 		data-selected={block.selected ? 'true' : undefined}
-		data-edytor-mention
-		data-mention-id={block.data.id}>@{block.data.label ?? ''}</span
+		data-edytor-mention={block.type}
+		data-mention-id={block.data.id}>{charOf(block)}{block.data.label ?? ''}</span
 	>
 {/snippet}
-
-<style>
-	/* One unit, on one line; its look is a theme's. */
-	.edytor-mention {
-		white-space: nowrap;
-	}
-</style>

package/dist/plugins/mention/MentionPlugin.svelte.d.ts

@@ -1,3 +1,4 @@
+import './mention.css';
 import type { Snippet } from 'svelte';
 import type { Plugin, TriggerContext } from '../../plugins.js';
 import type { TriggerMenuController } from '../triggers/TriggerController.svelte.js';
@@ -12,7 +13,7 @@ export type MentionItem = {
     /** An avatar image URL (http, https or data). */
     avatar?: string;
 };
-/** What a `mention` atom stores. */
+/** What a mention atom stores (whatever its kind). */
 export type MentionData = {
     id: string;
     label: string;
@@ -20,8 +21,15 @@ export type MentionData = {
 export type MentionPluginOptions = {
     /** The people matching `query` (the text typed after `@`), at once or as a promise. */
     items: (query: string, ctx: TriggerContext) => readonly MentionItem[] | Promise<readonly MentionItem[]>;
-    /** The character that opens the menu (default `@`). */
+    /** The character that opens the menu, and that the atom shows before its label (default `@`). */
     char?: string;
+    /**
+     * The inline kind the atoms are (default `mention`), and the name of the
+     * trigger menu (`controller.trigger.name`). List the plugin once per kind
+     * to mention several things (`@` people, `$` tickers as `ticker`); two
+     * instances of one kind: the first listed defines it.
+     */
+    kind?: string;
     /**
      * The menu's markup and its words; it renders while `controller.isOpen`,
      * at the caret (without it, nothing shows). Keep its ARIA with `{@attach
@@ -34,6 +42,7 @@ export type MentionPluginOptions = {
  * People mentions, as in Notion: `@` opens a menu of the people your app's
  * `items(query)` answers; picking one replaces `@query` with a `mention`
  * atom (`{ id, label }`) and puts the caret after it, in one undo step.
+ * `char` and `kind` make another one (`$` tickers as `ticker` atoms).
  */
 export declare const createMentionPlugin: (options: MentionPluginOptions) => Plugin;
 declare const MentionPlugin: import("svelte").Component<Record<string, never>, {}, "">;

package/dist/plugins/mention/mention.css

@@ -0,0 +1,6 @@
+/* Loaded by the plugin's module (a component's own <style> is dropped when only
+   its module is used: the plugin factory, never the component). */
+/* One unit, on one line; its look is a theme's. */
+.edytor-mention {
+	white-space: nowrap;
+}

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();

package/dist/plugins/pageLink/PageLinkPlugin.svelte

@@ -1,10 +1,19 @@
 <svelte:options runes />
 
 <script module lang="ts">
+	import { pageLinkForms } from '../../export/forms.js';
+	import './pageLink.css';
 	import type { Snippet } from 'svelte';
-	import type { InlineBlockSnippetPayload, Plugin, TriggerContext } from '../../plugins.js';
+	import type {
+		InlineBlockSnippetPayload,
+		Plugin,
+		PluginOperations,
+		TriggerContext
+	} from '../../plugins.js';
+	import type { Edytor } from '../../edytor.svelte.js';
+	import type { TextAnchor } from '../../selection/selection.svelte.js';
 	import type { TriggerMenuController } from '../triggers/TriggerController.svelte.js';
-	import { withRulesAndTriggers } from '../triggers/triggers.js';
+	import { placeAtom, withRulesAndTriggers } from '../triggers/triggers.js';
 	import { pageLinkEnglish, labelsOf } from '../../labels.js';
 	import { sanitizeLinkHref } from '../richtext/richTextOperations.js';
 
@@ -31,6 +40,18 @@
 		) => readonly PageLinkItem[] | Promise<readonly PageLinkItem[]>;
 		/** A page's URL when the search answers none (`/pages/<id>`, say). */
 		href?: (page: PageLinkItem) => string | undefined;
+		/**
+		 * The page a pasted text names (your app's URL for it, `page:roadmap`…),
+		 * at once or as a promise; `null` when it names none. Asked for a plain
+		 * text paste at a caret that is one item (trimmed, one line): a page
+		 * turns the pasted text into a `pageLink` atom, an undo step of its own
+		 * after the paste, so undo gives the text back. A promise lets the paste
+		 * land as it would without this option and swaps it when it answers, if
+		 * the text is still there.
+		 */
+		fromPaste?: (
+			text: string
+		) => PageLinkItem | null | undefined | Promise<PageLinkItem | null | undefined>;
 		/** The text that opens the menu (default `[[`). */
 		char?: string;
 		/**
@@ -42,11 +63,107 @@
 		menu?: Snippet<[TriggerMenuController<PageLinkItem>]>;
 	};
 
+	/** The atom for `page`, its href sanitized. */
+	const atomOf = (page: PageLinkItem, options: PageLinkPluginOptions) => {
+		const href = sanitizeLinkHref(page.href ?? options.href?.(page)) ?? undefined;
+		const data: PageLinkData = {
+			id: page.id,
+			title: page.title,
+			...(href ? { href } : {}),
+			...(page.icon ? { icon: page.icon } : {})
+		};
+		return { type: 'pageLink', data };
+	};
+
+	const isPromise = <T,>(value: unknown): value is Promise<T> =>
+		typeof (value as Promise<T> | null)?.then === 'function';
+
+	/**
+	 * Swap the pasted `item`, where the paste put it (right after `start`,
+	 * past leading spaces), for `page`'s atom: one `autolink` step, so undo
+	 * gives the text back. Nothing when the view is readonly or the text is
+	 * no longer there; the caret follows the atom when it was at the text's end.
+	 */
+	const swapPasted = (
+		edytor: Edytor,
+		start: TextAnchor,
+		item: string,
+		page: PageLinkItem,
+		options: PageLinkPluginOptions
+	) => {
+		if (edytor.readonly) return;
+		const at = edytor.selection.resolveTextAnchor(start);
+		if (!at) return;
+		const { text } = at;
+		const content = text.stringContent;
+		let from = at.offset;
+		while (from < content.length && /\s/.test(content[from])) from++;
+		if (content.slice(from, from + item.length) !== item) return;
+		const block = text.parent;
+		const offset = text.segStart + from;
+		const caret = edytor.selection.caret;
+		const follows = caret?.block === block && caret.offset === offset + item.length;
+		edytor.dispatcher.run('autolink', () => {
+			if (edytor.deleteText(block.id, offset, item.length).status !== 'applied') return;
+			edytor.insertInline(block.id, offset, atomOf(page, options));
+			if (follows) edytor.dispatcher.caret({ block, offset: offset + 1 });
+		});
+	};
+
+	/**
+	 * The paste hook of `fromPaste` (it runs before the other plugins'
+	 * `onPaste`, `pasteFirst`): a plain text paste at a caret in a text,
+	 * outside islands and voids, that is one item. A page answered at once
+	 * claims the paste (the text, then the swap); a promise claims nothing
+	 * (the rich text link, the URL menu or the plain paste take it) and swaps
+	 * what landed when it answers a page.
+	 */
+	const pasteHook = (edytor: Edytor, options: PageLinkPluginOptions): PluginOperations['onPaste'] =>
+		options.fromPaste &&
+		(({ e, prevent, at }) => {
+			const { fromPaste } = options;
+			if (!fromPaste || at || edytor.readonly) return;
+			const plain = e.clipboardData?.getData('text/plain') ?? '';
+			const item = plain.trim();
+			if (!item || /[\r\n]/.test(item)) return;
+			const { value, projection } = edytor.selection;
+			if (value.kind !== 'text' || !projection.isCollapsed) return;
+			if (projection.islandRoot !== null || projection.voidRoot !== null) return;
+			const { startText: text, yStart } = edytor.selection.textRange();
+			if (!text) return;
+			const start = edytor.selection.createTextAnchor(text, yStart, 'left');
+			if (!start) return;
+			let answer: ReturnType<typeof fromPaste>;
+			try {
+				answer = fromPaste(item);
+			} catch {
+				return;
+			}
+			if (isPromise<PageLinkItem | null | undefined>(answer)) {
+				answer.then(
+					(page) => page && swapPasted(edytor, start, item, page, options),
+					() => {}
+				);
+				return;
+			}
+			const page = answer;
+			if (!page) return;
+			prevent(() => {
+				edytor.dispatcher.run('insertFromPaste', () => {
+					edytor.insertText(text.parent.id, text.segStart + yStart, item);
+					edytor.dispatcher.caretIn(text, yStart + item.length);
+				});
+				if (edytor.dispatcher.last?.status === 'applied')
+					swapPasted(edytor, start, item, page, options);
+			});
+		});
+
 	/**
 	 * Links to your app's pages, as Notion's `[[`: it opens a menu of the pages
 	 * your app's `search(query)` answers; picking one replaces `[[query` with
 	 * a `pageLink` atom (`{ id, title, href, icon }`), an `<a>` to the page,
-	 * and puts the caret after it, in one undo step.
+	 * and puts the caret after it, in one undo step. With `fromPaste`, a
+	 * pasted text your app recognizes becomes a page link too.
 	 */
 	export const createPageLinkPlugin =
 		(options: PageLinkPluginOptions): Plugin =>
@@ -54,13 +171,13 @@
 			withRulesAndTriggers(
 				edytor,
 				{
+					...(edytor && options.fromPaste
+						? { onPaste: pasteHook(edytor, options), pasteFirst: true }
+						: {}),
 					inlineBlocks: {
 						pageLink: {
-							snippet: pageLink,
-							plain: (data) => {
-								const title = (data as Partial<PageLinkData> | undefined)?.title;
-								return typeof title === 'string' ? title : '';
-							}
+							...pageLinkForms(),
+							snippet: pageLink
 						}
 					}
 				},
@@ -72,19 +189,7 @@
 							label: (page: PageLinkItem) => page.title,
 							key: (page: PageLinkItem) => page.id,
 							menu: options.menu,
-							onPick: (page: PageLinkItem, { edytor, block, from, caret }) => {
-								const href = sanitizeLinkHref(page.href ?? options.href?.(page)) ?? undefined;
-								const data: PageLinkData = {
-									id: page.id,
-									title: page.title,
-									...(href ? { href } : {}),
-									...(page.icon ? { icon: page.icon } : {})
-								};
-								const atom = { type: 'pageLink', data };
-								const written = edytor.insertInline(block.id, from, atom).status === 'applied';
-								if (written) caret(from + 1);
-								return written;
-							}
+							onPick: (page: PageLinkItem, ctx) => placeAtom(ctx, atomOf(page, options))
 						}
 					]
 				}
@@ -104,10 +209,3 @@
 		></a
 	>
 {/snippet}
-
-<style>
-	/* One unit, on one line; its look is a theme's. */
-	.edytor-page-link {
-		white-space: nowrap;
-	}
-</style>

package/dist/plugins/pageLink/PageLinkPlugin.svelte.d.ts

@@ -1,3 +1,4 @@
+import './pageLink.css';
 import type { Snippet } from 'svelte';
 import type { Plugin, TriggerContext } from '../../plugins.js';
 import type { TriggerMenuController } from '../triggers/TriggerController.svelte.js';
@@ -24,6 +25,16 @@ export type PageLinkPluginOptions = {
     search: (query: string, ctx: TriggerContext) => readonly PageLinkItem[] | Promise<readonly PageLinkItem[]>;
     /** A page's URL when the search answers none (`/pages/<id>`, say). */
     href?: (page: PageLinkItem) => string | undefined;
+    /**
+     * The page a pasted text names (your app's URL for it, `page:roadmap`…),
+     * at once or as a promise; `null` when it names none. Asked for a plain
+     * text paste at a caret that is one item (trimmed, one line): a page
+     * turns the pasted text into a `pageLink` atom, an undo step of its own
+     * after the paste, so undo gives the text back. A promise lets the paste
+     * land as it would without this option and swaps it when it answers, if
+     * the text is still there.
+     */
+    fromPaste?: (text: string) => PageLinkItem | null | undefined | Promise<PageLinkItem | null | undefined>;
     /** The text that opens the menu (default `[[`). */
     char?: string;
     /**
@@ -38,7 +49,8 @@ export type PageLinkPluginOptions = {
  * Links to your app's pages, as Notion's `[[`: it opens a menu of the pages
  * your app's `search(query)` answers; picking one replaces `[[query` with
  * a `pageLink` atom (`{ id, title, href, icon }`), an `<a>` to the page,
- * and puts the caret after it, in one undo step.
+ * and puts the caret after it, in one undo step. With `fromPaste`, a
+ * pasted text your app recognizes becomes a page link too.
  */
 export declare const createPageLinkPlugin: (options: PageLinkPluginOptions) => Plugin;
 declare const PageLinkPlugin: import("svelte").Component<Record<string, never>, {}, "">;

package/dist/plugins/pageLink/pageLink.css

@@ -0,0 +1,6 @@
+/* Loaded by the plugin's module (a component's own <style> is dropped when only
+   its module is used: the plugin factory, never the component). */
+/* One unit, on one line; its look is a theme's. */
+.edytor-page-link {
+	white-space: nowrap;
+}