@ecsplico/editor 0.0.0-stage → 2.0.0

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

@@ -0,0 +1,142 @@
+import { useUiKit } from "../../../vue/kit/use-ui-kit.js";
+import { blockActionsFor, effectiveTarget } from "../block-actions.js";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createVNode, defineComponent, normalizeStyle, onBeforeUnmount, onMounted, openBlock, ref, renderList, unref, useTemplateRef, watch, withCtx, withModifiers } from "vue";
+//#region src/features/block-ui/components/BlockActionsOverlay.vue
+/** 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.
+*/
+const _sfc_main = /*@__PURE__*/ defineComponent({
+	__name: "BlockActionsOverlay",
+	props: {
+		editor: {},
+		target: {},
+		actions: {},
+		host: {}
+	},
+	emits: ["hover"],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const { Button: UButton, DropdownMenu: UDropdownMenu, Tooltip: UTooltip } = useUiKit();
+		const emit = __emit;
+		/** The target in the current document; null once its position holds something else (deleted, replaced). */
+		const block = computed(() => {
+			const { editor, target } = props;
+			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 editable = computed(() => {
+			props.editor.state;
+			return props.editor.isEditable;
+		});
+		const items = computed(() => block.value ? blockActionsFor(props.editor, block.value, props.actions) : []);
+		const top = ref(0);
+		const right = ref(0);
+		const measured = ref(false);
+		function measure() {
+			const { editor, host } = props;
+			const dom = block.value && host && !editor.isDestroyed ? editor.view.nodeDOM(block.value.pos) : null;
+			measured.value = dom instanceof HTMLElement;
+			if (!(dom instanceof HTMLElement) || !host) return;
+			const hostRect = host.getBoundingClientRect();
+			const rect = dom.getBoundingClientRect();
+			top.value = rect.top - hostRect.top + 2;
+			right.value = hostRect.right - editor.view.dom.getBoundingClientRect().right + EDGE_GUTTER;
+		}
+		watch([block, () => props.editor.state], measure, { flush: "post" });
+		const visible = computed(() => editable.value && items.value.length > 0 && measured.value);
+		const root = useTemplateRef("root");
+		const menuOpen = ref(false);
+		function onMenuOpen(open) {
+			menuOpen.value = open;
+			emit("hover", open || !!root.value?.matches(":hover"));
+		}
+		function onMouseLeave() {
+			if (!menuOpen.value) emit("hover", false);
+		}
+		watch(visible, (value) => {
+			if (value) return;
+			menuOpen.value = false;
+			emit("hover", false);
+		});
+		let resizeObserver;
+		onMounted(() => {
+			window.addEventListener("resize", measure);
+			window.addEventListener("scroll", measure, true);
+			resizeObserver = new ResizeObserver(measure);
+			resizeObserver.observe(props.editor.view.dom);
+		});
+		onBeforeUnmount(() => {
+			window.removeEventListener("resize", measure);
+			window.removeEventListener("scroll", measure, true);
+			resizeObserver?.disconnect();
+		});
+		return (_ctx, _cache) => {
+			return visible.value ? (openBlock(), createElementBlock("div", {
+				key: 0,
+				ref_key: "root",
+				ref: root,
+				class: "block-actions absolute z-10 flex gap-0.5 rounded-md border border-[var(--sk-border)] bg-[var(--sk-bg)] p-0.5 shadow-sm",
+				style: normalizeStyle({
+					top: `${top.value}px`,
+					right: `${right.value}px`
+				}),
+				onMouseenter: _cache[2] || (_cache[2] = ($event) => emit("hover", true)),
+				onMouseleave: onMouseLeave
+			}, [(openBlock(true), createElementBlock(Fragment, null, renderList(items.value, (entry) => {
+				return openBlock(), createElementBlock(Fragment, { key: entry.action.id }, [entry.menu ? (openBlock(), createBlock(unref(UDropdownMenu), {
+					key: 0,
+					items: entry.menu,
+					content: { align: "end" },
+					"onUpdate:open": onMenuOpen
+				}, {
+					default: withCtx(() => [createVNode(unref(UTooltip), { text: entry.action.label }, {
+						default: withCtx(() => [createVNode(unref(UButton), {
+							size: "xs",
+							color: "neutral",
+							variant: "ghost",
+							icon: entry.action.icon,
+							"aria-label": entry.action.label,
+							onMousedown: _cache[0] || (_cache[0] = withModifiers(() => {}, ["prevent"]))
+						}, null, 8, ["icon", "aria-label"])]),
+						_: 2
+					}, 1032, ["text"])]),
+					_: 2
+				}, 1032, ["items"])) : (openBlock(), createBlock(unref(UTooltip), {
+					key: 1,
+					text: entry.action.label
+				}, {
+					default: withCtx(() => [createVNode(unref(UButton), {
+						size: "xs",
+						color: "neutral",
+						variant: "ghost",
+						icon: entry.action.icon,
+						"aria-label": entry.action.label,
+						onMousedown: _cache[1] || (_cache[1] = withModifiers(() => {}, ["prevent"])),
+						onClick: ($event) => entry.action.run?.(entry.ctx)
+					}, null, 8, [
+						"icon",
+						"aria-label",
+						"onClick"
+					])]),
+					_: 2
+				}, 1032, ["text"]))], 64);
+			}), 128))], 36)) : createCommentVNode("v-if", true);
+		};
+	}
+});
+//#endregion
+export { _sfc_main as default };
+
+//# sourceMappingURL=BlockActionsOverlay.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BlockActionsOverlay.js","names":["_openBlock","_createElementBlock","_normalizeStyle","_Fragment","_renderList","_createBlock","_unref","_withCtx","_createVNode","_withModifiers","_createCommentVNode"],"sources":["../../../../src/features/block-ui/components/BlockActionsOverlay.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { useUiKit } from '../../../vue/kit/use-ui-kit'\nimport type { Editor } from '@tiptap/vue-3'\nimport { computed, onBeforeUnmount, onMounted, ref, useTemplateRef, watch } from 'vue'\nimport type { BlockAction, BlockTarget } from '../../../core'\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 */\nconst props = defineProps<{\n  editor: Editor\n  target: BlockTarget | null\n  actions: readonly BlockAction[]\n  host: HTMLElement | null\n}>()\n\nconst { Button: UButton, DropdownMenu: UDropdownMenu, Tooltip: UTooltip } = useUiKit()\n\nconst emit = defineEmits<{ hover: [hovered: boolean] }>()\n\n/** The target in the current document; null once its position holds something else (deleted, replaced). */\nconst block = computed<BlockTarget | null>(() => {\n  const { editor, target } = props\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\n// Reading `state` makes the flag follow `setEditable` (which dispatches a transaction).\nconst editable = computed(() => {\n  void props.editor.state\n  return props.editor.isEditable\n})\n\nconst items = computed(() => (block.value ? blockActionsFor(props.editor, block.value, props.actions) : []))\n\nconst top = ref(0)\nconst right = ref(0)\nconst measured = ref(false)\n\nfunction measure() {\n  const { editor, host } = props\n  const dom = block.value && host && !editor.isDestroyed ? editor.view.nodeDOM(block.value.pos) : null\n  measured.value = dom instanceof HTMLElement\n  if (!(dom instanceof HTMLElement) || !host) return\n  const hostRect = host.getBoundingClientRect()\n  const rect = dom.getBoundingClientRect()\n  top.value = rect.top - hostRect.top + 2\n  right.value = hostRect.right - editor.view.dom.getBoundingClientRect().right + EDGE_GUTTER\n}\n\nwatch([block, () => props.editor.state], measure, { flush: 'post' })\n\nconst visible = computed(() => editable.value && items.value.length > 0 && measured.value)\n\n// An open action menu is rendered outside the overlay (portal): the overlay counts as hovered until the menu closes.\nconst root = useTemplateRef<HTMLElement>('root')\nconst menuOpen = ref(false)\nfunction onMenuOpen(open: boolean) {\n  menuOpen.value = open\n  emit('hover', open || !!root.value?.matches(':hover'))\n}\nfunction onMouseLeave() {\n  if (!menuOpen.value) emit('hover', false)\n}\n\n// A vanishing overlay sends no mouseleave: report it, so the host does not keep waiting for one.\nwatch(visible, (value) => {\n  if (value) return\n  menuOpen.value = false\n  emit('hover', false)\n})\n\n// The bar follows the editor's right edge when the column resizes without the window doing so.\nlet resizeObserver: ResizeObserver | undefined\nonMounted(() => {\n  window.addEventListener('resize', measure)\n  window.addEventListener('scroll', measure, true)\n  resizeObserver = new ResizeObserver(measure)\n  resizeObserver.observe(props.editor.view.dom)\n})\n\nonBeforeUnmount(() => {\n  window.removeEventListener('resize', measure)\n  window.removeEventListener('scroll', measure, true)\n  resizeObserver?.disconnect()\n})\n</script>\n\n<template>\n  <div\n    v-if=\"visible\"\n    ref=\"root\"\n    class=\"block-actions absolute z-10 flex gap-0.5 rounded-md border border-[var(--sk-border)] bg-[var(--sk-bg)] p-0.5 shadow-sm\"\n    :style=\"{ top: `${top}px`, right: `${right}px` }\"\n    @mouseenter=\"emit('hover', true)\"\n    @mouseleave=\"onMouseLeave\"\n  >\n    <template v-for=\"entry in items\" :key=\"entry.action.id\">\n      <UDropdownMenu v-if=\"entry.menu\" :items=\"entry.menu\" :content=\"{ align: 'end' }\" @update:open=\"onMenuOpen\">\n        <UTooltip :text=\"entry.action.label\">\n          <UButton\n            size=\"xs\"\n            color=\"neutral\"\n            variant=\"ghost\"\n            :icon=\"entry.action.icon\"\n            :aria-label=\"entry.action.label\"\n            @mousedown.prevent\n          />\n        </UTooltip>\n      </UDropdownMenu>\n      <UTooltip v-else :text=\"entry.action.label\">\n        <UButton\n          size=\"xs\"\n          color=\"neutral\"\n          variant=\"ghost\"\n          :icon=\"entry.action.icon\"\n          :aria-label=\"entry.action.label\"\n          @mousedown.prevent\n          @click=\"entry.action.run?.(entry.ctx)\"\n        />\n      </UTooltip>\n    </template>\n  </div>\n</template>\n"],"mappings":"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"}

package/dist/features/block-ui/components/BlockActionsOverlay.vue.d.ts

@@ -0,0 +1,25 @@
+import { BlockAction, BlockTarget } from "../../../core/extension-points.js";
+import "../../../core/index.js";
+import { Editor } from "@tiptap/vue-3";
+//#region src/features/block-ui/components/BlockActionsOverlay.vue.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.
+ */
+type __VLS_Props = {
+  editor: Editor;
+  target: BlockTarget | null;
+  actions: readonly BlockAction[];
+  host: HTMLElement | null;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+  hover: (hovered: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+  onHover?: ((hovered: boolean) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+//#endregion
+export { _default as default };
+//# sourceMappingURL=BlockActionsOverlay.vue.d.ts.map

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

@@ -0,0 +1,113 @@
+import { startBlockDrag } from "../../../core/block-drag.js";
+import { useUiKit } from "../../../vue/kit/use-ui-kit.js";
+import { firstLineCenterShift, gutterShiftOf, handleBlocksOf } from "../handle-geometry.js";
+import { Fragment, createElementBlock, createVNode, defineComponent, normalizeClass, normalizeStyle, onBeforeUnmount, onMounted, openBlock, renderList, shallowRef, unref } from "vue";
+//#region src/features/block-ui/components/BlockHandles.vue
+const _hoisted_1 = { class: "absolute left-0 top-0 z-10 h-0 w-0" };
+const _hoisted_2 = ["onDragstart"];
+const _sfc_main = /*@__PURE__*/ defineComponent({
+	__name: "BlockHandles",
+	props: {
+		editor: {},
+		host: {}
+	},
+	setup(__props) {
+		const props = __props;
+		const { Icon: UIcon } = useUiKit();
+		const handles = shallowRef([]);
+		const dragging = shallowRef(false);
+		let raf = 0;
+		let wasEditable = false;
+		function schedule() {
+			if (!raf) raf = requestAnimationFrame(measure);
+		}
+		function measure() {
+			raf = 0;
+			const { editor, host } = props;
+			wasEditable = !editor.isDestroyed && editor.isEditable;
+			if (!wasEditable || !editor.view.dom.getClientRects().length) {
+				if (handles.value.length) handles.value = [];
+				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
+				});
+			}
+			const prev = handles.value;
+			if (prev.length !== next.length || next.some((h, i) => {
+				const before = prev[i];
+				return !before || h.pos !== before.pos || h.left !== before.left || h.top !== before.top;
+			})) handles.value = next;
+		}
+		function onTransaction({ transaction }) {
+			if (transaction.docChanged || props.editor.isEditable !== wasEditable) schedule();
+		}
+		let resizeObserver;
+		onMounted(() => {
+			props.editor.on("transaction", onTransaction);
+			window.addEventListener("resize", schedule);
+			window.addEventListener("scroll", schedule, true);
+			resizeObserver = new ResizeObserver(schedule);
+			resizeObserver.observe(props.editor.view.dom);
+			schedule();
+		});
+		onBeforeUnmount(() => {
+			props.editor.off("transaction", onTransaction);
+			window.removeEventListener("resize", schedule);
+			window.removeEventListener("scroll", schedule, true);
+			resizeObserver?.disconnect();
+			if (raf) cancelAnimationFrame(raf);
+		});
+		function onDragStart(event, pos) {
+			if (!startBlockDrag(props.editor, event, pos)) {
+				event.preventDefault();
+				return;
+			}
+			setTimeout(() => {
+				dragging.value = true;
+			});
+			const abort = new AbortController();
+			const end = () => {
+				dragging.value = false;
+				abort.abort();
+			};
+			document.addEventListener("drop", end, { signal: abort.signal });
+			document.addEventListener("dragend", end, { signal: abort.signal });
+		}
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", _hoisted_1, [(openBlock(true), createElementBlock(Fragment, null, renderList(handles.value, (handle) => {
+				return openBlock(), createElementBlock("div", {
+					key: handle.pos,
+					draggable: "true",
+					"aria-hidden": "true",
+					class: normalizeClass(["absolute flex cursor-grab items-center justify-center rounded text-[var(--sk-muted)] hover:bg-[var(--sk-bg-elevated)] hover:text-[var(--sk-fg-highlighted)]", dragging.value ? "pointer-events-none" : "pointer-events-auto"]),
+					style: normalizeStyle({
+						left: `${handle.left}px`,
+						top: `${handle.top}px`,
+						width: `${unref(24)}px`,
+						height: `${unref(24)}px`
+					}),
+					onDragstart: ($event) => onDragStart($event, handle.pos)
+				}, [createVNode(unref(UIcon), {
+					name: "i-lucide-grip-vertical",
+					class: "size-4"
+				})], 46, _hoisted_2);
+			}), 128))]);
+		};
+	}
+});
+//#endregion
+export { _sfc_main as default };
+
+//# sourceMappingURL=BlockHandles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BlockHandles.js","names":["_openBlock","_createElementBlock","_Fragment","_renderList","_normalizeClass","_normalizeStyle","_unref","_createVNode"],"sources":["../../../../src/features/block-ui/components/BlockHandles.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { useUiKit } from '../../../vue/kit/use-ui-kit'\nimport type { Editor } from '@tiptap/vue-3'\nimport { onBeforeUnmount, onMounted, shallowRef } from 'vue'\nimport { startBlockDrag } from '../../../core'\nimport { firstLineCenterShift, gutterShiftOf, HANDLE_SIZE, handleBlocksOf } from '../handle-geometry'\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 */\nconst props = defineProps<{ editor: Editor, host: HTMLElement }>()\n\nconst { Icon: UIcon } = useUiKit()\n\ninterface Handle { pos: number, left: number, top: number }\n\nconst handles = shallowRef<readonly Handle[]>([])\n// While a drag runs the handles let events through, so a drop over a handle's gutter still reaches the editor.\nconst dragging = shallowRef(false)\n\nlet raf = 0\nlet wasEditable = false\nfunction schedule() {\n  if (!raf) raf = requestAnimationFrame(measure)\n}\n\nfunction measure() {\n  raf = 0\n  const { editor, host } = props\n  wasEditable = !editor.isDestroyed && editor.isEditable\n  if (!wasEditable || !editor.view.dom.getClientRects().length) {\n    if (handles.value.length) handles.value = []\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  const prev = handles.value\n  const changed = prev.length !== next.length || next.some((h, i) => {\n    const before = prev[i]\n    return !before || h.pos !== before.pos || h.left !== before.left || h.top !== before.top\n  })\n  if (changed) handles.value = next\n}\n\n// Documents change layout through edits, the column through resizes; `EditorSurface` dispatches a transaction after\n// `setEditable`.\nfunction onTransaction({ transaction }: { transaction: { docChanged: boolean } }) {\n  if (transaction.docChanged || props.editor.isEditable !== wasEditable) schedule()\n}\n\nlet resizeObserver: ResizeObserver | undefined\nonMounted(() => {\n  props.editor.on('transaction', onTransaction)\n  window.addEventListener('resize', schedule)\n  window.addEventListener('scroll', schedule, true)\n  resizeObserver = new ResizeObserver(schedule)\n  resizeObserver.observe(props.editor.view.dom)\n  schedule()\n})\n\nonBeforeUnmount(() => {\n  props.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\nfunction onDragStart(event: DragEvent, pos: number) {\n  if (!startBlockDrag(props.editor, event, 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(() => { dragging.value = true })\n  const abort = new AbortController()\n  const end = () => {\n    dragging.value = false\n    abort.abort()\n  }\n  document.addEventListener('drop', end, { signal: abort.signal })\n  document.addEventListener('dragend', end, { signal: abort.signal })\n}\n</script>\n\n<template>\n  <div class=\"absolute left-0 top-0 z-10 h-0 w-0\">\n    <div\n      v-for=\"handle in handles\"\n      :key=\"handle.pos\"\n      draggable=\"true\"\n      aria-hidden=\"true\"\n      :class=\"['absolute flex cursor-grab items-center justify-center rounded text-[var(--sk-muted)] hover:bg-[var(--sk-bg-elevated)] hover:text-[var(--sk-fg-highlighted)]', 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      @dragstart=\"onDragStart($event, handle.pos)\"\n    >\n      <UIcon name=\"i-lucide-grip-vertical\" class=\"size-4\" />\n    </div>\n  </div>\n</template>\n"],"mappings":"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"}

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

