"use strict";
"use client";
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 editable_text_exports = {};
__export(editable_text_exports, {
  EditableText: () => EditableText,
  default: () => editable_text_default
});
module.exports = __toCommonJS(editable_text_exports);
var import_jsx_runtime = require("react/jsx-runtime");
var import_css = require("@emotion/css");
var import_css_box_model = require("css-box-model");
var import_is_hotkey = __toESM(require("is-hotkey"));
var import_react = require("react");
var import_slate = require("slate");
var import_slate_react = require("slate-react");
var import_controls = require("@makeswift/controls");
var import__ = require("../../..");
var import_slate2 = require("../../../../../slate");
var import_builder_edit_mode = require("../../../../../state/modules/builder-edit-mode");
var import_poll_box_model = require("../../../poll-box-model");
var import_components = require("../components");
var import_useSyncDOMSelection = require("./useSyncDOMSelection");
var import_useSyncWithBuilder = require("./useSyncWithBuilder");
const defaultText = [
  { type: import_controls.Slate.BlockType.Paragraph, children: [{ text: "" }] }
];
const EditableText = (0, import_react.forwardRef)(function EditableText2({ id, text, width, margin }, ref) {
  const [editor] = (0, import_react.useState)(() => (0, import_slate2.withBlock)((0, import_slate2.withTypography)((0, import_slate2.withBuilder)((0, import_slate_react.withReact)((0, import_slate.createEditor)())))));
  const [isPreservingDOMSElection, setIsPreservingDOMSelection] = (0, import_react.useState)(false);
  (0, import_useSyncDOMSelection.useSyncDOMSelection)(editor, isPreservingDOMSElection);
  const delaySync = (0, import_useSyncWithBuilder.useSyncWithBuilder)(editor, text);
  const editMode = (0, import__.useBuilderEditMode)();
  const [propControllers, setPropControllers] = (0, import_react.useState)(null);
  const controller = propControllers?.text;
  (0, import_react.useEffect)(() => {
    if (controller == null)
      return;
    const element = import_slate_react.ReactEditor.toDOMNode(editor, editor);
    return (0, import_poll_box_model.pollBoxModel)({
      element,
      onBoxModelChange: (boxModel) => controller.changeBoxModel(boxModel)
    });
  }, [editor, controller]);
  (0, import_react.useImperativeHandle)(
    ref,
    () => ({
      getDomNode() {
        return import_slate_react.ReactEditor.toDOMNode(editor, editor);
      },
      getBoxModel() {
        return (0, import_css_box_model.getBox)(import_slate_react.ReactEditor.toDOMNode(editor, editor));
      },
      setPropControllers
    }),
    [editor, setPropControllers]
  );
  const initialValue = (0, import_react.useMemo)(() => text ? (0, import_controls.richTextDTOtoDAO)(text) : defaultText, [text]);
  (0, import_react.useEffect)(() => {
    controller?.setSlateEditor(editor);
  }, [controller, editor]);
  const handleFocus = (0, import_react.useCallback)(() => {
    controller?.focus();
    setIsPreservingDOMSelection(true);
  }, [controller]);
  const handleKeyDown = (0, import_react.useCallback)(
    (e) => {
      if ((0, import_is_hotkey.default)("mod+shift+z", e))
        return controller?.redo();
      if ((0, import_is_hotkey.default)("mod+z", e))
        return controller?.undo();
      if ((0, import_is_hotkey.default)("escape")(e))
        return controller?.blur();
      (0, import_slate2.onKeyDown)(e, editor);
    },
    [controller, editor]
  );
  const handleBlur = (0, import_react.useCallback)((e) => {
    if (e.relatedTarget == null)
      return;
    setIsPreservingDOMSelection(false);
    import_slate_react.ReactEditor.deselect(editor);
  }, []);
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_slate_react.Slate, { editor, value: initialValue, onChange: delaySync, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
    import_slate_react.Editable,
    {
      id,
      renderLeaf: import_components.Leaf,
      renderElement: import_components.Element,
      onFocus: handleFocus,
      onKeyDown: handleKeyDown,
      onBlur: handleBlur,
      className: (0, import_css.cx)(width, margin),
      readOnly: editMode !== import_builder_edit_mode.BuilderEditMode.CONTENT,
      placeholder: "Write some text..."
    }
  ) });
});
var editable_text_default = EditableText;
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
  EditableText
});
//# sourceMappingURL=editable-text.js.map