import { j as jsxRuntimeExports } from "../../../../../_virtual/jsx-runtime.js";
import { useDraftHelpers } from "../../../../../use-page-data.js";
import TextEditor, { DatasourceItemButton } from "../../shared/components/TextEditor.js";
import { useRef } from "react";
import { tx as D, css as E } from "../../../../style-system/dist/twind.js";
import { useDebounceCallback } from "../../../../../node_modules/.pnpm/usehooks-ts@3.1.1_react@19.1.1/node_modules/usehooks-ts/dist/index.js";
import "../../../../../node_modules/.pnpm/@formkit_auto-animate@0.8.2/node_modules/@formkit/auto-animate/index.js";
import "../../../../../node_modules/.pnpm/react-hot-toast@2.5.2_react-dom@19.1.1_react@19.1.1__react@19.1.1/node_modules/react-hot-toast/dist/index.js";
import { RiBracesLine } from "../../../../../node_modules/.pnpm/react-icons@5.5.0_react@19.1.1/node_modules/react-icons/ri/index.js";
import { insertInEditor, getEditorNodeFromField } from "../../shared/utils/editor-utils.js";
import { IconButton as o } from "../../../../../node_modules/.pnpm/@radix-ui_themes@3.2.1_@types_react-dom@19.1.9_@types_react@19.1.13__@types_react@19.1._832fa1fef691e6e9510ada03948dc85c/node_modules/@radix-ui/themes/dist/esm/components/icon-button.js";
function useTextEditorUpdateHandler(brickId, propPath, dynamic = false, enabled = true) {
  const helpers = useDraftHelpers();
  if (!enabled) {
    return;
  }
  return (e) => {
    console.log("Updating text editor props", brickId, propPath);
    if (dynamic) {
      helpers.updateBrickProps(brickId, {
        [propPath]: e.editor.getText()
      });
    } else {
      helpers.updateBrickProps(brickId, { [propPath]: e.editor.getHTML() });
    }
  };
}
function useDynamicTextEditor({
  currentValue,
  brickId,
  schema,
  onChange,
  placeholder
}) {
  const textEditorRef = useRef(null);
  const onChangeDebounced = useDebounceCallback(onChange, 300);
  return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
    /* @__PURE__ */ jsxRuntimeExports.jsx(
      "div",
      {
        className: D(
          "rounded border border-gray-300 px-2 py-[4px] text-sm flex-grow max-w-[calc(100%-34px)] bg-white",
          E({
            "&:has([contenteditable='true']:focus)": {
              outline: "1px solid var(--violet-8)",
              borderColor: "var(--violet-8)"
            }
          })
        ),
        children: /* @__PURE__ */ jsxRuntimeExports.jsx(
          TextEditor,
          {
            content: currentValue,
            brickId,
            ref: textEditorRef,
            className: D(
              E({ lineHeight: "1.5" }),
              schema["ui:multiline"] && `scrollbar-thin ${schema["ui:textarea-class"] ?? "min-h-24"}`
            ),
            placeholder: schema["ui:placeholder"] ?? placeholder,
            spellCheck: !!schema["ui:spellcheck"],
            singleline: true,
            noMenuBar: true,
            dynamic: true,
            onChange: (e) => {
              onChangeDebounced(e.editor.getText());
            }
          }
        )
      }
    ),
    /* @__PURE__ */ jsxRuntimeExports.jsx(
      DatasourceItemButton,
      {
        brickId,
        onFieldClick: (field) => {
          if (textEditorRef.current?.editor) {
            insertInEditor(textEditorRef.current.editor, getEditorNodeFromField(field));
          }
        },
        children: /* @__PURE__ */ jsxRuntimeExports.jsx(o, { variant: "surface", radius: "large", className: "!w-[31px] !h-[31px]", children: /* @__PURE__ */ jsxRuntimeExports.jsx(RiBracesLine, { className: "w-4 h-4" }) })
      }
    )
  ] });
}
export {
  useDynamicTextEditor,
  useTextEditorUpdateHandler
};
//# sourceMappingURL=use-editable-text.js.map
