edytor 1.0.0-rc.3 → 2.0.0

package/dist/plugins/code/CodePlugin.svelte

@@ -6,14 +6,13 @@
 	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 { onPress } from '../../events/onFocus.js';
-	import { keywordsOf, labelsWith } from '../../labels.js';
+	import { codeEnglish, keywordsOf, labelsOf } from '../../labels.js';
 	import {
 		DEFAULT_CODE_SETTINGS,
-		codeSettings,
 		languageOf,
 		tokenizeCode,
 		type CodePluginOptions,
@@ -44,12 +43,12 @@
 			const own: CodeSettings = {
 				languages: options.languages ?? DEFAULT_CODE_SETTINGS.languages,
 				defaultLanguage: options.defaultLanguage ?? DEFAULT_CODE_SETTINGS.defaultLanguage,
-				labels: labelsWith('code', options.labels),
 				header: options.header,
 				menu: options.menu
 			};
-			codeSettings.set(edytor, own);
-			// The view's language list: the first code plugin listed owns it.
+			// The view's code options and language list: the first code plugin
+			// listed owns them, as it draws the kind (first listed wins); the
+			// header reads them from it.
 			if (edytor && !languageMenus.has(edytor))
 				languageMenus.set(edytor, new LanguageMenu(edytor, own));
 			const ownMenu = () => {
@@ -67,7 +66,8 @@
 			 * as code editors do.
 			 */
 			const touchedLines = () => {
-				const { startText, endText, yEnd, isCollapsed } = edytor.selection.state;
+				const { startText, endText, yEnd } = edytor.selection.textRange();
+				const { isCollapsed } = edytor.selection.projection;
 				const [from, to] = [startText?.parent, endText?.parent];
 				if (from?.type !== 'codeLine' || to?.type !== 'codeLine' || from.parent !== to.parent)
 					return null;
@@ -83,51 +83,39 @@
 			 * move. The selection keeps its characters.
 			 */
 			const indent = (step: 1 | -1) => {
-				const { startText, endText, yStart, yEnd, isReversed } = edytor.selection.state;
+				const { startText, endText, yStart, yEnd } = edytor.selection.textRange();
+				const { isReversed } = edytor.selection.projection;
 				const shifts = new Map<Text, number>();
 				const kind = step > 0 ? 'indentLines' : 'dedentLines';
 				edytor.dispatcher.each(kind, touchedLines() ?? [], (line) => {
 					const text = line.firstText;
 					if (!text) return;
 					if (step > 0) {
-						text.insertText({ value: '\t', start: 0, end: 0 });
+						edytor.insertText(line.id, text.segStart, '\t');
 						return shifts.set(text, 1);
 					}
 					const removed = /^(\t| {1,2})/.exec(text.stringContent)?.[0].length ?? 0;
 					if (!removed) return;
-					line.deleteContentAtRange({ start: [text.index, 0], end: [text.index, removed] });
+					edytor.deleteText(line.id, text.segStart, removed);
 					shifts.set(text, -removed);
 				});
 				const moved = (text: Text | null, offset: number) =>
 					Math.max(0, offset + (text ? (shifts.get(text) ?? 0) : 0));
 				if (startText && endText)
-					edytor.selection.setAtRange(
+					edytor.selection.selectText(
 						startText,
 						moved(startText, yStart),
 						endText,
 						moved(endText, yEnd),
-						{ isReversed }
+						isReversed
 					);
 			};
 
 			return {
 				onEdytorAttached: ({ node }) => {
 					const menu = ownMenu();
-					if (!menu) return;
-					const offPress = onPress(edytor, node.ownerDocument, menu.pressed, true);
-					const unmount = edytor.overlay.mount(
-						LanguageMenuPanel,
-						{ menu, readonly: () => edytor.readonly },
-						'edytor-code-language-host',
-						// Above the block handles (5), as the equation editor.
-						7,
-						menu.measure
-					);
-					return () => {
-						offPress();
-						unmount();
-						menu.close();
-					};
+					const snippet = menu?.settings.menu;
+					return snippet && menu.panel.mount(node, LanguageMenuPanel, { menu, snippet });
 				},
 				hotkeys: {
 					// Alt+F10 at a caret in a code line: the keys go to its language button
@@ -139,31 +127,35 @@
 					'mod+a': ({ prevent }) => {
 						// Select the code block's text; once it is (or when it has none), Select
 						// all takes the next step: the code block.
-						const { startBlock, startText, endText, yStart, yEnd } = edytor.selection.state;
+						const { startText, endText, yStart, yEnd } = edytor.selection.textRange();
+						const startBlock = startText?.parent;
 						if (startBlock?.type !== 'codeLine' || edytor.selection.selectedBlocks.size) return;
 						const code = edytor.idToBlock.get(edytor.selection.projection.islandRoot ?? '');
 						const [first, last] = [code?.firstEditableText, code?.lastEditableText];
 						if (!first || !last) return;
 						const whole =
 							startText === first && yStart === 0 && endText === last && yEnd === last.length;
-						if (!whole) prevent(() => edytor.selection.setAtTextsRange(first, last));
+						if (!whole) prevent(() => edytor.selection.selectText(first, 0, last, last.length));
 					},
 					escape: () => {
 						// A completion (`end` suggestion) in a code line goes; the key goes on.
-						const { startBlock } = edytor.selection.state;
+						const { startText } = edytor.selection.textRange();
+						const startBlock = startText?.parent;
 						if (startBlock?.type === 'codeLine')
 							for (const ghost of edytor.suggestions.at(startBlock.id).end) ghost.discard();
 					},
 					tab: ({ prevent }) => {
-						const { startText, yStart, startBlock, isCollapsed } = edytor.selection.state;
+						const { startText, yStart } = edytor.selection.textRange();
+						const { isCollapsed } = edytor.selection.projection;
+						const startBlock = startText?.parent;
 						if (startText?.parent.type !== 'codeLine') return;
 						// Tab accepts a completion in a code line (its caret ends it), else indents.
 						const ghost = startBlock && edytor.suggestions.at(startBlock.id).end.at(-1);
 						if (ghost) return prevent(() => ghost.accept());
 						if (isCollapsed) {
 							return prevent(() => {
-								startText.insertText({ value: '\t', start: yStart, end: yStart });
-								edytor.selection.setAtTextOffset(startText, yStart + 1);
+								edytor.insertText(startText.parent.id, startText.segStart + yStart, '\t');
+								edytor.selection.selectText(startText, yStart + 1);
 							});
 						}
 						if (touchedLines()) prevent(() => indent(1));
@@ -173,10 +165,15 @@
 					},
 					'shift+enter': ({ prevent }) => {
 						// Always a new line, in the empty last line too (where Enter leaves the block).
-						const { startBlock: line, isCollapsed } = edytor.selection.state;
+						const { startText } = edytor.selection.textRange();
+						const { isCollapsed } = edytor.selection.projection;
+						const line = startText?.parent;
 						if (line?.type !== 'codeLine') return;
 						if (isCollapsed && line.isEmpty) {
-							const next = () => line.insertBlockAfter({ block: { type: 'codeLine' } });
+							const next = () =>
+								edytor.idToBlock.get(
+									edytor.insertBlocks(siblingSlot(line), [{ type: 'codeLine' }]).ids[0] ?? ''
+								);
 							return prevent(() => edytor.dispatcher.caret(next()?.firstText, 0));
 						}
 						prevent(() => runIntent(edytor, 'insertParagraph'));
@@ -186,33 +183,34 @@
 					// Delete before a code block: an empty block is removed, the caret at
 					// the end of the text before it (else the start of the code); any other
 					// is refused.
-					const code = operation === 'mergeBlockForward' ? shown(block, 'blockAfter') : null;
+					const code = operation === 'mergeForward' ? shown(block, 'blockAfter') : null;
 					if (code?.type === 'code') {
 						if (!block.isEmpty) prevent();
 						prevent(() => {
 							const before = caretBeside(block, 'blockBefore', new Set([block]));
-							block.removeBlock();
+							edytor.deleteBlock(block.id);
 							edytor.dispatcher.caret(before?.text ?? code.firstEditableText, before?.offset ?? 0);
 						});
 					}
 					// Backspace in an empty block right after a code block removes it; the
 					// caret goes to the end of the code (the merge would be refused).
 					const previous =
-						operation === 'mergeBlockBackward' && block.type !== 'codeLine' && block.isEmpty
+						operation === 'mergeBackward' && block.type !== 'codeLine' && block.isEmpty
 							? shown(block, 'blockBefore')
 							: null;
 					if (previous?.type === 'codeLine') {
 						prevent(() => {
-							block.removeBlock();
+							edytor.deleteBlock(block.id);
 							const text = previous.lastText;
 							edytor.dispatcher.caret(text, text?.length ?? 0);
 						});
 					}
 					if (block.type !== 'codeLine') return;
-					const { startText, yStart, isCollapsed } = edytor.selection.state;
+					const { startText } = edytor.selection.textRange();
+					const { isCollapsed } = edytor.selection.projection;
 					if (operation === 'insertText' && isCollapsed && startText) {
-						const { value } = payload;
-						const [at, line] = [payload.start ?? yStart, startText.stringContent];
+						const [id, offset, value, marks] = payload;
+						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));
@@ -220,14 +218,14 @@
 						// 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] ?? ''));
 						if (Object.hasOwn(PAIRS, value) && !inWord) {
-							return { ...payload, value: value + PAIRS[value] };
+							return [id, offset, value + PAIRS[value], marks];
 						}
 					}
 					// A code line never merges out of its island's first or last slot
 					// (the code block renders no content of its own).
 					const siblings = block.parent?.children.length ?? 0;
-					if (operation === 'mergeBlockBackward' && block.index === 0) prevent();
-					if (operation === 'mergeBlockForward' && block.index === siblings - 1) prevent();
+					if (operation === 'mergeBackward' && block.index === 0) prevent();
+					if (operation === 'mergeForward' && block.index === siblings - 1) prevent();
 				},
 
 				blocks: {
@@ -236,9 +234,9 @@
 						snippet: code,
 						presets: [
 							{
-								label: own.labels.code,
+								label: labelsOf(edytor, 'code', codeEnglish).code,
 								icon: '</>',
-								keywords: keywordsOf('block.code', ['code block', 'snippet'], options.keywords),
+								keywords: keywordsOf(edytor, 'block.code', ['code block', 'snippet']),
 								markdown: ['```'],
 								group: 'Media'
 							}
@@ -256,12 +254,14 @@
 							if (!(text instanceof Text)) return;
 							const [first, ...rest] = text.stringContent.split('\n');
 							if (!rest.length) return;
-							text.deleteAt(0, text.stringContent.length);
-							text.insertAt(0, first!);
-							block.parent?.insertChildren(
-								block.index + 1,
-								rest.map((line) => ({ type: 'codeLine', content: [{ text: line }] }))
-							);
+							return () => {
+								const { edytor } = block;
+								edytor.deleteText(block.id, first!.length, text.length - first!.length);
+								edytor.insertBlocks(
+									siblingSlot(block),
+									rest.map((line) => ({ type: 'codeLine', content: [{ text: line }] }))
+								);
+							};
 						}
 					}
 				},
@@ -270,9 +270,6 @@
 				}
 			};
 		};
