edytor 1.0.0-rc.2 → 1.0.0

package/dist/plugins/marquee/MarqueeController.svelte.js

@@ -0,0 +1,243 @@
+import { blockSelection, noSelection } from '../../session/selection.js';
+import { takeKeys } from '../../events/onFocus.js';
+import { marqueeBlocks } from './marquee.js';
+/** Within this distance (px) of the scroller's top or bottom edge, the page scrolls. */
+const EDGE = 48;
+/** The fastest auto-scroll, in px a frame: at the edge or past it. */
+const SPEED = 24;
+const sameIds = (a, b) => a.length === b.length && a.every((id, i) => id === b[i]);
+export class MarqueeController {
+    edytor;
+    threshold;
+    /** The rectangle while the marquee shows (client coordinates), else `null` (reactive). */
+    rect = $state.raw(null);
+    /** The block ids the marquee selects (reactive). */
+    ids = $state.raw([]);
+    /** Shift or Mod was held at the press (reactive). */
+    adding = $state(false);
+    #press = null;
+    /** The drag passed the threshold: the rectangle shows. */
+    #active = false;
+    /** The pointer, in client coordinates. */
+    #pointer = { x: 0, y: 0 };
+    #frame = null;
+    /** The editor's nearest scrolling ancestor (`null`: the page), read when the rectangle starts. */
+    #scroller = null;
+    constructor(edytor, threshold) {
+        this.edytor = edytor;
+        this.threshold = threshold;
+    }
+    /** What a `box` snippet receives. */
+    get payload() {
+        const { rect } = this;
+        return rect && { rect, count: this.ids.length, ids: this.ids, adding: this.adding };
+    }
+    /**
+     * A primary press from a mouse or a pen, already classified as the
+     * editor's empty area (`host`: the host's own; else the handle gutter or
+     * the app's container). Answers whether the marquee took it.
+     */
+    press = (event, host) => {
+        const node = this.edytor.node;
+        const document = node?.ownerDocument;
+        const view = document?.defaultView;
+        if (!node || !document || !view || event.button !== 0)
+            return false;
+        if (event.pointerType === 'touch')
+            return false;
+        // A press while one is down: the release of the last one never reached the page.
+        this.#end();
+        const box = node.getBoundingClientRect();
+        const mod = this.edytor.keymap.isMac ? event.metaKey : event.ctrlKey;
+        const adding = event.shiftKey || mod;
+        const before = this.edytor.selection.value;
+        const { clientX, clientY, shiftKey, altKey, metaKey, ctrlKey } = event;
+        // The press is the marquee's: the browser starts no selection of its own and moves no focus.
+        if (event.type === 'mousedown')
+            event.preventDefault();
+        const cancel = (event) => event.preventDefault();
+        const compat = (event) => {
+            if (event.button === 0)
+                event.preventDefault();
+        };
+        const listening = new AbortController();
+        const on = (target, type, listener) => target.addEventListener(type, listener, {
+            capture: true,
+            passive: type === 'scroll',
+            signal: listening.signal
+        });
+        // WebKit after a native drag sends a lone `mousedown` and may skip the
+        // pointer events of the press: its mouse events end it too.
+        for (const type of ['pointermove', 'mousemove'])
+            on(document, type, this.#moved);
+        for (const type of ['pointerup', 'mouseup'])
+            on(document, type, this.#released);
+        on(document, 'pointercancel', this.cancel);
+        on(document, 'mousedown', compat);
+        on(document, 'selectstart', cancel);
+        on(document, 'dragstart', cancel);
+        on(document, 'scroll', this.#scrolled);
+        on(view, 'keydown', this.#key);
+        this.#press = {
+            x: clientX - box.left,
+            y: clientY - box.top,
+            point: { clientX, clientY, shiftKey, altKey, metaKey, ctrlKey },
+            host,
+            before,
+            base: adding && before.kind === 'blocks' ? before.ids : [],
+            listening
+        };
+        this.#pointer = { x: clientX, y: clientY };
+        this.adding = adding;
+        return true;
+    };
+    #moved = (event) => {
+        const press = this.#press;
+        if (!press)
+            return;
+        // A release the page never saw (over a frame of another origin, outside the window):
+        // a mouse move with no button down ends the gesture, as `sel.drag.unseen-release`.
+        if (event.type === 'mousemove' && event.buttons === 0)
+            return this.#end();
+        this.#pointer = { x: event.clientX, y: event.clientY };
+        if (!this.#active) {
+            const { clientX, clientY } = press.point;
+            if (Math.hypot(event.clientX - clientX, event.clientY - clientY) < this.threshold)
+                return;
+            this.#active = true;
+            this.#scroller = this.edytor.node ? scrollerOf(this.edytor.node) : null;
+            // The editor takes the keys: Delete, Mod+C, Tab and the arrows act on the selection.
+            takeKeys(this.edytor);
+        }
+        this.#update();
+        this.#autoScroll();
+    };
+    /** The page scrolled under the drag: the rectangle keeps its start where it was in the page. */
+    #scrolled = () => {
+        if (this.#active)
+            this.#update();
+    };
+    /** The rectangle from the press to the pointer, and the selection it makes. */
+    #update = () => {
+        const press = this.#press;
+        const node = this.edytor.node;
+        if (!press || !node)
+            return;
+        const box = node.getBoundingClientRect();
+        const [x, y] = [box.left + press.x, box.top + press.y];
+        const { x: px, y: py } = this.#pointer;
+        const area = {
+            left: Math.min(x, px),
+            top: Math.min(y, py),
+            right: Math.max(x, px, Math.min(x, px) + 1),
+            bottom: Math.max(y, py, Math.min(y, py) + 1)
+        };
+        const base = new Set(press.base);
+        const hits = marqueeBlocks(this.edytor, area).flatMap((block) => base.has(block.id) ? [] : [block.id]);
+        const ids = [...press.base, ...hits];
+        this.rect = new DOMRectReadOnly(area.left, area.top, area.right - area.left, area.bottom - area.top);
+        if (!sameIds(ids, this.ids)) {
+            this.ids = ids;
+            this.edytor.selection.select(ids.length ? blockSelection(ids) : noSelection);
+        }
+        this.edytor.overlay.invalidate();
+    };
+    /** The distance to scroll this frame (negative: up), from the pointer's place by the scroller's edges. */
+    #step = () => {
+        const node = this.edytor.node;
+        const view = node?.ownerDocument.defaultView;
+        if (!node || !view)
+            return null;
+        const scroller = this.#scroller;
+        const box = scroller?.getBoundingClientRect();
+        const top = Math.max(box?.top ?? 0, 0);
+        const bottom = Math.min(box?.bottom ?? view.innerHeight, view.innerHeight);
+        const y = this.#pointer.y;
+        const near = (distance) => Math.ceil(SPEED * Math.min(1, (EDGE - distance) / EDGE));
+        const by = y < top + EDGE ? -near(y - top) : y > bottom - EDGE ? near(bottom - y) : 0;
+        return by ? { scroller, by } : null;
+    };
+    /**
+     * Browser rule `marquee.auto-scroll` (one named frame loop): while the
+     * pointer is within `EDGE` of the scroller's top or bottom (the editor's
+     * nearest scrolling ancestor, else the page), it scrolls a step a frame,
+     * faster nearer the edge, and the rectangle extends with it. It stops
+     * when the pointer leaves the band, the scroller cannot go further, or
+     * the gesture ends.
+     */
+    #autoScroll = () => {
+        const view = this.edytor.node?.ownerDocument.defaultView;
+        if (this.#frame !== null || !this.#active || !view?.requestAnimationFrame || !this.#step())
+            return;
+        this.#frame = view.requestAnimationFrame(() => {
+            this.#frame = null;
+            const step = this.#step();
+            if (!step || !this.#active)
+                return;
+            const target = step.scroller ?? view.document.scrollingElement;
+            if (!target)
+                return;
+            const before = target.scrollTop;
+            target.scrollTop += step.by;
+            // The scroller is at its end: the loop waits for the next move.
+            if (target.scrollTop === before)
+                return;
+            this.#update();
+            this.#autoScroll();
+        });
+    };
+    #released = () => {
+        const press = this.#press;
+        if (!press)
+            return;
+        const click = !this.#active;
+        this.#end();
+        // A press released where it began is a click: the host's own (the trailing paragraph, a caret).
+        if (click && press.host)
+            this.edytor.selection.pointer.marginClick(press.point);
+    };
+    /** Escape: the selection from before the press comes back, and the gesture ends. */
+    #key = (event) => {
+        if (event.key !== 'Escape' || !this.#press)
+            return;
+        event.preventDefault();
+        event.stopPropagation();
+        this.cancel();
+    };
+    /** End the gesture and give back the selection from before the press. */
+    cancel = () => {
+        const press = this.#press;
+        if (!press)
+            return;
+        const active = this.#active;
+        this.#end();
+        if (active)
+            this.edytor.selection.select(press.before);
+    };
+    #end = () => {
+        const press = this.#press;
+        this.#press = null;
+        this.#active = false;
+        press?.listening.abort();
+        if (this.#frame !== null)
+            this.edytor.node?.ownerDocument.defaultView?.cancelAnimationFrame(this.#frame);
+        this.#frame = null;
+        this.rect = null;
+        this.ids = [];
+        this.adding = false;
+        this.edytor.overlay.invalidate();
+    };
+    destroy = () => this.#end();
+}
+/** The editor's nearest ancestor that scrolls vertically, else `null` (the page). */
+const scrollerOf = (node) => {
+    const view = node.ownerDocument.defaultView;
+    const { body, documentElement } = node.ownerDocument;
+    for (let at = node.parentElement; at && at !== body && at !== documentElement;) {
+        const { overflowY } = view.getComputedStyle(at);
+        if (/auto|scroll|overlay/.test(overflowY) && at.scrollHeight > at.clientHeight)
+            return at;
+        at = at.parentElement;
+    }
+    return null;
+};

