@cozeloop/prompt-components 0.0.2 → 0.0.3

package/dist/lib/basic-editor/extensions/validation.js

@@ -0,0 +1,118 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var validation_exports = {};
+__export(validation_exports, {
+  Validation: () => Validation,
+  default: () => validation_default
+});
+module.exports = __toCommonJS(validation_exports);
+var import_react = require("react");
+var import_react2 = require("@coze-editor/editor/react");
+var import_editor = require("@coze-editor/editor");
+var import_consts = require("../../consts");
+var import_validation = __toESM(require("./validation.module"));
+function validate(text) {
+  const regex = new RegExp(`^[a-zA-Z][\\w]{0,${import_consts.VARIABLE_MAX_LEN - 1}}$`, "gm");
+  if (regex.test(text)) {
+    return true;
+  }
+  return false;
+}
+function Validation({
+  variables,
+  isNormalTemplate
+}) {
+  const injector = (0, import_react2.useInjector)();
+  (0, import_react.useLayoutEffect)(
+    () => injector.inject([
+      import_editor.astDecorator.whole.of((cursor, state) => {
+        var _a, _b, _c, _d;
+        if (cursor.name === "JinjaExpression" && ((_a = cursor.node.firstChild) == null ? void 0 : _a.name) === "JinjaExpressionStart" && ((_b = cursor.node.lastChild) == null ? void 0 : _b.name) === "JinjaExpressionEnd") {
+          const from = cursor.node.firstChild.to;
+          const to = cursor.node.lastChild.from;
+          const text = state.sliceDoc(from, to);
+          if (validate(text) && isNormalTemplate) {
+            return {
+              type: "className",
+              className: import_validation.default.valid,
+              from,
+              to
+            };
+          }
+          if (!isNormalTemplate) {
+            const item = variables == null ? void 0 : variables.find((variable) => variable.key === text);
+            if (item) {
+              return {
+                type: "className",
+                className: import_validation.default.valid,
+                from,
+                to
+              };
+            }
+          }
+          return {
+            type: "className",
+            className: import_validation.default.invalid,
+            from,
+            to
+          };
+        }
+        if (cursor.name === "JinjaStatement" && ((_c = cursor.node.firstChild) == null ? void 0 : _c.name) === "JinjaStatementStart" && ((_d = cursor.node.lastChild) == null ? void 0 : _d.name) === "JinjaStatementEnd" && !isNormalTemplate) {
+          const from = cursor.node.firstChild.to;
+          const to = cursor.node.lastChild.from;
+          const text = state.sliceDoc(from, to);
+          return (variables || []).map((variable) => {
+            if (variable.key) {
+              const index = text.indexOf(variable.key);
+              if (index !== -1) {
+                return {
+                  type: "className",
+                  className: import_validation.default.valid,
+                  from: from + index,
+                  to: from + index + variable.key.length + 1
+                };
+              }
+            }
+            return void 0;
+          }).filter(
+            (item) => item !== void 0
+          );
+        }
+        return void 0;
+      })
+    ]),
+    [injector, variables]
+  );
+  return null;
+}
+var validation_default = Validation;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Validation
+});

package/dist/lib/basic-editor/extensions/validation.module.js

@@ -0,0 +1,25 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var validation_exports = {};
+__export(validation_exports, {
+  default: () => validation_default
+});
+module.exports = __toCommonJS(validation_exports);
+var import_validation_module = require("./validation_module.css");
+var validation_default = { "valid": "valid_5e57b", "invalid": "invalid_5e57b" };

package/dist/lib/basic-editor/extensions/validation_module.css

