@lobehub/editor 4.15.1 → 4.16.0

package/es/_virtual/_rolldown/runtime.js

@@ -0,0 +1,28 @@
+//#region \0rolldown/runtime.js
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __esmMin = (fn, res) => () => (fn && (res = fn(fn = 0)), res);
+var __exportAll = (all, no_symbols) => {
+	let target = {};
+	for (var name in all) __defProp(target, name, {
+		get: all[name],
+		enumerable: true
+	});
+	if (!no_symbols) __defProp(target, Symbol.toStringTag, { value: "Module" });
+	return target;
+};
+var __copyProps = (to, from, except, desc) => {
+	if (from && typeof from === "object" || typeof from === "function") for (var keys = __getOwnPropNames(from), i = 0, n = keys.length, key; i < n; i++) {
+		key = keys[i];
+		if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+			get: ((k) => from[k]).bind(null, key),
+			enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+		});
+	}
+	return to;
+};
+var __toCommonJS = (mod) => __hasOwnProp.call(mod, "module.exports") ? mod["module.exports"] : __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+//#endregion
+export { __esmMin, __exportAll, __toCommonJS };

package/es/codemirror/components/CopyButton.d.ts

@@ -0,0 +1,7 @@
+import { CopyButtonProps } from "../types.js";
+import { FC } from "react";
+
+//#region src/codemirror/components/CopyButton.d.ts
+declare const CopyButton: FC<CopyButtonProps>;
+//#endregion
+export { CopyButton };

package/es/codemirror/components/CopyButton.js

@@ -0,0 +1,24 @@
+"use client";
+import { ActionIcon } from "@lobehub/ui";
+import { Check, CopyIcon } from "lucide-react";
+import { useState } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/codemirror/components/CopyButton.tsx
+const CopyButton = ({ onCopy, labels, className }) => {
+	const [copied, setCopied] = useState(false);
+	return /* @__PURE__ */ jsx(ActionIcon, {
+		active: copied,
+		className: className ?? "cm-hidden-actions",
+		icon: copied ? Check : CopyIcon,
+		onClick: () => {
+			setCopied(true);
+			onCopy();
+			setTimeout(() => setCopied(false), 1e3);
+		},
+		size: "small",
+		title: labels?.copy ?? "Copy"
+	});
+};
+CopyButton.displayName = "CopyButton";
+//#endregion
+export { CopyButton };

package/es/codemirror/components/LanguageSelect.d.ts

@@ -0,0 +1,7 @@
+import { LanguageSelectProps } from "../types.js";
+import { FC } from "react";
+
+//#region src/codemirror/components/LanguageSelect.d.ts
+declare const LanguageSelect: FC<LanguageSelectProps>;
+//#endregion
+export { LanguageSelect };

package/es/codemirror/components/LanguageSelect.js

@@ -0,0 +1,59 @@
+"use client";
+import { LANGUAGES } from "../constants.js";
+import { styles } from "./style.js";
+import { Flexbox, MaterialFileTypeIcon, Select, Text } from "@lobehub/ui";
+import { useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cx } from "antd-style";
+//#region src/codemirror/components/LanguageSelect.tsx
+const LanguageSelect = ({ selectedLang, onLanguageChange, options, labels, className }) => {
+	const modes = options ?? LANGUAGES;
+	const languageOptions = useMemo(() => modes.map((mode) => ({
+		aliases: mode.ext || [],
+		label: /* @__PURE__ */ jsxs(Flexbox, {
+			align: "center",
+			gap: 4,
+			horizontal: true,
+			children: [/* @__PURE__ */ jsx(MaterialFileTypeIcon, {
+				fallbackUnknownType: false,
+				filename: mode.ext?.[0] ? `*.${mode.ext[0]}` : `*.${mode.value}`,
+				size: 18,
+				type: "file",
+				variant: "raw"
+			}), /* @__PURE__ */ jsx(Text, {
+				ellipsis: true,
+				fontSize: 13,
+				children: mode.name
+			})]
+		}),
+		title: mode.ext?.length ? mode.ext.map((ext) => `*.${ext}`).join(",") : `*.${mode.value}`,
+		value: mode.value
+	})), [modes]);
+	return /* @__PURE__ */ jsx(Flexbox, {
+		align: "center",
+		className: cx("cm-language-select", className),
+		gap: 4,
+		horizontal: true,
+		onClick: (e) => e.stopPropagation(),
+		children: /* @__PURE__ */ jsx(Select, {
+			className: cx(styles.container),
+			filterOption: (input, option) => {
+				const lang = input.toLowerCase();
+				if ((option?.value)?.toLowerCase().startsWith(lang)) return true;
+				if (String(option?.label).toLowerCase().includes(lang)) return true;
+				if (option?.aliases?.some((ext) => ext.toLowerCase().startsWith(lang))) return true;
+				return false;
+			},
+			onChange: onLanguageChange,
+			options: languageOptions,
+			placeholder: labels?.selectLanguage ?? "Select language",
+			showSearch: true,
+			size: "small",
+			value: selectedLang,
+			variant: "borderless"
+		})
+	});
+};
+LanguageSelect.displayName = "LanguageSelect";
+//#endregion
+export { LanguageSelect };

package/es/codemirror/components/MoreOptions.d.ts

@@ -0,0 +1,7 @@
+import { MoreOptionsProps } from "../types.js";
+import { FC } from "react";
+
+//#region src/codemirror/components/MoreOptions.d.ts
+declare const MoreOptions: FC<MoreOptionsProps>;
+//#endregion
+export { MoreOptions };

package/es/codemirror/components/MoreOptions.js