package/dist/plugins/marquee/marquee.d.ts

@@ -0,0 +1,33 @@
+/**
+ * Which blocks a marquee rectangle selects (`sel.marquee.blocks`, Notion),
+ * read from the blocks' boxes: the one rule the marquee's live selection
+ * reads. A pointer move never reads the whole page: a binary search over a
+ * parent's children (vertical order) finds the ones at the rectangle's
+ * height, then their descendants the same way.
+ */
+import type { Block } from '../../block/block.svelte.js';
+import type { Edytor } from '../../edytor.svelte.js';
+/** A rectangle in viewport (client) coordinates. */
+export type MarqueeRect = {
+    left: number;
+    top: number;
+    right: number;
+    bottom: number;
+};
+/**
+ * The blocks `rect` selects, in document order, each once:
+ *
+ * - a block whose own row (its box down to where its first shown child
+ *   begins) meets the rectangle is selected with its whole shown subtree
+ *   (Notion: a block carries its children);
+ * - a block whose box meets it only below its own row is not: its children
+ *   are read the same way;
+ * - a void or an island (an image, a code block, a table) is one unit:
+ *   selected when its box meets the rectangle, never its rows or lines;
+ * - a layout and its columns are never selected themselves: the columns the
+ *   rectangle meets are read, so it selects the blocks of the columns it
+ *   crosses (a layout covered whole stands for them, `liftLayouts`); a list
+ *   container (it shows only its items) is read through its items;
+ * - a block hidden by view state (a closed toggle's body) never.
+ */
+export declare const marqueeBlocks: (edytor: Edytor, rect: MarqueeRect) => Block[];

