@chelone/vue 0.6.0 → 0.9.0

package/dist/components/rich-text-input/rich-text-input.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,186 @@
+import { useInput } from "../../form/use-input.js";
+import { useResourceContext } from "../../resource-context.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 { Color, EndColorOnEnter, HighlightedCodeBlock, TextStyle, codeBlockOptions, starterKitOptions } from "./rich-text-extensions.js";
+import { RichTextImage, getRichTextHtml, resolveRichTextImageConfig } from "./rich-text-image.js";
+import rich_text_toolbar_default from "./rich-text-toolbar.js";
+/* empty css          */
+import { computed, createBlock, createCommentVNode, createElementVNode, createVNode, defineComponent, normalizeClass, openBlock, renderSlot, unref, watch, withCtx } from "vue";
+import { Placeholder } from "@tiptap/extensions";
+import { TextSelection } from "@tiptap/pm/state";
+import StarterKit from "@tiptap/starter-kit";
+import { Editor, EditorContent, useEditor } from "@tiptap/vue-3";
+// src/components/rich-text-input/rich-text-input.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["id", "aria-invalid"];
+var rich_text_input_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "rich-text-input",
+	props: {
+		helperText: {
+			type: [String, Boolean],
+			default: void 0
+		},
+		disabled: { type: Boolean },
+		readOnly: { type: Boolean },
+		placeholder: {},
+		images: {
+			type: [Boolean, Object],
+			default: true
+		},
+		colors: {
+			type: Boolean,
+			default: true
+		},
+		codeHighlight: {
+			type: Boolean,
+			default: true
+		},
+		editorOptions: {},
+		class: {},
+		source: {},
+		label: {
+			type: [String, Boolean],
+			default: void 0
+		},
+		defaultValue: {},
+		validate: {}
+	},
+	setup(__props) {
+		/**
+		* `<RichTextInput>` — edits an HTML string in a tiptap editor with a formatting
+		* toolbar. The Vue twin of `@chelone/react`'s
+		* `rich-text-input/rich-text-input.tsx`, on `@tiptap/vue-3`.
+		*
+		* Needs the optional `@tiptap/*` peers. The value is always an HTML string, and
+		* the editor's schema decides what survives: scripts, frames, event handlers and
+		* unsafe link URLs are dropped. Clearing the editor stores `""`, not null. From
+		* npm, also import `@chelone/vue/rich-text-input.css` once for the content
+		* styles; the registry item ships that file with the component. The `#toolbar`
+		* slot, which receives `{ editor }`, replaces the default toolbar.
+		*
+		* @example
+		* import { RichTextInput } from "@chelone/vue/rich-text-input";
+		*
+		* <RichTextInput source="body" label="Article" />
+		*/
+		const props = __props;
+		const { id, isRequired, value, setValue, blur, error, touched } = useInput({
+			source: props.source,
+			parse: (input) => input,
+			defaultValue: props.defaultValue ?? "",
+			validate: props.validate
+		});
+		const resource = useResourceContext();
+		const labelId = `${id}-label`;
+		const html = computed(() => typeof value.value === "string" ? value.value : "");
+		const editable = computed(() => props.disabled !== true && props.readOnly !== true);
+		const invalid = computed(() => touched.value && error.value != null);
+		const buildEditorOptions = () => ({
+			extensions: [
+				StarterKit.configure({
+					...starterKitOptions,
+					codeBlock: props.codeHighlight ? false : codeBlockOptions
+				}),
+				...props.images === false ? [] : [RichTextImage.configure({ config: () => resolveRichTextImageConfig(props.images) })],
+				Placeholder.configure({ placeholder: () => props.placeholder ?? "" }),
+				...props.colors ? [
+					TextStyle,
+					Color,
+					EndColorOnEnter
+				] : [],
+				...props.codeHighlight ? [HighlightedCodeBlock] : []
+			],
+			content: html.value,
+			editable: editable.value,
+			editorProps: { attributes: {
+				class: "rich-text min-h-32 px-3 py-2 outline-none",
+				...props.label === false ? {} : { "aria-labelledby": labelId }
+			} },
+			...props.editorOptions,
+			onUpdate: (event) => {
+				setValue(getRichTextHtml(event.editor));
+				props.editorOptions?.onUpdate?.(event);
+			},
+			onBlur: (event) => {
+				blur();
+				props.editorOptions?.onBlur?.(event);
+			}
+		});
+		const editor = useEditor(buildEditorOptions());
+		watch([
+			() => props.images === false,
+			() => props.colors,
+			() => props.codeHighlight
+		], () => {
+			const current = editor.value;
+			if (!current) return;
+			const content = getRichTextHtml(current);
+			current.destroy();
+			editor.value = new Editor({
+				...buildEditorOptions(),
+				content
+			});
+		});
+		watch([
+			editor,
+			editable,
+			() => props.placeholder
+		], ([current, canEdit]) => {
+			if (!current) return;
+			current.setEditable(canEdit, false);
+			current.view.dispatch(current.state.tr);
+		}, { flush: "post" });
+		watch([editor, html], ([current, next]) => {
+			if (!current) return;
+			if (getRichTextHtml(current) === next) return;
+			const { from, to } = current.state.selection;
+			current.commands.setContent(next, { emitUpdate: false });
+			const { doc, tr } = current.state;
+			const clamp = (pos) => doc.resolve(Math.min(pos, doc.content.size));
+			current.view.dispatch(tr.setSelection(TextSelection.between(clamp(from), clamp(to))));
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(Field), {
+				class: normalizeClass(props.class),
+				"data-invalid": invalid.value
+			}, {
+				default: withCtx(() => [
+					__props.label !== false ? (openBlock(), createBlock(unref(FieldLabel), {
+						key: 0,
+						id: labelId,
+						"html-for": unref(id),
+						onClick: _cache[0] || (_cache[0] = ($event) => unref(editor)?.commands.focus())
+					}, {
+						default: withCtx(() => [createVNode(field_label_text_default, {
+							label: __props.label,
+							source: __props.source,
+							resource: unref(resource),
+							"is-required": unref(isRequired)
+						}, null, 8, [
+							"label",
+							"source",
+							"resource",
+							"is-required"
+						])]),
+						_: 1
+					}, 8, ["html-for"])) : createCommentVNode("", true),
+					createElementVNode("div", {
+						id: unref(id),
+						"data-slot": "rich-text-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"])
+					}, [unref(editor) ? renderSlot(_ctx.$slots, "toolbar", { editor: unref(editor) }, () => [createVNode(rich_text_toolbar_default, { editor: unref(editor) }, null, 8, ["editor"])], void 0, 0) : createCommentVNode("", true), createVNode(unref(EditorContent), { editor: unref(editor) }, null, 8, ["editor"])], 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)
+				]),
+				_: 3
+			}, 8, ["class", "data-invalid"]);
+		};
+	}
+});
+export { rich_text_input_vue_vue_type_script_setup_true_lang_default as default };

