@fuma-content/studio 0.1.0

package/dist/src/components/editor/ui/block-list.mjs

@@ -0,0 +1,47 @@
+"use client";
+
+import { cn } from "../../../lib/utils.mjs";
+import { Checkbox } from "../../ui/checkbox.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useReadOnly } from "platejs/react";
+import { isOrderedList } from "@platejs/list";
+import { useTodoListElement, useTodoListElementState } from "@platejs/list/react";
+
+//#region src/components/editor/ui/block-list.tsx
+const config = { todo: {
+	Li: TodoLi,
+	Marker: TodoMarker
+} };
+const BlockList = (props) => {
+	if (!props.element.listStyleType) return;
+	return (props$1) => /* @__PURE__ */ jsx(List, { ...props$1 });
+};
+function List(props) {
+	const { listStart, listStyleType } = props.element;
+	const { Li, Marker } = config[listStyleType] ?? {};
+	return /* @__PURE__ */ jsxs(isOrderedList(props.element) ? "ol" : "ul", {
+		className: "relative m-0 p-0",
+		style: { listStyleType },
+		start: listStart,
+		children: [Marker && /* @__PURE__ */ jsx(Marker, { ...props }), Li ? /* @__PURE__ */ jsx(Li, { ...props }) : /* @__PURE__ */ jsx("li", { children: props.children })]
+	});
+}
+function TodoMarker(props) {
+	const { checkboxProps } = useTodoListElement(useTodoListElementState({ element: props.element }));
+	return /* @__PURE__ */ jsx("div", {
+		contentEditable: false,
+		children: /* @__PURE__ */ jsx(Checkbox, {
+			className: cn("-left-6 absolute top-1", useReadOnly() && "pointer-events-none"),
+			...checkboxProps
+		})
+	});
+}
+function TodoLi(props) {
+	return /* @__PURE__ */ jsx("li", {
+		className: cn("list-none", props.element.checked && "text-muted-foreground line-through"),
+		children: props.children
+	});
+}
+
+//#endregion
+export { BlockList };

package/dist/src/components/editor/ui/block-selection.mjs

@@ -0,0 +1,28 @@
+"use client";
+
+import { jsx } from "react/jsx-runtime";
+import { usePluginOption } from "platejs/react";
+import { useBlockSelected } from "@platejs/selection/react";
+import { cva } from "class-variance-authority";
+import { DndPlugin } from "@platejs/dnd";
+
+//#region src/components/editor/ui/block-selection.tsx
+const blockSelectionVariants = cva("pointer-events-none absolute inset-0 z-1 bg-brand/[.13] transition-opacity", {
+	defaultVariants: { active: true },
+	variants: { active: {
+		false: "opacity-0",
+		true: "opacity-100"
+	} }
+});
+function BlockSelection(props) {
+	const isBlockSelected = useBlockSelected();
+	const isDragging = usePluginOption(DndPlugin, "isDragging");
+	if (!isBlockSelected || props.plugin.key === "tr" || props.plugin.key === "table") return null;
+	return /* @__PURE__ */ jsx("div", {
+		className: blockSelectionVariants({ active: isBlockSelected && !isDragging }),
+		"data-slot": "block-selection"
+	});
+}
+
+//#endregion
+export { BlockSelection, blockSelectionVariants };

package/dist/src/components/editor/ui/block-suggestion.mjs

