edytor 0.1.0-next.18 → 0.1.0-next.20

package/README.md

@@ -15,7 +15,7 @@
 
 Edytor aims to be for Svelte what Slate.js is for React: a heavily customizable editor with an API to build any kind of collaborative rich text editor.
 
-> **Work in progress.** Edytor is a pre-release (`0.1.0-next.18`, `edytor@next` on npm) and not ready for production; the API changes between releases without a compatibility layer. The untagged `edytor@0.0.11` on npm predates the current API. Issues and PRs are welcome: when you report a bug, include the document's JSON value.
+> **Work in progress.** Edytor is a pre-release (`0.1.0-next.20`, `edytor@next` on npm) and not ready for production; the API changes between releases without a compatibility layer. The untagged `edytor@0.0.11` on npm predates the current API. Issues and PRs are welcome: when you report a bug, include the document's JSON value.
 
 ## Features
 

package/dist/components/Edytor.svelte

@@ -341,6 +341,7 @@
 		use:editableRootBrowserAttributes={browserMutationGuardAttributes}
 		use:nonNativeEditableBlockChromeSelection
 		data-edytor
+		data-edytor-selection={edytor.selection.value.kind === 'blocks' ? 'blocks' : undefined}
 		contenteditable={!readonly}
 		role="textbox"
 		aria-multiline="true"
@@ -356,3 +357,15 @@
 		></span>
 	</div>
 {/if}
+
+<style>
+	/*
+	 * A block selection shows as its selected blocks, never as a native range:
+	 * the range a pointer drag across columns still extends under it
+	 * (`sel.drag.across-columns`) is not highlighted, over any theme.
+	 */
+	:global([data-edytor][data-edytor-selection='blocks'] ::selection),
+	:global([data-edytor][data-edytor-selection='blocks']::selection) {
+		background: transparent !important;
+	}
+</style>

package/dist/events/onFocus.d.ts

@@ -12,4 +12,20 @@ export declare const selectionIsInside: (node: HTMLElement) => boolean;
  * already inside the host, or the view is gone.
  */
 export declare const takeKeys: (edytor: Edytor) => void;
+/**
+ * Whether `event` is the press of a primary `mousedown` no `pointerdown`
+ * came before (WebKit's first press after a drag). Asked during the
+ * event's dispatch, after the document's capture phase saw it: by a
+ * listener the view's attach installs later (a plugin's `onEdytorAttached`)
+ * or by an element's own (bubbling, target phase), such as the chrome in the
+ * overlay, which starts from it as from a `pointerdown`.
+ */
+export declare const isLonePress: (edytor: Edytor, event: MouseEvent) => boolean;
+/**
+ * Every press on `target` (`isLonePress`): its `pointerdown`, or the lone
+ * `mousedown` standing for a missing one, never both for one press. For a
+ * listener installed after the view's attach (a plugin's press outside its
+ * menu). Answers the teardown.
+ */
+export declare const onPress: (edytor: Edytor, target: EventTarget, listener: (event: MouseEvent) => void, options?: boolean | AddEventListenerOptions) => () => void;
 export declare const attachFocus: (edytor: Edytor, node: HTMLElement) => (() => void)[];

package/dist/events/onFocus.js

@@ -37,21 +37,54 @@ export const takeKeys = (edytor) => {
     node.focus({ preventScroll: true });
     edytor.projector.parked();
 };
