edytor 1.0.0 → 2.0.0

package/dist/plugins/blockHandles/BlockHandleController.svelte.js

@@ -2,16 +2,15 @@ import { untrack } from 'svelte';
 import { autoScrollFor } from '../../dnd/autoScroll.js';
 import { blockSelection, noSelection, project } from '../../session/selection.js';
 import { draggable, dropTargetForElements, setCustomNativeDragPreview } from '../../dnd/pragmatic.js';
-import { HIDDEN, hidden } from '../../selection/visibility.js';
 import { getSelectionBlocks, holdsBlocks, movable, outermost, selectMoved, shownText } from '../../selection/replaceSelection.js';
 import { takeKeys } from '../../events/onFocus.js';
 import { EDYTOR_BLOCK_DRAG_MIME } from '../../events/onDrop.js';
 import { kindLabel } from '../../kinds.js';
 import { siblingSlot } from '../../session/handles.js';
 import { dragPreview } from './dragPreview.js';
-import { DropIndicator } from './dropIndicator.js';
-import { dropReach, getOwnRowBottom, isBeside, marginAt, nestIndent, overEmptyBody, ownRow, ownTextRow } from './geometry.js';
-import { stacks } from '../columns/stacking.js';
+import { DropIndicator } from '../../dnd/dropIndicator.js';
+import { DropResolver, SLOP_X, SLOP_Y } from '../../dnd/placement.js';
+import { getOwnRowBottom, ownRow } from '../../dnd/geometry.js';
 import { all, listen } from '../../utils/listen.js';
 /**
  * The DOM event a grip click dispatches on the editor (the one way to
@@ -38,14 +37,6 @@ const ROW = 'edytorRow';
 const BEFORE = 'edytorBefore';
 /** The drop target data key of a beside band beyond the editor's edges (`margin`). */
 const MARGIN = 'edytorMargin';
