edytor 1.0.0 → 3.0.0

package/dist/plugins/richtext/RichTextPlugin.svelte

@@ -1,4 +1,5 @@
 <script module lang="ts">
+	import './richtext.css';
 	import type { Plugin, BlockSnippetPayload, KindPreset, PlaceholderView } from '../../plugins.js';
 	import { branded } from '../brand.js';
 	import type { Edytor } from '../../edytor.svelte.js';
@@ -10,28 +11,47 @@
 		openLink,
 		pastedLink,
 		richTextOperations,
-		sanitizeLinkHref,
-		sanitizeCssColorValue,
 		typedLink,
 		type RichTextMark
 	} from './richTextOperations.js';
 	import { marksForInsertion } from '../../session/editing/text.js';
 	import { firstUriListEntry } from '../../events/dataTransferPayload.js';
 	import { flipToggles, shownSelectionBlocks } from '../../selection/replaceSelection.js';
-	import { mediaKinds, richTextKinds, richTextMarks } from '../../crdt/semantics.js';
+	import { mediaKinds, richTextKinds } from '../../crdt/semantics.js';
 	import { richTextEnglish, keywordsOf, labelsOf, type RichTextLabels } from '../../labels.js';
 	import TodoCheckbox from './TodoCheckbox.svelte';
 	import EmptyBody from './EmptyBody.svelte';
 	import CalloutIcon from './CalloutIcon.svelte';
 	import RichTextControl from './RichTextControl.svelte';
-	import {
-		DEFAULT_CALLOUT_ICON,
-		calloutHtml,
-		calloutIcons,
-		calloutPickers,
-		iconOf
-	} from './callouts.js';
+	import { DEFAULT_CALLOUT_ICON, calloutIcons, calloutPickers, iconOf } from './callouts.js';
 	import { listen } from '../../utils/listen.js';
+	import {
+		HEADING_LEVELS,
+		calloutRead,
+		calloutWrite,
+		dividerRead,
+		dividerWrite,
+		headingLevel,
+		headingRead,
+		headingWrite,
+		itemRead,
+		itemWrite,
+		numberedRead,
+		orderedRead,
+		orderedWrite,
+		quoteRead,
+		quoteWrite,
+		richTextMarkForms,
+		todoWrite,
+		toggleHeadingRead,
+		toggleHeadingWrite,
+		toggleRead,
+		unorderedRead,
+		unorderedWrite
+	} from '../../export/forms.js';
+	import { onLastLine } from '../../session/navigation.js';
+	import { bodyShows } from '../../selection/visibility.js';
+	import { openBody } from './body.js';
 	import type { Snippet } from 'svelte';
 	import {
 		richTextControls,
@@ -54,62 +74,10 @@
 		formatSubscript: 'subscript'
 	} as const;
 
-	const isNativeFormatInputType = (
-		inputType: string
-	): inputType is keyof typeof nativeFormatMarks => inputType in nativeFormatMarks;
-
-	/** A thematic break's clipboard forms. */
-	const rule = { html: () => '<hr>', plain: () => '---' };
 	/** A native disclosure: the browser owns `open` (declared view state). */
-	const disclosure = { element: 'details', viewState: ['open'] };
+	const disclosure = { viewState: ['open'] };
 	/** The kinds drawn as a disclosure: a toggle this view creates opens (`body.open`). */
 	const DISCLOSURES = new Set(['toggle', 'toggle-heading']);
