@ecsplico/editor 0.0.0-stage → 2.0.0

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

@@ -0,0 +1,52 @@
+import { 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) {
+	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) {
+	const left = dom.getBoundingClientRect().left;
+	return hasKindIcon(dom) ? left : left - handleWidth - gutterShiftOf(node, dom);
+}
+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");
+	if (!textblock) return 0;
+	const style = getComputedStyle(textblock);
+	const lineHeight = Number.parseFloat(style.lineHeight) || Number.parseFloat(style.fontSize) * 1.2;
+	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.
+*/
+function handleBlocksOf(view) {
+	const blocks = [];
+	view.state.doc.descendants((node, pos, parent, index) => {
+		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,
+			pos,
+			dom
+		});
+	});
+	return blocks;
+}
+//#endregion
+export { firstLineCenterShift, gutterShiftOf, handleBlocksOf, handleLeftOf, hasKindIcon };
+
+//# sourceMappingURL=handle-geometry.js.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,3 @@
+import { BlockActionEntry, blockActionsFor, effectiveTarget } from "./block-actions.js";
+import { BlockUiUi, blockUiFeatureCore } from "./feature.js";
+export { type BlockActionEntry, type BlockUiUi, blockActionsFor, blockUiFeatureCore, effectiveTarget };

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

@@ -0,0 +1,3 @@
+import { blockUiFeatureCore } from "./feature.js";
+import { blockActionsFor, effectiveTarget } from "./block-actions.js";
+export { blockActionsFor, blockUiFeatureCore, effectiveTarget };

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

@@ -0,0 +1,19 @@
+import { BlockAction, BlockTarget } from "../../../core/extension-points.js";
+import "../../../core/index.js";
+import { Editor } from "@tiptap/core";
+//#region src/features/block-ui/react/BlockActionsOverlay.d.ts
+/**
+ * The hover actions of a block, right-aligned at the editor's text column (the drag handle sits on the block's left and
+ * targets the same block). Positioned absolutely inside `host`, a `relative` element around the editor; the composite
+ * chrome (title, description, tags) addresses the composite (`effectiveTarget`). The bar is hidden while the editor is
+ * read-only. `menu` actions open a dropdown of their items instead of running on click.
+ */
+export declare function BlockActionsOverlay({ editor, target, actions, host, onHover }: {
+  editor: Editor;
+  target: BlockTarget | null;
+  actions: readonly BlockAction[];
+  host: HTMLElement | null;
+  onHover: (hovered: boolean) => void;
+}): import("react").JSX.Element | null;
+//#endregion
+//# sourceMappingURL=BlockActionsOverlay.d.ts.map

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