@@ -0,0 +1,7 @@
+.valid_5e57b {
+  color: var(--Green-COZColorGreen7, #00A136);
+}
+
+.invalid_5e57b {
+  color: #0607094D;
+}

package/dist/lib/basic-editor/extensions/variable.js

@@ -0,0 +1,190 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var variable_exports = {};
+__export(variable_exports, {
+  default: () => variable_default
+});
+module.exports = __toCommonJS(variable_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_react2 = require("@coze-editor/editor/react");
+var import_coze_design = require("@coze-arch/coze-design");
+function Variable({
+  variables,
+  isGoTemplate
+}) {
+  const [posKey, setPosKey] = (0, import_react.useState)("");
+  const [visible, setVisible] = (0, import_react.useState)(false);
+  const [position, setPosition] = (0, import_react.useState)(-1);
+  const editor = (0, import_react2.useEditor)();
+  function insert(variableName) {
+    const range = (0, import_react2.getCurrentMentionReplaceRange)(editor.$view.state);
+    if (!range) {
+      return;
+    }
+    editor.replaceText(__spreadProps(__spreadValues({}, range), {
+      text: isGoTemplate ? `{{.${variableName}}}` : `{{${variableName}}}`,
+      cursorOffset: variableName ? 0 : -2
+    }));
+    setVisible(false);
+  }
+  function handleOpenChange(e) {
+    setPosition(e.state.selection.main.head);
+    setVisible(e.value && variables.length > 0);
+  }
+  (0, import_react.useEffect)(() => {
+    if (!editor) {
+      return;
+    }
+    if (visible) {
+      editor.disableKeybindings(["ArrowUp", "ArrowDown", "Enter"]);
+    } else {
+      editor.disableKeybindings([]);
+    }
+  }, [editor, visible]);
+  const selectedIndex = usePopoverNavigation({
+    enable: visible,
+    variables,
+    onApply: insert
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_react2.Mention,
+      {
+        trigger: (tr) => {
+          if (tr.docChanged) {
+            let context = void 0;
+            tr.changes.iterChanges((fromA, toA, fromB, toB, inserted) => {
+              if (fromA > 0 && // 新增，非替换
+              fromA === toA && // 新增内容为 {
+              inserted.toString() === "{}" && // { 前还有个 {
+              tr.state.sliceDoc(
+                Math.max(0, fromA - 1),
+                Math.max(0, fromA)
+              ) === "{") {
+                context = {
+                  from: fromB - 1,
+                  to: toB + 1,
+                  triggerCharacter: "{{",
+                  cursorPosition: tr.state.selection.main.head
+                };
+              }
+            });
+            return context;
+          }
+          return void 0;
+        },
+        onOpenChange: handleOpenChange
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_coze_design.Popover,
+      {
+        visible,
+        trigger: "custom",
+        position: "topLeft",
+        rePosKey: posKey,
+        content: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "p-1 min-w-[100px] flex flex-col gap-1", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_coze_design.Typography.Text, { type: "secondary", strong: true, children: "插入变量" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "max-h-[200px] overflow-y-auto", children: variables.map((variable, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "div",
+            {
+              className: `cursor-pointer hover:bg-gray-100 px-2 py-1 mb-0.5 rounded ${selectedIndex === index ? "!bg-gray-200" : ""}`,
+              onMouseDown: (e) => e.preventDefault(),
+              onClick: () => (variable == null ? void 0 : variable.key) && insert(variable.key),
+              children: variable.key
+            },
+            variable.key
+          )) })
+        ] }),
+        onClickOutSide: () => setVisible(false),
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_react2.PositionMirror,
+          {
+            position,
+            onChange: () => setPosKey(String(Math.random()))
+          }
+        )
+      }
+    )
+  ] });
+}
+function usePopoverNavigation(options) {
+  const { enable, variables, onApply } = options;
+  const [selectedIndex, setSelectedIndex] = (0, import_react.useState)(0);
+  const indexRef = (0, import_react2.useLatest)(selectedIndex);
+  const variablesRef = (0, import_react2.useLatest)([...variables, { key: "" }]);
+  const onApplyRef = (0, import_react2.useLatest)(onApply);
+  (0, import_react.useEffect)(() => {
+    setSelectedIndex(0);
+  }, [enable]);
+  (0, import_react.useEffect)(() => {
+    if (!enable) {
+      return;
+    }
+    function handleNavigation(e) {
+      switch (e.key) {
+        case "ArrowUp":
+          setSelectedIndex((prevIndex) => {
+            const nextIndex = prevIndex - 1;
+            return Math.max(0, nextIndex);
+          });
+          break;
+        case "ArrowDown":
+          setSelectedIndex((prevIndex) => {
+            const nextIndex = prevIndex + 1;
+            return Math.min(variablesRef.current.length - 1, nextIndex);
+          });
+          break;
+        case "Enter": {
+          const variableName = variablesRef.current[indexRef.current];
+          if (variableName) {
+            onApplyRef.current(variableName.key || "");
+          }
+          break;
+        }
+        default:
+          break;
+      }
+    }
+    document.addEventListener("keydown", handleNavigation, false);
+    return () => {
+      document.removeEventListener("keydown", handleNavigation, false);
+    };
+  }, [enable]);
+  return selectedIndex;
+}
+var variable_default = Variable;

