edytor 1.0.0-rc.3 → 2.0.0

package/dist/plugins/comments/commentsPlugin.js

@@ -1,6 +1,6 @@
 import { mount, unmount } from 'svelte';
 import { commentMarks } from '../../crdt/semantics.js';
-import { labelsWith } from '../../labels.js';
+import { commentsEnglish, labelsOf } from '../../labels.js';
 import CommentsSidebar from './CommentsSidebar.svelte';
 import { CommentsController } from './CommentsController.svelte.js';
 const controllers = new WeakMap();
@@ -13,17 +13,16 @@ export const commentsController = (edytor) => controllers.get(edytor);
  * merges and that copy and cut leave behind; its comments live in the
  * client's store (the room's `threads` and `comments` tables). Open threads
  * are highlighted, and a sidebar beside the text (under it, on a narrow
- * screen) shows each one with its replies, a composer, Resolve and Re-open.
+ * screen) places a `card` for each one.
  */
 export const createCommentsPlugin = (options) => (edytor) => {
-    const labels = labelsWith('comments', options.labels);
+    const labels = labelsOf(edytor, 'comments', commentsEnglish);
     const user = typeof options.user === 'string' ? { id: options.user } : options.user;
     const comments = new CommentsController(edytor, {
         client: options.client,
         user,
         users: options.users,
-        onComment: options.onComment,
-        labels
+        onComment: options.onComment
     });
     controllers.set(edytor, comments);
     return {
@@ -47,13 +46,16 @@ export const createCommentsPlugin = (options) => (edytor) => {
         onSelectionChange: () => comments.follow(),
         onEdytorAttached: () => {
             comments.connect();
-            const sidebar = mount(CommentsSidebar, {
-                target: edytor.overlay.layer,
-                props: { edytor, comments, card: options.card }
-            });
+            const { card, header } = options;
+            const sidebar = card &&
+                mount(CommentsSidebar, {
+                    target: edytor.overlay.layer,
+                    props: { edytor, comments, card, header }
+                });
             return () => {
                 comments.destroy();
-                void unmount(sidebar);
+                if (sidebar)
+                    void unmount(sidebar);
             };
         }
     };

package/dist/plugins/equation/EquationEditor.svelte

@@ -4,138 +4,24 @@
 
 	/**
 	 * The equation editor (`EquationEditor`), in the overlay under the edited
-	 * equation (Notion's): the plugin's `panel` snippet, else the TeX source
-	 * in a field, KaTeX's error under it, and Done. The equation itself is the
-	 * preview: each keystroke writes it. Both take the field's focus and keys
-	 * through the controller's attachment (`field`).
+	 * equation (Notion's), centered under a block one: the plugin's `panel`
+	 * snippet, placed. It takes the field's focus and keys through the
+	 * controller's attachment (`field`).
 	 */
-	let {
-		editor,
-		readonly,
-		panel
-	}: { editor: EquationEditor; readonly: () => boolean; panel?: Snippet<[EquationEditor]> } =
-		$props();
+	let { editor, panel }: { editor: EquationEditor; panel: Snippet<[EquationEditor]> } = $props();
 
-	const labels = $derived(editor.labels);
 	const place = $derived(editor.place);
-
-	// The view turning readonly closes it.
-	$effect(() => {
-		if (readonly()) editor.lock();
-	});
 </script>
 
-<div role="presentation">
-	{#if place && panel}
-		<div
-			data-edytor-equation-panel
-			data-display={editor.display ? 'block' : 'inline'}
-			style:left="{place.left}px"
-			style:top="{place.top}px"
-		>
-			{@render panel(editor)}
-		</div>
-	{:else if place}
-		<div
-			data-edytor-equation-editor
-			role="dialog"
-			aria-label={labels.editor}
-			data-display={editor.display ? 'block' : 'inline'}
-			style:left="{place.left}px"
-			style:top="{place.top}px"
-		>
-			<div data-edytor-equation-editor-row>
-				<textarea
-					aria-label={labels.editor}
-					placeholder={labels.placeholder}
-					rows={editor.display ? 3 : 1}
-					spellcheck="false"
-					autocomplete="off"
-					autocapitalize="off"
-					value={editor.expression}
-					oninput={(event) => editor.set(event.currentTarget.value)}
-					{@attach editor.field}
-				></textarea>
-				<button
-					type="button"
-					data-edytor-equation-done
-					onmousedown={(event) => event.preventDefault()}
-					onclick={() => editor.close()}>{labels.done} <span aria-hidden="true">↵</span></button
-				>
-			</div>
-			{#if editor.error}
-				<div data-edytor-equation-editor-error role="status">{editor.error}</div>
-			{/if}
-		</div>
-	{/if}
-</div>
-
-<style>
-	[data-edytor-equation-editor] {
-		position: absolute;
-		box-sizing: border-box;
-		width: 400px;
-		max-width: calc(100vw - 32px);
-		padding: 8px;
-		border-radius: 8px;
-		background: var(--edytor-equation-editor-background, #fff);
-		box-shadow:
-			0 0 0 1px rgba(15, 15, 15, 0.05),
-			0 3px 6px rgba(15, 15, 15, 0.1),
-			0 9px 24px rgba(15, 15, 15, 0.2);
-		font-size: 14px;
-	}
-
-	/* An app's panel: placed as the built-in one, centered under a block equation. */
-	[data-edytor-equation-panel] {
-		position: absolute;
-	}
-
-	[data-edytor-equation-panel][data-display='block'],
-	[data-edytor-equation-editor][data-display='block'] {
-		transform: translateX(-50%);
-	}
-
-	[data-edytor-equation-editor-row] {
-		display: flex;
-		gap: 8px;
-		align-items: flex-start;
-	}
-
-	textarea {
-		flex: 1;
-		box-sizing: border-box;
-		min-height: 32px;
-		padding: 6px 8px;
-		border: 0;
-		border-radius: 4px;
-		background: rgba(242, 241, 238, 0.6);
-		box-shadow: inset 0 0 0 1px rgba(15, 15, 15, 0.1);
-		font:
-			13px/1.5 ui-monospace,
-			SFMono-Regular,
-			Menlo,
-			monospace;
-		outline: 0;
-		resize: vertical;
-	}
-
-	[data-edytor-equation-done] {
-		flex: none;
-		height: 32px;
-		padding: 0 12px;
-		border: 0;
-		border-radius: 4px;
-		background: rgb(35, 131, 226);
-		color: #fff;
-		font: inherit;
-		font-weight: 500;
-		cursor: pointer;
-	}
-
-	[data-edytor-equation-editor-error] {
-		margin-top: 6px;
-		color: rgb(212, 76, 71);
-		font-size: 12px;
-	}
-</style>
+{#if place}
+	<div
+		data-edytor-equation-panel
+		data-display={editor.display ? 'block' : 'inline'}
+		style:position="absolute"
+		style:left="{place.left}px"
+		style:top="{place.top}px"
+		style:transform={editor.display ? 'translateX(-50%)' : undefined}
+	>
+		{@render panel(editor)}
+	</div>
+{/if}

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

@@ -2,8 +2,7 @@ import type { Snippet } from 'svelte';
 import type { EquationEditor } from './equation.svelte.js';
 type $$ComponentProps = {
     editor: EquationEditor;
-    readonly: () => boolean;
-    panel?: Snippet<[EquationEditor]>;
+    panel: Snippet<[EquationEditor]>;
 };
 declare const EquationEditor: import("svelte").Component<$$ComponentProps, {}, "">;
 type EquationEditor = ReturnType<typeof EquationEditor>;

package/dist/plugins/equation/EquationPlugin.svelte

@@ -1,4 +1,5 @@
 <script module lang="ts">
+	import './equation.css';
 	import type {
 		BlockSnippetPayload,
 		InlineBlockSnippetPayload,
@@ -8,29 +9,32 @@
 	import type { Edytor } from '../../edytor.svelte.js';
 	import { InlineBlock } from '../../block/inlineBlock.svelte.js';
 	import { equationKinds } from '../../crdt/semantics.js';
-	import { keywordsOf, labelsWith } from '../../labels.js';
-	import { onPress } from '../../events/onFocus.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,
-		equationLabels,
 		equationViews,
 		expressionOf,
 		parseEquation,
 		type EquationData,
+		type EquationErrorPayload,
+		type EquationPlaceholderPayload,
 		type EquationPluginOptions,
 		type EquationTarget,
 		type KatexLike,
 		type KatexLoader
 	} from './equation.svelte.js';
 	import { katexLoaderOf } from './katex.js';
+	import { withRulesAndTriggers } from '../triggers/triggers.js';
 
 	export type {
 		EquationData,
 		EquationEditor,
+		EquationErrorPayload,
+		EquationPlaceholderPayload,
 		EquationPluginOptions,
 		EquationTarget,
 		KatexLike,
@@ -43,7 +47,7 @@
 
 	/** The block that holds the caret or a text range in one block, when an atom may go there. */
 	const textBlock = (edytor: Edytor) => {
-		const { startText, endText } = edytor.selection.state;
+		const { startText, endText } = edytor.selection.textRange();
 		const block = startText?.parent;
 		if (!block || endText?.parent !== block || edytor.selection.value.kind !== 'text') return null;
 		// Not in a code line (an island of lines holds text only).
@@ -60,15 +64,13 @@
 		const block = textBlock(edytor);
 		const view = equationViews.get(edytor);
 		if (!block || !view || !edytor.dispatcher.permits()) return false;
-		const { startText, endText, yStart, yEnd, isCollapsed } = edytor.selection.state;
+		const { startText, endText, yStart, yEnd } = edytor.selection.textRange();
+		const { isCollapsed } = edytor.selection.projection;
 		const from = startText!.segStart + yStart;
 		const atom = id('i');
 		if (isCollapsed) {
-			const after = block.addInlineBlock({
-				offset: from,
-				block: { id: atom, type: INLINE, data: { expression: '' } }
-			});
-			if (!after) return false;
+			const spec = { id: atom, type: INLINE, data: { expression: '' } };
+			if (edytor.insertInline(block.id, from, spec).status !== 'applied') return false;
 			edytor.selection.setCaret({ block, offset: from + 1 });
 			view.editor.open({ block: block.id, atom });
 			return true;
@@ -89,10 +91,7 @@
 		const { dispatcher, facade } = edytor;
 		const removal = facade.prepare.deleteText(block.id, from, endText!.segStart + yEnd - from);
 		const run = dispatcher.lead(removal, () =>
-			block.addInlineBlock({
-				offset: from,
-				block: { id: atom, type: INLINE, data: { expression } }
-			})
+			edytor.insertInline(block.id, from, { id: atom, type: INLINE, data: { expression } })
 		);
 		const written = run.taken && dispatcher.last?.status === 'applied';
 		if (written) edytor.selection.setCaret({ block, offset: from + 1 });
@@ -102,14 +101,12 @@
 	/** `$$E=mc^2$$` typed in text: an inline equation (Notion). */
 	const dollars: InputRule = {
 		find: /\$\$([^$\n]*[^$\s][^$\n]*)\$\$$/,
-		replace: ([, tex], { block, from, caret, remove }) =>
+		replace: ([, tex], { edytor, block, from, caret, remove }) =>
 			remove(() => {
-				const after = block.addInlineBlock({
-					offset: from,
-					block: { type: INLINE, data: { expression: tex!.trim() } }
-				});
-				if (after) caret(from + 1);
-				return !!after;
+				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;
 			})
 	};
 
@@ -144,110 +141,107 @@
 	export const createEquationPlugin =
 		(options: EquationPluginOptions = {}): Plugin =>
 		(edytor) => {
-			const labels = labelsWith('equation', options.labels);
-			equationLabels.claim(edytor, labels);
+			const labels = labelsOf(edytor, 'equation', equationEnglish);
 			const renderer = new EquationRenderer(katexLoaderOf(options.katex), options.macros);
 			// The records read with no view (`plugin(undefined)`) keep no state.
 			if (edytor && !equationViews.has(edytor))
 				equationViews.set(edytor, {
 					renderer,
-					editor: new EquationEditor(edytor, renderer, labels)
+					editor: new EquationEditor(edytor, renderer),
+					placeholder: options.placeholder,
+					error: options.error
 				});
 			const owns = () => equationViews.get(edytor)?.renderer === renderer;
-			return {
-				onEdytorAttached: ({ node }) => {
-					const view = equationViews.get(edytor);
-					if (!view || !owns()) return;
-					const { editor } = view;
-					const offPress = onPress(edytor, node.ownerDocument, editor.pressed, true);
-					const unmount = edytor.overlay.mount(
-						EquationEditorPanel,
-						{ editor, readonly: () => edytor.readonly, panel: options.panel },
-						'edytor-equation-editor-host',
-						// Above the block handles (5), as the image chrome.
-						7,
-						editor.measure
-					);
-					return () => {
-						offPress();
-						unmount();
-						editor.close(false);
-					};
-				},
-				// A block equation this view just created empty (a slash pick, Turn into) opens its editor.
-				onAfterOperation: (change) => {
-					const view = equationViews.get(edytor);
-					if (!view || !owns() || edytor.dispatcher.last?.status !== 'applied') return;
-					const created =
-						change.operation === 'setBlock' && change.payload.value.type === 'equation'
-							? change.block
-							: change.operation === 'insertBlockAfter' && change.payload.block.type === 'equation'
-								? change.block.nextBlock
-								: change.operation === 'insertBlockBefore' &&
-									  change.payload.block.type === 'equation'
-									? change.block.previousBlock
-									: null;
-					if (created?.type === 'equation' && !expressionOf(created.data))
-						view.editor.open({ block: created.id });
-				},
-				hotkeys: {
-					'mod+shift+e': ({ prevent }) => {
-						if (textBlock(edytor)) prevent(() => insertInline(edytor));
+			return withRulesAndTriggers(
+				edytor,
+				{
+					onEdytorAttached: ({ node }) => {
+						const view = equationViews.get(edytor);
+						if (!view || !owns()) return;
+						const { editor } = view;
+						const { panel } = options;
+						return panel && editor.panel.mount(node, EquationEditorPanel, { editor, panel });
 					},
-					enter: ({ prevent }) => {
-						const target = selectedEquation(edytor);
-						if (target && edytor.dispatcher.permits())
-							prevent(() => equationViews.get(edytor)?.editor.open(target));
-					}
-				},
-				commands: [
-					{
-						id: 'equation.inline',
-						label: labels.inline,
-						icon: '√x',
-						keywords: keywordsOf(
-							'equation.inline',
-							['math', 'tex', 'latex', 'katex', 'formula', 'inline'],
-							options.keywords
-						),
-						group: 'Inline',
-						isEnabled: (view) => textBlock(view) !== null,
-						run: () => insertInline(edytor)
-					}
-				],
-				inputRules: [dollars],
-				blocks: {
-					equation: {
-						...equationKinds.equation,
-						snippet: equation,
-						empty: { content: [], children: [] },
-						presets: [
-							{
-								label: labels.block,
-								icon: '√x',
-								keywords: keywordsOf(
-									'block.equation',
-									['math', 'tex', 'latex', 'katex', 'formula', 'equation'],
-									options.keywords
-								),
-								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)
+					// A block equation this view just created empty (a slash pick, Turn into) opens its editor.
+					onAfterOperation: (change) => {
+						const view = equationViews.get(edytor);
+						if (!view || !owns() || edytor.dispatcher.last?.status !== 'applied') return;
+						const ids =
+							change.operation === 'setBlock'
+								? [change.block.id]
+								: change.operation === 'insertBlocks'
+									? (change.effect?.creates ?? [])
+									: [];
+						const created = ids
+							.map((id) => edytor.idToBlock.get(id))
+							.find((block) => block?.type === 'equation');
+						if (created && !expressionOf(created.data)) view.editor.open({ block: created.id });
+					},
+					hotkeys: {
+						'mod+shift+e': ({ prevent }) => {
+							if (textBlock(edytor)) prevent(() => insertInline(edytor));
+						},
+						enter: ({ prevent }) => {
+							const target = selectedEquation(edytor);
+							if (target && edytor.dispatcher.permits())
+								prevent(() => equationViews.get(edytor)?.editor.open(target));
+						}
+					},
+					commands: [
+						{
+							id: 'equation.inline',
+							label: labels.inline,
+							icon: '√x',
+							keywords: keywordsOf(edytor, 'equation.inline', [
+								'math',
+								'tex',
+								'latex',
+								'katex',
+								'formula',
+								'inline'
+							]),
+							group: 'Inline',
+							isEnabled: (view) => textBlock(view) !== null,
+							run: () => insertInline(edytor)
+						}
+					],
+					blocks: {
+						equation: {
+							...equationKinds.equation,
+							snippet: equation,
+							empty: { content: [], children: [] },
+							presets: [
+								{
+									label: labels.block,
+									icon: '√x',
+									keywords: keywordsOf(edytor, 'block.equation', [
+										'math',
+										'tex',
+										'latex',
+										'katex',
+										'formula',
+										'equation'
+									]),
+									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)
+						}
 					}
 				},
-				inlineBlocks: {
-					[INLINE]: {
-						snippet: inlineEquation,
-						plain: (data) => expressionOf(data),
-						html: (data) => renderer.mathml(expressionOf(data), false),
-						parse: (element) => parseEquation(element, false)
-					}
-				}
-			};
+				{ inputRules: [dollars] }
+			);
 		};
 </script>
 
@@ -280,60 +274,3 @@
 		role="presentation"><EquationView expression={expressionOf(block.data)} display={false} /></span
 	>
 {/snippet}
-
-<style>
-	[data-edytor-equation] {
-		padding: 4px 0;
-		border-radius: 4px;
-		overflow-x: auto;
-		overflow-y: hidden;
-		text-align: center;
-		cursor: pointer;
-	}
-
-	[data-edytor-equation]:hover,
-	[data-edytor-equation][data-editing='true'] {
-		background: rgba(55, 53, 47, 0.06);
-	}
-
-	[data-edytor-inline-equation] {
-		border-radius: 3px;
-		cursor: pointer;
-	}
-
-	[data-edytor-inline-equation][data-editing='true'],
-	[data-edytor-inline-equation][data-selected='true'] {
-		background: rgba(35, 131, 226, 0.14);
-	}
-
-	[data-edytor-equation] :global([data-edytor-equation-placeholder]),
-	[data-edytor-inline-equation] :global([data-edytor-equation-placeholder]) {
-		color: rgba(55, 53, 47, 0.5);
-	}
-
-	[data-edytor-equation] :global([data-edytor-equation-placeholder]) {
-		display: flex;
-		align-items: center;
-		gap: 8px;
-		padding: 8px 12px;
-		border-radius: 4px;
-		background: rgba(242, 241, 238, 0.6);
-		text-align: left;
-	}
-
-	:global([data-edytor-equation-icon]) {
-		font-style: italic;
-		margin-right: 4px;
-	}
-
-	:global([data-edytor-equation-error]),
-	:global([data-edytor-equation-source]) {
-		font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
-		font-size: 0.9em;
-		white-space: pre-wrap;
-	}
-
-	:global([data-edytor-equation-error]) {
-		color: rgb(212, 76, 71);
-	}
-</style>

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

@@ -1,6 +1,7 @@
+import './equation.css';
 import type { Plugin } from '../../plugins.js';
-import { EquationEditor, type EquationData, type EquationPluginOptions, type EquationTarget, type KatexLike, type KatexLoader } from './equation.svelte.js';
-export type { EquationData, EquationEditor, EquationPluginOptions, EquationTarget, KatexLike, KatexLoader };
+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 };
 export { KATEX_CDN, KATEX_VERSION } from './katex.js';
 /**
  * Equations (Notion's): a block equation (`equation`, void, its TeX in

package/dist/plugins/equation/EquationView.svelte

@@ -1,34 +1,43 @@
 <script lang="ts">
 	import { getContext } from 'svelte';
 	import type { Edytor } from '../../edytor.svelte.js';
-	import { equationLabels, equationViews } from './equation.svelte.js';
+	import { equationEnglish, labelsOf } from '../../labels.js';
+	import { equationViews } from './equation.svelte.js';
 
 	/**
 	 * An equation as drawn: KaTeX's markup, its source while KaTeX loads (or
-	 * with no loader), the source marked invalid when KaTeX cannot read it,
-	 * or the placeholder when it is empty. Reads its view's renderer from the
-	 * editor it renders in (a suggestion's preview included).
+	 * with no loader), the source marked invalid when KaTeX cannot read it
+	 * (the app's `error` snippet, if any), or the placeholder when it is
+	 * empty (the app's `placeholder`, if any). Reads its view's renderer from
+	 * the editor it renders in (a suggestion's preview included).
 	 */
 	let { expression, display }: { expression: string; display: boolean } = $props();
 
 	const edytor = getContext<Edytor | undefined>('edytor');
 	const view = $derived(edytor ? equationViews.get(edytor) : undefined);
-	const labels = $derived(equationLabels.of(edytor));
+	const labels = $derived(labelsOf(edytor, 'equation', equationEnglish));
 	const drawn = $derived(expression ? (view?.renderer.draw(expression, display) ?? null) : null);
 </script>
 
 {#if !expression}
-	<span data-edytor-equation-placeholder
-		><span aria-hidden="true" data-edytor-equation-icon>√x</span>{display
-			? labels.blockPlaceholder
-			: labels.inlinePlaceholder}</span
-	>
+	{@const label = display ? labels.blockPlaceholder : labels.inlinePlaceholder}
+	{#if view?.placeholder}{@render view.placeholder({ display, label })}{:else}<span
+			data-edytor-equation-placeholder
+			><span aria-hidden="true" data-edytor-equation-icon>√x</span>{label}</span
+		>{/if}
 {:else if drawn && 'html' in drawn}
 	<!-- KaTeX's markup, drawn untrusted (`trust: false`). -->
 	<!-- eslint-disable-next-line svelte/no-at-html-tags -->
 	{@html drawn.html}
 {:else if drawn}
-	<span data-edytor-equation-error title="{labels.invalid}: {drawn.error}">{expression}</span>
+	{#if view?.error}{@render view.error({
+			display,
+			expression,
+			error: drawn.error,
+			label: labels.invalid
+		})}{:else}<span data-edytor-equation-error title="{labels.invalid}: {drawn.error}"
+			>{expression}</span
+		>{/if}
 {:else}
 	<span data-edytor-equation-source>{expression}</span>
 {/if}

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;
+}