-	/**
-	 * A list's elements without list semantics (`role="none"`): a list's items
-	 * are sibling blocks, never the only children of one `ul` or `ol`, so an
-	 * `li` would be an orphan list item to assistive technology (WCAG 1.3.1);
-	 * the tags stay for styles and the HTML export.
-	 */
-	const unlisted = (tag: 'li' | 'ul' | 'ol') => ({ tag, attributes: { role: 'none' } });
-	/**
-	 * Notion's three heading levels: a missing level is h1, any other (a
-	 * stored `h4`–`h6`, as HTML import reads them) h3.
-	 */
-	const headingLevel = (level: unknown) =>
-		level === 'h1' || level === 'h2' || level === 'h3' ? level : level === undefined ? 'h1' : 'h3';
-	/** An unsafe scheme drops the href (and its target): an inert anchor still carries the text. */
-	const linkAttributes = (mark: { href?: unknown; target?: string }) => {
-		const href = sanitizeLinkHref(mark?.href) ?? undefined;
-		return { href, target: href && mark.target };
-	};
-	/** A hostile color value (a `;` payload would inject declarations) drops the style. */
-	const styled = (property: string) => (value: unknown) => {
-		const safe = sanitizeCssColorValue(value);
-		return { style: safe ? `${property}: ${safe};` : undefined };
-	};
-	/**
-	 * HTML import: a pasted color, sanitized, unless it is the page's
-	 * default (Google Docs writes black text and transparent backgrounds on
-	 * every span: they are no mark, and a black mark is unreadable in dark mode).
-	 */
-	const colorOf = (value: string, none: RegExp) =>
-		none.test(value.replace(/\s+/g, '').toLowerCase())
-			? undefined
-			: (sanitizeCssColorValue(value) ?? undefined);
-	const INHERITED = 'initial|inherit|unset|revert|currentcolor';
-	const NO_COLOR = new RegExp(
-		`^(${INHERITED}|black|windowtext|#000|#000000|rgba?\\(0,0,0(,1)?\\))$`
-	);
-	const NO_HIGHLIGHT = new RegExp(
-		`^(${INHERITED}|transparent|rgba\\(\\d+,\\d+,\\d+,0\\)|white|#fff|#ffffff|rgba?\\(255,255,255(,1)?\\))$`
-	);
-	/** HTML import: a tag alias (unless its own style says otherwise) or a style (Google Docs). */
-	const alias =
-		(tags: RegExp, property: 'fontWeight' | 'fontStyle' | 'textDecoration', value: RegExp) =>
-		(el: HTMLElement) =>
-			(tags.test(el.localName) && !el.style[property]) ||
-			value.test(el.style[property]) ||
-			undefined;
 
 	/**
 	 * The kinds whose empty text names them, by placeholder (a callout's
@@ -216,6 +184,7 @@
 		{ callout: calloutOptions, checkbox, calloutIcon, emptyBody }: RichTextPluginOptions
 	): ReturnType<Plugin> => {
 		const { kinds, marks: words } = labels;
+		const marks = richTextMarkForms;
 		/** A new callout's icon. */
 		const icon = calloutOptions?.icon ?? DEFAULT_CALLOUT_ICON;
 		/** The block this view is retyping into a disclosure (`body.open`), until it applied. */
@@ -262,6 +231,16 @@
 				'mod+shift+s': setMarkAndSelect('strike'),
 				'mod+shift+x': setMarkAndSelect('strike'),
 				'mod+shift+h': setMarkAndSelect('color', 'red'),
+				// ArrowDown on the last line of a header whose body shows and is empty
+				// (an open toggle, a callout) goes into that body, as its hint's click
+				// does (`body.down`): one command, one undo step. Elsewhere the key
+				// moves as usual.
+				arrowdown: ({ prevent }) => {
+					const header = onLastLine(edytor);
+					if (!header || header.hasChildren || !bodyShows(header)) return;
+					if (!edytor.dispatcher.permits()) return;
+					prevent(() => void openBody(header));
+				},
 				// Mod+Enter checks or unchecks each shown to-do it is in (Notion): the
 				// selected blocks', else the caret's; the toggles among them open or
 				// close as with the built-in binding, in the same key.
@@ -303,7 +282,7 @@
 					const end = yStart + href.length;
 					edytor.dispatcher.run('insertFromPaste', () => {
 						edytor.insertText(text.parent.id, text.segStart + yStart, href);
-						edytor.dispatcher.caret(text, end);
+						edytor.dispatcher.caretIn(text, end);
 					});
 					if (text.stringContent.slice(yStart, end) === href)
 						operations.linkText(text, yStart, end, href);
@@ -346,7 +325,7 @@
 					} finally {
 						autolinking = false;
 					}
-					edytor.dispatcher.caret(text, yStart + 1);
+					edytor.dispatcher.caretIn(text, yStart + 1);
 					operations.linkText(text, found.start, end, found.href);
 				});
 			},
