@chelone/vue 0.6.0 → 0.9.0

package/dist/components/block-editor/block-editor-input.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,106 @@
+import { useInput } from "../../form/use-input.js";
+import field_label_text_default from "../admin/common/field-label-text.js";
+import input_helper_text_default from "../admin/common/input-helper-text.js";
+import validation_error_default from "../admin/common/validation-error.js";
+import { Field, FieldError, FieldLabel } from "../ui/field.js";
+import block_editor_default from "./block-editor.js";
+import { computed, createBlock, createCommentVNode, createElementVNode, createVNode, defineComponent, normalizeClass, openBlock, unref, withCtx } from "vue";
+import { isBlockDoc, isEmptyBlockDocument } from "@chelone/core";
+// src/components/block-editor/block-editor-input.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["id", "aria-invalid"];
+var block_editor_input_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "block-editor-input",
+	props: {
+		blocks: {},
+		placeholder: {},
+		disabled: { type: Boolean },
+		readOnly: { type: Boolean },
+		helperText: {
+			type: [String, Boolean],
+			default: void 0
+		},
+		class: {},
+		source: {},
+		label: {
+			type: [String, Boolean],
+			default: void 0
+		},
+		defaultValue: {},
+		validate: {}
+	},
+	setup(__props) {
+		/**
+		* `<BlockEditorInput>` — edits a block document: rich text and app-defined
+		* blocks, stored as tiptap JSON. An empty document is stored as `null`, so
+		* `required()` rejects it. The Vue twin of `@chelone/react`'s
+		* `block-editor/block-editor-input.tsx`.
+		*
+		* Needs the optional `@tiptap/*` peers.
+		*
+		* @example
+		* import { BlockEditorInput, defineBlock } from "@chelone/vue/block-editor";
+		*
+		* <BlockEditorInput source="body" :blocks="[callout]" />
+		*/
+		const inputProps = __props;
+		const { id, isRequired, value, setValue, blur, error, touched } = useInput({
+			validate: inputProps.validate,
+			defaultValue: inputProps.defaultValue ?? null,
+			source: inputProps.source
+		});
+		const stored = computed(() => isBlockDoc(value.value) ? value.value : null);
+		const editable = computed(() => inputProps.disabled !== true && inputProps.readOnly !== true);
+		const invalid = computed(() => touched.value && error.value != null);
+		const write = (doc) => setValue(isEmptyBlockDocument(doc) ? null : doc);
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(Field), {
+				class: normalizeClass(inputProps.class),
+				"data-invalid": invalid.value
+			}, {
+				default: withCtx(() => [
+					__props.label !== false ? (openBlock(), createBlock(unref(FieldLabel), {
+						key: 0,
+						"html-for": unref(id)
+					}, {
+						default: withCtx(() => [createVNode(field_label_text_default, {
+							source: __props.source,
+							"is-required": unref(isRequired),
+							label: __props.label
+						}, null, 8, [
+							"source",
+							"is-required",
+							"label"
+						])]),
+						_: 1
+					}, 8, ["html-for"])) : createCommentVNode("", true),
+					createElementVNode("div", {
+						id: unref(id),
+						"data-slot": "block-editor-input",
+						"aria-invalid": invalid.value || void 0,
+						class: normalizeClass(["overflow-hidden rounded-md border border-input bg-transparent shadow-xs focus-within:border-ring focus-within:ring-[3px] focus-within:ring-ring/50 aria-invalid:border-destructive", !editable.value && "opacity-60"])
+					}, [createVNode(block_editor_default, {
+						value: stored.value,
+						blocks: __props.blocks,
+						editable: editable.value,
+						placeholder: __props.placeholder,
+						onChange: write,
+						onBlur: unref(blur)
+					}, null, 8, [
+						"value",
+						"blocks",
+						"editable",
+						"placeholder",
+						"onBlur"
+					])], 10, _hoisted_1),
+					createVNode(input_helper_text_default, { "helper-text": __props.helperText }, null, 8, ["helper-text"]),
+					invalid.value ? (openBlock(), createBlock(unref(FieldError), { key: 1 }, {
+						default: withCtx(() => [createVNode(validation_error_default, { error: unref(error) }, null, 8, ["error"])]),
+						_: 1
+					})) : createCommentVNode("", true)
+				]),
+				_: 1
+			}, 8, ["class", "data-invalid"]);
+		};
+	}
+});
+export { block_editor_input_vue_vue_type_script_setup_true_lang_default as default };

