edytor 1.0.0-rc.3 → 2.0.0

package/dist/plugins/image/controls.svelte.js

@@ -1,11 +1,8 @@
-import { englishLabels } from '../../labels.js';
-import { isLonePress, takeKeys } from '../../events/onFocus.js';
-import { imageAlignOf, imageAltOf, imageWidthOf, MIN_IMAGE_WIDTH } from './image.js';
-import { identify, keepFocus } from '../chrome.js';
-/** Where a press keeps the alt field open: the toolbar (its Alt button toggles it) and the field's own. */
-const ALT_CHROME = '[data-edytor-image-alt-panel], [data-edytor-image-toolbar], [data-edytor-image-alt]';
+import { BandDrag } from '../bands.svelte.js';
+import { layerBox, pin, sameValues } from '../../surface/overlay.js';
+import { imageAlignOf, imageWidthOf, MIN_IMAGE_WIDTH } from './image.js';
 /** The image element of a shown image block (none while it uploads); an image holds no block. */
-const imageOf = (node) => node?.querySelector('[data-edytor-image]:not([data-edytor-image-uploading]) > img') ?? null;
+const imageOf = (node) => node?.querySelector('[data-edytor-image] > img') ?? null;
 /**
  * The image chrome (Notion's), in the overlay: on the image under
  * the pointer of an editable view, a resize handle on each side and a
@@ -21,24 +18,27 @@ const imageOf = (node) => node?.querySelector('[data-edytor-image]:not([data-edy
  */
 export class ImageControls {
     edytor;
-    labels;
     /** The image block under the pointer. */
     hovered = $state(null);
-    /** The image whose alt field is open: the chrome stays on it. */
-    editing = $state(null);
+    /** The image the toolbar holds (its alt field is open): the chrome stays on it. @internal */
+    held = $state(null);
     /** The measured box of the image the chrome is on. */
     box = $state(null);
-    /** The handle being dragged. */
-    drag = $state(null);
     /** The dragged image's width at the pointer (view only). @internal */
     preview = $state.raw(null);
-    /** Ends the drag in progress without a write. */
-    #cancel = null;
-    constructor(edytor, 
-    /** The words the chrome shows (the plugin's `labels`). */
-    labels = englishLabels.image) {
+    /** The handles' gesture (a resize band's: press, view-only preview, one write). @internal */
+    band;
+    /** The view's image toolbar, when its plugin is listed. @internal */
+    toolbar;
+    constructor(
+    /** @internal */
+    edytor) {
         this.edytor = edytor;
-        this.labels = labels;
+        this.band = new BandDrag(edytor);
+    }
+    /** The handle being dragged. */
+    get drag() {
+        return this.band.drag;
     }
     /** The view is readonly (reactive). */
     get readonly() {
@@ -46,7 +46,7 @@ export class ImageControls {
     }
     /** A text selection is in progress: the chrome takes no pointer. */
     get selecting() {
-        return this.drag === null && this.edytor.selection.dragging;
+        return this.band.selecting;
     }
     /** The image block that is the whole block selection, if any (reactive): the keyboard's image. */
     get selected() {
@@ -61,7 +61,7 @@ export class ImageControls {
      * edited, the hovered one, else the selected one (no pointer needed).
      */
     get target() {
-        return this.drag?.id ?? this.editing ?? this.hovered ?? this.selected;
+        return this.drag?.id ?? this.held ?? this.hovered ?? this.selected;
     }
     /** Whether the chrome shows: over an image of an editable view, or while a handle drags. */
     get shown() {
@@ -94,160 +94,34 @@ export class ImageControls {
     measure = (host, origin) => {
         const id = this.target;
         const block = id ? this.edytor.idToBlock.get(id) : undefined;
-        const img = imageOf(block?.node);
-        const rect = img?.isConnected ? img.getBoundingClientRect() : null;
-        const box = id && block && rect
-            ? {
-                id,
-                x: rect.left - origin.left,
-                y: rect.top - origin.top,
-                width: rect.width,
-                height: rect.height,
-                align: imageAlignOf(block.data)
-            }
-            : null;
+        const rect = layerBox(imageOf(block?.node), origin);
+        const box = id && block && rect ? { id, ...rect, align: imageAlignOf(block.data) } : null;
         return () => {
             // Layer-relative, as the rest of the overlay's chrome.
-            Object.assign(host.style, { position: 'absolute', left: '0px', top: '0px' });
-            if (!sameBox(box, this.box))
+            pin(host);
+            if (!sameValues(box, this.box))
                 this.box = box;
-            if (!box && this.editing === id)
-                this.editing = null;
+            if (!box && this.held === id)
+                this.held = null;
         };
     };
     /** Measure again in the overlay's next frame. @internal */
     invalidate = () => this.edytor.overlay.invalidate();
-    /** Set the target image's alignment: one `patchData` command. */
-    align = (align) => {
-        const block = this.#block();
-        if (block && imageAlignOf(block.data) !== align)
-            block.data.align = align;
-    };
-    /** The target image's alt text. */
-    get alt() {
-        return imageAltOf(this.#block()?.data);
-    }
-    /** Write the alt text as it is typed: the dispatcher groups the keystrokes into one step. */
-    setAlt = (alt) => {
-        const block = this.#block();
-        if (block && imageAltOf(block.data) !== alt)
-            block.data.alt = alt;
-    };
-    /** Open (or close) the alt field of the target image. */
-    toggleAlt = () => {
-        this.editing = this.editing ? null : (this.box?.id ?? null);
-        this.edytor.overlay.invalidate();
-    };
     /**
-     * A press anywhere (`onPress`, capture): one outside the alt panel and the
-     * toolbar (whose Alt button toggles it) closes the field, so the chrome
-     * follows the pointer again.
-     * @internal
-     */
-    pressed = (event) => {
-        const target = event.target;
-        if (this.editing === null)
-            return;
-        if (target?.closest?.(ALT_CHROME))
-            return;
-        this.closeAlt();
-    };
-    /** Focus left the alt field: for somewhere outside its panel, the field closes. @internal */
-    blurred = (event) => {
-        const to = event.relatedTarget;
-        const field = event.currentTarget;
-        const panel = field?.closest('[data-edytor-image-alt-panel]') ?? field;
-        // No new focus (the window went to the background): the field stays.
-        if (!(to instanceof Node) || panel?.contains(to))
-            return;
-        this.closeAlt();
-    };
-    /**
-     * The image's toolbar (`{@attach controls.bar}`): its `toolbar` role and
-     * name unless it has its own, the mark a press outside the alt field
-     * reads (a press on the toolbar keeps the field open, so its Alt button
-     * toggles it), and presses that keep the editor's focus.
-     */
-    bar = (node) => {
-        if (!node.hasAttribute('role'))
-            node.setAttribute('role', 'toolbar');
-        if (!node.hasAttribute('aria-label'))
-            node.setAttribute('aria-label', this.labels.toolbar);
-        node.setAttribute('data-edytor-image-toolbar', '');
-        node.addEventListener('mousedown', keepFocus);
-        return () => node.removeEventListener('mousedown', keepFocus);
-    };
-    /**
-     * The alt text field (`{@attach controls.altField}`): focused when it
-     * opens; Enter or Escape closes it and gives the editor its keys back,
-     * focus moving out of it (or of the element marked
-     * `data-edytor-image-alt-panel` around it) closes it, and a press on it
-     * keeps it open. Write its value with `setAlt`.
-     */
-    altField = (node) => {
-        identify(node, this.edytor.popups.idOf('image-alt'), undefined, this.labels.alt);
-        node.setAttribute('data-edytor-image-alt', '');
-        node.focus({ preventScroll: true });
-        const keydown = (event) => {
-            if (event.isComposing || (event.key !== 'Enter' && event.key !== 'Escape'))
-                return;
-            event.preventDefault();
-            this.closeAlt(true);
-        };
-        node.addEventListener('keydown', keydown);
-        node.addEventListener('focusout', this.blurred);
-        return () => {
-            node.removeEventListener('keydown', keydown);
-            node.removeEventListener('focusout', this.blurred);
-        };
-    };
-    /** Close the alt field; with `keys`, the editor takes the keys back. */
-    closeAlt = (keys = false) => {
-        if (this.editing === null)
-            return;
-        this.editing = null;
-        this.edytor.overlay.invalidate();
-        if (keys)
-            takeKeys(this.edytor);
-    };
-    #block = () => {
-        const id = this.box?.id;
-        const block = id ? this.edytor.idToBlock.get(id) : undefined;
-        return block?.isInTree ? block : undefined;
-    };
-    /**
-     * A `mousedown` on a handle: no native selection starts there; the press
-     * itself when no `pointerdown` came before it (`isLonePress`: WebKit's
-     * first press after a drag), which starts the drag as one would.
-     * @internal
-     */
-    mousedown = (event, side) => {
-        event.preventDefault();
-        if (isLonePress(this.edytor, event))
-            this.start(event, side);
-    };
-    /**
-     * Press on a handle: the drag starts, nothing is written until the
-     * release. A `pointerdown` tracks its pointer (captured, on the document);
-     * a lone `mousedown` tracks the mouse on the window.
+     * Press on a handle (`{@attach band.press(…)}`): the drag starts, nothing
+     * is written until the release.
      * @internal
      */
     start = (event, side) => {
         const { edytor } = this;
         const box = this.box;
-        if (event.button !== 0 || !edytor.dispatcher.permits() || this.drag || !box)
+        if (!edytor.dispatcher.permits() || !box)
             return;
         const img = imageOf(edytor.idToBlock.get(box.id)?.node);
         const frame = img?.parentElement;
         if (!img || !frame)
             return;
-        event.preventDefault();
-        event.stopPropagation();
-        const target = event.currentTarget;
-        const pointer = event.type === 'pointerdown';
-        if (pointer)
-            target?.setPointerCapture?.(event.pointerId);
-        this.drag = {
+        const drag = {
             id: box.id,
             side,
             from: event.clientX,
@@ -256,57 +130,21 @@ export class ImageControls {
             max: frame.getBoundingClientRect().width,
             factor: box.align === 'center' ? 2 : 1
         };
-        const document = target?.ownerDocument ?? edytor.node?.ownerDocument;
-        const tracked = pointer ? document : document?.defaultView;
-        const [moves, ups] = pointer ? ['pointermove', 'pointerup'] : ['mousemove', 'mouseup'];
-        const move = (moved) => {
-            const drag = this.drag;
-            if (!drag)
-                return;
-            if (!edytor.dispatcher.permits())
-                return end(moved);
-            drag.at = moved.clientX;
-            this.preview = { id: drag.id, width: widthAt(drag) };
-            edytor.overlay.invalidate();
-        };
-        const end = (ended) => {
-            tracked?.removeEventListener(moves, move);
-            tracked?.removeEventListener(ups, end);
-            tracked?.removeEventListener('pointercancel', end);
-            document?.removeEventListener('keydown', escape, true);
-            const drag = this.drag;
-            this.drag = null;
-            this.#cancel = null;
-            edytor.overlay.invalidate();
-            if (drag && ended.type === ups) {
-                drag.at = ended.clientX;
-                this.#release(drag);
-                // The editor holds the keys after the release (Notion: Mod+Z right after).
-                takeKeys(edytor);
-            }
+        this.band.start(event, drag, (done) => {
+            if (done)
+                this.#release(done);
             // After the release's write: the stored width replaces the preview in one flush.
             this.preview = null;
-        };
-        const escape = (key) => {
-            if (key.key !== 'Escape')
-                return;
-            key.preventDefault();
-            key.stopPropagation();
-            end(key);
-        };
-        this.#cancel = () => end(new Event('cancel'));
-        tracked?.addEventListener(moves, move);
-        tracked?.addEventListener(ups, end);
-        if (pointer)
-            tracked?.addEventListener('pointercancel', end);
-        document?.addEventListener('keydown', escape, true);
-        edytor.overlay.invalidate();
+        }, () => {
+            const moving = this.band.drag;
+            if (moving)
+                this.preview = { id: moving.id, width: widthAt(moving) };
+        });
     };
     /** The view turned readonly: a drag in progress ends at once, nothing written. @internal */
     lock = () => {
-        if (this.drag && !this.edytor.dispatcher.permits())
-            this.#cancel?.();
-        this.editing = null;
+        this.band.lock();
+        this.held = null;
     };
     /** The release: `data.width`, rounded to the px, one undo step; nothing when nothing moved. */
     #release(drag) {
@@ -315,7 +153,7 @@ export class ImageControls {
         if (!block?.isInTree || Math.abs(widthAt(drag) - drag.width) < 1)
             return;
         if (imageWidthOf(block.data) !== width)
-            block.data.width = width;
+            block.edytor.patchData(block.id, [{ path: ['width'], value: width }]);
     }
 }
 /** The image's width at the drag's pointer, held between the minimum and its frame's width. */
@@ -324,12 +162,5 @@ const widthAt = ({ side, from, at, width, max, factor }) => {
     const hi = Math.max(max, width);
     return Math.min(hi, Math.max(lo, width + (side === 'right' ? 1 : -1) * factor * (at - from)));
 };
-const sameBox = (a, b) => a === b ||
-    (a !== null &&
-        b !== null &&
-        a.id === b.id &&
-        a.x === b.x &&
-        a.y === b.y &&
-        a.width === b.width &&
-        a.height === b.height &&
-        a.align === b.align);
+/** Each view's image chrome (the first image plugin listed claims it). */
+export const imageControls = new WeakMap();

package/dist/plugins/image/image.css

@@ -0,0 +1,17 @@
+/* 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). */
+/* Where an image narrower than its block sits (Notion's alignment). */
+[data-edytor-image] {
+	display: flex;
+	position: relative;
+	justify-content: center;
+}
+[data-edytor-image][data-align='left'] {
+	justify-content: flex-start;
+}
+[data-edytor-image][data-align='right'] {
+	justify-content: flex-end;
+}
+[data-edytor-image] img {
+	max-width: 100%;
+}

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

@@ -1,8 +1,3 @@
-/** Each view's image labels: the first image plugin listed claims them, as its kind. */
-export declare const imageLabels: {
-    claim: (view: object | undefined, labels: import("../../labels.js").ImageLabels) => void;
-    of: (view: object | undefined) => import("../../labels.js").ImageLabels;
-};
 /** An image source the block may render: http(s), blob, or an inline image. */
 export declare const safeImageSrc: (value: unknown) => string | null;
 /**

package/dist/plugins/image/image.js

@@ -1,6 +1,3 @@
-import { viewLabels } from '../../labels.js';
-/** Each view's image labels: the first image plugin listed claims them, as its kind. */
-export const imageLabels = viewLabels('image');
 /** An image source the block may render: http(s), blob, or an inline image. */
 export const safeImageSrc = (value) => {
     if (typeof value !== 'string')

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

@@ -0,0 +1,69 @@
+/**
+ * The image toolbar (Notion's), its own plugin: the app's `toolbar` over
+ * the image the view's image chrome is on (`ImageControls`), at its top
+ * right: the alignments and the alt text field. An alignment is one
+ * `patchData` command; the alt text is written as it is typed (the
+ * dispatcher groups the keystrokes into one step). While the alt field is
+ * open the chrome stays on its image; a press outside the toolbar and the
+ * field (`onPress`) or focus leaving the field closes it.
+ */
+import type { Attachment } from 'svelte/attachments';
+import type { Snippet } from 'svelte';
+import type { Plugin } from '../../plugins.js';
+import { type ImageAlign } from './image.js';
+import { type ImageControls } from './controls.svelte.js';
+/**
+ * What a `toolbar` snippet receives: the image the chrome is on (`box`),
+ * its alignment (`align`) and alt text (`alt`, `setAlt`), the alt field's
+ * state (`editing`, `toggleAlt`, `closeAlt`) and the attachments that give
+ * your markup its behavior (`bar`, `altField`).
+ */
+export declare class ImageToolbar {
+    #private;
+    constructor(
+    /** @internal */
+    controls: ImageControls);
+    /** The measured image the toolbar is on (`null`: none). */
+    get box(): import("./controls.svelte.js").ImageBox | null;
+    /** The view is readonly (reactive). */
+    get readonly(): boolean;
+    /** The image whose alt field is open: the chrome stays on it. */
+    get editing(): string | null;
+    set editing(id: string | null);
+    /** Set the target image's alignment: one `patchData` command. */
+    align: (align: ImageAlign) => void;
+    /** The target image's alt text. */
+    get alt(): string;
+    /** Write the alt text as it is typed: the dispatcher groups the keystrokes into one step. */
+    setAlt: (alt: string) => void;
+    /** Open (or close) the alt field of the target image. */
+    toggleAlt: () => void;
+    /**
+     * The image's toolbar (`{@attach controls.bar}`, named by your markup): its
+     * `toolbar` role unless it has its own, the mark a press outside the alt field
+     * reads (a press on the toolbar keeps the field open, so its Alt button
+     * toggles it), and presses that keep the editor's focus.
+     */
+    bar: Attachment<HTMLElement>;
+    /**
+     * The alt text field (`{@attach controls.altField}`): focused when it
+     * opens; Enter or Escape closes it and gives the editor its keys back,
+     * focus moving out of it (or of the element marked
+     * `data-edytor-image-alt-panel` around it) closes it, and a press on it
+     * keeps it open. Write its value with `setAlt`.
+     */
+    altField: Attachment<HTMLInputElement>;
+    /** Close the alt field; with `keys`, the editor takes the keys back. */
+    closeAlt: (keys?: boolean) => void;
+}
+export type ImageToolbarOptions = {
+    /**
+     * The toolbar over the hovered image (the alignments and the alt field);
+     * it renders while the image chrome shows and no handle drags, at the
+     * image's top right. Keep its behaviour with `{@attach toolbar.bar}` on
+     * the toolbar and `{@attach toolbar.altField}` on the alt field.
+     */
+    toolbar: Snippet<[ImageToolbar]>;
+};
+/** The image toolbar: your `toolbar` over the image the chrome is on. The first listed claims the view. */
+export declare const createImageToolbarPlugin: ({ toolbar }: ImageToolbarOptions) => Plugin;

package/dist/plugins/image/toolbar.svelte.js

@@ -0,0 +1,145 @@
+import { onPress, takeKeys } from '../../events/onFocus.js';
+import { pin } from '../../surface/overlay.js';
+import { imageAlignOf, imageAltOf } from './image.js';
+import { imageControls } from './controls.svelte.js';
+import { identify, keepFocus } from '../chrome.js';
+import { all, listen } from '../../utils/listen.js';
+import ImageToolbarHost from './ImageToolbarHost.svelte';
+/** Where a press keeps the alt field open: the toolbar (its Alt button toggles it) and the field's own. */
+const ALT_CHROME = '[data-edytor-image-alt-panel], [data-edytor-image-toolbar], [data-edytor-image-alt]';
+/**
+ * What a `toolbar` snippet receives: the image the chrome is on (`box`),
+ * its alignment (`align`) and alt text (`alt`, `setAlt`), the alt field's
+ * state (`editing`, `toggleAlt`, `closeAlt`) and the attachments that give
+ * your markup its behavior (`bar`, `altField`).
+ */
+export class ImageToolbar {
+    controls;
+    constructor(
+    /** @internal */
+    controls) {
+        this.controls = controls;
+    }
+    /** The measured image the toolbar is on (`null`: none). */
+    get box() {
+        return this.controls.box;
+    }
+    /** The view is readonly (reactive). */
+    get readonly() {
+        return this.controls.readonly;
+    }
+    /** The image whose alt field is open: the chrome stays on it. */
+    get editing() {
+        return this.controls.held;
+    }
+    set editing(id) {
+        this.controls.held = id;
+    }
+    get #edytor() {
+        return this.controls.edytor;
+    }
+    /** Set the target image's alignment: one `patchData` command. */
+    align = (align) => {
+        const block = this.#block();
+        if (block && imageAlignOf(block.data) !== align)
+            block.edytor.patchData(block.id, [{ path: ['align'], value: align }]);
+    };
+    /** The target image's alt text. */
+    get alt() {
+        return imageAltOf(this.#block()?.data);
+    }
+    /** Write the alt text as it is typed: the dispatcher groups the keystrokes into one step. */
+    setAlt = (alt) => {
+        const block = this.#block();
+        if (block && imageAltOf(block.data) !== alt)
+            block.edytor.patchData(block.id, [{ path: ['alt'], value: alt }]);
+    };
+    /** Open (or close) the alt field of the target image. */
+    toggleAlt = () => {
+        this.editing = this.editing ? null : (this.box?.id ?? null);
+        this.#edytor.overlay.invalidate();
+    };
+    /**
+     * A press anywhere (`onPress`, capture): one outside the alt panel and the
+     * toolbar (whose Alt button toggles it) closes the field, so the chrome
+     * follows the pointer again.
+     * @internal
+     */
+    pressed = (event) => {
+        const target = event.target;
+        if (this.editing === null)
+            return;
+        if (target?.closest?.(ALT_CHROME))
+            return;
+        this.closeAlt();
+    };
+    /** Focus left the alt field: for somewhere outside its panel, the field closes. @internal */
+    blurred = (event) => {
+        const to = event.relatedTarget;
+        const field = event.currentTarget;
+        const panel = field?.closest('[data-edytor-image-alt-panel]') ?? field;
+        // No new focus (the window went to the background): the field stays.
+        if (!(to instanceof Node) || panel?.contains(to))
+            return;
+        this.closeAlt();
+    };
+    /**
+     * The image's toolbar (`{@attach controls.bar}`, named by your markup): its
+     * `toolbar` role unless it has its own, the mark a press outside the alt field
+     * reads (a press on the toolbar keeps the field open, so its Alt button
+     * toggles it), and presses that keep the editor's focus.
+     */
+    bar = (node) => {
+        if (!node.hasAttribute('role'))
+            node.setAttribute('role', 'toolbar');
+        node.setAttribute('data-edytor-image-toolbar', '');
+        return listen(node, 'mousedown', keepFocus);
+    };
+    /**
+     * The alt text field (`{@attach controls.altField}`): focused when it
+     * opens; Enter or Escape closes it and gives the editor its keys back,
+     * focus moving out of it (or of the element marked
+     * `data-edytor-image-alt-panel` around it) closes it, and a press on it
+     * keeps it open. Write its value with `setAlt`.
+     */
+    altField = (node) => {
+        identify(node, this.#edytor.popups.idOf('image-alt'));
+        node.setAttribute('data-edytor-image-alt', '');
+        node.focus({ preventScroll: true });
+        const keydown = (event) => {
+            if (event.isComposing || (event.key !== 'Enter' && event.key !== 'Escape'))
+                return;
+            event.preventDefault();
+            this.closeAlt(true);
+        };
+        return all(listen(node, 'keydown', keydown), listen(node, 'focusout', this.blurred));
+    };
+    /** Close the alt field; with `keys`, the editor takes the keys back. */
+    closeAlt = (keys = false) => {
+        if (this.editing === null)
+            return;
+        this.editing = null;
+        this.#edytor.overlay.invalidate();
+        if (keys)
+            takeKeys(this.#edytor);
+    };
+    #block = () => {
+        const id = this.box?.id;
+        const block = id ? this.#edytor.idToBlock.get(id) : undefined;
+        return block?.isInTree ? block : undefined;
+    };
+}
+/** The image toolbar: your `toolbar` over the image the chrome is on. The first listed claims the view. */
+export const createImageToolbarPlugin = ({ toolbar }) => (edytor) => ({
+    onEdytorAttached: ({ node }) => {
+        const controls = imageControls.get(edytor);
+        if (!controls || controls.toolbar)
+            return;
+        const bar = (controls.toolbar = new ImageToolbar(controls));
+        return all(
+        // A press outside the alt panel closes it (WebKit's lone `mousedown` too).
+        onPress(edytor, node.ownerDocument, bar.pressed, true), edytor.overlay.mount(ImageToolbarHost, { toolbar: bar, snippet: toolbar }, 'edytor-image-toolbar-host', 
+        // With the image chrome: above the block handles and the column bands.
+        7, (host) => () => pin(host)), () => (controls.toolbar = undefined));
+    }
+});