edytor 1.0.0-rc.2 → 1.0.0

package/dist/plugins/columns/ColumnResize.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { GUIDE, type ColumnResize } from './resize.svelte.js';
+	import type { ColumnResize } from './resize.svelte.js';
 
 	/**
 	 * The resize bands of the hovered layout and the guide of a drag
@@ -13,7 +13,7 @@
 
 	// The view turning readonly mid-drag drops the preview at once (round 4).
 	$effect(() => {
-		if (resize.readonly) resize.lock();
+		if (resize.readonly) resize.band.lock();
 	});
 </script>
 
@@ -39,11 +39,9 @@
 				style:width="{strip.width}px"
 				style:height="{strip.height}px"
 				style:cursor="col-resize"
-				style:--edytor-column-resize-guide-width="{GUIDE}px"
-				data-dragging={resize.drag ? 'true' : undefined}
-				data-selecting={resize.selecting ? 'true' : undefined}
-				onpointerdown={(event) => resize.start(event, strip)}
-				onmousedown={(event) => resize.mousedown(event, strip)}
+				data-dragging={resize.band.drag ? 'true' : undefined}
+				data-selecting={resize.band.selecting ? 'true' : undefined}
+				{@attach resize.band.press((event) => resize.start(event, strip))}
 				onkeydown={(event) => resize.key(event, strip)}
 				onfocus={() => resize.focus(strip, true)}
 				onblur={() => resize.focus(strip, false)}
@@ -72,38 +70,28 @@
 		pointer-events: none;
 	}
 
-	/* Notion's hover guide: a thin gray rule in the band's middle. */
+	/* The hover guide: a 2px rule in the band's middle, shown on hover (not while
+	 * it drags) and on a keyboard focus. Painted by a theme (`edytor/themes/notion.css`). */
 	[data-edytor-column-resize]::after {
 		content: '';
 		position: absolute;
 		top: 0;
 		bottom: 0;
-		left: calc(50% - var(--edytor-column-resize-guide-width) / 2);
-		width: var(--edytor-column-resize-guide-width);
-		background: var(--edytor-columns-resize-color, rgba(55, 53, 47, 0.16));
-		opacity: 0;
+		left: calc(50% - 1px);
+		width: 2px;
 		pointer-events: none;
-		transition: opacity 80ms ease;
-	}
-
-	[data-edytor-column-resize]:hover:not([data-dragging='true'])::after {
-		opacity: 1;
+		visibility: hidden;
 	}
 
-	/* Focused from the keyboard: the guide shows in the resize color. */
-	[data-edytor-column-resize]:focus-visible {
-		outline: none;
-	}
+	[data-edytor-column-resize]:hover:not([data-dragging='true'])::after,
 	[data-edytor-column-resize]:focus-visible::after {
-		opacity: 1;
-		background: var(--edytor-column-resize-color, rgba(35, 131, 226, 0.43));
+		visibility: visible;
 	}
 
-	/* Notion's resize line: a thin blue rule where the gap will be. */
+	/* The resize line where the gap will be, while a band drags. */
 	[data-edytor-column-resize-guide] {
 		position: absolute;
 		width: 2px;
-		background: var(--edytor-column-resize-color, rgba(35, 131, 226, 0.43));
 		pointer-events: none;
 	}
 </style>

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

@@ -1,4 +1,4 @@
-import { type ColumnResize } from './resize.svelte.js';
+import type { ColumnResize } from './resize.svelte.js';
 type $$ComponentProps = {
     resize: ColumnResize;
 };

package/dist/plugins/columns/ColumnsPlugin.svelte

@@ -11,7 +11,9 @@
 	} from '../../selection/replaceSelection.js';
 	import ColumnResizeStrips from './ColumnResize.svelte';
 	import { ColumnResize, weightOf } from './resize.svelte.js';
-	import { keywordsOf, labelsWith, type PartialLabels } from '../../labels.js';
+	import { hoverChrome } from '../bands.svelte.js';
+	import { all, listen } from '../../utils/listen.js';
+	import { columnsEnglish, keywordsOf, labelsOf } from '../../labels.js';
 
 	export type ColumnsPluginOptions = {
 		/**
@@ -19,20 +21,8 @@
 		 * width (default `0.1`). View-only: the document stores weights.
 		 */
 		minWidth?: number;
-		/** The words the layout commands and the resize bands say, over the English ones. */
-		labels?: PartialLabels<'columns'>;
-		/**
-		 * The slash menu's keywords of a layout command, by id (`columns.2` to
-		 * `columns.5`), which replace its own.
-		 */
-		keywords?: Partial<Record<string, string[]>>;
 	};
 
