@juxtui/ui 0.5.0 → 0.6.0

package/dist/editor.js

@@ -0,0 +1,1115 @@
+import { _ as useLayer, a as JDropdownMenuItem_default, h as matchText, i as JFieldShell_default, l as useFloating, m as JPortal_default, n as JKbd_default, o as JDropdownMenu_default, r as useField, t as JTooltip_default } from "./JTooltip-CAL9lsPF.js";
+import { Fragment, Transition, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, createTextVNode, createVNode, defineComponent, h, mergeModels, nextTick, normalizeClass, normalizeStyle, onBeforeUnmount, openBlock, reactive, ref, renderList, renderSlot, resolveDynamicComponent, shallowRef, toDisplayString, unref, useModel, vModelText, watch, withCtx, withDirectives, withModifiers } from "vue";
+import { Extension } from "@tiptap/core";
+import { Highlight } from "@tiptap/extension-highlight";
+import { TaskItem, TaskList } from "@tiptap/extension-list";
+import { Typography } from "@tiptap/extension-typography";
+import { CharacterCount, Placeholder } from "@tiptap/extensions";
+import { StarterKit } from "@tiptap/starter-kit";
+import { EditorContent, useEditor } from "@tiptap/vue-3";
+import { BubbleMenu } from "@tiptap/vue-3/menus";
+import { PluginKey } from "@tiptap/pm/state";
+import Suggestion from "@tiptap/suggestion";
+//#region src/editor/icons.ts
+function icon(name, children) {
+	const component = (props) => h("svg", {
+		"xmlns": "http://www.w3.org/2000/svg",
+		"viewBox": "0 0 16 16",
+		"width": 16,
+		"height": 16,
+		"fill": "none",
+		"stroke": "currentColor",
+		"stroke-width": 1.5,
+		"stroke-linecap": "round",
+		"stroke-linejoin": "round",
+		"aria-hidden": "true",
+		"focusable": "false",
+		...props
+	}, children());
+	component.displayName = name;
+	return component;
+}
+var p = (d) => h("path", { d });
+var IconBold = icon("IconBold", () => [p("M4.5 3h4.25a2.5 2.5 0 0 1 0 5H4.5zM4.5 8h5a2.5 2.5 0 0 1 0 5h-5z")]);
+var IconItalic = icon("IconItalic", () => [p("M10 3H6.5M9.5 13H6M9 3 7 13")]);
+var IconUnderline = icon("IconUnderline", () => [p("M4.5 2.75V7a3.5 3.5 0 0 0 7 0V2.75M3.5 13.5h9")]);
+var IconStrike = icon("IconStrike", () => [p("M11.5 4.25C11 3.2 9.8 2.75 8.2 2.75 6.1 2.75 4.75 3.8 4.75 5.25c0 1 .6 1.7 1.7 2.1M3 8.25h10M11.25 10.25c.1.3.15.6.15.9 0 1.5-1.45 2.6-3.6 2.6-1.8 0-3.1-.6-3.65-1.75")]);
+var IconCode = icon("IconCode", () => [p("M6 4.5 2.75 8 6 11.5M10 4.5 13.25 8 10 11.5")]);
+var IconLink = icon("IconLink", () => [p("M6.75 9.25a2.75 2.75 0 0 0 3.9 0l2-2a2.75 2.75 0 0 0-3.9-3.9l-.6.6M9.25 6.75a2.75 2.75 0 0 0-3.9 0l-2 2a2.75 2.75 0 0 0 3.9 3.9l.6-.6")]);
+var IconUnlink = icon("IconUnlink", () => [p("M9.8 3.95l.6-.6a2.75 2.75 0 0 1 3.9 3.9l-1.2 1.2M6.2 12.05l-.6.6a2.75 2.75 0 0 1-3.9-3.9l1.2-1.2M2.5 2.5l11 11")]);
+var IconExternal = icon("IconExternal", () => [p("M9.5 2.75h3.75V6.5M13.25 2.75 7.5 8.5M11.5 9.5v2.75a1 1 0 0 1-1 1h-6.75a1 1 0 0 1-1-1V5.5a1 1 0 0 1 1-1H6.5")]);
+var IconHighlight = icon("IconHighlight", () => [p("M9.75 3.25l3 3-5.5 5.5H4.25v-3zM2.75 13.5h10.5")]);
+var IconBulletList = icon("IconBulletList", () => [
+	p("M6.5 4h7M6.5 8h7M6.5 12h7"),
+	h("circle", {
+		"cx": 3,
+		"cy": 4,
+		"r": .6,
+		"fill": "currentColor",
+		"stroke-width": 1
+	}),
+	h("circle", {
+		"cx": 3,
+		"cy": 8,
+		"r": .6,
+		"fill": "currentColor",
+		"stroke-width": 1
+	}),
+	h("circle", {
+		"cx": 3,
+		"cy": 12,
+		"r": .6,
+		"fill": "currentColor",
+		"stroke-width": 1
+	})
+]);
+var IconOrderedList = icon("IconOrderedList", () => [p("M6.75 4h6.75M6.75 8h6.75M6.75 12h6.75M2.5 3l1-.5v3M2.5 5.5h2M2.5 9.25c0-.5.45-.9 1-.9s1 .35 1 .85c0 .9-2 1.3-2 2.3h2")]);
+var IconTaskList = icon("IconTaskList", () => [p("M8 4.25h5.5M8 11.75h5.5M2.5 4.25l1.25 1.25L6 3.25"), h("rect", {
+	x: 2.5,
+	y: 9.75,
+	width: 3.5,
+	height: 3.5,
+	rx: .75
+})]);
+var IconQuote = icon("IconQuote", () => [p("M3 4v8M6 5.5h7M6 8h7M6 10.5h4.5")]);
+var IconCodeBlock = icon("IconCodeBlock", () => [h("rect", {
+	x: 2,
+	y: 2.75,
+	width: 12,
+	height: 10.5,
+	rx: 2
+}), p("M6.25 6.5 4.75 8l1.5 1.5M9.75 6.5l1.5 1.5-1.5 1.5")]);
+var IconDivider = icon("IconDivider", () => [p("M2.5 8h11M5 4.5h6M5 11.5h6")]);
+var IconUndo = icon("IconUndo", () => [p("M5.5 3.5 2.75 6.25 5.5 9M3 6.25h6.25a3.75 3.75 0 0 1 0 7.5H7")]);
+var IconRedo = icon("IconRedo", () => [p("M10.5 3.5l2.75 2.75L10.5 9M13 6.25H6.75a3.75 3.75 0 0 0 0 7.5H9")]);
+var IconText = icon("IconText", () => [p("M3.5 4V3h9v1M8 3v10M6.25 13h3.5")]);
+var IconHeading1 = icon("IconHeading1", () => [p("M2.5 3.5v9M8 3.5v9M2.5 8H8M11 6.25l1.75-1.25v7.5")]);
+var IconHeading2 = icon("IconHeading2", () => [p("M2.5 3.5v9M7.5 3.5v9M2.5 8h5M10.25 6.5c0-.95.75-1.6 1.6-1.6s1.65.6 1.65 1.55c0 1.95-3.25 2.8-3.25 5.05h3.3")]);
+var IconHeading3 = icon("IconHeading3", () => [p("M2.5 3.5v9M7.5 3.5v9M2.5 8h5M10.25 5.25h3.25L11.75 7.7c1 0 1.75.7 1.75 1.75 0 1.2-.9 1.95-1.9 1.95-.7 0-1.2-.3-1.5-.8")]);
+var IconChevronDown = icon("IconChevronDown", () => [p("M4.5 6.25 8 9.75l3.5-3.5")]);
+var IconCornerDownLeft = icon("IconCornerDownLeft", () => [p("M12.5 3.5v4.25a2 2 0 0 1-2 2h-7M6 7l-2.5 2.75L6 12.5")]);
+//#endregion
+//#region src/editor/commands.ts
+var chain = (editor, range) => range ? editor.chain().focus().deleteRange(range) : editor.chain().focus();
+var blockCommands = [
+	{
+		id: "text",
+		label: "Text",
+		description: "Plain paragraph",
+		icon: IconText,
+		keywords: [
+			"paragraph",
+			"p",
+			"body"
+		],
+		convertible: true,
+		isActive: (editor) => editor.isActive("paragraph") && !editor.isActive("bulletList") && !editor.isActive("orderedList") && !editor.isActive("taskList") && !editor.isActive("blockquote"),
+		run: (editor, range) => chain(editor, range).setParagraph().run()
+	},
+	{
+		id: "h1",
+		label: "Heading 1",
+		description: "Large section title",
+		icon: IconHeading1,
+		markdown: "#",
+		keywords: [
+			"title",
+			"h1",
+			"big"
+		],
+		convertible: true,
+		isActive: (editor) => editor.isActive("heading", { level: 1 }),
+		run: (editor, range) => chain(editor, range).setHeading({ level: 1 }).run()
+	},
+	{
+		id: "h2",
+		label: "Heading 2",
+		description: "Medium section title",
+		icon: IconHeading2,
+		markdown: "##",
+		keywords: ["subtitle", "h2"],
+		convertible: true,
+		isActive: (editor) => editor.isActive("heading", { level: 2 }),
+		run: (editor, range) => chain(editor, range).setHeading({ level: 2 }).run()
+	},
+	{
+		id: "h3",
+		label: "Heading 3",
+		description: "Small section title",
+		icon: IconHeading3,
+		markdown: "###",
+		keywords: ["h3"],
+		convertible: true,
+		isActive: (editor) => editor.isActive("heading", { level: 3 }),
+		run: (editor, range) => chain(editor, range).setHeading({ level: 3 }).run()
+	},
+	{
+		id: "bullet",
+		label: "Bulleted list",
+		description: "A simple list",
+		icon: IconBulletList,
+		markdown: "-",
+		keywords: [
+			"ul",
+			"unordered",
+			"bullets"
+		],
+		convertible: true,
+		isActive: (editor) => editor.isActive("bulletList"),
+		run: (editor, range) => chain(editor, range).toggleBulletList().run()
+	},
+	{
+		id: "ordered",
+		label: "Numbered list",
+		description: "A list with numbers",
+		icon: IconOrderedList,
+		markdown: "1.",
+		keywords: [
+			"ol",
+			"ordered",
+			"numbers"
+		],
+		convertible: true,
+		isActive: (editor) => editor.isActive("orderedList"),
+		run: (editor, range) => chain(editor, range).toggleOrderedList().run()
+	},
+	{
+		id: "task",
+		label: "To-do list",
+		description: "Checkboxes you can tick off",
+		icon: IconTaskList,
+		markdown: "[ ]",
+		keywords: [
+			"todo",
+			"task",
+			"checkbox",
+			"checklist"
+		],
+		convertible: true,
+		isActive: (editor) => editor.isActive("taskList"),
+		run: (editor, range) => chain(editor, range).toggleTaskList().run()
+	},
+	{
+		id: "quote",
+		label: "Quote",
+		description: "Set a passage apart",
+		icon: IconQuote,
+		markdown: ">",
+		keywords: ["blockquote", "citation"],
+		convertible: true,
+		isActive: (editor) => editor.isActive("blockquote"),
+		run: (editor, range) => chain(editor, range).toggleBlockquote().run()
+	},
+	{
+		id: "code",
+		label: "Code block",
+		description: "Monospaced, whitespace kept",
+		icon: IconCodeBlock,
+		markdown: "```",
+		keywords: [
+			"pre",
+			"snippet",
+			"code"
+		],
+		convertible: true,
+		isActive: (editor) => editor.isActive("codeBlock"),
+		run: (editor, range) => chain(editor, range).toggleCodeBlock().run()
+	},
+	{
+		id: "divider",
+		label: "Divider",
+		description: "A line between sections",
+		icon: IconDivider,
+		markdown: "---",
+		keywords: [
+			"hr",
+			"rule",
+			"separator",
+			"line"
+		],
+		convertible: false,
+		run: (editor, range) => chain(editor, range).setHorizontalRule().run()
+	}
+];
+//#endregion
+//#region src/editor/JEditorButton.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1$1 = [
+	"aria-label",
+	"aria-pressed",
+	"disabled"
+];
+//#endregion
+//#region src/editor/JEditorButton.vue
+var JEditorButton_default = /* @__PURE__ */ defineComponent({
+	__name: "JEditorButton",
+	props: {
+		label: {},
+		shortcut: {},
+		active: { type: Boolean },
+		disabled: { type: Boolean },
+		side: {}
+	},
+	emits: ["click"],
+	setup(__props, { emit: __emit }) {
+		/** Internal: a toolbar / bubble-menu button with a tooltip that shows its shortcut. */
+		const emit = __emit;
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(JTooltip_default, {
+				side: __props.side ?? "top",
+				delay: 500,
+				disabled: __props.disabled
+			}, {
+				content: withCtx(() => [createTextVNode(toDisplayString(__props.label), 1), __props.shortcut ? (openBlock(), createBlock(JKbd_default, {
+					key: 0,
+					keys: __props.shortcut,
+					size: "sm",
+					class: "j-editor-button__keys"
+				}, null, 8, ["keys"])) : createCommentVNode("", true)]),
+				default: withCtx(() => [createElementVNode("button", {
+					type: "button",
+					class: normalizeClass(["j-editor-button j-focusable", { "is-active": __props.active }]),
+					"aria-label": __props.label,
+					"aria-pressed": __props.active === void 0 ? void 0 : __props.active,
+					disabled: __props.disabled,
+					"data-editor-control": "",
+					onPointerdown: _cache[0] || (_cache[0] = withModifiers(() => {}, ["prevent"])),
+					onClick: _cache[1] || (_cache[1] = ($event) => emit("click", $event))
+				}, [renderSlot(_ctx.$slots, "default")], 42, _hoisted_1$1)]),
+				_: 3
+			}, 8, ["side", "disabled"]);
+		};
+	}
+});
+//#endregion
+//#region src/editor/slash.ts
+function filterCommands(query) {
+	const q = query.trim();
+	if (!q) return blockCommands;
+	return blockCommands.map((command) => {
+		return {
+			command,
+			score: Math.max(matchText(q, command.label).score, ...command.keywords.map((keyword) => matchText(q, keyword).score * .9))
+		};
+	}).filter((entry) => entry.score > 0).sort((a, b) => b.score - a.score).map((entry) => entry.command);
+}
+var slashPluginKey = new PluginKey("juxtSlash");
+/**
+* Typing `/` opens a menu of blocks at the caret. The menu itself is rendered
+* by JEditor from `state`; this extension only feeds it and handles keys.
+*/
+function createSlashCommands(state) {
+	return Extension.create({
+		name: "juxtSlashCommands",
+		addProseMirrorPlugins() {
+			return [Suggestion({
+				editor: this.editor,
+				pluginKey: slashPluginKey,
+				char: "/",
+				allow: ({ state: editorState, range }) => {
+					const $from = editorState.doc.resolve(range.from);
+					return $from.parent.type.name === "paragraph" && !$from.parent.type.spec.code;
+				},
+				items: ({ query }) => filterCommands(query),
+				command: ({ editor, range, props }) => props.run(editor, range),
+				render: () => {
+					let select = null;
+					return {
+						onStart: (props) => {
+							select = (item) => props.command(item);
+							Object.assign(state, {
+								open: true,
+								query: props.query,
+								items: props.items,
+								index: 0,
+								rect: props.clientRect?.() ?? null,
+								select
+							});
+						},
+						onUpdate: (props) => {
+							select = (item) => props.command(item);
+							const index = props.query !== state.query ? 0 : Math.min(state.index, Math.max(0, props.items.length - 1));
+							Object.assign(state, {
+								query: props.query,
+								items: props.items,
+								index,
+								rect: props.clientRect?.() ?? null,
+								select
+							});
+						},
+						onKeyDown: ({ event }) => {
+							if (!state.open) return false;
+							const count = state.items.length;
+							if (event.key === "ArrowDown") {
+								if (count) state.index = (state.index + 1) % count;
+								return true;
+							}
+							if (event.key === "ArrowUp") {
+								if (count) state.index = (state.index - 1 + count) % count;
+								return true;
+							}
+							if (event.key === "Enter" || event.key === "Tab") {
+								const item = state.items[state.index];
+								if (!item) return false;
+								select?.(item);
+								return true;
+							}
+							if (event.key === "Escape") {
+								state.open = false;
+								return true;
+							}
+							return false;
+						},
+						onExit: () => {
+							Object.assign(state, {
+								open: false,
+								items: [],
+								query: "",
+								rect: null,
+								select: null
+							});
+						}
+					};
+				}
+			})];
+		}
+	});
+}
+//#endregion
+//#region src/editor/JEditor.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["disabled"];
+var _hoisted_2 = { class: "j-editor__block-label" };
+var _hoisted_3 = {
+	key: 1,
+	class: "j-editor__prose j-editor__ssr",
+	"aria-hidden": "true"
+};
+var _hoisted_4 = {
+	key: 1,
+	class: "j-editor__footer",
+	"aria-live": "polite"
+};
+var _hoisted_5 = [
+	"id",
+	"aria-selected",
+	"onPointermove",
+	"onClick"
+];
+var _hoisted_6 = { class: "j-editor__slash-icon" };
+var _hoisted_7 = { class: "j-editor__slash-text" };
+var _hoisted_8 = { class: "j-editor__slash-title" };
+var _hoisted_9 = { class: "j-editor__slash-description" };
+var _hoisted_10 = {
+	key: 0,
+	class: "j-editor__slash-md"
+};
+var _hoisted_11 = {
+	key: 1,
+	class: "j-editor__slash-empty"
+};
+var _hoisted_12 = {
+	type: "submit",
+	class: "j-editor-button j-focusable",
+	"aria-label": "Apply link"
+};
+var _hoisted_13 = ["href"];
+//#endregion
+//#region src/editor/JEditor.vue
+var JEditor_default = /* @__PURE__ */ defineComponent({
+	inheritAttrs: false,
+	__name: "JEditor",
+	props: /*@__PURE__*/ mergeModels({
+		placeholder: { default: "Write something, or type / for blocks…" },
+		format: { default: "html" },
+		toolbar: {
+			type: [String, Boolean],
+			default: "full"
+		},
+		bubbleMenu: {
+			type: Boolean,
+			default: true
+		},
+		slashCommands: {
+			type: Boolean,
+			default: true
+		},
+		limit: {},
+		showCount: {
+			type: Boolean,
+			default: false
+		},
+		minHeight: { default: "10rem" },
+		maxHeight: {},
+		readonly: { type: Boolean },
+		autofocus: { type: [Boolean, String] },
+		label: {},
+		description: {},
+		error: {
+			type: [String, Boolean],
+			default: void 0
+		},
+		required: { type: Boolean },
+		disabled: { type: Boolean },
+		id: {}
+	}, {
+		"modelValue": { default: "" },
+		"modelModifiers": {}
+	}),
+	emits: /*@__PURE__*/ mergeModels([
+		"ready",
+		"focus",
+		"blur"
+	], ["update:modelValue"]),
+	setup(__props, { expose: __expose, emit: __emit }) {
+		const props = __props;
+		const model = useModel(__props, "modelValue");
+		const emit = __emit;
+		const field = useField(props);
+		const root = ref(null);
+		const slashId = `${field.id.value}-blocks`;
+		const slash = reactive({
+			open: false,
+			query: "",
+			items: [],
+			index: 0,
+			rect: null,
+			select: null
+		});
+		let lastEmitted = null;
+		const serialize = (value) => typeof value === "string" ? value : JSON.stringify(value ?? "");
+		function contentFromModel() {
+			const value = model.value;
+			if (!value) return "";
+			return value;
+		}
+		const LinkShortcut = Extension.create({
+			name: "juxtLinkShortcut",
+			addKeyboardShortcuts() {
+				return { "Mod-k": () => {
+					openLink();
+					return true;
+				} };
+			}
+		});
+		const editor = useEditor({
+			content: contentFromModel(),
+			editable: !props.disabled && !props.readonly,
+			autofocus: props.autofocus ?? false,
+			extensions: [
+				StarterKit.configure({
+					heading: { levels: [
+						1,
+						2,
+						3
+					] },
+					link: {
+						openOnClick: false,
+						autolink: true,
+						defaultProtocol: "https",
+						HTMLAttributes: {
+							rel: "noopener noreferrer nofollow",
+							target: null
+						}
+					},
+					codeBlock: { HTMLAttributes: { spellcheck: "false" } },
+					dropcursor: {
+						color: "var(--juxt-accent)",
+						width: 2
+					}
+				}),
+				TaskList,
+				TaskItem.configure({ nested: true }),
+				Highlight,
+				Typography,
+				Placeholder.configure({ placeholder: ({ editor: instance, node }) => {
+					if (node.type.name === "heading") return `Heading ${node.attrs.level}`;
+					if (instance.isEmpty) return props.placeholder;
+					return props.slashCommands ? "Type / for blocks" : "";
+				} }),
+				CharacterCount.configure({ limit: props.limit ?? null }),
+				LinkShortcut,
+				...props.slashCommands ? [createSlashCommands(slash)] : []
+			],
+			editorProps: { attributes: editorAttributes() },
+			onCreate: ({ editor: instance }) => emit("ready", instance),
+			onFocus: () => emit("focus"),
+			onBlur: () => emit("blur"),
+			onUpdate: ({ editor: instance }) => {
+				const value = props.format === "json" ? instance.getJSON() : instance.isEmpty ? "" : instance.getHTML();
+				lastEmitted = serialize(value);
+				model.value = value;
+			}
+		});
+		function editorAttributes() {
+			const attrs = {
+				"role": "textbox",
+				"aria-multiline": "true",
+				"class": "j-editor__prose"
+			};
+			if (props.label || props.id) attrs["aria-labelledby"] = field.labelId.value;
+			if (field.describedBy.value) attrs["aria-describedby"] = field.describedBy.value;
+			if (field.invalid.value) attrs["aria-invalid"] = "true";
+			if (props.required) attrs["aria-required"] = "true";
+			if (props.disabled || props.readonly) attrs["aria-readonly"] = "true";
+			if (slash.open) {
+				attrs["aria-controls"] = slashId;
+				attrs["aria-expanded"] = "true";
+				const active = slash.items[slash.index];
+				if (active) attrs["aria-activedescendant"] = `${slashId}-${active.id}`;
+			}
+			return attrs;
+		}
+		watch([
+			() => field.describedBy.value,
+			() => field.invalid.value,
+			() => props.disabled,
+			() => props.readonly,
+			() => slash.open,
+			() => slash.index,
+			() => slash.items
+		], () => editor.value?.setOptions({ editorProps: { attributes: editorAttributes() } }));
+		watch(model, (value) => {
+			const instance = editor.value;
+			if (!instance || serialize(value) === lastEmitted) return;
+			instance.commands.setContent(value || "", { emitUpdate: false });
+			lastEmitted = serialize(value);
+		});
+		watch(() => [props.disabled, props.readonly], () => editor.value?.setEditable(!props.disabled && !props.readonly));
+		const currentBlock = computed(() => {
+			const instance = editor.value;
+			const fallback = blockCommands[0];
+			if (!instance) return fallback;
+			return blockCommands.find((command) => command.convertible && command.id !== "text" && command.isActive?.(instance)) ?? fallback;
+		});
+		const can = computed(() => ({
+			undo: !!editor.value?.can().undo(),
+			redo: !!editor.value?.can().redo()
+		}));
+		const editable = computed(() => !!editor.value && !props.disabled && !props.readonly);
+		function run(fn) {
+			const instance = editor.value;
+			if (!instance) return;
+			fn(instance.chain().focus()).run();
+		}
+		function onToolbarKeydown(event) {
+			if (event.key !== "ArrowRight" && event.key !== "ArrowLeft" && event.key !== "Home" && event.key !== "End") return;
+			const toolbar = event.currentTarget;
+			const items = Array.from(toolbar.querySelectorAll("[data-editor-control]:not(:disabled)"));
+			const index = items.indexOf(document.activeElement);
+			if (index === -1) return;
+			event.preventDefault();
+			let next = index;
+			if (event.key === "ArrowRight") next = (index + 1) % items.length;
+			else if (event.key === "ArrowLeft") next = (index - 1 + items.length) % items.length;
+			else if (event.key === "Home") next = 0;
+			else next = items.length - 1;
+			items.forEach((item, i) => item.tabIndex = i === next ? 0 : -1);
+			items[next].focus();
+		}
+		function initRovingTabindex(el) {
+			const toolbar = el;
+			if (!toolbar) return;
+			nextTick(() => {
+				const items = Array.from(toolbar.querySelectorAll("[data-editor-control]"));
+				if (items.some((item) => item.tabIndex === 0)) return;
+				items.forEach((item, i) => item.tabIndex = i === 0 ? 0 : -1);
+			});
+		}
+		function virtualAt(getRect) {
+			return {
+				getBoundingClientRect: () => getRect() ?? new DOMRect(),
+				get contextElement() {
+					return editor.value?.view.dom;
+				}
+			};
+		}
+		const slashEl = ref(null);
+		const slashRef = shallowRef(virtualAt(() => slash.rect));
+		const { styles: slashStyles, update: updateSlash } = useFloating(slashRef, slashEl, {
+			placement: "bottom-start",
+			offset: 6
+		});
+		watch(() => slash.rect, () => nextTick(updateSlash));
+		watch(() => slash.index, () => nextTick(() => document.getElementById(`${slashId}-${slash.items[slash.index]?.id}`)?.scrollIntoView({ block: "nearest" })));
+		const link = reactive({
+			open: false,
+			url: "",
+			rect: null,
+			active: false
+		});
+		const linkEl = ref(null);
+		const linkInput = ref(null);
+		const linkRef = shallowRef(virtualAt(() => link.rect));
+		const { styles: linkStyles, update: updateLink } = useFloating(linkRef, linkEl, {
+			placement: "bottom-start",
+			offset: 8
+		});
+		function selectionRect(instance) {
+			const { from, to } = instance.state.selection;
+			const start = instance.view.coordsAtPos(from);
+			const end = instance.view.coordsAtPos(to);
+			const left = Math.min(start.left, end.left);
+			const right = Math.max(start.right, end.right);
+			return new DOMRect(left, start.top, Math.max(1, right - left), end.bottom - start.top);
+		}
+		function openLink() {
+			const instance = editor.value;
+			if (!instance || !editable.value) return;
+			if (instance.isActive("link")) instance.chain().extendMarkRange("link").run();
+			link.active = instance.isActive("link");
+			link.url = instance.getAttributes("link").href ?? "";
+			link.rect = selectionRect(instance);
+			link.open = true;
+			nextTick(() => {
+				updateLink();
+				linkInput.value?.focus();
+				linkInput.value?.select();
+			});
+		}
+		function closeLink(refocus = true) {
+			link.open = false;
+			if (refocus) editor.value?.commands.focus();
+		}
+		function normalizeUrl(raw) {
+			const value = raw.trim();
+			if (!value) return null;
+			if (/^(?:javascript|data|vbscript):/i.test(value)) return null;
+			if (/^(?:https?:|mailto:|tel:|\/|#)/i.test(value)) return value;
+			if (/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value)) return `mailto:${value}`;
+			return `https://${value}`;
+		}
+		function applyLink() {
+			const instance = editor.value;
+			if (!instance) return;
+			const href = normalizeUrl(link.url);
+			if (!href) {
+				removeLink();
+				return;
+			}
+			if (instance.state.selection.empty && !instance.isActive("link")) instance.chain().focus().insertContent({
+				type: "text",
+				text: link.url.trim(),
+				marks: [{
+					type: "link",
+					attrs: { href }
+				}]
+			}).run();
+			else instance.chain().focus().extendMarkRange("link").setLink({ href }).run();
+			closeLink(false);
+		}
+		function removeLink() {
+			editor.value?.chain().focus().extendMarkRange("link").unsetLink().run();
+			closeLink(false);
+		}
+		useLayer({
+			active: computed(() => link.open),
+			elements: () => [linkEl.value],
+			onEscape: () => closeLink(),
+			onPointerDownOutside: () => closeLink(false)
+		});
+		function shouldShowBubble({ editor: instance, from, to }) {
+			if (!props.bubbleMenu || !instance.isEditable || link.open || slash.open) return false;
+			if (from === to || instance.isActive("codeBlock")) return false;
+			return instance.state.doc.textBetween(from, to).trim().length > 0;
+		}
+		const counts = computed(() => {
+			const storage = editor.value?.storage.characterCount;
+			return {
+				characters: storage?.characters() ?? 0,
+				words: storage?.words() ?? 0
+			};
+		});
+		const nearLimit = computed(() => !!props.limit && counts.value.characters >= props.limit * .9);
+		const atLimit = computed(() => !!props.limit && counts.value.characters >= props.limit);
+		function focusEditor(event) {
+			if (event.target === event.currentTarget && editable.value) editor.value?.commands.focus("end");
+		}
+		onBeforeUnmount(() => editor.value?.destroy());
+		__expose({
+			/** The underlying Tiptap editor. */
+			editor,
+			focus: (position) => editor.value?.commands.focus(position ?? null),
+			clear: () => editor.value?.commands.clearContent(true)
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(JFieldShell_default, {
+				id: unref(field).id.value,
+				class: normalizeClass(_ctx.$attrs.class),
+				style: normalizeStyle(_ctx.$attrs.style),
+				"label-id": unref(field).labelId.value,
+				"description-id": unref(field).descriptionId.value,
+				"error-id": unref(field).errorId.value,
+				label: __props.label,
+				description: __props.description,
+				"error-message": unref(field).errorMessage.value,
+				"show-description": unref(field).showDescription.value,
+				required: __props.required,
+				disabled: __props.disabled,
+				"label-for": null
+			}, createSlots({
+				default: withCtx(() => [
+					createElementVNode("div", {
+						ref_key: "root",
+						ref: root,
+						class: normalizeClass(["j-editor", {
+							"is-invalid": unref(field).invalid.value,
+							"is-disabled": __props.disabled,
+							"is-readonly": __props.readonly
+						}]),
+						style: normalizeStyle({
+							"--j-editor-min": __props.minHeight,
+							"--j-editor-max": __props.maxHeight ?? "none"
+						})
+					}, [
+						__props.toolbar ? (openBlock(), createElementBlock("div", {
+							key: 0,
+							ref: initRovingTabindex,
+							role: "toolbar",
+							"aria-label": "Formatting",
+							class: "j-editor__toolbar",
+							onKeydown: onToolbarKeydown
+						}, [
+							__props.toolbar === "full" ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [createVNode(JDropdownMenu_default, { disabled: !editable.value }, {
+								trigger: withCtx(() => [createElementVNode("button", {
+									type: "button",
+									class: "j-editor__block j-focusable",
+									disabled: !editable.value,
+									"aria-label": "Block type",
+									"data-editor-control": "",
+									onPointerdown: _cache[0] || (_cache[0] = withModifiers(() => {}, ["prevent"]))
+								}, [
+									(openBlock(), createBlock(resolveDynamicComponent(currentBlock.value.icon))),
+									createElementVNode("span", _hoisted_2, toDisplayString(currentBlock.value.label), 1),
+									createVNode(unref(IconChevronDown), { class: "j-editor__block-chevron" })
+								], 40, _hoisted_1)]),
+								default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(unref(blockCommands).filter((c) => c.convertible), (command) => {
+									return openBlock(), createBlock(JDropdownMenuItem_default, {
+										key: command.id,
+										checked: command.id === currentBlock.value.id,
+										onSelect: ($event) => unref(editor) && command.run(unref(editor))
+									}, {
+										leading: withCtx(() => [(openBlock(), createBlock(resolveDynamicComponent(command.icon)))]),
+										default: withCtx(() => [createTextVNode(" " + toDisplayString(command.label), 1)]),
+										_: 2
+									}, 1032, ["checked", "onSelect"]);
+								}), 128))]),
+								_: 1
+							}, 8, ["disabled"]), _cache[16] || (_cache[16] = createElementVNode("span", {
+								class: "j-editor__divider",
+								"aria-hidden": "true"
+							}, null, -1))], 64)) : createCommentVNode("", true),
+							createVNode(JEditorButton_default, {
+								label: "Bold",
+								shortcut: "mod+b",
+								active: !!unref(editor)?.isActive("bold"),
+								disabled: !editable.value,
+								onClick: _cache[1] || (_cache[1] = ($event) => run((c) => c.toggleBold()))
+							}, {
+								default: withCtx(() => [createVNode(unref(IconBold))]),
+								_: 1
+							}, 8, ["active", "disabled"]),
+							createVNode(JEditorButton_default, {
+								label: "Italic",
+								shortcut: "mod+i",
+								active: !!unref(editor)?.isActive("italic"),
+								disabled: !editable.value,
+								onClick: _cache[2] || (_cache[2] = ($event) => run((c) => c.toggleItalic()))
+							}, {
+								default: withCtx(() => [createVNode(unref(IconItalic))]),
+								_: 1
+							}, 8, ["active", "disabled"]),
+							createVNode(JEditorButton_default, {
+								label: "Underline",
+								shortcut: "mod+u",
+								active: !!unref(editor)?.isActive("underline"),
+								disabled: !editable.value,
+								onClick: _cache[3] || (_cache[3] = ($event) => run((c) => c.toggleUnderline()))
+							}, {
+								default: withCtx(() => [createVNode(unref(IconUnderline))]),
+								_: 1
+							}, 8, ["active", "disabled"]),
+							__props.toolbar === "full" ? (openBlock(), createBlock(JEditorButton_default, {
+								key: 1,
+								label: "Strikethrough",
+								shortcut: "mod+shift+s",
+								active: !!unref(editor)?.isActive("strike"),
+								disabled: !editable.value,
+								onClick: _cache[4] || (_cache[4] = ($event) => run((c) => c.toggleStrike()))
+							}, {
+								default: withCtx(() => [createVNode(unref(IconStrike))]),
+								_: 1
+							}, 8, ["active", "disabled"])) : createCommentVNode("", true),
+							__props.toolbar === "full" ? (openBlock(), createBlock(JEditorButton_default, {
+								key: 2,
+								label: "Inline code",
+								shortcut: "mod+e",
+								active: !!unref(editor)?.isActive("code"),
+								disabled: !editable.value,
+								onClick: _cache[5] || (_cache[5] = ($event) => run((c) => c.toggleCode()))
+							}, {
+								default: withCtx(() => [createVNode(unref(IconCode))]),
+								_: 1
+							}, 8, ["active", "disabled"])) : createCommentVNode("", true),
+							createVNode(JEditorButton_default, {
+								label: "Link",
+								shortcut: "mod+k",
+								active: !!unref(editor)?.isActive("link"),
+								disabled: !editable.value,
+								onClick: openLink
+							}, {
+								default: withCtx(() => [createVNode(unref(IconLink))]),
+								_: 1
+							}, 8, ["active", "disabled"]),
+							_cache[17] || (_cache[17] = createElementVNode("span", {
+								class: "j-editor__divider",
+								"aria-hidden": "true"
+							}, null, -1)),
+							(openBlock(true), createElementBlock(Fragment, null, renderList(unref(blockCommands).filter((c) => (__props.toolbar === "full" ? [
+								"bullet",
+								"ordered",
+								"task",
+								"quote",
+								"code",
+								"divider"
+							] : ["bullet", "ordered"]).includes(c.id)), (command) => {
+								return openBlock(), createBlock(JEditorButton_default, {
+									key: command.id,
+									label: command.label,
+									active: command.isActive ? !!(unref(editor) && command.isActive(unref(editor))) : void 0,
+									disabled: !editable.value,
+									onClick: ($event) => unref(editor) && command.run(unref(editor))
+								}, {
+									default: withCtx(() => [(openBlock(), createBlock(resolveDynamicComponent(command.icon)))]),
+									_: 2
+								}, 1032, [
+									"label",
+									"active",
+									"disabled",
+									"onClick"
+								]);
+							}), 128)),
+							_cache[18] || (_cache[18] = createElementVNode("span", { class: "j-editor__spacer" }, null, -1)),
+							unref(editor) ? renderSlot(_ctx.$slots, "toolbar-end", { editor: unref(editor) }, void 0, void 0, 3) : createCommentVNode("", true),
+							createVNode(JEditorButton_default, {
+								label: "Undo",
+								shortcut: "mod+z",
+								disabled: !editable.value || !can.value.undo,
+								onClick: _cache[6] || (_cache[6] = ($event) => run((c) => c.undo()))
+							}, {
+								default: withCtx(() => [createVNode(unref(IconUndo))]),
+								_: 1
+							}, 8, ["disabled"]),
+							createVNode(JEditorButton_default, {
+								label: "Redo",
+								shortcut: "mod+shift+z",
+								disabled: !editable.value || !can.value.redo,
+								onClick: _cache[7] || (_cache[7] = ($event) => run((c) => c.redo()))
+							}, {
+								default: withCtx(() => [createVNode(unref(IconRedo))]),
+								_: 1
+							}, 8, ["disabled"])
+						], 544)) : createCommentVNode("", true),
+						createElementVNode("div", {
+							class: "j-editor__content",
+							onClick: focusEditor
+						}, [unref(editor) ? (openBlock(), createBlock(unref(EditorContent), {
+							key: 0,
+							editor: unref(editor)
+						}, null, 8, ["editor"])) : (openBlock(), createElementBlock("p", _hoisted_3, toDisplayString(__props.placeholder), 1))]),
+						__props.showCount || __props.limit ? (openBlock(), createElementBlock("div", _hoisted_4, [createElementVNode("span", null, toDisplayString(counts.value.words) + " " + toDisplayString(counts.value.words === 1 ? "word" : "words"), 1), createElementVNode("span", { class: normalizeClass({
+							"is-near": nearLimit.value,
+							"is-at": atLimit.value
+						}) }, [
+							createTextVNode(toDisplayString(counts.value.characters), 1),
+							__props.limit ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [createTextVNode(" / " + toDisplayString(__props.limit), 1)], 64)) : createCommentVNode("", true),
+							_cache[19] || (_cache[19] = createTextVNode(" characters ", -1))
+						], 2)])) : createCommentVNode("", true)
+					], 6),
+					unref(editor) && __props.bubbleMenu ? (openBlock(), createBlock(unref(BubbleMenu), {
+						key: 0,
+						editor: unref(editor),
+						"should-show": shouldShowBubble,
+						options: {
+							placement: "top",
+							offset: 8
+						},
+						class: "j-editor__bubble"
+					}, {
+						default: withCtx(() => [
+							createVNode(JEditorButton_default, {
+								label: "Bold",
+								shortcut: "mod+b",
+								side: "bottom",
+								active: unref(editor).isActive("bold"),
+								onClick: _cache[8] || (_cache[8] = ($event) => run((c) => c.toggleBold()))
+							}, {
+								default: withCtx(() => [createVNode(unref(IconBold))]),
+								_: 1
+							}, 8, ["active"]),
+							createVNode(JEditorButton_default, {
+								label: "Italic",
+								shortcut: "mod+i",
+								side: "bottom",
+								active: unref(editor).isActive("italic"),
+								onClick: _cache[9] || (_cache[9] = ($event) => run((c) => c.toggleItalic()))
+							}, {
+								default: withCtx(() => [createVNode(unref(IconItalic))]),
+								_: 1
+							}, 8, ["active"]),
+							createVNode(JEditorButton_default, {
+								label: "Underline",
+								shortcut: "mod+u",
+								side: "bottom",
+								active: unref(editor).isActive("underline"),
+								onClick: _cache[10] || (_cache[10] = ($event) => run((c) => c.toggleUnderline()))
+							}, {
+								default: withCtx(() => [createVNode(unref(IconUnderline))]),
+								_: 1
+							}, 8, ["active"]),
+							createVNode(JEditorButton_default, {
+								label: "Strikethrough",
+								shortcut: "mod+shift+s",
+								side: "bottom",
+								active: unref(editor).isActive("strike"),
+								onClick: _cache[11] || (_cache[11] = ($event) => run((c) => c.toggleStrike()))
+							}, {
+								default: withCtx(() => [createVNode(unref(IconStrike))]),
+								_: 1
+							}, 8, ["active"]),
+							createVNode(JEditorButton_default, {
+								label: "Inline code",
+								shortcut: "mod+e",
+								side: "bottom",
+								active: unref(editor).isActive("code"),
+								onClick: _cache[12] || (_cache[12] = ($event) => run((c) => c.toggleCode()))
+							}, {
+								default: withCtx(() => [createVNode(unref(IconCode))]),
+								_: 1
+							}, 8, ["active"]),
+							createVNode(JEditorButton_default, {
+								label: "Highlight",
+								shortcut: "mod+shift+h",
+								side: "bottom",
+								active: unref(editor).isActive("highlight"),
+								onClick: _cache[13] || (_cache[13] = ($event) => run((c) => c.toggleHighlight()))
+							}, {
+								default: withCtx(() => [createVNode(unref(IconHighlight))]),
+								_: 1
+							}, 8, ["active"]),
+							_cache[20] || (_cache[20] = createElementVNode("span", {
+								class: "j-editor__divider",
+								"aria-hidden": "true"
+							}, null, -1)),
+							createVNode(JEditorButton_default, {
+								label: "Link",
+								shortcut: "mod+k",
+								side: "bottom",
+								active: unref(editor).isActive("link"),
+								onClick: openLink
+							}, {
+								default: withCtx(() => [createVNode(unref(IconLink))]),
+								_: 1
+							}, 8, ["active"])
+						]),
+						_: 1
+					}, 8, ["editor"])) : createCommentVNode("", true),
+					createVNode(JPortal_default, null, {
+						default: withCtx(() => [createVNode(Transition, { name: "j-pop" }, {
+							default: withCtx(() => [slash.open ? (openBlock(), createElementBlock("div", {
+								key: 0,
+								id: slashId,
+								ref_key: "slashEl",
+								ref: slashEl,
+								role: "listbox",
+								"aria-label": "Blocks",
+								class: "j-editor__slash j-popover-surface",
+								style: normalizeStyle(unref(slashStyles)),
+								onPointerdown: _cache[14] || (_cache[14] = withModifiers(() => {}, ["prevent"]))
+							}, [slash.items.length ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [_cache[21] || (_cache[21] = createElementVNode("div", {
+								class: "j-editor__slash-label",
+								role: "presentation"
+							}, " Blocks ", -1)), (openBlock(true), createElementBlock(Fragment, null, renderList(slash.items, (item, i) => {
+								return openBlock(), createElementBlock("div", {
+									id: `${slashId}-${item.id}`,
+									key: item.id,
+									role: "option",
+									class: normalizeClass(["j-editor__slash-item", { "is-active": i === slash.index }]),
+									"aria-selected": i === slash.index,
+									onPointermove: ($event) => slash.index = i,
+									onClick: ($event) => slash.select?.(item)
+								}, [
+									createElementVNode("span", _hoisted_6, [(openBlock(), createBlock(resolveDynamicComponent(item.icon)))]),
+									createElementVNode("span", _hoisted_7, [createElementVNode("span", _hoisted_8, toDisplayString(item.label), 1), createElementVNode("span", _hoisted_9, toDisplayString(item.description), 1)]),
+									item.markdown ? (openBlock(), createElementBlock("kbd", _hoisted_10, toDisplayString(item.markdown), 1)) : createCommentVNode("", true)
+								], 42, _hoisted_5);
+							}), 128))], 64)) : (openBlock(), createElementBlock("div", _hoisted_11, " No blocks match “" + toDisplayString(slash.query) + "” ", 1))], 36)) : createCommentVNode("", true)]),
+							_: 1
+						}), createVNode(Transition, { name: "j-pop" }, {
+							default: withCtx(() => [link.open ? (openBlock(), createElementBlock("form", {
+								key: 0,
+								ref_key: "linkEl",
+								ref: linkEl,
+								class: "j-editor__link j-popover-surface",
+								style: normalizeStyle(unref(linkStyles)),
+								onSubmit: withModifiers(applyLink, ["prevent"])
+							}, [
+								createVNode(unref(IconLink), { class: "j-editor__link-icon" }),
+								withDirectives(createElementVNode("input", {
+									ref_key: "linkInput",
+									ref: linkInput,
+									"onUpdate:modelValue": _cache[15] || (_cache[15] = ($event) => link.url = $event),
+									class: "j-editor__link-input",
+									type: "text",
+									inputmode: "url",
+									placeholder: "Paste or type a link",
+									"aria-label": "Link address",
+									autocomplete: "off",
+									spellcheck: "false"
+								}, null, 512), [[vModelText, link.url]]),
+								createElementVNode("button", _hoisted_12, [createVNode(unref(IconCornerDownLeft))]),
+								link.active && normalizeUrl(link.url) ? (openBlock(), createElementBlock("a", {
+									key: 0,
+									href: normalizeUrl(link.url),
+									target: "_blank",
+									rel: "noopener noreferrer",
+									class: "j-editor-button j-focusable",
+									"aria-label": "Open link in a new tab"
+								}, [createVNode(unref(IconExternal))], 8, _hoisted_13)) : createCommentVNode("", true),
+								link.active ? (openBlock(), createElementBlock("button", {
+									key: 1,
+									type: "button",
+									class: "j-editor-button j-focusable",
+									"aria-label": "Remove link",
+									onClick: removeLink
+								}, [createVNode(unref(IconUnlink))])) : createCommentVNode("", true)
+							], 36)) : createCommentVNode("", true)]),
+							_: 1
+						})]),
+						_: 1
+					})
+				]),
+				_: 2
+			}, [_ctx.$slots.label ? {
+				name: "label",
+				fn: withCtx(() => [renderSlot(_ctx.$slots, "label")]),
+				key: "0"
+			} : void 0]), 1032, [
+				"id",
+				"class",
+				"style",
+				"label-id",
+				"description-id",
+				"error-id",
+				"label",
+				"description",
+				"error-message",
+				"show-description",
+				"required",
+				"disabled"
+			]);
+		};
+	}
+});
+//#endregion
+export { JEditor_default as JEditor, blockCommands };
+
+//# sourceMappingURL=editor.js.map