@@ -0,0 +1,319 @@
+"use client";
+
+import { Button } from "../../ui/button.mjs";
+import { suggestionPlugin } from "../plugins/suggestion-kit.mjs";
+import { Avatar, AvatarFallback, AvatarImage } from "../../ui/avatar.mjs";
+import { Comment, CommentCreateForm, formatCommentDate } from "./comment.mjs";
+import { discussionPlugin } from "../plugins/discussion-kit.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEditorPlugin, usePluginOption } from "platejs/react";
+import * as React$1 from "react";
+import { ElementApi, KEYS, PathApi, TextApi } from "platejs";
+import { acceptSuggestion, getSuggestionKey, keyId2SuggestionId, rejectSuggestion } from "@platejs/suggestion";
+import { CheckIcon, XIcon } from "lucide-react";
+import { SuggestionPlugin } from "@platejs/suggestion/react";
+
+//#region src/components/editor/ui/block-suggestion.tsx
+const BLOCK_SUGGESTION = "__block__";
+const TYPE_TEXT_MAP = {
+	[KEYS.audio]: () => "Audio",
+	[KEYS.blockquote]: () => "Blockquote",
+	[KEYS.callout]: () => "Callout",
+	[KEYS.codeBlock]: () => "Code Block",
+	[KEYS.column]: () => "Column",
+	[KEYS.equation]: () => "Equation",
+	[KEYS.file]: () => "File",
+	[KEYS.h1]: () => "Heading 1",
+	[KEYS.h2]: () => "Heading 2",
+	[KEYS.h3]: () => "Heading 3",
+	[KEYS.h4]: () => "Heading 4",
+	[KEYS.h5]: () => "Heading 5",
+	[KEYS.h6]: () => "Heading 6",
+	[KEYS.hr]: () => "Horizontal Rule",
+	[KEYS.img]: () => "Image",
+	[KEYS.mediaEmbed]: () => "Media",
+	[KEYS.p]: (node) => {
+		if (node?.[KEYS.listType] === KEYS.listTodo) return "Todo List";
+		if (node?.[KEYS.listType] === KEYS.ol) return "Ordered List";
+		if (node?.[KEYS.listType] === KEYS.ul) return "List";
+		return "Paragraph";
+	},
+	[KEYS.table]: () => "Table",
+	[KEYS.toc]: () => "Table of Contents",
+	[KEYS.toggle]: () => "Toggle",
+	[KEYS.video]: () => "Video"
+};
+function BlockSuggestionCard({ idx, isLast, suggestion }) {
+	const { api, editor } = useEditorPlugin(SuggestionPlugin);
+	const userInfo = usePluginOption(discussionPlugin, "user", suggestion.userId);
+	const accept = (suggestion$1) => {
+		api.suggestion.withoutSuggestions(() => {
+			acceptSuggestion(editor, suggestion$1);
+		});
+	};
+	const reject = (suggestion$1) => {
+		api.suggestion.withoutSuggestions(() => {
+			rejectSuggestion(editor, suggestion$1);
+		});
+	};
+	const [hovering, setHovering] = React$1.useState(false);
+	const suggestionText2Array = (text) => {
+		if (text === BLOCK_SUGGESTION) return ["line breaks"];
+		return text.split(BLOCK_SUGGESTION).filter(Boolean);
+	};
+	const [editingId, setEditingId] = React$1.useState(null);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "relative",
+		onMouseEnter: () => setHovering(true),
+		onMouseLeave: () => setHovering(false),
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex flex-col p-4",
+			children: [
+				/* @__PURE__ */ jsxs("div", {
+					className: "relative flex items-center",
+					children: [
+						/* @__PURE__ */ jsxs(Avatar, {
+							className: "size-5",
+							children: [/* @__PURE__ */ jsx(AvatarImage, {
+								alt: userInfo?.name,
+								src: userInfo?.avatarUrl
+							}), /* @__PURE__ */ jsx(AvatarFallback, { children: userInfo?.name?.[0] })]
+						}),
+						/* @__PURE__ */ jsx("h4", {
+							className: "mx-2 font-semibold text-sm leading-none",
+							children: userInfo?.name
+						}),
+						/* @__PURE__ */ jsx("div", {
+							className: "text-muted-foreground/80 text-xs leading-none",
+							children: /* @__PURE__ */ jsx("span", {
+								className: "mr-1",
+								children: formatCommentDate(new Date(suggestion.createdAt))
+							})
+						})
+					]
+				}),
+				/* @__PURE__ */ jsx("div", {
+					className: "relative mt-1 mb-4 pl-[32px]",
+					children: /* @__PURE__ */ jsxs("div", {
+						className: "flex flex-col gap-2",
+						children: [
+							suggestion.type === "remove" && suggestionText2Array(suggestion.text).map((text, index) => /* @__PURE__ */ jsxs("div", {
+								className: "flex items-center gap-2",
+								children: [/* @__PURE__ */ jsx("span", {
+									className: "text-muted-foreground text-sm",
+									children: "Delete:"
+								}), /* @__PURE__ */ jsx("span", {
+									className: "text-sm",
+									children: text
+								}, index)]
+							}, index)),
+							suggestion.type === "insert" && suggestionText2Array(suggestion.newText).map((text, index) => /* @__PURE__ */ jsxs("div", {
+								className: "flex items-center gap-2",
+								children: [/* @__PURE__ */ jsx("span", {
+									className: "text-muted-foreground text-sm",
+									children: "Add:"
+								}), /* @__PURE__ */ jsx("span", {
+									className: "text-sm",
+									children: text || "line breaks"
+								}, index)]
+							}, index)),
+							suggestion.type === "replace" && /* @__PURE__ */ jsxs("div", {
+								className: "flex flex-col gap-2",
+								children: [suggestionText2Array(suggestion.newText).map((text, index) => /* @__PURE__ */ jsx(React$1.Fragment, { children: /* @__PURE__ */ jsxs("div", {
+									className: "flex items-start gap-2 text-brand/80",
+									children: [/* @__PURE__ */ jsx("span", {
+										className: "text-sm",
+										children: "with:"
+									}), /* @__PURE__ */ jsx("span", {
+										className: "text-sm",
+										children: text || "line breaks"
+									})]
+								}, index) }, index)), suggestionText2Array(suggestion.text).map((text, index) => /* @__PURE__ */ jsx(React$1.Fragment, { children: /* @__PURE__ */ jsxs("div", {
+									className: "flex items-start gap-2",
+									children: [/* @__PURE__ */ jsx("span", {
+										className: "text-muted-foreground text-sm",
+										children: index === 0 ? "Replace:" : "Delete:"
+									}), /* @__PURE__ */ jsx("span", {
+										className: "text-sm",
+										children: text || "line breaks"
+									})]
+								}, index) }, index))]
+							}),
+							suggestion.type === "update" && /* @__PURE__ */ jsxs("div", {
+								className: "flex items-center gap-2",
+								children: [/* @__PURE__ */ jsxs("span", {
+									className: "text-muted-foreground text-sm",
+									children: [Object.keys(suggestion.properties).map((key) => /* @__PURE__ */ jsxs("span", { children: ["Un", key] }, key)), Object.keys(suggestion.newProperties).map((key) => /* @__PURE__ */ jsx("span", { children: key.charAt(0).toUpperCase() + key.slice(1) }, key))]
+								}), /* @__PURE__ */ jsx("span", {
+									className: "text-sm",
+									children: suggestion.newText
+								})]
+							})
+						]
+					})
+				}),
+				suggestion.comments.map((comment, index) => /* @__PURE__ */ jsx(Comment, {
+					comment,
+					discussionLength: suggestion.comments.length,
+					documentContent: "__suggestion__",
+					editingId,
+					index,
+					setEditingId
+				}, comment.id ?? index)),
+				hovering && /* @__PURE__ */ jsxs("div", {
+					className: "absolute top-4 right-4 flex gap-2",
+					children: [/* @__PURE__ */ jsx(Button, {
+						variant: "ghost",
+						className: "size-6 p-1 text-muted-foreground",
+						onClick: () => accept(suggestion),
+						children: /* @__PURE__ */ jsx(CheckIcon, { className: "size-4" })
+					}), /* @__PURE__ */ jsx(Button, {
+						variant: "ghost",
+						className: "size-6 p-1 text-muted-foreground",
+						onClick: () => reject(suggestion),
+						children: /* @__PURE__ */ jsx(XIcon, { className: "size-4" })
+					})]
+				}),
+				/* @__PURE__ */ jsx(CommentCreateForm, { discussionId: suggestion.suggestionId })
+			]
+		}), !isLast && /* @__PURE__ */ jsx("div", { className: "h-px w-full bg-muted" })]
+	}, `${suggestion.suggestionId}-${idx}`);
+}
+const useResolveSuggestion = (suggestionNodes, blockPath) => {
+	const discussions = usePluginOption(discussionPlugin, "discussions");
+	const { api, editor, getOption, setOption } = useEditorPlugin(suggestionPlugin);
+	suggestionNodes.forEach(([node]) => {
+		const id = api.suggestion.nodeId(node);
+		const map = getOption("uniquePathMap");
+		if (!id) return;
+		const previousPath = map.get(id);
+		if (PathApi.isPath(previousPath)) {
+			const nodes = api.suggestion.node({
+				id,
+				at: previousPath,
+				isText: true
+			});
+			const parentNode = api.node(previousPath);
+			let lineBreakId = null;
+			if (parentNode && ElementApi.isElement(parentNode[0])) lineBreakId = api.suggestion.nodeId(parentNode[0]) ?? null;
+			if (!nodes && lineBreakId !== id) setOption("uniquePathMap", new Map(map).set(id, blockPath));
+		} else setOption("uniquePathMap", new Map(map).set(id, blockPath));
+	});
+	return React$1.useMemo(() => {
+		const map = getOption("uniquePathMap");
+		if (suggestionNodes.length === 0) return [];
+		const suggestionIds = new Set(suggestionNodes.flatMap(([node]) => {
+			if (TextApi.isText(node)) {
+				const dataList = api.suggestion.dataList(node);
+				if (!dataList.some((data) => data.type === "update")) return api.suggestion.nodeId(node) ?? [];
+				return dataList.filter((data) => data.type === "update").map((d) => d.id);
+			}
+			if (ElementApi.isElement(node)) return api.suggestion.nodeId(node) ?? [];
+			return [];
+		}).filter(Boolean));
+		const res = [];
+		suggestionIds.forEach((id) => {
+			if (!id) return;
+			const path = map.get(id);
+			if (!path || !PathApi.isPath(path)) return;
+			if (!PathApi.equals(path, blockPath)) return;
+			const entries = [...editor.api.nodes({
+				at: [],
+				mode: "all",
+				match: (n) => n[KEYS.suggestion] && n[getSuggestionKey(id)] || api.suggestion.nodeId(n) === id
+			})];
+			entries.sort(([, path1], [, path2]) => PathApi.isChild(path1, path2) ? -1 : 1);
+			let newText = "";
+			let text = "";
+			let properties = {};
+			let newProperties = {};
+			entries.forEach(([node]) => {
+				if (TextApi.isText(node)) api.suggestion.dataList(node).forEach((data) => {
+					if (data.id === id) switch (data.type) {
+						case "insert":
+							newText += node.text;
+							break;
+						case "remove":
+							text += node.text;
+							break;
+						case "update":
+							properties = {
+								...properties,
+								...data.properties
+							};
+							newProperties = {
+								...newProperties,
+								...data.newProperties
+							};
+							newText += node.text;
+							break;
+					}
+				});
+				else {
+					const lineBreakData = api.suggestion.isBlockSuggestion(node) ? node.suggestion : void 0;
+					if (lineBreakData?.id === keyId2SuggestionId(id)) {
+						if (lineBreakData.type === "insert") newText += lineBreakData.isLineBreak ? BLOCK_SUGGESTION : BLOCK_SUGGESTION + TYPE_TEXT_MAP[node.type](node);
+						else if (lineBreakData.type === "remove") text += lineBreakData.isLineBreak ? BLOCK_SUGGESTION : BLOCK_SUGGESTION + TYPE_TEXT_MAP[node.type](node);
+					}
+				}
+			});
+			if (entries.length === 0) return;
+			const nodeData = api.suggestion.suggestionData(entries[0][0]);
+			if (!nodeData) return;
+			const comments = discussions.find((s) => s.id === id)?.comments || [];
+			const createdAt = new Date(nodeData.createdAt);
+			const keyId = getSuggestionKey(id);
+			if (nodeData.type === "update") res.push({
+				comments,
+				createdAt,
+				keyId,
+				newProperties,
+				newText,
+				properties,
+				suggestionId: keyId2SuggestionId(id),
+				type: "update",
+				userId: nodeData.userId
+			});
+			else if (newText.length > 0 && text.length > 0) res.push({
+				comments,
+				createdAt,
+				keyId,
+				newText,
+				suggestionId: keyId2SuggestionId(id),
+				text,
+				type: "replace",
+				userId: nodeData.userId
+			});
+			else if (newText.length > 0) res.push({
+				comments,
+				createdAt,
+				keyId,
+				newText,
+				suggestionId: keyId2SuggestionId(id),
+				type: "insert",
+				userId: nodeData.userId
+			});
+			else if (text.length > 0) res.push({
+				comments,
+				createdAt,
+				keyId,
+				suggestionId: keyId2SuggestionId(id),
+				text,
+				type: "remove",
+				userId: nodeData.userId
+			});
+		});
+		return res;
+	}, [
+		api.suggestion,
+		blockPath,
+		discussions,
+		editor.api,
+		getOption,
+		suggestionNodes
+	]);
+};
+const isResolvedSuggestion = (suggestion) => "suggestionId" in suggestion;
+
+//#endregion
+export { BlockSuggestionCard, isResolvedSuggestion, useResolveSuggestion };