@@ -378,8 +357,8 @@
 			},
 			onBeforeInput: ({ e, prevent }) => {
 				const { inputType, data } = e;
-				if (isNativeFormatInputType(inputType)) {
-					const mark = nativeFormatMarks[inputType];
+				if (inputType in nativeFormatMarks) {
+					const mark = nativeFormatMarks[inputType as keyof typeof nativeFormatMarks];
 					prevent(() => operations.setMarkAtRange(mark));
 				} else if (inputType === 'formatRemove') {
 					prevent(() => operations.removeAllMarksAtRange());
@@ -404,54 +383,17 @@
 			},
 			// Toolbar buttons and export wrapping follow this order (first innermost).
 			marks: {
-				bold: {
-					tag: 'strong',
-					toolbar: { label: words.bold, icon: 'B' },
-					parse: alias(/^b$/, 'fontWeight', /^(bold|[6-9]00)$/)
-				},
-				italic: {
-					tag: 'em',
-					toolbar: { label: words.italic, icon: 'I' },
-					parse: alias(/^i$/, 'fontStyle', /italic/)
-				},
-				underline: {
-					tag: 'u',
-					toolbar: { label: words.underline, icon: 'U' },
-					parse: alias(/^u$/, 'textDecoration', /underline/)
-				},
-				strike: {
-					tag: 's',
-					toolbar: { label: words.strike, icon: 'S' },
-					parse: alias(/^(strike|del)$/, 'textDecoration', /line-through/)
-				},
-				code: { tag: 'code', toolbar: { label: words.code, icon: '</>' } },
-				// Typing at a link's trailing edge extends it only from inside the anchor.
-				link: {
-					tag: 'a',
-					attributes: linkAttributes,
-					...richTextMarks.link,
-					parse: (el) => {
-						const href = el.localName === 'a' && sanitizeLinkHref(el.getAttribute('href'));
-						const target = el.getAttribute('target');
-						return href ? { href, ...(target ? { target } : {}) } : undefined;
-					}
-				},
-				superscript: { tag: 'sup' },
-				subscript: { tag: 'sub' },
-				color: {
-					tag: 'span',
-					attributes: styled('color'),
-					parse: (el) => colorOf(el.style.color, NO_COLOR)
-				},
-				highlight: {
-					tag: 'span',
-					attributes: styled('background-color'),
-					parse: (el) => {
-						const background = el.style.backgroundColor;
-						if (background) return colorOf(background, NO_HIGHLIGHT);
-						return el.localName === 'mark' ? 'yellow' : undefined;
-					}
-				}
+				...marks,
+				// The toolbar's marks, by their icons.
+				...Object.fromEntries(
+					(['bold', 'italic', 'underline', 'strike', 'code'] as const).map((name, i) => [
+						name,
+						{
+							...marks[name],
+							toolbar: { label: words[name], icon: ['B', 'I', 'U', 'S', '</>'][i]! }
+						}
+					])
+				)
 			},
 			blocks: {
 				paragraph: {
@@ -461,42 +403,25 @@
 					])
 				},
 				heading: {
+					...headingRead,
+					...headingWrite,
 					snippet: textThenChildren,
-					contentElement: (data) => headingLevel(data.level),
-					presets: presets('heading', [
-						{
-							label: kinds.heading1,
-							icon: 'H₁',
-							keywords: ['h1', 'title'],
-							data: { level: 'h1' },
-							markdown: ['# ']
-						},
-						{
-							label: kinds.heading2,
-							icon: 'H₂',
-							keywords: ['h2', 'subtitle'],
-							data: { level: 'h2' },
-							markdown: ['## ']
-						},
-						{
-							label: kinds.heading3,
-							icon: 'H₃',
-							keywords: ['h3'],
-							data: { level: 'h3' },
-							markdown: ['### ']
-						}
-					]),
-					// HTML import: h1–h3 come from the presets; h4–h6 read as h3.
-					parse: (el) => (/^h[4-6]$/.test(el.localName) ? { level: 'h3' } : undefined),
-					html: (block, content, children) => {
-						const tag = headingLevel(block.data?.level);
-						return `<${tag}>${content}</${tag}>${children}`;
-					}
+					presets: presets(
+						'heading',
+						HEADING_LEVELS.map((level, index) => ({
+							label: [kinds.heading1, kinds.heading2, kinds.heading3][index]!,
+							icon: `H${['₁', '₂', '₃'][index]}`,
+							keywords: [level, ...[['title'], ['subtitle'], []][index]!],
+							data: { level },
+							markdown: [`${'#'.repeat(index + 1)} `]
+						}))
+					)
 				},
 				'bulleted-list-item': {
+					...itemRead,
+					...itemWrite,
 					continues: true,
 					snippet: listItem,
-					element: unlisted('li'),
 					presets: presets('bulleted-list-item', [
 						{
 							label: kinds.bulletedList,
@@ -504,13 +429,13 @@
 							keywords: ['bullet', 'ul'],
 							markdown: ['- ', '* ', '+ ']
 						}
-					]),
-					html: 'li'
+					])
 				},
 				'numbered-list-item': {
+					...numberedRead,
+					...itemWrite,
 					continues: true,
 					snippet: listItem,
-					element: unlisted('li'),
 					presets: presets('numbered-list-item', [
 						{
 							label: kinds.numberedList,
@@ -518,13 +443,10 @@
 							keywords: ['number', 'ol'],
 							markdown: ['1. ', 'a. ', 'i. ']
 						}
-					]),
-					html: 'li',
-					// HTML import: an `li` is a bulleted item (the first `li` kind) unless its list is ordered.
-					parse: (el) =>
-						el.localName === 'li' && el.parentElement?.localName === 'ol' ? {} : undefined
+					])
 				},
 				'todo-item': {
+					...todoWrite,
 					continues: true,
 					// The app's control markup, if any, through its own snippet: the default costs no branch.
 					snippet: checkbox ? todoItemOwn : todoItem,
@@ -536,15 +458,10 @@
 							data: { checked: false },
 							markdown: ['[ ] ', '[] ']
 						}