-
-	/** Code blocks in `CODE_LANGUAGES`, JavaScript by default. */
-	export const codePlugin: Plugin = createCodePlugin();
 </script>
 
 <!-- No whitespace between the header and the code (one node per block less to walk). -->

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

@@ -9,8 +9,6 @@ export { CODE_LANGUAGES, loadCodeLanguage, type CodeLanguage, type CodePluginOpt
  * time a line of it renders.
  */
 export declare const createCodePlugin: (options?: CodePluginOptions) => Plugin;
-/** Code blocks in `CODE_LANGUAGES`, JavaScript by default. */
-export declare const codePlugin: Plugin;
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;

package/dist/plugins/code/LanguageMenu.svelte

@@ -1,134 +1,25 @@
 <script lang="ts">
+	import type { Snippet } from 'svelte';
 	import type { LanguageMenu } from './languageMenu.svelte.js';
 
 	/**
 	 * The code language list (`LanguageMenu`), in the overlay under the
-	 * language button of its block: the plugin's `menu` snippet, else a
-	 * search field holding the keys (a `combobox` naming the highlighted row)
-	 * over the listbox of languages. Both keep the keys and the ARIA through
-	 * the controller's attachments (`keys`, `popup`, `option(index)`).
+	 * language button of its block: the plugin's `menu` snippet, placed. Its
+	 * keys and ARIA are the controller's attachments (`keys`, `popup`,
+	 * `option(index)`).
 	 */
-	let { menu, readonly }: { menu: LanguageMenu; readonly: () => boolean } = $props();
+	let { menu, snippet }: { menu: LanguageMenu; snippet: Snippet<[LanguageMenu]> } = $props();
 
-	const place = $derived(menu.place);
-	const custom = $derived(menu.settings.menu);
-
-	// The view turning readonly closes it.
-	$effect(() => {
-		if (readonly()) menu.lock();
-	});
+	const place = $derived(menu.open && menu.panel.place(4));
 </script>
 
-<div role="presentation">
-	{#if place && custom}
-		<div data-edytor-code-language-panel style:left="{place.left}px" style:top="{place.top}px">
-			{@render custom(menu)}
-		</div>
-	{:else if place}
-		<div data-edytor-code-language-menu style:left="{place.left}px" style:top="{place.top}px">
-			<input
-				type="text"
-				placeholder={menu.labels.search}
-				spellcheck="false"
-				autocomplete="off"
-				autocapitalize="off"
-				value={menu.query}
-				oninput={(event) => menu.search(event.currentTarget.value)}
-				{@attach menu.keys}
-			/>
-			<div data-edytor-code-language-list {@attach menu.popup}>
-				{#each menu.items as item, index (item.item.id)}
-					<!-- The field keeps the focus: a row is pressed, never focused. -->
-					<div
-						{...menu.option(index)}
-						data-edytor-code-language-option={item.item.id}
-						data-current={item.current ? '' : undefined}
-						onmousemove={item.select}
-						onclick={item.run}
-						role="option"
-					>
-						{item.label}
-					</div>
-				{/each}
-			</div>
-			{#if menu.rows.length === 0}
-				<div data-edytor-code-language-empty role="status">{menu.labels.noResults}</div>
-			{/if}
-		</div>
-	{/if}
-</div>
-
-<style>
-	[data-edytor-code-language-panel] {
-		position: absolute;
-	}
-	[data-edytor-code-language-menu] {
-		position: absolute;
-		box-sizing: border-box;
-		display: flex;
-		flex-direction: column;
-		width: 220px;
-		padding: 4px;
-		border-radius: 10px;
-		background: var(--edytor-menu-background, #fff);
-		color: var(--edytor-menu-color, #2c2c2b);
-		box-shadow:
-			0 14px 28px -6px rgba(0, 0, 0, 0.1),
-			0 2px 4px -1px rgba(0, 0, 0, 0.06),
-			0 0 0 1px rgba(84, 72, 49, 0.08);
-		font-size: 14px;
-		line-height: 20px;
-		font-family:
-			ui-sans-serif,
-			-apple-system,
-			BlinkMacSystemFont,
-			'Segoe UI Variable Display',
-			'Segoe UI',
-			Helvetica,
-			Arial,
-			sans-serif;
-	}
-	input {
-		box-sizing: border-box;
-		width: 100%;
-		margin: 0 0 4px;
-		padding: 4px 8px;
-		border: 1px solid rgba(84, 72, 49, 0.16);
-		border-radius: 6px;
-		background: rgba(242, 241, 238, 0.6);
-		color: inherit;
-		font: inherit;
-		outline: none;
-	}
-	input:focus {
-		border-color: var(--edytor-code-accent, #2383e2);
-		box-shadow: 0 0 0 2px rgba(35, 131, 226, 0.2);
-	}
-	[role='listbox'] {
-		max-height: 280px;
-		overflow-y: auto;
-	}
-	[role='option'] {
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-		gap: 8px;
-		height: 28px;
-		padding: 0 8px;
-		border-radius: 6px;
-		white-space: nowrap;
-		cursor: pointer;
-		user-select: none;
-	}
-	/* The block's own language. */
-	[role='option'][data-current]::after {
-		content: '✓';
-	}
-	[role='option'][aria-selected='true'] {
-		background: rgba(84, 72, 49, 0.08);
-	}
-	[data-edytor-code-language-empty] {
-		padding: 4px 8px;
-		color: #73726e;
-	}
-</style>
+{#if place}
+	<div
+		data-edytor-code-language-panel
+		style:position="absolute"
+		style:left="{place.left}px"
+		style:top="{place.top}px"
+	>
+		{@render snippet(menu)}
+	</div>
+{/if}

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

@@ -1,7 +1,8 @@
+import type { Snippet } from 'svelte';
 import type { LanguageMenu } from './languageMenu.svelte.js';
 type $$ComponentProps = {
     menu: LanguageMenu;
-    readonly: () => boolean;
+    snippet: Snippet<[LanguageMenu]>;
 };
 declare const LanguageMenu: import("svelte").Component<$$ComponentProps, {}, "">;
 type LanguageMenu = ReturnType<typeof LanguageMenu>;

package/dist/plugins/code/code.css

@@ -1,128 +1,16 @@
 /*
- * Code blocks, Notion style: a warm gray panel, the language at the top
- * left (a button opening the language list), Copy on hover, and Notion's
- * light syntax theme (Prism's palette, each color darkened to a 4.5:1
- * contrast on the panel, WCAG AA) over TanStack Highlight's `th-*` token
- * classes. The panel's colors are custom properties a theme may set:
- *
- * - `--edytor-code-background`, `--edytor-code-color`: the panel and its text;
- * - `--edytor-code-chrome-color`: the header's language and Copy;
- * - `--edytor-code-chrome-hover`: their background under the pointer;
- * - `--edytor-code-accent`: the focus ring of the header's buttons and the
- *   language list's field.
+ * Code blocks: what makes them work. The code keeps its spaces and lines
+ * and scrolls sideways; the header (the app's markup, `[data-edytor-code-
+ * header]`) is chrome, never selected text. The look (the panel, the
+ * header's place over it, the font and the syntax colours over TanStack
+ * Highlight's `th-*` classes) is a theme's: `edytor/themes/notion.css`.
  */
-[data-edytor-type='code'] {
-	position: relative;
-	margin: 4px 0;
-	padding: 34px 16px 32px 32px;
-	border-radius: 10px;
-	background: var(--edytor-code-background, #f7f6f3);
-	color: var(--edytor-code-color, #2c2c2b);
-}
 [data-edytor-code-header] {
-	position: absolute;
-	top: 6px;
-	left: 10px;
-	right: 8px;
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-	font-size: 12px;
-	line-height: 20px;
-	color: var(--edytor-code-chrome-color, #726f6a);
 	user-select: none;
 }
-/* The language: a button with its chevron, which opens the language list. */
-button[data-edytor-code-language] {
-	display: inline-flex;
-	align-items: center;
-	gap: 4px;
-	margin: 0;
-	padding: 0 4px 0 6px;
-	border: 0;
-	border-radius: 6px;
-	background: transparent;
-	color: inherit;
-	font: inherit;
-	cursor: pointer;
-}
-button[data-edytor-code-language] svg {
-	opacity: 0.7;
-}
-button[data-edytor-code-language]:hover,
-button[data-edytor-code-language][aria-expanded='true'] {
-	background: var(--edytor-code-chrome-hover, rgba(33, 27, 23, 0.06));
-}
-[data-edytor-code-header] button:focus-visible {
-	outline: 2px solid var(--edytor-code-accent, #2383e2);
-	outline-offset: 1px;
-}
-span[data-edytor-code-language] {
-	padding: 0 6px;
-}
-[data-edytor-code-copy] {
-	padding: 0 6px;
-	border-radius: 6px;
-	color: inherit;
-	font: inherit;
-	cursor: pointer;
-	opacity: 0;
-	transition: opacity 150ms ease;
-}
-[data-edytor-type='code']:hover [data-edytor-code-copy],
-[data-edytor-code-copy]:focus-visible {
-	opacity: 1;
-}
-[data-edytor-code-copy]:hover {
-	background: var(--edytor-code-chrome-hover, rgba(33, 27, 23, 0.06));
-}
 pre.th-code {
-	margin: 0;
 	overflow-x: auto;
-	color: inherit;
-	font-family: 'SFMono-Regular', Menlo, Consolas, 'PT Mono', 'Liberation Mono', Courier, monospace;
-	font-size: 85%;
-	line-height: 1.5;
-	text-align: left;
 	white-space: pre;
 	word-break: normal;
 	tab-size: 2;
-	hyphens: none;
-}
-pre.th-code code {
-	font: inherit;
-	background: none;
-	color: inherit;
-	padding: 0;
-}
-.th-comment,
-.th-meta {
-	color: #63717f;
-}
-.th-keyword,
-.th-link {
-	color: #0077aa;
-}
-.th-string,
-.th-attr,
-.th-selector,
-.th-inserted {
-	color: #527a00;
-}
-.th-function,
-.th-type {
-	color: #c2415c;
-}
-.th-number,
-.th-literal,
-.th-tag,
-.th-property,
-.th-deleted {
-	color: #990055;
-}
-.th-variable {
-	color: #9b6300;
-}
-.th-operator {
-	color: #916737;
 }

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

@@ -1,13 +1,10 @@
 import type { Attachment } from 'svelte/attachments';
 import type { Block } from '../../block/block.svelte.js';
-import type { CodeLabels } from '../../labels.js';
-import type { LanguageRow } from './languageMenu.svelte.js';
 /**
  * What a code plugin's `header` snippet receives: the code block's
- * language (`language`, its id; `label`, as shown), the languages the
- * plugin lists (`languages`), whether the language may be changed here
+ * language (`language`, its id; `label`, as shown), whether the language may be changed here
  * (`editable`: an editable view, not a suggestion's preview), the list's
- * state (`expanded`), the actions (`setLanguage`, `toggle`, `copy`, and
+ * state (`expanded`), the actions (`toggle`, the list's own `pick`, `copy`, and
  * `copied` for a moment after a copy) and the plugin's `labels`. Put
  * `{@attach header.button}` on the element that opens the language list:
  * it opens it on a click, ArrowDown or ArrowUp, Escape gives the keys back
@@ -24,18 +21,12 @@ export declare class CodeHeader {
     get language(): string;
     /** The language's label; a language the plugin does not list shows its id (reactive). */
     get label(): string;
-    /** The languages the plugin lists, labeled, in order. */
-    get languages(): LanguageRow[];
-    /** The plugin's words (`language`, `copy`, `copied`, …). */
-    get labels(): CodeLabels;
     /** The view is readonly (reactive). */
     get readonly(): boolean;
     /** The language may be changed here: an editable view, not a suggestion's preview (reactive). */
     get editable(): boolean;
     /** The language list is open on this block (reactive). */
     get expanded(): boolean;
-    /** Set the block's language (one undo step); nothing where it is not `editable`. */
-    setLanguage: (id: string) => void;
     /**
      * Open the language list under the header's button, or close it (`keys`:
      * the keyboard opened it, so the keys go back to the button after).