-	const columnsPlugins = new WeakSet<Plugin>();
-
-	/** Recognize any columns plugin instance (the component's default yields to yours). */
-	export const isColumnsPlugin = (plugin: Plugin) => columnsPlugins.has(plugin);
-
 	/** 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'));
@@ -51,19 +41,22 @@
 	};
 
 	/** The kind row of a layout of `n` columns, each holding one empty block of the column's default kind. */
-	const layoutRow = (edytor: Edytor, n: number, options: ColumnsPluginOptions): KindRow => {
+	const layoutRow = (edytor: Edytor, n: number): KindRow => {
 		const kid = edytor.document.defaultChild('column');
 		const id = `columns.${n}`;
 		return {
 			id,
-			label: labelsWith('columns', options.labels).columns(n),
+			label: labelsOf(edytor, 'columns', columnsEnglish).columns(n),
 			group: 'Layout',
 			// Notion's `/col3`, `/columns3` and `/column 3` too (query words match in order).
-			keywords: keywordsOf(
-				id,
-				['columns', 'layout', 'side by side', `col${n}`, `columns${n}`, `column ${n}`],
-				options.keywords
-			),
+			keywords: keywordsOf(edytor, id, [
+				'columns',
+				'layout',
+				'side by side',
+				`col${n}`,
+				`columns${n}`,
+				`column ${n}`
+			]),
 			value: {
 				type: 'columns',
 				data: {},
@@ -88,12 +81,8 @@
 	 * block column 1 of `n`, each other column holding an empty paragraph
 	 * (`wrapBlocks`, `layout.wrap`, Notion); the blocks stay selected.
 	 */
-	const layoutCommand = (
-		edytor: Edytor,
-		n: number,
-		options: ColumnsPluginOptions
-	): EditorCommand => {
-		const { id, label, group, keywords } = layoutRow(edytor, n, options);
+	const layoutCommand = (edytor: Edytor, n: number): EditorCommand => {
+		const { id, label, group, keywords } = layoutRow(edytor, n);
 		return {
 			id,
 			label,
@@ -101,7 +90,7 @@
 			keywords,
 			// Asked of the view given (a `+`'s menu asks it of the block it adds).
 			isEnabled: (view = edytor) => {
-				const block = view.selection.state.startBlock;
+				const block = view.selection.textRange().startText?.parent;
 				return Boolean(block?.convertible) && !inColumn(block);
 			},
 			// Turn into: one block, or `n` sibling blocks, in `n` columns (`layout.wrap`, Notion).
@@ -114,12 +103,12 @@
 					(selected.length === 1 || selected.length === n)
 				)
 					return wrapBlocks(edytor, selected, 'columns', n);
-				const block = edytor.selection.state.startBlock;
+				const block = edytor.selection.textRange().startText?.parent;
 				if (inColumn(block)) {
 					edytor.dispatcher.record({ operation: 'setBlock', status: 'refused' });
 					return false;
 				}
-				return convertToKind(edytor, block, layoutRow(edytor, n, options));
+				return convertToKind(edytor, block, layoutRow(edytor, n));
 			}
 		};
 	};
@@ -148,57 +137,40 @@
 	 */
 	export const createColumnsPlugin = (options: ColumnsPluginOptions = {}): Plugin => {
 		const plugin: Plugin = (edytor) => {
-			const resize = new ColumnResize(
-				edytor,
-				options.minWidth ?? 0.1,
-				labelsWith('columns', options.labels)
-			);
+			const resize = new ColumnResize(edytor, options.minWidth ?? 0.1);
 			return {
-				commands: [2, 3, 4, 5].map((n) => layoutCommand(edytor, n, options)),
+				commands: [2, 3, 4, 5].map((n) => layoutCommand(edytor, n)),
 				// The layout holding the caret shows its bands (the keyboard's way to them).
 				onSelectionChange: () => edytor.overlay.invalidate(),
 				// The resize bands: in the overlay, for the layout under the pointer.
 				onEdytorAttached: ({ node }) => {
-					const over = (event: PointerEvent) => resize.hover(event.target);
-					const leave = (event: PointerEvent) => !resize.drag && resize.leave(event.relatedTarget);
-					// The overlay (a band, a handle in a gap) keeps the bands while the pointer is on it.
-					const layer = edytor.overlay.layer;
-					// A block drag owns the pointer: no strip takes it meanwhile.
-					const drag = (event: Event) => (resize.dragging = event.type === 'dragstart');
-					const document = node.ownerDocument;
-					node.addEventListener('pointerover', over);
-					node.addEventListener('pointerleave', leave);
-					layer?.addEventListener('pointerleave', leave);
-					// A column block's handle in a gap stands for its block (the bands show over its layout).
-					const overHandle = (event: PointerEvent) => {
-						const handle = (event.target as Element | null)?.closest?.<HTMLElement>(
-							'[data-edytor-block-handle-host][data-block-id]'
-						);
-						const id = handle?.dataset.blockId;
-						if (id) resize.hover(edytor.idToBlock.get(id)?.node ?? null);
-					};
-					layer?.addEventListener('pointerover', overHandle);
-					document.addEventListener('dragstart', drag, true);
-					document.addEventListener('dragend', drag, true);
-					document.addEventListener('drop', drag, true);
-					const unmount = edytor.overlay.mount(
-						ColumnResizeStrips,
-						{ resize },
-						'edytor-column-resizers',
-						// Above the block handles (5): the band is the gap's left part at every height.
-						6,
-						resize.measure
+					const off = all(
+						// The overlay (a band, a handle in a gap) keeps the bands while the pointer is on
+						// it; a block drag owns the pointer: no strip takes it meanwhile.
+						hoverChrome(
+							edytor,
+							node,
+							resize.hover,
+							resize.leave,
+							(event) => (resize.dragging = event.type === 'dragstart')
+						),
+						// A column block's handle in a gap stands for its block (the bands show over its layout).
+						listen(edytor.overlay.layer, 'pointerover', (event) => {
+							const id = (event.target as Element | null)?.closest?.<HTMLElement>(
+								'[data-edytor-block-handle-host][data-block-id]'
+							)?.dataset.blockId;
+							if (id) resize.hover(edytor.idToBlock.get(id)?.node ?? null);
+						}),
+						edytor.overlay.mount(
+							ColumnResizeStrips,
+							{ resize },
+							'edytor-column-resizers',
+							// Above the block handles (5): the band is the gap's left part at every height.
+							6,
+							resize.measure
+						)
 					);
-					return () => {
-						node.removeEventListener('pointerover', over);
-						node.removeEventListener('pointerleave', leave);
-						layer?.removeEventListener('pointerleave', leave);
-						layer?.removeEventListener('pointerover', overHandle);
-						document.removeEventListener('dragstart', drag, true);
-						document.removeEventListener('dragend', drag, true);
-						document.removeEventListener('drop', drag, true);
-						unmount();
-					};
+					return off;
 				},
 				blocks: {
 					columns: {
@@ -229,12 +201,8 @@
 				}
 			};
 		};
-		columnsPlugins.add(plugin);
 		return plugin;
 	};
-
-	/** Columns with the default options. */
-	export const columnsPlugin = createColumnsPlugin();
 </script>
 
 <!--

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

@@ -1,22 +1,12 @@
 import './columns.css';
 import type { Plugin } from '../../plugins.js';
-import { type PartialLabels } from '../../labels.js';
 export type ColumnsPluginOptions = {
     /**
      * The narrowest a column may be resized to, as a fraction of its layout's
      * width (default `0.1`). View-only: the document stores weights.
      */
     minWidth?: number;
-    /** The words the layout commands and the resize bands say, over the English ones. */
-    labels?: PartialLabels<'columns'>;
-    /**
-     * The slash menu's keywords of a layout command, by id (`columns.2` to
-     * `columns.5`), which replace its own.
-     */
-    keywords?: Partial<Record<string, string[]>>;
 };
-/** Recognize any columns plugin instance (the component's default yields to yours). */
-export declare const isColumnsPlugin: (plugin: Plugin) => boolean;
 /**
  * Notion's columns (docs/columns-plan.md): a `columns` layout shows its
  * `column`s side by side, each holding any blocks; a column grows by its
@@ -26,8 +16,6 @@ export declare const isColumnsPlugin: (plugin: Plugin) => boolean;
  * out and stacks them below a 480px wide layout.
  */
 export declare const createColumnsPlugin: (options?: ColumnsPluginOptions) => Plugin;
-/** Columns with the default options. */
-export declare const columnsPlugin: 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/columns/columns.css

@@ -1,9 +1,11 @@
 /*
- * Columns (`docs/columns-plan.md`): a layout lays its columns out side by
- * side in its one children container, each column growing by its weight
- * (`flex: <width> 1 0`, set on the column by the kind's element), with
- * `--edytor-columns-gap` between them. Neither container is a nesting step:
- * their indent is zeroed. Below a 480px wide layout the columns stack.
+ * Columns: a layout lays its columns out side by side in its one children
+ * container, each column growing by its weight (`flex: <width> 1 0`, set on
+ * the column by the kind's element), with `--edytor-columns-gap` between
+ * them (the gap the resize bands and the handles share, `gaps.ts`).
+ * Neither container is a nesting step: their indent is zeroed. Below a
+ * 480px wide layout the columns stack. The look (a selected layout's
+ * highlight, the columns' edges) is a theme's.
  */
 [data-edytor-block][data-edytor-columns] {
 	container-type: inline-size;
@@ -19,13 +21,6 @@
 [data-edytor-block][data-edytor-column] > [data-edytor-children] {
 	padding-inline-start: 0;
 }
-/* A column's first and last blocks sit flush with the layout's edges. */
-[data-edytor-column] > [data-edytor-children] > [data-edytor-block]:first-child {
-	margin-top: 0;
-}
-[data-edytor-column] > [data-edytor-children] > [data-edytor-block]:last-child {
-	margin-bottom: 0;
-}
 @container (max-width: 480px) {
 	[data-edytor-block][data-edytor-columns] > [data-edytor-children] {
 		flex-direction: column;
@@ -36,17 +31,3 @@
 		flex: 0 0 auto !important;
 	}
 }
-
-/*
- * A block selection standing for the whole layout: one highlight over
- * the layout, none on its blocks.
- */
-[data-edytor-block][data-edytor-columns] > [data-edytor-children][data-edytor-columns-selected] {
-	border-radius: 4px;
-	background: var(--edytor-block-selection, rgba(35, 131, 226, 0.14));
-}
-[data-edytor-block][data-edytor-columns]
-	> [data-edytor-children][data-edytor-columns-selected]
-	[data-edytor-block] {
-	background: transparent;
-}

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

@@ -1,6 +1,6 @@
 import type { Block } from '../../block/block.svelte.js';
 import type { Edytor } from '../../edytor.svelte.js';
-import { type ColumnsLabels } from '../../labels.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. */
@@ -20,15 +20,14 @@ export type Strip = {
 };
 /** A strip being dragged: the two columns as the drag found them, in client px. */
 type Drag = {
-    strip: Strip;
     left: Block;
     right: Block;
     /** Where the pointer went down, and where it is. */
     from: number;
     at: number;
-    /** The left column's width, the pair's, and the narrowest either may get. */
+    /** The left column's width. */
     width: number;
-    /** The layout's width. */
+    /** The layout's width, the pair's, and the narrowest either may get. */
     span: number;
     sum: number;
     min: number;
@@ -53,7 +52,7 @@ type Drag = {
  * release writes the two columns' `data.width` weights, keeping their sum,
  * in one `edytor.transact` (two `setData` commands: one undo step), and
  * drops the preview in the same flush; Escape, a cancel or the view turning
- * readonly drops it alone, at once.
+ * readonly drops it alone, at once (`band`).
  * Neither column goes under `minWidth` × the layout's width, in the view
  * only (the document stores weights). Positions are read in the overlay's
  * measure, once per frame.
@@ -68,8 +67,6 @@ export declare class ColumnResize {
     #private;
     private edytor;
     private minWidth;
-    /** The words the bands say (the plugin's `labels`). */
-    readonly labels: ColumnsLabels;
     /** The layout under the pointer. */
     hovered: string | null;
     /** The layout whose band holds the focus. */
@@ -78,8 +75,8 @@ export declare class ColumnResize {
     dragging: boolean;
     /** The measured strips of the hovered layout. */
     strips: Strip[];
-    /** The strip being dragged. */
-    drag: Drag | null;
+    /** The strip's drag in progress (`band.drag`). */
+    band: BandDrag<Drag>;
     /** The guide's layer-relative box while a strip drags. */
     guide: {
         x: number;
@@ -88,21 +85,12 @@ export declare class ColumnResize {
     } | null;
     /** The two dragged columns' weights at the pointer, by id, while a strip drags (view only). */
     preview: Readonly<Record<string, number>> | null;
-    constructor(edytor: Edytor, minWidth: number, 
-    /** The words the bands say (the plugin's `labels`). */
-    labels?: ColumnsLabels);
+    constructor(edytor: Edytor, minWidth: number);
+    /** The words the bands say (the view's `columns` labels). */
+    get labels(): import("../../labels.js").ColumnsLabels;
     /** The view is readonly (reactive). */
     get readonly(): boolean;
-    /** A text selection is in progress (`selection.dragging`): the strips take no pointer. */
-    get selecting(): boolean;
-    /**
-     * The layout whose bands show: the one a strip drags, else the one under
-     * the pointer, the one a band holds the focus of, the one holding the caret.
-     */
-    private get layout();
-    /** The innermost layout holding the selection's start (the keyboard's). */
-    private get caretLayout();
-    /** Whether the strips show: for a layout of an editable view (`layout`), or while one drags. */
+    /** Whether the strips show: for a layout of an editable view, or while one drags. */
     get shown(): boolean;
     /** A column's weight as shown: the drag's preview while a strip drags it, else its stored one. */
     weight: (id: string | undefined, data: Record<string, unknown> | undefined) => number;
@@ -110,50 +98,25 @@ export declare class ColumnResize {
     hover: (target: EventTarget | null) => void;
     /**
      * The pointer left for `to`: the bands stay while it is over the editor
-     * or its overlay (a band, a column block's handle in the gap).
+     * or its overlay (a band, a column block's handle in the gap), or a strip drags.
      */
     leave: (to: EventTarget | null) => void;
     /** The overlay measure: the hovered layout's gaps, and the guide of a drag. */
     measure: (host: HTMLElement, origin: DOMRect) => () => void;
-    /** The bands of the hovered layout (`bandOf` each gap): none when it stacks or shows fewer than two columns. */
-    private gaps;
-    /** The left column's width at the drag's pointer, held to the minimum on both sides. */
-    private widthAt;
-    /**
-     * A `mousedown` on `strip`: no native selection starts there; the press
-     * itself when no `pointerdown` came before it (`isLonePress`: WebKit's
-     * first press after a block drag), which starts the drag as one would.
-     */
-    mousedown: (event: MouseEvent, strip: Strip) => void;
     /**
-     * Press on `strip`: the drag starts, nothing is written until the release.
-     * A `pointerdown` tracks its pointer (captured, on the document); a lone
-     * `mousedown` (`mousedown`) tracks the mouse on the window, its
-     * `mousemove`s and its `mouseup`, with the same preview, minimum, Escape
-     * and release.
+     * Press on `strip` (`band.press`): the drag starts (`trackDrag`), nothing
+     * is written until the release.
      */
     start: (event: PointerEvent | MouseEvent, strip: Strip) => void;
-    /** `strip`'s two columns as they are now, measured, a drag from `from`; `null` when one is gone. */
-    private pair;
     /**
      * A key on a focused band: ArrowRight/ArrowLeft move the gap by 1% of the
      * layout's width (Shift: 10%), Home/End to the narrowest either column
      * may get (the drag's minimum); each press writes both weights, keeping
-     * their sum, as one undo step (`release`). Every key there is the band's,
+     * their sum, as one undo step (`#release`). Every key there is the band's,
      * never the editor's; Escape gives the keys back to the editor.
      */
     key: (event: KeyboardEvent, strip: Strip) => void;
     /** A band took (`true`) or lost the focus: its layout's bands stay while it holds it. */
     focus: (strip: Strip, focused: boolean) => void;
-    /**
-     * The view turned readonly (or the document read-only): a drag in progress
-     * ends at once, its preview dropped, nothing written (its release would be
-     * refused anyway). Called by the strips' component when `readonly` flips.
-     */
-    lock: () => void;
-    /** The two columns' weights at the drag's pointer, keeping their stored sum; `null` before it moved. */
-    private weights;
-    /** The release: both weights, keeping their sum, one undo step; nothing when nothing moved. */
-    private release;
 }
 export {};