edytor 1.0.0 → 3.0.0

package/dist/plugins/columns/ColumnResize.svelte

@@ -3,8 +3,9 @@
 
 	/**
 	 * The resize bands of the hovered layout and the guide of a drag
-	 * (`ColumnResize`), in the overlay: each band the gap's left part, above
-	 * the block handles (their `+` and grip together right of it, `gaps.ts`);
+	 * (`ColumnResize`), in the overlay: each band centered in its gap, above
+	 * the block handles (their `+` and grip flush with the
+	 * column, `gaps.ts`);
 	 * hovered, it shows a gray guide in its middle: where the guide shows, a
 	 * press resizes. A band is a focusable separator: its arrows resize
 	 * (`resize.key`), focused it shows its guide in the resize color.

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
@@ -165,7 +160,7 @@
 							ColumnResizeStrips,
 							{ resize },
 							'edytor-column-resizers',
-							// Above the block handles (5): the band is the gap's left part at every height.
+							// Above the block handles (5): the band centered in the gap at every height.
 							6,
 							resize.measure
 						)
@@ -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/gaps.d.ts

@@ -19,11 +19,13 @@ export type Gap = {
  */
 export declare const gapBefore: (column: Block) => Gap | null;
 /**
- * The resize band of `gap`: its left part, `BAND` px (the gap's width when
- * narrower) from the column before it, where the guide shows. The handle of
- * a column's block takes the rest (`handleSpan`): its `+` and grip together
- * flush with the block (Notion's "+ ⋮⋮"), so at the default 46px gap
- * (`--edytor-columns-gap`: 10 + 18 + 18) neither is under the band.
+ * The resize band of `gap`: `BAND` px (the gap's width when narrower)
+ * centered in it, its guide on the gap's middle line (Notion's). The handle
+ * of a column's block takes the gap's right part (`handleSpan`): its box
+ * from the band to the block, its `+` and grip flush with the block
+ * (Notion's "+ ⋮⋮", over the band where the gap is narrower than they are).
+ * At the default 46px gap (`--edytor-columns-gap`): the band 18–28, the
+ * handle's box 28–46.
  */
 export declare const bandOf: ({ left, right }: Gap) => {
     left: number;

package/dist/plugins/columns/gaps.js

@@ -27,13 +27,18 @@ export const gapBefore = (column) => {
     return null;
 };
 /**
- * The resize band of `gap`: its left part, `BAND` px (the gap's width when
- * narrower) from the column before it, where the guide shows. The handle of
- * a column's block takes the rest (`handleSpan`): its `+` and grip together
- * flush with the block (Notion's "+ ⋮⋮"), so at the default 46px gap
- * (`--edytor-columns-gap`: 10 + 18 + 18) neither is under the band.
+ * The resize band of `gap`: `BAND` px (the gap's width when narrower)
+ * centered in it, its guide on the gap's middle line (Notion's). The handle
+ * of a column's block takes the gap's right part (`handleSpan`): its box
+ * from the band to the block, its `+` and grip flush with the block
+ * (Notion's "+ ⋮⋮", over the band where the gap is narrower than they are).
+ * At the default 46px gap (`--edytor-columns-gap`): the band 18–28, the
+ * handle's box 28–46.
  */
-export const bandOf = ({ left, right }) => ({ left, width: Math.min(BAND, right - left) });
+export const bandOf = ({ left, right }) => {
+    const width = Math.min(BAND, right - left);
+    return { left: left + (right - left - width) / 2, width };
+};
 /** The width a column block's handle spans in `gap`: from the band's right edge to the block at `blockLeft`. */
 export const handleSpan = (gap, blockLeft) => {
     const band = bandOf(gap);

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. */
@@ -40,9 +40,9 @@ type Drag = {
 /**
  * The column resize (`docs/columns-plan.md`, "Resize"), chrome in the
  * overlay: while the pointer is over a layout (not readonly, not stacked),
- * a band in each gap between two shown columns (`bandOf`: the gap's left
- * `BAND` px, the layout's height), above the block handles, whose `+` and
- * grip sit together right of it, flush with the block (`gaps.ts`, one
+ * a band in each gap between two shown columns (`bandOf`: `BAND` px centered
+ * in the gap, the layout's height), above the block handles,
+ * whose `+` and grip sit together flush with the block (`gaps.ts`, one
  * measurement):
  * wherever its gray guide shows (`--edytor-columns-resize-color`, Notion's,
  * at any height, block rows included), a press resizes. Dragging one
@@ -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

@@ -1,21 +1,23 @@
 import { pin } from '../../surface/overlay.js';
 import { BandDrag, bandKey } from '../bands.svelte.js';
 import { bandOf, gapBefore } from './gaps.js';
-import { stacks } from './stacking.js';
+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 });
+    return band.left + band.width / 2;
 };
 /**
  * The column resize (`docs/columns-plan.md`, "Resize"), chrome in the
  * overlay: while the pointer is over a layout (not readonly, not stacked),
- * a band in each gap between two shown columns (`bandOf`: the gap's left
- * `BAND` px, the layout's height), above the block handles, whose `+` and
- * grip sit together right of it, flush with the block (`gaps.ts`, one
+ * a band in each gap between two shown columns (`bandOf`: `BAND` px centered
+ * in the gap, the layout's height), above the block handles,
+ * whose `+` and grip sit together flush with the block (`gaps.ts`, one
  * measurement):
  * wherever its gray guide shows (`--edytor-columns-resize-color`, Notion's,
  * at any height, block rows included), a press resizes. Dragging one
@@ -119,12 +121,8 @@ export class ColumnResize {
         const strips = this.shown ? this.#gaps(origin) : [];
         const drag = this.band.drag;
         const guide = drag && {
-            // Where the hover guide showed: the band's middle, never the gap's (it would jump onto the `+`).
-            x: drag.start +
-                this.#widthAt(drag) +
-                bandOf({ left: 0, right: drag.gap }).width / 2 -
-                GUIDE / 2 -
-                origin.left,
+            // Where the hover guide showed: the band's middle, the gap's (`bandOf`).
+            x: drag.start + this.#widthAt(drag) + middleOf(drag.gap) - GUIDE / 2 - origin.left,
             top: drag.top - origin.top,
             height: drag.height
         };

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,6 @@
 <script module lang="ts">
+	import { equationForms } from '../../export/forms.js';
+	import './equation.css';
 	import type {
 		BlockSnippetPayload,
 		InlineBlockSnippetPayload,
@@ -7,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,
@@ -27,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,
@@ -100,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. */
@@ -142,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, {
@@ -159,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) => {
@@ -206,7 +203,7 @@
 					],
 					blocks: {
 						equation: {
-							...equationKinds.equation,
+							...forms.blocks.equation,
 							snippet: equation,
 							empty: { content: [], children: [] },
 							presets: [
@@ -223,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
 						}
 					}
 				},
@@ -273,11 +264,3 @@
 		role="presentation"><EquationView expression={expressionOf(block.data)} display={false} /></span
 	>
 {/snippet}
-
-<style>
-	/* A wide equation scrolls in its block; its look is a theme's. */
-	[data-edytor-equation] {
-		overflow-x: auto;
-		overflow-y: hidden;
-	}
-</style>

package/dist/plugins/equation/EquationPlugin.svelte.d.ts

@@ -1,3 +1,4 @@
+import './equation.css';
 import type { Plugin } from '../../plugins.js';
 import { EquationEditor, type EquationData, type EquationErrorPayload, type EquationPlaceholderPayload, type EquationPluginOptions, type EquationTarget, type KatexLike, type KatexLoader } from './equation.svelte.js';
 export type { EquationData, EquationEditor, EquationErrorPayload, EquationPlaceholderPayload, EquationPluginOptions, EquationTarget, KatexLike, KatexLoader };

package/dist/plugins/equation/equation.css

@@ -0,0 +1,7 @@
+/* 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). */
+/* A wide equation scrolls in its block; its look is a theme's. */
+[data-edytor-equation] {
+	overflow-x: auto;
+	overflow-y: hidden;
+}

package/dist/plugins/equation/equation.svelte.d.ts

@@ -1,6 +1,7 @@
 import { type Snippet } from 'svelte';
 import type { Attachment } from 'svelte/attachments';
 import type { Edytor } from '../../edytor.svelte.js';
+export { TEX, expressionOf, parseEquation, sourceMathml, type EquationData } from './tex.js';
 /** The part of KaTeX the plugin uses: `katex.renderToString`. */
 export type KatexLike = {
     renderToString: (tex: string, options?: Record<string, unknown>) => string;
@@ -66,20 +67,12 @@ export type EquationErrorPayload = {
     /** The view's word for it (`equation.invalid`). */
     label: string;
 };
-/** The data of a block equation and of an inline one: its TeX source. */
-export type EquationData = {
-    expression?: string;
-};
 /** What drawing an equation gives: KaTeX's markup, its error, or nothing yet (the source shows). */
 export type Drawn = {
     html: string;
 } | {
     error: string;
 } | null;
-/** The MathML annotation that carries an equation's TeX source. */
-export declare const TEX = "application/x-tex";
-/** An equation's TeX source: its `expression`, a string. */
-export declare const expressionOf: (data: unknown) => string;
 /**
  * KaTeX for one plugin: loaded once, the first time an equation is drawn in
  * a browser, and reactive (an equation drawn before it loads shows its
@@ -104,13 +97,6 @@ export declare class EquationRenderer {
     mathml: (tex: string, display: boolean) => string;
     private options;
 }
-/**
- * HTML import: the TeX source an equation's element carries — a `<math>`'s
- * `application/x-tex` annotation (or its `alttext`), alone or in KaTeX's
- * markup (`.katex`, `.katex-display`) — when the element is an equation of
- * the display asked (`display="block"`: a block), else `undefined`.
- */
-export declare const parseEquation: (element: HTMLElement, display: boolean) => EquationData | undefined;
 /** The equation being edited: a block equation, or an inline one (`atom`) in block `block`. */
 export type EquationTarget = {
     block: string;
@@ -141,6 +127,12 @@ export declare class EquationEditor {
     target: EquationTarget | null;
     /** The view is readonly (reactive): the editor closes. */
     get readonly(): boolean;
+    /**
+     * Where the panel stands: the edited equation (`ChromeAnchor`; Notion
+     * centers it under a block equation, `display`, and starts it under an
+     * inline one).
+     */
+    get anchor(): import("../chrome.js").ChromeAnchor;
     /** A block equation is edited (a field of several lines). */
     get display(): boolean;
     /** The edited equation's TeX source (reactive through its block's cell). */

package/dist/plugins/equation/equation.svelte.js

@@ -3,15 +3,10 @@ import { blockSelection } from '../../session/selection.js';
 import { InlineBlock } from '../../block/inlineBlock.svelte.js';
 import { takeKeys } from '../../events/onFocus.js';
 import { Anchored } from '../anchored.svelte.js';
-import { escapeHtml } from '../../clipboard/serializeClipboardFragment.js';
+import { expressionOf, sourceMathml } from './tex.js';
+export { TEX, expressionOf, parseEquation, sourceMathml } from './tex.js';
 import { all, listen } from '../../utils/listen.js';
-/** The MathML annotation that carries an equation's TeX source. */
-export const TEX = 'application/x-tex';
-/** An equation's TeX source: its `expression`, a string. */
-export const expressionOf = (data) => {
-    const value = data?.expression;
-    return typeof value === 'string' ? value : '';
-};
+import { keysOf } from '../list.svelte.js';
 /** The cap of the drawings each renderer keeps. */
 const CACHE = 256;
 /**
@@ -73,9 +68,7 @@ export class EquationRenderer {
                 // TeX KaTeX cannot read: the source as text, below.
             }
         }
-        const source = escapeHtml(tex);
-        return (`<span class="katex"><math xmlns="http://www.w3.org/1998/Math/MathML"${display ? ' display="block"' : ''}>` +
-            `<semantics><mrow><mtext>${source}</mtext></mrow><annotation encoding="${TEX}">${source}</annotation></semantics></math></span>`);
+        return sourceMathml(tex, display);
     };
     options = (display, output) => ({
         displayMode: display,
@@ -97,29 +90,6 @@ export class EquationRenderer {
         }, (error) => console.error('[edytor] KaTeX failed to load', error));
     };
 }
-/**
- * HTML import: the TeX source an equation's element carries — a `<math>`'s
- * `application/x-tex` annotation (or its `alttext`), alone or in KaTeX's
- * markup (`.katex`, `.katex-display`) — when the element is an equation of
- * the display asked (`display="block"`: a block), else `undefined`.
- */
-export const parseEquation = (element, display) => {
-    const own = element.localName === 'math';
-    const wrapper = element.classList.contains('katex') ||
-        element.classList.contains('katex-display') ||
-        element.hasAttribute('data-edytor-equation');
-    if (!own && !wrapper)
-        return undefined;
-    const math = own ? element : element.querySelector('math');
-    if (!math)
-        return undefined;
-    const block = math.getAttribute('display') === 'block' || element.classList.contains('katex-display');
-    if (block !== display)
-        return undefined;
-    const tex = math.querySelector(`annotation[encoding="${TEX}"]`)?.textContent ??
-        math.getAttribute('alttext');
-    return tex?.trim() ? { expression: tex.trim() } : undefined;
-};
 /**
  * One view's equation editor (Notion's): a click on an equation of an
  * editable view (Enter on a selected one, or a new empty one) opens its
@@ -161,12 +131,12 @@ export class EquationEditor {
         return this.edytor.readonly;
     }
     /**
-     * Where the panel stands: under the edited equation (a block one's
-     * middle, an inline one's start), layer-relative.
-     * @internal
+     * Where the panel stands: the edited equation (`ChromeAnchor`; Notion
+     * centers it under a block equation, `display`, and starts it under an
+     * inline one).
      */
-    get place() {
-        return this.target && this.panel.place(6, this.display);
+    get anchor() {
+        return this.panel.anchor;
     }
     /** A block equation is edited (a field of several lines). */
     get display() {
@@ -216,7 +186,6 @@ export class EquationEditor {
         if (!target)
             return;
         this.target = null;
-        this.panel.box = null;
         this.edytor.overlay.invalidate();
         const block = this.#block(target);
         if (!block)
@@ -248,16 +217,10 @@ export class EquationEditor {
      * them. Focus leaving the panel for somewhere else closes it.
      */
     field = (node) => untrack(() => {
-        const keydown = (event) => {
-            if (event.isComposing)
-                return;
-            const enter = event.key === 'Enter' && !(event.shiftKey && this.display);
-            if (!enter && event.key !== 'Escape')
-                return;
-            event.preventDefault();
-            event.stopPropagation();
-            this.close();
-        };
+        const keydown = keysOf({
+            Enter: (event) => !(event.shiftKey && this.display) && this.close(),
+            Escape: () => this.close()
+        }, true);
         const element = node;
         const off = listen(element, 'keydown', keydown);
         const off2 = listen(element, 'focusout', this.panel.blurred);

package/dist/plugins/equation/tex.d.ts

@@ -0,0 +1,17 @@
+/** The data of a block equation and of an inline one: its TeX source. */
+export type EquationData = {
+    expression?: string;
+};
+/** The MathML annotation that carries an equation's TeX source. */
+export declare const TEX = "application/x-tex";
+/** An equation's TeX source: its `expression`, a string. */
+export declare const expressionOf: (data: unknown) => string;
+/** MathML whose `application/x-tex` annotation is `tex`, the source as its text, in KaTeX's `katex` class. */
+export declare const sourceMathml: (tex: string, display: boolean) => string;
+/**
+ * HTML import: the TeX source an equation's element carries — a `<math>`'s
+ * `application/x-tex` annotation (or its `alttext`), alone or in KaTeX's
+ * markup (`.katex`, `.katex-display`) — when the element is an equation of
+ * the display asked (`display="block"`: a block), else `undefined`.
+ */
+export declare const parseEquation: (element: HTMLElement, display: boolean) => EquationData | undefined;

package/dist/plugins/equation/tex.js

@@ -0,0 +1,42 @@
+/**
+ * An equation's pure forms: its data, its TeX source, the MathML that
+ * carries the source (`sourceMathml`, the clipboard's form before KaTeX
+ * loads and the export's on a server) and its HTML import. No Svelte.
+ */
+import { escapeHtml } from '../../clipboard/serializeClipboardFragment.js';
+/** The MathML annotation that carries an equation's TeX source. */
+export const TEX = 'application/x-tex';
+/** An equation's TeX source: its `expression`, a string. */
+export const expressionOf = (data) => {
+    const value = data?.expression;
+    return typeof value === 'string' ? value : '';
+};
+/** MathML whose `application/x-tex` annotation is `tex`, the source as its text, in KaTeX's `katex` class. */
+export const sourceMathml = (tex, display) => {
+    const source = escapeHtml(tex);
+    return (`<span class="katex"><math xmlns="http://www.w3.org/1998/Math/MathML"${display ? ' display="block"' : ''}>` +
+        `<semantics><mrow><mtext>${source}</mtext></mrow><annotation encoding="${TEX}">${source}</annotation></semantics></math></span>`);
+};
+/**
+ * HTML import: the TeX source an equation's element carries — a `<math>`'s
+ * `application/x-tex` annotation (or its `alttext`), alone or in KaTeX's
+ * markup (`.katex`, `.katex-display`) — when the element is an equation of
+ * the display asked (`display="block"`: a block), else `undefined`.
+ */
+export const parseEquation = (element, display) => {
+    const own = element.localName === 'math';
+    const wrapper = element.classList.contains('katex') ||
+        element.classList.contains('katex-display') ||
+        element.hasAttribute('data-edytor-equation');
+    if (!own && !wrapper)
+        return undefined;
+    const math = own ? element : element.querySelector('math');
+    if (!math)
+        return undefined;
+    const block = math.getAttribute('display') === 'block' || element.classList.contains('katex-display');
+    if (block !== display)
+        return undefined;
+    const tex = math.querySelector(`annotation[encoding="${TEX}"]`)?.textContent ??
+        math.getAttribute('alttext');
+    return tex?.trim() ? { expression: tex.trim() } : undefined;
+};