@ecsplico/editor 3.6.0 → 4.0.0

package/dist/features/block-ui/feature.d.ts

@@ -11,8 +11,9 @@ export interface BlockUiUi<C> {
  * Block-level UI beside the editor content: the drag handle (upstream `@tiptap/extension-drag-handle`) with hover
  * targeting, and the actions of the targeted block (features' and host block actions, `BlockActionsOverlay`), on the
  * hover bar, the toolbar of the block holding the selection, or both (`BlockUiOptions.actions`; hover by default).
- * Also adds block-range selection (`NodeRange`: Mod+drag, Shift+↑/↓). Composite chrome (`editorChrome` nodes) targets its
- * parent block.
+ * Also adds block-range selection (`NodeRange`: Mod+drag, Shift+↑/↓). The target is the outermost block below the nearest
+ * block container (`outerBlockAt`): a list item or a quote paragraph targets its list or quote; composite chrome
+ * (`editorChrome` nodes) targets its parent block.
  *
  * Opt-in: the simple editor has none of it. Installing a binding also bundles the drag handle's transitive collaboration
  * support code (its upstream package imports `@tiptap/extension-collaboration` and `y-tiptap`), even without a live

package/dist/features/block-ui/feature.js

@@ -4,8 +4,9 @@ import { NodeRange } from "@tiptap/extension-node-range";
 * Block-level UI beside the editor content: the drag handle (upstream `@tiptap/extension-drag-handle`) with hover
 * targeting, and the actions of the targeted block (features' and host block actions, `BlockActionsOverlay`), on the
 * hover bar, the toolbar of the block holding the selection, or both (`BlockUiOptions.actions`; hover by default).
-* Also adds block-range selection (`NodeRange`: Mod+drag, Shift+↑/↓). Composite chrome (`editorChrome` nodes) targets its
-* parent block.
+* Also adds block-range selection (`NodeRange`: Mod+drag, Shift+↑/↓). The target is the outermost block below the nearest
+* block container (`outerBlockAt`): a list item or a quote paragraph targets its list or quote; composite chrome
+* (`editorChrome` nodes) targets its parent block.
 *
 * Opt-in: the simple editor has none of it. Installing a binding also bundles the drag handle's transitive collaboration
 * support code (its upstream package imports `@tiptap/extension-collaboration` and `y-tiptap`), even without a live

package/dist/features/block-ui/feature.js.map

@@ -1 +1 @@
-{"version":3,"file":"feature.js","names":[],"sources":["../../../src/features/block-ui/feature.ts"],"sourcesContent":["import { NodeRange } from '@tiptap/extension-node-range'\nimport type { BlockUiOptions, EditorFeature } from '../../core'\n\n// The option types live in `core` (the editor entry carries them to the overlay); this is their public home.\nexport type { BlockActionSurface, BlockUiOptions } from '../../core'\n\n/** What a framework binding supplies to the block-ui feature. */\nexport interface BlockUiUi<C> {\n  /** The block UI of an editor (drag handle, permanent handles, hover actions); mounted beside the editor content. */\n  overlay: C\n}\n\n/**\n * Block-level UI beside the editor content: the drag handle (upstream `@tiptap/extension-drag-handle`) with hover\n * targeting, and the actions of the targeted block (features' and host block actions, `BlockActionsOverlay`), on the\n * hover bar, the toolbar of the block holding the selection, or both (`BlockUiOptions.actions`; hover by default).\n * Also adds block-range selection (`NodeRange`: Mod+drag, Shift+↑/↓). Composite chrome (`editorChrome` nodes) targets its\n * parent block.\n *\n * Opt-in: the simple editor has none of it. Installing a binding also bundles the drag handle's transitive collaboration\n * support code (its upstream package imports `@tiptap/extension-collaboration` and `y-tiptap`), even without a live\n * collaboration session.\n *\n * The overlay is a component type the surface mounts without props, so `options` reach it through `EditorFeature.blockUi`\n * and the editor entry (`editorEntryOf(editor)?.blockUi`).\n */\nexport function blockUiFeatureCore<C>(ui: BlockUiUi<C>, options: BlockUiOptions = {}): EditorFeature<C> {\n  return {\n    id: 'block-ui',\n    dimension: 'interaction',\n    extensions: () => [NodeRange],\n    blockUi: options,\n    overlays: [ui.overlay],\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;AA0BA,SAAgB,mBAAsB,IAAkB,UAA0B,CAAC,GAAqB;CACtG,OAAO;EACL,IAAI;EACJ,WAAW;EACX,kBAAkB,CAAC,SAAS;EAC5B,SAAS;EACT,UAAU,CAAC,GAAG,OAAO;CACvB;AACF"}
+{"version":3,"file":"feature.js","names":[],"sources":["../../../src/features/block-ui/feature.ts"],"sourcesContent":["import { NodeRange } from '@tiptap/extension-node-range'\nimport type { BlockUiOptions, EditorFeature } from '../../core'\n\n// The option types live in `core` (the editor entry carries them to the overlay); this is their public home.\nexport type { BlockActionSurface, BlockUiOptions } from '../../core'\n\n/** What a framework binding supplies to the block-ui feature. */\nexport interface BlockUiUi<C> {\n  /** The block UI of an editor (drag handle, permanent handles, hover actions); mounted beside the editor content. */\n  overlay: C\n}\n\n/**\n * Block-level UI beside the editor content: the drag handle (upstream `@tiptap/extension-drag-handle`) with hover\n * targeting, and the actions of the targeted block (features' and host block actions, `BlockActionsOverlay`), on the\n * hover bar, the toolbar of the block holding the selection, or both (`BlockUiOptions.actions`; hover by default).\n * Also adds block-range selection (`NodeRange`: Mod+drag, Shift+↑/↓). The target is the outermost block below the nearest\n * block container (`outerBlockAt`): a list item or a quote paragraph targets its list or quote; composite chrome\n * (`editorChrome` nodes) targets its parent block.\n *\n * Opt-in: the simple editor has none of it. Installing a binding also bundles the drag handle's transitive collaboration\n * support code (its upstream package imports `@tiptap/extension-collaboration` and `y-tiptap`), even without a live\n * collaboration session.\n *\n * The overlay is a component type the surface mounts without props, so `options` reach it through `EditorFeature.blockUi`\n * and the editor entry (`editorEntryOf(editor)?.blockUi`).\n */\nexport function blockUiFeatureCore<C>(ui: BlockUiUi<C>, options: BlockUiOptions = {}): EditorFeature<C> {\n  return {\n    id: 'block-ui',\n    dimension: 'interaction',\n    extensions: () => [NodeRange],\n    blockUi: options,\n    overlays: [ui.overlay],\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;AA2BA,SAAgB,mBAAsB,IAAkB,UAA0B,CAAC,GAAqB;CACtG,OAAO;EACL,IAAI;EACJ,WAAW;EACX,kBAAkB,CAAC,SAAS;EAC5B,SAAS;EACT,UAAU,CAAC,GAAG,OAAO;CACvB;AACF"}

package/dist/features/block-ui/handle-geometry.js

@@ -1,23 +1,13 @@
-import { isChromeNode } from "../../core/schema/node-flags.js";
+import { isBlockContainer, isChromeNode } from "../../core/schema/node-flags.js";
 //#region src/features/block-ui/handle-geometry.ts
-const LIST_ITEMS = ["listItem", "taskItem"];
-const TABLE_STRUCTURE = [
-	"tableRow",
-	"tableCell",
-	"tableHeader"
-];
 /** Whether a block shows its own kind icon (a composite's `.composite__toggle`): the icon is its drag handle, so it gets no standard one. */
-function hasKindIcon(dom) {
+function hasBlockTypeIcon(dom) {
 	return dom.querySelector(":scope > .composite__toggle") !== null;
 }
-function gutterShiftOf(node, dom) {
-	const list = node.type.name === "listItem" ? dom.parentElement : null;
-	return list ? dom.getBoundingClientRect().left - list.getBoundingClientRect().left : 0;
-}
-/** Left edge of the handle column of the block `node` rendered as `dom` (the block's own left edge when it has no handle). */
-function handleLeftOf(node, dom, handleWidth) {
+/** Left edge of the handle column of the block rendered as `dom` (the block's own left edge when it has no handle). */
+function handleLeftOf(dom, handleWidth) {
 	const left = dom.getBoundingClientRect().left;
-	return hasKindIcon(dom) ? left : left - handleWidth - gutterShiftOf(node, dom);
+	return hasBlockTypeIcon(dom) ? left : left - handleWidth;
 }
 function firstLineCenterShift(dom, referenceTop, handleHeight) {
 	const textblock = dom.matches("p, h1, h2, h3, h4, h5, h6, pre") ? dom : dom.querySelector("p, h1, h2, h3, h4, h5, h6, pre");
@@ -27,19 +17,18 @@ function firstLineCenterShift(dom, referenceTop, handleHeight) {
 	return textblock.getBoundingClientRect().top + Number.parseFloat(style.paddingTop) - referenceTop + (lineHeight - handleHeight) / 2;
 }
 /**
-* The blocks that get a permanent handle (`blocks.dragHandle: 'always'`): every block the hover handle can target, at any
-* depth, in document order. Not eligible, like for the hover handle: inline content, composite chrome (it stands for
-* its composite), table rows and cells, content of table headers, list wrappers (their items are), and the first block
-* of a list item (the item is). Blocks with a kind icon have the icon as their handle.
+* The blocks that get a permanent handle (`blocks.dragHandle: 'always'`): every block the hover handle can target
+* (`outerBlockRule`), at any depth, in document order: a block directly below a block container (the document or a
+* Typed block's body). Not eligible: inline content, Typed block chrome (it stands for its Typed block), and everything
+* inside a list, quote or table (the list, quote or table is the block). Blocks with a kind icon have the icon as their handle.
 */
 function handleBlocksOf(view) {
 	const blocks = [];
-	view.state.doc.descendants((node, pos, parent, index) => {
+	view.state.doc.descendants((node, pos, parent) => {
 		if (node.isInline || isChromeNode(node)) return false;
 		const dom = view.nodeDOM(pos);
 		if (!(dom instanceof HTMLElement)) return;
-		if (!(TABLE_STRUCTURE.includes(node.type.name) || parent !== null && parent.type.name === "tableHeader" || node.firstChild !== null && LIST_ITEMS.includes(node.firstChild.type.name) || index === 0 && parent !== null && LIST_ITEMS.includes(parent.type.name)) && !hasKindIcon(dom)) blocks.push({
-			node,
+		if (parent !== null && isBlockContainer(parent) && !hasBlockTypeIcon(dom)) blocks.push({
 			pos,
 			dom
 		});
@@ -47,6 +36,6 @@ function handleBlocksOf(view) {
 	return blocks;
 }
 //#endregion
-export { firstLineCenterShift, gutterShiftOf, handleBlocksOf, handleLeftOf, hasKindIcon };
+export { firstLineCenterShift, handleBlocksOf, handleLeftOf, hasBlockTypeIcon };
 
 //# sourceMappingURL=handle-geometry.js.map

package/dist/features/block-ui/handle-geometry.js.map

@@ -1 +1 @@
-{"version":3,"file":"handle-geometry.js","names":[],"sources":["../../../src/features/block-ui/handle-geometry.ts"],"sourcesContent":["import type { Node } from '@tiptap/pm/model'\nimport type { EditorView } from '@tiptap/pm/view'\nimport { isChromeNode } from '../../core/schema'\n\n// Where the drag handle sits and which blocks have one. Shared by the hover handle (`BlockUi`, upstream plugin) and the\n// permanent handles (`BlockHandles`), so both put the handle at the same place.\n\n/** Width and height of a handle: the hover handle's `size-6`. */\nexport const HANDLE_SIZE = 24\n\nconst LIST_ITEMS = ['listItem', 'taskItem']\nconst TABLE_STRUCTURE = ['tableRow', 'tableCell', 'tableHeader']\n\n/** Whether a block shows its own kind icon (a composite's `.composite__toggle`): the icon is its drag handle, so it gets no standard one. */\nexport function hasKindIcon(dom: HTMLElement): boolean {\n  return dom.querySelector(':scope > .composite__toggle') !== null\n}\n\n// The handle's right edge sits on the block's left edge. A list item's marker sits in the list's left padding, exactly\n// where that puts the handle, so for list items the handle moves further left by the list's indent and lands left of\n// the bullet.\nexport function gutterShiftOf(node: Node, dom: HTMLElement): number {\n  const list = node.type.name === 'listItem' ? dom.parentElement : null\n  return list ? dom.getBoundingClientRect().left - list.getBoundingClientRect().left : 0\n}\n\n/** Left edge of the handle column of the block `node` rendered as `dom` (the block's own left edge when it has no handle). */\nexport function handleLeftOf(node: Node, dom: HTMLElement, handleWidth: number): number {\n  const left = dom.getBoundingClientRect().left\n  return hasKindIcon(dom) ? left : left - handleWidth - gutterShiftOf(node, dom)\n}\n\n// The plugin aligns the handle's top with the block's top, which sits above the middle of the block's first text line.\n// This shift puts the handle's centre on the centre of that line, counted from `referenceTop`.\nexport function firstLineCenterShift(dom: HTMLElement, referenceTop: number, handleHeight: number): number {\n  const textblock = dom.matches('p, h1, h2, h3, h4, h5, h6, pre')\n    ? dom\n    : dom.querySelector<HTMLElement>('p, h1, h2, h3, h4, h5, h6, pre')\n  if (!textblock) return 0\n  const style = getComputedStyle(textblock)\n  const lineHeight = Number.parseFloat(style.lineHeight) || Number.parseFloat(style.fontSize) * 1.2\n  const lineTop = textblock.getBoundingClientRect().top + Number.parseFloat(style.paddingTop)\n  return lineTop - referenceTop + (lineHeight - handleHeight) / 2\n}\n\n/**\n * The blocks that get a permanent handle (`blocks.dragHandle: 'always'`): every block the hover handle can target, at any\n * depth, in document order. Not eligible, like for the hover handle: inline content, composite chrome (it stands for\n * its composite), table rows and cells, content of table headers, list wrappers (their items are), and the first block\n * of a list item (the item is). Blocks with a kind icon have the icon as their handle.\n */\nexport function handleBlocksOf(view: EditorView): { node: Node, pos: number, dom: HTMLElement }[] {\n  const blocks: { node: Node, pos: number, dom: HTMLElement }[] = []\n  view.state.doc.descendants((node, pos, parent, index) => {\n    if (node.isInline || isChromeNode(node)) return false\n    const dom = view.nodeDOM(pos)\n    if (!(dom instanceof HTMLElement)) return\n    const structural = TABLE_STRUCTURE.includes(node.type.name)\n      || (parent !== null && parent.type.name === 'tableHeader')\n      || (node.firstChild !== null && LIST_ITEMS.includes(node.firstChild.type.name))\n      || (index === 0 && parent !== null && LIST_ITEMS.includes(parent.type.name))\n    if (!structural && !hasKindIcon(dom)) blocks.push({ node, pos, dom })\n  })\n  return blocks\n}\n"],"mappings":";;AAUA,MAAM,aAAa,CAAC,YAAY,UAAU;AAC1C,MAAM,kBAAkB;CAAC;CAAY;CAAa;AAAa;;AAG/D,SAAgB,YAAY,KAA2B;CACrD,OAAO,IAAI,cAAc,6BAA6B,MAAM;AAC9D;AAKA,SAAgB,cAAc,MAAY,KAA0B;CAClE,MAAM,OAAO,KAAK,KAAK,SAAS,aAAa,IAAI,gBAAgB;CACjE,OAAO,OAAO,IAAI,sBAAsB,CAAC,CAAC,OAAO,KAAK,sBAAsB,CAAC,CAAC,OAAO;AACvF;;AAGA,SAAgB,aAAa,MAAY,KAAkB,aAA6B;CACtF,MAAM,OAAO,IAAI,sBAAsB,CAAC,CAAC;CACzC,OAAO,YAAY,GAAG,IAAI,OAAO,OAAO,cAAc,cAAc,MAAM,GAAG;AAC/E;AAIA,SAAgB,qBAAqB,KAAkB,cAAsB,cAA8B;CACzG,MAAM,YAAY,IAAI,QAAQ,gCAAgC,IAC1D,MACA,IAAI,cAA2B,gCAAgC;CACnE,IAAI,CAAC,WAAW,OAAO;CACvB,MAAM,QAAQ,iBAAiB,SAAS;CACxC,MAAM,aAAa,OAAO,WAAW,MAAM,UAAU,KAAK,OAAO,WAAW,MAAM,QAAQ,IAAI;CAE9F,OADgB,UAAU,sBAAsB,CAAC,CAAC,MAAM,OAAO,WAAW,MAAM,UAAU,IACzE,gBAAgB,aAAa,gBAAgB;AAChE;;;;;;;AAQA,SAAgB,eAAe,MAAmE;CAChG,MAAM,SAA0D,CAAC;CACjE,KAAK,MAAM,IAAI,aAAa,MAAM,KAAK,QAAQ,UAAU;EACvD,IAAI,KAAK,YAAY,aAAa,IAAI,GAAG,OAAO;EAChD,MAAM,MAAM,KAAK,QAAQ,GAAG;EAC5B,IAAI,EAAE,eAAe,cAAc;EAKnC,IAAI,EAJe,gBAAgB,SAAS,KAAK,KAAK,IAAI,KACpD,WAAW,QAAQ,OAAO,KAAK,SAAS,iBACxC,KAAK,eAAe,QAAQ,WAAW,SAAS,KAAK,WAAW,KAAK,IAAI,KACzE,UAAU,KAAK,WAAW,QAAQ,WAAW,SAAS,OAAO,KAAK,IAAI,MACzD,CAAC,YAAY,GAAG,GAAG,OAAO,KAAK;GAAE;GAAM;GAAK;EAAI,CAAC;CACtE,CAAC;CACD,OAAO;AACT"}
+{"version":3,"file":"handle-geometry.js","names":[],"sources":["../../../src/features/block-ui/handle-geometry.ts"],"sourcesContent":["import type { EditorView } from '@tiptap/pm/view'\nimport { isBlockContainer, isChromeNode } from '../../core/schema'\n\n// Where the drag handle sits and which blocks have one. Shared by the hover handle (`BlockUi`, upstream plugin) and the\n// permanent handles (`BlockHandles`), so both put the handle at the same place.\n\n/** Width and height of a handle: the hover handle's `size-6`. */\nexport const HANDLE_SIZE = 24\n\n/** Whether a block shows its own kind icon (a composite's `.composite__toggle`): the icon is its drag handle, so it gets no standard one. */\nexport function hasBlockTypeIcon(dom: HTMLElement): boolean {\n  return dom.querySelector(':scope > .composite__toggle') !== null\n}\n\n/** Left edge of the handle column of the block rendered as `dom` (the block's own left edge when it has no handle). */\nexport function handleLeftOf(dom: HTMLElement, handleWidth: number): number {\n  const left = dom.getBoundingClientRect().left\n  return hasBlockTypeIcon(dom) ? left : left - handleWidth\n}\n\n// The plugin aligns the handle's top with the block's top, which sits above the middle of the block's first text line.\n// This shift puts the handle's centre on the centre of that line, counted from `referenceTop`.\nexport function firstLineCenterShift(dom: HTMLElement, referenceTop: number, handleHeight: number): number {\n  const textblock = dom.matches('p, h1, h2, h3, h4, h5, h6, pre')\n    ? dom\n    : dom.querySelector<HTMLElement>('p, h1, h2, h3, h4, h5, h6, pre')\n  if (!textblock) return 0\n  const style = getComputedStyle(textblock)\n  const lineHeight = Number.parseFloat(style.lineHeight) || Number.parseFloat(style.fontSize) * 1.2\n  const lineTop = textblock.getBoundingClientRect().top + Number.parseFloat(style.paddingTop)\n  return lineTop - referenceTop + (lineHeight - handleHeight) / 2\n}\n\n/**\n * The blocks that get a permanent handle (`blocks.dragHandle: 'always'`): every block the hover handle can target\n * (`outerBlockRule`), at any depth, in document order: a block directly below a block container (the document or a\n * Typed block's body). Not eligible: inline content, Typed block chrome (it stands for its Typed block), and everything\n * inside a list, quote or table (the list, quote or table is the block). Blocks with a kind icon have the icon as their handle.\n */\nexport function handleBlocksOf(view: EditorView): { pos: number, dom: HTMLElement }[] {\n  const blocks: { pos: number, dom: HTMLElement }[] = []\n  view.state.doc.descendants((node, pos, parent) => {\n    if (node.isInline || isChromeNode(node)) return false\n    const dom = view.nodeDOM(pos)\n    if (!(dom instanceof HTMLElement)) return\n    if (parent !== null && isBlockContainer(parent) && !hasBlockTypeIcon(dom)) blocks.push({ pos, dom })\n  })\n  return blocks\n}\n"],"mappings":";;;AAUA,SAAgB,iBAAiB,KAA2B;CAC1D,OAAO,IAAI,cAAc,6BAA6B,MAAM;AAC9D;;AAGA,SAAgB,aAAa,KAAkB,aAA6B;CAC1E,MAAM,OAAO,IAAI,sBAAsB,CAAC,CAAC;CACzC,OAAO,iBAAiB,GAAG,IAAI,OAAO,OAAO;AAC/C;AAIA,SAAgB,qBAAqB,KAAkB,cAAsB,cAA8B;CACzG,MAAM,YAAY,IAAI,QAAQ,gCAAgC,IAC1D,MACA,IAAI,cAA2B,gCAAgC;CACnE,IAAI,CAAC,WAAW,OAAO;CACvB,MAAM,QAAQ,iBAAiB,SAAS;CACxC,MAAM,aAAa,OAAO,WAAW,MAAM,UAAU,KAAK,OAAO,WAAW,MAAM,QAAQ,IAAI;CAE9F,OADgB,UAAU,sBAAsB,CAAC,CAAC,MAAM,OAAO,WAAW,MAAM,UAAU,IACzE,gBAAgB,aAAa,gBAAgB;AAChE;;;;;;;AAQA,SAAgB,eAAe,MAAuD;CACpF,MAAM,SAA8C,CAAC;CACrD,KAAK,MAAM,IAAI,aAAa,MAAM,KAAK,WAAW;EAChD,IAAI,KAAK,YAAY,aAAa,IAAI,GAAG,OAAO;EAChD,MAAM,MAAM,KAAK,QAAQ,GAAG;EAC5B,IAAI,EAAE,eAAe,cAAc;EACnC,IAAI,WAAW,QAAQ,iBAAiB,MAAM,KAAK,CAAC,iBAAiB,GAAG,GAAG,OAAO,KAAK;GAAE;GAAK;EAAI,CAAC;CACrG,CAAC;CACD,OAAO;AACT"}

package/dist/features/block-ui/index.d.ts

@@ -1,4 +1,5 @@
 import { BlockActionSurface, BlockUiOptions } from "../../core/extension-points.js";
 import { BLOCK_CORNER_ATTR, BlockActionEntry, BlockCorner, actionSurfacesOf, blockActionsFor, blockCornerOf, effectiveTarget, sameBlock, selectedBlockOf } from "./block-actions.js";
+import { outerBlockAt, outerBlocksAt, typedBlockAround } from "./block-target.js";
 import { BlockUiUi, blockUiFeatureCore } from "./feature.js";
-export { BLOCK_CORNER_ATTR, type BlockActionEntry, type BlockActionSurface, type BlockCorner, type BlockUiOptions, type BlockUiUi, actionSurfacesOf, blockActionsFor, blockCornerOf, blockUiFeatureCore, effectiveTarget, sameBlock, selectedBlockOf };
+export { BLOCK_CORNER_ATTR, type BlockActionEntry, type BlockActionSurface, type BlockCorner, type BlockUiOptions, type BlockUiUi, actionSurfacesOf, blockActionsFor, blockCornerOf, blockUiFeatureCore, effectiveTarget, outerBlockAt, outerBlocksAt, sameBlock, selectedBlockOf, typedBlockAround };

package/dist/features/block-ui/index.js

@@ -1,3 +1,4 @@
 import { blockUiFeatureCore } from "./feature.js";
+import { outerBlockAt, outerBlocksAt, typedBlockAround } from "./block-target.js";
 import { BLOCK_CORNER_ATTR, actionSurfacesOf, blockActionsFor, blockCornerOf, effectiveTarget, sameBlock, selectedBlockOf } from "./block-actions.js";
-export { BLOCK_CORNER_ATTR, actionSurfacesOf, blockActionsFor, blockCornerOf, blockUiFeatureCore, effectiveTarget, sameBlock, selectedBlockOf };
+export { BLOCK_CORNER_ATTR, actionSurfacesOf, blockActionsFor, blockCornerOf, blockUiFeatureCore, effectiveTarget, outerBlockAt, outerBlocksAt, sameBlock, selectedBlockOf, typedBlockAround };

package/dist/features/block-ui/react/BlockHandles.d.ts

@@ -4,7 +4,7 @@ import { Editor } from "@tiptap/core";
  * The permanent drag handles (`blocks.dragHandle: 'always'`): one handle per block that the hover handle can target
  * (`handleBlocksOf`), each where the hover handle would sit for that block, dragging the block like the hover handle
  * does (`startBlockDrag`). Only blocks within a screen of the viewport get one. A nested block whose handle would cover
- * another handle on the same line (the first block of a quote, say) has none: its container's handle moves it. Hidden
+ * another handle on the same line (a nested block flush with its container, say) has none: its container's handle moves it. Hidden
  * while the editor is read-only. Positioned absolutely inside `host`, the `relative` element around the editor.
  */
 export declare function BlockHandles({ editor, host }: {

package/dist/features/block-ui/react/BlockHandles.js

@@ -1,7 +1,7 @@
 import { startBlockDrag } from "../../../core/block-drag.js";
 import { cn } from "../../../react/ui/utils.js";
 import { Icon } from "../../../react/Icon.js";
-import { firstLineCenterShift, gutterShiftOf, handleBlocksOf } from "../handle-geometry.js";
+import { firstLineCenterShift, handleBlocksOf } from "../handle-geometry.js";
 import { useEffect, useState } from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/features/block-ui/react/BlockHandles.tsx
@@ -9,7 +9,7 @@ import { jsx } from "react/jsx-runtime";
 * The permanent drag handles (`blocks.dragHandle: 'always'`): one handle per block that the hover handle can target
 * (`handleBlocksOf`), each where the hover handle would sit for that block, dragging the block like the hover handle
 * does (`startBlockDrag`). Only blocks within a screen of the viewport get one. A nested block whose handle would cover
-* another handle on the same line (the first block of a quote, say) has none: its container's handle moves it. Hidden
+* another handle on the same line (a nested block flush with its container, say) has none: its container's handle moves it. Hidden
 * while the editor is read-only. Positioned absolutely inside `host`, the `relative` element around the editor.
 */
 function BlockHandles({ editor, host }) {
@@ -32,10 +32,10 @@ function BlockHandles({ editor, host }) {
 			const originX = hostRect.left + host.clientLeft;
 			const originY = hostRect.top + host.clientTop;
 			const next = [];
-			for (const { node, pos, dom } of handleBlocksOf(editor.view)) {
+			for (const { pos, dom } of handleBlocksOf(editor.view)) {
 				const rect = dom.getBoundingClientRect();
 				if (!rect.height || rect.bottom < -window.innerHeight || rect.top > 2 * window.innerHeight) continue;
-				const left = rect.left - 24 - gutterShiftOf(node, dom) - originX;
+				const left = rect.left - 24 - originX;
 				const top = rect.top + firstLineCenterShift(dom, rect.top, 24) - originY;
 				if (!next.some((other) => Math.abs(top - other.top) < 12 && left < other.left + 24 && other.left < left + 24)) next.push({
 					pos,

package/dist/features/block-ui/react/BlockHandles.js.map

@@ -1 +1 @@
-{"version":3,"file":"BlockHandles.js","names":[],"sources":["../../../../src/features/block-ui/react/BlockHandles.tsx"],"sourcesContent":["import type { Editor } from '@tiptap/core'\nimport { type DragEvent, useEffect, useState } from 'react'\nimport { startBlockDrag } from '../../../core'\nimport { Icon } from '../../../react/Icon'\nimport { cn } from '../../../react/ui/utils'\nimport { firstLineCenterShift, gutterShiftOf, HANDLE_SIZE, handleBlocksOf } from '../handle-geometry'\n\ninterface Handle { pos: number, left: number, top: number }\n\n/**\n * The permanent drag handles (`blocks.dragHandle: 'always'`): one handle per block that the hover handle can target\n * (`handleBlocksOf`), each where the hover handle would sit for that block, dragging the block like the hover handle\n * does (`startBlockDrag`). Only blocks within a screen of the viewport get one. A nested block whose handle would cover\n * another handle on the same line (the first block of a quote, say) has none: its container's handle moves it. Hidden\n * while the editor is read-only. Positioned absolutely inside `host`, the `relative` element around the editor.\n */\nexport function BlockHandles({ editor, host }: { editor: Editor, host: HTMLElement }) {\n  const [handles, setHandles] = useState<readonly Handle[]>([])\n  // While a drag runs the handles let events through, so a drop over a handle's gutter still reaches the editor.\n  const [dragging, setDragging] = useState(false)\n\n  useEffect(() => {\n    let raf = 0\n    let wasEditable = false\n    const schedule = () => {\n      if (!raf) raf = requestAnimationFrame(measure)\n    }\n\n    function measure() {\n      raf = 0\n      wasEditable = !editor.isDestroyed && editor.isEditable\n      if (!wasEditable || !editor.view.dom.getClientRects().length) {\n        setHandles(previous => (previous.length ? [] : previous))\n        return\n      }\n      const hostRect = host.getBoundingClientRect()\n      const originX = hostRect.left + host.clientLeft\n      const originY = hostRect.top + host.clientTop\n      const next: Handle[] = []\n      for (const { node, pos, dom } of handleBlocksOf(editor.view)) {\n        const rect = dom.getBoundingClientRect()\n        if (!rect.height || rect.bottom < -window.innerHeight || rect.top > 2 * window.innerHeight) continue\n        const left = rect.left - HANDLE_SIZE - gutterShiftOf(node, dom) - originX\n        const top = rect.top + firstLineCenterShift(dom, rect.top, HANDLE_SIZE) - originY\n        const covered = next.some(other => Math.abs(top - other.top) < HANDLE_SIZE / 2 && left < other.left + HANDLE_SIZE && other.left < left + HANDLE_SIZE)\n        if (!covered) next.push({ pos, left, top })\n      }\n      setHandles((previous) => {\n        const changed = previous.length !== next.length || next.some((handle, index) => {\n          const before = previous[index]\n          return !before || handle.pos !== before.pos || handle.left !== before.left || handle.top !== before.top\n        })\n        return changed ? next : previous\n      })\n    }\n\n    // Documents change layout through edits, the column through resizes; `EditorSurface` dispatches a transaction after\n    // `setEditable`.\n    const onTransaction = ({ transaction }: { transaction: { docChanged: boolean } }) => {\n      if (transaction.docChanged || editor.isEditable !== wasEditable) schedule()\n    }\n    editor.on('transaction', onTransaction)\n    window.addEventListener('resize', schedule)\n    window.addEventListener('scroll', schedule, true)\n    const resizeObserver = new ResizeObserver(schedule)\n    resizeObserver.observe(editor.view.dom)\n    schedule()\n    return () => {\n      editor.off('transaction', onTransaction)\n      window.removeEventListener('resize', schedule)\n      window.removeEventListener('scroll', schedule, true)\n      resizeObserver.disconnect()\n      if (raf) cancelAnimationFrame(raf)\n    }\n  }, [editor, host])\n\n  function onDragStart(event: DragEvent<HTMLDivElement>, pos: number) {\n    if (!startBlockDrag(editor, event.nativeEvent, pos)) {\n      event.preventDefault()\n      return\n    }\n    // Not inside `dragstart`: changing the source's styles there cancels the drag. The dropped block's handle may be\n    // gone afterwards and send no `dragend`, so the document ends the drag.\n    setTimeout(() => setDragging(true))\n    const abort = new AbortController()\n    const end = () => {\n      setDragging(false)\n      abort.abort()\n    }\n    document.addEventListener('drop', end, { signal: abort.signal })\n    document.addEventListener('dragend', end, { signal: abort.signal })\n  }\n\n  return (\n    <div className=\"absolute left-0 top-0 z-10 h-0 w-0\">\n      {handles.map(handle => (\n        <div\n          key={handle.pos}\n          draggable\n          aria-hidden=\"true\"\n          className={cn('absolute flex cursor-grab items-center justify-center rounded text-muted-foreground hover:bg-muted hover:text-foreground', dragging ? 'pointer-events-none' : 'pointer-events-auto')}\n          style={{ left: `${handle.left}px`, top: `${handle.top}px`, width: `${HANDLE_SIZE}px`, height: `${HANDLE_SIZE}px` }}\n          onDragStart={event => onDragStart(event, handle.pos)}\n        >\n          <Icon name=\"i-lucide-grip-vertical\" />\n        </div>\n      ))}\n    </div>\n  )\n}\n"],"mappings":"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"}
+{"version":3,"file":"BlockHandles.js","names":[],"sources":["../../../../src/features/block-ui/react/BlockHandles.tsx"],"sourcesContent":["import type { Editor } from '@tiptap/core'\nimport { type DragEvent, useEffect, useState } from 'react'\nimport { startBlockDrag } from '../../../core'\nimport { Icon } from '../../../react/Icon'\nimport { cn } from '../../../react/ui/utils'\nimport { firstLineCenterShift, HANDLE_SIZE, handleBlocksOf } from '../handle-geometry'\n\ninterface Handle { pos: number, left: number, top: number }\n\n/**\n * The permanent drag handles (`blocks.dragHandle: 'always'`): one handle per block that the hover handle can target\n * (`handleBlocksOf`), each where the hover handle would sit for that block, dragging the block like the hover handle\n * does (`startBlockDrag`). Only blocks within a screen of the viewport get one. A nested block whose handle would cover\n * another handle on the same line (a nested block flush with its container, say) has none: its container's handle moves it. Hidden\n * while the editor is read-only. Positioned absolutely inside `host`, the `relative` element around the editor.\n */\nexport function BlockHandles({ editor, host }: { editor: Editor, host: HTMLElement }) {\n  const [handles, setHandles] = useState<readonly Handle[]>([])\n  // While a drag runs the handles let events through, so a drop over a handle's gutter still reaches the editor.\n  const [dragging, setDragging] = useState(false)\n\n  useEffect(() => {\n    let raf = 0\n    let wasEditable = false\n    const schedule = () => {\n      if (!raf) raf = requestAnimationFrame(measure)\n    }\n\n    function measure() {\n      raf = 0\n      wasEditable = !editor.isDestroyed && editor.isEditable\n      if (!wasEditable || !editor.view.dom.getClientRects().length) {\n        setHandles(previous => (previous.length ? [] : previous))\n        return\n      }\n      const hostRect = host.getBoundingClientRect()\n      const originX = hostRect.left + host.clientLeft\n      const originY = hostRect.top + host.clientTop\n      const next: Handle[] = []\n      for (const { pos, dom } of handleBlocksOf(editor.view)) {\n        const rect = dom.getBoundingClientRect()\n        if (!rect.height || rect.bottom < -window.innerHeight || rect.top > 2 * window.innerHeight) continue\n        const left = rect.left - HANDLE_SIZE - originX\n        const top = rect.top + firstLineCenterShift(dom, rect.top, HANDLE_SIZE) - originY\n        const covered = next.some(other => Math.abs(top - other.top) < HANDLE_SIZE / 2 && left < other.left + HANDLE_SIZE && other.left < left + HANDLE_SIZE)\n        if (!covered) next.push({ pos, left, top })\n      }\n      setHandles((previous) => {\n        const changed = previous.length !== next.length || next.some((handle, index) => {\n          const before = previous[index]\n          return !before || handle.pos !== before.pos || handle.left !== before.left || handle.top !== before.top\n        })\n        return changed ? next : previous\n      })\n    }\n\n    // Documents change layout through edits, the column through resizes; `EditorSurface` dispatches a transaction after\n    // `setEditable`.\n    const onTransaction = ({ transaction }: { transaction: { docChanged: boolean } }) => {\n      if (transaction.docChanged || editor.isEditable !== wasEditable) schedule()\n    }\n    editor.on('transaction', onTransaction)\n    window.addEventListener('resize', schedule)\n    window.addEventListener('scroll', schedule, true)\n    const resizeObserver = new ResizeObserver(schedule)\n    resizeObserver.observe(editor.view.dom)\n    schedule()\n    return () => {\n      editor.off('transaction', onTransaction)\n      window.removeEventListener('resize', schedule)\n      window.removeEventListener('scroll', schedule, true)\n      resizeObserver.disconnect()\n      if (raf) cancelAnimationFrame(raf)\n    }\n  }, [editor, host])\n\n  function onDragStart(event: DragEvent<HTMLDivElement>, pos: number) {\n    if (!startBlockDrag(editor, event.nativeEvent, pos)) {\n      event.preventDefault()\n      return\n    }\n    // Not inside `dragstart`: changing the source's styles there cancels the drag. The dropped block's handle may be\n    // gone afterwards and send no `dragend`, so the document ends the drag.\n    setTimeout(() => setDragging(true))\n    const abort = new AbortController()\n    const end = () => {\n      setDragging(false)\n      abort.abort()\n    }\n    document.addEventListener('drop', end, { signal: abort.signal })\n    document.addEventListener('dragend', end, { signal: abort.signal })\n  }\n\n  return (\n    <div className=\"absolute left-0 top-0 z-10 h-0 w-0\">\n      {handles.map(handle => (\n        <div\n          key={handle.pos}\n          draggable\n          aria-hidden=\"true\"\n          className={cn('absolute flex cursor-grab items-center justify-center rounded text-muted-foreground hover:bg-muted hover:text-foreground', dragging ? 'pointer-events-none' : 'pointer-events-auto')}\n          style={{ left: `${handle.left}px`, top: `${handle.top}px`, width: `${HANDLE_SIZE}px`, height: `${HANDLE_SIZE}px` }}\n          onDragStart={event => onDragStart(event, handle.pos)}\n        >\n          <Icon name=\"i-lucide-grip-vertical\" />\n        </div>\n      ))}\n    </div>\n  )\n}\n"],"mappings":"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"}

package/dist/features/block-ui/react/BlockUi.js

@@ -1,9 +1,9 @@
 import { editorEntryOf } from "../../../core/editor-ui.js";
-import { isChromeNode } from "../../../core/schema/node-flags.js";
 import { cn } from "../../../react/ui/utils.js";
 import { Icon } from "../../../react/Icon.js";
 import { useEditorSettings } from "../../../react/settings.js";
-import { firstLineCenterShift, gutterShiftOf, handleLeftOf, hasKindIcon } from "../handle-geometry.js";
+import { firstLineCenterShift, handleLeftOf, hasBlockTypeIcon } from "../handle-geometry.js";
+import { outerBlockRule } from "../block-target.js";
 import { actionSurfacesOf, sameBlock, selectedBlockOf } from "../block-actions.js";
 import { BlockActionsOverlay } from "./BlockActionsOverlay.js";
 import { BlockHandles } from "./BlockHandles.js";
@@ -24,7 +24,7 @@ import { createPortal } from "react-dom";
 function BlockUi({ editor }) {
 	const [host, setHost] = useState(null);
 	const [hoverTarget, setHoverTarget] = useState(null);
-	const [targetHasKindIcon, setTargetHasKindIcon] = useState(false);
+	const [targetHasBlockTypeIcon, setTargetHasBlockTypeIcon] = useState(false);
 	const { settings } = useEditorSettings();
 	const actions = editorEntryOf(editor)?.blockActions ?? [];
 	const surfaces = actionSurfacesOf(editor);
@@ -44,9 +44,7 @@ function BlockUi({ editor }) {
 		overlayHovered: false,
 		clearTimer: void 0,
 		pointer: null,
-		dom: null,
-		node: null,
-		gutterShift: 0
+		dom: null
 	}).current;
 	const handleContent = useRef(null);
 	const handleWidth = () => handleContent.current?.parentElement?.offsetWidth ?? 0;
@@ -88,7 +86,7 @@ function BlockUi({ editor }) {
 		editor.view.dispatch(editor.state.tr.setMeta("hideDragHandle", true).setMeta("addToHistory", false));
 	}, [editor]);
 	const alwaysHandles = settings.blocks.dragHandle === "always";
-	const hoverHandleHidden = alwaysHandles || targetHasKindIcon;
+	const hoverHandleHidden = alwaysHandles || targetHasBlockTypeIcon;
 	const trackDragTarget = useCallback(({ node, pos }) => {
 		if (node) {
 			clearTimeout(track.clearTimer);
@@ -99,21 +97,13 @@ function BlockUi({ editor }) {
 		} else scheduleHoverClear();
 		const dom = node ? editor.view.nodeDOM(pos) : null;
 		track.dom = dom instanceof HTMLElement ? dom : null;
-		track.node = track.dom ? node : null;
-		track.gutterShift = track.dom && track.node ? gutterShiftOf(track.node, track.dom) : 0;
-		setTargetHasKindIcon(track.dom ? hasKindIcon(track.dom) : false);
+		setTargetHasBlockTypeIcon(track.dom ? hasBlockTypeIcon(track.dom) : false);
 	}, [
 		editor,
 		track,
 		scheduleHoverClear
 	]);
 	const dragHandlePosition = useMemo(() => ({ middleware: [{
-		name: "gutterShift",
-		fn: ({ x, y }) => ({
-			x: x - track.gutterShift,
-			y
-		})
-	}, {
 		name: "firstLineCenter",
 		fn: ({ x, y, elements, rects }) => ({
 			x,
@@ -122,33 +112,31 @@ function BlockUi({ editor }) {
 	}] }), [track]);
 	const dragHandleNested = useMemo(() => {
 		const pointerReachesTarget = () => {
-			const { pointer, node, dom } = track;
-			if (!pointer || !node || !dom?.isConnected) return false;
+			const { pointer, dom } = track;
+			if (!pointer || !dom?.isConnected) return false;
 			const rect = dom.getBoundingClientRect();
 			const { x, y } = pointer;
-			if (x < handleLeftOf(node, dom, handleWidth()) || x >= rect.right) return false;
+			if (x < handleLeftOf(dom, handleWidth()) || x >= rect.right) return false;
 			if (y < (laidOutSibling(dom, "previous")?.bottom ?? rect.top)) return false;
 			if (y >= (laidOutSibling(dom, "next")?.top ?? rect.bottom)) return false;
 			return x < rect.left || y < rect.top || y >= rect.bottom;
 		};
 		return {
 			edgeDetection: "none",
+			defaultRules: false,
 			rules: [
-				{
-					id: "compositeChrome",
-					evaluate: ({ node }) => isChromeNode(node) ? 1e3 : 0
-				},
+				outerBlockRule,
 				{
 					id: "reachTarget",
 					evaluate: () => pointerReachesTarget() ? 1e3 : 0
 				},
 				{
 					id: "ownGutter",
-					evaluate: ({ node, pos, depth, view }) => {
+					evaluate: ({ pos, depth, view }) => {
 						const { pointer } = track;
 						if (depth < 2 || !pointer) return 0;
 						const dom = view.nodeDOM(pos);
-						return dom instanceof HTMLElement && pointer.x < handleLeftOf(node, dom, handleWidth()) ? 1e3 : 0;
+						return dom instanceof HTMLElement && pointer.x < handleLeftOf(dom, handleWidth()) ? 1e3 : 0;
 					}
 				}
 			]

package/dist/features/block-ui/react/BlockUi.js.map

@@ -1 +1 @@
-{"version":3,"file":"BlockUi.js","names":[],"sources":["../../../../src/features/block-ui/react/BlockUi.tsx"],"sourcesContent":["import type { Editor } from '@tiptap/core'\nimport { DragHandle, type DragHandleProps } from '@tiptap/extension-drag-handle-react'\nimport type { Node } from '@tiptap/pm/model'\nimport { useCallback, useEffect, useMemo, useReducer, useRef, useState } from 'react'\nimport { createPortal } from 'react-dom'\nimport { type BlockTarget, editorEntryOf } from '../../../core'\nimport { isChromeNode } from '../../../core/schema'\nimport { Icon } from '../../../react/Icon'\nimport { useEditorSettings } from '../../../react/settings'\nimport { cn } from '../../../react/ui/utils'\nimport { firstLineCenterShift, gutterShiftOf, handleLeftOf, hasKindIcon } from '../handle-geometry'\nimport { actionSurfacesOf, sameBlock, selectedBlockOf } from '../block-actions'\nimport { BlockActionsOverlay } from './BlockActionsOverlay'\nimport { BlockHandles } from './BlockHandles'\n\n/**\n * Block UI of an editor: the drag handle on the left of the hovered block (hidden while the editor is read-only) and the\n * block actions (`BlockActionsOverlay`) at the editor's right edge. The actions are those the surface registered for\n * `editor` (features' block actions, then the host's), shown per `BlockUiOptions.actions`: on a hover bar for the block\n * the drag handle targets, on a persistent toolbar for the block holding the selection, both, or neither. When both\n * would show a bar on the same block, only the toolbar does. A block with a kind icon (a composite) gets no handle: its\n * icon drags it. With `blocks.dragHandle: 'always'` the hover handle is replaced by permanent handles on every eligible\n * block (`BlockHandles`). Mounted by the block-ui feature beside the editor.\n */\nexport function BlockUi({ editor }: { editor: Editor }) {\n  // Hover actions target the drag handle's block. The plugin drops its target when the pointer leaves the editor (also\n  // onto the overlay, which sits outside it) and on keydown; a short grace keeps the overlay while the pointer moves\n  // onto it, and typing hides it at once.\n  const [host, setHost] = useState<HTMLElement | null>(null)\n  const [hoverTarget, setHoverTarget] = useState<BlockTarget | null>(null)\n  const [targetHasKindIcon, setTargetHasKindIcon] = useState(false)\n  const { settings } = useEditorSettings()\n  // Read while rendering: the surface registers its entry after its overlays have mounted, and the overlay renders\n  // again once a block is hovered.\n  const actions = editorEntryOf(editor)?.blockActions ?? []\n  const surfaces = actionSurfacesOf(editor)\n\n  // The toolbar follows the selection: render on each transaction, but only while that surface exists (the options are\n  // read when the transaction happens, the entry being registered after this component mounted).\n  const [, rerender] = useReducer((count: number) => count + 1, 0)\n  useEffect(() => {\n    const onTransaction = () => { if (actionSurfacesOf(editor).toolbar) rerender() }\n    editor.on('transaction', onTransaction)\n    return () => { editor.off('transaction', onTransaction) }\n  }, [editor])\n  const selectedTarget = surfaces.toolbar ? selectedBlockOf(editor) : null\n  // One bar per block: the toolbar wins where the hover bar would sit on the same block.\n  const hoverBarTarget = hoverTarget && selectedTarget && sameBlock(editor, hoverTarget, selectedTarget) ? null : hoverTarget\n\n  // Everything the plugin callbacks and the targeting rules below read while the pointer moves: not render state.\n  const track = useRef({\n    overlayHovered: false,\n    clearTimer: undefined as number | undefined,\n    pointer: null as { x: number, y: number } | null,\n    dom: null as HTMLElement | null,\n    node: null as Node | null,\n    gutterShift: 0,\n  }).current\n  // The handle's content; its parent is the handle element the plugin positions (`handleWidth`).\n  const handleContent = useRef<HTMLSpanElement>(null)\n  const handleWidth = () => handleContent.current?.parentElement?.offsetWidth ?? 0\n\n  const scheduleHoverClear = useCallback(() => {\n    clearTimeout(track.clearTimer)\n    track.clearTimer = window.setTimeout(() => {\n      if (!track.overlayHovered) setHoverTarget(null)\n    }, 200)\n  }, [track])\n\n  // The overlay is positioned inside the element that holds the editor content (`relative`); Tiptap's content component\n  // has moved the editor DOM into it by the time this effect runs.\n  useEffect(() => {\n    if (editor.isDestroyed) return\n    const dom = editor.view.dom\n    setHost(dom.isConnected ? dom.parentElement : null)\n    // Like the drag-handle plugin: a key pressed in the focused editor hides the actions.\n    const onKeydown = () => {\n      clearTimeout(track.clearTimer)\n      setHoverTarget(null)\n    }\n    // Pointer position for the targeting rules below. The plugin evaluates them in a frame callback after the\n    // mousemove, so this is the position they see.\n    const onMousemove = (event: MouseEvent) => {\n      track.pointer = { x: event.clientX, y: event.clientY }\n    }\n    dom.addEventListener('keydown', onKeydown)\n    dom.addEventListener('mousemove', onMousemove)\n    return () => {\n      clearTimeout(track.clearTimer)\n      dom.removeEventListener('keydown', onKeydown)\n      dom.removeEventListener('mousemove', onMousemove)\n      setHost(null)\n    }\n  }, [editor, track])\n\n  const onOverlayHover = useCallback((hovered: boolean) => {\n    track.overlayHovered = hovered\n    if (!hovered) scheduleHoverClear()\n  }, [track, scheduleHoverClear])\n\n  // The drag-handle plugin hides the handle on dragend but keeps its current target. A dropped\n  // nested node is the same node object, so hovering it again would not re-show the handle.\n  // The plugin's `hideDragHandle` meta clears the target.\n  const resetDragHandle = useCallback(() => {\n    if (editor.isDestroyed) return\n    editor.view.dispatch(editor.state.tr.setMeta('hideDragHandle', true).setMeta('addToHistory', false))\n  }, [editor])\n\n  // The plugin puts the handle's right edge on the target block's left edge (`gutterShiftOf`: list items move further\n  // left). The hover handle is hidden where the block has a handle of its own: the kind icon of a composite, or, with\n  // `blocks.dragHandle: 'always'`, the permanent handles. Hiding keeps its layout, which the targeting rules below measure.\n  const alwaysHandles = settings.blocks.dragHandle === 'always'\n  const hoverHandleHidden = alwaysHandles || targetHasKindIcon\n  const trackDragTarget = useCallback(({ node, pos }: { node: Node | null, pos: number }) => {\n    if (node) {\n      clearTimeout(track.clearTimer)\n      setHoverTarget({ node, pos })\n    }\n    else {\n      scheduleHoverClear()\n    }\n    const dom = node ? editor.view.nodeDOM(pos) : null\n    track.dom = dom instanceof HTMLElement ? dom : null\n    track.node = track.dom ? node : null\n    track.gutterShift = track.dom && track.node ? gutterShiftOf(track.node, track.dom) : 0\n    setTargetHasKindIcon(track.dom ? hasKindIcon(track.dom) : false)\n  }, [editor, track, scheduleHoverClear])\n\n  // The plugin re-registers when its configuration changes: both objects below are made once and read `track`.\n  const dragHandlePosition = useMemo<DragHandleProps['computePositionConfig']>(() => ({\n    // The plugin aligns the handle's top with the block's top, which sits above the middle of the block's first text\n    // line: `firstLineCenterShift` moves the handle's centre to that line's centre.\n    middleware: [\n      { name: 'gutterShift', fn: ({ x, y }) => ({ x: x - track.gutterShift, y }) },\n      {\n        name: 'firstLineCenter',\n        fn: ({ x, y, elements, rects }) => ({\n          x,\n          y: track.dom ? y + firstLineCenterShift(track.dom, elements.reference.getBoundingClientRect().top, rects.floating.height) : y,\n        }),\n      },\n    ],\n  }), [track])\n\n  // Targeting among nested blocks. `compositeChrome`: hovering a composite's title, description or tags row targets the\n  // composite itself (a deduction of 1000, the base score, excludes a node). `reachTarget`: see `pointerReachesTarget`.\n  // `ownGutter`: a nested block is targeted only from its handle column rightwards; further left its ancestors are, so\n  // on any row the gutter is partitioned by the handle columns of the blocks nested there. The plugin's edge detection\n  // is off: its left strip is this partition, its top strip would hand the handle to the parent on the block's first\n  // line, where the handle sits.\n  const dragHandleNested = useMemo<DragHandleProps['nested']>(() => {\n    // Left of a block, ProseMirror resolves the pointer to the position before the block, so the plugin only considers\n    // the block's ancestors there: the target's own handle column would hand the handle to its parent before the pointer\n    // reaches it. This keeps the target while the pointer is between its handle and its box, over its whole height\n    // including the gaps to its neighbours, and in those gaps themselves (which resolve to the parent as well). The rule\n    // then excludes every candidate, and the plugin keeps its target when the detection yields none. Inside the target's\n    // own box the rule is off, so its descendants are still targeted.\n    const pointerReachesTarget = (): boolean => {\n      const { pointer, node, dom } = track\n      if (!pointer || !node || !dom?.isConnected) return false\n      const rect = dom.getBoundingClientRect()\n      const { x, y } = pointer\n      if (x < handleLeftOf(node, dom, handleWidth()) || x >= rect.right) return false\n      if (y < (laidOutSibling(dom, 'previous')?.bottom ?? rect.top)) return false\n      if (y >= (laidOutSibling(dom, 'next')?.top ?? rect.bottom)) return false\n      return x < rect.left || y < rect.top || y >= rect.bottom\n    }\n    return {\n      edgeDetection: 'none',\n      rules: [\n        { id: 'compositeChrome', evaluate: ({ node }) => isChromeNode(node) ? 1000 : 0 },\n        { id: 'reachTarget', evaluate: () => pointerReachesTarget() ? 1000 : 0 },\n        {\n          id: 'ownGutter',\n          evaluate: ({ node, pos, depth, view }) => {\n            const { pointer } = track\n            if (depth < 2 || !pointer) return 0\n            const dom = view.nodeDOM(pos)\n            return dom instanceof HTMLElement && pointer.x < handleLeftOf(node, dom, handleWidth()) ? 1000 : 0\n          },\n        },\n      ],\n    }\n  }, [track])\n\n  return (\n    <>\n      {host && createPortal(\n        <>\n          {surfaces.hover && (\n            <BlockActionsOverlay editor={editor} target={hoverBarTarget} host={host} actions={actions} surface=\"hover\" onHover={onOverlayHover} />\n          )}\n          {surfaces.toolbar && (\n            <BlockActionsOverlay editor={editor} target={selectedTarget} host={host} actions={actions} surface=\"toolbar\" persistent />\n          )}\n          {alwaysHandles && <BlockHandles editor={editor} host={host} />}\n        </>,\n        host,\n      )}\n      <DragHandle\n        editor={editor}\n        onElementDragEnd={resetDragHandle}\n        onNodeChange={trackDragTarget}\n        computePositionConfig={dragHandlePosition}\n        nested={dragHandleNested}\n        className={cn(\n          'flex size-6 cursor-grab items-center justify-center rounded text-muted-foreground hover:bg-muted hover:text-foreground data-[dragging=true]:cursor-grabbing',\n          hoverHandleHidden && 'invisible! pointer-events-none!',\n        )}\n      >\n        <span ref={handleContent} className=\"contents\">\n          <Icon name=\"i-lucide-grip-vertical\" />\n        </span>\n      </DragHandle>\n    </>\n  )\n}\n\n// Nearest sibling with a layout box (a composite's hidden description/tags rows have none).\nfunction laidOutSibling(dom: Element, side: 'previous' | 'next'): DOMRect | null {\n  for (let element = dom[`${side}ElementSibling`]; element; element = element[`${side}ElementSibling`]) {\n    const rect = element.getBoundingClientRect()\n    if (rect.height > 0) return rect\n  }\n  return null\n}\n"],"mappings":"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"}
+{"version":3,"file":"BlockUi.js","names":[],"sources":["../../../../src/features/block-ui/react/BlockUi.tsx"],"sourcesContent":["import type { Editor } from '@tiptap/core'\nimport { DragHandle, type DragHandleProps } from '@tiptap/extension-drag-handle-react'\nimport type { Node } from '@tiptap/pm/model'\nimport { useCallback, useEffect, useMemo, useReducer, useRef, useState } from 'react'\nimport { createPortal } from 'react-dom'\nimport { type BlockTarget, editorEntryOf } from '../../../core'\nimport { Icon } from '../../../react/Icon'\nimport { useEditorSettings } from '../../../react/settings'\nimport { cn } from '../../../react/ui/utils'\nimport { firstLineCenterShift, handleLeftOf, hasBlockTypeIcon } from '../handle-geometry'\nimport { outerBlockRule } from '../block-target'\nimport { actionSurfacesOf, sameBlock, selectedBlockOf } from '../block-actions'\nimport { BlockActionsOverlay } from './BlockActionsOverlay'\nimport { BlockHandles } from './BlockHandles'\n\n/**\n * Block UI of an editor: the drag handle on the left of the hovered block (hidden while the editor is read-only) and the\n * block actions (`BlockActionsOverlay`) at the editor's right edge. The actions are those the surface registered for\n * `editor` (features' block actions, then the host's), shown per `BlockUiOptions.actions`: on a hover bar for the block\n * the drag handle targets, on a persistent toolbar for the block holding the selection, both, or neither. When both\n * would show a bar on the same block, only the toolbar does. A block with a kind icon (a composite) gets no handle: its\n * icon drags it. With `blocks.dragHandle: 'always'` the hover handle is replaced by permanent handles on every eligible\n * block (`BlockHandles`). Mounted by the block-ui feature beside the editor.\n */\nexport function BlockUi({ editor }: { editor: Editor }) {\n  // Hover actions target the drag handle's block. The plugin drops its target when the pointer leaves the editor (also\n  // onto the overlay, which sits outside it) and on keydown; a short grace keeps the overlay while the pointer moves\n  // onto it, and typing hides it at once.\n  const [host, setHost] = useState<HTMLElement | null>(null)\n  const [hoverTarget, setHoverTarget] = useState<BlockTarget | null>(null)\n  const [targetHasBlockTypeIcon, setTargetHasBlockTypeIcon] = useState(false)\n  const { settings } = useEditorSettings()\n  // Read while rendering: the surface registers its entry after its overlays have mounted, and the overlay renders\n  // again once a block is hovered.\n  const actions = editorEntryOf(editor)?.blockActions ?? []\n  const surfaces = actionSurfacesOf(editor)\n\n  // The toolbar follows the selection: render on each transaction, but only while that surface exists (the options are\n  // read when the transaction happens, the entry being registered after this component mounted).\n  const [, rerender] = useReducer((count: number) => count + 1, 0)\n  useEffect(() => {\n    const onTransaction = () => { if (actionSurfacesOf(editor).toolbar) rerender() }\n    editor.on('transaction', onTransaction)\n    return () => { editor.off('transaction', onTransaction) }\n  }, [editor])\n  const selectedTarget = surfaces.toolbar ? selectedBlockOf(editor) : null\n  // One bar per block: the toolbar wins where the hover bar would sit on the same block.\n  const hoverBarTarget = hoverTarget && selectedTarget && sameBlock(editor, hoverTarget, selectedTarget) ? null : hoverTarget\n\n  // Everything the plugin callbacks and the targeting rules below read while the pointer moves: not render state.\n  const track = useRef({\n    overlayHovered: false,\n    clearTimer: undefined as number | undefined,\n    pointer: null as { x: number, y: number } | null,\n    dom: null as HTMLElement | null,\n  }).current\n  // The handle's content; its parent is the handle element the plugin positions (`handleWidth`).\n  const handleContent = useRef<HTMLSpanElement>(null)\n  const handleWidth = () => handleContent.current?.parentElement?.offsetWidth ?? 0\n\n  const scheduleHoverClear = useCallback(() => {\n    clearTimeout(track.clearTimer)\n    track.clearTimer = window.setTimeout(() => {\n      if (!track.overlayHovered) setHoverTarget(null)\n    }, 200)\n  }, [track])\n\n  // The overlay is positioned inside the element that holds the editor content (`relative`); Tiptap's content component\n  // has moved the editor DOM into it by the time this effect runs.\n  useEffect(() => {\n    if (editor.isDestroyed) return\n    const dom = editor.view.dom\n    setHost(dom.isConnected ? dom.parentElement : null)\n    // Like the drag-handle plugin: a key pressed in the focused editor hides the actions.\n    const onKeydown = () => {\n      clearTimeout(track.clearTimer)\n      setHoverTarget(null)\n    }\n    // Pointer position for the targeting rules below. The plugin evaluates them in a frame callback after the\n    // mousemove, so this is the position they see.\n    const onMousemove = (event: MouseEvent) => {\n      track.pointer = { x: event.clientX, y: event.clientY }\n    }\n    dom.addEventListener('keydown', onKeydown)\n    dom.addEventListener('mousemove', onMousemove)\n    return () => {\n      clearTimeout(track.clearTimer)\n      dom.removeEventListener('keydown', onKeydown)\n      dom.removeEventListener('mousemove', onMousemove)\n      setHost(null)\n    }\n  }, [editor, track])\n\n  const onOverlayHover = useCallback((hovered: boolean) => {\n    track.overlayHovered = hovered\n    if (!hovered) scheduleHoverClear()\n  }, [track, scheduleHoverClear])\n\n  // The drag-handle plugin hides the handle on dragend but keeps its current target. A dropped\n  // nested node is the same node object, so hovering it again would not re-show the handle.\n  // The plugin's `hideDragHandle` meta clears the target.\n  const resetDragHandle = useCallback(() => {\n    if (editor.isDestroyed) return\n    editor.view.dispatch(editor.state.tr.setMeta('hideDragHandle', true).setMeta('addToHistory', false))\n  }, [editor])\n\n  // The plugin puts the handle's right edge on the target block's left edge. The hover handle is hidden where the block\n  // has a handle of its own: the kind icon of a composite, or, with `blocks.dragHandle: 'always'`, the permanent\n  // handles. Hiding keeps its layout, which the targeting rules below measure.\n  const alwaysHandles = settings.blocks.dragHandle === 'always'\n  const hoverHandleHidden = alwaysHandles || targetHasBlockTypeIcon\n  const trackDragTarget = useCallback(({ node, pos }: { node: Node | null, pos: number }) => {\n    if (node) {\n      clearTimeout(track.clearTimer)\n      setHoverTarget({ node, pos })\n    }\n    else {\n      scheduleHoverClear()\n    }\n    const dom = node ? editor.view.nodeDOM(pos) : null\n    track.dom = dom instanceof HTMLElement ? dom : null\n    setTargetHasBlockTypeIcon(track.dom ? hasBlockTypeIcon(track.dom) : false)\n  }, [editor, track, scheduleHoverClear])\n\n  // The plugin re-registers when its configuration changes: both objects below are made once and read `track`.\n  const dragHandlePosition = useMemo<DragHandleProps['computePositionConfig']>(() => ({\n    // The plugin aligns the handle's top with the block's top, which sits above the middle of the block's first text\n    // line: `firstLineCenterShift` moves the handle's centre to that line's centre.\n    middleware: [\n      {\n        name: 'firstLineCenter',\n        fn: ({ x, y, elements, rects }) => ({\n          x,\n          y: track.dom ? y + firstLineCenterShift(track.dom, elements.reference.getBoundingClientRect().top, rects.floating.height) : y,\n        }),\n      },\n    ],\n  }), [track])\n\n  // Targeting among nested blocks, without the plugin's default rules (they target list items). `outerBlock` (a\n  // deduction of 1000, the base score, excludes a node): only the blocks of `outerBlocksAt` the hovered position are\n  // targets, so a list item or a quote paragraph targets its list or quote, and a Typed block's chrome its Typed block.\n  // `reachTarget`: see `pointerReachesTarget`.\n  // `ownGutter`: a nested block is targeted only from its handle column rightwards; further left its ancestors are, so\n  // on any row the gutter is partitioned by the handle columns of the blocks nested there. The plugin's edge detection\n  // is off: its left strip is this partition, its top strip would hand the handle to the parent on the block's first\n  // line, where the handle sits.\n  const dragHandleNested = useMemo<DragHandleProps['nested']>(() => {\n    // Left of a block, ProseMirror resolves the pointer to the position before the block, so the plugin only considers\n    // the block's ancestors there: the target's own handle column would hand the handle to its parent before the pointer\n    // reaches it. This keeps the target while the pointer is between its handle and its box, over its whole height\n    // including the gaps to its neighbours, and in those gaps themselves (which resolve to the parent as well). The rule\n    // then excludes every candidate, and the plugin keeps its target when the detection yields none. Inside the target's\n    // own box the rule is off, so its descendants are still targeted.\n    const pointerReachesTarget = (): boolean => {\n      const { pointer, dom } = track\n      if (!pointer || !dom?.isConnected) return false\n      const rect = dom.getBoundingClientRect()\n      const { x, y } = pointer\n      if (x < handleLeftOf(dom, handleWidth()) || x >= rect.right) return false\n      if (y < (laidOutSibling(dom, 'previous')?.bottom ?? rect.top)) return false\n      if (y >= (laidOutSibling(dom, 'next')?.top ?? rect.bottom)) return false\n      return x < rect.left || y < rect.top || y >= rect.bottom\n    }\n    return {\n      edgeDetection: 'none',\n      defaultRules: false,\n      rules: [\n        outerBlockRule,\n        { id: 'reachTarget', evaluate: () => pointerReachesTarget() ? 1000 : 0 },\n        {\n          id: 'ownGutter',\n          evaluate: ({ pos, depth, view }) => {\n            const { pointer } = track\n            if (depth < 2 || !pointer) return 0\n            const dom = view.nodeDOM(pos)\n            return dom instanceof HTMLElement && pointer.x < handleLeftOf(dom, handleWidth()) ? 1000 : 0\n          },\n        },\n      ],\n    }\n  }, [track])\n\n  return (\n    <>\n      {host && createPortal(\n        <>\n          {surfaces.hover && (\n            <BlockActionsOverlay editor={editor} target={hoverBarTarget} host={host} actions={actions} surface=\"hover\" onHover={onOverlayHover} />\n          )}\n          {surfaces.toolbar && (\n            <BlockActionsOverlay editor={editor} target={selectedTarget} host={host} actions={actions} surface=\"toolbar\" persistent />\n          )}\n          {alwaysHandles && <BlockHandles editor={editor} host={host} />}\n        </>,\n        host,\n      )}\n      <DragHandle\n        editor={editor}\n        onElementDragEnd={resetDragHandle}\n        onNodeChange={trackDragTarget}\n        computePositionConfig={dragHandlePosition}\n        nested={dragHandleNested}\n        className={cn(\n          'flex size-6 cursor-grab items-center justify-center rounded text-muted-foreground hover:bg-muted hover:text-foreground data-[dragging=true]:cursor-grabbing',\n          hoverHandleHidden && 'invisible! pointer-events-none!',\n        )}\n      >\n        <span ref={handleContent} className=\"contents\">\n          <Icon name=\"i-lucide-grip-vertical\" />\n        </span>\n      </DragHandle>\n    </>\n  )\n}\n\n// Nearest sibling with a layout box (a composite's hidden description/tags rows have none).\nfunction laidOutSibling(dom: Element, side: 'previous' | 'next'): DOMRect | null {\n  for (let element = dom[`${side}ElementSibling`]; element; element = element[`${side}ElementSibling`]) {\n    const rect = element.getBoundingClientRect()\n    if (rect.height > 0) return rect\n  }\n  return null\n}\n"],"mappings":"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"}

package/dist/features/comments/model.js

@@ -1,5 +1,5 @@
-import { editorEntryOf } from "../../core/editor-ui.js";
 import { newBlockId } from "../../core/schema/block-ids.js";
+import { editorEntryOf } from "../../core/editor-ui.js";
 import { createStore } from "../../core/store.js";
 import { anchorResolverOf, releaseRanges, resolveRange } from "../../core/doc-anchors.js";
 import { cancelCommentDraft, commentsDoc, commentsKey, commentsUser, setActiveComment, startCommentDraft } from "./comments-plugin.js";

package/dist/features/composites/accepted-children.d.ts

@@ -1,6 +1,7 @@
 import { Translate } from "../../i18n/index.js";
 import { Notifier } from "../../core/notify.js";
 import "../../core/command-types.js";
+import "./block-types.js";
 import { Extension } from "@tiptap/core";
 import { Node as Node$1 } from "@tiptap/pm/model";
 //#region src/features/composites/accepted-children.d.ts
@@ -11,11 +12,11 @@ export interface AcceptedChildrenOptions {
   t: Translate;
 }
 /**
- * Enforces the kinds' accepted children (`CompositeKind.accepts`) for every local edit at one place: a transaction that
- * leaves the document with more Bausteine nested in a Baustein that does not accept them than before is refused — block
- * drag, „In Baustein umwandeln“, paste, AI inserts and review acceptance, `moveBlockInto` — and the user is told why.
+ * Enforces the kinds' accepted children (`BlockType.accepts`) for every local edit at one place: a transaction that
+ * leaves the document with more Typed blocks nested in a Typed block that does not accept them than before is refused — block
+ * drag, „In Block umwandeln“, paste, AI inserts and review acceptance, `moveBlockInto` — and the user is told why.
  * Existing violations stay: transactions that add none (typing, undoing) pass, and so do collaboration replays, undo/redo
- * and loading a whole document. Client-only, no schema: kinds are read from the editor (`compositeKindsOf`).
+ * and loading a whole document. Client-only, no schema: kinds are read from the editor (`blockTypesOf`).
  */
 export declare const AcceptedChildren: Extension<AcceptedChildrenOptions, any>;
 //#endregion

package/dist/features/composites/accepted-children.js

@@ -1,6 +1,6 @@
 import { createTranslator } from "../../i18n/index.js";
-import { compositeKind, kindAccepts } from "./kinds.js";
-import { compositeKindsOf } from "./nodes.js";
+import { acceptsChild, blockTypeOf } from "./block-types.js";
+import { blockTypesOf } from "./nodes.js";
 import { Extension } from "@tiptap/core";
 import { Plugin, PluginKey } from "@tiptap/pm/state";
 import { AddMarkStep, AttrStep, RemoveMarkStep, ReplaceStep } from "@tiptap/pm/transform";
@@ -8,19 +8,19 @@ import { AddMarkStep, AttrStep, RemoveMarkStep, ReplaceStep } from "@tiptap/pm/t
 /** The short sentence for a refused nesting, naming both kinds by label (German: „Notiz nimmt keine Aufgabe auf.“). */
 function nestingReason(kinds, parent, child, t) {
 	return t("composites.nesting.refused", {
-		parent: compositeKind(kinds, parent).label,
-		child: compositeKind(kinds, child).label
+		parent: blockTypeOf(kinds, parent).label,
+		child: blockTypeOf(kinds, child).label
 	});
 }
 /**
-* The Bausteine of `node`'s subtree, outermost first: `node` itself when it is a Baustein, otherwise the Bausteine
-* directly inside it (not those nested in another Baustein).
+* The Typed blocks of `node`'s subtree, outermost first: `node` itself when it is a Typed block, otherwise the Typed blocks
+* directly inside it (not those nested in another Typed block).
 */
 function outermostComposites(node) {
-	if (node.type.name === "composite") return [node];
+	if (node.type.name === "typedBlock") return [node];
 	const found = [];
 	node.descendants((child) => {
-		if (child.type.name === "composite") {
+		if (child.type.name === "typedBlock") {
 			found.push(child);
 			return false;
 		}
@@ -29,17 +29,17 @@ function outermostComposites(node) {
 	return found;
 }
 /**
-* Every Baustein in `doc` whose nearest Baustein ancestor (quotes and lists in between do not count) does not accept
-* its kind, in document order. Top-level Bausteine have no parent and never violate.
+* Every Typed block in `doc` whose nearest Typed block ancestor (quotes and lists in between do not count) does not accept
+* its Block type, in document order. Top-level Typed blocks have no parent and never violate.
 */
 function nestingViolations(doc, kinds) {
 	const found = [];
 	function walk(node, parentKind) {
 		node.forEach((child) => {
 			if (child.isTextblock || child.isLeaf) return;
-			if (child.type.name === "composite") {
-				const kind = String(child.attrs.kind);
-				if (parentKind !== null && !kindAccepts(kinds, parentKind, kind)) found.push({
+			if (child.type.name === "typedBlock") {
+				const kind = String(child.attrs.blockType);
+				if (parentKind !== null && !acceptsChild(kinds, parentKind, kind)) found.push({
 					parent: parentKind,
 					child: kind
 				});
@@ -51,24 +51,24 @@ function nestingViolations(doc, kinds) {
 	return found;
 }
 /**
-* The insert guard of the composites feature: a Baustein of kind `creates.attrs.kind` may be created only where the
-* nearest Baustein around the insertion point (`$parent` and outward; quotes and lists in between do not count)
-* accepts that kind, or where there is none. Uses `kindAccepts`, the rule `AcceptedChildren` enforces on transactions
+* The insert guard of the composites feature: a Typed block of Block type `creates.attrs.blockType` may be created only where the
+* nearest Typed block around the insertion point (`$parent` and outward; quotes and lists in between do not count)
+* accepts that kind, or where there is none. Uses `acceptsChild`, the rule `AcceptedChildren` enforces on transactions
 * through `nestingViolations`, so the `/` menu and toolbar offer exactly what an edit would not be refused for.
 */
 const compositeInsertGuard = (editor, $parent, creates) => {
-	const child = creates.attrs?.kind;
-	if (creates.type !== "composite" || typeof child !== "string") return true;
+	const child = creates.attrs?.blockType;
+	if (creates.type !== "typedBlock" || typeof child !== "string") return true;
 	for (let depth = $parent.depth; depth >= 0; depth--) {
 		const node = $parent.node(depth);
-		if (node.type.name === "composite") return kindAccepts(compositeKindsOf(editor), String(node.attrs.kind), child);
+		if (node.type.name === "typedBlock") return acceptsChild(blockTypesOf(editor), String(node.attrs.blockType), child);
 	}
 	return true;
 };
-/** A step that cannot change which Baustein sits in which: marks, text typed or deleted inside one textblock, attributes other than `kind`. */
+/** A step that cannot change which Typed block sits in which: marks, text typed or deleted inside one textblock, attributes other than `blockType`. */
 function keepsNesting(step, before) {
 	if (step instanceof AddMarkStep || step instanceof RemoveMarkStep) return true;
-	if (step instanceof AttrStep) return step.attr !== "kind";
+	if (step instanceof AttrStep) return step.attr !== "blockType";
 	if (step instanceof ReplaceStep) {
 		const { slice } = step;
 		if (slice.openStart !== 0 || slice.openEnd !== 0 || !slice.content.content.every((child) => child.isInline)) return false;
@@ -97,11 +97,11 @@ function addedViolation(before, after) {
 	return after[0];
 }
 /**
-* Enforces the kinds' accepted children (`CompositeKind.accepts`) for every local edit at one place: a transaction that
-* leaves the document with more Bausteine nested in a Baustein that does not accept them than before is refused — block
-* drag, „In Baustein umwandeln“, paste, AI inserts and review acceptance, `moveBlockInto` — and the user is told why.
+* Enforces the kinds' accepted children (`BlockType.accepts`) for every local edit at one place: a transaction that
+* leaves the document with more Typed blocks nested in a Typed block that does not accept them than before is refused — block
+* drag, „In Block umwandeln“, paste, AI inserts and review acceptance, `moveBlockInto` — and the user is told why.
 * Existing violations stay: transactions that add none (typing, undoing) pass, and so do collaboration replays, undo/redo
-* and loading a whole document. Client-only, no schema: kinds are read from the editor (`compositeKindsOf`).
+* and loading a whole document. Client-only, no schema: kinds are read from the editor (`blockTypesOf`).
 */
 const AcceptedChildren = Extension.create({
 	name: "acceptedChildren",
@@ -118,7 +118,7 @@ const AcceptedChildren = Extension.create({
 				if (!tr.docChanged || isReplay(tr)) return true;
 				if (tr.steps.some((step, index) => step instanceof ReplaceStep && step.from === 0 && step.to === tr.docs[index].content.size)) return true;
 				if (tr.steps.every((step, index) => keepsNesting(step, tr.docs[index]))) return true;
-				const kinds = compositeKindsOf(editor);
+				const kinds = blockTypesOf(editor);
 				const before = nestingViolations(state.doc, kinds);
 				const after = nestingViolations(tr.doc, kinds);
 				if (after.length <= before.length) return true;