import { cn } from "../../utils/cn.mjs";
import { Suspense } from "react";
import { jsx } from "react/jsx-runtime";
import { transformerMetaHighlight, transformerMetaWordHighlight, transformerNotationDiff, transformerNotationErrorLevel, transformerNotationHighlight, transformerNotationWordHighlight } from "@shikijs/transformers";
import { codeToHtml } from "shiki/bundle/web";

//#region src/components/IDE/CodeBlockServer.tsx
const CodeBlockShiki = (async ({ children, lang, isDarkMode, onChange, ...props }) => {
	return /* @__PURE__ */ jsx("div", {
		dangerouslySetInnerHTML: { __html: await codeToHtml(children, {
			lang,
			theme: isDarkMode ? "github-dark" : "github-light",
			transformers: [
				transformerNotationDiff(),
				transformerNotationHighlight(),
				transformerNotationWordHighlight(),
				transformerNotationErrorLevel(),
				transformerMetaHighlight(),
				transformerMetaWordHighlight()
			]
		}) },
		...props,
		style: { backgroundColor: "transparent" }
	});
});
const CodeDefault = ({ children, isEditable, isDarkMode, onChange, ...props }) => /* @__PURE__ */ jsx("div", {
	contentEditable: isEditable,
	...props,
	children: /* @__PURE__ */ jsx("pre", { children: /* @__PURE__ */ jsx("code", { children: typeof children === "string" ? children.split("\n").map((line, index) => /* @__PURE__ */ jsx("span", {
		className: "line block w-full",
		children: line
	}, index)) : children }) })
});
const CodeBlock = ({ className, onChange, isEditable, ...props }) => /* @__PURE__ */ jsx(Suspense, {
	fallback: /* @__PURE__ */ jsx(CodeDefault, { ...props }),
	children: /* @__PURE__ */ jsx(CodeBlockShiki, {
		className: cn("flex w-full", className),
		contentEditable: isEditable,
		onInput: (e) => onChange?.(e.currentTarget.textContent ?? ""),
		...props
	})
});

//#endregion
export { CodeBlock, CodeBlockShiki };
//# sourceMappingURL=CodeBlockServer.mjs.map