package/dist/src/components/editor/ui/blockquote-node-static.mjs

@@ -0,0 +1,14 @@
+import { jsx } from "react/jsx-runtime";
+import { SlateElement } from "platejs/static";
+
+//#region src/components/editor/ui/blockquote-node-static.tsx
+function BlockquoteElementStatic(props) {
+	return /* @__PURE__ */ jsx(SlateElement, {
+		as: "blockquote",
+		className: "my-1 border-l-2 pl-6 italic",
+		...props
+	});
+}
+
+//#endregion
+export { BlockquoteElementStatic };

package/dist/src/components/editor/ui/blockquote-node.mjs

@@ -0,0 +1,16 @@
+"use client";
+
+import { jsx } from "react/jsx-runtime";
+import { PlateElement } from "platejs/react";
+
+//#region src/components/editor/ui/blockquote-node.tsx
+function BlockquoteElement(props) {
+	return /* @__PURE__ */ jsx(PlateElement, {
+		as: "blockquote",
+		className: "my-1 border-l-2 pl-6 italic",
+		...props
+	});
+}
+
+//#endregion
+export { BlockquoteElement };

package/dist/src/components/editor/ui/callout-node-static.mjs

@@ -0,0 +1,29 @@
+import { cn } from "../../../lib/utils.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { SlateElement } from "platejs/static";
+
+//#region src/components/editor/ui/callout-node-static.tsx
+function CalloutElementStatic({ children, className, ...props }) {
+	return /* @__PURE__ */ jsx(SlateElement, {
+		className: cn("my-1 flex rounded-sm bg-muted p-4 pl-3", className),
+		style: { backgroundColor: props.element.backgroundColor },
+		...props,
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "flex w-full gap-2 rounded-md",
+			children: [/* @__PURE__ */ jsx("div", {
+				className: "size-6 select-none text-[18px]",
+				style: { fontFamily: "\"Apple Color Emoji\", \"Segoe UI Emoji\", NotoColorEmoji, \"Noto Color Emoji\", \"Segoe UI Symbol\", \"Android Emoji\", EmojiSymbols" },
+				children: /* @__PURE__ */ jsx("span", {
+					"data-plate-prevent-deserialization": true,
+					children: props.element.icon || "💡"
+				})
+			}), /* @__PURE__ */ jsx("div", {
+				className: "w-full",
+				children
+			})]
+		})
+	});
+}
+
+//#endregion
+export { CalloutElementStatic };