package/dist/components/block-editor/block-editor.js

@@ -0,0 +1,4 @@
+import block_editor_vue_vue_type_script_setup_true_lang_default from "./block-editor.vue_vue_type_script_setup_true_lang.js";
+// src/components/block-editor/block-editor.vue
+var block_editor_default = block_editor_vue_vue_type_script_setup_true_lang_default;
+export { block_editor_default as default };

package/dist/components/block-editor/block-editor.vue.d.ts

@@ -0,0 +1,27 @@
+import type { BlockDocNode } from "@chelone/core";
+import type { BlockDefinition } from "./block-nodes.js";
+/** Props for {@link BlockEditor}. */
+export interface BlockEditorProps {
+    /** The document, as tiptap JSON. `null` or `undefined` is an empty document. */
+    value?: BlockDocNode | null;
+    /** Read once, when the editor mounts. Names must be unique. Defaults to `defaultBlocks`. */
+    blocks?: readonly BlockDefinition[];
+    editable?: boolean;
+    /** Shown in an empty paragraph. */
+    placeholder?: string;
+    class?: string;
+}
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<BlockEditorProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    blur: (event: FocusEvent) => any;
+    change: (value: BlockDocNode) => any;
+}, string, import("vue").PublicProps, Readonly<BlockEditorProps> & Readonly<{
+    onBlur?: ((event: FocusEvent) => any) | undefined;
+    onChange?: ((value: BlockDocNode) => any) | undefined;
+}>, {
+    value: BlockDocNode | null;
+    placeholder: string;
+    blocks: readonly BlockDefinition<import("@chelone/core").BlockAttrs>[];
+    editable: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/components/block-editor/block-editor.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,217 @@
+import { useTranslate } from "../../i18n/use-translate.js";
+import { cn } from "../../lib/utils.js";
+import button_default from "../ui/button.js";
+import block_drag_handle_default from "./block-drag-handle.js";
+import block_picker_default from "./block-picker.js";
+import { BLOCK_DRAG_PLUGINS, BLOCK_DRAG_SENSORS } from "./block-drag-handle.vue_vue_type_script_setup_true_lang.js";
+import block_toolbar_default from "./block-toolbar.js";
+import { createBlockNode, unknownBlockNode } from "./block-nodes.js";
+import { defaultBlocks } from "./default-blocks.js";
+import { createSlashExtension } from "./slash-command.js";
+import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, normalizeClass, openBlock, shallowRef, toDisplayString, unref, watch, withCtx } from "vue";
+import { createBlockRegistry, deepEqual, emptyBlockDocument, getBlockDefaultAttrs, isBlockDoc, isEmptyBlockDocument, richTextStarterKitOptions, unwrapUnknownBlocks, wrapUnknownBlocks } from "@chelone/core";
+import { DragDropProvider } from "@dnd-kit/vue";
+import { Placeholder } from "@tiptap/extensions";
+import { Selection } from "@tiptap/pm/state";
+import StarterKit from "@tiptap/starter-kit";
+import { EditorContent, useEditor } from "@tiptap/vue-3";
+import { getSchema } from "@tiptap/core";
+// src/components/block-editor/block-editor.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = {
+	key: 0,
+	class: "border-b p-1"
+};
+var _hoisted_2 = { class: "relative pl-6" };
+var block_editor_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "block-editor",
+	props: {
+		value: { default: void 0 },
+		blocks: { default: () => defaultBlocks },
+		editable: {
+			type: Boolean,
+			default: true
+		},
+		placeholder: { default: void 0 },
+		class: {}
+	},
+	emits: ["change", "blur"],
+	setup(__props, { emit: __emit }) {
+		/**
+		* `<BlockEditor>` — edits a document of rich text and app-defined blocks in a
+		* tiptap editor. Type `/` or press Add block to insert a block. A node the
+		* editor has no schema for stays in the document and is written back
+		* unchanged. The Vue twin of `@chelone/react`'s
+		* `block-editor/block-editor.tsx`, on `@tiptap/vue-3`.
+		*
+		* Needs the optional `@tiptap/*` peers, and `@dnd-kit/vue` for the drag
+		* handle. Emits `change` with the document on
+		* each edit.
+		*
+		* @example
+		* import { BlockEditor, defineBlock } from "@chelone/vue/block-editor";
+		*
+		* <BlockEditor :value="doc" :blocks="[callout]" @change="doc = $event" />
+		*/
+		const props = __props;
+		const emit = __emit;
+		const translate = useTranslate();
+		const placeholderText = computed(() => props.placeholder ?? translate("chelone.block_editor.placeholder", { _: "Type / for blocks" }));
+		const pickerKeys = { current: null };
+		const picker = shallowRef(null);
+		const registry = createBlockRegistry(props.blocks);
+		const extensions = [
+			StarterKit.configure({
+				...richTextStarterKitOptions,
+				heading: { levels: [
+					1,
+					2,
+					3
+				] }
+			}),
+			Placeholder.configure({ placeholder: () => placeholderText.value }),
+			unknownBlockNode.configure({ translate }),
+			...registry.list().map(createBlockNode),
+			createSlashExtension({
+				onChange: ({ query, range, clientRect }) => {
+					picker.value = {
+						source: "slash",
+						query,
+						range,
+						anchor: () => clientRect?.() ?? null
+					};
+				},
+				onClose: () => {
+					if (picker.value?.source === "slash") picker.value = null;
+				},
+				onKeyDown: (event) => picker.value?.source === "slash" && pickerKeys.current !== null ? pickerKeys.current(event) : false
+			})
+		];
+		const schema = getSchema(extensions);
+		const known = new Set(Object.keys(schema.nodes));
+		const canLoad = (block) => {
+			try {
+				schema.nodeFromJSON(block).check();
+				return true;
+			} catch {
+				return false;
+			}
+		};
+		const load = (next) => wrapUnknownBlocks(next, known, canLoad);
+		const contentClass = cn("min-h-32 px-3 py-2 outline-none", "[&_h1]:font-bold [&_h1]:text-2xl [&_h2]:font-semibold [&_h2]:text-xl [&_h3]:font-semibold [&_h3]:text-lg", "[&_ul]:list-disc [&_ul]:pl-6 [&_ol]:list-decimal [&_ol]:pl-6", "[&_blockquote]:border-l-2 [&_blockquote]:pl-4 [&_pre]:rounded-md [&_pre]:bg-muted [&_pre]:p-3", "[&_.is-empty]:before:pointer-events-none [&_.is-empty]:before:float-left [&_.is-empty]:before:h-0 [&_.is-empty]:before:text-muted-foreground [&_.is-empty]:before:content-[attr(data-placeholder)]");
+		const editor = useEditor({
+			extensions,
+			content: load(isBlockDoc(props.value) ? props.value : emptyBlockDocument()),
+			editable: props.editable,
+			editorProps: { attributes: { class: contentClass } },
+			onUpdate: ({ editor: updated }) => {
+				emit("change", unwrapUnknownBlocks(updated.getJSON()));
+			},
+			onBlur: ({ event }) => emit("blur", event)
+		});
+		watch([
+			editor,
+			() => props.editable,
+			placeholderText
+		], ([current, canEdit]) => {
+			if (!current) return;
+			current.setEditable(canEdit, false);
+			current.view.dispatch(current.state.tr);
+		}, { flush: "post" });
+		watch([editor, () => props.value], ([current, value]) => {
+			if (!current) return;
+			const now = unwrapUnknownBlocks(current.getJSON());
+			if (!isBlockDoc(value) && isEmptyBlockDocument(now)) return;
+			const next = isBlockDoc(value) ? value : emptyBlockDocument();
+			if (deepEqual(now, next)) return;
+			const { head } = current.state.selection;
+			current.commands.setContent(load(next), { emitUpdate: false });
+			const { doc } = current.state;
+			const caret = Selection.near(doc.resolve(Math.min(head, doc.content.size)));
+			current.view.dispatch(current.state.tr.setSelection(caret));
+		});
+		function insert(block) {
+			const current = editor.value;
+			const open = picker.value;
+			if (!current || !open) return;
+			const node = current.schema.nodes[block.name]?.createAndFill(getBlockDefaultAttrs(block.schema));
+			if (!node) return;
+			current.chain().focus().deleteRange(open.range).insertContentAt(open.range.from, node).run();
+			picker.value = null;
+		}
+		function setQuery(query) {
+			if (picker.value) picker.value = {
+				...picker.value,
+				query
+			};
+		}
+		function toggleButtonPicker(event) {
+			const current = editor.value;
+			if (!current) return;
+			if (picker.value?.source === "button") {
+				picker.value = null;
+				return;
+			}
+			const button = event.currentTarget;
+			const { from, to } = current.state.selection;
+			picker.value = {
+				source: "button",
+				query: "",
+				range: {
+					from,
+					to
+				},
+				anchor: () => button instanceof Element ? button.getBoundingClientRect() : null
+			};
+		}
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				"data-slot": "block-editor",
+				class: normalizeClass(unref(cn)("flex flex-col", props.class))
+			}, [
+				__props.editable ? (openBlock(), createElementBlock("div", _hoisted_1, [createVNode(button_default, {
+					type: "button",
+					variant: "ghost",
+					size: "sm",
+					"data-slot": "block-editor-add",
+					onClick: toggleButtonPicker
+				}, {
+					default: withCtx(() => [createTextVNode(toDisplayString(unref(translate)("chelone.block_editor.add_block", { _: "Add block" })), 1)]),
+					_: 1
+				})])) : createCommentVNode("", true),
+				__props.editable && unref(editor) ? (openBlock(), createBlock(block_toolbar_default, {
+					key: 1,
+					editor: unref(editor),
+					registry: unref(registry)
+				}, null, 8, ["editor", "registry"])) : createCommentVNode("", true),
+				__props.editable && unref(editor) ? (openBlock(), createBlock(unref(DragDropProvider), {
+					key: 2,
+					sensors: unref(BLOCK_DRAG_SENSORS),
+					plugins: unref(BLOCK_DRAG_PLUGINS)
+				}, {
+					default: withCtx(() => [createElementVNode("div", _hoisted_2, [createVNode(unref(EditorContent), { editor: unref(editor) }, null, 8, ["editor"]), createVNode(block_drag_handle_default, { editor: unref(editor) }, null, 8, ["editor"])])]),
+					_: 1
+				}, 8, ["sensors", "plugins"])) : (openBlock(), createBlock(unref(EditorContent), {
+					key: 3,
+					editor: unref(editor)
+				}, null, 8, ["editor"])),
+				__props.editable && picker.value ? (openBlock(), createBlock(block_picker_default, {
+					key: 4,
+					blocks: unref(registry).list(),
+					query: picker.value.query,
+					searchable: picker.value.source === "button",
+					anchor: picker.value.anchor,
+					"key-handler": pickerKeys,
+					"onUpdate:query": setQuery,
+					onSelect: insert,
+					onClose: _cache[0] || (_cache[0] = ($event) => picker.value = null)
+				}, null, 8, [
+					"blocks",
+					"query",
+					"searchable",
+					"anchor"
+				])) : createCommentVNode("", true)
+			], 2);
+		};
+	}
+});
+export { block_editor_vue_vue_type_script_setup_true_lang_default as default };