package/dist/plugins/marquee/marquee.js

@@ -0,0 +1,89 @@
+import { hidden } from '../../selection/visibility.js';
+import { bandRun } from '../../surface/overlay.js';
+/** Whether two boxes overlap (an edge they share is no overlap: rows touch). */
+const meets = (rect, box) => rect.left < box.right && rect.right > box.left && rect.top < box.bottom && rect.bottom > box.top;
+/**
+ * The blocks `rect` selects, in document order, each once:
+ *
+ * - a block whose own row (its box down to where its first shown child
+ *   begins) meets the rectangle is selected with its whole shown subtree
+ *   (Notion: a block carries its children);
+ * - a block whose box meets it only below its own row is not: its children
+ *   are read the same way;
+ * - a void or an island (an image, a code block, a table) is one unit:
+ *   selected when its box meets the rectangle, never its rows or lines;
+ * - a layout and its columns are never selected themselves: the columns the
+ *   rectangle meets are read, so it selects the blocks of the columns it
+ *   crosses (a layout covered whole stands for them, `liftLayouts`); a list
+ *   container (it shows only its items) is read through its items;
+ * - a block hidden by view state (a closed toggle's body) never.
+ */
+export const marqueeBlocks = (edytor, rect) => {
+    const { facade, idToBlock } = edytor;
+    const out = [];
+    const seen = new Set();
+    const box = (block) => block.node?.getBoundingClientRect();
+    const add = (block) => {
+        if (seen.has(block.id))
+            return;
+        seen.add(block.id);
+        out.push(block);
+    };
+    const unit = (block) => facade.isVoid(block.id) || facade.isIsland(block.id);
+    const layout = (block) => facade.isLayout(block.id) || facade.isLayoutItem(block.id);
+    /** A block's children ids while they show (a closed toggle hides its whole body). */
+    const shownChildren = (block) => {
+        const ids = facade.childrenIds(block?.id ?? null);
+        const first = ids[0];
+        return first === undefined || (block && hidden(idToBlock.block(first))) ? [] : ids;
+    };
+    /** The children of `parent` at the rectangle's height: a binary search over their boxes. */
+    const rows = (ids) => {
+        const at = (i) => box(idToBlock.block(ids[i]));
+        // Rows touch: an edge they share is no overlap.
+        const [first, end] = bandRun(ids.length, at, rect.top, rect.bottom, true);
+        return ids.slice(first, end).flatMap((id) => {
+            const block = idToBlock.block(id);
+            return hidden(block) ? [] : [block];
+        });
+    };
+    /** `block` and its shown subtree, a layout and its columns as their blocks. */
+    const whole = (block) => {
+        if (!layout(block))
+            add(block);
+        if (unit(block))
+            return;
+        for (const id of shownChildren(block)) {
+            const child = idToBlock.block(id);
+            if (!hidden(child))
+                whole(child);
+        }
+    };
+    const visit = (block) => {
+        const own = box(block);
+        if (!own || !meets(rect, own))
+            return;
+        if (unit(block))
+            return add(block);
+        if (facade.isLayout(block.id)) {
+            for (const id of facade.childrenIds(block.id))
+                visit(idToBlock.block(id));
+            return;
+        }
+        const children = shownChildren(block);
+        if (facade.isLayoutItem(block.id) || block.isContainer) {
+            for (const child of rows(children))
+                visit(child);
+            return;
+        }
+        const first = children[0] === undefined ? undefined : box(idToBlock.block(children[0]));
+        const bottom = first && first.height > 0 && first.top > own.top ? first.top : own.bottom;
+        if (meets(rect, { left: own.left, right: own.right, top: own.top, bottom }))
+            return whole(block);
+        for (const child of rows(children))
+            visit(child);
+    };
+    for (const block of rows(shownChildren(null)))
+        visit(block);
+    return out;
+};

