edytor 2.0.0 → 4.0.0

package/dist/plugins/blockMenu/BlockMenuController.svelte.js

@@ -63,7 +63,12 @@ export class BlockMenuController {
      * after). Delete and Turn into act on their `members`, its items too.
      */
     blocks = $state([]);
-    anchor = null;
+    /**
+     * Where the menu stands: the handle that opened it (a `ChromeAnchor`:
+     * your `menu` places itself beside it, its flyout beside the menu);
+     * `null` while closed.
+     */
+    anchor = $state.raw(null);
     query = $state('');
     /** The keyboard's row. */
     index = $state(0);
@@ -473,7 +478,7 @@ export class BlockMenuController {
     caret(block) {
         const text = block && shownText(block, 'first');
         if (text || !block?.isInTree)
-            this.edytor.dispatcher.caret(text, 0);
+            this.edytor.dispatcher.caretIn(text, 0);
         else
             this.edytor.selection.select(blockSelection([block.id]));
         this.focus();

package/dist/plugins/blockMenu/blockMenuPlugin.js

@@ -11,14 +11,9 @@ import { BlockMenuController, colorCommands } from './BlockMenuController.svelte
 export const createBlockMenuPlugin = (options = {}) => (edytor) => {
     const controller = new BlockMenuController(edytor, options);
     /**
-     * Beside the handle: 8px right of it, top-aligned; left of it when the
-     * right has no room; flipped up when the space below is short. The Turn
-     * into flyout opens right of the menu, or left of it when the right has
-     * no room, top-aligned with it, moved up as far as the viewport needs
-     * (never above its top edge), and scrolls inside when taller (Notion):
-     * every row is in the viewport, reachable by the mouse. It follows
-     * scrolls and resizes, and closes when the handle leaves the view.
-     * Measured in the overlay's frame; the placement (or the close) is written after.
+     * The menu places itself by `controller.anchor` (the handle), its
+     * flyout by the menu; measured in the overlay's frame, the menu closes
+     * when the handle leaves the page or the view.
      */
     const close = () => controller.close(false);
     const place = (host) => {
@@ -27,50 +22,10 @@ export const createBlockMenuPlugin = (options = {}) => (edytor) => {
             return;
         if (!anchor?.isConnected)
             return close;
-        const view = host.ownerDocument.defaultView;
-        const menu = host.querySelector('[data-edytor-block-menu]') ??
-            host.firstElementChild;
-        if (!view || !menu)
-            return;
-        const [gap, edge, between] = [8, 8, 4];
         const rect = anchor.getBoundingClientRect();
-        if (rect.bottom < 0 || rect.top > view.innerHeight)
+        const height = host.ownerDocument.defaultView?.innerHeight ?? Infinity;
+        if (rect.bottom < 0 || rect.top > height)
             return close;
-        // Layout sizes, not the box: the menus open with a scale (0.98 → 1), and a
-        // box read mid-animation would place them up to 2% short of their size.
-        const [width, height] = [menu.offsetWidth, menu.offsetHeight];
-        const right = rect.right + gap;
-        const left = rect.left - gap - width;
-        let x = right + width <= view.innerWidth - edge
-            ? right
-            : left >= edge
-                ? left
-                : Math.max(edge, Math.min(right, view.innerWidth - edge - width));
-        const y = rect.top + height <= view.innerHeight - edge
-            ? rect.top
-            : Math.max(edge, Math.min(rect.bottom, view.innerHeight - edge) - height);
-        const flyout = host.querySelector('[data-edytor-block-menu-flyout]');
-        const frame = flyout?.parentElement;
-        let side = '';
-        let shift = '';
-        if (flyout && frame) {
-            const box = { width: flyout.offsetWidth, height: flyout.offsetHeight };
-            // Left of the menu when its right has no room (the menu stays where it is).
-            if (x + width + between + box.width > view.innerWidth - edge &&
-                x - between - box.width >= edge) {
-                side = 'row-reverse';
-                x -= between + box.width;
-            }
-            const top = Math.max(edge, Math.min(y, view.innerHeight - edge - box.height));
-            shift = `${top - y}px`;
-        }
-        return () => {
-            Object.assign(host.style, { left: `${x}px`, top: `${y}px` });
-            if (frame)
-                frame.style.flexDirection = side;
-            if (flyout)
-                flyout.style.marginTop = shift;
-        };
     };
     return {
         // Colours by name in the slash menu (`/red`), as in Notion.

package/dist/plugins/chrome.d.ts

@@ -9,17 +9,33 @@ import type { Snippet } from 'svelte';
 import type { Attachment } from 'svelte/attachments';
 import type { Edytor } from '../edytor.svelte.js';
 import { type BlockActivation, type BlockAddition } from './blockHandles/BlockHandleController.svelte.js';
+/**
+ * Where a chrome surface stands, for the app's markup to place itself
+ * (Floating UI's virtual element: `computePosition(anchor, floating, …)`,
+ * or bits-ui's `customAnchor`): its box read now, in client pixels, on
+ * every call (the caret, the selection, a block, a grip, a button), and
+ * the element whose scrolling ancestors move it. The package places no
+ * popup.
+ */
+export type ChromeAnchor = {
+    getBoundingClientRect: () => DOMRect;
+    readonly contextElement?: Element;
+};
+/** A {@link ChromeAnchor} reading `rect` (an empty box while there is none) inside `context`. */
+export declare const virtualAnchor: (rect: () => DOMRect | null | undefined, context: () => Element | null | undefined) => ChromeAnchor;
 /**
  * Mount the app's `snippet` for a chrome surface in a fixed host of the
- * overlay (`data-<name>`, placed by `measure`), rendered with `payload`
- * while `shown` holds and closed (`close`) when the view turns readonly.
- * Without a snippet the surface renders nothing (its controller still
- * works): nothing is mounted. Answers the teardown.
+ * overlay (`data-<name>`), rendered with `payload` while `shown` holds and
+ * closed (`close`) when the view turns readonly; the markup places itself
+ * by its controller's `anchor`. `measure` runs on the overlay's frames (a
+ * surface whose anchor left the page closes there). Without a snippet the
+ * surface renders nothing (its controller still works): nothing is
+ * mounted. Answers the teardown.
  */
 export declare const mountChrome: <T>(edytor: Edytor, snippet: Snippet<[T]> | undefined, payload: T, shown: () => unknown, place: {
     name: string;
     zIndex: number;
-    measure: (host: HTMLElement, origin: DOMRect) => (() => void) | void;
+    measure?: (host: HTMLElement, origin: DOMRect) => (() => void) | void;
 }, close?: () => void) => () => void;
 /**
  * One row of a chrome list a controller builds for the app's markup: the
@@ -68,6 +84,12 @@ export declare const identify: (node: HTMLElement, id: string, role?: string) =>
 export declare const attribute: (node: HTMLElement, name: string, value: string | undefined) => void;
 /** Whether `node` may name a highlighted row (`aria-activedescendant`): a field, or an element with a role. */
 export declare const namesRows: (node: HTMLElement) => boolean;
+/**
+ * Every press in `document` (capture; WebKit's lone `mousedown` after a
+ * drag too, `onPress`) outside the elements `inside` matches: `outside`
+ * hears it. Answers the teardown.
+ */
+export declare const onPressOutside: (edytor: Edytor, document: Document, inside: string, outside: (event: MouseEvent) => void) => () => void;
 /**
  * A handle menu's events on the editor `node` (the block menu, the `+`'s
  * menu): a grip's activation (`BLOCK_ACTIVATE_EVENT`), a `+`'s offer

package/dist/plugins/chrome.js

@@ -2,15 +2,24 @@ import Chrome from './Chrome.svelte';
 import { onPress } from '../events/onFocus.js';
 import { all, listen } from '../utils/listen.js';
 import { BLOCK_ACTIVATE_EVENT, BLOCK_ADD_EVENT } from './blockHandles/BlockHandleController.svelte.js';
+/** A {@link ChromeAnchor} reading `rect` (an empty box while there is none) inside `context`. */
+export const virtualAnchor = (rect, context) => ({
+    getBoundingClientRect: () => rect() ?? new DOMRect(),
+    get contextElement() {
+        return context() ?? undefined;
+    }
+});
 /**
  * Mount the app's `snippet` for a chrome surface in a fixed host of the
- * overlay (`data-<name>`, placed by `measure`), rendered with `payload`
- * while `shown` holds and closed (`close`) when the view turns readonly.
- * Without a snippet the surface renders nothing (its controller still
- * works): nothing is mounted. Answers the teardown.
+ * overlay (`data-<name>`), rendered with `payload` while `shown` holds and
+ * closed (`close`) when the view turns readonly; the markup places itself
+ * by its controller's `anchor`. `measure` runs on the overlay's frames (a
+ * surface whose anchor left the page closes there). Without a snippet the
+ * surface renders nothing (its controller still works): nothing is
+ * mounted. Answers the teardown.
  */
 export const mountChrome = (edytor, snippet, payload, shown, place, close) => snippet
-    ? edytor.overlay.mount((Chrome), { edytor, snippet, payload, shown, close }, place.name, place.zIndex, place.measure)
+    ? edytor.overlay.mount((Chrome), { edytor, snippet, payload, shown, close }, place.name, place.zIndex, place.measure ?? (() => { }))
     : () => { };
 /**
  * Write `value` as `node`'s attribute `name`, only when it changes:
@@ -74,6 +83,15 @@ export const attribute = (node, name, value) => {
 };
 /** Whether `node` may name a highlighted row (`aria-activedescendant`): a field, or an element with a role. */
 export const namesRows = (node) => isField(node) || node.hasAttribute('role');
+/**
+ * Every press in `document` (capture; WebKit's lone `mousedown` after a
+ * drag too, `onPress`) outside the elements `inside` matches: `outside`
+ * hears it. Answers the teardown.
+ */
+export const onPressOutside = (edytor, document, inside, outside) => onPress(edytor, document, (event) => {
+    if (!event.target?.closest?.(inside))
+        outside(event);
+}, true);
 /**
  * A handle menu's events on the editor `node` (the block menu, the `+`'s
  * menu): a grip's activation (`BLOCK_ACTIVATE_EVENT`), a `+`'s offer
@@ -81,7 +99,4 @@ export const namesRows = (node) => isField(node) || node.hasAttribute('role');
  * matches (WebKit's lone `mousedown` after a drag too, `onPress`). Answers
  * the teardown.
  */
-export const handleMenuEvents = (edytor, node, activate, add, inside, outside) => all(listen(node, BLOCK_ACTIVATE_EVENT, activate), listen(node, BLOCK_ADD_EVENT, add), onPress(edytor, node.ownerDocument, (event) => {
-    if (!event.target?.closest?.(inside))
-        outside();
-}, true));
+export const handleMenuEvents = (edytor, node, activate, add, inside, outside) => all(listen(node, BLOCK_ACTIVATE_EVENT, activate), listen(node, BLOCK_ADD_EVENT, add), onPressOutside(edytor, node.ownerDocument, inside, outside));

package/dist/plugins/code/CodePlugin.svelte

@@ -1,14 +1,14 @@
 <script module lang="ts">
+	import { codeForms } from '../../export/forms.js';
 	import './code.css';
 	import type { Plugin, MarkSnippetPayload, BlockSnippetPayload } from '../../plugins.js';
 	import { Text } from '../../text/text.svelte.js';
 	import { runIntent } from '../../events/beforeInputCommands.js';
-	import { codeKinds } from '../../crdt/semantics.js';
+
 	import { shown } from '../../selection/visibility.js';
 	import { caretBeside } from '../../selection/replaceSelection.js';
 	import { siblingSlot } from '../../session/handles.js';
 	import CodeHeader from './CodeHeader.svelte';
-	import LanguageMenuPanel from './LanguageMenu.svelte';
 	import { LanguageMenu, languageMenus } from './languageMenu.svelte.js';
 	import { codeEnglish, keywordsOf, labelsOf } from '../../labels.js';
 	import {
@@ -115,7 +115,7 @@
 				onEdytorAttached: ({ node }) => {
 					const menu = ownMenu();
 					const snippet = menu?.settings.menu;
-					return snippet && menu.panel.mount(node, LanguageMenuPanel, { menu, snippet });
+					return snippet && menu.panel.mount(node, snippet, menu, () => menu.open !== null);
 				},
 				hotkeys: {
 					// Alt+F10 at a caret in a code line: the keys go to its language button
@@ -174,7 +174,7 @@
 								edytor.idToBlock.get(
 									edytor.insertBlocks(siblingSlot(line), [{ type: 'codeLine' }]).ids[0] ?? ''
 								);
-							return prevent(() => edytor.dispatcher.caret(next()?.firstText, 0));
+							return prevent(() => edytor.dispatcher.caretIn(next()?.firstText, 0));
 						}
 						prevent(() => runIntent(edytor, 'insertParagraph'));
 					}
@@ -189,7 +189,10 @@
 						prevent(() => {
 							const before = caretBeside(block, 'blockBefore', new Set([block]));
 							edytor.deleteBlock(block.id);
-							edytor.dispatcher.caret(before?.text ?? code.firstEditableText, before?.offset ?? 0);
+							edytor.dispatcher.caretIn(
+								before?.text ?? code.firstEditableText,
+								before?.offset ?? 0
+							);
 						});
 					}
 					// Backspace in an empty block right after a code block removes it; the
@@ -202,7 +205,7 @@
 						prevent(() => {
 							edytor.deleteBlock(block.id);
 							const text = previous.lastText;
-							edytor.dispatcher.caret(text, text?.length ?? 0);
+							edytor.dispatcher.caretIn(text, text?.length ?? 0);
 						});
 					}
 					if (block.type !== 'codeLine') return;
@@ -213,7 +216,7 @@
 						const [at, line] = [offset - startText.segStart, startText.stringContent];
 						// A closer typed before the same character steps over it.
 						if (CLOSERS.has(value) && line[at] === value) {
-							prevent(() => edytor.dispatcher.caret(startText, at + 1));
+							prevent(() => edytor.dispatcher.caretIn(startText, at + 1));
 						}
 						// Quotes pair only at a word boundary: the apostrophe in `don't` stays single.
 						const inWord = QUOTES.has(value) && /\w/.test((line[at - 1] ?? '') + (line[at] ?? ''));
@@ -230,7 +233,7 @@
 
 				blocks: {
 					code: {
-						...codeKinds.code,
+						...codeForms().code,
 						snippet: code,
 						presets: [
 							{
@@ -244,8 +247,8 @@
 						empty: { content: [], children: [{ type: 'codeLine', content: [{ text: '' }] }] }
 					},
 					codeLine: {
+						...codeForms().codeLine,
 						snippet: codeLine,
-						html: (_, content) => `<pre><code>${content}</code></pre>`,
 						transformText: ({ text, block }) =>
 							tokenizeCode(text.stringContent, lineLanguage(block.id)),
 						// A line holding newlines keeps its first line; each other becomes a code line after it.

package/dist/plugins/code/header.svelte.js

@@ -9,6 +9,7 @@ import { Text } from '../../text/text.svelte.js';
 import { attribute } from '../chrome.js';
 import { languageOf } from './languages.js';
 import { all, listen } from '../../utils/listen.js';
+import { keysOf } from '../list.svelte.js';
 /** How long Copy reads Copied after a copy, in milliseconds. */
 const COPIED_FOR = 1200;
 /** A code block's text: its lines, joined by newlines. */
@@ -112,17 +113,12 @@ export class CodeHeader {
         const mousedown = (event) => event.preventDefault();
         // A click from Enter or Space has no pointer (`detail` 0): the keys opened it.
         const click = (event) => this.toggle(event.detail === 0);
-        const keydown = (event) => {
-            if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
-                if (!this.expanded)
-                    this.toggle(true);
-            }
-            else if (event.key === 'Escape')
-                this.menu?.release();
-            else
-                return;
-            event.preventDefault();
-        };
+        const open = () => this.expanded || this.toggle(true);
+        const keydown = keysOf({
+            ArrowDown: open,
+            ArrowUp: open,
+            Escape: () => this.menu?.release()
+        });
         const off = listen(node, 'mousedown', mousedown);
         const off2 = listen(node, 'click', click);
         const off3 = listen(node, 'keydown', keydown);

package/dist/plugins/code/languageMenu.svelte.d.ts

@@ -41,8 +41,11 @@ export declare class LanguageMenu extends ChromeList {
     } | null;
     /** The search field's text. */
     query: string;
-    /** The view is readonly (reactive): the list closes. */
-    get readonly(): boolean;
+    /**
+     * Where the list stands: the open block's language button
+     * (`ChromeAnchor`), which your `menu` places itself under.
+     */
+    get anchor(): import("../chrome.js").ChromeAnchor;
     /** The open block's language id. */
     get current(): string | null;
     /** The rows the query keeps: a language the plugin does not list first (the block's own), then the list. */

package/dist/plugins/code/languageMenu.svelte.js

@@ -1,7 +1,7 @@
 import { untrack } from 'svelte';
 import { takeKeys } from '../../events/onFocus.js';
 import { attribute } from '../chrome.js';
-import { ChromeList, holdKeys } from '../list.svelte.js';
+import { ChromeList, holdKeys, keysOf } from '../list.svelte.js';
 import { Anchored } from '../anchored.svelte.js';
 import { languageOf } from './languages.js';
 import { all, listen } from '../../utils/listen.js';
@@ -40,9 +40,12 @@ export class LanguageMenu extends ChromeList {
         this.settings = settings;
         this.panel = new Anchored(edytor, 'edytor-code-language-host', () => (this.open ? this.#button(this.open.block) : undefined), () => this.close());
     }
-    /** The view is readonly (reactive): the list closes. */
-    get readonly() {
-        return this.edytor.readonly;
+    /**
+     * Where the list stands: the open block's language button
+     * (`ChromeAnchor`), which your `menu` places itself under.
+     */
+    get anchor() {
+        return this.panel.anchor;
     }
     /** The open block's language id. */
     get current() {
@@ -121,7 +124,6 @@ export class LanguageMenu extends ChromeList {
         if (!open)
             return;
         this.open = null;
-        this.panel.box = null;
         this.query = '';
         this.edytor.overlay.invalidate();
         if (keys === 'button')
@@ -152,21 +154,12 @@ export class LanguageMenu extends ChromeList {
         return all(off, off2);
     });
     /** The search field's keys (`keys`). */
-    #keydown = (event) => {
-        if (event.isComposing)
-            return;
-        const step = { ArrowDown: 1, ArrowUp: -1 }[event.key];
-        if (step)
-            this.move(step);
-        else if (event.key === 'Enter')
-            this.pick();
-        else if (event.key === 'Escape')
-            this.close(this.open?.keys ? 'button' : 'editor');
-        else
-            return;
-        event.preventDefault();
-        event.stopPropagation();
-    };
+    #keydown = keysOf({
+        ArrowDown: () => this.move(1),
+        ArrowUp: () => this.move(-1),
+        Enter: () => this.pick(),
+        Escape: () => this.close(this.open?.keys ? 'button' : 'editor')
+    }, true);
     /**
      * The keys back to the editor from a language button (its Escape): the
      * host takes the focus, the caret shown where the selection is.

package/dist/plugins/columns/ColumnsPlugin.svelte

@@ -1,16 +1,17 @@
 <script module lang="ts">
+	import { columnsForms } from '../../export/forms.js';
 	import './columns.css';
 	import type { BlockSnippetPayload, BlockView, EditorCommand, Plugin } from '../../plugins.js';
 	import type { Edytor } from '../../edytor.svelte.js';
 	import type { Block } from '../../block/block.svelte.js';
-	import { layoutKinds } from '../../crdt/semantics.js';
+
 	import { convertToKind, wrapBlocks, wrappable, type KindRow } from '../../kinds.js';
 	import {
 		getSelectedBlocksInDocumentOrder,
 		liftLayouts
 	} from '../../selection/replaceSelection.js';
 	import ColumnResizeStrips from './ColumnResize.svelte';
-	import { ColumnResize, weightOf } from './resize.svelte.js';
+	import { ColumnResize } from './resize.svelte.js';
 	import { hoverChrome } from '../bands.svelte.js';
 	import { all, listen } from '../../utils/listen.js';
 	import { columnsEnglish, keywordsOf, labelsOf } from '../../labels.js';
@@ -23,12 +24,6 @@
 		minWidth?: number;
 	};
 
-	/** A weight read back from HTML (`data-width`), when it is one. */
-	const parsedWidth = (element: HTMLElement): Record<string, number> => {
-		const width = Number(element.getAttribute('data-width'));
-		return Number.isFinite(width) && width > 0 ? { width } : {};
-	};
-
 	/**
 	 * Whether `block` sits in a layout's column, at any depth: no layout goes
 	 * there (`layout.nest`). A `+` menu's stand-in (no id yet) answers by
@@ -174,15 +169,12 @@
 				},
 				blocks: {
 					columns: {
-						...layoutKinds.columns,
+						...columnsForms().columns,
 						snippet: columns,
-						element: { tag: 'div', attributes: { 'data-edytor-columns': '' } },
-						html: (_, __, children) => `<div data-edytor-columns>${children}</div>`,
-						plain: (_, __, children) => children,
-						parse: (element) => (element.hasAttribute('data-edytor-columns') ? {} : undefined)
+						element: { tag: 'div', attributes: { 'data-edytor-columns': '' } }
 					},
 					column: {
-						...layoutKinds.column,
+						...columnsForms().column,
 						snippet: column,
 						// Its weight as shown: a resize drag's preview (this view only), else `data.width`.
 						element: (data, id) => ({
@@ -191,12 +183,7 @@
 								'data-edytor-column': '',
 								style: `flex: ${resize.weight(id, data)} 1 0px`
 							}
-						}),
-						html: (block, _, children) =>
-							`<div data-edytor-column data-width="${weightOf(block.data)}">${children}</div>`,
-						plain: (_, __, children) => children,
-						parse: (element) =>
-							element.hasAttribute('data-edytor-column') ? parsedWidth(element) : undefined
+						})
 					}
 				}
 			};

package/dist/plugins/columns/resize.svelte.d.ts

@@ -3,8 +3,8 @@ import type { Edytor } from '../../edytor.svelte.js';
 import { BandDrag } from '../bands.svelte.js';
 /** The guide line's width (the hover guide's and the drag's). */
 export declare const GUIDE = 2;
-/** A column's weight: `data.width`, a positive number, else 1. */
-export declare const weightOf: (data: Record<string, unknown> | undefined) => number;
+import { weightOf } from '../../export/forms.js';
+export { weightOf };
 /** The resize band in the gap between the columns `left` and `right` (`bandOf`), layer-relative. */
 export type Strip = {
     /** The layout, and the columns on each side. */
@@ -119,4 +119,3 @@ export declare class ColumnResize {
     /** A band took (`true`) or lost the focus: its layout's bands stay while it holds it. */
     focus: (strip: Strip, focused: boolean) => void;
 }
-export {};

package/dist/plugins/columns/resize.svelte.js

@@ -5,11 +5,8 @@ import { stacks } from '../../dnd/stacking.js';
 import { columnsEnglish, labelsOf } from '../../labels.js';
 /** The guide line's width (the hover guide's and the drag's). */
 export const GUIDE = 2;
-/** A column's weight: `data.width`, a positive number, else 1. */
-export const weightOf = (data) => {
-    const width = data?.width;
-    return typeof width === 'number' && Number.isFinite(width) && width > 0 ? width : 1;
-};
+import { weightOf } from '../../export/forms.js';
+export { weightOf };
 /** The band's middle in a gap `width` px wide, from the gap's left. */
 const middleOf = (width) => {
     const band = bandOf({ left: 0, right: width });

package/dist/plugins/comments/CommentsController.svelte.d.ts

@@ -74,6 +74,12 @@ export declare class CommentsController {
     readonly resolved: PlacedThread[];
     /** The threads the sidebar shows: the open ones, the resolved ones on demand, the active one. */
     readonly shown: PlacedThread[];
+    /**
+     * Where the thread being written, else the active one, stands
+     * (`ChromeAnchor`): the first line of its text, by which a card may
+     * place itself (the sidebar places its cards in the margin).
+     */
+    readonly anchor: import("../chrome.js").ChromeAnchor;
     /** The view may write: it may start, answer, resolve and delete comments. */
     get canComment(): boolean;
     /** One thread, by id. */

package/dist/plugins/comments/CommentsController.svelte.js

@@ -4,6 +4,9 @@ import { showText } from '../planned.js';
 import { COMMENT_MARK, blockCommentRuns, commentId, joinAnchors } from '../../crdt/protocols/comments.js';
 import { CommentThreads } from '../../collaboration/comments/threads.js';
 import { takeKeys } from '../../events/onFocus.js';
+import { rangeRects } from '../../collaboration/remoteSelection.js';
+import { runOf } from '../../components/Ranges.svelte';
+import { virtualAnchor } from '../chrome.js';
 const avatarColors = ['#e16259', '#d9730d', '#cb912f', '#448361', '#337ea9', '#9065b0', '#c14c8a'];
 /**
  * The comments plugin's state and actions (`plugins/comments`): the
@@ -92,6 +95,23 @@ export class CommentsController {
     /** The threads the sidebar shows: the open ones, the resolved ones on demand, the active one. */
     shown = $derived(this.threads.filter((thread) => thread.runs.length > 0 &&
         (!thread.resolved || this.showResolved || thread.id === this.active)));
+    /**
+     * Where the thread being written, else the active one, stands
+     * (`ChromeAnchor`): the first line of its text, by which a card may
+     * place itself (the sidebar places its cards in the margin).
+     */
+    anchor = virtualAnchor(() => {
+        const { edytor } = this;
+        const run = this.draft
+            ? this.draftRuns()[0]
+            : this.active
+                ? this.anchors.get(this.active)?.[0]
+                : undefined;
+        const [rect] = run
+            ? runOf(edytor, run.block, run.offset, run.length).flatMap(({ start, end }) => rangeRects(edytor, start, end, new DOMRect()))
+            : [];
+        return rect && new DOMRect(rect.left, rect.top, rect.width, rect.height);
+    }, () => this.edytor.node);
     /** The view may write: it may start, answer, resolve and delete comments. */
     get canComment() {
         return this.edytor.dispatcher.permits();

package/dist/plugins/equation/EquationPlugin.svelte

@@ -1,4 +1,5 @@
 <script module lang="ts">
+	import { equationForms } from '../../export/forms.js';
 	import './equation.css';
 	import type {
 		BlockSnippetPayload,
@@ -8,17 +9,15 @@
 	} from '../../plugins.js';
 	import type { Edytor } from '../../edytor.svelte.js';
 	import { InlineBlock } from '../../block/inlineBlock.svelte.js';
-	import { equationKinds } from '../../crdt/semantics.js';
+
 	import { equationEnglish, keywordsOf, labelsOf } from '../../labels.js';
 	import { id } from '../../utils.js';
 	import EquationView from './EquationView.svelte';
-	import EquationEditorPanel from './EquationEditor.svelte';
 	import {
 		EquationEditor,
 		EquationRenderer,
 		equationViews,
 		expressionOf,
-		parseEquation,
 		type EquationData,
 		type EquationErrorPayload,
 		type EquationPlaceholderPayload,
@@ -28,7 +27,7 @@
 		type KatexLoader
 	} from './equation.svelte.js';
 	import { katexLoaderOf } from './katex.js';
-	import { withRulesAndTriggers } from '../triggers/triggers.js';
+	import { placeAtom, withRulesAndTriggers } from '../triggers/triggers.js';
 
 	export type {
 		EquationData,
@@ -101,13 +100,8 @@
 	/** `$$E=mc^2$$` typed in text: an inline equation (Notion). */
 	const dollars: InputRule = {
 		find: /\$\$([^$\n]*[^$\s][^$\n]*)\$\$$/,
-		replace: ([, tex], { edytor, block, from, caret, remove }) =>
-			remove(() => {
-				const atom = { type: INLINE, data: { expression: tex!.trim() } };
-				const written = edytor.insertInline(block.id, from, atom).status === 'applied';
-				if (written) caret(from + 1);
-				return written;
-			})
+		replace: ([, tex], ctx) =>
+			ctx.remove(() => placeAtom(ctx, { type: INLINE, data: { expression: tex!.trim() } }))
 	};
 
 	/** The equation a block selection or an atom selection stands for, if any. */
@@ -143,6 +137,8 @@
 		(edytor) => {
 			const labels = labelsOf(edytor, 'equation', equationEnglish);
 			const renderer = new EquationRenderer(katexLoaderOf(options.katex), options.macros);
+			/** The kinds' forms: MathML by KaTeX once it is loaded. */
+			const forms = equationForms(renderer.mathml);
 			// The records read with no view (`plugin(undefined)`) keep no state.
 			if (edytor && !equationViews.has(edytor))
 				equationViews.set(edytor, {
@@ -160,7 +156,7 @@
 						if (!view || !owns()) return;
 						const { editor } = view;
 						const { panel } = options;
-						return panel && editor.panel.mount(node, EquationEditorPanel, { editor, panel });
+						return panel && editor.panel.mount(node, panel, editor, () => editor.target !== null);
 					},
 					// A block equation this view just created empty (a slash pick, Turn into) opens its editor.
 					onAfterOperation: (change) => {
@@ -207,7 +203,7 @@
 					],
 					blocks: {
 						equation: {
-							...equationKinds.equation,
+							...forms.blocks.equation,
 							snippet: equation,
 							empty: { content: [], children: [] },
 							presets: [
@@ -224,19 +220,13 @@
 									]),
 									group: 'Advanced blocks'
 								}
-							],
-							html: (block) =>
-								`<div data-edytor-equation>${renderer.mathml(expressionOf(block.data), true)}</div>`,
-							plain: (block) => expressionOf(block.data),
-							parse: (element) => parseEquation(element, true)
+							]
 						}
 					},
 					inlineBlocks: {
 						[INLINE]: {
-							snippet: inlineEquation,
-							plain: (data) => expressionOf(data),
-							html: (data) => renderer.mathml(expressionOf(data), false),
-							parse: (element) => parseEquation(element, false)
+							...forms.inlineBlocks.inlineEquation,
+							snippet: inlineEquation
 						}
 					}
 				},