@@ -0,0 +1,142 @@
+import { Icon } from "../../../react/Icon.js";
+import { Button } from "../../../react/ui/button.js";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "../../../react/ui/tooltip.js";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from "../../../react/ui/dropdown-menu.js";
+import { blockActionsFor, effectiveTarget } from "../block-actions.js";
+import { useEffect, useLayoutEffect, useReducer, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/features/block-ui/react/BlockActionsOverlay.tsx
+/** Gap between the bar and the editor's right edge. */
+const EDGE_GUTTER = 8;
+/**
+* The hover actions of a block, right-aligned at the editor's text column (the drag handle sits on the block's left and
+* targets the same block). Positioned absolutely inside `host`, a `relative` element around the editor; the composite
+* chrome (title, description, tags) addresses the composite (`effectiveTarget`). The bar is hidden while the editor is
+* read-only. `menu` actions open a dropdown of their items instead of running on click.
+*/
+function BlockActionsOverlay({ editor, target, actions, host, onHover }) {
+	const [, rerender] = useReducer((count) => count + 1, 0);
+	useEffect(() => {
+		editor.on("transaction", rerender);
+		return () => {
+			editor.off("transaction", rerender);
+		};
+	}, [editor]);
+	const block = (() => {
+		if (!target || editor.isDestroyed) return null;
+		const { doc } = editor.state;
+		if (target.pos < 0 || target.pos >= doc.content.size) return null;
+		const node = doc.nodeAt(target.pos);
+		if (!node || node.type !== target.node.type) return null;
+		return effectiveTarget(editor, {
+			node,
+			pos: target.pos
+		});
+	})();
+	const items = block && editor.isEditable ? blockActionsFor(editor, block, actions) : [];
+	const [place, setPlace] = useState(null);
+	const measure = () => {
+		const dom = block && host && !editor.isDestroyed ? editor.view.nodeDOM(block.pos) : null;
+		if (!(dom instanceof HTMLElement) || !host) {
+			setPlace(null);
+			return;
+		}
+		const hostRect = host.getBoundingClientRect();
+		const top = dom.getBoundingClientRect().top - hostRect.top + 2;
+		const right = hostRect.right - editor.view.dom.getBoundingClientRect().right + EDGE_GUTTER;
+		setPlace((previous) => previous && previous.top === top && previous.right === right ? previous : {
+			top,
+			right
+		});
+	};
+	useLayoutEffect(measure);
+	const visible = editor.isEditable && items.length > 0 && place !== null;
+	const latestMeasure = useRef(measure);
+	latestMeasure.current = measure;
+	useEffect(() => {
+		const run = () => latestMeasure.current();
+		window.addEventListener("resize", run);
+		window.addEventListener("scroll", run, true);
+		const resizeObserver = new ResizeObserver(run);
+		resizeObserver.observe(editor.view.dom);
+		return () => {
+			window.removeEventListener("resize", run);
+			window.removeEventListener("scroll", run, true);
+			resizeObserver.disconnect();
+		};
+	}, [editor]);
+	const root = useRef(null);
+	const menuOpen = useRef(false);
+	const onMenuOpenChange = (open) => {
+		menuOpen.current = open;
+		onHover(open || !!root.current?.matches(":hover"));
+	};
+	const wasVisible = useRef(false);
+	useEffect(() => {
+		if (wasVisible.current && !visible) {
+			menuOpen.current = false;
+			onHover(false);
+		}
+		wasVisible.current = visible;
+	}, [visible, onHover]);
+	if (!visible || !place) return null;
+	return /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsx("div", {
+		ref: root,
+		className: "block-actions absolute z-10 flex gap-0.5 rounded-md border border-border bg-background p-0.5 shadow-sm",
+		style: {
+			top: `${place.top}px`,
+			right: `${place.right}px`
+		},
+		onMouseEnter: () => onHover(true),
+		onMouseLeave: () => {
+			if (!menuOpen.current) onHover(false);
+		},
+		children: items.map((entry) => {
+			const button = /* @__PURE__ */ jsx(Button, {
+				variant: "ghost",
+				size: "icon-xs",
+				"aria-label": entry.action.label,
+				onMouseDown: (event) => event.preventDefault(),
+				onClick: entry.menu ? void 0 : () => entry.action.run?.(entry.ctx),
+				children: /* @__PURE__ */ jsx(Icon, { name: entry.action.icon })
+			});
+			if (!entry.menu) return /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
+				asChild: true,
+				children: button
+			}), /* @__PURE__ */ jsx(TooltipContent, { children: entry.action.label })] }, entry.action.id);
+			return /* @__PURE__ */ jsxs(DropdownMenu, {
+				onOpenChange: onMenuOpenChange,
+				children: [/* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
+					asChild: true,
+					children: /* @__PURE__ */ jsx(DropdownMenuTrigger, {
+						asChild: true,
+						children: button
+					})
+				}), /* @__PURE__ */ jsx(TooltipContent, { children: entry.action.label })] }), /* @__PURE__ */ jsx(DropdownMenuContent, {
+					align: "end",
+					children: entry.menu.map((item, index) => /* @__PURE__ */ jsx(MenuRow, { item }, index))
+				})]
+			}, entry.action.id);
+		})
+	}) });
+}
+function MenuRow({ item }) {
+	if (item.type === "label") return /* @__PURE__ */ jsx(DropdownMenuLabel, { children: item.label });
+	if (item.type === "separator") return /* @__PURE__ */ jsx(DropdownMenuSeparator, {});
+	return /* @__PURE__ */ jsxs(DropdownMenuItem, {
+		disabled: item.disabled,
+		onSelect: () => item.onSelect?.(),
+		children: [
+			item.icon && /* @__PURE__ */ jsx(Icon, { name: item.icon }),
+			/* @__PURE__ */ jsx("span", { children: item.label }),
+			item.description && /* @__PURE__ */ jsx("span", {
+				className: "ml-auto text-xs text-muted-foreground",
+				children: item.description
+			})
+		]
+	});
+}
+//#endregion
+export { BlockActionsOverlay };
+
+//# sourceMappingURL=BlockActionsOverlay.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BlockActionsOverlay.js","names":[],"sources":["../../../../src/features/block-ui/react/BlockActionsOverlay.tsx"],"sourcesContent":["import type { Editor } from '@tiptap/core'\nimport { useEffect, useLayoutEffect, useReducer, useRef, useState } from 'react'\nimport type { BlockAction, BlockTarget, MenuItem } from '../../../core'\nimport { Icon } from '../../../react/Icon'\nimport { Button } from '../../../react/ui/button'\nimport { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from '../../../react/ui/dropdown-menu'\nimport { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '../../../react/ui/tooltip'\nimport { blockActionsFor, effectiveTarget } from '../block-actions'\n\n/** Gap between the bar and the editor's right edge. */\nconst EDGE_GUTTER = 8\n\n/**\n * The hover actions of a block, right-aligned at the editor's text column (the drag handle sits on the block's left and\n * targets the same block). Positioned absolutely inside `host`, a `relative` element around the editor; the composite\n * chrome (title, description, tags) addresses the composite (`effectiveTarget`). The bar is hidden while the editor is\n * read-only. `menu` actions open a dropdown of their items instead of running on click.\n */\nexport function BlockActionsOverlay({ editor, target, actions, host, onHover }: {\n  editor: Editor\n  target: BlockTarget | null\n  actions: readonly BlockAction[]\n  host: HTMLElement | null\n  onHover: (hovered: boolean) => void\n}) {\n  // The document and `isEditable` change with transactions (`setEditable` dispatches one too): render on each.\n  const [, rerender] = useReducer((count: number) => count + 1, 0)\n  useEffect(() => {\n    editor.on('transaction', rerender)\n    return () => { editor.off('transaction', rerender) }\n  }, [editor])\n\n  // The target in the current document; null once its position holds something else (deleted, replaced).\n  const block = ((): BlockTarget | null => {\n    if (!target || editor.isDestroyed) return null\n    const { doc } = editor.state\n    if (target.pos < 0 || target.pos >= doc.content.size) return null\n    const node = doc.nodeAt(target.pos)\n    if (!node || node.type !== target.node.type) return null\n    return effectiveTarget(editor, { node, pos: target.pos })\n  })()\n  const items = block && editor.isEditable ? blockActionsFor(editor, block, actions) : []\n\n  const [place, setPlace] = useState<{ top: number, right: number } | null>(null)\n  const measure = () => {\n    const dom = block && host && !editor.isDestroyed ? editor.view.nodeDOM(block.pos) : null\n    if (!(dom instanceof HTMLElement) || !host) {\n      setPlace(null)\n      return\n    }\n    const hostRect = host.getBoundingClientRect()\n    const rect = dom.getBoundingClientRect()\n    const top = rect.top - hostRect.top + 2\n    const right = hostRect.right - editor.view.dom.getBoundingClientRect().right + EDGE_GUTTER\n    setPlace(previous => (previous && previous.top === top && previous.right === right ? previous : { top, right }))\n  }\n  // After every render: the block, the document or the layout may have moved it. Equal positions bail out of the state update.\n  useLayoutEffect(measure)\n\n  const visible = editor.isEditable && items.length > 0 && place !== null\n\n  // The bar follows the editor's right edge when the column resizes without the window doing so.\n  const latestMeasure = useRef(measure)\n  latestMeasure.current = measure\n  useEffect(() => {\n    const run = () => latestMeasure.current()\n    window.addEventListener('resize', run)\n    window.addEventListener('scroll', run, true)\n    const resizeObserver = new ResizeObserver(run)\n    resizeObserver.observe(editor.view.dom)\n    return () => {\n      window.removeEventListener('resize', run)\n      window.removeEventListener('scroll', run, true)\n      resizeObserver.disconnect()\n    }\n  }, [editor])\n\n  // An open action menu is rendered outside the overlay (portal): the overlay counts as hovered until the menu closes.\n  const root = useRef<HTMLDivElement>(null)\n  const menuOpen = useRef(false)\n  const onMenuOpenChange = (open: boolean) => {\n    menuOpen.current = open\n    onHover(open || !!root.current?.matches(':hover'))\n  }\n\n  // A vanishing overlay sends no mouseleave: report it, so the host does not keep waiting for one.\n  const wasVisible = useRef(false)\n  useEffect(() => {\n    if (wasVisible.current && !visible) {\n      menuOpen.current = false\n      onHover(false)\n    }\n    wasVisible.current = visible\n  }, [visible, onHover])\n\n  if (!visible || !place) return null\n  return (\n    <TooltipProvider>\n      <div\n        ref={root}\n        className=\"block-actions absolute z-10 flex gap-0.5 rounded-md border border-border bg-background p-0.5 shadow-sm\"\n        style={{ top: `${place.top}px`, right: `${place.right}px` }}\n        onMouseEnter={() => onHover(true)}\n        onMouseLeave={() => { if (!menuOpen.current) onHover(false) }}\n      >\n        {items.map((entry) => {\n          const button = (\n            <Button\n              variant=\"ghost\"\n              size=\"icon-xs\"\n              aria-label={entry.action.label}\n              onMouseDown={event => event.preventDefault()}\n              onClick={entry.menu ? undefined : () => entry.action.run?.(entry.ctx)}\n            >\n              <Icon name={entry.action.icon} />\n            </Button>\n          )\n          if (!entry.menu) {\n            return (\n              <Tooltip key={entry.action.id}>\n                <TooltipTrigger asChild>{button}</TooltipTrigger>\n                <TooltipContent>{entry.action.label}</TooltipContent>\n              </Tooltip>\n            )\n          }\n          return (\n            <DropdownMenu key={entry.action.id} onOpenChange={onMenuOpenChange}>\n              <Tooltip>\n                <TooltipTrigger asChild>\n                  <DropdownMenuTrigger asChild>{button}</DropdownMenuTrigger>\n                </TooltipTrigger>\n                <TooltipContent>{entry.action.label}</TooltipContent>\n              </Tooltip>\n              <DropdownMenuContent align=\"end\">\n                {entry.menu.map((item, index) => <MenuRow key={index} item={item} />)}\n              </DropdownMenuContent>\n            </DropdownMenu>\n          )\n        })}\n      </div>\n    </TooltipProvider>\n  )\n}\n\nfunction MenuRow({ item }: { item: MenuItem }) {\n  if (item.type === 'label') return <DropdownMenuLabel>{item.label}</DropdownMenuLabel>\n  if (item.type === 'separator') return <DropdownMenuSeparator />\n  return (\n    <DropdownMenuItem disabled={item.disabled} onSelect={() => item.onSelect?.()}>\n      {item.icon && <Icon name={item.icon} />}\n      <span>{item.label}</span>\n      {item.description && <span className=\"ml-auto text-xs text-muted-foreground\">{item.description}</span>}\n    </DropdownMenuItem>\n  )\n}\n"],"mappings":";;;;;;;;;AAUA,MAAM,cAAc;;;;;;;AAQpB,SAAgB,oBAAoB,EAAE,QAAQ,QAAQ,SAAS,MAAM,WAMlE;CAED,MAAM,GAAG,YAAY,YAAY,UAAkB,QAAQ,GAAG,CAAC;CAC/D,gBAAgB;EACd,OAAO,GAAG,eAAe,QAAQ;EACjC,aAAa;GAAE,OAAO,IAAI,eAAe,QAAQ;EAAE;CACrD,GAAG,CAAC,MAAM,CAAC;CAGX,MAAM,eAAmC;EACvC,IAAI,CAAC,UAAU,OAAO,aAAa,OAAO;EAC1C,MAAM,EAAE,QAAQ,OAAO;EACvB,IAAI,OAAO,MAAM,KAAK,OAAO,OAAO,IAAI,QAAQ,MAAM,OAAO;EAC7D,MAAM,OAAO,IAAI,OAAO,OAAO,GAAG;EAClC,IAAI,CAAC,QAAQ,KAAK,SAAS,OAAO,KAAK,MAAM,OAAO;EACpD,OAAO,gBAAgB,QAAQ;GAAE;GAAM,KAAK,OAAO;EAAI,CAAC;CAC1D,EAAA,CAAG;CACH,MAAM,QAAQ,SAAS,OAAO,aAAa,gBAAgB,QAAQ,OAAO,OAAO,IAAI,CAAC;CAEtF,MAAM,CAAC,OAAO,YAAY,SAAgD,IAAI;CAC9E,MAAM,gBAAgB;EACpB,MAAM,MAAM,SAAS,QAAQ,CAAC,OAAO,cAAc,OAAO,KAAK,QAAQ,MAAM,GAAG,IAAI;EACpF,IAAI,EAAE,eAAe,gBAAgB,CAAC,MAAM;GAC1C,SAAS,IAAI;GACb;EACF;EACA,MAAM,WAAW,KAAK,sBAAsB;EAE5C,MAAM,MADO,IAAI,sBACF,CAAC,CAAC,MAAM,SAAS,MAAM;EACtC,MAAM,QAAQ,SAAS,QAAQ,OAAO,KAAK,IAAI,sBAAsB,CAAC,CAAC,QAAQ;EAC/E,UAAS,aAAa,YAAY,SAAS,QAAQ,OAAO,SAAS,UAAU,QAAQ,WAAW;GAAE;GAAK;EAAM,CAAE;CACjH;CAEA,gBAAgB,OAAO;CAEvB,MAAM,UAAU,OAAO,cAAc,MAAM,SAAS,KAAK,UAAU;CAGnE,MAAM,gBAAgB,OAAO,OAAO;CACpC,cAAc,UAAU;CACxB,gBAAgB;EACd,MAAM,YAAY,cAAc,QAAQ;EACxC,OAAO,iBAAiB,UAAU,GAAG;EACrC,OAAO,iBAAiB,UAAU,KAAK,IAAI;EAC3C,MAAM,iBAAiB,IAAI,eAAe,GAAG;EAC7C,eAAe,QAAQ,OAAO,KAAK,GAAG;EACtC,aAAa;GACX,OAAO,oBAAoB,UAAU,GAAG;GACxC,OAAO,oBAAoB,UAAU,KAAK,IAAI;GAC9C,eAAe,WAAW;EAC5B;CACF,GAAG,CAAC,MAAM,CAAC;CAGX,MAAM,OAAO,OAAuB,IAAI;CACxC,MAAM,WAAW,OAAO,KAAK;CAC7B,MAAM,oBAAoB,SAAkB;EAC1C,SAAS,UAAU;EACnB,QAAQ,QAAQ,CAAC,CAAC,KAAK,SAAS,QAAQ,QAAQ,CAAC;CACnD;CAGA,MAAM,aAAa,OAAO,KAAK;CAC/B,gBAAgB;EACd,IAAI,WAAW,WAAW,CAAC,SAAS;GAClC,SAAS,UAAU;GACnB,QAAQ,KAAK;EACf;EACA,WAAW,UAAU;CACvB,GAAG,CAAC,SAAS,OAAO,CAAC;CAErB,IAAI,CAAC,WAAW,CAAC,OAAO,OAAO;CAC/B,OACE,oBAAC,iBAAD,EAAA,UACE,oBAAC,OAAD;EACE,KAAK;EACL,WAAU;EACV,OAAO;GAAE,KAAK,GAAG,MAAM,IAAI;GAAK,OAAO,GAAG,MAAM,MAAM;EAAI;EAC1D,oBAAoB,QAAQ,IAAI;EAChC,oBAAoB;GAAE,IAAI,CAAC,SAAS,SAAS,QAAQ,KAAK;EAAE;EAE3D,UAAA,MAAM,KAAK,UAAU;GACpB,MAAM,SACJ,oBAAC,QAAD;IACE,SAAQ;IACR,MAAK;IACL,cAAY,MAAM,OAAO;IACzB,cAAa,UAAS,MAAM,eAAe;IAC3C,SAAS,MAAM,OAAO,KAAA,UAAkB,MAAM,OAAO,MAAM,MAAM,GAAG;IAEpE,UAAA,oBAAC,MAAD,EAAM,MAAM,MAAM,OAAO,KAAO,CAAA;GAC1B,CAAA;GAEV,IAAI,CAAC,MAAM,MACT,OACE,qBAAC,SAAD,EAAA,UAAA,CACE,oBAAC,gBAAD;IAAgB,SAAA;IAAS,UAAA;GAAuB,CAAA,GAChD,oBAAC,gBAAD,EAAA,UAAiB,MAAM,OAAO,MAAsB,CAAA,CAC7C,EAAA,GAHK,MAAM,OAAO,EAGlB;GAGb,OACE,qBAAC,cAAD;IAAoC,cAAc;IAAlD,UAAA,CACE,qBAAC,SAAD,EAAA,UAAA,CACE,oBAAC,gBAAD;KAAgB,SAAA;KACd,UAAA,oBAAC,qBAAD;MAAqB,SAAA;MAAS,UAAA;KAA4B,CAAA;IAC5C,CAAA,GAChB,oBAAC,gBAAD,EAAA,UAAiB,MAAM,OAAO,MAAsB,CAAA,CAC7C,EAAA,CAAA,GACT,oBAAC,qBAAD;KAAqB,OAAM;KACxB,UAAA,MAAM,KAAK,KAAK,MAAM,UAAU,oBAAC,SAAD,EAA2B,KAAO,GAApB,KAAoB,CAAC;IACjD,CAAA,CACT;GAVK,GAAA,MAAM,OAAO,EAUlB;EAElB,CAAC;CACE,CAAA,EACU,CAAA;AAErB;AAEA,SAAS,QAAQ,EAAE,QAA4B;CAC7C,IAAI,KAAK,SAAS,SAAS,OAAO,oBAAC,mBAAD,EAAA,UAAoB,KAAK,MAAyB,CAAA;CACpF,IAAI,KAAK,SAAS,aAAa,OAAO,oBAAC,uBAAD,CAAwB,CAAA;CAC9D,OACE,qBAAC,kBAAD;EAAkB,UAAU,KAAK;EAAU,gBAAgB,KAAK,WAAW;EAA3E,UAAA;GACG,KAAK,QAAQ,oBAAC,MAAD,EAAM,MAAM,KAAK,KAAO,CAAA;GACtC,oBAAC,QAAD,EAAA,UAAO,KAAK,MAAY,CAAA;GACvB,KAAK,eAAe,oBAAC,QAAD;IAAM,WAAU;IAAyC,UAAA,KAAK;GAAkB,CAAA;EACrF;;AAEtB"}

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