package/dist/plugins/marquee/marqueePlugin.d.ts

@@ -0,0 +1,32 @@
+import type { Snippet } from 'svelte';
+import type { Plugin } from '../../plugins.js';
+import { type MarqueeBoxPayload } from './MarqueeController.svelte.js';
+export type MarqueePluginOptions = {
+    /**
+     * An element around the editor whose empty area starts a marquee too (the
+     * page, as in Notion): a CSS selector the editor's element is matched
+     * against with `closest()`, or a function of the editor's element. A
+     * press on that element itself, or on a wrapper between it and the
+     * editor, starts one; its other content (a title, a button) keeps its
+     * presses.
+     */
+    container?: string | ((editor: HTMLElement) => Element | null | undefined);
+    /** How far (px) the pointer moves before the rectangle starts: a shorter press is a click. Default 4. */
+    threshold?: number;
+    /**
+     * The rectangle's markup; it renders in a host placed and sized to the
+     * rectangle (without it, the blocks are selected and no rectangle shows).
+     */
+    box?: Snippet<[MarqueeBoxPayload]>;
+};
+/**
+ * Block selection with a rectangle (Notion's rubber band), opt-in: a press
+ * in the editor's empty area — the margins beside the blocks (the handle
+ * gutter, not a handle), the space below the last block, an optional
+ * `container` around the editor — then a drag draws a rectangle and selects,
+ * live, the blocks it meets. Shift or Mod adds to the selection there was;
+ * Escape gives it back. On release the block selection stays and the editor
+ * has the keys. A click without a drag keeps what a press there did (below
+ * the last block, the trailing paragraph).
+ */
+export declare const createMarqueePlugin: (options?: MarqueePluginOptions) => Plugin;