@@ -0,0 +1,181 @@
+import { isChromeNode } from "../../../core/schema/node-flags.js";
+import { editorEntryOf } from "../../../core/editor-ui.js";
+import { useUiKit } from "../../../vue/kit/use-ui-kit.js";
+import { useEditorSettings } from "../../../vue/settings.js";
+import { firstLineCenterShift, gutterShiftOf, handleLeftOf, hasKindIcon } from "../handle-geometry.js";
+import _sfc_main$1 from "./BlockActionsOverlay.js";
+import _sfc_main$2 from "./BlockHandles.js";
+import { Fragment, Teleport, computed, createBlock, createCommentVNode, createElementBlock, createVNode, defineComponent, nextTick, normalizeClass, onBeforeUnmount, onMounted, openBlock, shallowRef, toRaw, unref, useTemplateRef, withCtx } from "vue";
+import { DragHandle } from "@tiptap/extension-drag-handle-vue-3";
+//#region src/features/block-ui/components/BlockUi.vue
+/**
+* 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.
+*/
+const _sfc_main = /*@__PURE__*/ defineComponent({
+	__name: "BlockUi",
+	props: { editor: {} },
+	setup(__props) {
+		const props = __props;
+		const { Icon: UIcon } = useUiKit();
+		const host = shallowRef(null);
+		const hoverTarget = shallowRef(null);
+		const actions = computed(() => editorEntryOf(toRaw(props.editor))?.blockActions ?? []);
+		let overlayHovered = false;
+		let hoverClearTimer;
+		onMounted(async () => {
+			await nextTick();
+			const dom = props.editor.isDestroyed ? null : props.editor.view.dom;
+			host.value = dom?.isConnected ? dom.parentElement : null;
+			dom?.addEventListener("keydown", onEditorKeydown);
+			dom?.addEventListener("mousemove", onEditorMousemove);
+		});
+		onBeforeUnmount(() => {
+			clearTimeout(hoverClearTimer);
+			if (props.editor.isDestroyed) return;
+			props.editor.view.dom.removeEventListener("keydown", onEditorKeydown);
+			props.editor.view.dom.removeEventListener("mousemove", onEditorMousemove);
+		});
+		let pointer = null;
+		function onEditorMousemove(e) {
+			pointer = {
+				x: e.clientX,
+				y: e.clientY
+			};
+		}
+		function onEditorKeydown() {
+			clearTimeout(hoverClearTimer);
+			hoverTarget.value = null;
+		}
+		function scheduleHoverClear() {
+			clearTimeout(hoverClearTimer);
+			hoverClearTimer = setTimeout(() => {
+				if (!overlayHovered) hoverTarget.value = null;
+			}, 200);
+		}
+		function onOverlayHover(hovered) {
+			overlayHovered = hovered;
+			if (!hovered) scheduleHoverClear();
+		}
+		function resetDragHandle() {
+			const { editor } = props;
+			if (editor.isDestroyed) return;
+			editor.view.dispatch(editor.state.tr.setMeta("hideDragHandle", true).setMeta("addToHistory", false));
+		}
+		const { settings } = useEditorSettings();
+		const alwaysHandles = computed(() => settings.value.blocks.dragHandle === "always");
+		const handle = useTemplateRef("handle");
+		const targetHasKindIcon = shallowRef(false);
+		const hoverHandleHidden = computed(() => alwaysHandles.value || targetHasKindIcon.value);
+		let handleGutterShift = 0;
+		let dragTargetDom = null;
+		let dragTargetNode = null;
+		function trackDragTarget({ node, pos }) {
+			if (node) {
+				clearTimeout(hoverClearTimer);
+				hoverTarget.value = {
+					node,
+					pos
+				};
+			} else scheduleHoverClear();
+			const dom = node ? props.editor.view.nodeDOM(pos) : null;
+			dragTargetDom = dom instanceof HTMLElement ? dom : null;
+			dragTargetNode = dragTargetDom ? node : null;
+			handleGutterShift = dragTargetDom && dragTargetNode ? gutterShiftOf(dragTargetNode, dragTargetDom) : 0;
+			targetHasKindIcon.value = dragTargetDom ? hasKindIcon(dragTargetDom) : false;
+		}
+		function pointerReachesTarget() {
+			if (!pointer || !dragTargetNode || !dragTargetDom?.isConnected) return false;
+			const rect = dragTargetDom.getBoundingClientRect();
+			const { x, y } = pointer;
+			if (x < handleLeftOf(dragTargetNode, dragTargetDom, handle.value?.$el.offsetWidth ?? 0) || x >= rect.right) return false;
+			if (y < (laidOutSibling(dragTargetDom, "previous")?.bottom ?? rect.top)) return false;
+			if (y >= (laidOutSibling(dragTargetDom, "next")?.top ?? rect.bottom)) return false;
+			return x < rect.left || y < rect.top || y >= rect.bottom;
+		}
+		function laidOutSibling(dom, side) {
+			for (let el = dom[`${side}ElementSibling`]; el; el = el[`${side}ElementSibling`]) {
+				const rect = el.getBoundingClientRect();
+				if (rect.height > 0) return rect;
+			}
+			return null;
+		}
+		const dragHandlePosition = { middleware: [{
+			name: "gutterShift",
+			fn: ({ x, y }) => ({
+				x: x - handleGutterShift,
+				y
+			})
+		}, {
+			name: "firstLineCenter",
+			fn: ({ x, y, elements, rects }) => ({
+				x,
+				y: dragTargetDom ? y + firstLineCenterShift(dragTargetDom, elements.reference.getBoundingClientRect().top, rects.floating.height) : y
+			})
+		}] };
+		const dragHandleNested = {
+			edgeDetection: "none",
+			rules: [
+				{
+					id: "compositeChrome",
+					evaluate: ({ node }) => isChromeNode(node) ? 1e3 : 0
+				},
+				{
+					id: "reachTarget",
+					evaluate: () => pointerReachesTarget() ? 1e3 : 0
+				},
+				{
+					id: "ownGutter",
+					evaluate: ({ node, pos, depth, view }) => {
+						if (depth < 2 || !pointer) return 0;
+						const dom = view.nodeDOM(pos);
+						return dom instanceof HTMLElement && pointer.x < handleLeftOf(node, dom, handle.value?.$el.offsetWidth ?? 0) ? 1e3 : 0;
+					}
+				}
+			]
+		};
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock(Fragment, null, [host.value ? (openBlock(), createBlock(Teleport, {
+				key: 0,
+				to: host.value
+			}, [createVNode(_sfc_main$1, {
+				editor: __props.editor,
+				target: hoverTarget.value,
+				host: host.value,
+				actions: actions.value,
+				onHover: onOverlayHover
+			}, null, 8, [
+				"editor",
+				"target",
+				"host",
+				"actions"
+			]), alwaysHandles.value ? (openBlock(), createBlock(_sfc_main$2, {
+				key: 0,
+				editor: __props.editor,
+				host: host.value
+			}, null, 8, ["editor", "host"])) : createCommentVNode("v-if", true)], 8, ["to"])) : createCommentVNode("v-if", true), createVNode(unref(DragHandle), {
+				ref_key: "handle",
+				ref: handle,
+				editor: __props.editor,
+				"on-element-drag-end": resetDragHandle,
+				"on-node-change": trackDragTarget,
+				"compute-position-config": dragHandlePosition,
+				nested: dragHandleNested,
+				class: normalizeClass([{ "invisible! pointer-events-none!": hoverHandleHidden.value }, "flex size-6 cursor-grab items-center justify-center rounded text-[var(--sk-muted)] hover:bg-[var(--sk-bg-elevated)] hover:text-[var(--sk-fg-highlighted)] data-[dragging=true]:cursor-grabbing"])
+			}, {
+				default: withCtx(() => [createVNode(unref(UIcon), {
+					name: "i-lucide-grip-vertical",
+					class: "size-4"
+				})]),
+				_: 1
+			}, 8, ["editor", "class"])], 64);
+		};
+	}
+});
+//#endregion
+export { _sfc_main as default };
+
+//# sourceMappingURL=BlockUi.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BlockUi.js","names":["_openBlock","_createElementBlock","_Fragment","_createBlock","_Teleport","_createVNode","BlockActionsOverlay","BlockHandles","_createCommentVNode","_unref","_normalizeClass","_withCtx"],"sources":["../../../../src/features/block-ui/components/BlockUi.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { useUiKit } from '../../../vue/kit/use-ui-kit'\nimport { DragHandle, type DragHandleProps } from '@tiptap/extension-drag-handle-vue-3'\nimport type { Node } from '@tiptap/pm/model'\nimport type { Editor } from '@tiptap/vue-3'\nimport { type ComponentPublicInstance, computed, nextTick, onBeforeUnmount, onMounted, shallowRef, toRaw, useTemplateRef } from 'vue'\nimport { type BlockTarget, editorEntryOf } from '../../../core'\nimport { useEditorSettings } from '../../../vue/settings'\nimport { isChromeNode } from '../../../core/schema'\nimport { firstLineCenterShift, gutterShiftOf, handleLeftOf, hasKindIcon } from '../handle-geometry'\nimport BlockActionsOverlay from './BlockActionsOverlay.vue'\nimport BlockHandles from './BlockHandles.vue'\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 */\nconst props = defineProps<{ editor: Editor }>()\n\nconst { Icon: UIcon } = useUiKit()\n\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.\nconst host = shallowRef<HTMLElement | null>(null)\nconst hoverTarget = shallowRef<BlockTarget | null>(null)\nconst actions = computed(() => editorEntryOf(toRaw(props.editor))?.blockActions ?? [])\nlet overlayHovered = false\nlet hoverClearTimer: ReturnType<typeof setTimeout> | undefined\n\n// The overlay is positioned inside the element that holds the editor content (`relative`). Tiptap's content component\n// moves the editor DOM into it on the tick after it mounted, so look it up after that one.\nonMounted(async () => {\n  await nextTick()\n  const dom = props.editor.isDestroyed ? null : props.editor.view.dom\n  host.value = dom?.isConnected ? dom.parentElement : null\n  dom?.addEventListener('keydown', onEditorKeydown)\n  dom?.addEventListener('mousemove', onEditorMousemove)\n})\n\nonBeforeUnmount(() => {\n  clearTimeout(hoverClearTimer)\n  if (props.editor.isDestroyed) return\n  props.editor.view.dom.removeEventListener('keydown', onEditorKeydown)\n  props.editor.view.dom.removeEventListener('mousemove', onEditorMousemove)\n})\n\n// Pointer position for the targeting rules below. The plugin evaluates them in a frame callback after the mousemove,\n// so this is the position they see.\nlet pointer: { x: number, y: number } | null = null\nfunction onEditorMousemove(e: MouseEvent) {\n  pointer = { x: e.clientX, y: e.clientY }\n}\n\n// Like the drag-handle plugin: a key pressed in the focused editor hides the actions.\nfunction onEditorKeydown() {\n  clearTimeout(hoverClearTimer)\n  hoverTarget.value = null\n}\n\nfunction scheduleHoverClear() {\n  clearTimeout(hoverClearTimer)\n  hoverClearTimer = setTimeout(() => {\n    if (!overlayHovered) hoverTarget.value = null\n  }, 200)\n}\n\nfunction onOverlayHover(hovered: boolean) {\n  overlayHovered = hovered\n  if (!hovered) scheduleHoverClear()\n}\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.\nfunction resetDragHandle() {\n  const { editor } = props\n  if (editor.isDestroyed) return\n  editor.view.dispatch(editor.state.tr.setMeta('hideDragHandle', true).setMeta('addToHistory', false))\n}\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.\nconst { settings } = useEditorSettings()\nconst alwaysHandles = computed(() => settings.value.blocks.dragHandle === 'always')\nconst handle = useTemplateRef<ComponentPublicInstance>('handle')\nconst targetHasKindIcon = shallowRef(false)\nconst hoverHandleHidden = computed(() => alwaysHandles.value || targetHasKindIcon.value)\nlet handleGutterShift = 0\nlet dragTargetDom: HTMLElement | null = null\nlet dragTargetNode: Node | null = null\nfunction trackDragTarget({ node, pos }: { node: Node | null, pos: number }) {\n  if (node) {\n    clearTimeout(hoverClearTimer)\n    hoverTarget.value = { node, pos }\n  }\n  else {\n    scheduleHoverClear()\n  }\n  const dom = node ? props.editor.view.nodeDOM(pos) : null\n  dragTargetDom = dom instanceof HTMLElement ? dom : null\n  dragTargetNode = dragTargetDom ? node : null\n  handleGutterShift = dragTargetDom && dragTargetNode ? gutterShiftOf(dragTargetNode, dragTargetDom) : 0\n  targetHasKindIcon.value = dragTargetDom ? hasKindIcon(dragTargetDom) : false\n}\n\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.\nfunction pointerReachesTarget(): boolean {\n  if (!pointer || !dragTargetNode || !dragTargetDom?.isConnected) return false\n  const rect = dragTargetDom.getBoundingClientRect()\n  const { x, y } = pointer\n  if (x < handleLeftOf(dragTargetNode, dragTargetDom, handle.value?.$el.offsetWidth ?? 0) || x >= rect.right) return false\n  if (y < (laidOutSibling(dragTargetDom, 'previous')?.bottom ?? rect.top)) return false\n  if (y >= (laidOutSibling(dragTargetDom, 'next')?.top ?? rect.bottom)) return false\n  return x < rect.left || y < rect.top || y >= rect.bottom\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 el = dom[`${side}ElementSibling`]; el; el = el[`${side}ElementSibling`]) {\n    const rect = el.getBoundingClientRect()\n    if (rect.height > 0) return rect\n  }\n  return null\n}\n\n// The plugin aligns the handle's top with the block's top, which sits above the middle of the\n// block's first text line: `firstLineCenterShift` moves the handle's centre to that line's centre.\nconst dragHandlePosition: DragHandleProps['computePositionConfig'] = {\n  middleware: [\n    { name: 'gutterShift', fn: ({ x, y }) => ({ x: x - handleGutterShift, y }) },\n    {\n      name: 'firstLineCenter',\n      fn: ({ x, y, elements, rects }) => ({\n        x,\n        y: dragTargetDom ? y + firstLineCenterShift(dragTargetDom, elements.reference.getBoundingClientRect().top, rects.floating.height) : y,\n      }),\n    },\n  ],\n}\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.\nconst dragHandleNested: DragHandleProps['nested'] = {\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        if (depth < 2 || !pointer) return 0\n        const dom = view.nodeDOM(pos)\n        return dom instanceof HTMLElement && pointer.x < handleLeftOf(node, dom, handle.value?.$el.offsetWidth ?? 0) ? 1000 : 0\n      },\n    },\n  ],\n}\n</script>\n\n<template>\n  <Teleport v-if=\"host\" :to=\"host\">\n    <BlockActionsOverlay\n      :editor=\"editor\"\n      :target=\"hoverTarget\"\n      :host=\"host\"\n      :actions=\"actions\"\n      @hover=\"onOverlayHover\"\n    />\n    <BlockHandles v-if=\"alwaysHandles\" :editor=\"editor\" :host=\"host\" />\n  </Teleport>\n  <DragHandle\n    ref=\"handle\"\n    :editor=\"editor\"\n    :on-element-drag-end=\"resetDragHandle\"\n    :on-node-change=\"trackDragTarget\"\n    :compute-position-config=\"dragHandlePosition\"\n    :nested=\"dragHandleNested\"\n    :class=\"{ 'invisible! pointer-events-none!': hoverHandleHidden }\"\n    class=\"flex size-6 cursor-grab items-center justify-center rounded text-[var(--sk-muted)] hover:bg-[var(--sk-bg-elevated)] hover:text-[var(--sk-fg-highlighted)] data-[dragging=true]:cursor-grabbing\"\n  >\n    <UIcon name=\"i-lucide-grip-vertical\" class=\"size-4\" />\n  </DragHandle>\n</template>\n"],"mappings":"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"}