package/dist/components/block-editor/block-icons.d.ts

@@ -0,0 +1,21 @@
+/**
+ * The glyphs of the default blocks and the block bar, as dependency-free
+ * functional components: `@chelone/vue` carries no icon library, so each is a
+ * list of lucide shapes in one SVG. Decorative (`aria-hidden`); the button
+ * carries the accessible label.
+ */
+import { type FunctionalComponent } from "vue";
+export declare const InfoIcon: FunctionalComponent<{}, {}, any, {}>;
+export declare const ListCollapseIcon: FunctionalComponent<{}, {}, any, {}>;
+export declare const ImageIcon: FunctionalComponent<{}, {}, any, {}>;
+export declare const VideoIcon: FunctionalComponent<{}, {}, any, {}>;
+export declare const DatabaseIcon: FunctionalComponent<{}, {}, any, {}>;
+export declare const TableIcon: FunctionalComponent<{}, {}, any, {}>;
+export declare const ChartColumnIcon: FunctionalComponent<{}, {}, any, {}>;
+export declare const ChevronRightIcon: FunctionalComponent<{}, {}, any, {}>;
+export declare const SettingsIcon: FunctionalComponent<{}, {}, any, {}>;
+export declare const CopyIcon: FunctionalComponent<{}, {}, any, {}>;
+export declare const ArrowUpIcon: FunctionalComponent<{}, {}, any, {}>;
+export declare const ArrowDownIcon: FunctionalComponent<{}, {}, any, {}>;
+export declare const Trash2Icon: FunctionalComponent<{}, {}, any, {}>;
+export declare const GripVerticalIcon: FunctionalComponent<{}, {}, any, {}>;