@@ -0,0 +1,15 @@
+import { Editor } from "@tiptap/core";
+//#region src/features/block-ui/react/BlockHandles.d.ts
+/**
+ * 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
+ * while the editor is read-only. Positioned absolutely inside `host`, the `relative` element around the editor.
+ */
+export declare function BlockHandles({ editor, host }: {
+  editor: Editor;
+  host: HTMLElement;
+}): import("react").JSX.Element;
+//#endregion
+//# sourceMappingURL=BlockHandles.d.ts.map

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

@@ -0,0 +1,104 @@
+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 { useEffect, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/features/block-ui/react/BlockHandles.tsx
+/**
+* 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
+* while the editor is read-only. Positioned absolutely inside `host`, the `relative` element around the editor.
+*/
+function BlockHandles({ editor, host }) {
+	const [handles, setHandles] = useState([]);
+	const [dragging, setDragging] = useState(false);
+	useEffect(() => {
+		let raf = 0;
+		let wasEditable = false;
+		const schedule = () => {
+			if (!raf) raf = requestAnimationFrame(measure);
+		};
+		function measure() {
+			raf = 0;
+			wasEditable = !editor.isDestroyed && editor.isEditable;
+			if (!wasEditable || !editor.view.dom.getClientRects().length) {
+				setHandles((previous) => previous.length ? [] : previous);
+				return;
+			}
+			const hostRect = host.getBoundingClientRect();
+			const originX = hostRect.left + host.clientLeft;
+			const originY = hostRect.top + host.clientTop;
+			const next = [];
+			for (const { node, 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 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,
+					left,
+					top
+				});
+			}
+			setHandles((previous) => {
+				return previous.length !== next.length || next.some((handle, index) => {
+					const before = previous[index];
+					return !before || handle.pos !== before.pos || handle.left !== before.left || handle.top !== before.top;
+				}) ? next : previous;
+			});
+		}
+		const onTransaction = ({ transaction }) => {
+			if (transaction.docChanged || editor.isEditable !== wasEditable) schedule();
+		};
+		editor.on("transaction", onTransaction);
+		window.addEventListener("resize", schedule);
+		window.addEventListener("scroll", schedule, true);
+		const resizeObserver = new ResizeObserver(schedule);
+		resizeObserver.observe(editor.view.dom);
+		schedule();
+		return () => {
+			editor.off("transaction", onTransaction);
+			window.removeEventListener("resize", schedule);
+			window.removeEventListener("scroll", schedule, true);
+			resizeObserver.disconnect();
+			if (raf) cancelAnimationFrame(raf);
+		};
+	}, [editor, host]);
+	function onDragStart(event, pos) {
+		if (!startBlockDrag(editor, event.nativeEvent, pos)) {
+			event.preventDefault();
+			return;
+		}
+		setTimeout(() => setDragging(true));
+		const abort = new AbortController();
+		const end = () => {
+			setDragging(false);
+			abort.abort();
+		};
+		document.addEventListener("drop", end, { signal: abort.signal });
+		document.addEventListener("dragend", end, { signal: abort.signal });
+	}
+	return /* @__PURE__ */ jsx("div", {
+		className: "absolute left-0 top-0 z-10 h-0 w-0",
+		children: handles.map((handle) => /* @__PURE__ */ jsx("div", {
+			draggable: true,
+			"aria-hidden": "true",
+			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"),
+			style: {
+				left: `${handle.left}px`,
+				top: `${handle.top}px`,
+				width: `24px`,
+				height: `24px`
+			},
+			onDragStart: (event) => onDragStart(event, handle.pos),
+			children: /* @__PURE__ */ jsx(Icon, { name: "i-lucide-grip-vertical" })
+		}, handle.pos))
+	});
+}
+//#endregion
+export { BlockHandles };
+
+//# sourceMappingURL=BlockHandles.js.map

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

