edytor 1.0.0-rc.3 → 2.0.0

package/dist/plugins/find/FindController.svelte.js

@@ -1,7 +1,9 @@
+import { untrack } from 'svelte';
 import { marksForInsertion } from '../../session/editing/text.js';
-import { reveal } from '../../selection/replaceSelection.js';
+import { showText } from '../planned.js';
 import { findMatches } from './search.js';
-import { englishLabels } from '../../labels.js';
+import { listen } from '../../utils/listen.js';
+import { takeKeys } from '../../events/onFocus.js';
 /**
  * The find bar's state and actions (`plugins/find`): the query, the matches
  * in reading order, the current one and the replacements. It reads the
@@ -10,7 +12,6 @@ import { englishLabels } from '../../labels.js';
  */
 export class FindController {
     edytor;
-    labels;
     isOpen = $state(false);
     /** The replacement text. */
     replacement = $state('');
@@ -25,11 +26,8 @@ export class FindController {
     #at = $state.raw(null);
     #off = null;
     #field = null;
-    constructor(edytor, 
-    /** The words the bar shows (the plugin's `labels`): read them in a custom `bar`. */
-    labels = englishLabels.find) {
+    constructor(edytor) {
         this.edytor = edytor;
-        this.labels = labels;
     }
     /** What the bar searches for; setting it shows the current match. */
     get query() {
@@ -78,7 +76,7 @@ export class FindController {
      */
     open = (query) => {
         if (!this.isOpen || query !== undefined) {
-            const { startText, yStart } = this.edytor.selection.state;
+            const { startText, yStart } = this.edytor.selection.textRange();
             this.#at = startText?.isInDocument
                 ? this.edytor.facade.anchorAt(startText.blockId, startText.segStart + yStart, 'right')
                 : null;
@@ -109,9 +107,8 @@ export class FindController {
         const start = block?.textAtOffset(match.offset);
         const end = block?.textAtOffset(match.offset + match.length);
         if (start && end)
-            this.edytor.selection.setAtRange(start.text, start.offset, end.text, end.offset);
-        this.edytor.expectInternalFocus();
-        this.edytor.node?.focus({ preventScroll: true });
+            this.edytor.selection.selectText(start.text, start.offset, end.text, end.offset);
+        takeKeys(this.edytor);
     };
     /** The next match becomes the current one (after the last, the first). */
     next = () => this.#step(1);
@@ -135,48 +132,40 @@ export class FindController {
     };
     /** Replace every match: one command, one undo step. Answers its status. */
     replaceAll = () => this.#replace(this.matches);
-    /** The query field (`use:find.field`): focused on each Mod+F; Enter, Shift+Enter, Escape, Mod+F. */
-    field = (node) => {
+    /** The query field (`{@attach find.field}`): focused on each Mod+F; Enter, Shift+Enter, Escape, Mod+F. */
+    field = (node) => untrack(() => {
         this.#field = node;
         this.#focus();
+        const off = this.#keys(node, true);
+        return () => {
+            off();
+            if (this.#field === node)
+                this.#field = null;
+        };
+    });
+    /** The replacement field (`{@attach find.replaceField}`): Enter replaces, Escape closes. */
+    replaceField = (node) => this.#keys(node, false);
+    /**
+     * A field's keys: Enter goes to the next match (Shift+Enter the previous
+     * one) in the query field and replaces in the replacement field, Escape
+     * closes, Mod+F selects the query.
+     */
+    #keys = (node, query) => {
         const keydown = (event) => {
             if (event.isComposing)
                 return;
             const mod = this.edytor.keymap.isMac ? event.metaKey : event.ctrlKey;
             if (event.key === 'Enter')
-                (event.shiftKey ? this.previous : this.next)();
+                (query ? (event.shiftKey ? this.previous : this.next) : this.replace)();
             else if (event.key === 'Escape')
                 this.close();
-            else if (mod && event.key.toLowerCase() === 'f')
+            else if (query && mod && event.key.toLowerCase() === 'f')
                 node.select();
             else
                 return;
             event.preventDefault();
         };
-        node.addEventListener('keydown', keydown);
-        return {
-            destroy: () => {
-                node.removeEventListener('keydown', keydown);
-                if (this.#field === node)
-                    this.#field = null;
-            }
-        };
-    };
-    /** The replacement field (`use:find.replaceField`): Enter replaces, Escape closes. */
-    replaceField = (node) => {
-        const keydown = (event) => {
-            if (event.isComposing)
-                return;
-            if (event.key === 'Enter')
-                this.replace();
-            else if (event.key === 'Escape')
-                this.close();
-            else
-                return;
-            event.preventDefault();
-        };
-        node.addEventListener('keydown', keydown);
-        return { destroy: () => node.removeEventListener('keydown', keydown) };
+        return listen(node, 'keydown', keydown);
     };
     /** Stop following the document (the editor is going away). */
     destroy = () => this.close({ select: false });
@@ -195,14 +184,8 @@ export class FindController {
      */
     #show = () => {
         const match = this.matches[this.current];
-        const block = match && this.edytor.idToBlock.get(match.block);
-        if (block) {
-            reveal(block);
-            block.textAtOffset(match.offset)?.text.node?.scrollIntoView?.({
-                block: 'nearest',
-                inline: 'nearest'
-            });
-        }
+        if (match)
+            showText(this.edytor, match.block, match.offset);
         this.edytor.overlay.invalidate();
     };
     #focus = () => {
@@ -213,13 +196,13 @@ export class FindController {
     };
     /**
      * The one write (`replaceMatches`): admission, hooks (the command, then
-     * each `deleteContentAtRange` and `insertText` step), one transaction,
+     * each `deleteText` and `insertText` step), one transaction,
      * one undo step. Each replacement takes the marks its match had in
      * common, as typing over a selection does (`marksForInsertion`).
      */
     #replace = (matches) => {
         const { edytor } = this;
-        const { facade, dispatcher, idToBlock } = edytor;
+        const { facade, idToBlock } = edytor;
         if (!matches.length)
             return 'noop';
         const prepare = ({ matches, replacement }) => 
@@ -237,11 +220,7 @@ export class FindController {
             ];
         }));
         const payload = { matches, replacement: this.replacement };
-        const block = idToBlock.get(matches[0].block) ?? edytor.root;
-        dispatcher.dispatch('replaceMatches', payload, { block }, (payload, plan = prepare(payload)) => {
-            if ('writes' in plan)
-                facade.apply(plan);
-        }, prepare);
-        return dispatcher.last?.operation === 'replaceMatches' ? dispatcher.last.status : 'refused';
+        const block = edytor.idToBlock.get(matches[0].block);
+        return edytor.dispatcher.plan('replaceMatches', payload, prepare, block).status;
     };
 }

package/dist/plugins/find/findPlugin.d.ts

@@ -2,17 +2,15 @@ import { type Snippet } from 'svelte';
 import type { Edytor } from '../../edytor.svelte.js';
 import type { Plugin } from '../../plugins.js';
 import { FindController } from './FindController.svelte.js';
-import { type PartialLabels } from '../../labels.js';
 export type FindPluginOptions = {
     /**
-     * Replace the bar's markup; it renders while `find.isOpen`, placed at the
-     * editor's top right. Put `use:find.field` on your query input (focused
-     * on each Mod+F; Enter, Shift+Enter, Escape) and `use:find.replaceField`
+     * The bar's markup and its words; it renders while `find.isOpen`, placed at the
+     * editor's top right (without it, Mod+F searches and highlights, and
+     * nothing else shows). Put `{@attach find.field}` on your query input (focused
+     * on each Mod+F; Enter, Shift+Enter, Escape) and `{@attach find.replaceField}`
      * on your replacement input.
      */
     bar?: Snippet<[FindController]>;
-    /** The words the bar shows, over the English ones. */
-    labels?: PartialLabels<'find'>;
 };
 /** The find plugin's controller of `edytor`; `undefined` when the plugin is not listed. */
 export declare const findController: (edytor: Edytor) => FindController | undefined;
@@ -24,5 +22,3 @@ export declare const findController: (edytor: Edytor) => FindController | undefi
  * replaces one or all as one command (`replaceMatches`) and one undo step.
  */
 export declare const createFindPlugin: (options?: FindPluginOptions) => Plugin;
-/** Find and replace with the built-in bar. */
-export declare const findPlugin: Plugin;

package/dist/plugins/find/findPlugin.js

@@ -1,9 +1,11 @@
 import { mount, unmount } from 'svelte';
-import FindBar from './FindBar.svelte';
-import FindHighlights from './FindHighlights.svelte';
+import Ranges, { runOf } from '../../components/Ranges.svelte';
+import { hidden } from '../../selection/visibility.js';
 import { FindController } from './FindController.svelte.js';
-import { labelsWith } from '../../labels.js';
+import { mountChrome } from '../chrome.js';
 const controllers = new WeakMap();
+/** Matches highlighted at most: past it, the count still tells. */
+const MAX_HIGHLIGHTS = 1000;
 /** The find plugin's controller of `edytor`; `undefined` when the plugin is not listed. */
 export const findController = (edytor) => controllers.get(edytor);
 /** At the editor's top right, inside the viewport; measured in the overlay's frame. */
@@ -27,13 +29,14 @@ const place = (edytor, find) => (host) => {
  * replaces one or all as one command (`replaceMatches`) and one undo step.
  */
 export const createFindPlugin = (options = {}) => (edytor) => {
-    const find = new FindController(edytor, labelsWith('find', options.labels));
+    const find = new FindController(edytor);
     controllers.set(edytor, find);
     return {
         hotkeys: {
             // Over a text range in one line, search for it.
             'mod+f': ({ prevent }) => {
-                const { startText, endText, yStart, yEnd, isCollapsed } = edytor.selection.state;
+                const { startText, endText, yStart, yEnd } = edytor.selection.textRange();
+                const { isCollapsed } = edytor.selection.projection;
                 const selected = !isCollapsed && startText && startText === endText
                     ? startText.stringContent.slice(yStart, yEnd)
                     : undefined;
@@ -42,8 +45,27 @@ export const createFindPlugin = (options = {}) => (edytor) => {
         },
         onEdytorAttached: () => {
             const layer = edytor.overlay.layer;
-            const highlights = mount(FindHighlights, { target: layer, props: { edytor, find } });
-            const unmountBar = edytor.overlay.mount(FindBar, { find, bar: options.bar }, 'edytor-find-host', 55, place(edytor, find));
+            // Each shown match (at most `MAX_HIGHLIGHTS`: past it, the count still tells); one
+            // in a closed toggle's body shows none until it is current, which opens the toggle.
+            const highlights = mount(Ranges, {
+                target: layer,
+                props: {
+                    edytor,
+                    name: 'find-match',
+                    z: 18,
+                    ranges: () => find.matches.slice(0, MAX_HIGHLIGHTS).flatMap(({ block, offset, length }, index) => {
+                        const shown = edytor.idToBlock.get(block);
+                        return shown && !hidden(shown)
+                            ? runOf(edytor, block, offset, length, index === find.current)
+                            : [];
+                    })
+                }
+            });
+            const unmountBar = mountChrome(edytor, options.bar, find, () => find.isOpen, {
+                name: 'edytor-find-host',
+                zIndex: 55,
+                measure: place(edytor, find)
+            });
             return () => {
                 find.destroy();
                 unmountBar();
@@ -52,5 +74,3 @@ export const createFindPlugin = (options = {}) => (edytor) => {
         }
     };
 };
-/** Find and replace with the built-in bar. */
-export const findPlugin = createFindPlugin();

package/dist/plugins/image/ImageChrome.svelte

@@ -1,20 +1,12 @@
 <script lang="ts">
-	import type { Snippet } from 'svelte';
-	import { iconOf } from '../icons.js';
-	import type { ImageAlign } from './image.js';
 	import type { ImageControls } from './controls.svelte.js';
 
 	/**
 	 * The image chrome (`ImageControls`), in the overlay: a resize handle on
-	 * each side of the hovered image (Notion's pill, at mid-height), and a
-	 * toolbar at its top right: the three alignments and the alt text field
-	 * (a `toolbar` snippet replaces both, placed there). A press on the
-	 * toolbar keeps the editor's focus; the alt field takes it. The toolbar's
-	 * role and marks (`bar`) and the alt field's keys and focus (`altField`)
-	 * are the controller's attachments, a custom `toolbar`'s too.
+	 * each side of the hovered image (Notion's pill, at mid-height). The
+	 * toolbar is the image toolbar plugin's.
 	 */
-	let { controls, toolbar }: { controls: ImageControls; toolbar?: Snippet<[ImageControls]> } =
-		$props();
+	let { controls }: { controls: ImageControls } = $props();
 
 	// The view turning readonly mid-drag drops the preview at once.
 	$effect(() => {
@@ -26,13 +18,6 @@
 		controls.invalidate();
 	});
 
-	const labels = $derived(controls.labels);
-	const aligns: { align: ImageAlign; label: string }[] = $derived([
-		{ align: 'left', label: labels.alignLeft },
-		{ align: 'center', label: labels.alignCenter },
-		{ align: 'right', label: labels.alignRight }
-	]);
-	const keep = (event: MouseEvent) => event.preventDefault();
 	/** The handle's hit box: 16px wide, inside the image's edge. */
 	const HANDLE = 16;
 </script>
@@ -50,70 +35,9 @@
 				style:height="{box.height}px"
 				data-dragging={controls.drag ? 'true' : undefined}
 				data-selecting={controls.selecting ? 'true' : undefined}
-				onpointerdown={(event) => controls.start(event, side)}
-				onmousedown={(event) => controls.mousedown(event, side)}
+				{@attach controls.band.press((event) => controls.start(event, side))}
 			></div>
 		{/each}
-		{#if !controls.drag && toolbar}
-			<div
-				data-edytor-image-toolbar-slot
-				style:left="{box.x + box.width - 6}px"
-				style:top="{box.y + 6}px"
-				data-selecting={controls.selecting ? 'true' : undefined}
-			>
-				{@render toolbar(controls)}
-			</div>
-		{:else if !controls.drag}
-			<div
-				data-edytor-image-toolbar
-				role="toolbar"
-				aria-label={labels.toolbar}
-				style:left="{box.x + box.width - 6}px"
-				style:top="{box.y + 6}px"
-				data-selecting={controls.selecting ? 'true' : undefined}
-				{@attach controls.bar}
-			>
-				{#each aligns as { align, label } (align)}
-					<button
-						type="button"
-						data-edytor-image-align={align}
-						aria-label={label}
-						title={label}
-						aria-pressed={box.align === align}
-						onmousedown={keep}
-						onclick={() => controls.align(align)}
-						><span aria-hidden="true" style:mask-image={iconOf(`image.align-${align}`)}
-						></span></button
-					>
-				{/each}
-				<button
-					type="button"
-					data-edytor-image-alt-toggle
-					aria-label={labels.alt}
-					title={labels.alt}
-					aria-expanded={controls.editing === box.id}
-					onmousedown={keep}
-					onclick={controls.toggleAlt}
-					><span aria-hidden="true" style:mask-image={iconOf('image.alt')}></span></button
-				>
-			</div>
-			{#if controls.editing === box.id}
-				<div
-					data-edytor-image-alt-panel
-					style:left="{box.x + box.width - 6}px"
-					style:top="{box.y + 40}px"
-				>
-					<input
-						data-edytor-image-alt
-						aria-label={labels.alt}
-						placeholder={labels.altPlaceholder}
-						value={controls.alt}
-						oninput={(event) => controls.setAlt(event.currentTarget.value)}
-						{@attach controls.altField}
-					/>
-				</div>
-			{/if}
-		{/if}
 	{/if}
 </div>
 
@@ -129,7 +53,8 @@
 		pointer-events: none;
 	}
 
-	/* Notion's handle: a dark pill with a light ring, at mid-height, inside the edge. */
+	/* The handle's pill: at mid-height, inside the edge. Painted by a theme
+	 * (`edytor/themes/notion.css`: Notion's dark pill with a light ring). */
 	[data-edytor-image-resize]::after {
 		content: '';
 		position: absolute;
@@ -138,91 +63,5 @@
 		width: 6px;
 		height: min(48px, 50%);
 		transform: translateY(-50%);
-		border-radius: 20px;
-		background: var(--edytor-image-handle-color, rgba(15, 15, 15, 0.6));
-		box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.9);
-		opacity: 0.8;
-	}
-
-	[data-edytor-image-resize]:hover::after,
-	[data-edytor-image-resize][data-dragging='true']::after {
-		opacity: 1;
-	}
-
-	/* A custom toolbar's place: the image's top right, sized to its markup. */
-	[data-edytor-image-toolbar-slot] {
-		position: absolute;
-		width: max-content;
-		transform: translateX(-100%);
-	}
-
-	[data-edytor-image-toolbar] {
-		position: absolute;
-		display: flex;
-		gap: 2px;
-		/* The layer has no width: size to the buttons, not to it. */
-		width: max-content;
-		padding: 2px;
-		transform: translateX(-100%);
-		border-radius: 6px;
-		background: var(--edytor-image-toolbar-background, #fff);
-		box-shadow:
-			0 0 0 1px rgba(15, 15, 15, 0.05),
-			0 3px 6px rgba(15, 15, 15, 0.1);
-		font-size: 13px;
-	}
-
-	[data-edytor-image-toolbar] button {
-		display: inline-flex;
-		align-items: center;
-		justify-content: center;
-		width: 26px;
-		height: 26px;
-		padding: 0;
-		border: 0;
-		border-radius: 4px;
-		background: transparent;
-		color: rgba(55, 53, 47, 0.65);
-		cursor: pointer;
-	}
-
-	[data-edytor-image-toolbar] button:hover,
-	[data-edytor-image-toolbar] button[aria-pressed='true'],
-	[data-edytor-image-toolbar] button[aria-expanded='true'] {
-		background: rgba(55, 53, 47, 0.08);
-		color: rgb(55, 53, 47);
-	}
-
-	[data-edytor-image-toolbar] button span {
-		width: 18px;
-		height: 18px;
-		background: currentColor;
-		mask-size: contain;
-		mask-repeat: no-repeat;
-	}
-
-	[data-edytor-image-alt-panel] {
-		position: absolute;
-		width: 240px;
-		padding: 4px;
-		transform: translateX(-100%);
-		border-radius: 6px;
-		background: var(--edytor-image-toolbar-background, #fff);
-		box-shadow:
-			0 0 0 1px rgba(15, 15, 15, 0.05),
-			0 3px 6px rgba(15, 15, 15, 0.1);
-	}
-
-	[data-edytor-image-alt] {
-		box-sizing: border-box;
-		width: 100%;
-		height: 28px;
-		padding: 0 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: inherit;
-		outline: 0;
 	}
 </style>

package/dist/plugins/image/ImageChrome.svelte.d.ts

@@ -1,8 +1,6 @@
-import type { Snippet } from 'svelte';
 import type { ImageControls } from './controls.svelte.js';
 type $$ComponentProps = {
     controls: ImageControls;
-    toolbar?: Snippet<[ImageControls]>;
 };
 declare const ImageChrome: import("svelte").Component<$$ComponentProps, {}, "">;
 type ImageChrome = ReturnType<typeof ImageChrome>;