@lobehub/editor 4.15.1 → 4.16.0

package/es/renderer/diff/types.d.ts

@@ -0,0 +1,32 @@
+import { ReactNode } from "react";
+import { SerializedLexicalNode } from "lexical";
+
+//#region src/renderer/diff/types.d.ts
+type LexicalDiffRowKind = 'delete' | 'equal' | 'insert' | 'modify';
+interface LexicalDiffCell {
+  baseBlockType: string | null;
+  block: SerializedLexicalNode | null;
+  blockType: string | null;
+}
+interface LexicalDiffRow {
+  kind: LexicalDiffRowKind;
+  newCell: LexicalDiffCell | null;
+  oldCell: LexicalDiffCell | null;
+}
+interface LexicalDiffBlockRenderContext {
+  baseBlockType: string | null;
+  blockType: string | null;
+  newBaseBlockType: string | null;
+  newBlockType: string | null;
+  oldBaseBlockType: string | null;
+  oldBlockType: string | null;
+  renderDefaultNew: () => ReactNode;
+  renderDefaultOld: () => ReactNode;
+  row: LexicalDiffRow;
+}
+type LexicalDiffBlockRenderer = (context: LexicalDiffBlockRenderContext) => {
+  new?: ReactNode;
+  old?: ReactNode;
+} | null;
+//#endregion
+export { LexicalDiffBlockRenderContext, LexicalDiffBlockRenderer, LexicalDiffCell, LexicalDiffRow, LexicalDiffRowKind };

package/es/renderer/engine/render-builtin-node.js

