edytor 1.0.0-rc.3 → 2.0.0

package/dist/dnd/autoScroll.js

@@ -1,4 +1,4 @@
-import { autoScrollApi } from './pragmatic.js';
+import { autoScroll, autoScrollWindow } from './pragmatic.js';
 /**
  * Auto-scroll for one drag (a block's, a table row's or column's; Atlassian's
  * auto-scroll package): the window
@@ -12,7 +12,6 @@ export const autoScrollFor = (root, ours) => {
     // so it is created only where that exists.
     if (typeof root.ownerDocument.elementsFromPoint !== 'function')
         return () => { };
-    const { autoScroll, autoScrollWindow } = autoScrollApi();
     const canScroll = ({ source }) => ours(source.data);
     const releases = [autoScrollWindow({ canScroll })];
     const { body, documentElement, defaultView } = root.ownerDocument;

package/dist/{plugins/blockHandles → dnd}/dropIndicator.d.ts

@@ -5,8 +5,8 @@
  * future parent's own row. Both live in the overlay layer, measured each
  * frame. The controller decides the placement; this draws it.
  */
-import type { Block } from '../../block/block.svelte.js';
-import type { Edytor } from '../../edytor.svelte.js';
+import type { Block } from '../block/block.svelte.js';
+import type { Edytor } from '../edytor.svelte.js';
 import { type DropPlacement } from './geometry.js';
 /** What the indicator reads of the controller: the dragged blocks and the beside resolution. */
 type IndicatorContext = {

package/dist/{plugins/blockHandles → dnd}/dropIndicator.js

@@ -1,9 +1,25 @@
 import { getOwnRowBottom, isBeside, nestIndent, ownRow, ownTextRow } from './geometry.js';
-/** Notion's drop bar: 4px of translucent blue. */
-const DROP_INDICATOR_COLOR = 'rgba(35, 131, 226, 0.43)';
-/** The nest backdrop's theming variable (its defaults are in `BlockHandle.svelte`). */
-const BACKDROP_COLOR = '--edytor-drop-backdrop-color';
+/** Notion's drop bar: 4px (its height in `BlockHandles.svelte`, its look the app's). */
 const BAR = 4;
+/** Place `element` at `box`, relative to the layer (`origin`). */
+const place = (element, box, origin) => Object.assign(element.style, {
+    left: `${box.left - origin.left}px`,
+    top: `${box.top - origin.top}px`,
+    width: `${box.width}px`,
+    ...(box.height === undefined ? {} : { height: `${box.height}px` })
+});
+/**
+ * The theme variable `name` as `from` (a block) inherits it, read now, and
+ * its write on an element of the overlay (which is not inside the editor):
+ * unset there without one.
+ */
+const themed = (from, name) => {
+    const value = from.ownerDocument.defaultView
+        ?.getComputedStyle(from)
+        .getPropertyValue(name)
+        .trim();
+    return (element) => value ? element.style.setProperty(name, value) : element.style.removeProperty(name);
+};
 /**
  * Notion's nest backdrop: a soft rounded tint over the future parent's own
  * row, drawn by the overlay layer under the drop line — never a style on the
@@ -76,17 +92,18 @@ export class DropIndicator {
         // How many blocks move, as data only: the bar shows no badge.
         if (count > 1)
             overlay.dataset.count = String(count);
-        const color = document.defaultView
-            ?.getComputedStyle(placement.node)
-            .getPropertyValue('--edytor-drop-indicator-color')
-            .trim();
-        overlay.style.setProperty('--edytor-drop-indicator-color', color || DROP_INDICATOR_COLOR);
+        themed(placement.node, '--edytor-drop-indicator-color')(overlay);
         const layer = this.edytor.overlay.layer;
         layer?.append(overlay);
         this.#overlay = overlay;
         const measure = (origin) => {
-            const writes = [this.#position(origin), this.#positionBackdrop(placement, origin)];
-            return () => writes.forEach((write) => write?.());
+            const bar = this.#bar(placement);
+            const backdrop = this.#positionBackdrop(placement);
+            return () => {
+                if (bar)
+                    place(overlay, bar, origin);
+                backdrop?.(origin);
+            };
         };
         // Placed at once (it must not show at the layer's origin for a frame), then per frame.
         if (layer)
@@ -117,12 +134,11 @@ export class DropIndicator {
         return parent;
     }
     /**
-     * Layer-relative geometry of the nest backdrop (`backdrop`): the future
-     * parent's box (`nestParent`, read per frame: a peer's change may change
-     * it), down to where its first child begins; hidden when the placement
-     * does not nest.
+     * The nest backdrop's write (`backdrop`): over the future parent's box
+     * (`nestParent`, read per frame: a peer's change may change it), down to
+     * where its first child begins; hidden when the placement does not nest.
      */
-    #positionBackdrop(placement, origin) {
+    #positionBackdrop(placement) {
         const backdrop = this.#backdrop;
         if (!backdrop)
             return;
@@ -131,43 +147,28 @@ export class DropIndicator {
         if (!parent || !node?.isConnected)
             return () => delete backdrop.dataset.shown;
         const rect = ownRow(node);
-        const color = node.ownerDocument.defaultView
-            ?.getComputedStyle(node)
-            .getPropertyValue(BACKDROP_COLOR)
-            .trim();
-        return () => {
+        const color = themed(node, '--edytor-drop-backdrop-color');
+        return (origin) => {
             backdrop.dataset.blockId = parent.id;
-            if (color)
-                backdrop.style.setProperty(BACKDROP_COLOR, color);
-            else
-                backdrop.style.removeProperty(BACKDROP_COLOR);
-            Object.assign(backdrop.style, {
-                left: `${rect.left - origin.left}px`,
-                top: `${rect.top - origin.top}px`,
-                width: `${rect.width}px`,
-                height: `${rect.height}px`
-            });
+            color(backdrop);
+            place(backdrop, rect, origin);
             backdrop.dataset.shown = 'true';
         };
     }
     /**
-     * Layer-relative geometry of Notion's plain bar: centered between the
-     * two siblings of the slot, or — inside the target — where the child lands,
-     * indented to the child's column.
+     * Notion's plain bar: centered between the two siblings of the slot, or
+     * — inside the target — where the child lands, indented to the child's
+     * column; beside a block or a column, vertical (`#beside`).
      */
-    #position(origin) {
-        const placement = this.placement;
-        const overlay = this.#overlay;
-        if (!placement || !overlay)
-            return;
+    #bar(placement) {
         if (isBeside(placement.position))
-            return this.#positionBeside(placement, origin);
+            return this.#beside(placement);
         const rect = placement.node.getBoundingClientRect();
-        const place = (left, width, center) => () => {
-            overlay.style.left = `${left - origin.left}px`;
-            overlay.style.width = `${width}px`;
-            overlay.style.top = `${center - BAR / 2 - origin.top}px`;
-        };
+        const at = (left, width, center) => ({
+            left,
+            width,
+            top: center - BAR / 2
+        });
         if (placement.position === 'inside') {
             // Where the child lands (the gap after the last visible child, else after
             // the target's own row), from the child's indent to the target's right edge.
@@ -180,7 +181,7 @@ export class DropIndicator {
             const end = shown ? shown.bottom : getOwnRowBottom(placement.node);
             const land = next && next.top >= end ? (end + next.top) / 2 : end + 4;
             const left = shown && lastNode ? ownTextRow(lastNode).left : row.left + nestIndent(placement.node);
-            return place(left, Math.max(16, rect.right - left), land);
+            return at(left, Math.max(16, rect.right - left), land);
         }
         const siblings = placement.target.parent?.children;
         const index = placement.target.index + (placement.position === 'after' ? 1 : 0);
@@ -189,10 +190,9 @@ export class DropIndicator {
         if (previous && next && previous.bottom <= next.top) {
             const left = Math.min(previous.left, next.left);
             const width = Math.max(previous.right, next.right) - left;
-            return place(left, width, (previous.bottom + next.top) / 2);
+            return at(left, width, (previous.bottom + next.top) / 2);
         }
-        const edge = placement.position === 'before' ? rect.top : rect.bottom;
-        return place(rect.left, rect.width, edge);
+        return at(rect.left, rect.width, placement.position === 'before' ? rect.top : rect.bottom);
     }
     /**
      * A beside placement's bar: vertical, 4px, at the edge of the block it
@@ -200,10 +200,9 @@ export class DropIndicator {
      * when it adds a column to a layout, the layout's height, in the middle
      * of the gap to the neighbouring column, else at the layout's edge.
      */
-    #positionBeside(placement, origin) {
-        const overlay = this.#overlay;
+    #beside(placement) {
         const outer = this.ctx.besideOf(placement.target);
-        if (!overlay || !outer.node)
+        if (!outer.node)
             return;
         const right = placement.position === 'right';
         const at = this.ctx.layoutOf(outer);
@@ -224,14 +223,7 @@ export class DropIndicator {
             box = outer.node.getBoundingClientRect();
             edge = right ? box.right : box.left;
         }
-        return () => {
-            Object.assign(overlay.style, {
-                left: `${edge - BAR / 2 - origin.left}px`,
-                top: `${box.top - origin.top}px`,
-                width: `${BAR}px`,
-                height: `${box.height}px`
-            });
-        };
+        return { left: edge - BAR / 2, top: box.top, width: BAR, height: box.height };
     }
     /** Hide the bar (the backdrop fades out where it was) and forget the placement. */
     clear = () => {

package/dist/{plugins/blockHandles → dnd}/geometry.d.ts

@@ -4,8 +4,8 @@
  * placement's shape, a block's own row, its first text line and one
  * nesting step.
  */
-import type { Block } from '../../block/block.svelte.js';
-import type { BlockMovePosition } from '../../session/moves.js';
+import type { Block } from '../block/block.svelte.js';
+import type { BlockMovePosition } from '../session/moves.js';
 export type DropPlacement = {
     target: Block;
     node: HTMLElement;
@@ -14,7 +14,8 @@ export type DropPlacement = {
     blocked?: boolean;
 };
 export declare const isBeside: (position: BlockMovePosition) => position is "left" | "right";
-export declare const getOwnRowBottom: (node: HTMLElement) => number;
+/** Where a block's own row ends: where its first shown child begins, else its box's (`rect`) bottom. */
+export declare const getOwnRowBottom: (node: HTMLElement, rect?: DOMRect) => number;
 /** A block's own row: its box down to where its first child begins. */
 export declare const ownRow: (node: HTMLElement) => DOMRect;
 /** The first line of a block's own text (not a child's), or the block's box. */

package/dist/{plugins/blockHandles → dnd}/geometry.js

@@ -1,6 +1,6 @@
 export const isBeside = (position) => position === 'left' || position === 'right';
-export const getOwnRowBottom = (node) => {
-    const rect = node.getBoundingClientRect();
+/** Where a block's own row ends: where its first shown child begins, else its box's (`rect`) bottom. */
+export const getOwnRowBottom = (node, rect = node.getBoundingClientRect()) => {
     // Block nodes wrap their children in the DOM; the parent's placement
     // bands belong to its own row, ending where the first child begins.
     const firstChild = node.querySelector('[data-edytor-block="true"]');
@@ -17,10 +17,11 @@ export const ownRow = (node) => {
     const rect = node.getBoundingClientRect();
     return new DOMRect(rect.left, rect.top, rect.width, Math.max(0, getOwnRowBottom(node) - rect.top));
 };
+/** The first element matching `selector` in a block's own markup (not a child's). */
+const own = (node, selector) => Array.from(node.querySelectorAll(selector)).find((element) => element.closest('[data-edytor-block="true"]') === node);
 /** The first line of a block's own text (not a child's), or the block's box. */
 export const ownTextRow = (node) => {
-    const text = Array.from(node.querySelectorAll('[data-edytor-text="true"]')).find((element) => element.closest('[data-edytor-block="true"]') === node);
-    const row = text?.getClientRects()[0];
+    const row = own(node, '[data-edytor-text="true"]')?.getClientRects()[0];
     return row && row.height > 0 ? row : node.getBoundingClientRect();
 };
 /**
@@ -42,8 +43,7 @@ export const nestIndent = (node) => {
  * there goes inside the block.
  */
 export const overEmptyBody = (node, y) => {
-    const hint = Array.from(node.querySelectorAll('[data-edytor-empty-body]')).find((element) => element.closest('[data-edytor-block="true"]') === node);
-    const rect = hint?.getBoundingClientRect();
+    const rect = own(node, '[data-edytor-empty-body]')?.getBoundingClientRect();
     return !!rect && rect.height > 0 && y >= rect.top && y <= rect.bottom;
 };
 /**

package/dist/dnd/placement.d.ts

@@ -0,0 +1,200 @@
+/**
+ * Where a drop lands in a view (Notion's rules): the one resolution a block
+ * handle's drag and a file dragged from outside both read, and the drop
+ * indicator draws (`dropIndicator.ts`). A drag is what it carries
+ * (`Drag`: the blocks it moves, none for files) and the placements the
+ * document takes for it (`fits`); the rows are the view's drop targets
+ * (`targetOf`). The block handles wire it to the drag library; a file drag
+ * reads it from the host's own `dragover` (the media plugins' `plugins/fileDrop.ts`).
+ */
+import type { Block } from '../block/block.svelte.js';
+import type { Edytor } from '../edytor.svelte.js';
+import type { DropIndicator } from './dropIndicator.js';
+import { type DropPlacement } from './geometry.js';
+export type Input = {
+    clientX: number;
+    clientY: number;
+};
+/** What a drag carries: the blocks it moves (none for files), and whether a placement takes it. */
+export type Drag = {
+    group: readonly Block[];
+    fits: (placement: DropPlacement) => boolean;
+};
+/** How far beside a target's box it stays the drop target (`getIsSticky`), across and along. */
+export declare const SLOP_X = 20;
+export declare const SLOP_Y = 24;
+/**
+ * A block a drop may land at (a drop target): a movable block, not a
+ * table's row (its row menus move it) nor a cell.
+ */
+export declare const isDropTarget: (edytor: Edytor, block: Block) => boolean;
+type ResolverContext = {
+    /** The drop target block of a block element, if it is one. */
+    targetOf: (node: HTMLElement) => Block | undefined;
+    /** The drag's handle (its width is the handle column's), if any. */
+    handle: () => HTMLElement | null;
+    /** The indicator showing the drag's placement (a margin's reorder holds while it shows). */
+    indicator: DropIndicator;
+};
+export declare class DropResolver {
+    private readonly edytor;
+    private readonly ctx;
+    constructor(edytor: Edytor, ctx: ResolverContext);
+    targetOf: (node: HTMLElement) => Block | undefined;
+    isTarget: (node: HTMLElement) => boolean;
+    /**
+     * The placement over `row` at the pointer: a beside band of the row first
+     * (`beside`; `false` when the document refuses it: nothing shows), else
+     * the row's halves, the top one first when `before` (the pointer's half,
+     * or the one a sticky target holds).
+     */
+    at(drag: Drag, row: Block, input: Input, before: boolean): DropPlacement | null | false;
+    /**
+     * The drop target under the pointer for a drag the host's own events see
+     * (a file's): the innermost target element at the point, `null` outside
+     * the blocks and in the handle column (the margins answer there,
+     * `margin`).
+     */
+    hitAt(input: Input): HTMLElement | null;
+    /** The placement over the row of drop target `node` at the pointer (`rowAt`, its own row's half: `at`). */
+    over(drag: Drag, node: HTMLElement, input: Input): DropPlacement | null | false;
+    /**
+     * The editor's content column (`start`…`end`, the root's content box:
+     * where its blocks' boxes start and end), the width of the handle column
+     * left of it (the drag's handle, measured: `+`, grip and the gap to the
+     * block) and how far the drag reaches past them (`dropReach`, the
+     * `--edytor-drop-reach` the root inherits).
+     */
+    gutter(root: HTMLElement): {
+        start: number;
+        end: number;
+        handles: number;
+        reach: number;
+    };
+    /** Whether `x` is in the handle column left of the editor's blocks (`gutter`): the page target's. */
+    inHandleColumn(x: number): boolean;
+    /**
+     * A placement in the editor's margins at the pointer (`dnd.reach`), within
+     * the editor's height, for the row the content's near edge shows at the
+     * pointer's height (`rowAt`: a nested block's own row; over a layout, the
+     * row of its first column on the left, of its last on the right, never
+     * another), by the zone the pointer is in (`marginAt`):
+     * - the handle column left of the blocks (`gutter`): that row's reorder
+     *   (`reorder`): a drag straight down the handles reorders, row after
+     *   row, gaps included (never a beside band);
+     * - the first `BESIDE_MARGIN` px past it on the left, and past the
+     *   content's right edge: the beside band of that side (`beside`, as if
+     *   the pointer were at that edge) when the document has a layout kind
+     *   and the row offers one (a refused band shows nothing);
+     * - elsewhere within the reach (and there without a band): the reorder,
+     *   on the left the handle column's, on the right the one the row's
+     *   right edge offers (its halves as just inside the content, so nothing
+     *   jumps as the pointer leaves it).
+     * `undefined` past the reach, above or below the editor, and inside the
+     * content (the blocks' own targets answer there).
+     */
+    margin(drag: Drag, { clientX: x, clientY: y }: Input): DropPlacement | undefined;
+    /**
+     * The halves of `row` (`zones`) at the pointer, the one it is in first:
+     * the top half of `rect` (its own row by default) before, the bottom one
+     * after; with `plain`, only before or after a block — never inside one.
+     */
+    halves(drag: Drag, row: Block, input: Input, rect: DOMRect, plain?: boolean): DropPlacement[][];
+    /**
+     * The first placement of `halves` the document takes (a refused one gives
+     * way to the next, then to the other half's), `blocked` when the first
+     * half took none; `null` when none fits.
+     */
+    pick(drag: Drag, halves: DropPlacement[][]): DropPlacement | null;
+    /**
+     * The handle column's reorder over `row` at the pointer: its plain halves
+     * (`halves`, the pointer's x picking the level); `null` when neither half
+     * fits. Over an item of a container the dragged blocks do not fit in (a
+     * paragraph over a list's item: the document refuses every placement at
+     * the item's level), the container is the row: its whole box, the upper
+     * half before it, the lower half after it (round 4), so a drag down the
+     * handles meets the list as one row it can pass.
+     */
+    reorder(drag: Drag, row: Block, input: Input): DropPlacement | null;
+    /**
+     * The block whose row the pointer is on over `node`: the last shown drop
+     * target in it whose row starts at or above the pointer (beside a nested
+     * block, over its ancestors' indent, the pointer is on that block's
+     * row), else `target`, over its own row (`emptied`). A layout's columns
+     * sit side by side: only the one under the pointer is measured (between
+     * two of them, the layout is the row: its gap).
+     */
+    rowAt(drag: Drag, target: Block, node: HTMLElement, { clientX, clientY }: Input): Block;
+    /** Whether the document has a layout kind: only then are there beside placements. */
+    get layouts(): boolean;
+    /**
+     * The block a beside placement over `block` stands beside: the document's
+     * own resolution (`facade.besideAt`, `placeBeside`'s): a list item's list,
+     * a code line's code block, a toggle's child itself, an item itself.
+     */
+    besideOf(block: Block): Block;
+    /** The item (and its layout) a beside placement at `outer` (`besideOf`) adds a column beside. */
+    layoutOf(outer: Block): {
+        item: Block;
+        layout: Block | null;
+    } | null;
+    /**
+     * Whether `x` is over a column other than one holding `block`: a sticky
+     * target never holds the pointer across a column boundary.
+     */
+    overOtherColumn(block: Block, x: number): boolean;
+    /**
+     * Notion's beside bands over `row` (`docs/columns-plan.md`, "View layer"), only while the
+     * pointer is within its own row's height, the document has a layout kind
+     * and the layout the drop makes or grows does not stack (`stacks`):
+     * - right: the row's last 15% (at least 32px), and the slop past it;
+     * - left: the slop left of the row (its sticky margin, left of its text
+     *   column), only for a row whose parent is the root or a column (a
+     *   list's item: its list's) — a nested row keeps the pointer's x for its
+     *   levels (`zones`) — and only
+     *   inside the editor (a column's gap): left of the editor's blocks is the
+     *   handle column, which reorders (`margin`);
+     * - over a layout's gap (the row is the layout): right of the column
+     *   before it, a new column between.
+     * `undefined` outside the bands (the hitbox's halves stand), else the
+     * placement, or `null` when the document refuses it: a refused band shows
+     * nothing.
+     */
+    beside(drag: Drag, row: Block, { clientX: x, clientY: y }: Input, band?: 'left' | 'right'): DropPlacement | null | undefined;
+    /** Where the editor's blocks start (`gutter`), or `fallback` without a host. */
+    inside(fallback: number): number;
+    /** The children a block shows: none for a closed toggle's, or a container's items. */
+    shown(block: Block): Block[];
+    /**
+     * Over a dragged block, the parent it leaves when that parent shows no
+     * other child: the gap under the parent's own row, which reparents as
+     * the parent's lower half does (`zones`). Else `row`.
+     */
+    emptied(drag: Drag, row: Block): Block;
+    /**
+     * The placements over `row`, each half's in preference order (a refused
+     * one gives way to the next, then to the other half's):
+     * - the top half: before it;
+     * - the bottom half of a block whose children show (not a closed toggle):
+     *   its first child's slot. Pragmatic drag and drop's tree rule: an
+     *   expanded item offers no "after" on its own row;
+     * - else, after it at the level whose text column is nearest the pointer:
+     *   the last block of a nested group reparents to any ancestor it ends,
+     *   down to the root. Past one nesting step right of its text start,
+     *   inside it (its last child) first. A block every shown child of which
+     *   is dragged is not expanded: its levels, never inside it when the drag
+     *   moves only its children (they would stay where they are).
+     * None over a dragged block's own row or its subtree: released there, the
+     * drag changes nothing (its levels would outdent it) — unless it empties
+     * its parent's shown children (`emptied`): that parent's row. Over the
+     * hint of the row's empty body (`body.hint`: an open toggle's, a
+     * callout's), inside it first, either half.
+     */
+    zones(drag: Drag, row: Block, { clientX, clientY }: Input): {
+        before: DropPlacement[];
+        after: DropPlacement[];
+    };
+    /** The dragged block that is `row` or holds it: its row offers nothing (it moves with the drag). */
+    carrier(drag: Drag, row: Block): Block | undefined;
+}
+export {};