-					]),
-					html: (block, content, children) =>
-						`<li data-edytor-todo-item="true"><input type="checkbox"${block.data?.checked === true ? ' checked' : ''}>${content}${children}</li>`,
-					plain: (block, content, children) =>
-						[`${block.data?.checked === true ? '[x]' : '[ ]'} ${content}`.trim(), children]
-							.filter(Boolean)
-							.join('\n')
+					])
 				},
 				toggle: {
+					...toggleRead,
 					continues: true,
 					container: true,
 					snippet: emptyBody ? detailsOwn : details,
@@ -563,13 +480,14 @@
 				// kept); from a toggle, `#`, `##` or `###` + space; so `> # ` typed on a new
 				// line is a toggle heading 1.
 				'toggle-heading': {
+					...toggleHeadingRead,
+					...toggleHeadingWrite,
 					container: true,
 					snippet: emptyBody ? detailsOwn : details,
 					...disclosure,
-					contentElement: (data) => headingLevel(data.level),
 					presets: presets(
 						'toggle-heading',
-						(['h1', 'h2', 'h3'] as const).map((level, index) => {
+						HEADING_LEVELS.map((level, index) => {
 							const hashes = '#'.repeat(index + 1);
 							return {
 								label: [kinds.toggleHeading1, kinds.toggleHeading2, kinds.toggleHeading3][index]!,
@@ -583,28 +501,21 @@
 								}
 							};
 						})
-					),
-					// HTML import: a `details` whose summary holds an h1–h3 (its own export).
-					parse: (el) => {
-						if (el.localName !== 'details') return;
-						const tag = el.querySelector(':scope > summary > :is(h1, h2, h3, h4, h5, h6)');
-						return tag ? { level: headingLevel(tag.localName) } : undefined;
-					},
-					html: (block, content, children) => {
-						const tag = headingLevel(block.data?.level);
-						return `<details><summary><${tag}>${content}</${tag}></summary>${children}</details>`;
-					}
+					)
 				},
 				// Notion's callout: an icon (`data.icon`, the picker's), a title (its own
 				// text) and a content (its children, any blocks), which shows even empty
 				// (`body`): Enter at the end of the title goes into it.
 				callout: {
+					...calloutRead,
 					container: true,
 					body: true,
 					snippet: calloutIcon || emptyBody ? calloutOwn : callout,
 					presets: presets('callout', [
 						{ label: kinds.callout, icon: '✦', keywords: ['note', 'tip'], data: { icon } }
 					]),
+					// A callout without its own icon exports the view's.
+					...calloutWrite((data) => iconOf(data, edytor)),
 					// The block menu's Change icon, while the view lists a picker: the keyboard's way to it.
 					menu: (block) => {
 						const picker = calloutPickers.get(edytor);
@@ -618,47 +529,38 @@
 									}
 								]
 							: [];
-					},
-					// HTML import: its own export, the icon in its attribute.
-					parse: (el) => {
-						const own = el.getAttribute('data-edytor-callout');
-						return own === null ? undefined : { icon: own };
-					},
-					html: (block, content, children) =>
-						calloutHtml(iconOf(block.data, edytor), content, children)
+					}
 				},
 				quote: {
+					...quoteRead,
+					...quoteWrite,
 					container: true,
 					snippet: textThenChildren,
-					contentElement: 'blockquote',
 					// Notion: `"` + space is a quote; `>` + space is a toggle.
-					presets: presets('quote', [{ label: kinds.quote, icon: '❝', markdown: ['" '] }]),
-					html: 'blockquote'
+					presets: presets('quote', [{ label: kinds.quote, icon: '❝', markdown: ['" '] }])
 				},
 				divider: {
 					...richTextKinds.divider,
-					element: 'hr',
+					...dividerRead,
+					...dividerWrite,
 					presets: presets('divider', [
 						{ label: kinds.divider, icon: '—', keywords: ['hr', 'separator'], markdown: ['---'] }
 					]),
-					empty: { content: [], children: [] },
-					...rule
+					empty: { content: [], children: [] }
 				},
 				'ordered-list': {
 					...richTextKinds['ordered-list'],
-					itemKind: 'numbered-list-item',
-					snippet: list,
-					element: unlisted('ol'),
-					html: 'ol'
+					...orderedRead,
+					...orderedWrite,
+					snippet: list
 				},
 				'unordered-list': {
 					...richTextKinds['unordered-list'],
-					itemKind: 'bulleted-list-item',
-					snippet: list,
-					element: unlisted('ul'),
-					html: 'ul'
+					...unorderedRead,
+					...unorderedWrite,
+					snippet: list
 				},