package/dist/lib/basic-editor/index.js

@@ -0,0 +1,193 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var basic_editor_exports = {};
+__export(basic_editor_exports, {
+  PromptBasicEditor: () => PromptBasicEditor
+});
+module.exports = __toCommonJS(basic_editor_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_react2 = require("@coze-editor/editor/react");
+var import_preset_prompt = __toESM(require("@coze-editor/editor/preset-prompt"));
+var import_view = require("@codemirror/view");
+var import_state = require("@codemirror/state");
+var import_commands = require("@codemirror/commands");
+var import_variable = __toESM(require("./extensions/variable"));
+var import_validation = __toESM(require("./extensions/validation"));
+var import_search = require("./extensions/search");
+var import_markdown = __toESM(require("./extensions/markdown"));
+var import_language_support = __toESM(require("./extensions/language-support"));
+var import_keymap = require("./extensions/keymap");
+var import_jinja = __toESM(require("./extensions/jinja"));
+var import_go_template = require("./extensions/go-template");
+const extensions = [
+  import_view.EditorView.theme({
+    ".cm-gutters": {
+      backgroundColor: "transparent",
+      borderRight: "none"
+    },
+    ".cm-scroller": {
+      paddingLeft: "10px",
+      paddingRight: "6px !important"
+    }
+  }),
+  import_state.Prec.high(import_view.keymap.of([{ key: "Tab", run: import_keymap.insertFourSpaces }, import_commands.indentWithTab]))
+];
+const PromptBasicEditor = (0, import_react.forwardRef)(
+  ({
+    defaultValue,
+    onChange,
+    variables,
+    height,
+    minHeight,
+    maxHeight,
+    fontSize = 13,
+    forbidJinjaHighlight,
+    forbidVariables,
+    readOnly,
+    linePlaceholder = "请输入内容，支持按此格式书写变量：{{USER_NAME}}",
+    customExtensions = [],
+    autoScrollToBottom,
+    onBlur,
+    isGoTemplate,
+    onFocus,
+    canSearch,
+    children,
+    isJinja2Template
+  }, ref) => {
+    const editorRef = (0, import_react.useRef)(null);
+    (0, import_react.useImperativeHandle)(ref, () => ({
+      setEditorValue: (value) => {
+        var _a;
+        const editor = editorRef.current;
+        if (!editor) {
+          return;
+        }
+        (_a = editor == null ? void 0 : editor.setValue) == null ? void 0 : _a.call(editor, value || "");
+      },
+      insertText: (text) => {
+        const editor = editorRef.current;
+        if (!editor) {
+          return;
+        }
+        const range = editor.getSelection();
+        if (!range) {
+          return;
+        }
+        editor.replaceText(__spreadProps(__spreadValues({}, range), {
+          text,
+          cursorOffset: 0
+        }));
+      }
+    }));
+    const newExtensions = (0, import_react.useMemo)(() => {
+      const xExtensions = [...extensions, ...customExtensions];
+      const searchExt = canSearch ? [...(0, import_search.search)()] : [];
+      if (isGoTemplate) {
+        return [...xExtensions, import_go_template.goExtension, ...searchExt];
+      }
+      return [...xExtensions, ...searchExt];
+    }, [customExtensions, extensions, isGoTemplate, canSearch]);
+    (0, import_react.useEffect)(() => {
+      if (isJinja2Template || isGoTemplate) {
+        setTimeout(() => {
+          var _a;
+          (_a = editorRef.current) == null ? void 0 : _a.updateWholeDecorations();
+        }, 150);
+      }
+    }, [variables, isJinja2Template, isGoTemplate]);
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react2.EditorProvider, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_react2.Renderer,
+        {
+          plugins: import_preset_prompt.default,
+          defaultValue,
+          options: {
+            editable: !readOnly,
+            readOnly,
+            height,
+            minHeight: minHeight || height,
+            maxHeight: maxHeight || height,
+            fontSize
+          },
+          onChange: (e) => onChange == null ? void 0 : onChange(e.value),
+          onFocus,
+          onBlur,
+          extensions: newExtensions,
+          didMount: (editor) => {
+            editorRef.current = editor;
+            if (autoScrollToBottom) {
+              editor.$view.dispatch({
+                effects: import_view.EditorView.scrollIntoView(
+                  editor.$view.state.doc.length
+                )
+              });
+            }
+          }
+        }
+      ),
+      !forbidVariables && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_variable.default, { variables: variables || [], isGoTemplate }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_language_support.default, {}),
+      !forbidJinjaHighlight && !isGoTemplate && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_validation.default,
+          {
+            variables,
+            isNormalTemplate: !isJinja2Template && !isGoTemplate
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jinja.default, { isJinja2Template })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_markdown.default, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react2.Placeholder, { children: linePlaceholder }),
+      children
+    ] });
+  }
+);
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  PromptBasicEditor
+});

