edytor 0.1.0-next.26 → 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.26`, `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/block/inlineBlock.svelte.js

@@ -88,6 +88,9 @@ export class InlineBlock {
                 return selection.setAtTextOffset(after, 0);
             selection.selectInlineBlock(this);
             clearDomSelection(this.edytor.node);
+            // The atom took the press: the caret the browser still leaves for it
+            // (Chromium parks one at the host's start before the release) is its own.
+            this.edytor.projector.parked();
         };
         node.addEventListener('pointerdown', selectInlineBlock);
         return {

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/dist/surface/projector.svelte.d.ts

@@ -35,7 +35,8 @@ export declare class Projector {
      * - drift: no gesture since the last observation, and a render since it
      *   (a flush the DOM selection was not observed after, or DOM records the
      *   observer has not reconciled), or one of the two named signatures,
-     *   or the caret a browser parks for the editor's own focus or a refused key (`parked`);
+     *   or the caret a browser parks for the editor's own focus, a refused key
+     *   or an atom's press (`parked`);
      * - intent: a gesture since the last observation, or a pointer drag;
      * - foreign: no gesture and no render (host code, assistive tech, O1).
      */
@@ -44,9 +45,13 @@ export declare class Projector {
      * The browser parks a caret of its own, at the host's start: the editor
      * focused its own host (`takeKeys`: the keys after a gesture on its
      * chrome), or a key the attempt refused for want of a target
-     * (`targetless`: Chromium places a caret for it). Until the next gesture
-     * that caret is drift, displayed over by the value — a block selection or
-     * none shows no DOM range — never adopted.
+     * (`targetless`: Chromium places a caret for it), or an atom took a press
+     * (`InlineBlock.attach`: Chromium parks one for it before the release).
+     * Until the next gesture that caret is drift, displayed over by the value —
+     * a block selection, an atom or none shows no DOM range — never adopted;
+     * under none or an atom, until a press inside or a focus from outside
+     * (`pressed`), an adopted move or our own display, whatever key or release
+     * came since.
      */
     parked: () => void;
     /**

package/dist/surface/projector.svelte.js

@@ -193,7 +193,8 @@ export class Projector {
      * - drift: no gesture since the last observation, and a render since it
      *   (a flush the DOM selection was not observed after, or DOM records the
      *   observer has not reconciled), or one of the two named signatures,
-     *   or the caret a browser parks for the editor's own focus or a refused key (`parked`);
+     *   or the caret a browser parks for the editor's own focus, a refused key
+     *   or an atom's press (`parked`);
      * - intent: a gesture since the last observation, or a pointer drag;
      * - foreign: no gesture and no render (host code, assistive tech, O1).
      */
@@ -216,8 +217,10 @@ export class Projector {
         if (this.#parked === edytor.intentSerial)
             return 'drift';
         // With no value, a caret no press placed stays the browser's, whatever key
-        // came since (Mod+Z, Escape: Chromium parks one at the host's start).
-        if (this.#parking && selection.value.kind === 'none')
+        // came since (Mod+Z, Escape: Chromium parks one at the host's start); over
+        // an atom a press selected, so does the one the browser parks for that
+        // press, whatever its release marked (`parked`).
+        if (this.#parking && (selection.value.kind === 'none' || selection.value.kind === 'atom'))
             return 'drift';
         if (edytor.intentSerial === this.#serial && (this.#snapBack(dom) || this.#jump()))
             return 'drift';
@@ -231,9 +234,13 @@ export class Projector {
      * The browser parks a caret of its own, at the host's start: the editor
      * focused its own host (`takeKeys`: the keys after a gesture on its
      * chrome), or a key the attempt refused for want of a target
-     * (`targetless`: Chromium places a caret for it). Until the next gesture
-     * that caret is drift, displayed over by the value — a block selection or
-     * none shows no DOM range — never adopted.
+     * (`targetless`: Chromium places a caret for it), or an atom took a press
+     * (`InlineBlock.attach`: Chromium parks one for it before the release).
+     * Until the next gesture that caret is drift, displayed over by the value —
+     * a block selection, an atom or none shows no DOM range — never adopted;
+     * under none or an atom, until a press inside or a focus from outside
+     * (`pressed`), an adopted move or our own display, whatever key or release
+     * came since.
      */
     parked = () => {
         this.#parked = this.edytor.intentSerial;
@@ -369,7 +376,9 @@ export class Projector {
             // A block set or an atom shows as selected elements, not a range.
             // Displayed even when the DOM already holds no range (the atom's
             // own pointerdown cleared it): a caret the browser parks later
-            // without a gesture (focusing the host) is then drift, not intent.
+            // without a gesture (focusing the host) is then drift, not intent;
+            // the one it parks for the atom's press is drift through its release
+            // (`parked`).
             const inside = Boolean(dom.anchorNode && node.contains(dom.anchorNode));
             if ((inside || dom.rangeCount === 0) && this.#ours(requested)) {
                 if (inside)

package/package.json

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