package/dist/src/components/editor/ui/callout-node.mjs

@@ -0,0 +1,50 @@
+"use client";
+
+import { cn } from "../../../lib/utils.mjs";
+import { Button } from "../../ui/button.mjs";
+import { EmojiPicker, EmojiPopover } from "./emoji-toolbar-button.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { PlateElement } from "platejs/react";
+import { useCalloutEmojiPicker } from "@platejs/callout/react";
+import { useEmojiDropdownMenuState } from "@platejs/emoji/react";
+
+//#region src/components/editor/ui/callout-node.tsx
+function CalloutElement({ attributes, children, className, ...props }) {
+	const { emojiPickerState, isOpen, setIsOpen } = useEmojiDropdownMenuState({ closeOnSelect: true });
+	const { emojiToolbarDropdownProps, props: calloutProps } = useCalloutEmojiPicker({
+		isOpen,
+		setIsOpen
+	});
+	return /* @__PURE__ */ jsx(PlateElement, {
+		className: cn("my-1 flex rounded-sm bg-muted p-4 pl-3", className),
+		style: { backgroundColor: props.element.backgroundColor },
+		attributes: {
+			...attributes,
+			"data-plate-open-context-menu": true
+		},
+		...props,
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "flex w-full gap-2 rounded-md",
+			children: [/* @__PURE__ */ jsx(EmojiPopover, {
+				...emojiToolbarDropdownProps,
+				control: /* @__PURE__ */ jsx(Button, {
+					variant: "ghost",
+					className: "size-6 select-none p-1 text-[18px] hover:bg-muted-foreground/15",
+					style: { fontFamily: "\"Apple Color Emoji\", \"Segoe UI Emoji\", NotoColorEmoji, \"Noto Color Emoji\", \"Segoe UI Symbol\", \"Android Emoji\", EmojiSymbols" },
+					contentEditable: false,
+					children: props.element.icon || "💡"
+				}),
+				children: /* @__PURE__ */ jsx(EmojiPicker, {
+					...emojiPickerState,
+					...calloutProps
+				})
+			}), /* @__PURE__ */ jsx("div", {
+				className: "w-full",
+				children
+			})]
+		})
+	});
+}
+
+//#endregion
+export { CalloutElement };

