edytor 1.0.0 → 2.0.0

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

@@ -1,6 +1,7 @@
 import type { Snippet } from 'svelte';
 import type { Plugin } from '../../plugins.js';
 import { type FileRowPayload } from './media.js';
+import type { Uploader } from '../uploads.svelte.js';
 export type { FileRowPayload };
 export type FilePluginOptions = {
     /**
@@ -9,6 +10,14 @@ export type FilePluginOptions = {
      * downloads the file. The first file plugin listed in a view gives its row.
      */
     row?: Snippet<[FileRowPayload]>;
+    /**
+     * Upload a file and answer its URL: an empty file block's Upload, and
+     * the pasted and dropped files no other kind takes, each placed as a
+     * file block at once (one undo step), its row showing the file's name,
+     * size and progress, then filled with the URL this answers. Without
+     * it, files are only linked.
+     */
+    upload?: Uploader;
 };
 /**
  * Notion's file block: an attachment, uploaded through `upload` (or

package/dist/plugins/media/SourceBlock.svelte

@@ -3,6 +3,9 @@
 	import EmptySlot from './EmptySlot.svelte';
 	import Control from '../Control.svelte';
 	import { labelsOf, mediaEnglish } from '../../labels.js';
+	import { emptyHosts } from './EmptySlot.svelte';
+	import UploadPreview from './UploadPreview.svelte';
+	import { fileUploads, uploadHooks, type Uploader } from '../uploads.svelte.js';
 	import {
 		claimed,
 		escapeHtml,
@@ -48,8 +51,8 @@
 	 * attachment; Notion's): a media kind (`mediaPlugin`) drawn by this
 	 * snippet, a link or an uploaded file stored as one data write (a file's
 	 * whole data, its source, name and size; a video's or audio track's
-	 * `src`), and with an `upload`, the pasted and dropped files it takes
-	 * (`media.files`, its first listing in a view). A video or an audio track
+	 * `src`), and with an `upload` (its uploader), the pasted, dropped and
+	 * picked files it takes (`media.files`). A video or an audio track
 	 * exports as its tag in a `figure` and imports from one (bare, or in a
 	 * `figure`) with a safe `src` or `source`; the file kind brings its own
 	 * (`record`), and its `row` markup (`own`).
@@ -69,11 +72,13 @@
 				return src ? { src } : undefined;
 			}
 		},
-		own: Pick<MediaView, 'row'> = {}
+		own: Pick<MediaView, 'row'> = {},
+		upload?: Uploader
 	): Plugin =>
-		mediaPlugin(kind, keywords, () => {
+		mediaPlugin(kind, keywords, (edytor) => {
 			return {
 				...own,
+				hooks: uploadHooks(edytor, upload),
 				store: (block, value, file) => {
 					const data = sourceData(kind, value, file);
 					if (!data) return 'invalid';
@@ -83,13 +88,16 @@
 				},
 				record: {
 					snippet: source,
-					// Its files: with the uploads plugin, an Upload and pasted or dropped files.
-					upload: {
-						accepts: ACCEPTS[kind],
-						fallback: kind === 'file',
-						data: (file, answer) => sourceData(kind, answer, file),
-						filled: (data) => safeMediaSrc(data.src) !== null
-					},
+					// Its files, with an `upload`: an Upload and pasted or dropped files.
+					...(upload && {
+						upload: {
+							send: upload,
+							accepts: ACCEPTS[kind],
+							fallback: kind === 'file',
+							data: (file: File, answer: string) => sourceData(kind, answer, file),
+							filled: (data: Record<string, unknown>) => safeMediaSrc(data.src) !== null
+						}
+					}),
 					...record
 				}
 			};
@@ -103,6 +111,8 @@
 -->
 {#snippet source({ block, content }: BlockSnippetPayload<Record<string, unknown>>)}
 	{@const src = safeMediaSrc(block.data.src)}
+	{@const pending =
+		block.handle && !src ? fileUploads(block.handle.edytor)?.of(block.id) : undefined}
 	{#if src && block.type === 'file'}
 		{@const name =
 			typeof block.data.name === 'string' && block.data.name ? block.data.name : fileNameOf(src)}
@@ -120,10 +130,34 @@
 						size === undefined
 							? ''
 							: labelsOf(block.handle?.edytor, 'media', mediaEnglish).fileSize(size),
+					uploading: false,
+					progress: null,
 					link: mediaLink({ draggable: 'false', download: name })
 				}}
 			/>
 		</div>
+	{:else if !src && pending?.status === 'uploading' && !emptyHosts.has(block.handle!.edytor)}
+		<!-- An upload with no empty markup to draw it: the file's name and size at once, its progress. -->
+		<div use:block.void data-edytor-media-empty>
+			{#if block.type === 'file' && pending.preview}
+				<Control
+					own={rowOf}
+					{initial}
+					payload={{
+						block: block.handle,
+						src: pending.preview,
+						name: pending.name,
+						size: pending.size,
+						sizeLabel: labelsOf(block.handle?.edytor, 'media', mediaEnglish).fileSize(pending.size),
+						uploading: true,
+						progress: pending.progress,
+						link: mediaLink({ draggable: 'false', download: pending.name })
+					}}
+				/>
+			{:else}
+				<UploadPreview upload={pending} />
+			{/if}
+		</div>
 	{:else if src && block.type === 'video'}
 		<div use:block.void data-edytor-video>
 			<!-- svelte-ignore a11y_media_has_caption -->
@@ -155,10 +189,12 @@
 {/snippet}
 
 <!-- A file: its name and size, a link downloading it. -->
-{#snippet initial({ src, name, sizeLabel, link }: FileRowPayload)}
+{#snippet initial({ src, name, sizeLabel, link, uploading, progress }: FileRowPayload)}
 	<a href={src} target="_blank" rel={LINK_REL} draggable="false" download={name} {@attach link}>
 		<span aria-hidden="true">📎</span>
 		<span data-edytor-file-name>{name}</span>
 		{#if sizeLabel}<span data-edytor-file-size>{sizeLabel}</span>{/if}
 	</a>
+	{#if uploading}<progress data-edytor-file-progress value={progress ?? undefined} max="1"
+		></progress>{/if}
 {/snippet}

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

@@ -1,4 +1,5 @@
 import type { BlockDefinition, Plugin } from '../../plugins.js';
+import { type Uploader } from '../uploads.svelte.js';
 import { type MediaView } from './media.js';
 type SourceKind = 'video' | 'audio' | 'file';
 /**
@@ -6,13 +7,13 @@ type SourceKind = 'video' | 'audio' | 'file';
  * attachment; Notion's): a media kind (`mediaPlugin`) drawn by this
  * snippet, a link or an uploaded file stored as one data write (a file's
  * whole data, its source, name and size; a video's or audio track's
- * `src`), and with an `upload`, the pasted and dropped files it takes
- * (`media.files`, its first listing in a view). A video or an audio track
+ * `src`), and with an `upload` (its uploader), the pasted, dropped and
+ * picked files it takes (`media.files`). A video or an audio track
  * exports as its tag in a `figure` and imports from one (bare, or in a
  * `figure`) with a safe `src` or `source`; the file kind brings its own
  * (`record`), and its `row` markup (`own`).
  */