package/dist/plugins/marquee/marqueePlugin.js

@@ -0,0 +1,68 @@
+import { onPress } from '../../events/onFocus.js';
+import MarqueeBox from './MarqueeBox.svelte';
+import { MarqueeController } from './MarqueeController.svelte.js';
+/** The handle gutter: a block handle's own box, around its buttons (never a button). */
+const HANDLE_HOST = '[data-edytor-block-handle-host]';
+const controllers = new WeakMap();
+/** The marquee's controller of `edytor`; `undefined` when the plugin is not listed. @internal */
+export const marqueeController = (edytor) => controllers.get(edytor);
+/**
+ * Block selection with a rectangle (Notion's rubber band), opt-in: a press
+ * in the editor's empty area — the margins beside the blocks (the handle
+ * gutter, not a handle), the space below the last block, an optional
+ * `container` around the editor — then a drag draws a rectangle and selects,
+ * live, the blocks it meets. Shift or Mod adds to the selection there was;
+ * Escape gives it back. On release the block selection stays and the editor
+ * has the keys. A click without a drag keeps what a press there did (below
+ * the last block, the trailing paragraph).
+ */
+export const createMarqueePlugin = (options = {}) => (edytor) => {
+    const controller = new MarqueeController(edytor, options.threshold ?? 4);
+    controllers.set(edytor, controller);
+    return {
+        onEdytorAttached: ({ node }) => {
+            const layer = edytor.overlay.layer;
+            const offs = [
+                // The host's own area: classified with the editor's presses (`events/onFocus.ts`).
+                edytor.selection.pointer.claimMargins((event) => controller.press(event, true)),
+                onPress(edytor, layer, (event) => {
+                    const target = event.target;
+                    if (target?.matches?.(HANDLE_HOST))
+                        controller.press(event, false);
+                })
+            ];
+            const container = typeof options.container === 'string'
+                ? node.closest(options.container)
+                : options.container?.(node);
+            if (container)
+                offs.push(onPress(edytor, container, (event) => {
+                    const target = event.target;
+                    const around = target === container ||
+                        (target !== node && !!target?.contains(node) && container.contains(target));
+                    if (around)
+                        controller.press(event, false);
+                }));
+            const { box } = options;
+            const unmount = box
+                ? edytor.overlay.mount(MarqueeBox, { controller, box }, 'edytor-marquee-host', 6, (host) => {
+                    const rect = controller.rect;
+                    return () => Object.assign(host.style, {
+                        pointerEvents: 'none',
+                        display: rect ? '' : 'none',
+                        ...(rect && {
+                            left: `${rect.left}px`,
+                            top: `${rect.top}px`,
+                            width: `${rect.width}px`,
+                            height: `${rect.height}px`
+                        })
+                    });
+                })
+                : () => { };
+            return () => {
+                controller.destroy();
+                offs.forEach((off) => off());
+                unmount();
+            };
+        }
+    };
+};

package/dist/plugins/media/AudioPlugin.svelte

@@ -1,96 +1,11 @@
 <script module lang="ts">
