edytor 1.0.0-rc.2 → 1.0.0

package/dist/plugins/columns/resize.svelte.js

@@ -1,7 +1,8 @@
-import { isLonePress, takeKeys } from '../../events/onFocus.js';
+import { pin } from '../../surface/overlay.js';
+import { BandDrag, bandKey } from '../bands.svelte.js';
 import { bandOf, gapBefore } from './gaps.js';
 import { stacks } from './stacking.js';
-import { englishLabels } from '../../labels.js';
+import { columnsEnglish, labelsOf } from '../../labels.js';
 /** The guide line's width (the hover guide's and the drag's). */
 export const GUIDE = 2;
 /** A column's weight: `data.width`, a positive number, else 1. */
@@ -24,7 +25,7 @@ export const weightOf = (data) => {
  * 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.
@@ -38,7 +39,6 @@ export const weightOf = (data) => {
 export class ColumnResize {
     edytor;
     minWidth;
-    labels;
     /** The layout under the pointer. */
     hovered = $state(null);
     /** The layout whose band holds the focus. */
@@ -46,48 +46,45 @@ export class ColumnResize {
     /** A block drag is in progress: no strip takes the pointer. */
     dragging = $state(false);
     /** The measured strips of the hovered layout. */
-    strips = $state([]);
-    /** The strip being dragged. */
-    drag = $state(null);
+    strips = $state.raw([]);
+    /** The strip's drag in progress (`band.drag`). */
+    band;
     /** The guide's layer-relative box while a strip drags. */
     guide = $state(null);
-    /** Ends the drag in progress without a write (Escape, a cancel, the view turning readonly). */
-    #cancel = null;
     /** The two dragged columns' weights at the pointer, by id, while a strip drags (view only). */
     preview = $state.raw(null);
-    constructor(edytor, minWidth, 
-    /** The words the bands say (the plugin's `labels`). */
-    labels = englishLabels.columns) {
+    constructor(edytor, minWidth) {
         this.edytor = edytor;
         this.minWidth = minWidth;
-        this.labels = labels;
+        this.band = new BandDrag(edytor);
+    }
+    /** The words the bands say (the view's `columns` labels). */
+    get labels() {
+        return labelsOf(this.edytor, 'columns', columnsEnglish);
     }
     /** The view is readonly (reactive). */
     get readonly() {
         return this.edytor.readonly;
     }
-    /** A text selection is in progress (`selection.dragging`): the strips take no pointer. */
-    get selecting() {
-        return this.drag === null && this.edytor.selection.dragging;
-    }
     /**
      * 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.
+     * the pointer, the one a band holds the focus of, the innermost one
+     * holding the selection's start (the keyboard's).
      */
-    get layout() {
-        return this.drag?.left.parent?.id ?? this.hovered ?? this.focused ?? this.caretLayout;
-    }
-    /** The innermost layout holding the selection's start (the keyboard's). */
-    get caretLayout() {
-        const { facade, selection } = this.edytor;
-        for (let block = selection.state.startBlock; block && !block.isRoot; block = block.parent)
-            if (block.id && facade.isLayout(block.id))
-                return block.id;
+    get #layout() {
+        const { facade, selection, idToBlock } = this.edytor;
+        const layout = this.band.drag?.left.parent?.id ?? this.hovered ?? this.focused;
+        if (layout)
+            return layout;
+        const start = selection.projection.start?.block;
+        for (let at = start && idToBlock.get(start); at && !at.isRoot; at = at.parent)
+            if (at.id && facade.isLayout(at.id))
+                return at.id;
         return null;
     }
-    /** 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() {
-        return this.drag !== null || (!this.edytor.readonly && !this.dragging && !!this.layout);
+        return this.band.drag !== null || (!this.edytor.readonly && !this.dragging && !!this.#layout);
     }
     /** A column's weight as shown: the drag's preview while a strip drags it, else its stored one. */
     weight = (id, data) => (id === undefined ? undefined : this.preview?.[id]) ?? weightOf(data);
@@ -95,12 +92,10 @@ export class ColumnResize {
     hover = (target) => {
         const { facade } = this.edytor;
         let layout = null;
-        for (let node = target?.closest?.('[data-edytor-block="true"]'); node; node = node.parentElement?.closest('[data-edytor-block="true"]')) {
+        for (let node = target?.closest?.('[data-edytor-block="true"]'); node && !layout; node = node.parentElement?.closest('[data-edytor-block="true"]')) {
             const id = node.dataset.edytorId;
-            if (id && facade.isLayout(id)) {
+            if (id && facade.isLayout(id))
                 layout = id;
-                break;
-            }
         }
         if (layout === this.hovered)
             return;
@@ -109,23 +104,24 @@ export class ColumnResize {
     };
     /**
      * 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) => {
         const node = to instanceof Node ? to : null;
         const { edytor } = this;
-        if (node && (edytor.overlay.layer?.contains(node) || edytor.node?.contains(node)))
+        if (this.band.drag ||
+            (node && (edytor.overlay.layer?.contains(node) || edytor.node?.contains(node))))
             return;
         this.hovered = null;
     };
     /** The overlay measure: the hovered layout's gaps, and the guide of a drag. */
     measure = (host, origin) => {
-        const strips = this.shown ? this.gaps(origin) : [];
-        const drag = this.drag;
+        const strips = this.shown ? this.#gaps(origin) : [];
+        const drag = this.band.drag;
         const guide = drag && {
             // Where the hover guide showed: the band's middle, never the gap's (it would jump onto the `+`).
             x: drag.start +
-                this.widthAt(drag) +
+                this.#widthAt(drag) +
                 bandOf({ left: 0, right: drag.gap }).width / 2 -
                 GUIDE / 2 -
                 origin.left,
@@ -134,21 +130,18 @@ export class ColumnResize {
         };
         return () => {
             // Layer-relative, as the rest of the overlay's chrome.
-            Object.assign(host.style, { position: 'absolute', left: '0px', top: '0px' });
-            if (!sameStrips(strips, this.strips))
+            pin(host);
+            if (JSON.stringify(strips) !== JSON.stringify(this.strips))
                 this.strips = strips;
             this.guide = guide;
         };
     };
     /** The bands of the hovered layout (`bandOf` each gap): none when it stacks or shows fewer than two columns. */
-    gaps(origin) {
-        const id = this.layout;
+    #gaps(origin) {
+        const id = this.#layout;
         const layout = id ? this.edytor.idToBlock.get(id) : undefined;
-        const node = layout?.node;
-        if (!layout || !node?.isConnected)
-            return [];
-        const box = node.getBoundingClientRect();
-        if (stacks(box.width))
+        const box = layout?.node?.isConnected ? layout.node.getBoundingClientRect() : undefined;
+        if (!layout || !box || stacks(box.width))
             return [];
         const shown = layout.children.filter((item) => (item.node?.getBoundingClientRect().width ?? 0) > 0);
         return shown.slice(1).flatMap((item, index) => {
@@ -156,11 +149,12 @@ export class ColumnResize {
             if (!gap)
                 return [];
             const band = bandOf(gap);
-            const [left, right] = [shown[index], item].map((column) => this.weight(column.id, column.data));
+            const before = shown[index];
+            const [left, right] = [before, item].map((column) => this.weight(column.id, column.data));
             return [
                 {
                     layout: layout.id,
-                    left: shown[index].id,
+                    left: before.id,
                     right: item.id,
                     value: Math.round((100 * left) / (left + right)),
                     x: band.left - origin.left,
@@ -172,98 +166,35 @@ export class ColumnResize {
         });
     }
     /** The left column's width at the drag's pointer, held to the minimum on both sides. */
-    widthAt({ width, sum, min, from, at }) {
+    #widthAt({ width, sum, min, from, at }) {
         const lo = Math.min(min, width);
         const hi = Math.max(sum - min, width);
         return Math.min(hi, Math.max(lo, width + at - from));
     }
     /**
-     * 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, strip) => {
-        event.preventDefault();
-        if (isLonePress(this.edytor, event))
-            this.start(event, strip);
-    };
-    /**
-     * 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, strip) => {
-        const { edytor } = this;
-        if (event.button !== 0 || edytor.readonly || this.drag)
-            return;
-        const pair = this.pair(strip, event.clientX);
+        const pair = this.band.drag ? null : this.#pair(strip, event.clientX);
         if (!pair)
             return;
-        event.preventDefault();
-        event.stopPropagation();
-        const target = event.currentTarget;
-        const pointer = event.type === 'pointerdown';
-        if (pointer)
-            target?.setPointerCapture?.(event.pointerId);
-        this.drag = pair;
-        const document = target?.ownerDocument ?? edytor.node?.ownerDocument;
-        const tracked = pointer ? document : document?.defaultView;
-        const [moves, ups] = pointer ? ['pointermove', 'pointerup'] : ['mousemove', 'mouseup'];
-        const move = (moved) => {
-            if (!this.drag)
-                return;
-            if (!edytor.dispatcher.permits())
-                return end(moved);
-            this.drag.at = moved.clientX;
-            this.preview = this.weights(this.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.band.start(event, pair, (drag) => {
             this.guide = 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);
-            }
+            if (drag)
+                this.#release(drag);
             // After the release's write: the stored weights replace 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();
+        }, () => (this.preview = this.#weights(this.band.drag)));
     };
     /** `strip`'s two columns as they are now, measured, a drag from `from`; `null` when one is gone. */
-    pair(strip, from) {
+    #pair(strip, from) {
         const left = this.edytor.idToBlock.get(strip.left);
         const right = this.edytor.idToBlock.get(strip.right);
-        const layout = left?.parent;
-        const [a, b, box] = [left, right, layout].map((block) => block?.node?.getBoundingClientRect());
+        const [a, b, box] = [left, right, left?.parent].map((block) => block?.node?.getBoundingClientRect());
         if (!left || !right || !a || !b || !box)
             return null;
         return {
-            strip,
             left,
             right,
             from,
@@ -282,47 +213,31 @@ export class ColumnResize {
      * 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, strip) => {
-        const { edytor } = this;
-        event.stopPropagation();
-        if (event.key === 'Escape') {
-            event.preventDefault();
-            return takeKeys(edytor);
-        }
-        const step = { ArrowLeft: -1, ArrowRight: 1 }[event.key];
-        const edge = { Home: -Infinity, End: Infinity }[event.key];
-        if (step === undefined && edge === undefined)
-            return;
-        event.preventDefault();
-        if (this.drag || !edytor.dispatcher.permits())
-            return;
-        const pair = this.pair(strip, 0);
+        const step = bandKey(this.edytor, this.band, event, {
+            ArrowLeft: -1,
+            ArrowRight: 1,
+            Home: -Infinity,
+            End: Infinity
+        });
+        const pair = step && this.#pair(strip, 0);
         if (!pair)
             return;
-        pair.at = edge ?? step * (event.shiftKey ? 0.1 : 0.01) * pair.span;
-        this.release(pair);
-        edytor.overlay.invalidate();
+        pair.at = Number.isFinite(step) ? step * (event.shiftKey ? 0.1 : 0.01) * pair.span : step;
+        this.#release(pair);
+        this.edytor.overlay.invalidate();
     };
     /** A band took (`true`) or lost the focus: its layout's bands stay while it holds it. */
     focus = (strip, focused) => {
         this.focused = focused ? strip.layout : null;
         this.edytor.overlay.invalidate();
     };
-    /**
-     * 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 = () => {
-        if (this.drag && !this.edytor.dispatcher.permits())
-            this.#cancel?.();
-    };
     /** The two columns' weights at the drag's pointer, keeping their stored sum; `null` before it moved. */
-    weights(drag) {
-        const width = this.widthAt(drag);
+    #weights(drag) {
+        const width = this.#widthAt(drag);
         const { left, right, sum } = drag;
         if (Math.abs(width - drag.width) < 0.5 || sum <= 0)
             return null;
@@ -331,23 +246,14 @@ export class ColumnResize {
         return { [left.id]: weight, [right.id]: pair - weight };
     }
     /** The release: both weights, keeping their sum, one undo step; nothing when nothing moved. */
-    release(drag) {
-        const weights = this.weights(drag);
+    #release(drag) {
+        const weights = this.#weights(drag);
         const { left, right } = drag;
         if (!weights || !left.isInTree || !right.isInTree)
             return;
         this.edytor.transact(() => {
-            left.setData({ ...left.data, width: weights[left.id] });
-            right.setData({ ...right.data, width: weights[right.id] });
+            for (const column of [left, right])
+                this.edytor.patchData(column.id, [{ path: ['width'], value: weights[column.id] }]);
         });
     }
 }
-const sameStrips = (a, b) => a.length === b.length &&
-    a.every((strip, index) => strip.layout === b[index].layout &&
-        strip.value === b[index].value &&
-        strip.left === b[index].left &&
-        strip.right === b[index].right &&
-        strip.x === b[index].x &&
-        strip.top === b[index].top &&
-        strip.width === b[index].width &&
-        strip.height === b[index].height);

package/dist/plugins/comments/CommentsController.svelte.d.ts

@@ -2,7 +2,6 @@ import type { Edytor } from '../../edytor.svelte.js';
 import type { DocAnchor } from '../../crdt/index.js';
 import { type CommentChange, type CommentRun, type CommentThread } from '../../crdt/protocols/comments.js';
 import type { CommentsClient } from '../../collaboration/comments/client.js';
-import { type CommentsLabels } from '../../labels.js';
 /** Who a comment's author is, as the sidebar shows them. */
 export type CommentUser = {
     id: string;
@@ -40,7 +39,6 @@ export type CommentsControllerOptions = {
     user: CommentUser;
     users?: (id: string) => Omit<CommentUser, 'id'> | undefined;
     onComment?: (change: CommentChange, notice: CommentNotice) => void;
-    labels?: CommentsLabels;
 };
 /**
  * The comments plugin's state and actions (`plugins/comments`): the
@@ -65,7 +63,6 @@ export declare class CommentsController {
     error: string | null;
     readonly client: CommentsClient;
     readonly user: CommentUser;
-    readonly labels: CommentsLabels;
     constructor(edytor: Edytor, options: CommentsControllerOptions);
     /** Every thread's anchor runs, in document order (maintained per commit). */
     readonly anchors: Map<string, CommentRun[]>;
@@ -81,7 +78,7 @@ export declare class CommentsController {
     get canComment(): boolean;
     /** One thread, by id. */
     thread(id: string): PlacedThread | undefined;
-    /** A user as the sidebar shows them: their name, avatar and color. */
+    /** A user as the sidebar shows them: their name (else their id), avatar and color. */
     userOf: (id: string) => CommentUser;
     /** Whether the current user may delete `comment` of `thread` (its author). */
     mayDelete: (thread: CommentThread, comment: {

package/dist/plugins/comments/CommentsController.svelte.js

@@ -1,9 +1,9 @@
 import { selectedTextSpans } from '../../selection/visibility.js';
 import { Text } from '../../text/text.svelte.js';
-import { reveal } from '../../selection/replaceSelection.js';
+import { showText } from '../planned.js';
 import { COMMENT_MARK, blockCommentRuns, commentId, joinAnchors } from '../../crdt/protocols/comments.js';
 import { CommentThreads } from '../../collaboration/comments/threads.js';
-import { englishLabels } from '../../labels.js';
+import { takeKeys } from '../../events/onFocus.js';
 const avatarColors = ['#e16259', '#d9730d', '#cb912f', '#448361', '#337ea9', '#9065b0', '#c14c8a'];
 /**
  * The comments plugin's state and actions (`plugins/comments`): the
@@ -33,13 +33,11 @@ export class CommentsController {
     #off = [];
     client;
     user;
-    labels;
     constructor(edytor, options) {
         this.edytor = edytor;
         this.options = options;
         this.client = options.client;
         this.user = options.user;
-        this.labels = options.labels ?? englishLabels.comments;
     }
     /**
      * The blocks holding an anchor, and their runs by thread: read once at
@@ -102,10 +100,10 @@ export class CommentsController {
     thread(id) {
         return this.threads.find((thread) => thread.id === id);
     }
-    /** A user as the sidebar shows them: their name, avatar and color. */
+    /** A user as the sidebar shows them: their name (else their id), avatar and color. */
     userOf = (id) => {
         const known = id === this.user.id ? this.user : { id, ...this.options.users?.(id) };
-        const name = known.name ?? (id === this.user.id ? this.labels.you : id);
+        const name = known.name ?? id;
         let hash = 0;
         for (const char of id)
             hash = (hash * 31 + char.charCodeAt(0)) | 0;
@@ -133,7 +131,7 @@ export class CommentsController {
         const detach = client.attach?.({
             order: () => edytor.facade.order(),
             contentItems: (id) => edytor.facade.contentItems(id),
-            unsetMark: (block, offset, length, mark) => edytor.facade.unsetMark(block, offset, length, mark),
+            formatRange: (block, offset, length, marks) => edytor.facade.formatRange(block, offset, length, marks),
             // A store's removal is no step of this view's history.
             transact: (fn) => (edytor.doc._transaction ? fn() : edytor.dispatcher.outside(() => fn()))
         });
@@ -203,7 +201,9 @@ export class CommentsController {
         if (!this.canComment)
             return false;
         const { facade, selection } = edytor;
-        const { isCollapsed, startBlock } = selection.state;
+        const { startText } = selection.textRange();
+        const { isCollapsed } = selection.projection;
+        const startBlock = startText?.parent;
         const spans = isCollapsed
             ? (startBlock?.content ?? []).flatMap((part) => part instanceof Text && part.length > 0
                 ? [{ text: part, start: 0, end: part.length }]
@@ -273,17 +273,13 @@ export class CommentsController {
     };
     /** The one write of a thread's anchor: its mark over `runs`, one command. */
     #anchor = (thread, runs) => {
-        const { facade, dispatcher, idToBlock } = this.edytor;
+        const { facade } = this.edytor;
         if (runs.length === 0)
             return 'noop';
         const mark = `${COMMENT_MARK}:${thread}`;
         const prepare = (payload) => facade.compose(...payload.runs.map(({ block, offset, length }) => facade.prepare.formatRange(block, offset, length, { [mark]: { id: payload.thread } })));
-        const block = idToBlock.get(runs[0].block) ?? this.edytor.root;
-        dispatcher.dispatch('addComment', { thread, runs }, { block }, (payload, plan = prepare(payload)) => {
-            if ('writes' in plan)
-                facade.apply(plan);
-        }, prepare);
-        return dispatcher.last?.operation === 'addComment' ? dispatcher.last.status : 'refused';
+        const block = this.edytor.idToBlock.get(runs[0].block);
+        return this.edytor.dispatcher.plan('addComment', { thread, runs }, prepare, block).status;
     };
     // ── A thread's actions ───────────────────────────────────────────────
     reply = async (thread, body) => body.trim() ? (await this.#send({ op: 'reply', thread, body })) !== null : false;
@@ -301,14 +297,8 @@ export class CommentsController {
     focus = (thread) => {
         this.active = thread;
         const run = thread ? this.anchors.get(thread)?.[0] : undefined;
-        const block = run && this.edytor.idToBlock.get(run.block);
-        if (block) {
-            reveal(block);
-            block.textAtOffset(run.offset)?.text.node?.scrollIntoView?.({
-                block: 'nearest',
-                inline: 'nearest'
-            });
-        }
+        if (run)
+            showText(this.edytor, run.block, run.offset);
         this.edytor.overlay.invalidate();
     };
     /**
@@ -344,8 +334,7 @@ export class CommentsController {
         ].join('');
     });
     #refocus = () => {
-        this.edytor.expectInternalFocus();
-        this.edytor.node?.focus({ preventScroll: true });
+        takeKeys(this.edytor);
         this.edytor.overlay.invalidate();
     };
 }