-				'list-item': { snippet: listItem, element: unlisted('li'), html: 'li' }
+				'list-item': { ...itemRead, ...itemWrite, snippet: listItem }
 			}
 		};
 	};
@@ -760,10 +662,3 @@
 {#snippet list({ children }: BlockSnippetPayload)}<!--
 -->{#if children}<div>{@render children()}</div>{/if}<!--
 -->{/snippet}
-
-<style>
-	/* An empty body's hint: chrome, not text (`body.hint`); its look is a theme's. */
-	:global([data-edytor-empty-body]) {
-		user-select: none;
-	}
-</style>

package/dist/plugins/richtext/RichTextPlugin.svelte.d.ts

@@ -1,3 +1,4 @@
+import './richtext.css';
 import type { Plugin, PlaceholderView } from '../../plugins.js';
 import type { Edytor } from '../../edytor.svelte.js';
 import { richTextOperations } from './richTextOperations.js';

package/dist/plugins/richtext/body.js

@@ -10,7 +10,7 @@ export const openBody = (block) => {
     return edytor.dispatcher.run('openBody', () => {
         const added = () => edytor.insertBlocks({ parent: block.id, index: 0 }, [{ type: edytor.defaultChild(block) }]);
         const child = block.children[0] ?? edytor.idToBlock.get(added().ids[0] ?? '');
-        edytor.dispatcher.caret(child?.firstText, 0);
+        edytor.dispatcher.caretIn(child?.firstText, 0);
         return child ?? undefined;
     });
 };

package/dist/plugins/richtext/calloutIcons.svelte.d.ts

@@ -40,6 +40,8 @@ export declare class CalloutIconPicker extends ChromeList {
     constructor(edytor: Edytor, 
     /** The picker's choices. */
     icons?: readonly string[]);
+    /** Where the picker stands: the open callout's icon (`ChromeAnchor`), which your `picker` places itself under. */
+    get anchor(): import("../chrome.js").ChromeAnchor;
     /** Whether the picker is open (reactive). */
     get isOpen(): boolean;
     /** The callout it is open on (reactive). */
@@ -48,8 +50,6 @@ export declare class CalloutIconPicker extends ChromeList {
     get current(): string | undefined;
     /** The keyboard's rows: the icons, then Remove icon. */
     protected get count(): number;
-    /** The view is readonly (reactive): the picker closes. */
-    get readonly(): boolean;
     /** Open the picker on `block`, or close it when it is open there. */
     toggle: (block: Block) => void;
     /** Open the picker on the callout `block`, its icon the keyboard's row (refused in a view that may not write). */

package/dist/plugins/richtext/calloutIcons.svelte.js

@@ -14,7 +14,6 @@ import { takeKeys } from '../../events/onFocus.js';
 import { ChromeList, holdKeys, menuKey, optionAttachment } from '../list.svelte.js';
 import { Anchored } from '../anchored.svelte.js';
 import { calloutPickers, iconOf } from './callouts.js';
-import CalloutIconHost from './CalloutIconPicker.svelte';
 import { all, listen } from '../../utils/listen.js';
 /** The picker's choices unless `createCalloutIconsPlugin({ icons })` names others. */
 export const CALLOUT_ICONS = [
@@ -89,6 +88,10 @@ export class CalloutIconPicker extends ChromeList {
             return icon ?? node ?? null;
         }, () => this.close(false));
     }
+    /** Where the picker stands: the open callout's icon (`ChromeAnchor`), which your `picker` places itself under. */
+    get anchor() {
+        return this.panel.anchor;
+    }
     /** Whether the picker is open (reactive). */
     get isOpen() {
         return this.target !== null;
@@ -107,10 +110,6 @@ export class CalloutIconPicker extends ChromeList {
     get count() {
         return this.icons.length + 1;
     }
-    /** The view is readonly (reactive): the picker closes. */
-    get readonly() {
-        return this.edytor.readonly;
-    }
     /** Open the picker on `block`, or close it when it is open there. */
     toggle = (block) => (this.target === block.id ? this.close() : this.open(block));
     /** Open the picker on the callout `block`, its icon the keyboard's row (refused in a view that may not write). */
@@ -129,7 +128,6 @@ export class CalloutIconPicker extends ChromeList {
             return;
         const before = this.#before;
         this.target = null;
-        this.panel.box = null;
         this.#before = null;
         this.edytor.overlay.invalidate();
         if (!keys)
@@ -209,6 +207,6 @@ export const createCalloutIconsPlugin = ({ picker: menu, icons } = {}) => (edyto
     calloutPickers.set(edytor, picker);
     return {
         // With the menus: above the handles and the image chrome.
-        onEdytorAttached: ({ node }) => menu && picker.panel.mount(node, CalloutIconHost, { picker, menu }, 70)
+        onEdytorAttached: ({ node }) => menu && picker.panel.mount(node, menu, picker, () => picker.isOpen, 70)
     };
 };

package/dist/plugins/richtext/richTextOperations.d.ts

@@ -6,25 +6,7 @@ export type RichTextLink = {
     href: string;
     target?: string;
 };
-/**
- * CSS-color sanitizer for `color`/`highlight` marks. The value lands in
- * `style="color: {value}"` — a `;`/`{`/`}` payload escapes the property
- * and injects arbitrary declarations (`url()` exfil, `position:fixed`
- * overlays). Metacharacters, escape/obfuscation sequences, and
- * resource-loading functions are rejected; real `<color>` values
- * (`#hex`, `rgb()/hsl()/oklch()/color-mix()/var()`, named colors) pass.
- */
-export declare const sanitizeCssColorValue: (value: unknown) => string | null;
-/**
- * Scheme allowlist for link hrefs. `javascript:`/`data:`/`vbscript:`
- * payloads can arrive through native `insertLink`, pasted HTML, or a
- * malicious collaborator — and Svelte renders `href` verbatim. The href is
- * read as the browser's URL parser reads it: it strips C0 controls and
- * spaces at both ends and tab/newline/CR anywhere (`\u0001javascript:` is
- * `javascript:` to a browser), then resolves it against a base; only an
- * allowed scheme, or a relative href that stays relative, passes.
- */
-export declare const sanitizeLinkHref: (href: unknown) => string | null;
+export { sanitizeCssColorValue, sanitizeLinkHref } from '../../utils/sanitize.js';
 /**
  * The URL a paste carries when its plain text is one link and nothing else
  * (surrounding whitespace aside): `http:`/`https:` with a host, or

package/dist/plugins/richtext/richTextOperations.js

@@ -3,54 +3,8 @@ import { holdsNothing, placing } from '../../kinds.js';
 import { id } from '../../utils.js';
 import { marksForInsertion } from '../../session/editing/text.js';
 import { selectedTextSpans, viewOf } from '../../selection/visibility.js';
-const SAFE_LINK_PROTOCOLS = new Set(['http:', 'https:', 'mailto:', 'tel:']);
-/**
- * CSS-color sanitizer for `color`/`highlight` marks. The value lands in
- * `style="color: {value}"` — a `;`/`{`/`}` payload escapes the property
- * and injects arbitrary declarations (`url()` exfil, `position:fixed`
- * overlays). Metacharacters, escape/obfuscation sequences, and
- * resource-loading functions are rejected; real `<color>` values
- * (`#hex`, `rgb()/hsl()/oklch()/color-mix()/var()`, named colors) pass.
- */
-export const sanitizeCssColorValue = (value) => {
-    if (typeof value !== 'string')
-        return null;
-    const trimmed = value.trim();
-    if (!trimmed || trimmed.length > 128)
-        return null;
-    if (/[;{}<>\\'"`]/.test(trimmed) || /url\s*\(|expression\s*\(|\/\*|\*\//i.test(trimmed)) {
-        return null;
-    }
-    return trimmed;
-};
-/**
- * Scheme allowlist for link hrefs. `javascript:`/`data:`/`vbscript:`
- * payloads can arrive through native `insertLink`, pasted HTML, or a
- * malicious collaborator — and Svelte renders `href` verbatim. The href is
- * read as the browser's URL parser reads it: it strips C0 controls and
- * spaces at both ends and tab/newline/CR anywhere (`\u0001javascript:` is
- * `javascript:` to a browser), then resolves it against a base; only an
- * allowed scheme, or a relative href that stays relative, passes.
- */
-export const sanitizeLinkHref = (href) => {
-    // Marks arrive from untrusted sources too (synced peers, paste) —
-    // reject non-strings outright instead of throwing on `.replace`.
-    if (typeof href !== 'string')
-        return null;
-    // eslint-disable-next-line no-control-regex
-    const trimmed = href.replace(/[\t\n\r]/g, '').replace(/^[\u0000-\u0020]+|[\u0000-\u0020]+$/g, '');
-    if (!trimmed)
-        return null;
-    try {
-        // A relative href resolves to the base's `https:`: it names no scheme of its own.
-        return SAFE_LINK_PROTOCOLS.has(new URL(trimmed, 'https://relative.invalid/').protocol)
-            ? trimmed
-            : null;
-    }
-    catch {
-        return null;
-    }
-};
+export { sanitizeCssColorValue, sanitizeLinkHref } from '../../utils/sanitize.js';
+import { sanitizeCssColorValue, sanitizeLinkHref } from '../../utils/sanitize.js';
 /**
  * The URL a paste carries when its plain text is one link and nothing else
  * (surrounding whitespace aside): `http:`/`https:` with a host, or
@@ -194,7 +148,7 @@ export const richTextOperations = (edytor) => ({
         if (dispatcher.plan('insertDivider', {}, prepare, block).status !== 'applied')
             return null;
         const text = caret ? edytor.idToBlock.get(caret)?.firstText : startText;
-        dispatcher.caret(text, caret ? 0 : yStart);
+        dispatcher.caretIn(text, caret ? 0 : yStart);
         return block;
     },
     removeAllMarksAtRange: () => {

package/dist/plugins/richtext/richtext.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). */
+/* An empty body's hint: chrome, not text (`body.hint`); its look is a theme's. */
+[data-edytor-empty-body] {
+	user-select: none;
+}

package/dist/plugins/slashMenu/SlashMenuController.svelte.d.ts

@@ -19,6 +19,8 @@ export declare class SlashMenuController extends TextTriggerController {
     /** The selection when a `+` opened the menu, given back when it closes unpicked. */
     private held;
     constructor(edytor: Edytor);
+    /** A `+`'s menu stands under the `+` (its block while the `+` is gone); a `/` menu at the caret. */
+    protected anchorRect(): DOMRect | undefined;
     /** A `+`'s menu names its highlighted row from its own field, and tells the `+` it opened it. */
     protected popupOf(active: string | undefined): Popup;
     /**