"use client";
import { jsx } from "react/jsx-runtime";
import { cx } from "@emotion/css";
import { getBox } from "css-box-model";
import isHotkey from "is-hotkey";
import {
  forwardRef,
  useCallback,
  useEffect,
  useImperativeHandle,
  useMemo,
  useState
} from "react";
import { createEditor } from "slate";
import { Slate as SlateReact, Editable, withReact, ReactEditor } from "slate-react";
import { Slate, richTextDTOtoDAO } from "@makeswift/controls";
import { useBuilderEditMode } from "../../..";
import { withBlock, withTypography, withBuilder, onKeyDown } from "../../../../../slate";
import { BuilderEditMode } from "../../../../../state/modules/builder-edit-mode";
import { pollBoxModel } from "../../../poll-box-model";
import { Element, Leaf } from "../components";
import { useSyncDOMSelection } from "./useSyncDOMSelection";
import { useSyncWithBuilder } from "./useSyncWithBuilder";
const defaultText = [
  { type: Slate.BlockType.Paragraph, children: [{ text: "" }] }
];
const EditableText = forwardRef(function EditableText2({ id, text, width, margin }, ref) {
  const [editor] = useState(() => withBlock(withTypography(withBuilder(withReact(createEditor())))));
  const [isPreservingDOMSElection, setIsPreservingDOMSelection] = useState(false);
  useSyncDOMSelection(editor, isPreservingDOMSElection);
  const delaySync = useSyncWithBuilder(editor, text);
  const editMode = useBuilderEditMode();
  const [propControllers, setPropControllers] = useState(null);
  const controller = propControllers?.text;
  useEffect(() => {
    if (controller == null)
      return;
    const element = ReactEditor.toDOMNode(editor, editor);
    return pollBoxModel({
      element,
      onBoxModelChange: (boxModel) => controller.changeBoxModel(boxModel)
    });
  }, [editor, controller]);
  useImperativeHandle(
    ref,
    () => ({
      getDomNode() {
        return ReactEditor.toDOMNode(editor, editor);
      },
      getBoxModel() {
        return getBox(ReactEditor.toDOMNode(editor, editor));
      },
      setPropControllers
    }),
    [editor, setPropControllers]
  );
  const initialValue = useMemo(() => text ? richTextDTOtoDAO(text) : defaultText, [text]);
  useEffect(() => {
    controller?.setSlateEditor(editor);
  }, [controller, editor]);
  const handleFocus = useCallback(() => {
    controller?.focus();
    setIsPreservingDOMSelection(true);
  }, [controller]);
  const handleKeyDown = useCallback(
    (e) => {
      if (isHotkey("mod+shift+z", e))
        return controller?.redo();
      if (isHotkey("mod+z", e))
        return controller?.undo();
      if (isHotkey("escape")(e))
        return controller?.blur();
      onKeyDown(e, editor);
    },
    [controller, editor]
  );
  const handleBlur = useCallback((e) => {
    if (e.relatedTarget == null)
      return;
    setIsPreservingDOMSelection(false);
    ReactEditor.deselect(editor);
  }, []);
  return /* @__PURE__ */ jsx(SlateReact, { editor, value: initialValue, onChange: delaySync, children: /* @__PURE__ */ jsx(
    Editable,
    {
      id,
      renderLeaf: Leaf,
      renderElement: Element,
      onFocus: handleFocus,
      onKeyDown: handleKeyDown,
      onBlur: handleBlur,
      className: cx(width, margin),
      readOnly: editMode !== BuilderEditMode.CONTENT,
      placeholder: "Write some text..."
    }
  ) });
});
var editable_text_default = EditableText;
export {
  EditableText,
  editable_text_default as default
};
//# sourceMappingURL=editable-text.js.map