edytor 1.0.0-rc.2 → 1.0.0

package/dist/plugins/blockHandles/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/geometry.d.ts

@@ -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. */
@@ -26,3 +27,47 @@ export declare const ownTextRow: (node: HTMLElement) => DOMRect;
  */
 export declare const NEST_INDENT = 24;
 export declare const nestIndent: (node: HTMLElement) => number;
+/**
+ * Whether `y` is over the hint of `node`'s empty body (`body.hint`, a kind's
+ * `data-edytor-empty-body` element: an open toggle's, a callout's): a drop
+ * there goes inside the block.
+ */
+export declare const overEmptyBody: (node: HTMLElement, y: number) => boolean;
+/**
+ * How far a block drag reaches past the editor's content column (`dnd.reach`):
+ * past the handle column on the left and past the content's right edge, in
+ * px, the `--edytor-drop-reach` the root inherits, else this default.
+ */
+export declare const DROP_REACH = 240;
+/**
+ * The beside bands' share of each margin, nearest the content: within it a
+ * document with a layout kind offers the band (a new column); past it, up
+ * to the reach, the row's reorder.
+ */
+export declare const BESIDE_MARGIN = 120;
+/** Which margin of a block drag a pointer is in, and what answers there (`marginAt`). */
+export type DropMargin = {
+    side: 'left' | 'right';
+    /**
+     * `handles`: the handle column, the row's reorder; `beside`: a beside
+     * band's place (the reorder without a band to offer); `reorder`: the row's
+     * reorder.
+     */
+    zone: 'handles' | 'beside' | 'reorder';
+};
+/**
+ * Where `x` falls outside the editor's content column (`start`…`end`, its
+ * edges inside): left of it, the handle column (`handles` px wide) at any
+ * reach; past that column on the left, and past `end` on the right, the
+ * first `BESIDE_MARGIN` px (at most `reach`) a beside band's place, the rest
+ * of `reach` the reorder; `null` inside the content or past the reach
+ * (`dnd.reach`).
+ */
+export declare const marginAt: (x: number, { start, end, handles, reach }: {
+    start: number;
+    end: number;
+    handles: number;
+    reach: number;
+}) => DropMargin | null;
+/** The drop reach a style gives: its `--edytor-drop-reach` in px (0 or more), else `DROP_REACH`. */
+export declare const dropReach: (style: CSSStyleDeclaration | undefined) => number;

package/dist/plugins/blockHandles/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();
 };
 /**
@@ -36,3 +37,49 @@ export const nestIndent = (node) => {
         .trim();
     return value?.endsWith('px') ? parseFloat(value) : NEST_INDENT;
 };
+/**
+ * Whether `y` is over the hint of `node`'s empty body (`body.hint`, a kind's
+ * `data-edytor-empty-body` element: an open toggle's, a callout's): a drop
+ * there goes inside the block.
+ */
+export const overEmptyBody = (node, y) => {
+    const rect = own(node, '[data-edytor-empty-body]')?.getBoundingClientRect();
+    return !!rect && rect.height > 0 && y >= rect.top && y <= rect.bottom;
+};
+/**
+ * How far a block drag reaches past the editor's content column (`dnd.reach`):
+ * past the handle column on the left and past the content's right edge, in
+ * px, the `--edytor-drop-reach` the root inherits, else this default.
+ */
+export const DROP_REACH = 240;
+/**
+ * The beside bands' share of each margin, nearest the content: within it a
+ * document with a layout kind offers the band (a new column); past it, up
+ * to the reach, the row's reorder.
+ */
+export const BESIDE_MARGIN = 120;
+/**
+ * Where `x` falls outside the editor's content column (`start`…`end`, its
+ * edges inside): left of it, the handle column (`handles` px wide) at any
+ * reach; past that column on the left, and past `end` on the right, the
+ * first `BESIDE_MARGIN` px (at most `reach`) a beside band's place, the rest
+ * of `reach` the reorder; `null` inside the content or past the reach
+ * (`dnd.reach`).
+ */
+export const marginAt = (x, { start, end, handles, reach }) => {
+    if (x >= start && x <= end)
+        return null;
+    if (x < start && x >= start - handles)
+        return { side: 'left', zone: 'handles' };
+    const side = x < start ? 'left' : 'right';
+    const out = side === 'left' ? start - handles - x : x - end;
+    if (out > reach)
+        return null;
+    return { side, zone: out <= Math.min(BESIDE_MARGIN, reach) ? 'beside' : 'reorder' };
+};
+/** The drop reach a style gives: its `--edytor-drop-reach` in px (0 or more), else `DROP_REACH`. */
+export const dropReach = (style) => {
+    const value = style?.getPropertyValue('--edytor-drop-reach').trim();
+    const px = value?.endsWith('px') ? parseFloat(value) : NaN;
+    return Number.isFinite(px) && px >= 0 ? px : DROP_REACH;
+};