-/** How far beside a target's box it stays the drop target (`getIsSticky`), across and along. */
-const SLOP_X = 20;
-const SLOP_Y = 24;
-/** The right beside band: the row's last 15% (Notion), at least this many px. */
-const RIGHT_BAND = 0.15;
-const RIGHT_BAND_MIN = 32;
-/** The handle column's width when the drag's handle cannot be measured (`+`, grip and gap). */
-const HANDLE_COLUMN = 50;
 /**
  * Whether the pointer is over the own row of a block other than `node` and
  * its descendants. A container (a list) has no row of its own: its padding
@@ -65,8 +56,6 @@ const endsDocument = (block) => {
             return false;
     return true;
 };
-/** Where a block's own text starts: its level's column. */
-const column = (block) => ownTextRow(block.node).left;
 export class BlockHandleController {
     edytor;
     options;
@@ -82,6 +71,8 @@ export class BlockHandleController {
     group = [];
     /** The drop bar and the nest backdrop in the overlay, while our drag runs. */
     indicator;
+    /** Where a drop lands (the one resolution a file drag reads too). */
+    drop;
     /** The selection the drag in progress replaced when it started: its undo step restores it. */
     held = null;
     /** The handle the drag in progress started from: its width is the handle column's. */
@@ -91,10 +82,14 @@ export class BlockHandleController {
     constructor(edytor, options = { draggable: true }) {
         this.edytor = edytor;
         this.options = options;
-        this.indicator = new DropIndicator(edytor, {
-            group: () => this.group,
-            besideOf: (block) => this.besideOf(block),
-            layoutOf: (outer) => this.layoutOf(outer)
+        this.drop = new DropResolver(edytor, {
+            targetOf: (node) => this.targets.get(node),
+            handle: () => this.handle,
+            indicator: (this.indicator = new DropIndicator(edytor, {
+                group: () => this.group,
+                besideOf: (block) => this.drop.besideOf(block),
+                layoutOf: (outer) => this.drop.layoutOf(outer)
+            }))
         });
     }
     get readonly() {
@@ -396,13 +391,13 @@ export class BlockHandleController {
                 if (!dragSource)
                     return false;
                 if (!target)
-                    return Boolean(this.margin(dragSource, input));
-                if (this.#inHandleColumn(input.clientX))
+                    return Boolean(this.drop.margin(this.#drag(dragSource), input));
+                if (this.drop.inHandleColumn(input.clientX))
                     return false;
-                const row = this.rowAt(dragSource, target, node, input);
-                const { before, after } = this.zones(dragSource, row, input);
-                return ([...before, ...after].some(this.fits(dragSource)) ||
-                    Boolean(this.beside(dragSource, row, input)));
+                const row = this.drop.rowAt(this.#drag(dragSource), target, node, input);
+                const { before, after } = this.drop.zones(this.#drag(dragSource), row, input);
+                return ([...before, ...after].some(this.#drag(dragSource).fits) ||
+                    Boolean(this.drop.beside(this.#drag(dragSource), row, input)));
             },
             // The row at the pointer and the half of its own row (not its subtree's)
             // the pointer is in: held while the target is sticky (the drag library
@@ -411,7 +406,7 @@ export class BlockHandleController {
                 const dragSource = this.#getDragSource(source.data);
                 if (!target || !dragSource)
                     return { [MARGIN]: true };
-                const row = this.rowAt(dragSource, target, node, input);
+                const row = this.drop.rowAt(this.#drag(dragSource), target, node, input);
                 const rect = ownRow(row.node);
                 return { [ROW]: row.id, [BEFORE]: input.clientY < rect.top + rect.height / 2 };
             },
@@ -429,7 +424,7 @@ export class BlockHandleController {
                     input.clientX <= rect.right + SLOP_X &&
                     input.clientY >= rect.top - SLOP_Y &&
                     (input.clientY <= rect.bottom + SLOP_Y || endsDocument(target)) &&
-                    !this.#overOtherColumn(target, input.clientX) &&
+                    !this.drop.overOtherColumn(target, input.clientX) &&
                     !overOtherRow(node, input, (over) => !this.edytor.idToBlock.get(over.dataset.edytorId ?? '')?.isContainer));
             },
             onDragEnter: show,
@@ -466,138 +461,6 @@ export class BlockHandleController {
         });
         this.registered.set(node, cleanup);
     }
-    /**
-     * 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) {
-        const style = root.ownerDocument.defaultView?.getComputedStyle(root);
-        const rect = root.getBoundingClientRect();
-        const px = (value) => parseFloat(value ?? '') || 0;
-        const start = rect.left + root.clientLeft + px(style?.paddingLeft);
-        const end = rect.right - px(style?.borderRightWidth) - px(style?.paddingRight);
-        const width = this.handle?.isConnected ? this.handle.getBoundingClientRect().width : 0;
-        return { start, end, handles: width > 0 ? width : HANDLE_COLUMN, reach: dropReach(style) };
-    }
-    /** Whether `x` is in the handle column left of the editor's blocks (`gutter`): the page target's. */
-    #inHandleColumn(x) {
-        const root = this.edytor.node;
-        return !!root && marginAt(x, this.gutter(root))?.zone === 'handles';
-    }
-    /**
-     * 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(source, { clientX: x, clientY: y }) {
-        const root = this.edytor.node;
-        if (!root)
-            return undefined;
-        const box = root.getBoundingClientRect();
-        if (y < box.top || y > box.bottom)
-            return undefined;
-        const gutter = this.gutter(root);
-        const zone = marginAt(x, gutter);
-        if (!zone)
-            return undefined;
-        const right = zone.side === 'right';
-        const band = zone.zone === 'beside' && this.layouts;
-        const edge = right ? gutter.end - 1 : gutter.start + 1;
-        const hits = root.ownerDocument.elementsFromPoint?.(edge, y) ?? [];
-        const hit = hits.find((at) => {
-            const block = at.closest('[data-edytor-block="true"]');
-            return block && root.contains(block) && this.targets.has(block);
-        });
-        const node = hit?.closest('[data-edytor-block="true"]');
-        const target = node && this.targets.get(node);
-        // Between two rows where the margin reorders (a margin, a layout's
-        // edge), the reorder shown stays, as a block's sticky slop keeps it.
-        const shown = !band && this.indicator.target === root.ownerDocument.body;
-        const held = shown ? this.indicator.placement : null;
-        const stay = held && !isBeside(held.position) ? held : undefined;
-        if (!node || !target)
-            return stay;
-        const { facade } = this.edytor;
-        let row = this.rowAt(source, target, node, { clientX: edge, clientY: y });
-        // Over a layout's edge, its first or last column's row at that height.
-        if (facade.isLayout(row.id)) {
-            const items = row.children.filter((item) => item.node && this.targets.has(item.node));
-            const rect = (right ? items.at(-1) : items[0])?.node?.getBoundingClientRect();
-            if (!rect || rect.width === 0)
-                return undefined;
-            const inner = right ? rect.right - 1 : rect.left + 1;
-            row = this.rowAt(source, target, node, { clientX: inner, clientY: y });
-        }
-        if (facade.isLayout(row.id) || !row.node)
-            return stay;
-        if (band) {
-            const aside = this.beside(source, row, { clientX: right ? Infinity : -Infinity, clientY: y }, zone.side);
-            // A band the document refuses shows nothing; a row offering none (a
-            // nested row on the left, a layout that would stack) reorders.
-            if (aside !== undefined)
-                return aside ?? undefined;
-        }
-        const rect = ownRow(row.node);
-        if (right) {
-            const at = { clientX: Math.min(x, rect.right - 1), clientY: y };
-            return this.pick(source, this.halves(source, row, at, rect)) ?? undefined;
-        }
-        return this.reorder(source, row, { clientX: x, clientY: y }) ?? 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(source, row, input, rect, plain = false) {
-        const zones = this.zones(source, row, input);
-        const [before, after] = [zones.before, zones.after].map((half) => plain ? half.filter((placement) => placement.position !== 'inside') : half);
-        return input.clientY < rect.top + rect.height / 2 ? [before, after] : [after, before];
-    }
-    /**
-     * 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(source, halves) {
-        const fits = this.fits(source);
-        const placement = halves.flat().find(fits);
-        return placement ? { ...placement, blocked: !halves[0].some(fits) } : 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(source, row, input) {
-        const fits = this.fits(source);
-        let halves = this.halves(source, row, input, ownRow(row.node), true);
-        for (let at = row.parent; !halves[0].some(fits) && at?.node && !at.isRoot && at.isContainer; at = at.parent)
-            halves = this.halves(source, at, input, at.node.getBoundingClientRect(), true);
-        return this.pick(source, halves);
-    }
     /**
      * Alt+arrow: one step for the blocks a drag of this handle moves. A text
      * range over them stays, as Mod+Shift+arrow keeps it; else they end
@@ -672,227 +535,13 @@ export class BlockHandleController {
         const blocks = selection.selectedBlocks.size ? [source] : this.covered(source);
         selection.select(blockSelection(blocks.map((block) => block.id)));
     }
-    /** Whether the drag of `source` may land at a placement. */
-    fits = (source) => ({ target, position }) => this.edytor.canMove({ blocks: this.moving(source), target, position });
-    /**
-     * 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(source, target, node, { clientX, clientY }) {
-        const lift = (row) => this.emptied(source, row);
-        if (clientY < getOwnRowBottom(node))
-            return lift(target);
-        const { facade } = this.edytor;
-        let row = target;
-        let aside = null;
-        // In document order, rows start lower and lower (within a column): measure
-        // none below the pointer, none a closed toggle hides (each read would force
-        // a layout), and nothing in a column the pointer is not over.
-        for (const inner of node.querySelectorAll('[data-edytor-block="true"]')) {
-            if (aside?.contains(inner))
-                continue;
-            const block = this.targets.get(inner);
-            if (!block || inner.closest(HIDDEN))
-                continue;
-            const rect = inner.getBoundingClientRect();
-            if (facade.isLayoutItem(block.id) && (clientX < rect.left || clientX > rect.right)) {
-                aside = inner;
-                continue;
-            }
-            if (rect.top > clientY)
-                break;
-            if (rect.height > 0)
-                row = block;
-        }
-        return lift(row);
-    }
-    /** Whether the document has a layout kind: only then are there beside placements. */
-    get layouts() {
-        for (const definition of this.edytor.blocks.values())
-            if (definition.layout)
-                return true;
-        return false;
-    }
-    /**
-     * 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) {
-        return this.edytor.idToBlock.get(this.edytor.facade.besideAt(block.id)) ?? block;
-    }
-    /** The item (and its layout) a beside placement at `outer` (`besideOf`) adds a column beside. */
-    layoutOf(outer) {
-        const { facade } = this.edytor;
-        const item = facade.isLayoutItem(outer.id)
-            ? outer
-            : outer.parent && !outer.parent.isRoot && facade.isLayoutItem(outer.parent.id)
-                ? outer.parent
-                : null;
-        return item ? { item, layout: item.parent ?? 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, x) {
-        const { facade } = this.edytor;
-        for (let at = block; at && !at.isRoot; at = at.parent) {
-            if (!facade.isLayoutItem(at.id))
-                continue;
-            const item = at;
-            const over = item.parent?.children.some((other) => {
-                const rect = other !== item ? other.node?.getBoundingClientRect() : undefined;
-                return rect !== undefined && rect.width > 0 && x >= rect.left && x <= rect.right;
-            });
-            if (over)
-                return true;
-        }
-        return false;
-    }
-    /**
-     * 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(source, row, { clientX: x, clientY: y }, band) {
-        if (!row.node || !this.layouts)
-            return undefined;
-        if (this.carrier(source, row))
-            return undefined;
-        const { facade } = this.edytor;
-        let placement;
-        if (facade.isLayout(row.id)) {
-            const rect = row.node.getBoundingClientRect();
-            if (y < rect.top || y > rect.bottom || stacks(rect.width))
-                return undefined;
-            const items = row.children.filter((item) => item.node && this.targets.has(item.node));
-            for (const [index, item] of items.entries()) {
-                const next = items[index + 1]?.node?.getBoundingClientRect();
-                const own = item.node.getBoundingClientRect();
-                if (next && x >= own.right && x <= next.left)
-                    placement = { target: item, node: item.node, position: 'right' };
-            }
-        }
-        else {
-            const rect = ownRow(row.node);
-            if (y < rect.top || y > rect.bottom)
-                return undefined;
-            const outer = this.besideOf(row);
-            const width = (this.layoutOf(outer)?.layout ?? outer).node?.getBoundingClientRect().width;
-            if (width === undefined || stacks(width))
-                return undefined;
-            // A container's item (a list's) stands at its container's level, as the
-            // document resolves it (`besideAt`): left of a root list's item is left of the list.
-            let at = row;
-            while (at.parent &&
-                !at.parent.isRoot &&
-                at.parent.isContainer &&
-                !facade.isLayoutItem(at.parent.id))
-                at = at.parent;
-            const parent = at.parent;
-            const level = !parent || parent.isRoot || facade.isLayoutItem(parent.id);
-            if (band === 'right' ||
-                (!band && x >= rect.right - Math.max(RIGHT_BAND_MIN, rect.width * RIGHT_BAND)))
-                placement = { target: row, node: row.node, position: 'right' };
-            else if (level &&
-                (band === 'left' ||
-                    (!band && x < rect.left && x >= rect.left - SLOP_X && x >= this.inside(rect.left))))
-                placement = { target: row, node: row.node, position: 'left' };
-        }
-        if (!placement)
-            return undefined;
-        return this.fits(source)(placement) ? placement : null;
-    }
-    /** Where the editor's blocks start (`gutter`), or `fallback` without a host. */
-    inside(fallback) {
-        const root = this.edytor.node;
-        return root ? this.gutter(root).start : fallback;
-    }
-    /** The children a block shows: none for a closed toggle's, or a container's items. */
-    shown(block) {
-        return block.isContainer
-            ? []
-            : block.children.filter((child) => child.node && this.targets.has(child.node) && !hidden(child));
-    }
-    /**
-     * 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(source, row) {
+    /** The drag of `source`: the blocks it moves, and the placements the document takes for them. */
+    #drag(source) {
         const group = this.moving(source);
-        const parent = this.carrier(source, row)?.parent;
-        if (!parent?.node || parent.isRoot || !this.targets.has(parent.node))
-            return row;
-        const shown = this.shown(parent);
-        return shown.length && shown.every((child) => group.includes(child)) ? parent : row;
-    }
-    /**
-     * 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(source, row, { clientX, clientY }) {
-        if (this.carrier(source, row))
-            return { before: [], after: [] };
-        const group = this.moving(source);
-        const at = (target, position) => target?.node ? [{ target, node: target.node, position }] : [];
-        const before = at(row, 'before');
-        const shown = this.shown(row);
-        const first = shown.find((child) => !group.includes(child));
-        if (first)
-            return { before, after: at(first, 'before') };
-        // A group moved out from under its parent leaves the block before it last.
-        const next = (block) => {
-            let next = block.nextBlock;
-            while (next && group.includes(next))
-                next = next.nextBlock;
-            return next;
+        return {
+            group,
+            fits: ({ target, position }) => this.edytor.canMove({ blocks: group, target, position })
         };
-        const levels = [row];
-        for (let level = row; !next(level) && level.parent?.node && !level.parent.isRoot;)
-            levels.push((level = level.parent));
-        const distance = (level) => Math.abs(column(level) - clientX);
-        const after = levels
-            .sort((a, b) => distance(a) - distance(b))
-            .flatMap((level) => at(level, 'after'));
-        const stays = shown.length > 0 && group.every((moved) => moved.parent === row);
-        const inside = stays ? [] : at(row, 'inside');
-        if (overEmptyBody(row.node, clientY))
-            return { before: [...inside, ...before], after: [...inside, ...after] };
-        const nests = clientX > column(row) + nestIndent(row.node);
-        return { before, after: nests ? [...inside, ...after] : [...after, ...inside] };
     }
     /**
      * The placement a drop target record offers: the page's margins
@@ -902,20 +551,13 @@ export class BlockHandleController {
      * live.
      */
     placement(record, source, input) {
+        const drag = this.#drag(source);
         if (record.data[MARGIN])
-            return this.margin(source, input) ?? false;
+            return this.drop.margin(drag, input) ?? false;
         const row = this.edytor.idToBlock.get(record.data[ROW]);
         if (!row?.node)
             return null;
-        const aside = this.beside(source, row, input);
-        if (aside !== undefined)
-            return aside ?? false;
-        const { before, after } = this.zones(source, row, input);
-        return this.pick(source, record.data[BEFORE] ? [before, after] : [after, before]);
-    }
-    /** The dragged block that is `row` or holds it: its row offers nothing (it moves with the drag). */
-    carrier(source, row) {
-        return this.moving(source).find((moved) => moved === row || row.isChildOf(moved));
+        return this.drop.at(drag, row, input, Boolean(record.data[BEFORE]));
     }
     /** The block our drag moves from (none in a read-only view). */
     #getDragSource(data) {

package/dist/plugins/blockHandles/BlockHandles.svelte

@@ -10,7 +10,7 @@
 	import type { BlockHandleController } from './BlockHandleController.svelte.js';
 	import { gapBefore, handleSpan } from '../columns/gaps.js';
 	import { renderSkipped, rendered } from '../../surface/overlay.js';
-	import { getOwnRowBottom } from './geometry.js';
+	import { getOwnRowBottom } from '../../dnd/geometry.js';
 
 	/**
 	 * The handles, in the overlay: one per registered movable block that
@@ -201,14 +201,15 @@
 		pointer-events: none;
 	}
 
-	/* Over a gap between two columns (one hit rule, the handles'): the handle
-	 * spans the gap right of the column resize band, its `+` (compact) and its
-	 * grip together flush with its block (Notion's "+ ⋮⋮"), and its box takes
-	 * the pointer at its block's whole row, shown or not — a pointer there
-	 * hovers the block, so its grip is reached from any side. The band is the
-	 * gap's left part (`columns/gaps.ts`, one measurement): at the default
-	 * 46px gap (10 + 18 + 18) neither button is under it, and where its guide
-	 * shows a press resizes. */
+	/* Over a gap between two columns (one hit rule, the handles'): the handle's
+	 * box spans the gap right of the column resize band, centered in the gap
+	 * (`columns/gaps.ts`, one measurement), and takes the pointer at its
+	 * block's whole row, shown or not — a pointer there hovers the block, so
+	 * its grip is reached from any side. Its `+` (compact) and grip stand
+	 * together flush with its block (Notion's "+ ⋮⋮"), never shrunk: wider
+	 * than the box, the `+` reaches left under the band (the resizers' layer
+	 * is above the handles'): where the band's guide shows, at every height,
+	 * a press resizes; the `+`'s part left of the band takes its own. */
 	[data-edytor-block-handle-host][data-over-gap='true'] {
 		box-sizing: border-box;
 		width: var(--edytor-handle-gap-width, auto);
@@ -216,6 +217,10 @@
 		padding-inline-end: 0;
 	}
 
+	[data-edytor-block-handle-host][data-over-gap='true'] > :global(*) {
+		flex-shrink: 0;
+	}
+
 	[data-edytor-block-handle-host][data-over-gap='true']::before {
 		content: '';
 		position: absolute;
@@ -238,27 +243,4 @@
 			padding-inline-end: 0;
 		}
 	}
-
-	/* Where a handle's drag lands (`DropIndicator`): the bar (4px) and the nest
-	 * backdrop, placed in the overlay and shown (`data-shown`) by the plugin;
-	 * their look is a theme's (`edytor/themes/notion.css`). */
-	:global([data-edytor-drop-indicator]),
-	:global([data-edytor-drop-backdrop]) {
-		position: absolute;
-		pointer-events: none;
-	}
-
-	:global([data-edytor-drop-indicator]) {
-		z-index: 100;
-		box-sizing: border-box;
-		height: 4px;
-	}
-
-	:global([data-edytor-drop-backdrop]) {
-		z-index: 99;
-	}
-
-	:global([data-edytor-drop-backdrop]:not([data-shown='true'])) {
-		visibility: hidden;
-	}
 </style>

package/dist/plugins/blockHandles/blockHandlesPlugin.js

@@ -3,6 +3,7 @@ import { SvelteMap, SvelteSet } from 'svelte/reactivity';
 import BlockHandles from './BlockHandles.svelte';
 import { BlockHandleController } from './BlockHandleController.svelte.js';
 import { hidden } from '../../selection/visibility.js';
+import { isDropTarget } from '../../dnd/placement.js';
 import { all, listen } from '../../utils/listen.js';
 /**
  * Block handles in the overlay, created lazily: a handle mounts
@@ -123,7 +124,7 @@ export const createBlockHandlesPlugin = (options = {}) => (edytor) => {
         },
         onBlockAttached: ({ node, block }) => {
             // A table's rows move by its own row menus, its cells never (`table.fits`).
-            if (!block.movable || edytor.facade.isTableRow(block.id))
+            if (!isDropTarget(edytor, block))
                 return;
             const offDropTarget = controller.addDropTarget(node, block);
             // A layout and its columns are drop targets but have no handle (as

package/dist/plugins/code/CodeHeader.svelte

@@ -2,7 +2,7 @@
 	import { getContext } from 'svelte';
 	import type { BlockView } from '../../plugins.js';
 	import type { Edytor } from '../../edytor.svelte.js';
-	import { DEFAULT_CODE_SETTINGS, codeSettings } from './languages.js';
+	import { DEFAULT_CODE_SETTINGS } from './languages.js';
 	import { languageMenus } from './languageMenu.svelte.js';
 	import { CodeHeader } from './header.svelte.js';
 
@@ -14,8 +14,10 @@
 
 	/** The options of the view rendering it (a suggestion's preview included). */
 	const edytor = getContext<Edytor>('edytor');
-	const settings = codeSettings.get(edytor) ?? DEFAULT_CODE_SETTINGS;
-	const header = new CodeHeader(() => block, settings, languageMenus.get(edytor));
+	// The first code plugin listed owns the view's options (it draws the kind).
+	const menu = languageMenus.get(edytor);
+	const settings = menu?.settings ?? DEFAULT_CODE_SETTINGS;
+	const header = new CodeHeader(() => block, settings, menu);
 	$effect(() => header.dispose);
 </script>
 

package/dist/plugins/code/CodePlugin.svelte

@@ -13,7 +13,6 @@
 	import { codeEnglish, keywordsOf, labelsOf } from '../../labels.js';
 	import {
 		DEFAULT_CODE_SETTINGS,
-		codeSettings,
 		languageOf,
 		tokenizeCode,
 		type CodePluginOptions,
@@ -47,8 +46,9 @@
 				header: options.header,
 				menu: options.menu
 			};
-			codeSettings.set(edytor, own);
-			// The view's language list: the first code plugin listed owns it.
+			// The view's code options and language list: the first code plugin
+			// listed owns them, as it draws the kind (first listed wins); the
+			// header reads them from it.
 			if (edytor && !languageMenus.has(edytor))
 				languageMenus.set(edytor, new LanguageMenu(edytor, own));
 			const ownMenu = () => {

package/dist/plugins/code/languages.d.ts

@@ -7,7 +7,6 @@
  */
 import { type LanguageDefinition } from '@tanstack/highlight/core';
 import type { JSONText } from '../../utils/json.js';
-import type { Edytor } from '../../edytor.svelte.js';
 import type { Snippet } from 'svelte';
 import type { CodeHeader } from './header.svelte.js';
 import type { LanguageMenu } from './languageMenu.svelte.js';
@@ -68,8 +67,6 @@ export type CodeSettings = {
     menu?: Snippet<[LanguageMenu]>;
 };
 export declare const DEFAULT_CODE_SETTINGS: CodeSettings;
-/** Each view's code options, for its code blocks' header (which reads them through its view). */
-export declare const codeSettings: WeakMap<Edytor, CodeSettings>;
 /** A code block's language id: its `data.language`, else the default. */
 export declare const languageOf: (data: {
     language?: unknown;

package/dist/plugins/code/languages.js

@@ -99,7 +99,5 @@ export const DEFAULT_CODE_SETTINGS = {
     languages: CODE_LANGUAGES,
     defaultLanguage: 'javascript'
 };
-/** Each view's code options, for its code blocks' header (which reads them through its view). */
-export const codeSettings = new WeakMap();
 /** A code block's language id: its `data.language`, else the default. */
 export const languageOf = (data, { defaultLanguage }) => (typeof data?.language === 'string' && data.language ? data.language : defaultLanguage);