package/dist/components/block-editor/block-icons.js

@@ -0,0 +1,90 @@
+import { h } from "vue";
+// src/components/block-editor/block-icons.ts
+/**
+* The glyphs of the default blocks and the block bar, as dependency-free
+* functional components: `@chelone/vue` carries no icon library, so each is a
+* list of lucide shapes in one SVG. Decorative (`aria-hidden`); the button
+* carries the accessible label.
+*/
+var stroke = {
+	fill: "none",
+	stroke: "currentColor"
+};
+var lucide = {
+	"stroke-width": 2,
+	"stroke-linecap": "round",
+	"stroke-linejoin": "round"
+};
+function glyph(...shapes) {
+	const draw = ([tag, attrs]) => h(tag, attrs);
+	return () => h("svg", {
+		"aria-hidden": "true",
+		viewBox: "0 0 24 24",
+		width: 16,
+		height: 16,
+		...stroke,
+		...lucide
+	}, shapes.map(draw));
+}
+var path = (d) => ["path", { d }];
+var circle = (cx, cy, r) => ["circle", {
+	cx,
+	cy,
+	r
+}];
+var InfoIcon = glyph(circle(12, 12, 10), path("M12 16v-4"), path("M12 8h.01"));
+var ListCollapseIcon = glyph(path("m3 10 2.5-2.5L3 5"), path("m3 19 2.5-2.5L3 14"), path("M10 6h11"), path("M10 12h11"), path("M10 18h11"));
+var ImageIcon = glyph(["rect", {
+	width: 18,
+	height: 18,
+	x: 3,
+	y: 3,
+	rx: 2,
+	ry: 2
+}], circle(9, 9, 2), path("m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21"));
+var VideoIcon = glyph(path("m16 13 5.223 3.482a.5.5 0 0 0 .777-.416V7.87a.5.5 0 0 0-.752-.432L16 10.5"), ["rect", {
+	x: 2,
+	y: 6,
+	width: 14,
+	height: 12,
+	rx: 2
+}]);
+var DatabaseIcon = glyph(["ellipse", {
+	cx: 12,
+	cy: 5,
+	rx: 9,
+	ry: 3
+}], path("M3 5V19A9 3 0 0 0 21 19V5"), path("M3 12A9 3 0 0 0 21 12"));
+var TableIcon = glyph(path("M12 3v18"), ["rect", {
+	width: 18,
+	height: 18,
+	x: 3,
+	y: 3,
+	rx: 2
+}], path("M3 9h18"), path("M3 15h18"));
+var ChartColumnIcon = glyph(path("M3 3v16a2 2 0 0 0 2 2h16"), path("M18 17V9"), path("M13 17V5"), path("M8 17v-3"));
+var ChevronRightIcon = glyph(path("m9 18 6-6-6-6"));
+var SettingsIcon = glyph(path("M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915"), circle(12, 12, 3));
+var CopyIcon = glyph(["rect", {
+	width: 14,
+	height: 14,
+	x: 8,
+	y: 8,
+	rx: 2,
+	ry: 2
+}], path("M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"));
+var ArrowUpIcon = glyph(path("m5 12 7-7 7 7"), path("M12 19V5"));
+var ArrowDownIcon = glyph(path("M12 5v14"), path("m19 12-7 7-7-7"));
+var Trash2Icon = glyph(path("M3 6h18"), path("M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"), path("M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"), ["line", {
+	x1: 10,
+	x2: 10,
+	y1: 11,
+	y2: 17
+}], ["line", {
+	x1: 14,
+	x2: 14,
+	y1: 11,
+	y2: 17
+}]);
+var GripVerticalIcon = glyph(circle(9, 12, 1), circle(9, 5, 1), circle(9, 19, 1), circle(15, 12, 1), circle(15, 5, 1), circle(15, 19, 1));
+export { ArrowDownIcon, ArrowUpIcon, ChartColumnIcon, ChevronRightIcon, CopyIcon, DatabaseIcon, GripVerticalIcon, ImageIcon, InfoIcon, ListCollapseIcon, SettingsIcon, TableIcon, Trash2Icon, VideoIcon };