@@ -0,0 +1,66 @@
+"use client";
+import { ActionIcon, Flexbox, InputNumber, Popover, Text } from "@lobehub/ui";
+import { MoreHorizontalIcon } from "lucide-react";
+import { useCallback } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Switch } from "antd";
+//#region src/codemirror/components/MoreOptions.tsx
+const MoreOptions = ({ tabSize, onTabSizeChange, useTabs, onUseTabsChange, showLineNumbers, onShowLineNumbersChange, labels }) => {
+	const handleTabSizeChange = useCallback((value = 2) => {
+		onTabSizeChange(value === null ? 2 : value);
+	}, [onTabSizeChange]);
+	return /* @__PURE__ */ jsx(Popover, {
+		arrow: false,
+		content: /* @__PURE__ */ jsxs(Flexbox, {
+			gap: 8,
+			style: { minWidth: 240 },
+			children: [
+				/* @__PURE__ */ jsxs(Flexbox, {
+					align: "center",
+					gap: 8,
+					horizontal: true,
+					justify: "space-between",
+					children: [/* @__PURE__ */ jsx(Text, { children: labels?.tabSize ?? "Tab size" }), /* @__PURE__ */ jsx(InputNumber, {
+						max: 8,
+						min: 1,
+						onChange: handleTabSizeChange,
+						size: "small",
+						value: tabSize
+					})]
+				}),
+				/* @__PURE__ */ jsxs(Flexbox, {
+					align: "center",
+					gap: 8,
+					horizontal: true,
+					justify: "space-between",
+					children: [/* @__PURE__ */ jsx(Text, { children: labels?.useTabs ?? "Use tabs" }), /* @__PURE__ */ jsx(Switch, {
+						checked: useTabs,
+						onChange: onUseTabsChange,
+						size: "small"
+					})]
+				}),
+				/* @__PURE__ */ jsxs(Flexbox, {
+					align: "center",
+					gap: 8,
+					horizontal: true,
+					justify: "space-between",
+					children: [/* @__PURE__ */ jsx(Text, { children: labels?.showLineNumbers ?? "Show line numbers" }), /* @__PURE__ */ jsx(Switch, {
+						checked: showLineNumbers,
+						onChange: onShowLineNumbersChange,
+						size: "small"
+					})]
+				})
+			]
+		}),
+		placement: "bottomRight",
+		trigger: "click",
+		children: /* @__PURE__ */ jsx(ActionIcon, {
+			className: "cm-hidden-actions",
+			icon: MoreHorizontalIcon,
+			size: "small"
+		})
+	});
+};
+MoreOptions.displayName = "MoreOptions";
+//#endregion
+export { MoreOptions };

package/es/codemirror/components/Toolbar.d.ts

@@ -0,0 +1,7 @@
+import { ToolbarProps } from "../types.js";
+import { FC } from "react";
+
+//#region src/codemirror/components/Toolbar.d.ts
+declare const Toolbar: FC<ToolbarProps>;
+//#endregion
+export { Toolbar };

package/es/codemirror/components/Toolbar.js

@@ -0,0 +1,51 @@
+"use client";
+import { CopyButton } from "./CopyButton.js";
+import { LanguageSelect } from "./LanguageSelect.js";
+import { MoreOptions } from "./MoreOptions.js";
+import { ActionIcon, Flexbox } from "@lobehub/ui";
+import { ChevronDown, ChevronRight } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/codemirror/components/Toolbar.tsx
+const Toolbar = ({ selectedLang, onLanguageChange, onCopy, tabSize, onTabSizeChange, useTabs, onUseTabsChange, showLineNumbers, onShowLineNumbersChange, onClick, expand, toggleExpand, labels, languageOptions }) => {
+	return /* @__PURE__ */ jsxs(Flexbox, {
+		align: "center",
+		className: "cm-header-toolbar",
+		horizontal: true,
+		justify: "space-between",
+		onClick,
+		padding: 4,
+		children: [/* @__PURE__ */ jsx(LanguageSelect, {
+			labels,
+			onLanguageChange,
+			options: languageOptions,
+			selectedLang
+		}), /* @__PURE__ */ jsxs(Flexbox, {
+			gap: 4,
+			horizontal: true,
+			onClick: (e) => e.stopPropagation(),
+			children: [
+				/* @__PURE__ */ jsx(MoreOptions, {
+					labels,
+					onShowLineNumbersChange,
+					onTabSizeChange,
+					onUseTabsChange,
+					showLineNumbers,
+					tabSize,
+					useTabs
+				}),
+				/* @__PURE__ */ jsx(CopyButton, {
+					labels,
+					onCopy
+				}),
+				/* @__PURE__ */ jsx(ActionIcon, {
+					icon: expand ? ChevronDown : ChevronRight,
+					onClick: toggleExpand,
+					size: "small"
+				})
+			]
+		})]
+	});
+};
+Toolbar.displayName = "Toolbar";
+//#endregion
+export { Toolbar };

package/es/codemirror/components/style.js

@@ -0,0 +1,7 @@
+import { createStaticStyles } from "antd-style";
+//#region src/codemirror/components/style.ts
+const styles = createStaticStyles(({ css }) => ({ container: css`
+    min-width: 160px;
+  ` }));
+//#endregion
+export { styles };

package/es/codemirror/constants.d.ts

@@ -0,0 +1,6 @@
+import { CodeMirrorMode } from "./types.js";
+
+//#region src/codemirror/constants.d.ts
+declare const LANGUAGES: CodeMirrorMode[];
+//#endregion
+export { LANGUAGES };