edytor 4.0.0 → 6.0.0

package/dist/crdt/vendor/yjs/src/ynode.js

@@ -12,6 +12,7 @@ import {
   ContentType,
   ContentHold, // YP20
   ContentMove, // YP22
+  hideIds, // YP32
   readFormatValue, // YP25
   YXmlFragmentRefID,
   YXmlElementRefID,
@@ -327,19 +328,24 @@ const holdHelper = (transaction, list, ids) => {
 
 /**
  * With `held`, the live units are not deleted: their ids go to `held`
- * (`client, clock, len`), except those `fresh` names (YP20).
+ * (`client, clock, len`), except those `fresh` names (YP20). YP32: with
+ * `sort` (a suggestion's delete), `sort`'s `1` goes to `held`, `2` to
+ * `proposed` and `hidden`, `3` to `hidden`.
  *
  * @param {Transaction} transaction
  * @param {ItemTextListPosition} currPos
  * @param {number} length
  * @param {Array<number>|null} [held]
  * @param {import('./utils/ids.js').IdSet|null} [fresh]
+ * @param {((client: number, clock: number) => number)|null} [sort] YP32: a suggestion's delete sorts each unit
+ * @param {Array<number>|null} [proposed] YP32: the units it proposes
+ * @param {Array<number>|null} [hidden] YP32: the units it hides until `unhide`
  * @return {ItemTextListPosition}
  *
  * @private
  * @function
  */
-export const deleteText = (transaction, currPos, length, held = null, fresh = null) => {
+export const deleteText = (transaction, currPos, length, held = null, fresh = null, sort = null, proposed = null, hidden = null) => {
   const startLength = length
   let kept = 0 // YP20
   while (length > 0 && currPos.right !== null) {
@@ -347,15 +353,19 @@ export const deleteText = (transaction, currPos, length, held = null, fresh = nu
     if (!item.deleted && item.countable) {
       const { client, clock } = item.id
       // YP20: a held run ends where the open step's inserts start or end
-      const n = fresh === null ? math.min(length, item.length) : runEnd(fresh, client, clock, clock + math.min(length, item.length)) - clock
+      let n = fresh === null ? math.min(length, item.length) : runEnd(fresh, client, clock, clock + math.min(length, item.length)) - clock
+      // YP32: a suggestion's delete sorts each unit — held (`1`), proposed (`2`) or stepped over (`3`)
+      const kind = held === null || (fresh !== null && fresh.has(client, clock)) ? 0 : sort === null ? 1 : sort(client, clock)
+      if (kind !== 0 && sort !== null) for (let k = 1; k < n; k++) if (sort(client, clock + k) !== kind) n = k
       if (n < item.length) {
         getItemCleanStart(transaction, createID(client, clock + n))
       }
       length -= item.length
-      if (held === null || (fresh !== null && fresh.has(client, clock))) {
+      if (kind === 0) {
         item.delete(transaction)
       } else {
-        held.push(client, clock, item.length)
+        if (kind === 2) /** @type {Array<number>} */ (proposed).push(client, clock, item.length)
+        ;/** @type {Array<number>} */ (kind === 1 ? held : hidden).push(client, clock, item.length)
         kept += item.length
       }
     }
@@ -993,12 +1003,20 @@ export class YNode {
    * which an undo of the record takes back), except those `fresh` names (the
    * open undo step's inserts: removed, so that step's undo changes nothing).
    *
+   * YP32: with `propose` (a suggestion's delete) each unit is sorted: held
+   * by the record in `into` (`1`: its author's own), proposed (`2`: an id
+   * list appended to `propose.into`, a suggestion's record, holding nothing)
+   * or stepped over (`3`: already proposed); proposed and stepped-over units
+   * read gone until `unhide`, so the rest of the plan reads the offsets it
+   * was prepared with.
+   *
    * @param {number} index Index at which to start deleting elements
    * @param {number} length The number of elements to remove. Defaults to 1.
    * @param {YNode|null} [into]
    * @param {import('./utils/ids.js').IdSet|null} [fresh]
+   * @param {{ into: YNode, sort: (client: number, clock: number) => number }|null} [propose]
    */
-  delete (index, length = 1, into = null, fresh = null) {
+  delete (index, length = 1, into = null, fresh = null, propose = null) {
     if (!(length > 0)) return
     if (this.doc == null) {
       const runs = prelimOf(this).runs
@@ -1015,13 +1033,17 @@ export class YNode {
     transact(this.doc, transaction => {
       const currPos = cursorAt(transaction, this, index)
       const held = into === null ? null : [] // YP20
-      deleteText(transaction, currPos, length, held, fresh)
+      const [proposed, hidden] = [[], []] // YP32
+      deleteText(transaction, currPos, length, held, fresh, propose && propose.sort, proposed, hidden)
       if (held !== null && held.length > 0) {
         // YP20: `deleteText` moved the markers as for a delete; the hold keeps them
         const ms = this._searchMarker === null ? null : this._searchMarker.slice()
         holdHelper(transaction, /** @type {YNode} */ (into), held)
         if (ms !== null && this._searchMarker !== null) this._searchMarker.splice(0, this._searchMarker.length, ...ms)
       }
+      // YP32: the proposal, then what it hides until `unhide`
+      if (proposed.length > 0) holdHelper(transaction, /** @type {any} */ (propose).into, proposed)
+      if (hidden.length > 0) hideIds(transaction, hidden)
       plantMarker(this, currPos)
     })
   }

package/dist/edytor.svelte.d.ts

@@ -11,7 +11,7 @@ import { Handles } from './session/handles.js';
 import { type Awareness, type DocChange, type DocumentActor, type EdytorDocument, type OrderPolicy, type YDoc } from './crdt/index.js';
 import { PresenceWriter, type PresenceOptions } from './collaboration/awarenessSelection.js';
 import { type BlockMoveRequest } from './session/moves.js';
-import { type DocumentWrites } from './crdt/operations.js';
+import type { DocumentWrites } from './crdt/operations.js';
 import type { Plugin, BlockDefinition, MarkDefinition, InlineBlockDefinition, EditorCommand, Placeholder } from './plugins.js';
 import { type HotKey, type HotKeyCombination } from './session/keymap.js';
 import { Dispatcher } from './session/commands.js';

package/dist/edytor.svelte.js

@@ -38,7 +38,8 @@ import { attachDocument, SemanticConflictError } from './crdt/index.js';
 import { whenDocumentReady } from './collaboration/documentSync.js';
 import { mintPresenceKey, PresenceWriter } from './collaboration/awarenessSelection.js';
 import { canMove, move } from './session/moves.js';
-import { DOCUMENT_WRITES } from './crdt/operations.js';
+import { SUGGEST_ROOT } from './crdt/schema.js';
+import { asEngineDoc } from './crdt/structs.js';
 import { on } from 'svelte/events';
 import { Keymap } from './session/keymap.js';
 import { TRANSACTION } from './constants.js';
@@ -46,7 +47,7 @@ import { Dispatcher } from './session/commands.js';
 import { History } from './session/history.js';
 import { DataWrites } from './session/props.js';
 import { kindCatalogue, kindCommand, UNKNOWN_KIND } from './kinds.js';
-import { clearDomSelection, getActiveElement, getDomSelection, getDomSelectionSnapshot } from './selection/domSelection.js';
+import { clearDomSelection, focusIn, getActiveElement, getDomSelection, getDomSelectionSnapshot } from './selection/domSelection.js';
 /** A consumer that is set (a prop or a plugin hook left out is `undefined`). */
 const isListener = (listener) => listener !== undefined;
 /**
@@ -87,10 +88,6 @@ export class Edytor {
     /** The view's handles: one id-only `Block` per live id, texts and atoms by position and id. */
     idToBlock = new Handles(this);
     /** @internal */
-    nodeToInlineBlock = new Map();
-    /** @internal */
-    nodeToText = new Map();
-    /** @internal */
     transaction = new TRANSACTION();
     /** @internal The view's keymap: consumer bindings, then the extensions', then the built-in rows. */
     keymap;
@@ -113,8 +110,8 @@ export class Edytor {
         surface: {
             park: (text, offset) => this.projector.park(text, offset),
             flush: () => void this.surface.flush(),
-            placed: () => this.projector.placed(),
-            parked: () => this.projector.parked(),
+            placed: this.projector.placed,
+            parked: this.projector.parked,
             clear: () => clearDomSelection(this.node),
             pointAt: (node, offset) => textPointAt.call(this.selection, node, offset),
             sameLine: (a, b) => onOneLine(this.selection.textAt(a), this.selection.textAt(b))
@@ -211,7 +208,7 @@ export class Edytor {
      */
     get facade() {
         return (this.lens ??= virtualLens(this.document.facade, () => this.document.ready, () => this.document.defaultChild(null), (kind) => ({
-            void: this.definitionOf(kind).void === true,
+            childless: this.definitionOf(kind).void === true,
             rendersContent: this.document.rendersContent(kind)
         })));
     }
@@ -298,10 +295,6 @@ export class Edytor {
     };
     constructor(options) {
         const { readonly, hotkeys, plugins, document, actor, requireHydration, presence, sync, value, onSelectionChange, labels, onChange, onDocChange, allowNesting } = options;
-        for (const name of DOCUMENT_WRITES)
-            Object.defineProperty(this, name, {
-                value: (...args) => this.dispatcher.operate(name, args)
-            });
         if (labels)
             this.labels = labels;
         this.allowNesting = allowNesting === true;
@@ -315,6 +308,11 @@ export class Edytor {
             this.document = attachDocument(new Y.Doc(), { actor, requireHydration });
             this.#owned = true;
         }
+        // The writes (`DocumentWrites`): every op the document prepares, dispatched.
+        for (const name in this.document.facade.prepare)
+            Object.defineProperty(this, name, {
+                value: (...args) => this.dispatcher.operate(name, args)
+            });
         this.readonly = readonly || false;
         this.onChange = onChange;
         this.onDocChange = onDocChange;
@@ -489,6 +487,18 @@ export class Edytor {
         this.cells = createCells(this.facade, this.surface.patched);
         this.root = this.idToBlock.root;
         this.#offCommit = this.facade.onChange(this.#onCommit);
+        // Without its plugin, a view reads a document's shared suggestions as plain content.
+        if (DEV && !this.suggestions.shared) {
+            const warn = () => {
+                if (asEngineDoc(this.document.doc).get(SUGGEST_ROOT).attrKeys().next().done)
+                    return;
+                console.warn('[edytor] this document holds shared suggestions: without createSharedSuggestionsPlugin() the view shows their text as plain content and exports it');
+            };
+            if (this.document.ready)
+                warn();
+            else
+                this.document.onReady(warn);
+        }
         // A document that is already empty shows its virtual paragraph with the caret in it.
         this.selection?.restoreDeadSelectionEndpoints();
     };
@@ -533,11 +543,11 @@ export class Edytor {
         if (values.length > 0)
             callEach('[edytor] onChange', values, this.value);
     };
-    /** The text each range `replace` suggestion removes when accepted (`Ranges`). */
+    /** The text each range `replace` suggestion removes when accepted (`Ranges`); a shared one's are its runs. */
     #replaced = () => {
         void this.suggestions.revision;
-        return this.suggestions.list.flatMap(({ at }) => {
-            if (!('replace' in at) || Array.isArray(at.replace))
+        return this.suggestions.list.flatMap(({ at, shared }) => {
+            if (shared || !('replace' in at) || Array.isArray(at.replace))
                 return [];
             const { anchor, focus } = at.replace;
             const [start, end] = [anchor, focus].map(this.selection.resolveTextAnchor);
@@ -580,15 +590,14 @@ export class Edytor {
      * affordances long after the gesture ended.
      */
     #userInputHandlingDepth = 0;
-    #withUserInput = (handler, opts = {}) => {
+    #withUserInput = (handler, bumpSerial = true) => {
         return (...args) => {
             // Depth-counted: a synchronous wrapped listener landing inside an
             // awaited handler's hold window must not end the window the outer
             // handler still needs.
             this.#userInputHandlingDepth++;
-            if (opts.bumpSerial !== false) {
+            if (bumpSerial)
                 this.markUserGesture();
-            }
             const clear = () => {
                 // A display the window held back gets its pass now.
                 if (--this.#userInputHandlingDepth === 0)
@@ -637,12 +646,13 @@ export class Edytor {
      * fires (element already focused).
      */
     #expectInternalFocusArmed = false;
-    /** @internal */
-    expectInternalFocus = () => {
+    /** @internal Armed, and `element` (the host, an editing host in it) focused without scrolling. */
+    expectInternalFocus = (element) => {
         this.#expectInternalFocusArmed = true;
         queueMicrotask(() => {
             this.#expectInternalFocusArmed = false;
         });
+        element?.focus({ preventScroll: true });
     };
     /** @internal A `focusin` consumes the armed flag: `true` when the editor focused itself. */
     consumeInternalFocus = () => {
@@ -670,7 +680,7 @@ export class Edytor {
      */
     lastUserGestureOutsideEditor = false;
     /** @internal Run `body` as part of the user's input (deferred work of an occurrence). */
-    userInput = (body) => this.#withUserInput(body, { bumpSerial: false })();
+    userInput = (body) => this.#withUserInput(body, false)();
     /**
      * A commit's caret: select it (the projector displays it once the pin's
      * render lands) and arm the IME post-commit jump rule — a move right after
@@ -681,13 +691,12 @@ export class Edytor {
         if (this.readonly || this.isComposing || !text.isInDocument)
             return;
         const active = getActiveElement(this.node);
-        const selection = getDomSelection(this.node);
         const ours = (node) => Boolean(node && this.node?.contains(node));
         // Focus left for a foreign element with no selection of ours, or moved
         // into a nested editable island (its own caret): the user owns it.
         if ((active &&
-            !ours(active) &&
-            !ours(selection?.anchorNode) &&
+            !focusIn(this.node) &&
+            !ours(getDomSelection(this.node)?.anchorNode) &&
             !ours(this.selection.textRange().startText?.node)) ||
             isKindControl(this.node, active))
             return;
@@ -770,21 +779,50 @@ export class Edytor {
         this.lastUserGestureOutsideEditor = false;
         this.node = node;
         this.selection.init();
-        this.doc.on('beforeAllTransactions', this.projector.opening);
-        this.doc.on('beforeTransaction', this.surface.pending);
-        this.doc.on('beforeTransaction', this.projector.before);
-        this.doc.on('afterTransaction', this.projector.after);
+        // The engine's transaction events the projector and the observer read.
+        const engine = [
+            ['beforeAllTransactions', this.projector.opening],
+            ['beforeTransaction', this.surface.pending],
+            ['beforeTransaction', this.projector.before],
+            ['afterTransaction', this.projector.after]
+        ];
+        for (const [name, listener] of engine)
+            this.doc.on(name, listener);
         this.off.push(() => {
-            this.doc.off('beforeAllTransactions', this.projector.opening);
-            this.doc.off('beforeTransaction', this.surface.pending);
-            this.doc.off('beforeTransaction', this.projector.before);
-            this.doc.off('afterTransaction', this.projector.after);
+            for (const [name, listener] of engine)
+                this.doc.off(name, listener);
         });
         // Keydown serial bumps happen INSIDE onKeyDown, after the
         // composition-phantom swallow — a swallowed trailing Enter/Backspace
         // is a browser artifact, not a gesture, and must not disarm pending
         // composition caret restores.
-        const keydown = this.#withUserInput(onKeyDown.bind(this), { bumpSerial: false });
+        const user = this.#withUserInput;
+        const keydown = user(onKeyDown.bind(this), false);
+        const { pointer } = this.selection;
+        const drop = (event) => preventUnsupportedDrop(event, this);
+        /** The host's listeners; the user-input ones run inside its window (`isHandlingUserInput`). */
+        const host = [
+            ['mousedown', pointer.preventTripleClick],
+            ['click', pointer.tripleClick],
+            // Settle queued mutation repairs before the native menu opens —
+            // spellcheck suggestions are computed against the DOM at this
+            // moment (PM flushes its DOM observer on contextmenu for the
+            // same reason).
+            ['contextmenu', () => void this.surface.flush()],
+            ['beforeinput', user(this.onBeforeInput)],
+            // An `input` records what the browser did; it says nothing new about
+            // where the user wants the selection (a display still to land wins).
+            ['input', user(this.onInput, false)],
+            ['copy', this.onCopy],
+            ['cut', user(this.onCut)],
+            ['paste', user(this.onPaste)],
+            ['dragstart', (event) => onTextDragStart(this, event)],
+            ['dragend', () => onTextDragEnd(this)],
+            ['dragover', drop],
+            ['drop', user(drop)],
+            ['compositionstart', this.onCompositionStart],
+            ['compositionend', this.onCompositionEnd]
+        ];
         const detachSurface = this.surface.attach(node);
         this.off.push(
         // One handler per keyboard occurrence: keys inside the editor at
@@ -797,48 +835,43 @@ export class Edytor {
         // Pointer and focus ownership, and the focus-time caret restore.
         ...attachFocus(this, node), 
         // The page leaving for good ends the session's history.
-        attachPageHide(this), on(node, 'mousedown', this.selection.pointer.preventTripleClick), on(node, 'click', this.selection.pointer.tripleClick), 
-        // Settle queued mutation repairs before the native menu opens —
-        // spellcheck suggestions are computed against the DOM at this
-        // moment (PM flushes its DOM observer on contextmenu for the
-        // same reason).
-        on(node, 'contextmenu', () => void this.surface.flush()), on(node, 'beforeinput', this.#withUserInput(this.onBeforeInput)), 
-        // An `input` records what the browser did; it says nothing new about
-        // where the user wants the selection (a display still to land wins).
-        on(node, 'input', this.#withUserInput(this.onInput, { bumpSerial: false })), on(node, 'copy', this.onCopy), on(node, 'cut', this.#withUserInput(this.onCut)), on(node, 'paste', this.#withUserInput(this.onPaste)), on(node, 'dragstart', (event) => onTextDragStart(this, event)), on(node, 'dragend', () => onTextDragEnd(this)), on(node, 'dragover', (event) => preventUnsupportedDrop(event, this)), on(node, 'drop', this.#withUserInput((event) => preventUnsupportedDrop(event, this))), on(node, 'compositionstart', this.onCompositionStart), on(node, 'compositionend', this.onCompositionEnd), detachSurface);
-        // Chrome lives in the overlay, outside the host: remote carets, then the plugins'.
+        attachPageHide(this), ...host.map(([type, listener]) => on(node, type, listener)), detachSurface);
+        // Chrome lives in the overlay, outside the host: remote carets, the
+        // text a `replace` suggestion removes, marked beside the host, the
+        // polite live region (what this view's block moves and deletes did);
+        // the plugins' after them.
         const detachOverlay = this.overlay.attach(node);
-        const presence = mount(RemoteSelections, {
-            target: this.overlay.layer,
-            props: { edytor: this }
-        });
-        // The text a `replace` suggestion removes, marked beside the host.
-        const ranges = mount(Ranges, {
-            target: this.overlay.layer,
-            props: { edytor: this, name: 'suggestion-range', z: 19, ranges: this.#replaced }
-        });
-        // The polite live region: what this view's block moves and deletes did.
-        const live = mount(Announcer, {
-            target: this.overlay.layer,
-            props: { announcer: this.announcer }
-        });
-        this.off.push(() => unmount(presence), () => unmount(ranges), () => unmount(live), detachOverlay);
+        const target = this.overlay.layer;
+        const mounted = [
+            [RemoteSelections, { edytor: this }],
+            [Ranges, { edytor: this, name: 'suggestion-range', z: 19, ranges: this.#replaced }],
+            [Announcer, { announcer: this.announcer }]
+        ].map(([component, props]) => mount(component, { target, props: props }));
+        this.off.push(() => mounted.forEach((instance) => void unmount(instance)), detachOverlay);
         this.off.push(...cleanups(this.plugins, (plugin) => plugin.onEdytorAttached?.({ node })));
         return {
             destroy: () => {
                 if (selectionIsInside(node))
                     clearDomSelection(node);
-                const active = getActiveElement(node);
-                if (active instanceof HTMLElement && node.contains(active))
+                const active = focusIn(node);
+                if (active instanceof HTMLElement)
                     active.blur();
-                this.selection.destroy();
-                this.attempts.clear();
-                this.composition.reset();
-                // Drain AND clear: `destroy()` runs the same batch again.
-                this.off.splice(0).forEach((off) => off());
+                this.#detach();
             }
         };
     };
+    /**
+     * Release what an attach holds: the selection's listeners, the attempts,
+     * the composition, then the attach-lifetime batch (DOM listeners, the
+     * mutation observer, plugin actions), drained AND cleared (`destroy()`
+     * runs it again).
+     */
+    #detach = () => {
+        this.selection.destroy();
+        this.attempts.clear();
+        this.composition.reset();
+        this.off.splice(0).forEach((off) => off());
+    };
     /** @internal */
     destroyed = false;
     /** @internal The key of this view's presence entry — minted here, written only by this view. */
@@ -869,21 +902,13 @@ export class Edytor {
         // A pending readiness binding must not resurrect a dead view.
         this.#readinessRelease?.();
         this.#readinessRelease = undefined;
-        // Runs the whole attach-lifetime batch — DOM listeners, the mutation
-        // observer, plugin actions — and empties the array.
-        this.off.splice(0).forEach((off) => off());
+        this.#detach();
         this.#offCommit?.();
         this.history.unbind();
-        // `selectionchange` listener + the published remote caret.
-        this.selection.destroy();
-        this.attempts.clear();
-        this.composition.reset();
         this.cells?.dispose();
         // Wrapper maps — drop every id/node→wrapper edge a shared doc or a
         // stray mutation could still reach.
         this.idToBlock.clear();
-        this.nodeToInlineBlock.clear();
-        this.nodeToText.clear();
         this.root = undefined;
         this.node = undefined;
         // Release this view's local-edit origin from the document's

package/dist/events/beforeInputCommands.d.ts

@@ -9,6 +9,6 @@ import { type Attempt } from '../session/attempt.js';
  */
 export declare const insertLineBreak: (edytor: Edytor, snapshot: Attempt, caret?: "after" | "before") => void;
 /** The model command for a `beforeinput`, run as one user command (undo policy, prevention scope). */
-export declare const runBeforeInputCommand: (edytor: Edytor, snapshot: Attempt) => boolean | void | Text | Promise<undefined> | null | undefined;
+export declare const runBeforeInputCommand: (edytor: Edytor, snapshot: Attempt) => boolean | void | Promise<undefined> | Text | null | undefined;
 /** An editing intent at the current selection (a key binding's command): no event to fabricate. */
-export declare const runIntent: (edytor: Edytor, inputType: string) => boolean | void | Text | Promise<undefined> | null | undefined;
+export declare const runIntent: (edytor: Edytor, inputType: string) => boolean | void | Promise<undefined> | Text | null | undefined;

package/dist/events/domTextOffset.d.ts

@@ -10,3 +10,5 @@
  * through its child index); a disconnected one keeps its offset.
  */
 export declare const getTextContentOffsetAtPoint: (textNode: Node, node: Node, offset: number) => number;
+/** `element`'s text nodes in document order: the leaves the offsets above count. */
+export declare const textLeaves: (element: Node) => CharacterData[];

package/dist/events/domTextOffset.js

@@ -22,3 +22,11 @@ export const getTextContentOffsetAtPoint = (textNode, node, offset) => {
         range.setEnd(node, at);
     return range.toString().length;
 };
+/** `element`'s text nodes in document order: the leaves the offsets above count. */
+export const textLeaves = (element) => {
+    const walker = (element.ownerDocument ?? document).createTreeWalker(element, NodeFilter.SHOW_TEXT);
+    const leaves = [];
+    while (walker.nextNode())
+        leaves.push(walker.currentNode);
+    return leaves;
+};

package/dist/events/nativeInteractiveControl.d.ts

@@ -2,9 +2,19 @@ export declare const isNativeInteractiveControl: (target: EventTarget | null) =>
 export declare const isNativeInteractiveEvent: (event: Event) => boolean;
 export declare const isNativeTextControl: (target: EventTarget | null) => boolean;
 export declare const isNativeTextControlEvent: (event: Event) => boolean;
+/**
+ * Whether a press inside the host, and its whole gesture (its clicks and
+ * multi-clicks, its `selectstart`, its drag), is its target's own
+ * (`sel.press.void`): a control of a block's chrome, a link there (a
+ * bookmark's card, a file's row: its click opens it), or an element that
+ * keeps the selection (`data-edytor-keep-selection`). The one rule every
+ * press handler asks.
+ */
+export declare const ownsPress: (editorRoot: Element | null | undefined, event: Event) => boolean;
 /**
  * A kind's own control: a form control (`input` of any type, `textarea`,
- * `select`, `button`) or a nested editable island inside the host (a plugin
+ * `select`, `button`), a control of a block's chrome (an interactive role,
+ * a focusable element, `data-edytor-control`) or a nested editable island inside the host (a plugin
  * chrome editor, an embedded code field: it owns its input and composition
  * lifecycle), never the root nor the editor's own text elements (they carry
  * their own `contentEditable="true"`). It owns its focus, selection and

package/dist/events/nativeInteractiveControl.js

@@ -32,13 +32,52 @@ export const isNativeInteractiveControl = (target) => Boolean(findClosestElement
 export const isNativeInteractiveEvent = (event) => Boolean(findNativeControlInEvent(event, NATIVE_INTERACTIVE_SELECTOR));
 export const isNativeTextControl = (target) => Boolean(findClosestElement(target, NATIVE_TEXT_SELECTOR));
 export const isNativeTextControlEvent = (event) => Boolean(findNativeControlInEvent(event, NATIVE_TEXT_SELECTOR));
+/**
+ * The controls of a block's chrome (`sel.press.void`): a native form
+ * control, an element whose role says it is interactive or that takes the
+ * focus, and one the app marks as its own (`data-edytor-control`, for any
+ * other element). Their press and its whole gesture, their keys and their
+ * input are theirs: the editor does nothing with them.
+ */
+const CHROME_CONTROL_SELECTOR = [
+    'input, textarea, select, button',
+    '[role="button"], [role="link"], [role="checkbox"], [role="switch"], [role="menuitem"]',
+    '[role="tab"], [role="option"], [role="slider"], [role="textbox"], [role="combobox"]',
+    '[tabindex]:not([tabindex^="-"])',
+    '[data-edytor-control]'
+].join(', ');
+/**
+ * The control of a block's chrome holding `target` inside the host, by
+ * `selector`: never the host, nor an element inside the editor's text or an
+ * inline atom (a link mark, a mention: the text's own presses).
+ */
+const chromeControl = (editorRoot, target, selector = CHROME_CONTROL_SELECTOR) => {
+    const control = getElementFromTarget(target)?.closest(selector);
+    return control &&
+        editorRoot &&
+        control !== editorRoot &&
+        editorRoot.contains(control) &&
+        !control.closest('[data-edytor-text], [data-edytor-inline-block]')
+        ? control
+        : null;
+};
+/**
+ * Whether a press inside the host, and its whole gesture (its clicks and
+ * multi-clicks, its `selectstart`, its drag), is its target's own
+ * (`sel.press.void`): a control of a block's chrome, a link there (a
+ * bookmark's card, a file's row: its click opens it), or an element that
+ * keeps the selection (`data-edytor-keep-selection`). The one rule every
+ * press handler asks.
+ */
+export const ownsPress = (editorRoot, event) => Boolean(chromeControl(editorRoot, event.target, `${CHROME_CONTROL_SELECTOR}, [data-edytor-keep-selection], a[href]`));
 // Any non-"false" contenteditable value — attribute selectors are
 // case-sensitive, and "TRUE"/"Plaintext-Only"/"inherit"/garbage values
 // all still establish a nested editable context the guard must catch.
 const EDITABLE_TARGET_SELECTOR = '[contenteditable]:not([contenteditable="false" i])';
 /**
  * A kind's own control: a form control (`input` of any type, `textarea`,
- * `select`, `button`) or a nested editable island inside the host (a plugin
+ * `select`, `button`), a control of a block's chrome (an interactive role,
+ * a focusable element, `data-edytor-control`) or a nested editable island inside the host (a plugin
  * chrome editor, an embedded code field: it owns its input and composition
  * lifecycle), never the root nor the editor's own text elements (they carry
  * their own `contentEditable="true"`). It owns its focus, selection and
@@ -48,6 +87,7 @@ const EDITABLE_TARGET_SELECTOR = '[contenteditable]:not([contenteditable="false"
 export const isKindControl = (editorRoot, target) => {
     const editable = findClosestElement(target, EDITABLE_TARGET_SELECTOR);
     const control = findClosestElement(target, NATIVE_ACTIVE_ELEMENT_SELECTOR) ??
+        chromeControl(editorRoot, target) ??
         (editable?.hasAttribute('data-edytor-text') ? null : editable);
     return Boolean(control && editorRoot && control !== editorRoot && editorRoot.contains(control));
 };

package/dist/events/onBeforeInput.js

@@ -1,5 +1,5 @@
 import { vetoable } from '../utils.js';
-import { createDomRange, createDomSelectionSnapshotFromRange, getActiveElement, getDomSelection } from '../selection/domSelection.js';
+import { createDomRange, createDomSelectionSnapshotFromRange, focusIn, getActiveElement, getDomSelection } from '../selection/domSelection.js';
 import { getYIndex } from '../selection/selection.utils.js';
 import { sameValue } from '../session/selection.js';
 import { INTENTS, attemptOf, intentOf, kindOf, reproject, targetless } from '../session/attempt.js';
@@ -87,9 +87,9 @@ const isForeignHistory = (edytor) => {
     const node = edytor.node;
     if (!node)
         return true;
-    const active = getActiveElement(node);
-    if (active && node.contains(active))
+    if (focusIn(node))
         return false;
+    const active = getActiveElement(node);
     const { body, documentElement } = node.ownerDocument;
     const anchor = getDomSelection(node)?.anchorNode;
     return ((!!active &&

package/dist/events/onFocus.js

@@ -6,7 +6,7 @@
  * programmatic focus returns to. Answers the listeners' teardown.
  */
 import { on } from 'svelte/events';
-import { clearDomSelection, getActiveElement, getDomSelection, getDomSelectionSnapshot } from '../selection/domSelection.js';
+import { clearDomSelection, focusIn, getActiveElement, getDomSelection, getDomSelectionSnapshot } from '../selection/domSelection.js';
 import { getYIndex } from '../selection/selection.utils.js';
 import { noSelection } from '../session/selection.js';
 import { observeInternalDragSources } from './onDrop.js';
@@ -38,8 +38,7 @@ export const takeKeys = (edytor) => {
         return;
     if (getActiveElement(node) === node)
         return;
-    edytor.expectInternalFocus();
-    node.focus({ preventScroll: true });
+    edytor.expectInternalFocus(node);
     edytor.projector.parked();
     edytor.selection.display();
 };
@@ -125,6 +124,9 @@ export const attachFocus = (edytor, node) => {
      */
     const placingPress = (event) => {
         const { pointer } = edytor.selection;
+        // A control of a block's chrome owns its whole press (`sel.press.void`).
+        if (pointer.ownPress(event))
+            return void (pointer.claimed = false);
         if (pointer.marginPress(event))
             return;
         if (!pointer.belowPress(event))
@@ -136,8 +138,9 @@ export const attachFocus = (edytor, node) => {
         edytor.composition.abandon();
         lastPointerDownInsideEditorAt = event.timeStamp;
         const { pointer } = edytor.selection;
-        // The margin gesture's press places no caret and starts no text drag.
-        if (pointer.claimed)
+        // The margin gesture's press places no caret and starts no text drag; a
+        // control's press is the control's (`sel.press.void`).
+        if (pointer.claimed || pointer.ownPress(event))
             return;
         edytor.projector.pressed();
         pointer.capture(event);
@@ -145,13 +148,8 @@ export const attachFocus = (edytor, node) => {
         pointer.collapseBlocksAt(event);
     };
     const clearNativeSelectionAfterExternalFocus = () => {
-        const activeElement = getActiveElement(node);
-        if (activeElement instanceof Node && node.contains(activeElement)) {
-            return;
-        }
-        if (selectionIsInside(node)) {
+        if (!focusIn(node) && selectionIsInside(node))
             clearDomSelection(node);
-        }
     };
     /**
      * A keyboard or programmatic focus returns to the model's selection: the