package/dist/components/block-editor/block-nodes.d.ts

@@ -0,0 +1,68 @@
+import { type BlockAttrs, type BlockSpec } from "@chelone/core";
+import { Node } from "@tiptap/core";
+import { NodeViewContent } from "@tiptap/vue-3";
+import { type Component } from "vue";
+import type { Translate } from "../../i18n/use-translate.js";
+export interface BlockRenderProps<A extends BlockAttrs = BlockAttrs> {
+    attrs: A;
+    mode: "edit" | "read";
+    selected?: boolean;
+    /** Only in edit mode. */
+    updateAttrs?: (attrs: Partial<A>) => void;
+}
+export interface BlockConfigProps<A extends BlockAttrs = BlockAttrs> {
+    attrs: A;
+    onChange: (attrs: Partial<A>) => void;
+}
+/**
+ * A block an editor can insert: the framework-free spec, plus the components
+ * that draw it. `render` is the fallback for `edit` and `read`.
+ */
+export interface BlockDefinition<A extends BlockAttrs = BlockAttrs> extends BlockSpec<A> {
+    icon?: Component<{
+        class?: string;
+    }>;
+    render: Component<BlockRenderProps<A>>;
+    edit?: Component<BlockRenderProps<A>>;
+    read?: Component<BlockRenderProps<A>>;
+    config?: "auto" | Component<BlockConfigProps<A>>;
+}
+/**
+ * Declares a block. `A` comes from the schema, so `attrs` is typed in every
+ * component. The result is the erased `BlockDefinition`, so blocks with
+ * different attrs share one array.
+ *
+ * A block component renders inside the editor, outside the component tree
+ * that holds `<Admin>`, so it cannot `inject` what `<Admin>` provides.
+ *
+ * @example
+ * const callout = defineBlock({
+ *   name: "callout",
+ *   label: "Callout",
+ *   group: "Text",
+ *   schema: z.object({ text: z.string().default("") }),
+ *   render: ({ attrs }) => h("aside", attrs.text),
+ * });
+ */
+export declare function defineBlock<A extends BlockAttrs>(def: BlockDefinition<A>): BlockDefinition;
+export { NodeViewContent };
+/**
+ * A block with its label and description translated, falling back to the
+ * ones it declares. Keys are `chelone.block_editor.blocks.<name>.label` and
+ * `.description`.
+ */
+export declare function translateBlock(translate: Translate, block: BlockDefinition): BlockDefinition;
+interface BlockNodeOptions {
+    definition: BlockDefinition;
+}
+/** A tiptap node for one block: an atom unless the block declares `content`. */
+export declare function createBlockNode(def: BlockDefinition): Node<BlockNodeOptions>;
+interface UnknownBlockOptions {
+    translate: Translate;
+}
+/**
+ * Holds a node the editor has no schema for, so that saving writes it back
+ * unchanged. Its view renders outside `<Admin>`, so the shell hands it the
+ * `translate` to use with `configure`.
+ */
+export declare const unknownBlockNode: Node<UnknownBlockOptions, any>;

