edytor 3.0.0 → 5.0.0

package/dist/edytor.svelte.js

@@ -8,6 +8,7 @@ import { onInput } from './events/onInput.js';
 import { onPaste } from './events/onPaste.js';
 import { onTextDragEnd, onTextDragStart, preventUnsupportedDrop } from './events/onDrop.js';
 import { attachFocus, selectionIsInside, takeKeys } from './events/onFocus.js';
+import { attachPageHide } from './events/onPageHide.js';
 import { insertLineBreak, runIntent } from './events/beforeInputCommands.js';
 import { textPointAt } from './selection/selection.utils.js';
 import { Attempts } from './session/attempt.js';
@@ -37,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';
@@ -45,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;
 /**
@@ -86,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;
@@ -112,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))
@@ -210,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)
         })));
     }
@@ -297,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;
@@ -314,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;
@@ -488,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();
     };
@@ -532,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);
@@ -579,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)
@@ -636,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 = () => {
@@ -669,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
@@ -680,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;
@@ -769,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
@@ -794,48 +833,45 @@ export class Edytor {
                 keydown(event);
         }), 
         // Pointer and focus ownership, and the focus-time caret restore.
-        ...attachFocus(this, node), 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'.
+        ...attachFocus(this, node), 
+        // The page leaving for good ends the session's history.
+        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. */
@@ -866,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/beforeInputCommands.js

@@ -209,14 +209,14 @@ const splitKeepingChildren = (edytor, [id, offset, born, tail], child) => {
         return REFUSED;
     if (!child)
         return facade.compose({ ...split, writes: [step] });
-    // The rank of a first child, and the document's answer on placing the kind there.
+    // The document's answer on placing the kind as a first child.
     const slot = facade.prepare.insertBlocks({ parent: id, index: 0 }, [
         { id: born, type: tail?.type ?? facade.defaultChild(id) }
     ]);
     const first = 'writes' in slot ? slot.writes[0] : undefined;
     if (first?.op !== 'insertBlocks')
         return REFUSED;
-    const placed = { ...step, parent: id, rank: first.ranks[0] };
+    const placed = { ...step, parent: id, index: 0 };
     return facade.compose({ ...split, writes: [placed] });
 };
 /**

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

package/dist/events/onPageHide.d.ts

@@ -0,0 +1,3 @@
+import type { Edytor } from '../edytor.svelte.js';
+/** End the view's session when its page leaves for good; answers the teardown. */
+export declare const attachPageHide: (edytor: Edytor) => (() => void);

package/dist/events/onPageHide.js

@@ -0,0 +1,16 @@
+/**
+ * The page leaves for good (installed by `Edytor.attach`): a `pagehide` the
+ * back/forward cache keeps nothing of. The view tells its document the
+ * session's history ended (`document.endHistory()`, `hist.release.end`): the
+ * history's rule releases what the session deleted. A page the cache keeps
+ * may come back with its history, and a lost connection fires nothing here:
+ * both keep it.
+ *
+ * The page's lifecycle is the sync layer's (`onPageLeave`, which the
+ * providers leave by too): the view subscribes to its `write` phase, run
+ * before the providers' teardown whatever order they subscribed in, so the
+ * release goes out on a socket or store that is still open.
+ */
+import { onPageLeave } from '../crdt/providers/room.js';
+/** End the view's session when its page leaves for good; answers the teardown. */
+export const attachPageHide = (edytor) => onPageLeave(() => edytor.document.endHistory(), 'write');