+/*
+ * The press: one per primary button press, its `pointerdown`, or a
+ * `mousedown` no `pointerdown` came before. WebKit fires no `pointercancel`
+ * at a native `dragstart` (a block handle's drag) and, believing the button
+ * still down, no `pointerdown` for the next press, only its `mousedown`
+ * (WebKit bugs 202287, 222632, 279749): that primary `mousedown` is the
+ * press (lone). `attachFocus` classifies each `mousedown` of its view's
+ * document at the capture phase, first of the view's listeners; the lone one
+ * of each view is kept here, read by `isLonePress` and `onPress`.
+ */
+const lonePresses = new WeakMap();
+/**
+ * Whether `event` is the press of a primary `mousedown` no `pointerdown`
+ * came before (WebKit's first press after a drag). Asked during the
+ * event's dispatch, after the document's capture phase saw it: by a
+ * listener the view's attach installs later (a plugin's `onEdytorAttached`)
+ * or by an element's own (bubbling, target phase), such as the chrome in the
+ * overlay, which starts from it as from a `pointerdown`.
+ */
+export const isLonePress = (edytor, event) => lonePresses.get(edytor) === event;
+/**
+ * Every press on `target` (`isLonePress`): its `pointerdown`, or the lone
+ * `mousedown` standing for a missing one, never both for one press. For a
+ * listener installed after the view's attach (a plugin's press outside its
+ * menu). Answers the teardown.
+ */
+export const onPress = (edytor, target, listener, options) => {
+    const lone = (event) => {
+        if (isLonePress(edytor, event))
+            listener(event);
+    };
+    target.addEventListener('pointerdown', listener, options);
+    target.addEventListener('mousedown', lone, options);
+    return () => {
+        target.removeEventListener('pointerdown', listener, options);
+        target.removeEventListener('mousedown', lone, options);
+    };
+};
 export const attachFocus = (edytor, node) => {
     let lastPointerDownInsideEditorAt = Number.NEGATIVE_INFINITY;
     /*
-     * The press: one per primary button press, its `pointerdown`, or a
-     * `mousedown` no `pointerdown` came before. WebKit fires no
-     * `pointercancel` at a native `dragstart` (a block handle's drag) and,
-     * believing the button still down, no `pointerdown` for the next press,
-     * only its `mousedown` (WebKit bugs 202287, 222632, 279749): that
-     * primary `mousedown` is the press (`lone`). A primary `pointerdown` arms
-     * `compat` until the `mousedown` it is followed by (before or after its
-     * release, a touch's comes after), so a pair counts once. Only the
-     * browser's own `mousedown` stands for a missing press; a script's is none.
+     * A primary `pointerdown` arms `compat` until the `mousedown` it is
+     * followed by (before or after its release, a touch's comes after), so a
+     * pair counts once. Only the browser's own `mousedown` stands for a
+     * missing press; a script's is none (`lonePresses`).
      */
     let compat = false;
-    let lone = null;
+    const lone = (event) => isLonePress(edytor, event);
     /** Where the press landed: the gesture serial, and whether the user went outside. */
     const gesture = (event) => {
         edytor.markUserGesture();
@@ -150,27 +183,29 @@ export const attachFocus = (edytor, node) => {
         on(node.ownerDocument, 'pointerdown', (event) => {
             if (event.isPrimary)
                 compat = true;
-            lone = null;
+            lonePresses.delete(edytor);
             gesture(event);
         }, { capture: true }),
         on(node.ownerDocument, 'mousedown', (event) => {
-            lone = compat || !event.isTrusted || event.button !== 0 ? null : event;
+            const press = !compat && event.isTrusted && event.button === 0;
             compat = false;
-            if (lone)
-                gesture(event);
+            if (!press)
+                return void lonePresses.delete(edytor);
+            lonePresses.set(edytor, event);
+            gesture(event);
         }, { capture: true }),
         // A press on a block's non-editable chrome places the caret in its text.
         on(node, 'pointerdown', edytor.selection.handleNonNativeEditableBlockChromePointerDown, {
             capture: true
         }),
         on(node, 'mousedown', (event) => {
-            if (event === lone)
+            if (lone(event))
                 edytor.selection.handleNonNativeEditableBlockChromePointerDown(event);
         }, { capture: true }),
         // The document's capture listener already marked the gesture.
         on(node, 'pointerdown', pressInside),
         on(node, 'mousedown', (event) => {
-            if (event === lone)
+            if (lone(event))
                 pressInside(event);
         }),
         on(node, 'pointerup', (event) => {
@@ -225,6 +260,7 @@ export const attachFocus = (edytor, node) => {
             // Focus leaving abandons a live composition: the browser committed what it shows.
             edytor.composition.abandon();
             setTimeout(clearNativeSelectionAfterExternalFocus);
-        })
+        }),
+        () => void lonePresses.delete(edytor)
     ];
 };

