@haklex/rich-editor 0.1.1 → 0.3.0

package/dist/theme-B5B2EOWM.js

@@ -0,0 +1,1099 @@
+import { i as FootnoteStaticRenderer, l as RendererWrapper, r as decodeThumbHash, t as KaTeXRenderer, u as createRendererDecoration } from "./KaTeXRenderer-CQQT3BMw.js";
+import { l as semanticClassNames, u as sharedStyles } from "./katex.css-CIOEOXyd.js";
+import { createContext, createElement, use, useCallback, useEffect, useMemo, useState } from "react";
+import { $getEditor, $getNodeByKey, $getSelection, $insertNodes, $isRangeSelection, DecoratorNode, ElementNode, TextNode, createCommand, getRegisteredNode } from "lexical";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { ImageIcon, Info, Lightbulb, MessageSquareWarning, OctagonAlert, Sigma, Tag, TriangleAlert, Workflow } from "lucide-react";
+//#region src/context/NestedContentRendererContext.tsx
+var NestedContentRendererContext = createContext(null);
+var NestedContentRendererProvider = NestedContentRendererContext.Provider;
+function useOptionalNestedContentRenderer() {
+	return use(NestedContentRendererContext);
+}
+function useNestedContentRenderer() {
+	const fn = use(NestedContentRendererContext);
+	if (!fn) throw new Error("useNestedContentRenderer must be used within a NestedContentRendererProvider");
+	return fn;
+}
+//#endregion
+//#region src/components/renderers/AlertRenderer.tsx
+var InfoIcon = () => /* @__PURE__ */ jsx(Info, { size: 16 });
+var LightbulbIcon = () => /* @__PURE__ */ jsx(Lightbulb, { size: 16 });
+var MessageWarningIcon = () => /* @__PURE__ */ jsx(MessageSquareWarning, { size: 16 });
+var TriangleAlertIcon = () => /* @__PURE__ */ jsx(TriangleAlert, { size: 16 });
+var OctagonAlertIcon = () => /* @__PURE__ */ jsx(OctagonAlert, { size: 16 });
+var ALERT_ICONS = {
+	note: InfoIcon,
+	tip: LightbulbIcon,
+	important: MessageWarningIcon,
+	warning: TriangleAlertIcon,
+	caution: OctagonAlertIcon
+};
+var AlertRenderer = ({ type }) => {
+	const Icon = ALERT_ICONS[type];
+	return /* @__PURE__ */ jsxs("div", {
+		className: `rich-alert-header rich-alert-header-${type}`,
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "rich-alert-icon",
+			children: /* @__PURE__ */ jsx(Icon, {})
+		}), /* @__PURE__ */ jsx("span", {
+			className: "rich-alert-label",
+			children: ALERT_LABELS[type]
+		})]
+	});
+};
+//#endregion
+//#region src/components/renderers/AlertStaticDecorator.tsx
+function AlertStaticDecorator({ alertType, contentState }) {
+	const renderContent = useNestedContentRenderer();
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(RendererWrapper, {
+		defaultRenderer: AlertRenderer,
+		props: { type: alertType },
+		rendererKey: "Alert"
+	}), /* @__PURE__ */ jsx("div", {
+		className: "rich-alert-content",
+		children: renderContent(contentState)
+	})] });
+}
+//#endregion
+//#region src/utils/extractTextContent.ts
+function extractTextContent(state) {
+	function walk(node) {
+		if (node.text) return node.text;
+		if (node.children) return node.children.map(walk).join("");
+		if (node.root) return walk(node.root);
+		return "";
+	}
+	return walk(state);
+}
+//#endregion
+//#region \0@oxc-project+runtime@0.127.0/helpers/typeof.js
+function _typeof(o) {
+	"@babel/helpers - typeof";
+	return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(o) {
+		return typeof o;
+	} : function(o) {
+		return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o;
+	}, _typeof(o);
+}
+//#endregion
+//#region \0@oxc-project+runtime@0.127.0/helpers/toPrimitive.js
+function toPrimitive(t, r) {
+	if ("object" != _typeof(t) || !t) return t;
+	var e = t[Symbol.toPrimitive];
+	if (void 0 !== e) {
+		var i = e.call(t, r || "default");
+		if ("object" != _typeof(i)) return i;
+		throw new TypeError("@@toPrimitive must return a primitive value.");
+	}
+	return ("string" === r ? String : Number)(t);
+}
+//#endregion
+//#region \0@oxc-project+runtime@0.127.0/helpers/toPropertyKey.js
+function toPropertyKey(t) {
+	var i = toPrimitive(t, "string");
+	return "symbol" == _typeof(i) ? i : i + "";
+}
+//#endregion
+//#region \0@oxc-project+runtime@0.127.0/helpers/defineProperty.js
+function _defineProperty(e, r, t) {
+	return (r = toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
+		value: t,
+		enumerable: !0,
+		configurable: !0,
+		writable: !0
+	}) : e[r] = t, e;
+}
+//#endregion
+//#region src/nodes/AlertQuoteNode.ts
+var ALERT_TYPES = [
+	"note",
+	"tip",
+	"important",
+	"warning",
+	"caution"
+];
+var ALERT_LABELS = {
+	note: "Note",
+	tip: "Tip",
+	important: "Important",
+	warning: "Warning",
+	caution: "Caution"
+};
+var AlertQuoteNode = class AlertQuoteNode extends DecoratorNode {
+	static getType() {
+		return "alert-quote";
+	}
+	static clone(node) {
+		return new AlertQuoteNode(node.__alertType, node.__contentState, node.__key);
+	}
+	constructor(alertType, contentState, key) {
+		super(key);
+		_defineProperty(this, "__alertType", void 0);
+		_defineProperty(this, "__contentState", void 0);
+		this.__alertType = alertType;
+		this.__contentState = contentState || { root: {
+			children: [{
+				type: "paragraph",
+				children: [],
+				direction: null,
+				format: "",
+				indent: 0,
+				textFormat: 0,
+				textStyle: "",
+				version: 1
+			}],
+			direction: null,
+			format: "",
+			indent: 0,
+			type: "root",
+			version: 1
+		} };
+	}
+	createDOM(_config) {
+		const div = document.createElement("div");
+		div.className = `${semanticClassNames.alert} ${sharedStyles.alert} rich-alert-${this.__alertType}`;
+		return div;
+	}
+	updateDOM(prevNode, dom) {
+		if (prevNode.__alertType !== this.__alertType) dom.className = `${semanticClassNames.alert} ${sharedStyles.alert} rich-alert-${this.__alertType}`;
+		return false;
+	}
+	isInline() {
+		return false;
+	}
+	getAlertType() {
+		return this.__alertType;
+	}
+	setAlertType(alertType) {
+		const writable = this.getWritable();
+		writable.__alertType = alertType;
+	}
+	getContentState() {
+		return this.getLatest().__contentState;
+	}
+	setContentState(state) {
+		const writable = this.getWritable();
+		writable.__contentState = state;
+	}
+	getTextContent() {
+		return extractTextContent(this.__contentState);
+	}
+	static importJSON(serializedNode) {
+		return new AlertQuoteNode(serializedNode.alertType, serializedNode.content);
+	}
+	exportJSON() {
+		return {
+			...super.exportJSON(),
+			type: "alert-quote",
+			alertType: this.__alertType,
+			content: this.__contentState,
+			version: 1
+		};
+	}
+	decorate(_editor, _config) {
+		return createElement(AlertStaticDecorator, {
+			alertType: this.__alertType,
+			contentState: this.__contentState
+		});
+	}
+};
+function $isAlertQuoteNode(node) {
+	return node instanceof AlertQuoteNode;
+}
+//#endregion
+//#region src/nodes/FootnoteNode.ts
+var FootnoteNode = class FootnoteNode extends DecoratorNode {
+	static getType() {
+		return "footnote";
+	}
+	static clone(node) {
+		return new FootnoteNode(node.__identifier, node.__key);
+	}
+	constructor(identifier, key) {
+		super(key);
+		_defineProperty(this, "__identifier", void 0);
+		this.__identifier = identifier;
+	}
+	createDOM(_config) {
+		const sup = document.createElement("sup");
+		sup.className = `${semanticClassNames.footnote} ${sharedStyles.footnote}`;
+		return sup;
+	}
+	updateDOM() {
+		return false;
+	}
+	isInline() {
+		return true;
+	}
+	static importJSON(serializedNode) {
+		return $createFootnoteNode(serializedNode.identifier);
+	}
+	exportJSON() {
+		return {
+			...super.exportJSON(),
+			type: "footnote",
+			identifier: this.__identifier,
+			version: 1
+		};
+	}
+	getIdentifier() {
+		return this.getLatest().__identifier;
+	}
+	setIdentifier(identifier) {
+		const writable = this.getWritable();
+		writable.__identifier = identifier;
+	}
+	decorate(_editor, _config) {
+		return createRendererDecoration("Footnote", FootnoteStaticRenderer, { identifier: this.__identifier });
+	}
+};
+function $createFootnoteNode(identifier) {
+	return new FootnoteNode(identifier);
+}
+//#endregion
+//#region src/components/renderers/ImageRenderer.tsx
+function ImageRenderer({ src, altText, width, height, caption, thumbhash, accent }) {
+	const [loaded, setLoaded] = useState(false);
+	const [zoomed, setZoomed] = useState(false);
+	const handleLoad = useCallback(() => setLoaded(true), []);
+	const handleZoomOpen = useCallback(() => {
+		if (!loaded) return;
+		setZoomed(true);
+	}, [loaded]);
+	const handleZoomClose = useCallback(() => setZoomed(false), []);
+	useEffect(() => {
+		if (!zoomed) return;
+		const onKeyDown = (e) => {
+			if (e.key === "Escape") setZoomed(false);
+		};
+		document.addEventListener("keydown", onKeyDown);
+		return () => document.removeEventListener("keydown", onKeyDown);
+	}, [zoomed]);
+	useEffect(() => {
+		if (!zoomed) return;
+		const prev = document.body.style.overflow;
+		document.body.style.overflow = "hidden";
+		return () => {
+			document.body.style.overflow = prev;
+		};
+	}, [zoomed]);
+	const handleContainerKeyDown = useCallback((e) => {
+		if ((e.key === "Enter" || e.key === " ") && loaded) {
+			e.preventDefault();
+			setZoomed(true);
+		}
+	}, [loaded]);
+	const placeholderUrl = useMemo(() => thumbhash ? decodeThumbHash(thumbhash) : void 0, [thumbhash]);
+	const aspectStyle = width && height ? {
+		aspectRatio: `${width} / ${height}`,
+		maxWidth: "100%",
+		width
+	} : { maxWidth: "100%" };
+	return /* @__PURE__ */ jsxs("figure", {
+		className: "rich-image",
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				"aria-label": loaded ? `Zoom image: ${altText}` : void 0,
+				className: `rich-image-container${loaded ? " rich-image-loaded" : ""}`,
+				role: "button",
+				tabIndex: loaded ? 0 : -1,
+				style: {
+					...aspectStyle,
+					backgroundColor: !loaded && !placeholderUrl ? accent : void 0,
+					backgroundImage: !loaded && placeholderUrl ? `url(${placeholderUrl})` : void 0,
+					backgroundSize: "cover",
+					cursor: loaded ? "zoom-in" : void 0
+				},
+				onClick: handleZoomOpen,
+				onKeyDown: handleContainerKeyDown,
+				children: /* @__PURE__ */ jsx("img", {
+					alt: altText,
+					className: loaded ? "rich-image-visible" : "rich-image-hidden",
+					height,
+					loading: "lazy",
+					src,
+					style: {
+						maxWidth: "100%",
+						height: "auto"
+					},
+					width,
+					onLoad: handleLoad
+				})
+			}),
+			caption && /* @__PURE__ */ jsx("figcaption", { children: caption }),
+			zoomed && /* @__PURE__ */ jsx("div", {
+				"aria-label": `Zoomed image: ${altText}`,
+				"aria-modal": "true",
+				className: "rich-image-zoom-overlay",
+				role: "dialog",
+				tabIndex: 0,
+				onClick: handleZoomClose,
+				children: /* @__PURE__ */ jsx("img", {
+					alt: altText,
+					className: "rich-image-zoom-img",
+					src
+				})
+			})
+		]
+	});
+}
+//#endregion
+//#region src/plugins/image-upload-command.ts
+var OPEN_IMAGE_UPLOAD_DIALOG_COMMAND = createCommand("OPEN_IMAGE_UPLOAD_DIALOG_COMMAND");
+//#endregion
+//#region src/nodes/ImageNode.ts
+function sanitizeImageSrc(src) {
+	const trimmed = src.trim();
+	if (/^(?:javascript\s*:|vbscript\s*:|data\s*:(?!image\/))/i.test(trimmed)) return "";
+	return trimmed;
+}
+function sanitizeColor(value) {
+	if (!value) return void 0;
+	const trimmed = value.trim();
+	if (/^#[\da-f]{3,8}$/i.test(trimmed)) return trimmed;
+	if (/^(?:rgb|hsl)a?\([^)]+\)$/i.test(trimmed)) return trimmed;
+	if (/^[a-z]{3,20}$/i.test(trimmed)) return trimmed;
+}
+var ImageNode = class ImageNode extends DecoratorNode {
+	static getType() {
+		return "image";
+	}
+	static clone(node) {
+		return new ImageNode({
+			src: node.__src,
+			altText: node.__altText,
+			width: node.__width,
+			height: node.__height,
+			caption: node.__caption,
+			thumbhash: node.__thumbhash,
+			accent: node.__accent
+		}, node.__key);
+	}
+	constructor(payload, key) {
+		super(key);
+		_defineProperty(this, "__src", void 0);
+		_defineProperty(this, "__altText", void 0);
+		_defineProperty(this, "__width", void 0);
+		_defineProperty(this, "__height", void 0);
+		_defineProperty(this, "__caption", void 0);
+		_defineProperty(this, "__thumbhash", void 0);
+		_defineProperty(this, "__accent", void 0);
+		this.__src = sanitizeImageSrc(payload.src);
+		this.__altText = payload.altText;
+		this.__width = payload.width;
+		this.__height = payload.height;
+		this.__caption = payload.caption;
+		this.__thumbhash = payload.thumbhash;
+		this.__accent = sanitizeColor(payload.accent);
+	}
+	createDOM(_config) {
+		const div = document.createElement("div");
+		div.className = "rich-image-wrapper";
+		return div;
+	}
+	updateDOM() {
+		return false;
+	}
+	isInline() {
+		return false;
+	}
+	static importJSON(serializedNode) {
+		return $createImageNode({
+			src: serializedNode.src,
+			altText: serializedNode.altText,
+			width: serializedNode.width,
+			height: serializedNode.height,
+			caption: serializedNode.caption,
+			thumbhash: serializedNode.thumbhash,
+			accent: serializedNode.accent
+		});
+	}
+	exportJSON() {
+		return {
+			...super.exportJSON(),
+			type: "image",
+			src: this.__src,
+			altText: this.__altText,
+			width: this.__width,
+			height: this.__height,
+			caption: this.__caption,
+			thumbhash: this.__thumbhash,
+			accent: this.__accent,
+			version: 1
+		};
+	}
+	setSrc(src) {
+		const writable = this.getWritable();
+		writable.__src = sanitizeImageSrc(src);
+	}
+	setAltText(altText) {
+		const writable = this.getWritable();
+		writable.__altText = altText;
+	}
+	setCaption(caption) {
+		const writable = this.getWritable();
+		writable.__caption = caption;
+	}
+	setDimensions(width, height) {
+		const writable = this.getWritable();
+		writable.__width = width;
+		writable.__height = height;
+	}
+	setThumbhash(thumbhash) {
+		const writable = this.getWritable();
+		writable.__thumbhash = thumbhash;
+	}
+	setAccent(accent) {
+		const writable = this.getWritable();
+		writable.__accent = sanitizeColor(accent);
+	}
+	getSrc() {
+		return this.__src;
+	}
+	getAltText() {
+		return this.__altText;
+	}
+	getCaption() {
+		return this.__caption;
+	}
+	getWidth() {
+		return this.__width;
+	}
+	getHeight() {
+		return this.__height;
+	}
+	getThumbhash() {
+		return this.__thumbhash;
+	}
+	getAccent() {
+		return this.__accent;
+	}
+	decorate(_editor, _config) {
+		return createRendererDecoration("Image", ImageRenderer, {
+			src: this.__src,
+			altText: this.__altText,
+			width: this.__width,
+			height: this.__height,
+			caption: this.__caption,
+			thumbhash: this.__thumbhash,
+			accent: this.__accent
+		});
+	}
+};
+_defineProperty(ImageNode, "commandItems", [{
+	title: "Image",
+	icon: createElement(ImageIcon, { size: 20 }),
+	description: "Upload or embed an image",
+	keywords: [
+		"image",
+		"picture",
+		"photo"
+	],
+	section: "MEDIA",
+	placement: ["slash", "toolbar"],
+	group: "insert",
+	onSelect: (editor) => {
+		if (editor.dispatchCommand(OPEN_IMAGE_UPLOAD_DIALOG_COMMAND, void 0)) return;
+		editor.update(() => {
+			$insertNodes([$createImageNode({
+				src: "",
+				altText: ""
+			})]);
+		});
+	}
+}]);
+function $createImageNode(payload) {
+	return new ImageNode(payload);
+}
+function $isImageNode(node) {
+	return node instanceof ImageNode;
+}
+//#endregion
+//#region src/utils/katex-defaults.ts
+var DEFAULT_KATEX_EQUATION = "x^2 + y^2 = z^2";
+function resolveKaTeXEquation(equation, options) {
+	if (options?.autoOpenOnMount && !equation.trim()) return DEFAULT_KATEX_EQUATION;
+	return equation;
+}
+//#endregion
+//#region src/utils/getRegisteredNodeKlass.ts
+function isMissingActiveEditorError(error) {
+	return error instanceof Error && error.message.includes("Unable to find an active editor");
+}
+function getRegisteredNodeKlass(nodeType, fallbackKlass) {
+	try {
+		const registeredKlass = getRegisteredNode($getEditor(), nodeType)?.klass;
+		if (registeredKlass && (registeredKlass === fallbackKlass || registeredKlass.prototype instanceof fallbackKlass)) return registeredKlass;
+	} catch (error) {
+		if (!isMissingActiveEditorError(error)) throw error;
+	}
+	return fallbackKlass;
+}
+//#endregion
+//#region src/nodes/KaTeXBlockNode.ts
+var KaTeXBlockNode = class KaTeXBlockNode extends DecoratorNode {
+	static getType() {
+		return "katex-block";
+	}
+	static clone(node) {
+		return new KaTeXBlockNode(node.__equation, node.__key, node.__autoOpenOnMount);
+	}
+	constructor(equation, key, autoOpenOnMount = false) {
+		super(key);
+		_defineProperty(this, "__equation", void 0);
+		_defineProperty(this, "__autoOpenOnMount", void 0);
+		this.__equation = equation;
+		this.__autoOpenOnMount = autoOpenOnMount;
+	}
+	createDOM(_config) {
+		const div = document.createElement("div");
+		div.className = "rich-katex-block-wrapper";
+		return div;
+	}
+	updateDOM() {
+		return false;
+	}
+	isInline() {
+		return false;
+	}
+	static importJSON(serializedNode) {
+		return $createKaTeXBlockNode(serializedNode.equation);
+	}
+	exportJSON() {
+		return {
+			...super.exportJSON(),
+			type: "katex-block",
+			equation: this.__equation,
+			version: 1
+		};
+	}
+	getEquation() {
+		return this.__equation;
+	}
+	setEquation(equation) {
+		const writable = this.getWritable();
+		writable.__equation = equation;
+	}
+	getShouldAutoOpenOnMount() {
+		return this.getLatest().__autoOpenOnMount;
+	}
+	setShouldAutoOpenOnMount(autoOpenOnMount) {
+		const writable = this.getWritable();
+		writable.__autoOpenOnMount = autoOpenOnMount;
+	}
+	decorate(_editor, _config) {
+		return createRendererDecoration("KaTeX", KaTeXRenderer, {
+			equation: this.__equation,
+			displayMode: true
+		});
+	}
+};
+_defineProperty(KaTeXBlockNode, "slashMenuItems", [{
+	title: "Math Equation",
+	icon: createElement(Sigma, { size: 20 }),
+	description: "KaTeX block formula",
+	keywords: [
+		"math",
+		"equation",
+		"latex",
+		"katex"
+	],
+	section: "ADVANCED",
+	onSelect: (editor) => {
+		editor.update(() => {
+			$insertNodes([$createKaTeXBlockNode("", { autoOpenOnMount: true })]);
+		});
+	}
+}]);
+function $createKaTeXBlockNode(equation, options) {
+	const node = new (getRegisteredNodeKlass(KaTeXBlockNode.getType(), KaTeXBlockNode))(resolveKaTeXEquation(equation, options));
+	if (options?.autoOpenOnMount) node.setShouldAutoOpenOnMount(true);
+	return node;
+}
+function $isKaTeXBlockNode(node) {
+	return node instanceof KaTeXBlockNode;
+}
+//#endregion
+//#region src/nodes/KaTeXInlineNode.ts
+var KaTeXInlineNode = class KaTeXInlineNode extends DecoratorNode {
+	static getType() {
+		return "katex-inline";
+	}
+	static clone(node) {
+		return new KaTeXInlineNode(node.__equation, node.__key, node.__autoOpenOnMount, node.__color);
+	}
+	constructor(equation, key, autoOpenOnMount = false, color = null) {
+		super(key);
+		_defineProperty(this, "__equation", void 0);
+		_defineProperty(this, "__autoOpenOnMount", void 0);
+		_defineProperty(this, "__color", void 0);
+		this.__equation = equation;
+		this.__autoOpenOnMount = autoOpenOnMount;
+		this.__color = color;
+	}
+	createDOM(_config) {
+		return document.createElement("span");
+	}
+	updateDOM() {
+		return false;
+	}
+	isInline() {
+		return true;
+	}
+	static importJSON(serializedNode) {
+		const node = $createKaTeXInlineNode(serializedNode.equation);
+		if (serializedNode.color) node.setColor(serializedNode.color);
+		return node;
+	}
+	exportJSON() {
+		return {
+			...super.exportJSON(),
+			type: "katex-inline",
+			equation: this.__equation,
+			color: this.__color,
+			version: 1
+		};
+	}
+	getEquation() {
+		return this.__equation;
+	}
+	setEquation(equation) {
+		const writable = this.getWritable();
+		writable.__equation = equation;
+	}
+	getShouldAutoOpenOnMount() {
+		return this.getLatest().__autoOpenOnMount;
+	}
+	setShouldAutoOpenOnMount(autoOpenOnMount) {
+		const writable = this.getWritable();
+		writable.__autoOpenOnMount = autoOpenOnMount;
+	}
+	getColor() {
+		return this.getLatest().__color;
+	}
+	setColor(color) {
+		const writable = this.getWritable();
+		writable.__color = color;
+	}
+	decorate(_editor, _config) {
+		const decoration = createRendererDecoration("KaTeX", KaTeXRenderer, {
+			equation: this.__equation,
+			displayMode: false
+		});
+		if (!this.__color) return decoration;
+		return createElement("span", { style: { color: this.__color } }, decoration);
+	}
+};
+function $createKaTeXInlineNode(equation, options) {
+	const node = new (getRegisteredNodeKlass(KaTeXInlineNode.getType(), KaTeXInlineNode))(resolveKaTeXEquation(equation, options));
+	if (options?.autoOpenOnMount) node.setShouldAutoOpenOnMount(true);
+	return node;
+}
+function $isKaTeXInlineNode(node) {
+	return node instanceof KaTeXInlineNode;
+}
+//#endregion
+//#region src/components/renderers/MentionRenderer.tsx
+function MentionRenderer({ handle, displayName }) {
+	const normalizedHandle = handle.replace(/^@+/, "");
+	return /* @__PURE__ */ jsx("span", {
+		className: "rich-mention rich-mention-plain",
+		children: /* @__PURE__ */ jsxs("span", {
+			className: "rich-mention-handle",
+			children: ["@", displayName || normalizedHandle]
+		})
+	});
+}
+//#endregion
+//#region src/nodes/MentionNode.ts
+var MentionNode = class MentionNode extends DecoratorNode {
+	static getType() {
+		return "mention";
+	}
+	static clone(node) {
+		return new MentionNode(node.__platform, node.__handle, node.__displayName, node.__key);
+	}
+	constructor(platform, handle, displayName, key) {
+		super(key);
+		_defineProperty(this, "__platform", void 0);
+		_defineProperty(this, "__handle", void 0);
+		_defineProperty(this, "__displayName", void 0);
+		this.__platform = platform;
+		this.__handle = handle;
+		this.__displayName = displayName;
+	}
+	createDOM(_config) {
+		const el = document.createElement("span");
+		el.style.display = "inline-flex";
+		el.style.alignItems = "center";
+		el.style.height = "1lh";
+		return el;
+	}
+	updateDOM() {
+		return false;
+	}
+	isInline() {
+		return true;
+	}
+	getPlatform() {
+		return this.getLatest().__platform;
+	}
+	getHandle() {
+		return this.getLatest().__handle;
+	}
+	getDisplayName() {
+		return this.getLatest().__displayName;
+	}
+	static importJSON(serializedNode) {
+		return $createMentionNode(serializedNode.platform, serializedNode.handle, serializedNode.displayName);
+	}
+	exportJSON() {
+		return {
+			...super.exportJSON(),
+			type: "mention",
+			platform: this.__platform,
+			handle: this.__handle,
+			...this.__displayName ? { displayName: this.__displayName } : {},
+			version: 1
+		};
+	}
+	decorate(_editor, _config) {
+		return createRendererDecoration("Mention", MentionRenderer, {
+			platform: this.__platform,
+			handle: this.__handle,
+			displayName: this.__displayName
+		});
+	}
+};
+_defineProperty(MentionNode, "slashMenuItems", [{
+	title: "Mention",
+	icon: createElement("span", { style: {
+		fontSize: 16,
+		fontWeight: 700
+	} }, "@"),
+	description: "Mention a social account",
+	keywords: [
+		"mention",
+		"at",
+		"@",
+		"github",
+		"twitter"
+	],
+	section: "INLINE",
+	onSelect: (editor) => {
+		editor.update(() => {
+			const selection = $getSelection();
+			if ($isRangeSelection(selection)) selection.insertText("@");
+		});
+	}
+}]);
+function $createMentionNode(platform, handle, displayName) {
+	return new MentionNode(platform, handle, displayName);
+}
+function $isMentionNode(node) {
+	return node instanceof MentionNode;
+}
+//#endregion
+//#region src/components/renderers/MermaidRenderer.tsx
+function MermaidRenderer({ content }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: "rich-mermaid-block",
+		children: /* @__PURE__ */ jsx("pre", { children: /* @__PURE__ */ jsx("code", { children: content }) })
+	});
+}
+//#endregion
+//#region src/nodes/MermaidNode.ts
+var MermaidNode = class MermaidNode extends DecoratorNode {
+	static getType() {
+		return "mermaid";
+	}
+	static clone(node) {
+		return new MermaidNode(node.__diagram, node.__key);
+	}
+	constructor(diagram, key) {
+		super(key);
+		_defineProperty(this, "__diagram", void 0);
+		this.__diagram = diagram;
+	}
+	createDOM(_config) {
+		const div = document.createElement("div");
+		div.className = "rich-mermaid-wrapper";
+		return div;
+	}
+	updateDOM() {
+		return false;
+	}
+	isInline() {
+		return false;
+	}
+	static importJSON(serializedNode) {
+		return $createMermaidNode(serializedNode.diagram);
+	}
+	exportJSON() {
+		return {
+			...super.exportJSON(),
+			type: "mermaid",
+			diagram: this.__diagram,
+			version: 1
+		};
+	}
+	getDiagram() {
+		return this.__diagram;
+	}
+	setDiagram(diagram) {
+		const writable = this.getWritable();
+		writable.__diagram = diagram;
+	}
+	decorate(editor, _config) {
+		const nodeKey = this.__key;
+		return createRendererDecoration("Mermaid", MermaidRenderer, {
+			content: this.__diagram,
+			onContentChange: (newDiagram) => {
+				editor.update(() => {
+					const node = $getNodeByKey(nodeKey);
+					if (node) node.setDiagram(newDiagram);
+				});
+			}
+		});
+	}
+};
+_defineProperty(MermaidNode, "commandItems", [{
+	title: "Mermaid Diagram",
+	icon: createElement(Workflow, { size: 20 }),
+	description: "Flowchart, sequence diagram",
+	keywords: [
+		"mermaid",
+		"diagram",
+		"chart",
+		"flowchart"
+	],
+	section: "MEDIA",
+	placement: ["slash", "toolbar"],
+	group: "insert",
+	onSelect: (editor) => {
+		editor.update(() => {
+			$insertNodes([$createMermaidNode("graph TD\n    A[Start] --> B[End]")]);
+		});
+	}
+}]);
+function $createMermaidNode(diagram) {
+	return new MermaidNode(diagram);
+}
+function $isMermaidNode(node) {
+	return node instanceof MermaidNode;
+}
+//#endregion
+//#region src/nodes/SpoilerNode.ts
+var SpoilerNode = class SpoilerNode extends ElementNode {
+	static getType() {
+		return "spoiler";
+	}
+	static clone(node) {
+		return new SpoilerNode(node.__key);
+	}
+	constructor(key) {
+		super(key);
+	}
+	createDOM(_config) {
+		const span = document.createElement("span");
+		span.className = `${semanticClassNames.spoiler} ${sharedStyles.spoiler}`;
+		span.setAttribute("role", "button");
+		span.setAttribute("tabindex", "0");
+		span.setAttribute("aria-label", "Spoiler (click to reveal)");
+		const toggle = () => {
+			if (span.isContentEditable) return;
+			span.classList.toggle(semanticClassNames.spoilerRevealed);
+			const revealed = span.classList.toggle(sharedStyles.spoilerRevealed);
+			span.setAttribute("aria-label", revealed ? "Spoiler (revealed)" : "Spoiler (click to reveal)");
+		};
+		span.addEventListener("click", toggle);
+		span.addEventListener("keydown", (e) => {
+			if (e.key === "Enter" || e.key === " ") {
+				e.preventDefault();
+				toggle();
+			}
+		});
+		return span;
+	}
+	updateDOM() {
+		return false;
+	}
+	static importJSON(_serializedNode) {
+		return $createSpoilerNode();
+	}
+	exportJSON() {
+		return {
+			...super.exportJSON(),
+			type: "spoiler",
+			version: 1
+		};
+	}
+	canInsertTextBefore() {
+		return true;
+	}
+	canInsertTextAfter() {
+		return true;
+	}
+	isInline() {
+		return true;
+	}
+};
+function $createSpoilerNode() {
+	return new SpoilerNode();
+}
+function $isSpoilerNode(node) {
+	return node instanceof SpoilerNode;
+}
+//#endregion
+//#region src/utils/tag-color.ts
+function stringToHue(str) {
+	let hash = 0;
+	for (let i = 0; i < str.length; i++) hash = str.charCodeAt(i) + ((hash << 5) - hash);
+	const hue = hash % 360;
+	return hue < 0 ? hue + 360 : hue;
+}
+function getTagBgColor(text) {
+	const hue = stringToHue(text);
+	const sat = 70 + hue % 21;
+	const light = 40 + hue % 31;
+	return `hsla(${hue}, ${sat > 30 ? sat - 30 : 0}%, ${light < 80 ? light + 20 : 100}%, 0.7)`;
+}
+//#endregion
+//#region src/nodes/TagNode.ts
+var tagClassName = `${semanticClassNames.tag} ${sharedStyles.tag}`;
+var TagNode = class TagNode extends TextNode {
+	static getType() {
+		return "tag";
+	}
+	static clone(node) {
+		return new TagNode(node.__text, node.__key);
+	}
+	static importDOM() {
+		return { span: () => ({
+			conversion: (domNode) => {
+				if (!(domNode instanceof HTMLElement)) return null;
+				if (!domNode.classList.contains(semanticClassNames.tag)) return null;
+				return { node: $createTagNode(domNode.textContent ?? "") };
+			},
+			priority: 2
+		}) };
+	}
+	constructor(text, key) {
+		super(text, key);
+	}
+	createDOM(config) {
+		const element = super.createDOM(config);
+		element.classList.add(semanticClassNames.tag, sharedStyles.tag);
+		element.style.backgroundColor = getTagBgColor(this.getTextContent());
+		return element;
+	}
+	updateDOM(prevNode, dom, config) {
+		const updated = super.updateDOM(prevNode, dom, config);
+		dom.classList.add(semanticClassNames.tag, sharedStyles.tag);
+		if (prevNode.__text !== this.__text) dom.style.backgroundColor = getTagBgColor(this.__text);
+		return updated;
+	}
+	exportDOM(_editor) {
+		const element = document.createElement("span");
+		element.className = tagClassName;
+		element.style.backgroundColor = getTagBgColor(this.getTextContent());
+		element.textContent = this.getTextContent();
+		return { element };
+	}
+	getText() {
+		return this.getTextContent();
+	}
+	canInsertTextBefore() {
+		return false;
+	}
+	canInsertTextAfter() {
+		return false;
+	}
+	isTextEntity() {
+		return true;
+	}
+	static importJSON(serializedNode) {
+		const node = $createTagNode(serializedNode.text ?? "");
+		node.setFormat(serializedNode.format ?? 0);
+		node.setDetail(serializedNode.detail ?? 0);
+		node.setMode(serializedNode.mode ?? "normal");
+		node.setStyle(serializedNode.style ?? "");
+		return node;
+	}
+	exportJSON() {
+		return {
+			...super.exportJSON(),
+			type: "tag",
+			version: 1
+		};
+	}
+};
+_defineProperty(TagNode, "commandItems", [{
+	title: "Tag",
+	icon: createElement(Tag, { size: 20 }),
+	description: "Insert a tag",
+	keywords: [
+		"tag",
+		"label",
+		"badge"
+	],
+	section: "INLINE",
+	placement: ["slash", "toolbar"],
+	group: "insert",
+	onSelect: (editor, queryString) => {
+		editor.update(() => {
+			$insertNodes([$createTagNode(queryString || "tag")]);
+		});
+	}
+}]);
+function $createTagNode(text) {
+	return new TagNode(text);
+}
+function $isTagNode(node) {
+	return node instanceof TagNode;
+}
+//#endregion
+//#region src/styles/theme.ts
+var shared = (key) => `${semanticClassNames[key]} ${sharedStyles[key]}`;
+var editorTheme = {
+	text: {
+		bold: shared("textBold"),
+		italic: shared("textItalic"),
+		underline: shared("textUnderline"),
+		strikethrough: shared("textStrikethrough"),
+		superscript: shared("textSuperscript"),
+		subscript: shared("textSubscript"),
+		code: shared("textCode"),
+		highlight: shared("textHighlight")
+	},
+	heading: {
+		h1: shared("headingH1"),
+		h2: shared("headingH2"),
+		h3: shared("headingH3"),
+		h4: shared("headingH4"),
+		h5: shared("headingH5"),
+		h6: shared("headingH6")
+	},
+	list: {
+		ol: shared("listOl"),
+		ul: shared("listUl"),
+		listitem: shared("listItem"),
+		listitemChecked: shared("listItemChecked"),
+		listitemUnchecked: shared("listItemUnchecked"),
+		checklist: shared("checklist"),
+		nested: { listitem: shared("listNestedItem") }
+	},
+	quote: shared("quote"),
+	link: shared("link"),
+	paragraph: shared("paragraph"),
+	code: "rich-code-block",
+	table: shared("table"),
+	tableCell: shared("tableCell"),
+	tableCellHeader: shared("tableCellHeader"),
+	tableScrollableWrapper: shared("tableScrollableWrapper"),
+	/** Used by @lexical/extension HorizontalRuleNode */
+	hr: shared("hr")
+};
+//#endregion
+export { AlertQuoteNode as A, ImageNode as C, $isAlertQuoteNode as D, FootnoteNode as E, useNestedContentRenderer as F, useOptionalNestedContentRenderer as I, extractTextContent as M, AlertRenderer as N, ALERT_LABELS as O, NestedContentRendererProvider as P, $isImageNode as S, $createFootnoteNode as T, KaTeXInlineNode as _, getTagBgColor as a, KaTeXBlockNode as b, SpoilerNode as c, MermaidNode as d, $createMentionNode as f, $isKaTeXInlineNode as g, $createKaTeXInlineNode as h, TagNode as i, _defineProperty as j, ALERT_TYPES as k, $createMermaidNode as l, MentionNode as m, $createTagNode as n, $createSpoilerNode as o, $isMentionNode as p, $isTagNode as r, $isSpoilerNode as s, editorTheme as t, $isMermaidNode as u, $createKaTeXBlockNode as v, OPEN_IMAGE_UPLOAD_DIALOG_COMMAND as w, $createImageNode as x, $isKaTeXBlockNode as y };