edytor 0.1.0-next.27 → 0.1.0-next.28

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.27`, `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.28`, `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/selection/replaceSelection.d.ts

@@ -49,18 +49,16 @@ export declare const flipToggles: (blocks: readonly Block[]) => void;
  */
 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`).
+ * A pointer selection (a drag, a Shift+click) from `anchor` to `focus`,
+ * Notion's rule (`sel.drag.across-columns`): once one end is in a column
+ * and the other is not in that column (another column of its layout, or
+ * outside the 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). `null` (a
+ * text range) while both ends lie in the same columns (one column, or none:
+ * a range that runs over a whole layout from above it to below it stays
+ * text). Decided from the roles (`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). */

package/dist/selection/replaceSelection.js

@@ -92,31 +92,29 @@ 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`).
+ * A pointer selection (a drag, a Shift+click) from `anchor` to `focus`,
+ * Notion's rule (`sel.drag.across-columns`): once one end is in a column
+ * and the other is not in that column (another column of its layout, or
+ * outside the 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). `null` (a
+ * text range) while both ends lie in the same columns (one column, or none:
+ * a range that runs over a whole layout from above it to below it stays
+ * text). Decided from the roles (`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)
+    const columns = (block) => {
+        const items = new Set();
+        for (let at = block.parent; at && !at.isRoot; at = at.parent)
+            if (facade.isLayoutItem(at.id))
+                items.add(at.id);
+        return items;
+    };
+    const [from, to] = [columns(anchor), columns(focus)];
+    if (from.size === to.size && [...from].every((id) => to.has(id)))
         return null;
     const [first, last] = edytor.compareBlocks(anchor, focus) <= 0 ? [anchor, focus] : [focus, anchor];
     const blocks = [];

package/dist/selection/selection.svelte.js

@@ -662,6 +662,7 @@ export class EdytorSelection {
         }
         this.pointerDragStart = this.getTextPointFromClientPoint(event.clientX, event.clientY);
         this.#across = false;
+        this.#extending = event.shiftKey;
     };
     clearPointerDragStart = () => {
         this.pointerDragStart = null;
@@ -671,6 +672,8 @@ export class EdytorSelection {
     #held = false;
     /** The pointer drag selected blocks across columns (`acrossColumns`), until its release. */
     #across = false;
+    /** The press held Shift: it extends the range it found (a Shift+click). */
+    #extending = 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
@@ -678,6 +681,11 @@ export class EdytorSelection {
      * selection as no range).
      */
     #dropped = () => {
+        // A Shift+press's range can reach the adopter only after its release
+        // (Chromium queues its `selectionchange`): read here, as the press's.
+        if (this.#extending && !this.#across)
+            this.#dragAcross(getDomSelectionSnapshot(this.edytor.node));
+        this.#extending = false;
         const across = this.#across;
         this.#across = false;
         if (across && this.value.kind === 'blocks') {
@@ -690,25 +698,24 @@ export class EdytorSelection {
         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.
+     * Under a pointer press (a drag, or a Shift+click extending the range it
+     * found), a native range with one end in a column and the other outside
+     * that column (another column, or outside the layout) is a block
+     * selection (`acrossColumns`, Notion): the blocks it covers are selected
+     * and the native range is ignored — the browser keeps extending it, so
+     * the drag coming back into the anchor's columns is a text range again.
+     * Its highlight is hidden while the value is a block selection
+     * (`data-edytor-selection`). The keyboard's ranges stay text ranges in
+     * document order (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)
+        if (!anchor)
             return false;
-        const blocks = focus && !anchor.isRoot && acrossColumns(anchor, focus);
+        const blocks = focus && !anchor.isRoot && !focus.isRoot && acrossColumns(anchor, focus);
         if (!blocks || !blocks.length)
             return false;
         this.#across = true;

package/package.json

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