@@ -0,0 +1,196 @@
+import { getListClassName, getTableWrapperClassName } from "../style.js";
+import { parseCSSText } from "./utils.js";
+import { createElement } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/renderer/engine/render-builtin-node.tsx
+const SAFE_URL_PROTOCOLS = new Set([
+	"http:",
+	"https:",
+	"mailto:",
+	"sms:",
+	"tel:"
+]);
+function sanitizeUrl(url) {
+	try {
+		const parsed = new URL(url);
+		if (!SAFE_URL_PROTOCOLS.has(parsed.protocol)) return "about:blank";
+	} catch {
+		return url;
+	}
+	return url;
+}
+function formatLinkHighlightUrl(url) {
+	if (/^[a-z][\d+.a-z-]*:/i.test(url)) return url;
+	if (/^[#./]/.test(url)) return url;
+	if (url.includes("@") && !url.startsWith("mailto:")) return `mailto:${url}`;
+	if (/^\+?[\d\s()-]{5,}$/.test(url)) return `tel:${url}`;
+	if (url.startsWith("www.")) return `https://${url}`;
+	if (!url.includes("://")) return `https://${url}`;
+	return url;
+}
+function textToSlug(text) {
+	return text.toLowerCase().trim().replaceAll(/[^\s\w\u3000-\u9FFF\uAC00-\uD7AF\uFF00-\uFFEF-]/g, "").replaceAll(/[\s_]+/g, "-").replaceAll(/^-+|-+$/g, "");
+}
+const DIFF_ROOT_STYLE = { position: "relative" };
+const DIFF_LIST_ITEM_ROOT_STYLE = {
+	display: "inline-block",
+	minWidth: "100%",
+	position: "relative"
+};
+const DIFF_DELETED_STYLE = {
+	color: "var(--ant-color-text-quaternary, rgba(0, 0, 0, 0.45))",
+	textDecoration: "line-through"
+};
+function renderDiffNode(node, key, children) {
+	const diffType = typeof node.diffType === "string" ? node.diffType : "unchanged";
+	const renderedChildren = children ?? [];
+	const sharedContentStyle = {
+		marginBlockStart: "calc(var(--lobe-markdown-margin-multiple, 1) * 0.5em)",
+		paddingInlineEnd: 4
+	};
+	const borderColor = diffType === "add" || diffType === "listItemAdd" ? "var(--ant-color-success, #52c41a)" : diffType === "remove" || diffType === "listItemRemove" ? "var(--ant-color-error, #ff4d4f)" : "var(--ant-color-warning, #faad14)";
+	const contentStyle = diffType === "unchanged" ? sharedContentStyle : {
+		...sharedContentStyle,
+		borderInlineEnd: `3px solid ${borderColor}`
+	};
+	const rootStyle = diffType === "listItemAdd" || diffType === "listItemModify" || diffType === "listItemRemove" ? DIFF_LIST_ITEM_ROOT_STYLE : DIFF_ROOT_STYLE;
+	const wrapChild = (child, childKey, style) => {
+		if (child === void 0 || child === null) return null;
+		return /* @__PURE__ */ jsx("div", {
+			style,
+			children: child
+		}, childKey);
+	};
+	let content;
+	switch (diffType) {
+		case "add":
+		case "listItemAdd":
+			content = wrapChild(renderedChildren[0], `${key}-add`);
+			break;
+		case "remove":
+		case "listItemRemove":
+			content = wrapChild(renderedChildren[0], `${key}-remove`, DIFF_DELETED_STYLE);
+			break;
+		case "modify":
+		case "listItemModify":
+			content = [wrapChild(renderedChildren[0], `${key}-old`, DIFF_DELETED_STYLE), wrapChild(renderedChildren[1], `${key}-new`)];
+			break;
+		default:
+			content = renderedChildren;
+			break;
+	}
+	return /* @__PURE__ */ jsx("div", {
+		className: "ne-diff",
+		"data-diff-type": diffType,
+		style: rootStyle,
+		children: /* @__PURE__ */ jsx("div", {
+			className: "content",
+			style: contentStyle,
+			children: content
+		})
+	}, key);
+}
+function renderBuiltinNode(node, key, children, headingSlugs, textContent) {
+	switch (node.type) {
+		case "root": return children;
+		case "paragraph": return /* @__PURE__ */ jsx("p", {
+			style: node.format ? { textAlign: node.format } : void 0,
+			children
+		}, key);
+		case "heading": {
+			const tag = node.tag;
+			const baseSlug = textToSlug(textContent || "");
+			let slug = baseSlug;
+			if (baseSlug) {
+				const count = headingSlugs.get(baseSlug);
+				if (count !== void 0) {
+					slug = `${baseSlug}-${count}`;
+					headingSlugs.set(baseSlug, count + 1);
+				} else headingSlugs.set(baseSlug, 1);
+			}
+			return createElement(tag, {
+				id: slug || void 0,
+				key
+			}, children);
+		}
+		case "quote": return /* @__PURE__ */ jsx("blockquote", {
+			className: "editor_quote",
+			children
+		}, key);
+		case "list": return /* @__PURE__ */ jsx(node.listType === "number" ? "ol" : "ul", {
+			className: getListClassName(node.listType),
+			start: node.start !== 1 ? node.start : void 0,
+			children
+		}, key);
+		case "listitem": {
+			const isChecklist = node.checked !== void 0;
+			const hasNestedList = node.children?.some((c) => c.type === "list");
+			const value = typeof node.value === "number" && node.value > 1 ? node.value : void 0;
+			let cls = "editor_listItem";
+			if (hasNestedList) cls = "editor_listItemNested";
+			else if (isChecklist) cls = node.checked ? "editor_listItem editor_listItemChecked" : "editor_listItem editor_listItemUnchecked";
+			return /* @__PURE__ */ jsx("li", {
+				className: cls,
+				role: isChecklist ? "checkbox" : void 0,
+				value,
+				children
+			}, key);
+		}
+		case "link":
+		case "autolink": return /* @__PURE__ */ jsx("a", {
+			href: sanitizeUrl(node.url),
+			rel: node.rel || "noopener noreferrer",
+			target: node.target || void 0,
+			children
+		}, key);
+		case "linkHighlight": return /* @__PURE__ */ jsx("a", {
+			href: textContent ? sanitizeUrl(formatLinkHighlightUrl(textContent)) : void 0,
+			rel: "noopener noreferrer",
+			target: "_blank",
+			children
+		}, key);
+		case "table": return /* @__PURE__ */ jsx("div", {
+			className: getTableWrapperClassName(),
+			children: /* @__PURE__ */ jsx("table", {
+				className: "editor_table",
+				children: /* @__PURE__ */ jsx("tbody", { children })
+			})
+		}, key);
+		case "tablerow": return /* @__PURE__ */ jsx("tr", { children }, key);
+		case "tablecell": {
+			const isHeader = !!node.headerState;
+			const CellTag = isHeader ? "th" : "td";
+			const cls = isHeader ? "editor_table_cell editor_table_cell_header" : "editor_table_cell";
+			const cellStyle = {};
+			if (node.width) cellStyle.width = `${node.width}px`;
+			if (node.backgroundColor) cellStyle.backgroundColor = node.backgroundColor;
+			if (node.verticalAlign) cellStyle.verticalAlign = node.verticalAlign;
+			return /* @__PURE__ */ jsx(CellTag, {
+				className: cls,
+				colSpan: node.colSpan > 1 ? node.colSpan : void 0,
+				rowSpan: node.rowSpan > 1 ? node.rowSpan : void 0,
+				style: Object.keys(cellStyle).length > 0 ? cellStyle : void 0,
+				children
+			}, key);
+		}
+		case "linebreak": return /* @__PURE__ */ jsx("br", {}, key);
+		case "tab": return /* @__PURE__ */ jsx("span", { children: "	" }, key);
+		case "codeInline": return /* @__PURE__ */ jsx("code", {
+			className: "editor_code",
+			children
+		}, key);
+		case "code-highlight":
+			if (node.style) return /* @__PURE__ */ jsx("span", {
+				style: parseCSSText(node.style),
+				children: node.text
+			}, key);
+			return /* @__PURE__ */ jsx("span", { children: node.text }, key);
+		case "diff": return renderDiffNode(node, key, children);
+		case "cursor": return null;
+		default:
+			console.warn(`[LexicalRenderer] Unknown node type: "${node.type}"`);
+			return children ?? null;
+	}
+}
+//#endregion
+export { renderBuiltinNode };

package/es/renderer/engine/render-text-node.js

@@ -0,0 +1,33 @@
+import { parseCSSText } from "./utils.js";
+import { createElement } from "react";
+//#region src/renderer/engine/render-text-node.tsx
+const FORMAT_TAGS = [
+	[1, "strong"],
+	[2, "em"],
+	[4, "s"],
+	[8, "u"],
+	[16, "code"],
+	[32, "sub"],
+	[64, "sup"],
+	[128, "mark"]
+];
+function shouldPreserveWhitespace(text) {
+	return /[\t\n]| {2,}|^ | $/.test(text);
+}
+function renderTextNode(node, key) {
+	const style = node.style ? parseCSSText(node.style) : void 0;
+	const preserveWhitespace = shouldPreserveWhitespace(node.text);
+	let element = node.text;
+	const format = node.format || 0;
+	for (const [flag, tag] of FORMAT_TAGS) if (format & flag) element = createElement(tag, { key: `${key}-${flag}` }, element);
+	if (style || preserveWhitespace) element = createElement("span", {
+		key,
+		style: {
+			...style,
+			...preserveWhitespace ? { whiteSpace: "break-spaces" } : void 0
+		}
+	}, element);
+	return element;
+}
+//#endregion
+export { renderTextNode };

package/es/renderer/engine/render-tree.js

@@ -0,0 +1,35 @@
+import { renderBuiltinNode } from "./render-builtin-node.js";
+import { renderTextNode } from "./render-text-node.js";
+import { $isElementNode, $isTextNode } from "lexical";
+//#region src/renderer/engine/render-tree.ts
+function isHeadlessRenderableNode(node) {
+	return typeof node.renderHeadless === "function";
+}
+function renderNode(node, registry, headingSlugs, overrides, key, renderContext) {
+	const type = node.getType();
+	if (type === "cursor") return null;
+	if ($isTextNode(node)) return renderTextNode(node.exportJSON(), key);
+	const serialized = node.exportJSON();
+	let children = null;
+	if ($isElementNode(node)) {
+		const childNodes = node.getChildren();
+		if (childNodes.length > 0) children = childNodes.map((child, i) => renderNode(child, registry, headingSlugs, overrides, `${key}-${i}`, renderContext));
+	}
+	const textContent = node.getTextContent ? node.getTextContent() : void 0;
+	const override = overrides?.[type];
+	if (override) return override(serialized, key, children);
+	if (isHeadlessRenderableNode(node)) {
+		const context = {
+			children,
+			extra: renderContext?.extra,
+			key,
+			variant: renderContext?.variant
+		};
+		return node.renderHeadless(context);
+	}
+	const renderer = registry.get(type);
+	if (renderer) return renderer(serialized, key, children);
+	return renderBuiltinNode(serialized, key, children, headingSlugs, textContent);
+}
+//#endregion
+export { renderNode };

package/es/renderer/engine/shiki.d.ts

@@ -0,0 +1,4 @@
+//#region src/renderer/engine/shiki.d.ts
+declare function loadLanguage(language: string): Promise<void>;
+//#endregion
+export { loadLanguage };

package/es/renderer/engine/shiki.js

@@ -0,0 +1,24 @@
+import { bundledLanguagesInfo } from "shiki";
+import { createHighlighterCoreSync, isSpecialLang } from "@shikijs/core";
+import { createJavaScriptRegexEngine } from "@shikijs/engine-javascript";
+//#region src/renderer/engine/shiki.ts
+let _highlighter = null;
+function getHighlighter() {
+	if (!_highlighter) _highlighter = createHighlighterCoreSync({
+		engine: createJavaScriptRegexEngine(),
+		langs: [],
+		themes: []
+	});
+	return _highlighter;
+}
+function isLanguageLoaded(language) {
+	if (isSpecialLang(language)) return true;
+	return getHighlighter().getLoadedLanguages().includes(language);
+}
+async function loadLanguage(language) {
+	if (isLanguageLoaded(language)) return;
+	const info = bundledLanguagesInfo.find((desc) => desc.id === language || desc.aliases?.includes(language));
+	if (info) await getHighlighter().loadLanguage(info.import());
+}
+//#endregion
+export { loadLanguage };

package/es/renderer/engine/utils.js

@@ -0,0 +1,16 @@
+//#region src/renderer/engine/utils.ts
+function parseCSSText(cssText) {
+	const style = {};
+	for (const part of cssText.split(";")) {
+		const colonIndex = part.indexOf(":");
+		if (colonIndex === -1) continue;
+		const prop = part.slice(0, colonIndex).trim();
+		const value = part.slice(colonIndex + 1).trim();
+		if (!prop || !value) continue;
+		const camelProp = prop.replaceAll(/-([a-z])/g, (_, c) => c.toUpperCase());
+		style[camelProp] = value;
+	}
+	return style;
+}
+//#endregion
+export { parseCSSText };

package/es/renderer/nodes/index.d.ts

@@ -0,0 +1,6 @@
+import { Klass, LexicalNode } from "lexical";
+
+//#region src/renderer/nodes/index.d.ts
+declare const rendererNodes: Array<Klass<LexicalNode>>;
+//#endregion
+export { rendererNodes };

package/es/renderer/nodes/index.js

@@ -0,0 +1,44 @@
+import { CursorNode } from "../../plugins/common/node/cursor.js";
+import { DiffNode } from "../../plugins/litexml/node/DiffNode.js";
+import { CodeMirrorNode } from "../../plugins/codemirror-block/node/CodeMirrorNode.js";
+import { CodeNode } from "../../plugins/code/node/code.js";
+import { HorizontalRuleNode } from "../../plugins/hr/node/HorizontalRuleNode.js";
+import { AutoLinkNode, LinkNode } from "../../plugins/link/node/LinkNode.js";
+import { PlaceholderBlockNode, PlaceholderNode } from "../../plugins/auto-complete/node/placeholderNode.js";
+import { FileNode } from "../../plugins/file/node/FileNode.js";
+import { BlockImageNode } from "../../plugins/image/node/block-image-node.js";
+import { ImageNode } from "../../plugins/image/node/image-node.js";
+import { LinkHighlightNode } from "../../plugins/link-highlight/node/link-highlight.js";
+import { MathBlockNode, MathInlineNode } from "../../plugins/math/node/index.js";
+import { MentionNode } from "../../plugins/mention/node/MentionNode.js";
+import { TableCellNode, TableNode, TableRowNode } from "@lexical/table";
+import { HeadingNode, QuoteNode } from "@lexical/rich-text";
+import { ListItemNode, ListNode } from "@lexical/list";
+//#region src/renderer/nodes/index.ts
+const rendererNodes = [
+	HeadingNode,
+	QuoteNode,
+	ListNode,
+	ListItemNode,
+	TableNode,
+	TableRowNode,
+	TableCellNode,
+	ImageNode,
+	BlockImageNode,
+	MathInlineNode,
+	MathBlockNode,
+	CodeMirrorNode,
+	HorizontalRuleNode,
+	MentionNode,
+	FileNode,
+	CodeNode,
+	LinkNode,
+	AutoLinkNode,
+	CursorNode,
+	DiffNode,
+	LinkHighlightNode,
+	PlaceholderNode,
+	PlaceholderBlockNode
+];
+//#endregion
+export { rendererNodes };

package/es/renderer/renderers/codeblock.js

@@ -0,0 +1,21 @@
+"use client";
+import { renderMermaidBlock } from "./mermaid.js";
+import { Highlighter } from "@lobehub/ui";
+import { jsx } from "react/jsx-runtime";
+//#region src/renderer/renderers/codeblock.tsx
+function CodeBlockRenderer({ node }) {
+	const language = node.language || "";
+	const code = node.code || "";
+	return /* @__PURE__ */ jsx(Highlighter, {
+		defaultExpand: true,
+		language: language || "text",
+		variant: "filled",
+		children: code
+	});
+}
+function renderCodeBlock(node, key) {
+	if ((node.language || "").toLowerCase() === "mermaid") return renderMermaidBlock(node, key);
+	return /* @__PURE__ */ jsx(CodeBlockRenderer, { node }, key);
+}
+//#endregion
+export { renderCodeBlock };

package/es/renderer/renderers/file.js

@@ -0,0 +1,29 @@
+import { styles } from "../../plugins/file/react/style.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/renderer/renderers/file.tsx
+function renderFile(node, key) {
+	const { name, fileUrl, status, message } = node;
+	const cls = styles.file;
+	if (status === "error") return /* @__PURE__ */ jsxs("span", {
+		className: cls,
+		"data-file-status": "error",
+		children: [
+			name,
+			": ",
+			message || "Upload failed"
+		]
+	}, key);
+	if (status === "pending" || !fileUrl) return /* @__PURE__ */ jsx("span", {
+		className: cls,
+		"data-file-status": "pending",
+		children: name
+	}, key);
+	return /* @__PURE__ */ jsx("a", {
+		className: cls,
+		download: name,
+		href: fileUrl,
+		children: name
+	}, key);
+}
+//#endregion
+export { renderFile };

package/es/renderer/renderers/horizontalrule.js

@@ -0,0 +1,29 @@
+import { createElement } from "react";
+import { createStaticStyles } from "antd-style";
+//#region src/renderer/renderers/horizontalrule.tsx
+const useStyles = createStaticStyles(({ css, cssVar }) => css`
+    display: flex;
+    align-items: center;
+
+    width: 100%;
+    height: calc(var(--lobe-markdown-margin-multiple) * 1em);
+    margin-block: calc(var(--lobe-markdown-margin-multiple) * 1em);
+
+    hr {
+      width: 100%;
+      border-color: ${cssVar.colorBorder};
+      border-style: dashed;
+      border-width: 1px;
+      border-block-start: none;
+      border-inline-start: none;
+      border-inline-end: none;
+    }
+  `);
+function renderHR(_node, key) {
+	return createElement("div", {
+		className: useStyles,
+		key
+	}, createElement("hr"));
+}
+//#endregion
+export { renderHR };

package/es/renderer/renderers/image.js

@@ -0,0 +1,35 @@
+import { getBlockImageClassName, getImageClassName } from "../style.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/renderer/renderers/image.tsx
+function renderImage(node, key) {
+	const { src, altText, width, height, maxWidth } = node;
+	const style = {};
+	if (maxWidth) style.maxWidth = maxWidth;
+	if (width && width !== "inherit") style.width = width;
+	if (height && height !== "inherit") style.height = height;
+	return /* @__PURE__ */ jsx("span", {
+		className: getImageClassName(),
+		children: /* @__PURE__ */ jsx("img", {
+			alt: altText || "",
+			src,
+			style
+		})
+	}, key);
+}
+function renderBlockImage(node, key) {
+	const { src, altText, width, height, maxWidth } = node;
+	const style = {};
+	if (maxWidth) style.maxWidth = maxWidth;
+	if (width && width !== "inherit") style.width = width;
+	if (height && height !== "inherit") style.height = height;
+	return /* @__PURE__ */ jsx("figure", {
+		className: getBlockImageClassName(),
+		children: /* @__PURE__ */ jsx("img", {
+			alt: altText || "",
+			src,
+			style
+		})
+	}, key);
+}
+//#endregion
+export { renderBlockImage, renderImage };

package/es/renderer/renderers/index.d.ts

@@ -0,0 +1,6 @@
+import { RendererRegistry } from "../types.js";
+
+//#region src/renderer/renderers/index.d.ts
+declare function createDefaultRenderers(): RendererRegistry;
+//#endregion
+export { createDefaultRenderers };

package/es/renderer/renderers/index.js

@@ -0,0 +1,21 @@
+import { renderCodeBlock } from "./codeblock.js";
+import { renderFile } from "./file.js";
+import { renderHR } from "./horizontalrule.js";
+import { renderBlockImage, renderImage } from "./image.js";
+import { renderMath } from "./math.js";
+import { renderMention } from "./mention.js";
+//#region src/renderer/renderers/index.ts
+function createDefaultRenderers() {
+	return new Map([
+		["image", renderImage],
+		["block-image", renderBlockImage],
+		["math", renderMath],
+		["mathBlock", renderMath],
+		["code", renderCodeBlock],
+		["horizontalrule", renderHR],
+		["mention", renderMention],
+		["file", renderFile]
+	]);
+}
+//#endregion
+export { createDefaultRenderers };

package/es/renderer/renderers/math.js

@@ -0,0 +1,19 @@
+import { getMathBlockClassName, getMathInlineClassName } from "../style.js";
+import { createElement } from "react";
+import katex from "katex";
+//#region src/renderer/renderers/math.tsx
+function renderMath(node, key) {
+	const code = node.code || "";
+	const displayMode = node.type === "mathBlock";
+	const html = katex.renderToString(code, {
+		displayMode,
+		throwOnError: false
+	});
+	return createElement(displayMode ? "div" : "span", {
+		className: displayMode ? getMathBlockClassName() : getMathInlineClassName(),
+		dangerouslySetInnerHTML: { __html: html },
+		key
+	});
+}
+//#endregion
+export { renderMath };

package/es/renderer/renderers/mention.js

@@ -0,0 +1,15 @@
+import { getMentionClassName } from "../style.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/renderer/renderers/mention.tsx
+function renderMention(node, key) {
+	const label = node.label || "";
+	return /* @__PURE__ */ jsx("span", {
+		className: getMentionClassName(),
+		children: /* @__PURE__ */ jsxs("span", {
+			className: "editor_mention",
+			children: ["@", label]
+		})
+	}, key);
+}
+//#endregion
+export { renderMention };

package/es/renderer/renderers/mermaid.js

@@ -0,0 +1,17 @@
+"use client";
+import { Mermaid } from "@lobehub/ui";
+import { jsx } from "react/jsx-runtime";
+//#region src/renderer/renderers/mermaid.tsx
+function renderMermaidBlock(node, key) {
+	return /* @__PURE__ */ jsx(Mermaid, {
+		animated: false,
+		defaultExpand: true,
+		fullFeatured: true,
+		style: { width: "100%" },
+		theme: "lobe-theme",
+		variant: "filled",
+		children: node.code || ""
+	}, key);
+}
+//#endregion
+export { renderMermaidBlock };

package/es/renderer/style.js

@@ -0,0 +1,52 @@
+import { styles } from "../plugins/common/react/style.js";
+import { styles as styles$1 } from "../plugins/image/react/style.js";
+import { styles as styles$2 } from "../plugins/list/react/style.js";
+import { styles as styles$3 } from "../plugins/math/react/style.js";
+import { styles as styles$4 } from "../plugins/mention/react/style.js";
+import { styles as styles$5 } from "../plugins/table/react/style.js";
+import { createStaticStyles, cx } from "antd-style";
+//#region src/renderer/style.ts
+const tableHeaderFix = createStaticStyles(({ css, cssVar }) => css`
+    .editor_table > tbody > tr:first-of-type {
+      background: ${cssVar.colorFillQuaternary};
+
+      .editor_table_cell_header {
+        font-weight: bold;
+      }
+    }
+  `);
+function getRendererClassName(className) {
+	return cx(styles.root, styles.variant, className);
+}
+function getListClassName(listType) {
+	return cx(listType === "number" ? "editor_listOrdered" : "editor_listUnordered", styles$2);
+}
+function getTableWrapperClassName() {
+	return cx("editor_table_scrollable_wrapper", styles$5, tableHeaderFix);
+}
+function getMathInlineClassName() {
+	return styles$3.mathInline;
+}
+function getMathBlockClassName() {
+	return styles$3.mathBlock;
+}
+function getImageClassName() {
+	return styles$1.image;
+}
+function getBlockImageClassName() {
+	return styles$1.blockImage;
+}
+function getMentionClassName() {
+	return cx("editor_mention", styles$4.mention);
+}
+function getCSSVariables(variant) {
+	const isChat = variant === "chat";
+	return {
+		"--common-font-size": `${isChat ? 14 : 16}px`,
+		"--common-header-multiple": String(isChat ? .25 : .6),
+		"--common-line-height": String(isChat ? 1.4 : 1.6),
+		"--common-margin-multiple": String(isChat ? 1 : 2)
+	};
+}
+//#endregion
+export { getBlockImageClassName, getCSSVariables, getImageClassName, getListClassName, getMathBlockClassName, getMathInlineClassName, getMentionClassName, getRendererClassName, getTableWrapperClassName };