@openstage/glyph-element 0.2.0

package/dist/glyph-editor-element.js

@@ -0,0 +1,783 @@
+import { a as e, i as t, n, o as r, r as i, t as a } from "./chunks/tiptap-Cb4W88fy.js";
+import { t as o } from "./chunks/highlight-core-C0K6BIzZ.js";
+import { a as s, i as c, n as l, o as u, r as d, s as f, t as p } from "./chunks/vendor-B82PcruV.js";
+//#region ../editor-core/dist/brand.js
+var m = { of: (e) => e }, h = () => ({
+	type: "doc",
+	content: [{ type: "paragraph" }]
+}), g = () => ({
+	schemaVersion: 1,
+	content: h()
+}), _ = (e) => typeof e == "object" && !!e, v = (e) => {
+	if (!_(e) || typeof e.schemaVersion != "number") return !1;
+	let t = e.content;
+	return _(t) && t.type === "doc" && Array.isArray(t.content);
+}, y = (e) => v(e) ? u.pure(e) : f.pure(/* @__PURE__ */ TypeError("Value is not a valid EditorDocument")), b = (e) => y(e).fold((e) => {
+	throw e;
+}, (e) => e), x = /* @__PURE__ */ new Map(), S = (e) => {
+	if (e.schemaVersion >= 1) return e.schemaVersion === 1 ? e : {
+		...e,
+		schemaVersion: 1
+	};
+	let t = x.get(e.schemaVersion);
+	return S(t ? t(e) : {
+		...e,
+		schemaVersion: e.schemaVersion + 1
+	});
+}, C = (e) => e.schemaVersion > 1 ? f.pure(/* @__PURE__ */ RangeError(`Document schemaVersion ${e.schemaVersion} is newer than supported 1`)) : u.pure(e), w = (e) => C(e).fold((e) => {
+	throw e;
+}, S), T = [
+	"bold",
+	"italic",
+	"link",
+	"heading1",
+	"heading2",
+	"heading3",
+	"bulletList",
+	"orderedList",
+	"blockquote",
+	"codeBlock",
+	"undo",
+	"redo",
+	"spacer",
+	"codeLanguage",
+	"status"
+], E = {
+	background: "--editor-background",
+	text: "--editor-text",
+	mutedText: "--editor-muted-text",
+	border: "--editor-border",
+	accent: "--editor-accent",
+	selection: "--editor-selection",
+	toolbarBackground: "--editor-toolbar-background",
+	slashMenuBackground: "--editor-slash-menu-background",
+	slashMenuHover: "--editor-slash-menu-hover",
+	slashMenuText: "--editor-slash-menu-text",
+	codeBackground: "--editor-code-background",
+	blockQuoteBorder: "--editor-block-quote-border"
+}, D = (e) => Object.keys(E).reduce((t, n) => {
+	let r = e[n];
+	return typeof r == "string" ? {
+		...t,
+		[E[n]]: r
+	} : t;
+}, {}), O = [
+	{
+		id: m.of("heading-1"),
+		label: "Heading 1",
+		keywords: ["h1", "title"],
+		run: (e) => e.setHeading(1)
+	},
+	{
+		id: m.of("heading-2"),
+		label: "Heading 2",
+		keywords: ["h2"],
+		run: (e) => e.setHeading(2)
+	},
+	{
+		id: m.of("heading-3"),
+		label: "Heading 3",
+		keywords: ["h3"],
+		run: (e) => e.setHeading(3)
+	},
+	{
+		id: m.of("paragraph"),
+		label: "Paragraph",
+		keywords: ["text", "body"],
+		run: (e) => e.setParagraph()
+	},
+	{
+		id: m.of("bullet-list"),
+		label: "Bullet list",
+		keywords: ["ul", "unordered"],
+		run: (e) => e.toggleBulletList()
+	},
+	{
+		id: m.of("numbered-list"),
+		label: "Numbered list",
+		keywords: ["ol", "ordered"],
+		run: (e) => e.toggleOrderedList()
+	},
+	{
+		id: m.of("quote"),
+		label: "Quote",
+		keywords: ["blockquote"],
+		run: (e) => e.toggleBlockquote()
+	},
+	{
+		id: m.of("code-block"),
+		label: "Code block",
+		keywords: ["pre", "code"],
+		run: (e) => e.toggleCodeBlock()
+	}
+], k = (e) => (t) => t.label.toLowerCase().includes(e) || (t.keywords ?? []).some((t) => t.toLowerCase().includes(e)), A = (e) => (t) => {
+	let n = e.trim().toLowerCase();
+	return n ? t.filter(k(n)) : [...t];
+}, j = [
+	{
+		id: "bash",
+		label: "Bash"
+	},
+	{
+		id: "csharp",
+		label: "C#"
+	},
+	{
+		id: "css",
+		label: "CSS"
+	},
+	{
+		id: "fsharp",
+		label: "F#"
+	},
+	{
+		id: "go",
+		label: "Go"
+	},
+	{
+		id: "haskell",
+		label: "Haskell"
+	},
+	{
+		id: "java",
+		label: "Java"
+	},
+	{
+		id: "javascript",
+		label: "JavaScript"
+	},
+	{
+		id: "json",
+		label: "JSON"
+	},
+	{
+		id: "kotlin",
+		label: "Kotlin"
+	},
+	{
+		id: "markdown",
+		label: "Markdown"
+	},
+	{
+		id: "ocaml",
+		label: "OCaml"
+	},
+	{
+		id: "python",
+		label: "Python"
+	},
+	{
+		id: "rust",
+		label: "Rust"
+	},
+	{
+		id: "scala",
+		label: "Scala"
+	},
+	{
+		id: "sql",
+		label: "SQL"
+	},
+	{
+		id: "typescript",
+		label: "TypeScript"
+	},
+	{
+		id: "xml",
+		label: "HTML / XML"
+	}
+];
+((...e) => (t) => e.length > 0 ? {
+	type: "text",
+	text: t,
+	marks: e
+} : {
+	type: "text",
+	text: t
+})();
+//#endregion
+//#region ../renderer/dist/highlight.js
+var M = {
+	bash: () => import("./chunks/bash-Dw1nAEst.js"),
+	csharp: () => import("./chunks/csharp-D8ELXkGi.js"),
+	css: () => import("./chunks/css-DQEU4whB.js"),
+	fsharp: () => import("./chunks/fsharp-D4SqCnMZ.js"),
+	go: () => import("./chunks/go-BJIB22rX.js"),
+	haskell: () => import("./chunks/haskell-eGGgAkgA.js"),
+	java: () => import("./chunks/java-DHPUyZsV.js"),
+	javascript: () => import("./chunks/javascript-D_CG8suQ.js"),
+	json: () => import("./chunks/json-BD6qkh12.js"),
+	kotlin: () => import("./chunks/kotlin-C75rnxi-.js"),
+	markdown: () => import("./chunks/markdown-B6LMDWi1.js"),
+	ocaml: () => import("./chunks/ocaml-CMtC1T-S.js"),
+	python: () => import("./chunks/python-ny4cvzzX.js"),
+	rust: () => import("./chunks/rust-8OMNiTht.js"),
+	scala: () => import("./chunks/scala-BB851ZJZ.js"),
+	sql: () => import("./chunks/sql-CoOMeU5k.js"),
+	typescript: () => import("./chunks/typescript-Dh7IycF2.js"),
+	xml: () => import("./chunks/xml-BpsgObpu.js")
+}, N = {
+	ts: "typescript",
+	js: "javascript",
+	jsx: "javascript",
+	sh: "bash",
+	shell: "bash",
+	zsh: "bash",
+	html: "xml",
+	htm: "xml",
+	xhtml: "xml",
+	svg: "xml",
+	cs: "csharp",
+	"c#": "csharp",
+	fs: "fsharp",
+	"f#": "fsharp",
+	kt: "kotlin",
+	py: "python",
+	rs: "rust",
+	md: "markdown"
+}, P = o(), F = (e) => {
+	let t = e.trim().toLowerCase();
+	return N[t] ?? t;
+}, I = /* @__PURE__ */ new Map(), L = (e) => {
+	let t = F(e), n = M[t];
+	if (!n) return Promise.resolve(!1);
+	if (P.registered(t)) return Promise.resolve(!0);
+	let r = I.get(t);
+	if (r) return r;
+	let i = n().then((e) => (P.registered(t) || P.register({ [t]: e.default }), !0)).catch(() => !1);
+	return I.set(t, i), i;
+}, R = "\n.hljs { color: var(--glyph-hl-text, #24292e); }\n.hljs-comment, .hljs-quote { color: var(--glyph-hl-comment, #6a737d); font-style: italic; }\n.hljs-keyword, .hljs-selector-tag, .hljs-built_in, .hljs-name, .hljs-tag {\n  color: var(--glyph-hl-keyword, #d73a49);\n}\n.hljs-string, .hljs-attr, .hljs-template-tag, .hljs-template-variable,\n.hljs-addition, .hljs-regexp {\n  color: var(--glyph-hl-string, #032f62);\n}\n.hljs-number, .hljs-literal, .hljs-boolean {\n  color: var(--glyph-hl-number, #005cc5);\n}\n.hljs-title, .hljs-title.function_, .hljs-section, .hljs-selector-id {\n  color: var(--glyph-hl-title, #6f42c1);\n}\n.hljs-type, .hljs-class .hljs-title, .hljs-title.class_ {\n  color: var(--glyph-hl-type, #e36209);\n}\n.hljs-variable, .hljs-params, .hljs-property {\n  color: var(--glyph-hl-variable, #24292e);\n}\n.hljs-symbol, .hljs-bullet, .hljs-link, .hljs-meta, .hljs-attribute {\n  color: var(--glyph-hl-meta, #005cc5);\n}\n.hljs-deletion { color: var(--glyph-hl-deletion, #b31d28); }\n.hljs-emphasis { font-style: italic; }\n.hljs-strong { font-weight: 600; }\n", z = (e) => e.content, B = (e) => ({
+	schemaVersion: 1,
+	content: e && e.type === "doc" && Array.isArray(e.content) ? e : h()
+}), V = /[\u0000-\u0020]+/g, H = (e) => {
+	let t = e.replace(V, "");
+	return t === "" ? !1 : /^(https?:|mailto:|tel:)/i.test(t) || /^[/#.]/.test(t) || !/^[a-z][a-z0-9+.-]*:/i.test(t);
+}, U = "\n:host {\n  --editor-background: #ffffff;\n  --editor-text: #111827;\n  --editor-muted-text: #6b7280;\n  --editor-border: #e5e7eb;\n  --editor-accent: #2563eb;\n  --editor-selection: #bfdbfe;\n  --editor-toolbar-background: #f9fafb;\n  --editor-slash-menu-background: #ffffff;\n  --editor-slash-menu-hover: #f3f4f6;\n  --editor-slash-menu-text: #111827;\n  --editor-code-background: #f3f4f6;\n  --editor-block-quote-border: #d1d5db;\n  --editor-radius: 0.5rem;\n\n  display: block;\n  position: relative;\n  color: var(--editor-text);\n  background: var(--editor-background);\n  border: 1px solid var(--editor-border);\n  border-radius: var(--editor-radius);\n  font-family: system-ui, -apple-system, \"Segoe UI\", Roboto, sans-serif;\n}\n\n/* config.bordered === false — hide only the outer frame border. */\n:host(.borderless) {\n  border-color: transparent;\n}\n\n.header {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 0.25rem;\n  align-items: center;\n  padding: 0.5rem;\n  background: var(--editor-toolbar-background);\n  border-top-left-radius: var(--editor-radius);\n  border-top-right-radius: var(--editor-radius);\n}\n\n/* Stay visible while the page scrolls past a long document. */\n.header.floating {\n  position: sticky;\n  top: 0;\n  z-index: 5;\n  backdrop-filter: saturate(180%) blur(2px);\n}\n\n.header select {\n  font: inherit;\n  font-size: 0.85rem;\n  padding: 0.2rem 0.35rem;\n  border: 1px solid var(--editor-border);\n  border-radius: 0.25rem;\n  background: var(--editor-background);\n  color: var(--editor-text);\n  cursor: pointer;\n}\n\n.header select[hidden] {\n  display: none;\n}\n\n.header button {\n  font: inherit;\n  font-size: 0.85rem;\n  padding: 0.25rem 0.5rem;\n  border: 1px solid transparent;\n  border-radius: 0.25rem;\n  background: transparent;\n  color: var(--editor-text);\n  cursor: pointer;\n}\n\n.header button:hover { background: var(--editor-slash-menu-hover); }\n.header button.active { border-color: var(--editor-accent); color: var(--editor-accent); }\n.header .spacer { flex: 1; }\n.header .status { font-size: 0.75rem; color: var(--editor-muted-text); }\n\n.surface { padding: 1rem; }\n\n.ProseMirror { outline: none; min-height: 8rem; line-height: 1.6; }\n.ProseMirror:focus { outline: none; }\n.ProseMirror ::selection { background: var(--editor-selection); }\n\n.ProseMirror p { margin: 0 0 0.75rem; }\n.ProseMirror h1 { font-size: 1.75rem; margin: 1rem 0 0.5rem; }\n.ProseMirror h2 { font-size: 1.4rem; margin: 1rem 0 0.5rem; }\n.ProseMirror h3 { font-size: 1.15rem; margin: 1rem 0 0.5rem; }\n.ProseMirror a { color: var(--editor-accent); text-decoration: underline; }\n.ProseMirror ul, .ProseMirror ol { padding-left: 1.5rem; margin: 0 0 0.75rem; }\n.ProseMirror blockquote {\n  margin: 0 0 0.75rem;\n  padding-left: 1rem;\n  border-left: 3px solid var(--editor-block-quote-border);\n  color: var(--editor-muted-text);\n}\n.ProseMirror pre {\n  white-space: pre;\n  overflow-x: auto;\n  padding: 1rem;\n  border-radius: 0.5rem;\n  background: var(--editor-code-background);\n  margin: 0 0 0.75rem;\n}\n.ProseMirror pre code {\n  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;\n  font-size: 0.875rem;\n}\n.ProseMirror p.is-editor-empty:first-child::before {\n  content: attr(data-placeholder);\n  color: var(--editor-muted-text);\n  float: left;\n  height: 0;\n  pointer-events: none;\n}\n\n.slash-menu {\n  position: fixed;\n  z-index: 1000;\n  min-width: 12rem;\n  background: var(--editor-slash-menu-background);\n  color: var(--editor-slash-menu-text);\n  border: 1px solid var(--editor-border);\n  border-radius: 0.5rem;\n  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);\n  padding: 0.25rem;\n  overflow: hidden;\n}\n.slash-menu[hidden] { display: none; }\n.slash-menu button {\n  display: block;\n  width: 100%;\n  text-align: left;\n  font: inherit;\n  font-size: 0.875rem;\n  padding: 0.4rem 0.6rem;\n  border: 0;\n  border-radius: 0.25rem;\n  background: transparent;\n  color: inherit;\n  cursor: pointer;\n}\n.slash-menu button:hover,\n.slash-menu button.active { background: var(--editor-slash-menu-hover); }\n\n.link-dialog {\n  position: fixed;\n  z-index: 1001;\n  width: min(24rem, calc(100vw - 2rem));\n  background: var(--editor-background);\n  color: var(--editor-text);\n  border: 1px solid var(--editor-border);\n  border-radius: 0.5rem;\n  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);\n  padding: 0.85rem;\n}\n.link-dialog[hidden] { display: none; }\n.link-dialog__title {\n  margin: 0 0 0.75rem;\n  font-size: 1rem;\n  font-weight: 600;\n  color: var(--editor-text);\n}\n.link-dialog__label {\n  display: block;\n  font-size: 0.85rem;\n  color: var(--editor-muted-text);\n}\n.link-dialog__input {\n  display: block;\n  width: 100%;\n  box-sizing: border-box;\n  margin-top: 0.4rem;\n  font: inherit;\n  padding: 0.45rem 0.55rem;\n  border: 1px solid var(--editor-border);\n  border-radius: 0.375rem;\n  background: var(--editor-background);\n  color: var(--editor-text);\n}\n.link-dialog__input:focus {\n  outline: 2px solid var(--editor-accent);\n  outline-offset: -1px;\n}\n.link-dialog__error {\n  margin: 0.5rem 0 0;\n  font-size: 0.8rem;\n  color: #dc2626;\n}\n.link-dialog__error[hidden] { display: none; }\n.link-dialog__actions {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  margin-top: 0.9rem;\n}\n.link-dialog__spacer { flex: 1; }\n.link-dialog button {\n  font: inherit;\n  font-size: 0.85rem;\n  padding: 0.4rem 0.7rem;\n  border: 1px solid var(--editor-border);\n  border-radius: 0.375rem;\n  background: var(--editor-background);\n  color: var(--editor-text);\n  cursor: pointer;\n}\n.link-dialog button:hover { background: var(--editor-slash-menu-hover); }\n.link-dialog__save {\n  border-color: var(--editor-accent);\n  color: var(--editor-accent);\n}\n.link-dialog__remove[hidden] { display: none; }\n", W = r.create({
+	name: "codeBlockBackspace",
+	addKeyboardShortcuts() {
+		let e = (e) => ({ editor: t }) => {
+			if (!t.isActive("codeBlock")) return !1;
+			let { selection: n } = t.state, { empty: r, from: i, $from: a } = n;
+			if (!r) return t.chain().focus().deleteSelection().run();
+			let o = i <= a.start(), s = i >= a.end();
+			if (e === -1 && o || e === 1 && s) return !1;
+			let c = e === -1 ? {
+				from: i - 1,
+				to: i
+			} : {
+				from: i,
+				to: i + 1
+			};
+			return t.chain().focus().deleteRange(c).run();
+		};
+		return {
+			Backspace: e(-1),
+			Delete: e(1)
+		};
+	}
+}), G = ({ editor: e, api: t, commands: n, container: r }) => {
+	let i = r.ownerDocument.createElement("div");
+	i.className = "slash-menu", i.hidden = !0, r.appendChild(i);
+	let a = n, o = !1, u = 0, f = [], m = 0, h = null, g = {
+		contextElement: e.view.dom,
+		getBoundingClientRect: () => {
+			let t = e.view.coordsAtPos(e.state.selection.$from.pos);
+			return {
+				x: t.left,
+				y: t.top,
+				left: t.left,
+				right: t.right,
+				top: t.top,
+				bottom: t.bottom,
+				width: t.right - t.left,
+				height: t.bottom - t.top
+			};
+		}
+	}, _ = () => {
+		l(g, i, {
+			strategy: "fixed",
+			placement: "bottom-start",
+			middleware: [
+				c(4),
+				d({ padding: 8 }),
+				s({ padding: 8 })
+			]
+		}).then(({ x: e, y: t }) => {
+			i.style.left = `${Math.round(e)}px`, i.style.top = `${Math.round(t)}px`;
+		});
+	}, v = () => {
+		!o && i.hidden || (o = !1, i.hidden = !0, h?.(), h = null);
+	}, y = (n) => {
+		let r = f[n];
+		r && (e.chain().focus().deleteRange({
+			from: u,
+			to: e.state.selection.$from.pos
+		}).run(), r.run(t), v());
+	}, b = () => {
+		i.replaceChildren(), f.forEach((e, t) => {
+			let n = i.ownerDocument.createElement("button");
+			n.type = "button", n.textContent = e.label, t === m && n.classList.add("active"), n.addEventListener("mousedown", (e) => {
+				e.preventDefault(), y(t);
+			}), i.appendChild(n);
+		}), i.hidden = !1, h ? _() : h = p(g, i, _);
+	};
+	return {
+		setCommands: (e) => {
+			a = e;
+		},
+		update: () => {
+			let { state: t } = e, { $from: n, empty: r } = t.selection;
+			if (!r) return v();
+			let i = t.doc.textBetween(n.start(), n.pos, "\n", "\n"), s = /(?:^|\s)\/([\w-]*)$/.exec(i);
+			if (!s) return v();
+			let c = s[1] ?? "";
+			if (u = n.pos - c.length - 1, f = A(c)(a), f.length === 0) return v();
+			o = !0, m = 0, b();
+		},
+		handleKey: (e) => {
+			if (!o) return !1;
+			let t = (e) => (m = (m + e + f.length) % f.length, b(), !0);
+			return e.key === "ArrowDown" ? t(1) : e.key === "ArrowUp" ? t(-1) : e.key === "Enter" ? (y(m), !0) : e.key === "Escape" ? (v(), !0) : !1;
+		},
+		destroy: () => {
+			h?.(), h = null, i.remove();
+		}
+	};
+}, K = (e) => {
+	let t = e.trim();
+	return t === "" || /^[a-z][a-z0-9+.-]*:/i.test(t) || /^[/#.]/.test(t) ? t : /^[^\s/]+\.[^\s]+/.test(t) || /^localhost(:\d+)?(\/|$)/i.test(t) ? `https://${t}` : t;
+}, q = ({ container: e, isSafe: t, getAnchorRect: n }) => {
+	let r = e.ownerDocument, i = r.createElement("div");
+	i.className = "link-dialog", i.hidden = !0, i.setAttribute("role", "dialog"), i.setAttribute("aria-modal", "true");
+	let a = r.createElement("p");
+	a.className = "link-dialog__title", a.id = "glyph-link-dialog-title", i.setAttribute("aria-labelledby", a.id);
+	let o = r.createElement("label");
+	o.className = "link-dialog__label", o.textContent = "Link URL";
+	let u = r.createElement("input");
+	u.type = "text", u.className = "link-dialog__input", u.placeholder = "https://example.com", o.appendChild(u);
+	let f = r.createElement("p");
+	f.className = "link-dialog__error", f.hidden = !0, f.textContent = "Enter a valid URL (http, https, mailto, tel, or relative).";
+	let m = r.createElement("div");
+	m.className = "link-dialog__actions";
+	let h = r.createElement("button");
+	h.type = "button", h.textContent = "Remove", h.className = "link-dialog__remove";
+	let g = r.createElement("span");
+	g.className = "link-dialog__spacer";
+	let _ = r.createElement("button");
+	_.type = "button", _.textContent = "Cancel";
+	let v = r.createElement("button");
+	v.type = "button", v.textContent = "Save", v.className = "link-dialog__save", m.append(h, g, _, v), i.append(a, o, f, m), e.appendChild(i);
+	let y = { getBoundingClientRect: () => n() }, b = null, x = () => {}, S = () => {}, C = () => {}, w = 0, T = () => {
+		l(y, i, {
+			strategy: "fixed",
+			placement: "bottom-start",
+			middleware: [
+				c(6),
+				d({ padding: 8 }),
+				s({ padding: 8 })
+			]
+		}).then(({ x: e, y: t }) => {
+			i.style.left = `${Math.round(e)}px`, i.style.top = `${Math.round(t)}px`;
+		});
+	}, E = () => [
+		u,
+		h,
+		_,
+		v
+	].filter((e) => !e.hidden), D = (e) => {
+		e.composedPath().includes(i) || O();
+	}, O = () => {
+		i.hidden || (i.hidden = !0, f.hidden = !0, w += 1, b?.(), b = null, r.removeEventListener("mousedown", D, !0), setTimeout(C, 0));
+	}, k = () => {
+		let e = K(u.value);
+		if (e === "") {
+			S(), O();
+			return;
+		}
+		if (!t(e)) {
+			f.hidden = !1, u.focus();
+			return;
+		}
+		x(e), O();
+	};
+	return v.addEventListener("click", k), _.addEventListener("click", O), h.addEventListener("click", () => {
+		S(), O();
+	}), i.addEventListener("keydown", (e) => {
+		if (e.key === "Escape") {
+			e.preventDefault(), O();
+			return;
+		}
+		if (e.key === "Enter" && e.target === u) {
+			e.preventDefault(), k();
+			return;
+		}
+		if (e.key !== "Tab") return;
+		let t = E(), n = t[0], r = t[t.length - 1], a = i.getRootNode().activeElement;
+		e.shiftKey && a === n ? (e.preventDefault(), r?.focus()) : !e.shiftKey && a === r && (e.preventDefault(), n?.focus());
+	}), {
+		open: ({ initial: e, onSubmit: t, onClear: n, restoreFocus: o }) => {
+			x = t, S = n, C = o ?? (() => {}), u.value = e, f.hidden = !0;
+			let s = e !== "";
+			h.hidden = !s, a.textContent = s ? "Edit link" : "Add link", i.hidden = !1, b ? T() : b = p(y, i, T), setTimeout(() => r.addEventListener("mousedown", D, !0), 0);
+			let c = ++w;
+			setTimeout(() => {
+				c !== w || i.hidden || (u.focus(), u.select());
+			}, 0);
+		},
+		destroy: () => {
+			b?.(), b = null, r.removeEventListener("mousedown", D, !0), i.remove();
+		}
+	};
+}, J = (e, t) => e == null ? null : typeof e == "function" ? e(t) : typeof e == "string" ? t.createTextNode(e) : e.cloneNode(!0), Y = ({ editor: e, api: t, container: n, items: r = T, icons: i, floating: a = !0 }) => {
+	let o = n.ownerDocument, s = o.createElement("div");
+	s.className = a ? "header floating" : "header";
+	let c = q({
+		container: n,
+		isSafe: H,
+		getAnchorRect: () => {
+			let { from: t, to: n } = e.state.selection, r = e.view.coordsAtPos(t), i = e.view.coordsAtPos(n), a = Math.min(r.left, i.left), o = Math.max(r.right, i.right), s = Math.min(r.top, i.top), c = Math.max(r.bottom, i.bottom);
+			return new DOMRect(a, s, o - a, c - s);
+		}
+	}), l = {
+		bold: {
+			label: "B",
+			title: "Bold",
+			run: t.toggleBold,
+			isActive: () => e.isActive("bold")
+		},
+		italic: {
+			label: "I",
+			title: "Italic",
+			run: t.toggleItalic,
+			isActive: () => e.isActive("italic")
+		},
+		link: {
+			label: "Link",
+			title: "Link",
+			run: () => {
+				c.open({
+					initial: e.getAttributes("link").href ?? "",
+					onSubmit: (e) => t.setLink(e),
+					onClear: () => e.chain().focus().extendMarkRange("link").unsetLink().run(),
+					restoreFocus: () => e.commands.focus()
+				});
+			},
+			isActive: () => e.isActive("link")
+		},
+		heading1: {
+			label: "H1",
+			title: "Heading 1",
+			run: () => t.setHeading(1),
+			isActive: () => e.isActive("heading", { level: 1 })
+		},
+		heading2: {
+			label: "H2",
+			title: "Heading 2",
+			run: () => t.setHeading(2),
+			isActive: () => e.isActive("heading", { level: 2 })
+		},
+		heading3: {
+			label: "H3",
+			title: "Heading 3",
+			run: () => t.setHeading(3),
+			isActive: () => e.isActive("heading", { level: 3 })
+		},
+		bulletList: {
+			label: "• List",
+			title: "Bullet list",
+			run: t.toggleBulletList,
+			isActive: () => e.isActive("bulletList")
+		},
+		orderedList: {
+			label: "1. List",
+			title: "Numbered list",
+			run: t.toggleOrderedList,
+			isActive: () => e.isActive("orderedList")
+		},
+		blockquote: {
+			label: "Quote",
+			title: "Quote",
+			run: t.toggleBlockquote,
+			isActive: () => e.isActive("blockquote")
+		},
+		codeBlock: {
+			label: "Code",
+			title: "Code block",
+			run: t.toggleCodeBlock,
+			isActive: () => e.isActive("codeBlock")
+		},
+		undo: {
+			label: "Undo",
+			title: "Undo",
+			run: t.undo
+		},
+		redo: {
+			label: "Redo",
+			title: "Redo",
+			run: t.redo
+		}
+	}, u = o.createElement("span");
+	u.className = "status";
+	let d = o.createElement("select");
+	d.title = "Code block language", d.hidden = !0;
+	let f = o.createElement("option");
+	f.value = "", f.textContent = "Plain text", d.appendChild(f), j.forEach(({ id: e, label: t }) => {
+		let n = o.createElement("option");
+		n.value = e, n.textContent = t, d.appendChild(n);
+	}), d.addEventListener("change", () => {
+		e.chain().focus().updateAttributes("codeBlock", { language: d.value || null }).run();
+	});
+	let p = [], m = !1;
+	r.forEach((e) => {
+		if (e === "spacer") {
+			let e = o.createElement("span");
+			e.className = "spacer", s.appendChild(e);
+			return;
+		}
+		if (e === "status") {
+			s.appendChild(u);
+			return;
+		}
+		if (e === "codeLanguage") {
+			s.appendChild(d), m = !0;
+			return;
+		}
+		let t = l[e];
+		if (!t) return;
+		let n = o.createElement("button");
+		n.type = "button";
+		let r = J(i?.[e], o);
+		r ? n.appendChild(r) : n.textContent = t.label, n.title = t.title, n.setAttribute("aria-label", t.title), n.addEventListener("mousedown", (e) => {
+			e.preventDefault(), t.run(), h();
+		}), s.appendChild(n), p.push({
+			btn: n,
+			def: t
+		});
+	}), n.appendChild(s);
+	let h = () => {
+		if (p.forEach(({ btn: e, def: t }) => e.classList.toggle("active", t.isActive?.() ?? !1)), m) {
+			let t = e.isActive("codeBlock");
+			if (d.hidden = !t, t) {
+				let t = e.getAttributes("codeBlock").language ?? "";
+				d.value !== t && (d.value = t);
+			}
+		}
+	};
+	return {
+		el: s,
+		setStatus: (e) => {
+			u.textContent = e;
+		},
+		sync: h
+	};
+}, X = class extends HTMLElement {
+	static get observedAttributes() {
+		return ["placeholder", "show-header"];
+	}
+	#e = null;
+	#t = null;
+	#n = null;
+	#r = null;
+	#i = "";
+	#a = /* @__PURE__ */ new Set();
+	#o = !1;
+	#s;
+	#c = g();
+	#l;
+	#u = O;
+	#d = {
+		showHeader: !0,
+		enableSlashCommands: !0
+	};
+	#f;
+	constructor() {
+		super(), this.#f = this.attachShadow({ mode: "open" });
+	}
+	get content() {
+		return this.getJSON();
+	}
+	set content(e) {
+		this.setContent(e);
+	}
+	get theme() {
+		return this.#l;
+	}
+	set theme(e) {
+		this.#l = e, this.#x();
+	}
+	get commands() {
+		return this.#u;
+	}
+	set commands(e) {
+		this.#u = e ?? O, this.#t?.setCommands(this.#u);
+	}
+	get config() {
+		return this.#d;
+	}
+	set config(e) {
+		this.#d = {
+			...this.#d,
+			...e
+		}, this.isConnected && this.#m();
+	}
+	getJSON = () => this.#e ? B(this.#e.getJSON()) : this.#c;
+	setContent = (e) => {
+		let t = w(b(e));
+		this.#c = t, this.#e?.commands.setContent(z(t), { emitUpdate: !1 }), this.#_();
+	};
+	focus = () => {
+		this.#e?.commands.focus();
+	};
+	getApi = () => {
+		if (!this.#r) throw Error("Editor not initialized");
+		return this.#r;
+	};
+	setStatus = (e) => {
+		this.#i = e, this.#n?.setStatus(e);
+	};
+	connectedCallback() {
+		this.#m();
+	}
+	disconnectedCallback() {
+		this.#p();
+	}
+	attributeChangedCallback() {
+		this.isConnected && this.#m();
+	}
+	#p = () => {
+		this.#t?.destroy(), this.#t = null, this.#e?.destroy(), this.#e = null, this.#n = null, this.#r = null;
+	};
+	#m = () => {
+		this.#p(), this.#f.replaceChildren();
+		let r = document.createElement("style");
+		r.textContent = `${U}\n${R}`, this.#f.appendChild(r);
+		let o = document.createElement("div");
+		o.className = "editor", this.#f.appendChild(o), this.#s = document.createElement("div"), this.#s.className = "surface";
+		let s = document.createElement("div");
+		this.#s.appendChild(s);
+		let c = this.getAttribute("placeholder") ?? "Write something…";
+		this.#e = new e({
+			element: s,
+			extensions: [
+				t.configure({
+					codeBlock: !1,
+					link: !1,
+					strike: !1,
+					underline: !1,
+					code: !1,
+					horizontalRule: !1,
+					hardBreak: !1,
+					heading: { levels: [
+						1,
+						2,
+						3
+					] }
+				}),
+				a.configure({ lowlight: P }),
+				i.configure({
+					openOnClick: !1,
+					autolink: !0,
+					validate: H
+				}),
+				n.configure({ placeholder: c }),
+				W
+			],
+			content: z(this.#c),
+			onCreate: () => {
+				this.#_(), this.#S("ready", void 0);
+			},
+			onUpdate: () => {
+				this.#t?.update(), this.#n?.sync(), this.#_(), this.#S("content-change", this.getJSON());
+			},
+			onSelectionUpdate: () => {
+				this.#t?.update(), this.#n?.sync(), this.#S("selection-change", void 0);
+			},
+			onFocus: () => this.#S("focus", void 0),
+			onBlur: () => this.#S("blur", void 0)
+		});
+		let l = this.#b();
+		this.#r = l, this.#y() && (this.#n = Y({
+			editor: this.#e,
+			api: l,
+			container: o,
+			items: this.#d.toolbar,
+			icons: this.#d.icons,
+			floating: this.#d.floatingHeader
+		}), this.#n.setStatus(this.#i)), o.appendChild(this.#s), this.#d.enableSlashCommands !== !1 && (this.#t = G({
+			editor: this.#e,
+			api: l,
+			commands: this.#u,
+			container: this.#s
+		}), this.#s.addEventListener("keydown", (e) => {
+			this.#t?.handleKey(e) && (e.preventDefault(), e.stopPropagation());
+		}, !0)), this.#x(), this.#h();
+	};
+	#h = () => {
+		let e = this.#d.maxHeight;
+		e == null || e === "" ? (this.style.removeProperty("max-height"), this.style.removeProperty("overflow-y")) : (this.style.maxHeight = typeof e == "number" ? `${e}px` : e, this.style.overflowY = "auto"), this.classList.toggle("borderless", this.#d.bordered === !1);
+	};
+	#g = () => {
+		if (!this.#e) return [];
+		let e = [];
+		return this.#e.state.doc.descendants((t, n) => {
+			t.type.name === "codeBlock" && t.attrs.language && e.push({
+				pos: n,
+				attrs: t.attrs
+			});
+		}), e;
+	};
+	#_ = () => {
+		[...new Set(this.#g().map((e) => String(e.attrs.language)))].filter((e) => !this.#a.has(e)).forEach((e) => {
+			this.#a.add(e), L(e).then((e) => {
+				e && this.#v();
+			});
+		});
+	};
+	#v = () => {
+		if (!this.#e) return;
+		let e = this.#g();
+		if (e.length === 0) return;
+		let { state: t, view: n } = this.#e, r = e.reduce((e, t) => e.setNodeMarkup(t.pos, void 0, { ...t.attrs }), t.tr);
+		this.#o = !0, n.dispatch(r), this.#o = !1;
+	};
+	#y = () => this.hasAttribute("show-header") ? this.getAttribute("show-header") !== "false" : this.#d.showHeader !== !1;
+	#b = () => {
+		let e = () => {
+			if (!this.#e) throw Error("Editor not initialized");
+			return this.#e;
+		};
+		return {
+			getJSON: this.getJSON,
+			setContent: this.setContent,
+			focus: this.focus,
+			setHeading: (t) => e().chain().focus().toggleHeading({ level: t }).run(),
+			setParagraph: () => e().chain().focus().setParagraph().run(),
+			toggleBold: () => e().chain().focus().toggleBold().run(),
+			toggleItalic: () => e().chain().focus().toggleItalic().run(),
+			toggleBulletList: () => e().chain().focus().toggleBulletList().run(),
+			toggleOrderedList: () => e().chain().focus().toggleOrderedList().run(),
+			toggleBlockquote: () => e().chain().focus().toggleBlockquote().run(),
+			toggleCodeBlock: () => e().chain().focus().toggleCodeBlock().run(),
+			setLink: (t) => e().chain().focus().extendMarkRange("link").setLink({ href: t }).run(),
+			undo: () => e().chain().focus().undo().run(),
+			redo: () => e().chain().focus().redo().run()
+		};
+	};
+	#x = () => {
+		this.#l && Object.entries(D(this.#l)).forEach(([e, t]) => this.style.setProperty(e, t));
+	};
+	#S = (e, t) => {
+		e === "content-change" && this.#o || this.dispatchEvent(new CustomEvent(e, {
+			detail: t,
+			bubbles: !0,
+			composed: !0
+		}));
+	};
+}, Z = "glyph-editor", Q = (e = Z) => {
+	customElements.get(e) || customElements.define(e, X);
+};
+Q();
+//#endregion
+export { T as DEFAULT_TOOLBAR, X as GlyphEditor, Z as TAG_NAME, Q as defineGlyphEditor };
+
+//# sourceMappingURL=glyph-editor-element.js.map