-	import type { Plugin, BlockSnippetPayload } from '../../plugins.js';
-	import type { Block } from '../../block/block.svelte.js';
-	import type { Edytor } from '../../edytor.svelte.js';
-	import MediaEmpty from './MediaEmpty.svelte';
-	import { mediaKinds } from '../../crdt/semantics.js';
-	import { keywordsOf, labelsWith } from '../../labels.js';
-	import {
-		claimed,
-		escapeHtml,
-		mediaLabels,
-		mediaSourceOf,
-		safeMediaSrc,
-		mediaUploads,
-		type MediaPluginOptions
-	} from './media.js';
-
-	const uploadOf = new WeakMap<Edytor, MediaPluginOptions['upload']>();
-
-	const audioLink = (block: Block | undefined, value: string) => {
-		const src = safeMediaSrc(value);
-		if (!block || !src) return false;
-		block.data.src = src;
-		return true;
-	};
+	import type { Plugin } from '../../plugins.js';
+	import { sourcePlugin } from './SourceBlock.svelte';
 
 	/**
 	 * Notion's audio block: an audio file (an `http(s)` link, or an upload
 	 * through `upload`) in the browser's player, with an editable caption.
 	 * Void: its only text is the caption.
 	 */
-	export const createAudioPlugin =
-		(options: MediaPluginOptions = {}): Plugin =>
-		(edytor) => {
-			// First wins, as for the kind: a second listing never replaces it.
-			const first = !!edytor && !uploadOf.has(edytor);
-			if (first) uploadOf.set(edytor, options.upload);
-			const onPaste = first ? mediaUploads(edytor, 'audio', options.upload) : undefined;
-			const labels = labelsWith('media', options.labels);
-			mediaLabels.audio.claim(edytor, labels);
-			return {
-				...(onPaste ? { onPaste } : {}),
-				blocks: {
-					audio: {
-						...mediaKinds.audio,
-						snippet: audio,
-						element: 'figure',
-						presets: [
-							{
-								label: labels.audio.label,
-								icon: '🎵',
-								keywords: keywordsOf('block.audio', ['sound', 'music', 'mp3'], options.keywords),
-								group: 'Media'
-							}
-						],
-						html: (block, caption) => {
-							const src = safeMediaSrc(block.data?.src);
-							const media = src ? `<audio src="${escapeHtml(src)}" controls></audio>` : '';
-							return `<figure>${media}<figcaption>${caption}</figcaption></figure>`;
-						},
-						// An `audio` (bare, or in a `figure`) with a safe `src` or `source`.
-						parse: (el) => {
-							const src = mediaSourceOf(claimed(el, 'audio'));
-							return src ? { src } : undefined;
-						}
-					}
-				}
-			};
-		};
-
-	/** The audio block, links only. */
-	export const audioPlugin = createAudioPlugin();
+	export const createAudioPlugin = (): Plugin => sourcePlugin('audio', ['sound', 'music', 'mp3']);
 </script>
-
-{#snippet audio({ block, content }: BlockSnippetPayload<{ src?: string }>)}
-	{@const src = safeMediaSrc(block.data.src)}
-	{#if src}
-		<div use:block.void data-edytor-audio>
-			<audio {src} controls preload="metadata" style="display: block; width: 100%"></audio>
-		</div>
-	{:else}
-		<div use:block.void data-edytor-media-empty>
-			<MediaEmpty
-				block={block.handle}
-				kind="audio"
-				icon="🎵"
-				accept="audio/*"
-				upload={block.handle && uploadOf.get(block.handle.edytor)}
-				link={(value) => audioLink(block.handle, value)}
-			/>
-		</div>
-	{/if}
-	<!-- The core renders the kind's <figure> around this markup. -->
-	<!-- svelte-ignore a11y_figcaption_parent -->
-	<figcaption>{@render content()}</figcaption>
-{/snippet}

package/dist/plugins/media/AudioPlugin.svelte.d.ts

@@ -1,13 +1,10 @@
 import type { Plugin } from '../../plugins.js';
-import { type MediaPluginOptions } from './media.js';
 /**
  * Notion's audio block: an audio file (an `http(s)` link, or an upload
  * through `upload`) in the browser's player, with an editable caption.
  * Void: its only text is the caption.
  */
-export declare const createAudioPlugin: (options?: MediaPluginOptions) => Plugin;
-/** The audio block, links only. */
-export declare const audioPlugin: Plugin;
+export declare const createAudioPlugin: () => 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;