package/dist/plugins/blockMenu/BlockMenuController.svelte.d.ts

@@ -1,22 +1,24 @@
 import type { Snippet } from 'svelte';
+import type { Attachment } from 'svelte/attachments';
 import type { EditorCommand } from '../../plugins.js';
 import type { Block } from '../../block/block.svelte.js';
 import type { Edytor } from '../../edytor.svelte.js';
 import { type KindRow } from '../../kinds.js';
-import type { Popup } from '../../surface/popups.svelte.js';
-import { type BlockMenuLabels, type PartialLabels } from '../../labels.js';
 import { BLOCK_COLORS, type BlockColorField } from '../../block/colors.js';
 export type BlockMenuOptions = {
     /** A link to the block, for "Copy link to block" (the row is hidden without it). */
     linkTo?: (block: Block) => string;
     /**
-     * Replace the menu; it renders while `controller.isOpen`, placed beside
-     * the handle (mark your panel `data-edytor-block-menu` for placement).
-     * The controller runs every action; `close()` returns the caret.
+     * The menu's markup and its words; it renders while `controller.isOpen`, placed beside
+     * the handle (mark your panel `data-edytor-block-menu` for placement;
+     * without it, nothing shows).
+     * The controller runs every action; `close()` returns the caret. Keep
+     * the keyboard and the ARIA with its attachments: `{@attach
+     * controller.keys}` on the field that holds the keyboard, `{@attach
+     * controller.popup}` on the menu, `{...controller.option(index)}` on each
+     * row, `{@attach controller.flyoutMenu}` on an open flyout.
      */
     menu?: Snippet<[BlockMenuController]>;
-    /** The words the menu shows (its actions, search field, headings), over the English ones. */
-    labels?: PartialLabels<'blockMenu'>;
 };
 export type BlockMenuAction = {
     id: string;
@@ -35,7 +37,7 @@ export type BlockMenuAction = {
 export type BlockMenuColor = {
     /** `color.<name>` or `background.<name>` (`color.default`, `background.default`). */
     id: string;
-    /** Its words in the menu's labels (`colorText`, `colorBackground`): "Red text", "Red background", "Default text". */
+    /** Its words in the view's labels (`colorText`, `colorBackground`): "Red text", "Red background", "Default text". */
     label: string;
     field: BlockColorField;
     value: (typeof BLOCK_COLORS)[number] | null;
@@ -53,7 +55,7 @@ export declare const colorQueryRow: (row: BlockMenuColor) => {
  * listed once a query names them (`searchOnly`): each paints the caret's
  * block, as the block menu's Color does (`setBlockColor`).
  */
-export declare const colorCommands: (edytor: Edytor, labels: BlockMenuLabels) => EditorCommand[];
+export declare const colorCommands: (edytor: Edytor) => EditorCommand[];
 export declare class BlockMenuController {
     #private;
     private edytor;
@@ -69,13 +71,12 @@ export declare class BlockMenuController {
     blocks: Block[];
     anchor: HTMLElement | null;
     query: string;
-    selectedIndex: number;
+    /** The keyboard's row. */
+    index: number;
     /** The open flyout: the kinds (`turn`), the colours (`color`), or none. */
     flyout: false | "color" | "turn";
     /** The keyboard's row in the open flyout. */
     flyoutIndex: number;
-    /** The words the menu shows (the plugin's `labels`): read them in a custom `menu`. */
-    readonly labels: BlockMenuLabels;
     constructor(edytor: Edytor, options?: BlockMenuOptions);
     get isOpen(): boolean;
     /** The editor is readonly: the menu closes. */
@@ -85,8 +86,41 @@ export declare class BlockMenuController {
     get flyoutId(): string;
     /** A row's element id (page-unique; a flyout's with `flyout`), for `aria-activedescendant`. */
     rowId: (row: BlockMenuAction | KindRow | BlockMenuColor, flyout?: boolean) => string;
-    /** Publish the open menu to the view's root (`edytor.popups`), or withdraw it with `null`. */
-    publish: (popup: Popup | null) => void;
+    /**
+     * The menu element (`{@attach controller.popup}`, the one with the rows):
+     * it takes the menu's id, its `menu` role and name unless it has its
+     * own, keeps the focus where it is on a press (a field takes its own),
+     * and is published to the view's root (`edytor.popups`) while it is in
+     * the page, the grip that opened it told so.
+     */
+    popup: Attachment<HTMLElement>;
+    /**
+     * An open flyout (`{@attach controller.flyoutMenu}`, named by your
+     * markup): its id, `menu` role, the overlay's placement beside the menu,
+     * and presses that keep the focus.
+     */
+    flyoutMenu: Attachment<HTMLElement>;
+    /**
+     * The element that holds the keyboard (`{@attach controller.keys}`: the
+     * search field): focused when it mounts, it takes every key of the menu
+     * (the arrows, Home and End walk the rows, → opens a row's flyout and ←
+     * closes it, Enter runs the row, Delete removes the blocks while the
+     * query is empty, Escape closes the flyout, then the menu), and names
+     * the open menu and its highlighted row (`aria-controls`,
+     * `aria-activedescendant`, once that row is in the page).
+     */
+    keys: Attachment<HTMLElement>;
+    /**
+     * The attachment of the row at `index` (of the open flyout's rows with
+     * `flyout`): `{@attach controller.option(index)}` on its element.
+     * Its id, its role (`menuitem`, a switch's `menuitemcheckbox`, a colour's
+     * `menuitemradio` with its ✓ as `aria-checked`, a flyout's opener with
+     * `aria-haspopup` and `aria-expanded`); the keyboard's row scrolls into
+     * view. Its look is the markup's (`index`, `flyoutIndex`).
+     */
+    option: (index: number, flyout?: boolean) => Attachment<HTMLElement>;
+    /** The search field typed in: the rows match `query`, the first one highlighted, no flyout open. */
+    search(query: string): void;
     /** What Delete and Turn into act on: `blocks`, a list or a code block with its subtree (`selectedMembers`). */
     get members(): Block[];
     /** The Turn into rows: the kinds, then the commands that turn `blocks` into something (`turnCommands`). */
@@ -102,11 +136,6 @@ export declare class BlockMenuController {
     /** The row naming the open block. */
     get currentKind(): KindRow | undefined;
     get actions(): BlockMenuAction[];
-    /**
-     * With a query, the kinds it names join the list (Notion's "Turn into"
-     * results), matched as the slash menu matches them (`matchesQuery`).
-     */
-    get matchingKinds(): KindRow[];
     /**
      * With a query, the colours it names join the list after the kinds
      * (Notion's "Color" results: `red` lists "Red text" and "Red background"),
@@ -130,13 +159,13 @@ export declare class BlockMenuController {
      * closes and the blocks stay selected, as in Notion.
      */
     paint(row: BlockMenuColor): void;
-    duplicate(block: Block): void;
     /**
-     * Duplicate several blocks as one undo step, each copy after its block (a
-     * block inside another of them is copied with it; a vetoed one is skipped,
-     * `dispatcher.each`); the copies are selected.
+     * Duplicate `blocks` as one undo step, each copy after its block (a
+     * block inside another of them is copied with it; a vetoed one is
+     * skipped, `dispatcher.each`); the copies are selected (`select`), else
+     * the first copy takes the caret (refused: its block keeps it).
      */
-    duplicateAll(blocks: Block[]): void;
+    duplicate(blocks: Block[], select: boolean): void;
     /**
      * Delete the open blocks' `members` (a list with its items) as the
      * keyboard's block delete does (`deleteSelectedBlocks`):
@@ -152,10 +181,12 @@ export declare class BlockMenuController {
      */
     get linked(): Block | undefined;
     copyLink(): Promise<void>;
-    /** Run the keyboard row (or open its flyout). */
-    runSelected(): void;
-    /** Run the open flyout's keyboard row: convert to its kind, or paint its colour. */
-    runFlyout(): void;
+    /**
+     * Run a row of the menu or of its open flyout (a click; Enter runs the
+     * keyboard's): paint a colour, convert to a kind, open an action's
+     * flyout or run it.
+     */
+    run(row: BlockMenuAction | KindRow | BlockMenuColor | undefined): void;
     /**
      * Open a flyout on its first row (keyboard or mouse): the "Turn into"
      * kinds (default) or the colours; that flyout already open stays as it