edytor 0.1.0-next.19 → 0.1.0-next.21

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.19`, `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.21`, `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/plugins/columns/resize.svelte.js

@@ -95,7 +95,12 @@ export class ColumnResize {
         const strips = this.shown ? this.gaps(origin) : [];
         const drag = this.drag;
         const guide = drag && {
-            x: drag.start + this.widthAt(drag) + drag.gap / 2 - GUIDE / 2 - origin.left,
+            // Where the hover guide showed: the band's middle, never the gap's (it would jump onto the `+`).
+            x: drag.start +
+                this.widthAt(drag) +
+                bandOf({ left: 0, right: drag.gap }).width / 2 -
+                GUIDE / 2 -
+                origin.left,
             top: drag.top - origin.top,
             height: drag.height
         };

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.19",
+	"version": "0.1.0-next.21",
 	"repository": {
 		"type": "git",
 		"url": "git+https://github.com/beynar/edytor.git"