@haklex/rich-editor 0.1.0 → 0.2.0

package/dist/config-CNiK9v2M.js

@@ -0,0 +1,1246 @@
+import { A as AlertQuoteNode, C as ImageNode, E as FootnoteNode, F as useNestedContentRenderer, M as extractTextContent, _ as KaTeXInlineNode, b as KaTeXBlockNode, c as SpoilerNode, d as MermaidNode, i as TagNode, j as _defineProperty, m as MentionNode } from "./theme-B5B2EOWM.js";
+import { l as RendererWrapper, m as useVariant, s as useFootnoteDefinitions, u as createRendererDecoration } from "./KaTeXRenderer-CQQT3BMw.js";
+import { l as semanticClassNames, r as clsx, u as sharedStyles } from "./katex.css-CIOEOXyd.js";
+import { i as detailsStyles, n as gridStyles, r as detailsClassNames, t as gridClassNames } from "./grid.css-CJCkLTZc.js";
+import { t as LinkCardRenderer } from "./LinkCardRenderer-CigqFwCv.js";
+import { AutoLinkNode, LinkNode } from "@lexical/link";
+import { createContext, createElement, use, useCallback, useEffect, useRef, useState } from "react";
+import { HeadingNode, QuoteNode } from "@lexical/rich-text";
+import { $createTextNode, $insertNodes, DecoratorNode, ElementNode, TextNode } from "lexical";
+import { HorizontalRuleNode } from "@lexical/extension";
+import { CodeNode } from "@lexical/code-core";
+import { ListItemNode, ListNode } from "@lexical/list";
+import { TableCellNode, TableNode, TableRowNode } from "@lexical/table";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ChevronRight, Code, Link, MessageSquareQuote, Video } from "lucide-react";
+//#region src/components/renderers/BannerRenderer.tsx
+var BannerRenderer = ({ type }) => {
+	return /* @__PURE__ */ jsx("span", { className: `rich-banner-icon rich-banner-icon-${type}` });
+};
+//#endregion
+//#region src/components/renderers/BannerStaticDecorator.tsx
+function BannerStaticDecorator({ bannerType, contentState }) {
+	const renderContent = useNestedContentRenderer();
+	return /* @__PURE__ */ jsxs("div", {
+		className: "rich-banner-inner",
+		children: [/* @__PURE__ */ jsx(RendererWrapper, {
+			defaultRenderer: BannerRenderer,
+			props: { type: bannerType },
+			rendererKey: "Banner"
+		}), /* @__PURE__ */ jsx("div", {
+			className: "rich-banner-content",
+			children: renderContent(contentState)
+		})]
+	});
+}
+//#endregion
+//#region src/nodes/BannerNode.ts
+var LEGACY_TYPE_MAP = {
+	info: "note",
+	success: "tip",
+	error: "caution"
+};
+function normalizeBannerType(type) {
+	if (type in LEGACY_TYPE_MAP) return LEGACY_TYPE_MAP[type];
+	return type || "note";
+}
+var BANNER_TYPES = [
+	"note",
+	"tip",
+	"important",
+	"warning",
+	"caution"
+];
+var BANNER_LABELS = {
+	note: "Note",
+	tip: "Tip",
+	important: "Important",
+	warning: "Warning",
+	caution: "Caution"
+};
+var BannerNode = class BannerNode extends DecoratorNode {
+	static getType() {
+		return "banner";
+	}
+	static clone(node) {
+		return new BannerNode(node.__bannerType, node.__contentState, node.__key);
+	}
+	constructor(bannerType, contentState, key) {
+		super(key);
+		_defineProperty(this, "__bannerType", void 0);
+		_defineProperty(this, "__contentState", void 0);
+		this.__bannerType = bannerType;
+		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 = `rich-banner rich-banner-${this.__bannerType}`;
+		return div;
+	}
+	updateDOM(prevNode, dom) {
+		if (prevNode.__bannerType !== this.__bannerType) dom.className = `rich-banner rich-banner-${this.__bannerType}`;
+		return false;
+	}
+	isInline() {
+		return false;
+	}
+	getBannerType() {
+		return this.__bannerType;
+	}
+	setBannerType(bannerType) {
+		const writable = this.getWritable();
+		writable.__bannerType = bannerType;
+	}
+	getContentState() {
+		return this.getLatest().__contentState;
+	}
+	setContentState(state) {
+		const writable = this.getWritable();
+		writable.__contentState = state;
+	}
+	getTextContent() {
+		return extractTextContent(this.__contentState);
+	}
+	static importJSON(serializedNode) {
+		const legacy = serializedNode;
+		const bannerType = normalizeBannerType(serializedNode.bannerType);
+		if (serializedNode.content) return new BannerNode(bannerType, serializedNode.content);
+		if (legacy.children) return new BannerNode(bannerType, { root: {
+			children: legacy.children,
+			direction: null,
+			format: "",
+			indent: 0,
+			type: "root",
+			version: 1
+		} });
+		return new BannerNode(bannerType);
+	}
+	exportJSON() {
+		return {
+			...super.exportJSON(),
+			type: "banner",
+			bannerType: this.__bannerType,
+			content: this.__contentState,
+			version: 1
+		};
+	}
+	decorate(_editor, _config) {
+		return createElement(BannerStaticDecorator, {
+			bannerType: this.__bannerType,
+			contentState: this.__contentState
+		});
+	}
+};
+function $isBannerNode(node) {
+	return node instanceof BannerNode;
+}
+//#endregion
+//#region src/context/ColorSchemeContext.tsx
+var ColorSchemeContext = createContext("light");
+function ColorSchemeProvider({ colorScheme, children }) {
+	return /* @__PURE__ */ jsx(ColorSchemeContext.Provider, {
+		value: colorScheme,
+		children
+	});
+}
+function useColorScheme() {
+	return use(ColorSchemeContext);
+}
+//#endregion
+//#region src/utils/shiki.ts
+var codeToHtmlFn = null;
+var shikiLoadPromise = null;
+function loadCodeToHtml() {
+	if (codeToHtmlFn) return Promise.resolve(codeToHtmlFn);
+	if (!shikiLoadPromise) shikiLoadPromise = import("shiki/bundle/web").then((mod) => {
+		codeToHtmlFn = mod.codeToHtml;
+		return mod.codeToHtml;
+	}).catch((err) => {
+		shikiLoadPromise = null;
+		throw err;
+	});
+	return shikiLoadPromise;
+}
+//#endregion
+//#region src/components/renderers/CodeBlockRenderer.tsx
+function CodeBlockRenderer({ code, language, showLineNumbers: showLineNumbersProp }) {
+	const variant = useVariant();
+	const showLineNumbers = showLineNumbersProp ?? variant !== "comment";
+	const shikiTheme = useColorScheme() === "dark" ? "github-dark" : "github-light";
+	const [highlightedHtml, setHighlightedHtml] = useState(null);
+	const [copied, setCopied] = useState(false);
+	const copyTimerRef = useRef(void 0);
+	useEffect(() => {
+		let cancelled = false;
+		setHighlightedHtml(null);
+		loadCodeToHtml().then((toHtml) => toHtml(code, {
+			lang: language,
+			theme: shikiTheme
+		})).then((html) => {
+			if (!cancelled) setHighlightedHtml(html);
+		}).catch(() => {
+			if (!cancelled) setHighlightedHtml(null);
+		});
+		return () => {
+			cancelled = true;
+		};
+	}, [
+		code,
+		language,
+		shikiTheme
+	]);
+	useEffect(() => {
+		return () => clearTimeout(copyTimerRef.current);
+	}, []);
+	const handleCopy = useCallback(() => {
+		navigator.clipboard.writeText(code).then(() => {
+			setCopied(true);
+			clearTimeout(copyTimerRef.current);
+			copyTimerRef.current = setTimeout(() => setCopied(false), 2e3);
+		}).catch(() => {});
+	}, [code]);
+	const header = language ? /* @__PURE__ */ jsxs("div", {
+		className: "rich-code-block-header",
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "rich-code-block-lang",
+			children: language
+		}), /* @__PURE__ */ jsx("button", {
+			"aria-label": copied ? "Copied to clipboard" : "Copy code",
+			className: "rich-code-block-copy",
+			type: "button",
+			onClick: handleCopy,
+			children: copied ? "Copied" : "Copy"
+		})]
+	}) : null;
+	const wrapperClass = showLineNumbers ? "rich-code-block rich-code-block-numbered" : "rich-code-block";
+	if (highlightedHtml) return /* @__PURE__ */ jsxs("div", {
+		className: wrapperClass,
+		children: [header, /* @__PURE__ */ jsx("div", { dangerouslySetInnerHTML: { __html: highlightedHtml } })]
+	});
+	const lines = code.split("\n");
+	return /* @__PURE__ */ jsxs("div", {
+		className: wrapperClass,
+		children: [header, /* @__PURE__ */ jsx("pre", { children: /* @__PURE__ */ jsx("code", { children: lines.map((line, i) => /* @__PURE__ */ jsxs("span", {
+			className: "line",
+			children: [line, i < lines.length - 1 ? "\n" : ""]
+		}, i)) }) })]
+	});
+}
+//#endregion
+//#region src/nodes/CodeBlockNode.ts
+var CodeBlockNode = class CodeBlockNode extends DecoratorNode {
+	static getType() {
+		return "code-block";
+	}
+	static clone(node) {
+		return new CodeBlockNode(node.__code, node.__language, node.__key);
+	}
+	constructor(code, language, key) {
+		super(key);
+		_defineProperty(this, "__code", void 0);
+		_defineProperty(this, "__language", void 0);
+		this.__code = code;
+		this.__language = language;
+	}
+	createDOM(_config) {
+		const div = document.createElement("div");
+		div.className = "rich-code-block-wrapper";
+		return div;
+	}
+	updateDOM() {
+		return false;
+	}
+	isInline() {
+		return false;
+	}
+	isKeyboardSelectable() {
+		return true;
+	}
+	static importJSON(serializedNode) {
+		return $createCodeBlockNode(serializedNode.code, serializedNode.language);
+	}
+	exportJSON() {
+		return {
+			...super.exportJSON(),
+			type: "code-block",
+			code: this.__code,
+			language: this.__language,
+			version: 1
+		};
+	}
+	getCode() {
+		return this.__code;
+	}
+	setCode(code) {
+		const writable = this.getWritable();
+		writable.__code = code;
+	}
+	getLanguage() {
+		return this.__language;
+	}
+	setLanguage(language) {
+		const writable = this.getWritable();
+		writable.__language = language;
+	}
+	decorate(_editor, _config) {
+		return createRendererDecoration("CodeBlock", CodeBlockRenderer, {
+			code: this.__code,
+			language: this.__language
+		});
+	}
+};
+_defineProperty(CodeBlockNode, "commandItems", [{
+	title: "Code Block",
+	icon: createElement(Code, { size: 20 }),
+	description: "Syntax-highlighted code",
+	keywords: [
+		"code",
+		"snippet",
+		"codeblock"
+	],
+	section: "MEDIA",
+	placement: ["slash", "toolbar"],
+	group: "insert",
+	onSelect: (editor) => {
+		editor.update(() => {
+			$insertNodes([$createCodeBlockNode("", "text")]);
+		});
+	}
+}]);
+function $createCodeBlockNode(code, language) {
+	return new CodeBlockNode(code, language);
+}
+function $isCodeBlockNode(node) {
+	return node instanceof CodeBlockNode;
+}
+//#endregion
+//#region src/nodes/CommentNode.ts
+var DEFAULT_COMMENT_TEXT = "comment";
+var CommentNode = class CommentNode extends TextNode {
+	static getType() {
+		return "comment";
+	}
+	static clone(node) {
+		return new CommentNode(node.__text, node.__key);
+	}
+	static importDOM() {
+		return {
+			"#comment": () => ({
+				conversion: (domNode) => {
+					if (!(domNode instanceof Comment)) return null;
+					return { node: $createCommentNode(domNode.data) };
+				},
+				priority: 4
+			}),
+			"span": () => ({
+				conversion: (domNode) => {
+					if (!(domNode instanceof HTMLElement)) return null;
+					if (!domNode.classList.contains(semanticClassNames.comment)) return null;
+					return { node: $createCommentNode(domNode.dataset.comment ?? domNode.textContent ?? "") };
+				},
+				priority: 2
+			})
+		};
+	}
+	constructor(text, key) {
+		super(text, key);
+	}
+	createDOM(config) {
+		const element = super.createDOM(config);
+		element.classList.add(semanticClassNames.comment, sharedStyles.comment);
+		element.dataset.comment = this.__text;
+		return element;
+	}
+	updateDOM(prevNode, dom, config) {
+		const updated = super.updateDOM(prevNode, dom, config);
+		dom.classList.add(semanticClassNames.comment, sharedStyles.comment);
+		if (prevNode.__text !== this.__text) dom.dataset.comment = this.__text;
+		return updated;
+	}
+	exportDOM(_editor) {
+		return { element: document.createComment(this.getTextContent()) };
+	}
+	static importJSON(serializedNode) {
+		const node = $createCommentNode(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: "comment",
+			version: 1
+		};
+	}
+};
+_defineProperty(CommentNode, "commandItems", [{
+	title: "HTML Comment",
+	icon: createElement(MessageSquareQuote, { size: 20 }),
+	description: "Insert an HTML comment node",
+	keywords: [
+		"comment",
+		"html",
+		"annotation",
+		"hidden",
+		"<!-- -->"
+	],
+	section: "INLINE",
+	placement: ["slash", "toolbar"],
+	group: "insert",
+	onSelect: (editor, _queryString) => {
+		editor.update(() => {
+			const node = $createCommentNode(DEFAULT_COMMENT_TEXT);
+			$insertNodes([node]);
+			node.select(0, node.getTextContentSize());
+		});
+	}
+}]);
+function $createCommentNode(text) {
+	return new CommentNode(text);
+}
+function $createCommentPlaceholderNode() {
+	return $createCommentNode(DEFAULT_COMMENT_TEXT);
+}
+function $isCommentNode(node) {
+	return node instanceof CommentNode;
+}
+//#endregion
+//#region src/utils/lucide-dom.ts
+var SVG_NS = "http://www.w3.org/2000/svg";
+var DEFAULT_ATTRS = {
+	xmlns: SVG_NS,
+	width: "24",
+	height: "24",
+	viewBox: "0 0 24 24",
+	fill: "none",
+	stroke: "currentColor",
+	"stroke-width": "2",
+	"stroke-linecap": "round",
+	"stroke-linejoin": "round"
+};
+function createLucideSvg(iconNode, attrs = {}) {
+	const svg = document.createElementNS(SVG_NS, "svg");
+	const merged = {
+		...DEFAULT_ATTRS,
+		...attrs
+	};
+	for (const [k, v] of Object.entries(merged)) svg.setAttribute(k, v);
+	for (const [tag, elAttrs] of iconNode) {
+		const el = document.createElementNS(SVG_NS, tag);
+		for (const [k, v] of Object.entries(elAttrs)) {
+			if (k === "key") continue;
+			el.setAttribute(k, v);
+		}
+		svg.append(el);
+	}
+	return svg;
+}
+//#endregion
+//#region src/nodes/DetailsNode.ts
+var ChevronRightIconNode = [["path", { d: "M8 6L12 10L8 14" }]];
+var DetailsNode = class DetailsNode extends ElementNode {
+	static getType() {
+		return "details";
+	}
+	static clone(node) {
+		return new DetailsNode(node.__summary, node.__open, node.__key);
+	}
+	constructor(summary, open = false, key) {
+		super(key);
+		_defineProperty(this, "__summary", void 0);
+		_defineProperty(this, "__open", void 0);
+		this.__summary = summary;
+		this.__open = open;
+	}
+	createDOM(_config) {
+		const details = document.createElement("details");
+		details.className = `${detailsClassNames.details} ${detailsStyles.details}`;
+		if (this.__open) details.open = true;
+		const summary = document.createElement("summary");
+		summary.className = `${detailsClassNames.summary} ${detailsStyles.summary}`;
+		const chevron = document.createElement("span");
+		chevron.className = `${detailsClassNames.chevron} ${detailsStyles.chevron}`;
+		chevron.setAttribute("aria-hidden", "true");
+		chevron.append(createLucideSvg(ChevronRightIconNode, {
+			"width": "20",
+			"height": "20",
+			"viewBox": "0 0 20 20",
+			"stroke-width": "1.5"
+		}));
+		summary.append(chevron);
+		const label = document.createElement("span");
+		label.className = `${detailsClassNames.summaryText} ${detailsStyles.summaryText}`;
+		label.textContent = this.__summary;
+		summary.append(label);
+		const content = document.createElement("div");
+		content.className = `${detailsClassNames.content} ${detailsStyles.content}`;
+		details.append(summary, content);
+		return details;
+	}
+	updateDOM(prevNode, dom) {
+		const details = dom;
+		if (prevNode.__open !== this.__open) details.open = this.__open;
+		if (prevNode.__summary !== this.__summary) {
+			const label = dom.querySelector(`.${detailsClassNames.summaryText}`);
+			if (label) label.textContent = this.__summary;
+		}
+		return false;
+	}
+	static importJSON(serializedNode) {
+		return $createDetailsNode(serializedNode.summary, serializedNode.open);
+	}
+	exportJSON() {
+		return {
+			...super.exportJSON(),
+			type: "details",
+			summary: this.__summary,
+			open: this.__open,
+			version: 1
+		};
+	}
+	getSummary() {
+		return this.getLatest().__summary;
+	}
+	setSummary(summary) {
+		const writable = this.getWritable();
+		writable.__summary = summary;
+	}
+	getOpen() {
+		return this.getLatest().__open;
+	}
+	setOpen(open) {
+		const writable = this.getWritable();
+		writable.__open = open;
+	}
+	toggleOpen() {
+		this.setOpen(!this.getOpen());
+	}
+	getDOMSlot(element) {
+		const content = element.querySelector(`.${detailsClassNames.content}`);
+		return super.getDOMSlot(element).withElement(content);
+	}
+	isInline() {
+		return false;
+	}
+};
+_defineProperty(DetailsNode, "slashMenuItems", [{
+	title: "Details",
+	icon: createElement(ChevronRight, { size: 20 }),
+	description: "Collapsible content block",
+	keywords: [
+		"details",
+		"toggle",
+		"collapse",
+		"accordion"
+	],
+	section: "ADVANCED",
+	onSelect: (editor) => {
+		editor.update(() => {
+			$insertNodes([$createDetailsNode("Details")]);
+		});
+	}
+}]);
+function $createDetailsNode(summary, open = false) {
+	return new DetailsNode(summary, open);
+}
+//#endregion
+//#region src/components/renderers/FootnoteSectionRenderer.tsx
+function FootnoteSectionRenderer({ definitions }) {
+	const { displayNumberMap } = useFootnoteDefinitions();
+	const sortedEntries = Object.entries(definitions).sort(([a], [b]) => (displayNumberMap[a] ?? 0) - (displayNumberMap[b] ?? 0));
+	if (sortedEntries.length === 0) return null;
+	return /* @__PURE__ */ jsxs("div", {
+		role: "doc-endnotes",
+		className: clsx("rich-footnote-section-content", semanticClassNames.footnoteSection, sharedStyles.footnoteSection),
+		children: [/* @__PURE__ */ jsx("hr", { className: clsx(semanticClassNames.footnoteSectionDivider, sharedStyles.footnoteSectionDivider) }), /* @__PURE__ */ jsx("ol", {
+			className: clsx(semanticClassNames.footnoteSectionList, sharedStyles.footnoteSectionList),
+			children: sortedEntries.map(([identifier, content]) => {
+				return /* @__PURE__ */ jsx(FootnoteSectionItem, {
+					content,
+					displayNum: displayNumberMap[identifier] ?? identifier,
+					identifier
+				}, identifier);
+			})
+		})]
+	});
+}
+function FootnoteSectionItem({ identifier, content, displayNum }) {
+	const targetId = `footnote-${identifier}`;
+	const refId = `footnote-ref-${identifier}`;
+	const handleBackClick = useCallback((e) => {
+		e.preventDefault();
+		const refElement = document.getElementById(refId);
+		if (!refElement) return;
+		refElement.scrollIntoView({
+			behavior: "smooth",
+			block: "center"
+		});
+		refElement.classList.add(semanticClassNames.footnoteHighlight, sharedStyles.footnoteHighlight);
+		window.setTimeout(() => {
+			refElement.classList.remove(semanticClassNames.footnoteHighlight, sharedStyles.footnoteHighlight);
+		}, 1200);
+	}, [refId]);
+	return /* @__PURE__ */ jsxs("li", {
+		className: clsx(semanticClassNames.footnoteSectionItem, sharedStyles.footnoteSectionItem),
+		id: targetId,
+		value: typeof displayNum === "number" ? displayNum : void 0,
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "rich-footnote-section-item-content",
+			children: content
+		}), /* @__PURE__ */ jsx("a", {
+			"aria-label": `Back to reference ${displayNum}`,
+			className: clsx(semanticClassNames.footnoteBackRef, sharedStyles.footnoteBackRef),
+			href: `#${refId}`,
+			role: "doc-backlink",
+			onClick: handleBackClick,
+			children: "↩"
+		})]
+	});
+}
+//#endregion
+//#region src/nodes/FootnoteSectionNode.ts
+var FootnoteSectionNode = class FootnoteSectionNode extends DecoratorNode {
+	static getType() {
+		return "footnote-section";
+	}
+	static clone(node) {
+		return new FootnoteSectionNode({ ...node.__definitions }, node.__key);
+	}
+	constructor(definitions, key) {
+		super(key);
+		_defineProperty(this, "__definitions", void 0);
+		this.__definitions = definitions;
+	}
+	createDOM(_config) {
+		const div = document.createElement("div");
+		div.className = `${semanticClassNames.footnoteSection} ${sharedStyles.footnoteSection}`;
+		return div;
+	}
+	updateDOM() {
+		return false;
+	}
+	isInline() {
+		return false;
+	}
+	static importJSON(serializedNode) {
+		return $createFootnoteSectionNode(serializedNode.definitions);
+	}
+	exportJSON() {
+		return {
+			...super.exportJSON(),
+			type: "footnote-section",
+			definitions: this.__definitions,
+			version: 1
+		};
+	}
+	getDefinitions() {
+		return this.getLatest().__definitions;
+	}
+	setDefinitions(definitions) {
+		const writable = this.getWritable();
+		writable.__definitions = definitions;
+	}
+	getDefinition(identifier) {
+		return this.getLatest().__definitions[identifier];
+	}
+	setDefinition(identifier, content) {
+		const writable = this.getWritable();
+		writable.__definitions = {
+			...writable.__definitions,
+			[identifier]: content
+		};
+	}
+	removeDefinition(identifier) {
+		const writable = this.getWritable();
+		const { [identifier]: _, ...rest } = writable.__definitions;
+		writable.__definitions = rest;
+	}
+	decorate(_editor, _config) {
+		return createRendererDecoration("FootnoteSection", FootnoteSectionRenderer, {
+			definitions: this.__definitions,
+			nodeKey: this.__key
+		});
+	}
+};
+function $createFootnoteSectionNode(definitions = {}) {
+	return new FootnoteSectionNode(definitions);
+}
+function $isFootnoteSectionNode(node) {
+	return node instanceof FootnoteSectionNode;
+}
+//#endregion
+//#region src/components/renderers/GridStaticDecorator.tsx
+function GridStaticDecorator({ cols, gap, cellStates }) {
+	const renderContent = useNestedContentRenderer();
+	return /* @__PURE__ */ jsx("div", {
+		className: clsx(gridClassNames.inner, gridStyles.inner),
+		style: {
+			display: "grid",
+			gridTemplateColumns: `repeat(${cols}, 1fr)`,
+			gap
+		},
+		children: cellStates.map((state, i) => /* @__PURE__ */ jsx("div", {
+			className: clsx(gridClassNames.cell, gridStyles.cell),
+			children: renderContent(state)
+		}, i))
+	});
+}
+//#endregion
+//#region src/nodes/GridContainerNode.ts
+var GridContainerNode = class GridContainerNode extends DecoratorNode {
+	static getType() {
+		return "grid-container";
+	}
+	static clone(node) {
+		return new GridContainerNode(node.__cols, node.__gap, [...node.__cellStates], node.__key);
+	}
+	constructor(cols = 2, gap, cellStates, key) {
+		super(key);
+		_defineProperty(this, "__cols", void 0);
+		_defineProperty(this, "__gap", void 0);
+		_defineProperty(this, "__cellStates", void 0);
+		this.__cols = cols;
+		this.__gap = gap || "16px";
+		if (cellStates) this.__cellStates = cellStates;
+		else {
+			const emptyState = { root: {
+				children: [{
+					type: "paragraph",
+					children: [],
+					direction: null,
+					format: "",
+					indent: 0,
+					textFormat: 0,
+					textStyle: "",
+					version: 1
+				}],
+				direction: null,
+				format: "",
+				indent: 0,
+				type: "root",
+				version: 1
+			} };
+			this.__cellStates = Array.from({ length: cols }, () => emptyState);
+		}
+	}
+	createDOM(_config) {
+		const div = document.createElement("div");
+		div.className = `${gridClassNames.container} ${gridStyles.container}`;
+		return div;
+	}
+	updateDOM() {
+		return false;
+	}
+	isInline() {
+		return false;
+	}
+	getCols() {
+		return this.getLatest().__cols;
+	}
+	setCols(cols) {
+		const writable = this.getWritable();
+		const prev = writable.__cellStates.length;
+		writable.__cols = cols;
+		if (cols > prev) {
+			const emptyState = { root: {
+				children: [{
+					type: "paragraph",
+					children: [],
+					direction: null,
+					format: "",
+					indent: 0,
+					textFormat: 0,
+					textStyle: "",
+					version: 1
+				}],
+				direction: null,
+				format: "",
+				indent: 0,
+				type: "root",
+				version: 1
+			} };
+			for (let i = prev; i < cols; i++) writable.__cellStates.push(emptyState);
+		}
+	}
+	getGap() {
+		return this.getLatest().__gap;
+	}
+	setGap(gap) {
+		const writable = this.getWritable();
+		writable.__gap = gap;
+	}
+	getCellStates() {
+		return this.getLatest().__cellStates;
+	}
+	addCells(count) {
+		const writable = this.getWritable();
+		const emptyState = { root: {
+			children: [{
+				type: "paragraph",
+				children: [],
+				direction: null,
+				format: "",
+				indent: 0,
+				textFormat: 0,
+				textStyle: "",
+				version: 1
+			}],
+			direction: null,
+			format: "",
+			indent: 0,
+			type: "root",
+			version: 1
+		} };
+		for (let i = 0; i < count; i++) writable.__cellStates.push(emptyState);
+	}
+	removeCells(count) {
+		const states = this.getWritable().__cellStates;
+		const toRemove = Math.min(count, states.length);
+		for (let i = 0; i < toRemove; i++) {
+			const state = states.at(-1);
+			if (!state) break;
+			if (!(extractTextContent(state).trim() === "")) break;
+			states.pop();
+		}
+	}
+	getTextContent() {
+		return this.__cellStates.map((s) => extractTextContent(s)).join("\n");
+	}
+	static importJSON(serializedNode) {
+		const legacy = serializedNode;
+		const cols = legacy.cols || 2;
+		const rawGap = legacy.gap;
+		const gap = typeof rawGap === "number" ? `${rawGap}px` : rawGap;
+		if (legacy.cells && legacy.cells.length > 0) return new GridContainerNode(cols, gap, legacy.cells);
+		if (legacy.children) return new GridContainerNode(cols, gap, legacy.children.map((child) => {
+			return { root: {
+				children: [child],
+				direction: null,
+				format: "",
+				indent: 0,
+				type: "root",
+				version: 1
+			} };
+		}));
+		return new GridContainerNode(cols, gap);
+	}
+	exportJSON() {
+		return {
+			...super.exportJSON(),
+			type: "grid-container",
+			cols: this.__cols,
+			gap: this.__gap,
+			cells: this.__cellStates,
+			version: 1
+		};
+	}
+	decorate(_editor, _config) {
+		return createElement(GridStaticDecorator, {
+			cols: this.__cols,
+			gap: this.__gap,
+			cellStates: this.__cellStates
+		});
+	}
+};
+function $createGridContainerNode(cols = 2, gap) {
+	return new GridContainerNode(cols, gap);
+}
+function $isGridContainerNode(node) {
+	return node instanceof GridContainerNode;
+}
+//#endregion
+//#region src/nodes/LinkCardNode.ts
+var LinkCardNode = class LinkCardNode extends DecoratorNode {
+	static getType() {
+		return "link-card";
+	}
+	static clone(node) {
+		return new LinkCardNode({
+			url: node.__url,
+			source: node.__source,
+			id: node.__id,
+			title: node.__title,
+			description: node.__description,
+			favicon: node.__favicon,
+			image: node.__image
+		}, node.__key);
+	}
+	constructor(payload, key) {
+		super(key);
+		_defineProperty(this, "__url", void 0);
+		_defineProperty(this, "__source", void 0);
+		_defineProperty(this, "__id", void 0);
+		_defineProperty(this, "__title", void 0);
+		_defineProperty(this, "__description", void 0);
+		_defineProperty(this, "__favicon", void 0);
+		_defineProperty(this, "__image", void 0);
+		this.__url = payload.url;
+		this.__source = payload.source;
+		this.__id = payload.id;
+		this.__title = payload.title;
+		this.__description = payload.description;
+		this.__favicon = payload.favicon;
+		this.__image = payload.image;
+	}
+	createDOM(_config) {
+		const div = document.createElement("div");
+		div.className = "rich-link-card-wrapper";
+		return div;
+	}
+	updateDOM() {
+		return false;
+	}
+	isInline() {
+		return false;
+	}
+	static importJSON(serializedNode) {
+		return $createLinkCardNode({
+			url: serializedNode.url,
+			source: serializedNode.source,
+			id: serializedNode.id,
+			title: serializedNode.title,
+			description: serializedNode.description,
+			favicon: serializedNode.favicon,
+			image: serializedNode.image
+		});
+	}
+	exportJSON() {
+		return {
+			...super.exportJSON(),
+			type: "link-card",
+			url: this.__url,
+			source: this.__source,
+			id: this.__id,
+			title: this.__title,
+			description: this.__description,
+			favicon: this.__favicon,
+			image: this.__image,
+			version: 1
+		};
+	}
+	getUrl() {
+		return this.getLatest().__url;
+	}
+	setUrl(url) {
+		const writable = this.getWritable();
+		writable.__url = url;
+	}
+	getSource() {
+		return this.getLatest().__source;
+	}
+	setSource(source) {
+		const writable = this.getWritable();
+		writable.__source = source;
+	}
+	getId() {
+		return this.getLatest().__id;
+	}
+	setId(id) {
+		const writable = this.getWritable();
+		writable.__id = id;
+	}
+	decorate(_editor, _config) {
+		return createRendererDecoration("LinkCard", LinkCardRenderer, {
+			url: this.__url,
+			source: this.__source,
+			id: this.__id,
+			title: this.__title,
+			description: this.__description,
+			favicon: this.__favicon,
+			image: this.__image
+		});
+	}
+};
+_defineProperty(LinkCardNode, "commandItems", [{
+	title: "Link Card",
+	icon: createElement(Link, { size: 20 }),
+	description: "Link preview card",
+	keywords: [
+		"link",
+		"card",
+		"bookmark",
+		"embed"
+	],
+	section: "MEDIA",
+	placement: ["slash", "toolbar"],
+	group: "insert",
+	onSelect: (editor) => {
+		editor.update(() => {
+			$insertNodes([$createLinkCardNode({ url: "" })]);
+		});
+	}
+}]);
+function $createLinkCardNode(payload) {
+	return new LinkCardNode(payload);
+}
+function $isLinkCardNode(node) {
+	return node instanceof LinkCardNode;
+}
+//#endregion
+//#region src/nodes/RubyNode.ts
+function readBaseTextFromRuby(element) {
+	let base = "";
+	for (const child of Array.from(element.childNodes)) {
+		if (child.nodeType === Node.TEXT_NODE) {
+			base += child.textContent ?? "";
+			continue;
+		}
+		if (child.nodeType !== Node.ELEMENT_NODE) continue;
+		const childElement = child;
+		const tag = childElement.tagName.toLowerCase();
+		if (tag === "rt" || tag === "rp") continue;
+		base += childElement.textContent ?? "";
+	}
+	return base;
+}
+var RubyNode = class RubyNode extends ElementNode {
+	static getType() {
+		return "ruby";
+	}
+	static clone(node) {
+		return new RubyNode(node.__reading, node.__key);
+	}
+	constructor(reading, key) {
+		super(key);
+		_defineProperty(this, "__reading", void 0);
+		this.__reading = reading;
+	}
+	static importJSON(serializedNode) {
+		return $createRubyNode(serializedNode.reading ?? "");
+	}
+	exportJSON() {
+		return {
+			...super.exportJSON(),
+			type: "ruby",
+			reading: this.__reading,
+			version: 1
+		};
+	}
+	static importDOM() {
+		return { ruby: () => ({
+			conversion: (domNode) => {
+				if (!(domNode instanceof HTMLElement)) return null;
+				const reading = domNode.querySelector("rt")?.textContent ?? "";
+				const baseText = readBaseTextFromRuby(domNode);
+				const node = $createRubyNode(reading);
+				if (baseText) node.append($createTextNode(baseText));
+				return { node };
+			},
+			priority: 2
+		}) };
+	}
+	exportDOM() {
+		const ruby = document.createElement("ruby");
+		ruby.className = `${semanticClassNames.ruby} ${sharedStyles.ruby}`;
+		const baseText = this.getTextContent();
+		if (baseText) ruby.append(baseText);
+		if (this.__reading) {
+			const rt = document.createElement("rt");
+			rt.className = `${semanticClassNames.rubyRt} ${sharedStyles.rubyRt}`;
+			rt.textContent = this.__reading;
+			ruby.append(rt);
+		}
+		return { element: ruby };
+	}
+	createDOM(_config) {
+		const span = document.createElement("span");
+		span.className = `${semanticClassNames.ruby} ${sharedStyles.ruby}`;
+		if (this.__reading) span.dataset.ruby = this.__reading;
+		return span;
+	}
+	updateDOM(prevNode, dom) {
+		if (prevNode.__reading !== this.__reading) if (this.__reading) dom.dataset.ruby = this.__reading;
+		else delete dom.dataset.ruby;
+		return false;
+	}
+	canInsertTextBefore() {
+		return true;
+	}
+	canInsertTextAfter() {
+		return true;
+	}
+	isInline() {
+		return true;
+	}
+	getReading() {
+		return this.getLatest().__reading;
+	}
+	setReading(reading) {
+		const writable = this.getWritable();
+		writable.__reading = reading;
+	}
+};
+function $createRubyNode(reading) {
+	return new RubyNode(reading);
+}
+function $isRubyNode(node) {
+	return node instanceof RubyNode;
+}
+//#endregion
+//#region src/components/renderers/VideoRenderer.tsx
+function VideoRenderer({ src, poster, width, height }) {
+	return /* @__PURE__ */ jsx("figure", {
+		className: "rich-video",
+		children: /* @__PURE__ */ jsx("video", {
+			controls: true,
+			height,
+			poster,
+			preload: "metadata",
+			src,
+			style: {
+				maxWidth: "100%",
+				height: "auto"
+			},
+			width
+		})
+	});
+}
+//#endregion
+//#region src/nodes/VideoNode.ts
+var VideoNode = class VideoNode extends DecoratorNode {
+	static getType() {
+		return "video";
+	}
+	static clone(node) {
+		return new VideoNode({
+			src: node.__src,
+			poster: node.__poster,
+			width: node.__width,
+			height: node.__height
+		}, node.__key);
+	}
+	constructor(payload, key) {
+		super(key);
+		_defineProperty(this, "__src", void 0);
+		_defineProperty(this, "__poster", void 0);
+		_defineProperty(this, "__width", void 0);
+		_defineProperty(this, "__height", void 0);
+		this.__src = payload.src;
+		this.__poster = payload.poster;
+		this.__width = payload.width;
+		this.__height = payload.height;
+	}
+	createDOM(_config) {
+		const div = document.createElement("div");
+		div.className = "rich-video-wrapper";
+		return div;
+	}
+	updateDOM() {
+		return false;
+	}
+	isInline() {
+		return false;
+	}
+	static importJSON(serializedNode) {
+		return $createVideoNode({
+			src: serializedNode.src,
+			poster: serializedNode.poster,
+			width: serializedNode.width,
+			height: serializedNode.height
+		});
+	}
+	exportJSON() {
+		return {
+			...super.exportJSON(),
+			type: "video",
+			src: this.__src,
+			poster: this.__poster,
+			width: this.__width,
+			height: this.__height,
+			version: 1
+		};
+	}
+	getSrc() {
+		return this.getLatest().__src;
+	}
+	setSrc(src) {
+		const writable = this.getWritable();
+		writable.__src = src;
+	}
+	decorate(_editor, _config) {
+		return createRendererDecoration("Video", VideoRenderer, {
+			src: this.__src,
+			poster: this.__poster,
+			width: this.__width,
+			height: this.__height
+		});
+	}
+};
+_defineProperty(VideoNode, "commandItems", [{
+	title: "Video",
+	icon: createElement(Video, { size: 20 }),
+	description: "Embed a video",
+	keywords: [
+		"video",
+		"media",
+		"mp4"
+	],
+	section: "MEDIA",
+	placement: ["slash", "toolbar"],
+	group: "insert",
+	onSelect: (editor) => {
+		editor.update(() => {
+			$insertNodes([$createVideoNode({ src: "" })]);
+		});
+	}
+}]);
+function $createVideoNode(payload) {
+	return new VideoNode(payload);
+}
+//#endregion
+//#region src/config.ts
+var builtinNodes = [
+	HeadingNode,
+	QuoteNode,
+	ListNode,
+	ListItemNode,
+	LinkNode,
+	AutoLinkNode,
+	HorizontalRuleNode,
+	TableNode,
+	TableCellNode,
+	TableRowNode,
+	CodeNode
+];
+var customNodes = [
+	SpoilerNode,
+	MentionNode,
+	KaTeXInlineNode,
+	KaTeXBlockNode,
+	ImageNode,
+	AlertQuoteNode,
+	CodeBlockNode,
+	FootnoteNode,
+	FootnoteSectionNode,
+	VideoNode,
+	LinkCardNode,
+	CommentNode,
+	DetailsNode,
+	GridContainerNode,
+	BannerNode,
+	MermaidNode,
+	RubyNode,
+	TagNode
+];
+var allNodes = [...builtinNodes, ...customNodes];
+//#endregion
+export { BANNER_TYPES as A, $isCodeBlockNode as C, useColorScheme as D, ColorSchemeProvider as E, normalizeBannerType as M, BannerRenderer as N, $isBannerNode as O, CommentNode as S, CodeBlockRenderer as T, $createDetailsNode as _, $createRubyNode as a, $createCommentPlaceholderNode as b, $createLinkCardNode as c, $createGridContainerNode as d, $isGridContainerNode as f, FootnoteSectionNode as g, $isFootnoteSectionNode as h, VideoNode as i, BannerNode as j, BANNER_LABELS as k, $isLinkCardNode as l, $createFootnoteSectionNode as m, builtinNodes as n, $isRubyNode as o, GridContainerNode as p, customNodes as r, RubyNode as s, allNodes as t, LinkCardNode as u, DetailsNode as v, CodeBlockNode as w, $isCommentNode as x, $createCommentNode as y };