edytor 0.1.0-next.27 → 0.1.0-next.29

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.29`, `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/plugins/blockHandles/BlockHandleController.svelte.js

@@ -120,7 +120,7 @@ const backdrop = (document) => {
     node.setAttribute('aria-hidden', 'true');
     return node;
 };
-/** How many blocks move: the badge on the drag preview and the drop indicator. */
+/** How many blocks move: the badge beside the drop indicator. */
 const countBadge = (document, count) => {
     const badge = document.createElement('span');
     badge.dataset.edytorDragCount = 'true';
@@ -367,9 +367,7 @@ export class BlockHandleController {
                 const root = this.edytor.node;
                 const nodes = group.flatMap((moved) => (moved.node ? [moved.node] : []));
                 if (nativeSetDragImage && root && nodes.length) {
-                    const count = group.length;
-                    const badge = count > 1 ? countBadge(element.ownerDocument, count) : undefined;
-                    const preview = dragPreview(root, nodes, location.current.input, badge);
+                    const preview = dragPreview(root, nodes, location.current.input);
                     setCustomNativeDragPreview({
                         nativeSetDragImage,
                         getOffset: preview.offset,

package/dist/plugins/blockHandles/dragPreview.d.ts

@@ -21,13 +21,13 @@ export type DragPreview = {
 /**
  * The ghost of `nodes` (the dragged blocks' elements, in document order),
  * grabbed at `pointer`: a copy of each block laid out at its own width (the
- * widest of them; the editor's content width when none is laid out), scaled by `SCALE` from its top left, cut at `MAX_HEIGHT`, and a
- * count badge when more than one block moves (the one addition). No card,
- * background, shadow, opacity or fade: the blocks' own look. The pointer
+ * widest of them; the editor's content width when none is laid out), scaled by `SCALE` from its top left, cut at `MAX_HEIGHT`.
+ * Nothing is added (no card, background, shadow, opacity, fade or count
+ * badge): the blocks' own look. The pointer
  * keeps its place on the first block (a handle is left of it: a transparent
  * gutter keeps the offset positive, which every browser supports).
  */
 export declare const dragPreview: (root: HTMLElement, nodes: HTMLElement[], pointer: {
     clientX: number;
     clientY: number;
-}, badge?: HTMLElement) => DragPreview;
+}) => DragPreview;

package/dist/plugins/blockHandles/dragPreview.js

@@ -158,13 +158,13 @@ const contentWidth = (root) => {
 /**
  * The ghost of `nodes` (the dragged blocks' elements, in document order),
  * grabbed at `pointer`: a copy of each block laid out at its own width (the
- * widest of them; the editor's content width when none is laid out), scaled by `SCALE` from its top left, cut at `MAX_HEIGHT`, and a
- * count badge when more than one block moves (the one addition). No card,
- * background, shadow, opacity or fade: the blocks' own look. The pointer
+ * widest of them; the editor's content width when none is laid out), scaled by `SCALE` from its top left, cut at `MAX_HEIGHT`.
+ * Nothing is added (no card, background, shadow, opacity, fade or count
+ * badge): the blocks' own look. The pointer
  * keeps its place on the first block (a handle is left of it: a transparent
  * gutter keeps the offset positive, which every browser supports).
  */
-export const dragPreview = (root, nodes, pointer, badge) => {
+export const dragPreview = (root, nodes, pointer) => {
     const { ownerDocument: document } = root;
     const first = nodes[0]?.getBoundingClientRect();
     const dx = first ? pointer.clientX - first.left : 0;
@@ -201,10 +201,6 @@ export const dragPreview = (root, nodes, pointer, badge) => {
         overflow: 'hidden'
     });
     box.append(scaled);
-    if (badge) {
-        Object.assign(badge.style, { top: '4px', right: '4px' });
-        box.append(badge);
-    }
     const element = document.createElement('div');
     element.dataset.edytorDragPreview = 'true';
     element.dataset.count = String(nodes.length);

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