package/dist/plugins/blockMenu/blockMenuPlugin.js

@@ -1,4 +1,5 @@
 import { BLOCK_ACTIVATE_EVENT, BLOCK_ADD_EVENT } from '../blockHandles/BlockHandleController.svelte.js';
+import { onPress } from '../../events/onFocus.js';
 import { getSelectedBlocksInDocumentOrder } from '../../selection/replaceSelection.js';
 import BlockMenu from './BlockMenu.svelte';
 import { BlockMenuController } from './BlockMenuController.svelte.js';
@@ -103,12 +104,13 @@ export const createBlockMenuPlugin = (options = {}) => (edytor) => {
             const add = () => controller.close(false);
             node.addEventListener(BLOCK_ACTIVATE_EVENT, activate);
             node.addEventListener(BLOCK_ADD_EVENT, add);
-            node.ownerDocument.addEventListener('pointerdown', outside, true);
+            // Every press, WebKit's lone `mousedown` after a drag too (`onPress`).
+            const offPress = onPress(edytor, node.ownerDocument, outside, true);
             const unmount = edytor.overlay.mount(BlockMenu, { controller, menu: options.menu }, 'edytor-block-menu-host', 70, place);
             return () => {
                 node.removeEventListener(BLOCK_ACTIVATE_EVENT, activate);
                 node.removeEventListener(BLOCK_ADD_EVENT, add);
-                node.ownerDocument.removeEventListener('pointerdown', outside, true);
+                offPress();
                 unmount();
             };
         }

package/dist/plugins/columns/ColumnResize.svelte

@@ -33,7 +33,7 @@
 				data-dragging={resize.drag ? 'true' : undefined}
 				data-selecting={resize.selecting ? 'true' : undefined}
 				onpointerdown={(event) => resize.start(event, strip)}
-				onmousedown={(event) => event.preventDefault()}
+				onmousedown={(event) => resize.mousedown(event, strip)}
 			></div>
 		{/each}
 	{/if}

package/dist/plugins/columns/resize.svelte.d.ts