package/dist/src/components/editor/ui/caption.mjs

@@ -0,0 +1,39 @@
+"use client";
+
+import { cn } from "../../../lib/utils.mjs";
+import { Button } from "../../ui/button.mjs";
+import { jsx } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { Caption, CaptionTextarea, useCaptionButton, useCaptionButtonState } from "@platejs/caption/react";
+
+//#region src/components/editor/ui/caption.tsx
+const captionVariants = cva("max-w-full", {
+	defaultVariants: { align: "center" },
+	variants: { align: {
+		center: "mx-auto",
+		left: "mr-auto",
+		right: "ml-auto"
+	} }
+});
+function Caption$1({ align, className, ...props }) {
+	return /* @__PURE__ */ jsx(Caption, {
+		...props,
+		className: cn(captionVariants({ align }), className)
+	});
+}
+function CaptionTextarea$1(props) {
+	return /* @__PURE__ */ jsx(CaptionTextarea, {
+		...props,
+		className: cn("mt-2 w-full resize-none border-none bg-inherit p-0 font-[inherit] text-inherit", "focus:outline-none focus:placeholder:opacity-0", "text-center print:placeholder:text-transparent", props.className)
+	});
+}
+function CaptionButton(props) {
+	const state = useCaptionButtonState();
+	return /* @__PURE__ */ jsx(Button, {
+		...props,
+		...useCaptionButton(state)
+	});
+}
+
+//#endregion
+export { Caption$1 as Caption, CaptionButton, CaptionTextarea$1 as CaptionTextarea };