package/dist/components/rich-text-input/rich-text-link-form.js

@@ -0,0 +1,4 @@
+import rich_text_link_form_vue_vue_type_script_setup_true_lang_default from "./rich-text-link-form.vue_vue_type_script_setup_true_lang.js";
+// src/components/rich-text-input/rich-text-link-form.vue
+var rich_text_link_form_default = rich_text_link_form_vue_vue_type_script_setup_true_lang_default;
+export { rich_text_link_form_default as default };

package/dist/components/rich-text-input/rich-text-link-form.vue.d.ts

@@ -0,0 +1,11 @@
+import type { Editor } from "@tiptap/core";
+type __VLS_Props = {
+    editor: Editor;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    close: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onClose?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/rich-text-input/rich-text-link-form.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,96 @@
+import { useTranslate } from "../../i18n/use-translate.js";
+import button_default from "../ui/button.js";
+import input_default from "../ui/input.js";
+import { createCommentVNode, createElementBlock, createTextVNode, createVNode, defineComponent, openBlock, ref, toDisplayString, unref, withCtx, withKeys, withModifiers } from "vue";
+import { isSafeLinkUrl } from "@chelone/core";
+// src/components/rich-text-input/rich-text-link-form.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = {
+	"data-slot": "rich-text-link-form",
+	class: "flex flex-wrap items-center gap-2 border-t p-2"
+};
+var _hoisted_2 = {
+	key: 0,
+	role: "alert",
+	class: "w-full text-destructive text-xs"
+};
+var rich_text_link_form_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "rich-text-link-form",
+	props: { editor: {} },
+	emits: ["close"],
+	setup(__props, { emit: __emit }) {
+		/**
+		* The link form under the toolbar: applies a safe URL to the selection, or
+		* removes the link. A URL `isSafeLinkUrl` rejects is never written.
+		*/
+		const props = __props;
+		const emit = __emit;
+		const translate = useTranslate();
+		const url = ref(props.editor.getAttributes("link").href ?? "");
+		const invalid = ref(false);
+		function apply() {
+			const { editor } = props;
+			const href = url.value.trim();
+			if (href === "") {
+				remove();
+				return;
+			}
+			if (!isSafeLinkUrl(href)) {
+				invalid.value = true;
+				return;
+			}
+			if (editor.state.selection.empty && !editor.isActive("link")) editor.chain().focus().insertContent({
+				type: "text",
+				text: href,
+				marks: [{
+					type: "link",
+					attrs: { href }
+				}]
+			}).run();
+			else editor.chain().focus().extendMarkRange("link").setLink({ href }).run();
+			emit("close");
+		}
+		function remove() {
+			props.editor.chain().focus().extendMarkRange("link").unsetLink().run();
+			emit("close");
+		}
+		function onInput(value) {
+			url.value = value;
+			invalid.value = false;
+		}
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", _hoisted_1, [
+				createVNode(input_default, {
+					type: "text",
+					class: "min-w-48 flex-1",
+					"aria-label": unref(translate)("chelone.rich_text.link_url", { _: "URL" }),
+					"aria-invalid": invalid.value,
+					"model-value": url.value,
+					onKeydown: withKeys(withModifiers(apply, ["prevent"]), ["enter"]),
+					"onUpdate:modelValue": onInput
+				}, null, 8, [
+					"aria-label",
+					"aria-invalid",
+					"model-value",
+					"onKeydown"
+				]),
+				createVNode(button_default, {
+					size: "sm",
+					onClick: apply
+				}, {
+					default: withCtx(() => [createTextVNode(toDisplayString(unref(translate)("chelone.rich_text.link_apply", { _: "Apply" })), 1)]),
+					_: 1
+				}),
+				createVNode(button_default, {
+					size: "sm",
+					variant: "outline",
+					onClick: remove
+				}, {
+					default: withCtx(() => [createTextVNode(toDisplayString(unref(translate)("chelone.rich_text.link_remove", { _: "Remove" })), 1)]),
+					_: 1
+				}),
+				invalid.value ? (openBlock(), createElementBlock("p", _hoisted_2, toDisplayString(unref(translate)("chelone.rich_text.invalid_url", { _: "Enter a web, mail or phone link" })), 1)) : createCommentVNode("", true)
+			]);
+		};
+	}
+});
+export { rich_text_link_form_vue_vue_type_script_setup_true_lang_default as default };