@@ -0,0 +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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"}

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

@@ -0,0 +1,14 @@
+import { Editor } from "@tiptap/core";
+//#region src/features/block-ui/react/BlockUi.d.ts
+/**
+ * Block UI of an editor: the drag handle on the left of the hovered block (hidden while the editor is read-only) and the
+ * hover actions (`BlockActionsOverlay`) at the editor's right edge, both targeting the same block. The actions are those
+ * the surface registered for `editor` (features' block actions, then the host's). A block with a kind icon (a composite)
+ * gets no handle: its icon drags it. With `blocks.dragHandle: 'always'` the hover handle is replaced by permanent
+ * handles on every eligible block (`BlockHandles`). Mounted by the block-ui feature beside the editor.
+ */
+export declare function BlockUi({ editor }: {
+  editor: Editor;
+}): import("react").JSX.Element;
+//#endregion
+//# sourceMappingURL=BlockUi.d.ts.map

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

@@ -0,0 +1,174 @@
+import { isChromeNode } from "../../../core/schema/node-flags.js";
+import { editorEntryOf } from "../../../core/editor-ui.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 { BlockActionsOverlay } from "./BlockActionsOverlay.js";
+import { BlockHandles } from "./BlockHandles.js";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { DragHandle } from "@tiptap/extension-drag-handle-react";
+import { createPortal } from "react-dom";
+//#region src/features/block-ui/react/BlockUi.tsx
+/**
+* Block UI of an editor: the drag handle on the left of the hovered block (hidden while the editor is read-only) and the
+* hover actions (`BlockActionsOverlay`) at the editor's right edge, both targeting the same block. The actions are those
+* the surface registered for `editor` (features' block actions, then the host's). A block with a kind icon (a composite)
+* gets no handle: its icon drags it. With `blocks.dragHandle: 'always'` the hover handle is replaced by permanent
+* handles on every eligible block (`BlockHandles`). Mounted by the block-ui feature beside the editor.
+*/
+function BlockUi({ editor }) {
+	const [host, setHost] = useState(null);
+	const [hoverTarget, setHoverTarget] = useState(null);
+	const [targetHasKindIcon, setTargetHasKindIcon] = useState(false);
+	const { settings } = useEditorSettings();
+	const actions = editorEntryOf(editor)?.blockActions ?? [];
+	const track = useRef({
+		overlayHovered: false,
+		clearTimer: void 0,
+		pointer: null,
+		dom: null,
+		node: null,
+		gutterShift: 0
+	}).current;
+	const handleContent = useRef(null);
+	const handleWidth = () => handleContent.current?.parentElement?.offsetWidth ?? 0;
+	const scheduleHoverClear = useCallback(() => {
+		clearTimeout(track.clearTimer);
+		track.clearTimer = window.setTimeout(() => {
+			if (!track.overlayHovered) setHoverTarget(null);
+		}, 200);
+	}, [track]);
+	useEffect(() => {
+		if (editor.isDestroyed) return;
+		const dom = editor.view.dom;
+		setHost(dom.isConnected ? dom.parentElement : null);
+		const onKeydown = () => {
+			clearTimeout(track.clearTimer);
+			setHoverTarget(null);
+		};
+		const onMousemove = (event) => {
+			track.pointer = {
+				x: event.clientX,
+				y: event.clientY
+			};
+		};
+		dom.addEventListener("keydown", onKeydown);
+		dom.addEventListener("mousemove", onMousemove);
+		return () => {
+			clearTimeout(track.clearTimer);
+			dom.removeEventListener("keydown", onKeydown);
+			dom.removeEventListener("mousemove", onMousemove);
+			setHost(null);
+		};
+	}, [editor, track]);
+	const onOverlayHover = useCallback((hovered) => {
+		track.overlayHovered = hovered;
+		if (!hovered) scheduleHoverClear();
+	}, [track, scheduleHoverClear]);
+	const resetDragHandle = useCallback(() => {
+		if (editor.isDestroyed) return;
+		editor.view.dispatch(editor.state.tr.setMeta("hideDragHandle", true).setMeta("addToHistory", false));
+	}, [editor]);
+	const alwaysHandles = settings.blocks.dragHandle === "always";
+	const hoverHandleHidden = alwaysHandles || targetHasKindIcon;
+	const trackDragTarget = useCallback(({ node, pos }) => {
+		if (node) {
+			clearTimeout(track.clearTimer);
+			setHoverTarget({
+				node,
+				pos
+			});
+		} 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);
+	}, [
+		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,
+			y: track.dom ? y + firstLineCenterShift(track.dom, elements.reference.getBoundingClientRect().top, rects.floating.height) : y
+		})
+	}] }), [track]);
+	const dragHandleNested = useMemo(() => {
+		const pointerReachesTarget = () => {
+			const { pointer, node, dom } = track;
+			if (!pointer || !node || !dom?.isConnected) return false;
+			const rect = dom.getBoundingClientRect();
+			const { x, y } = pointer;
+			if (x < handleLeftOf(node, 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",
+			rules: [
+				{
+					id: "compositeChrome",
+					evaluate: ({ node }) => isChromeNode(node) ? 1e3 : 0
+				},
+				{
+					id: "reachTarget",
+					evaluate: () => pointerReachesTarget() ? 1e3 : 0
+				},
+				{
+					id: "ownGutter",
+					evaluate: ({ node, 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;
+					}
+				}
+			]
+		};
+	}, [track]);
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [host && createPortal(/* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(BlockActionsOverlay, {
+		editor,
+		target: hoverTarget,
+		host,
+		actions,
+		onHover: onOverlayHover
+	}), alwaysHandles && /* @__PURE__ */ jsx(BlockHandles, {
+		editor,
+		host
+	})] }), host), /* @__PURE__ */ jsx(DragHandle, {
+		editor,
+		onElementDragEnd: resetDragHandle,
+		onNodeChange: trackDragTarget,
+		computePositionConfig: dragHandlePosition,
+		nested: dragHandleNested,
+		className: cn("flex size-6 cursor-grab items-center justify-center rounded text-muted-foreground hover:bg-muted hover:text-foreground data-[dragging=true]:cursor-grabbing", hoverHandleHidden && "invisible! pointer-events-none!"),
+		children: /* @__PURE__ */ jsx("span", {
+			ref: handleContent,
+			className: "contents",
+			children: /* @__PURE__ */ jsx(Icon, { name: "i-lucide-grip-vertical" })
+		})
+	})] });
+}
+function laidOutSibling(dom, side) {
+	for (let element = dom[`${side}ElementSibling`]; element; element = element[`${side}ElementSibling`]) {
+		const rect = element.getBoundingClientRect();
+		if (rect.height > 0) return rect;
+	}
+	return null;
+}
+//#endregion
+export { BlockUi };
+
+//# sourceMappingURL=BlockUi.js.map

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

@@ -0,0 +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, 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 { 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 * hover actions (`BlockActionsOverlay`) at the editor's right edge, both targeting the same block. The actions are those\n * the surface registered for `editor` (features' block actions, then the host's). A block with a kind icon (a composite)\n * gets no handle: its icon drags it. With `blocks.dragHandle: 'always'` the hover handle is replaced by permanent\n * handles on every eligible 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\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          <BlockActionsOverlay editor={editor} target={hoverTarget} host={host} actions={actions} onHover={onOverlayHover} />\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/block-ui/react.d.ts

@@ -0,0 +1,11 @@
+import { ReactFeature } from "../../react/EditorSurface.js";
+import "../../react/index.js";
+import { BlockActionsOverlay } from "./react/BlockActionsOverlay.js";
+import { BlockHandles } from "./react/BlockHandles.js";
+import { BlockUi } from "./react/BlockUi.js";
+//#region src/features/block-ui/react.d.ts
+/** The React block-ui feature: the drag handle (`@tiptap/extension-drag-handle-react`), permanent handles and hover actions with shadcn menus. */
+export declare function blockUiFeature(): ReactFeature;
+//#endregion
+export { BlockActionsOverlay, BlockHandles, BlockUi };
+//# sourceMappingURL=react.d.ts.map