package/dist/features/block-ui/components/BlockUi.vue.d.ts

@@ -0,0 +1,17 @@
+import { Editor } from "@tiptap/vue-3";
+//#region src/features/block-ui/components/BlockUi.vue.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.
+ */
+type __VLS_Props = {
+  editor: Editor;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+//#endregion
+export { _default as default };
+//# sourceMappingURL=BlockUi.vue.d.ts.map

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

@@ -0,0 +1,21 @@
+import { EditorFeature } from "../../core/feature.js";
+import "../../core/index.js";
+//#region src/features/block-ui/feature.d.ts
+/** What a framework binding supplies to the block-ui feature. */
+export interface BlockUiUi<C> {
+  /** The block UI of an editor (drag handle, permanent handles, hover actions); mounted beside the editor content. */
+  overlay: C;
+}
+/**
+ * Block-level UI beside the editor content: the drag handle (upstream `@tiptap/extension-drag-handle`) with hover
+ * targeting, and the hover actions of the targeted block (features' and host block actions, `BlockActionsOverlay`).
+ * Also adds block-range selection (`NodeRange`: Mod+drag, Shift+↑/↓). 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
+ * collaboration session.
+ */
+export declare function blockUiFeatureCore<C>(ui: BlockUiUi<C>): EditorFeature<C>;
+//#endregion
+//# sourceMappingURL=feature.d.ts.map

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

@@ -0,0 +1,23 @@
+import { NodeRange } from "@tiptap/extension-node-range";
+//#region src/features/block-ui/feature.ts
+/**
+* Block-level UI beside the editor content: the drag handle (upstream `@tiptap/extension-drag-handle`) with hover
+* targeting, and the hover actions of the targeted block (features' and host block actions, `BlockActionsOverlay`).
+* Also adds block-range selection (`NodeRange`: Mod+drag, Shift+↑/↓). 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
+* collaboration session.
+*/
+function blockUiFeatureCore(ui) {
+	return {
+		id: "block-ui",
+		extensions: () => [NodeRange],
+		overlays: [ui.overlay]
+	};
+}
+//#endregion
+export { blockUiFeatureCore };
+
+//# sourceMappingURL=feature.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"feature.js","names":[],"sources":["../../../src/features/block-ui/feature.ts"],"sourcesContent":["import { NodeRange } from '@tiptap/extension-node-range'\nimport type { EditorFeature } 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 hover actions of the targeted block (features' and host block actions, `BlockActionsOverlay`).\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 */\nexport function blockUiFeatureCore<C>(ui: BlockUiUi<C>): EditorFeature<C> {\n  return {\n    id: 'block-ui',\n    extensions: () => [NodeRange],\n    overlays: [ui.overlay],\n  }\n}\n"],"mappings":";;;;;;;;;;;;AAmBA,SAAgB,mBAAsB,IAAoC;CACxE,OAAO;EACL,IAAI;EACJ,kBAAkB,CAAC,SAAS;EAC5B,UAAU,CAAC,GAAG,OAAO;CACvB;AACF"}