package/dist/components/rich-text-input/rich-text-toolbar.js

@@ -0,0 +1,4 @@
+import rich_text_toolbar_vue_vue_type_script_setup_true_lang_default from "./rich-text-toolbar.vue_vue_type_script_setup_true_lang.js";
+// src/components/rich-text-input/rich-text-toolbar.vue
+var rich_text_toolbar_default = rich_text_toolbar_vue_vue_type_script_setup_true_lang_default;
+export { rich_text_toolbar_default as default };

package/dist/components/rich-text-input/rich-text-toolbar.vue.d.ts

@@ -0,0 +1,10 @@
+import type { Editor } from "@tiptap/core";
+/** Props for {@link RichTextToolbar}. */
+export interface RichTextToolbarProps {
+    /** The editor to format. `@tiptap/vue-3` has no editor context, so it is passed in. */
+    editor: Editor;
+    class?: string;
+}
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<RichTextToolbarProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<RichTextToolbarProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/components/rich-text-input/rich-text-toolbar.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,204 @@
+import { useTranslate } from "../../i18n/use-translate.js";
+import { cn } from "../../lib/utils.js";
+import button_default from "../ui/button.js";
+import { formatShortcut, hasRichTextColor, itemSpecs, readToolbarState, setBlockType } from "./rich-text-commands.js";
+import { richTextColorIcon, richTextIcons, richTextImageIcon } from "./rich-text-icons.js";
+import { getRichTextImageConfig } from "./rich-text-image.js";
+import rich_text_color_default from "./rich-text-color.js";
+import rich_text_image_form_default from "./rich-text-image-form.js";
+import rich_text_link_form_default from "./rich-text-link-form.js";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, normalizeClass, openBlock, renderList, resolveDynamicComponent, shallowRef, toDisplayString, unref, watch, withCtx, withModifiers } from "vue";
+import { richTextBlockTypes, richTextToolbarItems } from "@chelone/core";
+// src/components/rich-text-input/rich-text-toolbar.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = {
+	"data-slot": "rich-text-toolbar-root",
+	class: "border-b"
+};
+var _hoisted_2 = ["aria-label"];
+var _hoisted_3 = [
+	"aria-label",
+	"value",
+	"disabled"
+];
+var _hoisted_4 = ["value"];
+var rich_text_toolbar_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "rich-text-toolbar",
+	props: {
+		editor: {},
+		class: {}
+	},
+	setup(__props) {
+		/**
+		* `<RichTextToolbar>` — the formatting toolbar of `<RichTextInput>`: a block
+		* type select and one button per formatting command, listed by core's
+		* `richTextToolbarItems`. The Vue twin of `@chelone/react`'s
+		* `rich-text-input/rich-text-toolbar.tsx`; it takes the editor as a prop, so it
+		* works in the input's `#toolbar` slot, which receives `{ editor }`.
+		*
+		* @example
+		* import { RichTextInput, RichTextToolbar } from "@chelone/vue/rich-text-input";
+		*
+		* <RichTextInput source="body">
+		*   <template #toolbar="{ editor }">
+		*     <RichTextToolbar :editor="editor" class="p-2" />
+		*   </template>
+		* </RichTextInput>
+		*/
+		const props = __props;
+		const translate = useTranslate();
+		const state = shallowRef(readToolbarState(props.editor));
+		const linkOpen = shallowRef(false);
+		const imageOpen = shallowRef(false);
+		const colorOpen = shallowRef(false);
+		const hasImages = computed(() => getRichTextImageConfig(props.editor) !== null);
+		const hasColors = computed(() => hasRichTextColor(props.editor));
+		watch(() => props.editor, (editor, _previous, onCleanup) => {
+			const refresh = () => {
+				state.value = readToolbarState(editor);
+			};
+			refresh();
+			editor.on("transaction", refresh);
+			onCleanup(() => editor.off("transaction", refresh));
+		}, { immediate: true });
+		const groups = computed(() => {
+			const result = [];
+			richTextToolbarItems.forEach((item, index) => {
+				const button = state.value.buttons[index];
+				if (!button) return;
+				const last = result.at(-1);
+				if (last?.group === item.group) last.entries.push({
+					item,
+					button
+				});
+				else result.push({
+					group: item.group,
+					entries: [{
+						item,
+						button
+					}]
+				});
+			});
+			return result;
+		});
+		function label(item) {
+			return translate(item.labelKey, { _: item.defaultLabel });
+		}
+		function tooltip(item) {
+			return item.shortcut ? `${label(item)} (${formatShortcut(item.shortcut)})` : label(item);
+		}
+		function onClick(item) {
+			const run = itemSpecs[item.id].run;
+			if (run) run(props.editor);
+			else linkOpen.value = !linkOpen.value;
+		}
+		function onBlockType(event) {
+			if (event.target instanceof HTMLSelectElement) setBlockType(props.editor, event.target.value);
+		}
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", _hoisted_1, [
+				createElementVNode("div", {
+					role: "toolbar",
+					"aria-label": unref(translate)("chelone.rich_text.toolbar", { _: "Formatting" }),
+					"data-slot": "rich-text-toolbar",
+					class: normalizeClass(unref(cn)("flex flex-wrap items-center gap-1 p-1", props.class))
+				}, [createElementVNode("select", {
+					"data-slot": "native-select",
+					class: "h-8 rounded-md border border-input bg-transparent px-2 text-xs shadow-sm focus-visible:outline-none focus-visible:ring-1 disabled:cursor-not-allowed disabled:opacity-50",
+					"aria-label": unref(translate)("chelone.rich_text.block_type", { _: "Block type" }),
+					value: state.value.blockType,
+					disabled: !state.value.editable,
+					onChange: onBlockType
+				}, [(openBlock(true), createElementBlock(Fragment, null, renderList(unref(richTextBlockTypes), (type) => {
+					return openBlock(), createElementBlock("option", {
+						key: type.id,
+						value: type.id
+					}, toDisplayString(unref(translate)(type.labelKey, { _: type.defaultLabel })), 9, _hoisted_4);
+				}), 128))], 40, _hoisted_3), (openBlock(true), createElementBlock(Fragment, null, renderList(groups.value, ({ entries }) => {
+					return openBlock(), createElementBlock("div", {
+						key: entries[0]?.item.id,
+						class: "flex items-center gap-1"
+					}, [_cache[7] || (_cache[7] = createElementVNode("span", {
+						"aria-hidden": "true",
+						class: "mx-1 h-6 w-px bg-border"
+					}, null, -1)), (openBlock(true), createElementBlock(Fragment, null, renderList(entries, ({ item, button }) => {
+						return openBlock(), createElementBlock(Fragment, { key: item.id }, [
+							createVNode(button_default, {
+								variant: button.pressed ? "secondary" : "ghost",
+								size: "icon",
+								"aria-label": label(item),
+								title: tooltip(item),
+								"aria-pressed": button.pressed,
+								"aria-expanded": item.id === "link" ? linkOpen.value : void 0,
+								disabled: button.disabled,
+								onMousedown: _cache[0] || (_cache[0] = withModifiers(() => {}, ["prevent"])),
+								onClick: ($event) => onClick(item)
+							}, {
+								default: withCtx(() => [(openBlock(), createBlock(resolveDynamicComponent(unref(richTextIcons)[item.id])))]),
+								_: 2
+							}, 1032, [
+								"variant",
+								"aria-label",
+								"title",
+								"aria-pressed",
+								"aria-expanded",
+								"disabled",
+								"onClick"
+							]),
+							item.id === "code" && hasColors.value ? (openBlock(), createBlock(button_default, {
+								key: 0,
+								variant: "ghost",
+								size: "icon",
+								"aria-label": unref(translate)("chelone.rich_text.color", { _: "Text color" }),
+								title: unref(translate)("chelone.rich_text.color", { _: "Text color" }),
+								"aria-expanded": colorOpen.value,
+								disabled: !state.value.editable,
+								onMousedown: _cache[1] || (_cache[1] = withModifiers(() => {}, ["prevent"])),
+								onClick: _cache[2] || (_cache[2] = ($event) => colorOpen.value = !colorOpen.value)
+							}, {
+								default: withCtx(() => [(openBlock(), createBlock(resolveDynamicComponent(unref(richTextColorIcon))))]),
+								_: 1
+							}, 8, [
+								"aria-label",
+								"title",
+								"aria-expanded",
+								"disabled"
+							])) : createCommentVNode("", true),
+							item.id === "link" && hasImages.value ? (openBlock(), createBlock(button_default, {
+								key: 1,
+								variant: "ghost",
+								size: "icon",
+								"aria-label": unref(translate)("chelone.rich_text.image", { _: "Image" }),
+								"aria-expanded": imageOpen.value,
+								disabled: !state.value.editable,
+								onMousedown: _cache[3] || (_cache[3] = withModifiers(() => {}, ["prevent"])),
+								onClick: _cache[4] || (_cache[4] = ($event) => imageOpen.value = !imageOpen.value)
+							}, {
+								default: withCtx(() => [(openBlock(), createBlock(resolveDynamicComponent(unref(richTextImageIcon))))]),
+								_: 1
+							}, 8, [
+								"aria-label",
+								"aria-expanded",
+								"disabled"
+							])) : createCommentVNode("", true)
+						], 64);
+					}), 128))]);
+				}), 128))], 10, _hoisted_2),
+				imageOpen.value && hasImages.value ? (openBlock(), createBlock(rich_text_image_form_default, {
+					key: 0,
+					editor: __props.editor,
+					onClose: _cache[5] || (_cache[5] = ($event) => imageOpen.value = false)
+				}, null, 8, ["editor"])) : createCommentVNode("", true),
+				colorOpen.value && hasColors.value ? (openBlock(), createBlock(rich_text_color_default, {
+					key: 1,
+					editor: __props.editor
+				}, null, 8, ["editor"])) : createCommentVNode("", true),
+				linkOpen.value ? (openBlock(), createBlock(rich_text_link_form_default, {
+					key: 2,
+					editor: __props.editor,
+					onClose: _cache[6] || (_cache[6] = ($event) => linkOpen.value = false)
+				}, null, 8, ["editor"])) : createCommentVNode("", true)
+			]);
+		};
+	}
+});
+export { rich_text_toolbar_vue_vue_type_script_setup_true_lang_default as default };