package/dist/components/block-editor/block-nodes.js

@@ -0,0 +1,144 @@
+import { defineComponent, h, onBeforeUnmount, ref } from "vue";
+import { getBlockDefaultAttrs, unknownBlockType } from "@chelone/core";
+import { NodeViewContent, NodeViewWrapper, VueNodeViewRenderer, nodeViewProps } from "@tiptap/vue-3";
+import { Node, mergeAttributes } from "@tiptap/core";
+// src/components/block-editor/block-nodes.ts
+/**
+* Declares a block. `A` comes from the schema, so `attrs` is typed in every
+* component. The result is the erased `BlockDefinition`, so blocks with
+* different attrs share one array.
+*
+* A block component renders inside the editor, outside the component tree
+* that holds `<Admin>`, so it cannot `inject` what `<Admin>` provides.
+*
+* @example
+* const callout = defineBlock({
+*   name: "callout",
+*   label: "Callout",
+*   group: "Text",
+*   schema: z.object({ text: z.string().default("") }),
+*   render: ({ attrs }) => h("aside", attrs.text),
+* });
+*/
+function defineBlock(def) {
+	return def;
+}
+/**
+* A block with its label and description translated, falling back to the
+* ones it declares. Keys are `chelone.block_editor.blocks.<name>.label` and
+* `.description`.
+*/
+function translateBlock(translate, block) {
+	const key = `chelone.block_editor.blocks.${block.name}`;
+	return {
+		...block,
+		label: translate(`${key}.label`, { _: block.label }),
+		description: block.description === void 0 ? void 0 : translate(`${key}.description`, { _: block.description })
+	};
+}
+var BlockView = defineComponent({
+	name: "BlockView",
+	props: nodeViewProps,
+	setup(props) {
+		const { definition } = props.extension.options;
+		const editable = ref(props.editor.isEditable);
+		const sync = () => {
+			editable.value = props.editor.isEditable;
+		};
+		props.editor.on("transaction", sync);
+		onBeforeUnmount(() => props.editor.off("transaction", sync));
+		return () => {
+			const component = editable.value ? definition.edit ?? definition.render : definition.read ?? definition.render;
+			return h(NodeViewWrapper, {
+				"data-block": definition.name,
+				"data-selected": props.selected || void 0
+			}, () => h(component, {
+				attrs: props.node.attrs,
+				mode: editable.value ? "edit" : "read",
+				selected: props.selected,
+				updateAttrs: editable.value ? props.updateAttributes : void 0
+			}));
+		};
+	}
+});
+/** A tiptap node for one block: an atom unless the block declares `content`. */
+function createBlockNode(def) {
+	const atom = def.atom ?? def.content === void 0;
+	const defaults = getBlockDefaultAttrs(def.schema);
+	return Node.create({
+		name: def.name,
+		group: "block",
+		atom,
+		content: def.content,
+		selectable: true,
+		draggable: true,
+		addOptions() {
+			return { definition: def };
+		},
+		addAttributes() {
+			return Object.fromEntries(Object.entries(defaults).map(([key, value]) => [key, {
+				default: value,
+				rendered: false
+			}]));
+		},
+		parseHTML() {
+			return [{ tag: `div[data-block="${def.name}"]` }];
+		},
+		renderHTML({ HTMLAttributes }) {
+			const attrs = mergeAttributes(HTMLAttributes, { "data-block": def.name });
+			return atom ? ["div", attrs] : [
+				"div",
+				attrs,
+				0
+			];
+		},
+		addNodeView() {
+			return VueNodeViewRenderer(BlockView);
+		}
+	});
+}
+var UnknownBlockView = defineComponent({
+	name: "UnknownBlockView",
+	props: nodeViewProps,
+	setup(props) {
+		const { translate } = props.extension.options;
+		return () => {
+			const { payload } = props.node.attrs;
+			const type = typeof payload === "object" && payload !== null && "type" in payload && typeof payload.type === "string" ? payload.type : "";
+			return h(NodeViewWrapper, { "data-unknown-block": "" }, () => translate("chelone.block_editor.unknown", {
+				type,
+				_: "Unknown block: {type}. It is kept on save."
+			}));
+		};
+	}
+});
+/**
+* Holds a node the editor has no schema for, so that saving writes it back
+* unchanged. Its view renders outside `<Admin>`, so the shell hands it the
+* `translate` to use with `configure`.
+*/
+var unknownBlockNode = Node.create({
+	name: unknownBlockType,
+	group: "block",
+	atom: true,
+	selectable: true,
+	addOptions() {
+		return { translate: (key, params) => params?._?.toString() ?? key };
+	},
+	addAttributes() {
+		return { payload: {
+			default: null,
+			rendered: false
+		} };
+	},
+	parseHTML() {
+		return [{ tag: "div[data-unknown-block]" }];
+	},
+	renderHTML({ HTMLAttributes }) {
+		return ["div", mergeAttributes(HTMLAttributes, { "data-unknown-block": "" })];
+	},
+	addNodeView() {
+		return VueNodeViewRenderer(UnknownBlockView);
+	}
+});
+export { NodeViewContent, createBlockNode, defineBlock, translateBlock, unknownBlockNode };