@@ -93,8 +93,20 @@ export declare class ColumnResize {
     private gaps;
     /** The left column's width at the drag's pointer, held to the minimum on both sides. */
     private widthAt;
-    /** Press on `strip`: the drag starts, nothing is written until the release. */
-    start: (event: PointerEvent, strip: Strip) => void;
+    /**
+     * 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: MouseEvent, strip: Strip) => void;
+    /**
+     * 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.
+     */
+    start: (event: PointerEvent | MouseEvent, strip: Strip) => void;
     /**
      * 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

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

@@ -1,4 +1,4 @@
-import { takeKeys } from '../../events/onFocus.js';
+import { isLonePress, takeKeys } from '../../events/onFocus.js';
 import { bandOf, gapBefore } from './gaps.js';
 import { stacks } from './stacking.js';
 /** The guide line's width (the hover guide's and the drag's). */
@@ -141,7 +141,23 @@ export class ColumnResize {
         const hi = Math.max(sum - min, width);
         return Math.min(hi, Math.max(lo, width + at - from));
     }
-    /** Press on `strip`: the drag starts, nothing is written until the release. */
+    /**
+     * 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.
+     */
     start = (event, strip) => {
         const { edytor } = this;
         if (event.button !== 0 || edytor.readonly || this.drag)
@@ -155,7 +171,9 @@ export class ColumnResize {
         event.preventDefault();
         event.stopPropagation();
         const target = event.currentTarget;
-        target?.setPointerCapture?.(event.pointerId);
+        const pointer = event.type === 'pointerdown';
+        if (pointer)
+            target?.setPointerCapture?.(event.pointerId);
         this.drag = {
             strip,
             left,
@@ -171,6 +189,8 @@ export class ColumnResize {
             height: box.height
         };
         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;
@@ -181,16 +201,16 @@ export class ColumnResize {
             edytor.overlay.invalidate();
         };
         const end = (ended) => {
-            document?.removeEventListener('pointermove', move);
-            document?.removeEventListener('pointerup', end);
-            document?.removeEventListener('pointercancel', end);
+            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.guide = null;
             this.#cancel = null;
             edytor.overlay.invalidate();
-            if (drag && ended.type === 'pointerup') {
+            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).
@@ -207,9 +227,10 @@ export class ColumnResize {
             end(key);
         };
         this.#cancel = () => end(new Event('cancel'));
-        document?.addEventListener('pointermove', move);
-        document?.addEventListener('pointerup', end);
-        document?.addEventListener('pointercancel', end);
+        tracked?.addEventListener(moves, move);
+        tracked?.addEventListener(ups, end);
+        if (pointer)
+            tracked?.addEventListener('pointercancel', end);
         document?.addEventListener('keydown', escape, true);
         edytor.overlay.invalidate();
     };

package/dist/plugins/slashMenu/slashMenuPlugin.js

@@ -1,4 +1,5 @@
 import { BLOCK_ACTIVATE_EVENT, BLOCK_ADD_EVENT } from '../blockHandles/BlockHandleController.svelte.js';
+import { onPress } from '../../events/onFocus.js';
 import SlashMenu from './SlashMenu.svelte';
 import { SlashMenuController } from './SlashMenuController.svelte.js';
 /** The slash menu, with your own markup through `menu` or `item` snippets. */
@@ -90,12 +91,13 @@ export const createSlashMenuPlugin = (options = {}) => (edytor) => {
             };
             node.addEventListener(BLOCK_ADD_EVENT, offer);
             node.addEventListener(BLOCK_ACTIVATE_EVENT, activate);
-            node.ownerDocument.addEventListener('pointerdown', outside, true);
+            // Every press, WebKit's lone `mousedown` after a drag too (`onPress`).
+            const offPress = onPress(edytor, node.ownerDocument, outside, true);
             const unmount = edytor.overlay.mount(SlashMenu, { controller, menu: options.menu, item: options.item }, 'edytor-slash-menu-host', 50, positionMenu);
             return () => {
                 node.removeEventListener(BLOCK_ADD_EVENT, offer);
                 node.removeEventListener(BLOCK_ACTIVATE_EVENT, activate);
-                node.ownerDocument.removeEventListener('pointerdown', outside, true);
+                offPress();
                 unmount();
             };
         }

package/dist/plugins/toolbar/toolbarPlugin.d.ts

@@ -5,8 +5,8 @@ export type ToolbarOptions = {
     /**
      * Replace the toolbar; it renders while `controller.isVisible`, placed
      * above the selection (mark your bar `data-edytor-toolbar-bar` if panels
-     * hang below it). Buttons should `preventDefault` on mousedown to keep
-     * the selection.
+     * hang below it). A press on it never takes the editor's focus (its
+     * fields, an input or a select, take their own).
      */
     toolbar?: Snippet<[ToolbarController]>;
 };

package/dist/plugins/toolbar/toolbarPlugin.js

@@ -1,5 +1,9 @@
 import Toolbar from './Toolbar.svelte';
 import { ToolbarController } from './ToolbarController.svelte.js';
+/** A press in a field of the chrome (an input, a select): it takes focus. */
+const isNativeFieldEvent = (event) => event
+    .composedPath()
+    .some((target) => target instanceof Element && target.matches('input, textarea, select'));
 /** The selection toolbar, with your own markup through a `toolbar` snippet. */
 export const createToolbarPlugin = (options = {}) => (edytor) => {
     const controller = new ToolbarController(edytor);
@@ -33,7 +37,24 @@ export const createToolbarPlugin = (options = {}) => (edytor) => {
             controller.updateFromSelection(selection);
             edytor.overlay.invalidate();
         },
-        onEdytorAttached: () => edytor.overlay.mount(Toolbar, { controller, toolbar: options.toolbar }, 'edytor-toolbar-host', 60, positionToolbar)
+        onEdytorAttached: () => {
+            const unmount = edytor.overlay.mount(Toolbar, { controller, toolbar: options.toolbar }, 'edytor-toolbar-host', 60, positionToolbar);
+            // No press on the chrome takes focus, its background and a custom
+            // snippet's markup included (not only its buttons): the editor keeps
+            // its focus and its selection. A field (the link panel's input) takes
+            // its own. Every press has a `mousedown`, WebKit's lone one too
+            // (`onFocus.ts`), so no `pointerdown` is cancelled.
+            const host = edytor.overlay.layer?.querySelector('[data-edytor-toolbar-host]');
+            const keep = (event) => {
+                if (!isNativeFieldEvent(event))
+                    event.preventDefault();
+            };
+            host?.addEventListener('mousedown', keep);
+            return () => {
+                host?.removeEventListener('mousedown', keep);
+                unmount();
+            };
+        }
     };
 };
 /** The Notion-style selection toolbar. */

package/dist/selection/replaceSelection.d.ts

@@ -48,6 +48,21 @@ export declare const flipToggles: (blocks: readonly Block[]) => void;
  * (`selectedMembers`).
  */
 export declare const liftLayouts: (blocks: Iterable<Block>) => Block[];
+/**
+ * A pointer drag-selection from `anchor` (the block its press landed in) to
+ * `focus` (the block the drag reached), Notion's rule
+ * (`sel.drag.across-columns`): once the drag leaves the anchor's column for
+ * another column of the same layout, it selects blocks — every shown block
+ * from one to the other in reading order, but the layouts and columns
+ * themselves (each block a member as `selectedMembers` reads it), so a
+ * sweep over every block of every column lifts to the layout
+ * (`liftLayouts`, D3). The innermost layout holding both in different
+ * columns decides. `null` (a text range) while both lie in one column, or
+ * when no layout holding the anchor holds the focus (a drag leaving the
+ * layout, or one that starts outside it). Decided from the roles
+ * (`isLayout`/`isLayoutItem`).
+ */
+export declare const acrossColumns: (anchor: Block, focus: Block) => Block[] | null;
 /** Whether a block selection holds `blocks`, a layout it covers whole counting as held (D3). */
 export declare const holdsBlocks: (selected: Iterable<Block>, blocks: readonly Block[]) => boolean;
 /**

package/dist/selection/replaceSelection.js

@@ -91,6 +91,40 @@ export const liftLayouts = (blocks) => {
     }
     return [...all];
 };
+/**
+ * A pointer drag-selection from `anchor` (the block its press landed in) to
+ * `focus` (the block the drag reached), Notion's rule
+ * (`sel.drag.across-columns`): once the drag leaves the anchor's column for
+ * another column of the same layout, it selects blocks — every shown block
+ * from one to the other in reading order, but the layouts and columns
+ * themselves (each block a member as `selectedMembers` reads it), so a
+ * sweep over every block of every column lifts to the layout
+ * (`liftLayouts`, D3). The innermost layout holding both in different
+ * columns decides. `null` (a text range) while both lie in one column, or
+ * when no layout holding the anchor holds the focus (a drag leaving the
+ * layout, or one that starts outside it). Decided from the roles
+ * (`isLayout`/`isLayoutItem`).
+ */
+export const acrossColumns = (anchor, focus) => {
+    const { edytor } = anchor;
+    const { facade } = edytor;
+    let across = false;
+    for (let item = anchor.parent; item && !item.isRoot && !across; item = item.parent) {
+        if (!facade.isLayoutItem(item.id))
+            continue;
+        if (focus.isChildOf(item))
+            return null;
+        across = Boolean(item.parent && focus.isChildOf(item.parent));
+    }
+    if (!across)
+        return null;
+    const [first, last] = edytor.compareBlocks(anchor, focus) <= 0 ? [anchor, focus] : [focus, anchor];
+    const blocks = [];
+    for (let at = first; at && edytor.compareBlocks(at, last) <= 0; at = shown(at, 'blockAfter'))
+        if (!facade.isLayout(at.id) && !facade.isLayoutItem(at.id))
+            blocks.push(at);
+    return blocks;
+};
 /** Whether a block selection holds `blocks`, a layout it covers whole counting as held (D3). */
 export const holdsBlocks = (selected, blocks) => {
     const as = [...selected];

package/dist/selection/selection.svelte.js

@@ -11,7 +11,7 @@ import { seam } from '../crdt/anchors.js';
 import { getTextPath } from '../events/events.utils.js';
 import { landed } from '../session/navigation.js';
 import * as visibility from './visibility.js';
-import { caretBeside, shownText } from './replaceSelection.js';
+import { acrossColumns, caretBeside, shownText } from './replaceSelection.js';
 /** The compatibility state of no (or an unresolvable) selection. */
 const EMPTY_STATE = Object.freeze({
     yStart: 0,
@@ -661,6 +661,7 @@ export class EdytorSelection {
             return;
         }
         this.pointerDragStart = this.getTextPointFromClientPoint(event.clientX, event.clientY);
+        this.#across = false;
     };
     clearPointerDragStart = () => {
         this.pointerDragStart = null;
@@ -668,13 +669,53 @@ export class EdytorSelection {
     };
     /** A normalization a pointer drag held back (the gesture is the user's, O57). */
     #held = false;
-    /** The drag ended: the DOM selection it left is derived again, now normalized. */
+    /** The pointer drag selected blocks across columns (`acrossColumns`), until its release. */
+    #across = false;
+    /**
+     * The drag ended: the DOM selection it left is derived again, now
+     * normalized. A drag that ends as a block selection across columns keeps
+     * it: the native range it ignored goes (the projector shows a block
+     * selection as no range).
+     */
     #dropped = () => {
+        const across = this.#across;
+        this.#across = false;
+        if (across && this.value.kind === 'blocks') {
+            this.#held = false;
+            return this.display();
+        }
         if (!this.#held)
             return;
         this.#held = false;
         this.applySelectionSnapshot(getDomSelectionSnapshot(this.edytor.node));
     };
+    /**
+     * Under a pointer drag, a native range from one column into another
+     * column of the same layout is a block selection (`acrossColumns`,
+     * Notion): the blocks it covers are selected and the native range is
+     * ignored — the browser keeps extending it from the press, so the drag
+     * coming back into its own column is a text range again. Its highlight
+     * is hidden while the value is a block selection
+     * (`data-edytor-selection`). Only a range anchored where the press
+     * landed is the drag's: a Shift+click extends the range it found, which
+     * stays a text range in document order, as the keyboard's does (D7).
+     * Answers whether it selected blocks.
+     */
+    #dragAcross = (dom) => {
+        if (!dom?.anchorNode || !dom.focusNode || dom.isCollapsed)
+            return false;
+        const anchor = this.getTextOfNode(dom.anchorNode, dom.anchorOffset)?.parent;
+        const focus = this.getTextOfNode(dom.focusNode, dom.focusOffset)?.parent;
+        if (!anchor || anchor.id !== this.pointerDragStart?.text.parent.id)
+            return false;
+        const blocks = focus && !anchor.isRoot && acrossColumns(anchor, focus);
+        if (!blocks || !blocks.length)
+            return false;
+        this.#across = true;
+        this.select(blockSelection(blocks.map((block) => block.id)), 'dom');
+        this.edytor.projector.observe();
+        return true;
+    };
     /**
      * The block selection value over which the DOM caret was put — a primary
      * pointer press in the editor, or a foreign `selectionchange` (a script's,
@@ -798,7 +839,10 @@ export class EdytorSelection {
         this.applySelectionSnapshot(selection);
     };
     applySelectionSnapshot = (selection, options = {}) => {
-        if (this.selectedBlocks.size > 0)
+        if (this.dragging && this.#dragAcross(selection))
+            return;
+        // A block selection ignores the DOM, but the one a drag across columns made while it lasts.
+        if (this.selectedBlocks.size > 0 && !(this.dragging && this.#across))
             return;
         const container = this.edytor.node;
         if (!selection?.anchorNode ||

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "edytor",
-	"version": "0.1.0-next.18",
+	"version": "0.1.0-next.20",
 	"repository": {
 		"type": "git",
 		"url": "git+https://github.com/beynar/edytor.git"