package/dist/src/components/editor/ui/code-block-node-static.mjs

@@ -0,0 +1,30 @@
+import { jsx } from "react/jsx-runtime";
+import { SlateElement, SlateLeaf } from "platejs/static";
+
+//#region src/components/editor/ui/code-block-node-static.tsx
+function CodeBlockElementStatic(props) {
+	return /* @__PURE__ */ jsx(SlateElement, {
+		className: "py-1 **:[.hljs-addition]:bg-[#f0fff4] **:[.hljs-addition]:text-[#22863a] dark:**:[.hljs-addition]:bg-[#3c5743] dark:**:[.hljs-addition]:text-[#ceead5] **:[.hljs-attr,.hljs-attribute,.hljs-literal,.hljs-meta,.hljs-number,.hljs-operator,.hljs-selector-attr,.hljs-selector-class,.hljs-selector-id,.hljs-variable]:text-[#005cc5] dark:**:[.hljs-attr,.hljs-attribute,.hljs-literal,.hljs-meta,.hljs-number,.hljs-operator,.hljs-selector-attr,.hljs-selector-class,.hljs-selector-id,.hljs-variable]:text-[#6596cf] **:[.hljs-built\\\\\\\\_in,.hljs-symbol]:text-[#e36209] dark:**:[.hljs-built\\\\\\\\_in,.hljs-symbol]:text-[#c3854e] **:[.hljs-bullet]:text-[#735c0f] **:[.hljs-comment,.hljs-code,.hljs-formula]:text-[#6a737d] dark:**:[.hljs-comment,.hljs-code,.hljs-formula]:text-[#6a737d] **:[.hljs-deletion]:bg-[#ffeef0] **:[.hljs-deletion]:text-[#b31d28] dark:**:[.hljs-deletion]:bg-[#473235] dark:**:[.hljs-deletion]:text-[#e7c7cb] **:[.hljs-emphasis]:italic **:[.hljs-keyword,.hljs-doctag,.hljs-template-tag,.hljs-template-variable,.hljs-type,.hljs-variable.language\\\\\\\\_]:text-[#d73a49] dark:**:[.hljs-keyword,.hljs-doctag,.hljs-template-tag,.hljs-template-variable,.hljs-type,.hljs-variable.language\\\\\\\\_]:text-[#ee6960] **:[.hljs-name,.hljs-quote,.hljs-selector-tag,.hljs-selector-pseudo]:text-[#22863a] dark:**:[.hljs-name,.hljs-quote,.hljs-selector-tag,.hljs-selector-pseudo]:text-[#36a84f] **:[.hljs-regexp,.hljs-string,.hljs-meta_.hljs-string]:text-[#032f62] dark:**:[.hljs-regexp,.hljs-string,.hljs-meta_.hljs-string]:text-[#3593ff] **:[.hljs-section]:font-bold **:[.hljs-section]:text-[#005cc5] dark:**:[.hljs-section]:text-[#61a5f2] **:[.hljs-strong]:font-bold **:[.hljs-title,.hljs-title.class\\\\\\\\_,.hljs-title.class\\\\\\\\_.inherited\\\\\\\\_\\\\\\\\_,.hljs-title.function\\\\\\\\_]:text-[#6f42c1] dark:**:[.hljs-title,.hljs-title.class\\\\\\\\_,.hljs-title.class\\\\\\\\_.inherited\\\\\\\\_\\\\\\\\_,.hljs-title.function\\\\\\\\_]:text-[#a77bfa]",
+		...props,
+		children: /* @__PURE__ */ jsx("div", {
+			className: "relative rounded-md bg-muted/50",
+			children: /* @__PURE__ */ jsx("pre", {
+				className: "overflow-x-auto p-8 pr-4 font-mono text-sm leading-[normal] [tab-size:2] print:break-inside-avoid",
+				children: /* @__PURE__ */ jsx("code", { children: props.children })
+			})
+		})
+	});
+}
+function CodeLineElementStatic(props) {
+	return /* @__PURE__ */ jsx(SlateElement, { ...props });
+}
+function CodeSyntaxLeafStatic(props) {
+	const tokenClassName = props.leaf.className;
+	return /* @__PURE__ */ jsx(SlateLeaf, {
+		className: tokenClassName,
+		...props
+	});
+}
+
+//#endregion
+export { CodeBlockElementStatic, CodeLineElementStatic, CodeSyntaxLeafStatic };