-export declare const sourcePlugin: (kind: SourceKind, keywords: string[], record?: Partial<BlockDefinition>, own?: Pick<MediaView, "row">) => Plugin;
+export declare const sourcePlugin: (kind: SourceKind, keywords: string[], record?: Partial<BlockDefinition>, own?: Pick<MediaView, "row">, upload?: Uploader) => Plugin;
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;

package/dist/plugins/media/UploadPreview.svelte

@@ -0,0 +1,32 @@
+<script module lang="ts">
+	import './upload.css';
+</script>
+
+<script lang="ts">
+	import { getContext } from 'svelte';
+	import type { Edytor } from '../../edytor.svelte.js';
+	import type { FileUpload } from '../uploads.svelte.js';
+	import { labelsOf, mediaEnglish } from '../../labels.js';
+
+	/**
+	 * A file uploading, the plugin's own markup when the view has no empty
+	 * markup to draw it: an image at once from its object URL (this view's
+	 * only, never stored) with the progress over it; another file's name and
+	 * size, then the progress (indeterminate until `upload` reports one).
+	 */
+	let {
+		upload,
+		image = false
+	}: { upload: Extract<FileUpload, { status: 'uploading' }>; image?: boolean } = $props();
+	const labels = labelsOf(getContext<Edytor>('edytor'), 'media', mediaEnglish);
+</script>
+
+<div data-edytor-upload data-edytor-upload-image={image ? '' : undefined} role="status">
+	{#if image && upload.preview}
+		<img src={upload.preview} alt={upload.name} draggable="false" />
+	{:else}
+		<span data-edytor-file-name>{upload.name}</span>
+		<span data-edytor-file-size>{labels.fileSize(upload.size)}</span>
+	{/if}
+	<progress value={upload.progress ?? undefined} max="1" aria-label={labels.uploading}></progress>
+</div>

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

@@ -0,0 +1,11 @@
+import './upload.css';
+import type { FileUpload } from '../uploads.svelte.js';
+type $$ComponentProps = {
+    upload: Extract<FileUpload, {
+        status: 'uploading';
+    }>;
+    image?: boolean;
+};
+declare const UploadPreview: import("svelte").Component<$$ComponentProps, {}, "">;
+type UploadPreview = ReturnType<typeof UploadPreview>;
+export default UploadPreview;

package/dist/plugins/media/VideoPlugin.svelte

@@ -1,6 +1,17 @@
 <script module lang="ts">
 	import type { Plugin } from '../../plugins.js';
 	import { sourcePlugin } from './SourceBlock.svelte';
+	import type { Uploader } from '../uploads.svelte.js';
+
+	export type VideoPluginOptions = {
+		/**
+		 * Upload a video file and answer its URL: an empty block's Upload, and
+		 * the pasted and dropped video files, each placed as a block at once
+		 * (one undo step), showing its name and progress, then filled with the
+		 * URL this answers. Without it, videos are only linked.
+		 */
+		upload?: Uploader;
+	};
 
 	/**
 	 * Notion's video block: a video file (an `http(s)` link, or an upload
@@ -8,5 +19,6 @@
 	 * A YouTube or Vimeo link is an embed (`createEmbedPlugin()`). Void: its only
 	 * text is the caption.
 	 */
-	export const createVideoPlugin = (): Plugin => sourcePlugin('video', ['movie', 'mp4', 'clip']);
+	export const createVideoPlugin = ({ upload }: VideoPluginOptions = {}): Plugin =>
+		sourcePlugin('video', ['movie', 'mp4', 'clip'], undefined, {}, upload);
 </script>

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

@@ -1,11 +1,21 @@
 import type { Plugin } from '../../plugins.js';
+import type { Uploader } from '../uploads.svelte.js';
+export type VideoPluginOptions = {
+    /**
+     * Upload a video file and answer its URL: an empty block's Upload, and
+     * the pasted and dropped video files, each placed as a block at once
+     * (one undo step), showing its name and progress, then filled with the
+     * URL this answers. Without it, videos are only linked.
+     */
+    upload?: Uploader;
+};
 /**
  * Notion's video block: a video file (an `http(s)` link, or an upload
  * through `upload`) in the browser's player, with an editable caption.
  * A YouTube or Vimeo link is an embed (`createEmbedPlugin()`). Void: its only
  * text is the caption.
  */
-export declare const createVideoPlugin: () => Plugin;
+export declare const createVideoPlugin: ({ upload }?: VideoPluginOptions) => Plugin;
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;

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

@@ -52,16 +52,25 @@ export declare class MediaEmptyController {
      * block). Show a passive placeholder then.
      */
     get readonly(): boolean;
-    /** The view lists the uploads plugin and the kind takes files: offer Upload. */
+    /** The kind's plugin was given an `upload`: offer Upload. */
     get canUpload(): boolean;
     /** The upload of a pasted or dropped file into this block, if any (its `status`, `progress`, `preview`). */
     get pending(): FileUpload | undefined;
+    /**
+     * The file uploading into this block, shown at once: its object URL
+     * (this view's only, never stored; revoked once the upload ends), else `null`.
+     */
+    get preview(): string | null;
+    /** The share of the upload sent, `0` to `1`; `null` before a report, or with no upload. */
+    get progress(): number | null;
     /** Embed `value` (default the `draft`): the block takes the link, or `failed` says why not. */
     embed: (value?: string) => void;
     /**
-     * Upload `file` with the view's uploader (`createUploadsPlugin`) and store the URL it answers,
-     * only on the block as it was picked from: still in the tree, of its kind
-     * and empty (a peer may have set a source, or deleted it, meanwhile).
+     * Upload `file` with its kind's uploader (its plugin's `upload`), the
+     * block showing it meanwhile (`pending`, `preview`, `progress`), and
+     * store the URL it answers, only on the block as it was picked from:
+     * still in the tree, of its kind and empty (a peer may have set a
+     * source, or deleted it, meanwhile).
      */
     upload: (picked: File) => Promise<void>;
     /** The link field (`{@attach empty.field}`): Enter embeds its `draft`. */

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

@@ -54,7 +54,7 @@ export class MediaEmptyController {
     get readonly() {
         return !this.block || this.block.edytor.readonly;
     }
-    /** The view lists the uploads plugin and the kind takes files: offer Upload. */
+    /** The kind's plugin was given an `upload`: offer Upload. */
     get canUpload() {
         const { block } = this;
         return Boolean(block && fileUploads(block.edytor) && block.definition.upload);
@@ -64,6 +64,19 @@ export class MediaEmptyController {
         const { block } = this;
         return block ? fileUploads(block.edytor)?.of(block.id) : undefined;
     }
+    /**
+     * The file uploading into this block, shown at once: its object URL
+     * (this view's only, never stored; revoked once the upload ends), else `null`.
+     */
+    get preview() {
+        const { pending } = this;
+        return pending?.status === 'uploading' ? pending.preview : null;
+    }
+    /** The share of the upload sent, `0` to `1`; `null` before a report, or with no upload. */
+    get progress() {
+        const { pending } = this;
+        return pending?.status === 'uploading' ? pending.progress : null;
+    }
     /** Store `value` on the block: why it did not take it, or `null`. */
     #store = (value, file) => this.block && this.view ? this.view.store(this.block, value, file) : 'invalid';
     /** Embed `value` (default the `draft`): the block takes the link, or `failed` says why not. */
@@ -73,30 +86,28 @@ export class MediaEmptyController {
             fileUploads(this.block.edytor)?.clear(this.block.id);
     };
     /**
-     * Upload `file` with the view's uploader (`createUploadsPlugin`) and store the URL it answers,
-     * only on the block as it was picked from: still in the tree, of its kind
-     * and empty (a peer may have set a source, or deleted it, meanwhile).
+     * Upload `file` with its kind's uploader (its plugin's `upload`), the
+     * block showing it meanwhile (`pending`, `preview`, `progress`), and
+     * store the URL it answers, only on the block as it was picked from:
+     * still in the tree, of its kind and empty (a peer may have set a
+     * source, or deleted it, meanwhile).
      */
     upload = async (picked) => {
         const { block } = this;
-        const upload = this.canUpload && fileUploads(block?.edytor)?.upload;
-        if (!upload || !block || block.edytor.readonly)
+        const uploads = this.canUpload && fileUploads(block?.edytor);
+        if (!uploads || !block || block.edytor.readonly)
             return;
         const { edytor, id, type } = block;
-        let src;
-        try {
-            src = await upload(picked, { progress: () => { } });
-        }
-        catch {
+        const stored = await uploads.pick(id, picked, (src) => {
+            const live = edytor.idToBlock.get(id);
+            if (!live?.isInTree || live.type !== type || edytor.readonly)
+                return;
+            if (edytor.facade.blockDataOf(id)?.src !== undefined)
+                return;
+            this.failed = this.#store(src, picked);
+        });
+        if (!stored)
             this.failed = 'upload';
-            return;
-        }
-        const live = edytor.idToBlock.get(id);
-        if (!live?.isInTree || live.type !== type || edytor.readonly)
-            return;
-        if (edytor.facade.blockDataOf(id)?.src !== undefined)
-            return;
-        this.failed = this.#store(src, picked);
     };
     /** The link field (`{@attach empty.field}`): Enter embeds its `draft`. */
     field = (node) => {

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

@@ -49,6 +49,13 @@ export type FileRowPayload = {
     size: number | undefined;
     /** That size in the view's words (`media.fileSize`), `''` without one. */
     sizeLabel: string;
+    /**
+     * The file is uploading (then `src` is its object URL, this view's only,
+     * never stored): the row shows it at once, with `progress`.
+     */
+    uploading: boolean;
+    /** The share sent while it uploads, `0` to `1`; `null` before a report or once stored. */
+    progress: number | null;
     /**
      * The row's link (`<a href={row.src} {@attach row.link}>`): it downloads
      * the file under its name, in a new tab without the opener, never dragged

package/dist/plugins/media/upload.css

@@ -0,0 +1,23 @@
+/* Loaded by the preview's module: a file uploading, drawn by the plugin when
+   the view has no empty markup (`createMediaEmptyPlugin`). */
+[data-edytor-upload] {
+	display: flex;
+	position: relative;
+	flex-direction: column;
+	gap: 6px;
+}
+[data-edytor-upload] img {
+	display: block;
+	max-width: 100%;
+}
+[data-edytor-upload] progress {
+	width: 100%;
+	height: 4px;
+}
+[data-edytor-upload-image] progress {
+	position: absolute;
+	right: 8px;
+	bottom: 8px;
+	left: 8px;
+	width: auto;
+}

package/dist/plugins/mention/MentionPlugin.svelte

@@ -1,8 +1,15 @@
 <svelte:options runes />
 
 <script module lang="ts">
+	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';
 
@@ -18,7 +25,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 +34,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,40 +52,71 @@
 		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 ??
+		'@';
+
+	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`
 	 * 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 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 };
+			}
+		};
+		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 };
+							onPick: (item: MentionItem, { edytor, block, from, caret }) => {
+								const data: MentionData = { id: item.id, label: item.label };
 								const written =
-									edytor.insertInline(block.id, from, { type: 'mention', data }).status ===
-									'applied';
+									edytor.insertInline(block.id, from, { type: kind, data }).status === 'applied';
 								if (written) caret(from + 1);
 								return written;
 							}
@@ -79,20 +124,14 @@
 					]
 				}
 			);
+	};
 </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;
+}