package/dist/lib/code-editor/code-editor.js

@@ -0,0 +1,117 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var code_editor_exports = {};
+__export(code_editor_exports, {
+  CodeEditor: () => CodeEditor
+});
+module.exports = __toCommonJS(code_editor_exports);
+var import_react = require("@coze-editor/editor/react");
+var import_preset_code = __toESM(require("@coze-editor/editor/preset-code"));
+var import_language_shell = require("@coze-editor/editor/language-shell");
+var import_language_json = require("@coze-editor/editor/language-json");
+var import_editor = require("@coze-editor/editor");
+var import_view = require("@codemirror/view");
+var import_coze_light = require("./themes/coze-light");
+var import_coze_dark = require("./themes/coze-dark");
+import_preset_code.languages.register("json", {
+  // mixLanguages 用于解决 「插值也使用了括号，导致无法正确高亮」的问题
+  language: (0, import_editor.mixLanguages)({
+    outerLanguage: import_language_json.json.language
+  }),
+  languageService: import_language_json.json.languageService
+});
+import_preset_code.languages.register("shell", import_language_shell.shell);
+import_preset_code.themes.register("coze-light", import_coze_light.cozeLight);
+import_preset_code.themes.register("coze-dark", import_coze_dark.cozeDark);
+const minHeightOption = (value) => import_view.EditorView.theme({
+  ".cm-content, .cm-gutter, .cm-right-gutter": {
+    minHeight: typeof value === "number" ? `${value}px` : typeof value === "string" ? value : "unset"
+  },
+  "&.cm-editor": {
+    minHeight: typeof value === "number" ? `${value}px` : typeof value === "string" ? value : "unset"
+  }
+});
+const maxHeightOption = (value) => import_view.EditorView.theme({
+  "&.cm-editor": {
+    maxHeight: typeof value === "number" ? `${value}px` : typeof value === "string" ? value : "unset"
+  }
+});
+const heightOption = (value) => import_view.EditorView.theme({
+  "&.cm-editor": {
+    height: typeof value === "number" ? `${value}px` : typeof value === "string" ? value : "unset"
+  }
+});
+const paddingOption = (value) => import_view.EditorView.theme({
+  "&.cm-editor": {
+    padding: typeof value === "number" ? `${value}px` : typeof value === "string" ? value : "unset"
+  }
+});
+const borderRadiusOption = (value) => import_view.EditorView.theme({
+  "&.cm-editor, .cm-gutters": {
+    borderRadius: typeof value === "number" ? `${value}px` : typeof value === "string" ? value : "unset"
+  }
+});
+const lineHeightOption = (value) => import_view.EditorView.theme({
+  ".cm-content, .cm-gutter, .cm-right-gutter": {
+    lineHeight: typeof value === "number" ? `${value}px` : typeof value === "string" ? value : "unset"
+  }
+});
+function createStyleOptions() {
+  return [
+    (0, import_react.option)("minHeight", minHeightOption),
+    (0, import_react.option)("maxHeight", maxHeightOption),
+    (0, import_react.option)("editerHeight", heightOption),
+    (0, import_react.option)("borderRadius", borderRadiusOption),
+    (0, import_react.option)("padding", paddingOption),
+    (0, import_react.option)("lineHeight", lineHeightOption)
+  ];
+}
+const builtinExtensions = [
+  import_view.EditorView.theme({
+    "&.cm-focused": {
+      outline: "none"
+    },
+    "& *": {
+      fontFamily: 'Menlo, Monaco, "Courier New", monospace'
+    }
+  }),
+  import_view.EditorView.theme({
+    "&.cm-content": {
+      wordBreak: "break-all"
+    }
+  })
+];
+const CodeEditor = (0, import_react.createRenderer)(
+  [...import_preset_code.default, ...createStyleOptions()],
+  builtinExtensions
+);
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  CodeEditor
+});