"use client";
import { jsx } from "react/jsx-runtime";
import {
  useCallback,
  useEffect,
  useMemo,
  useRef,
  useState
} from "react";
import { createEditor } from "slate";
import isHotkey from "is-hotkey";
import {
  withReact,
  ReactEditor,
  Slate,
  Editable
} from "slate-react";
import {
  RichText
} from "../../../../../controls/rich-text-v2";
import { useBuilderEditMode } from "../../..";
import { BuilderEditMode } from "../../../../../state/modules/builder-edit-mode";
import { pollBoxModel } from "../../../poll-box-model";
import { withBuilder, withLocalChanges } from "../../../../../slate";
import { useSyncDOMSelection } from "./useSyncDOMSelection";
import { RichTextV2Element } from "./render-element";
import { RichTextV2Leaf } from "./render-leaf";
import { useSyncRemoteChanges } from "./useRemoteChanges";
import { defaultValue, usePresetValue } from "./usePresetValue";
function EditableTextV2({ text, definition, control }) {
  const plugins = useMemo(() => definition.config.plugins, [definition]);
  const [editor] = useState(
    () => plugins.reduceRight(
      (editor2, plugin) => plugin?.withPlugin?.(editor2) ?? editor2,
      withLocalChanges(withBuilder(withReact(createEditor())))
    )
  );
  useEffect(() => {
    if (control == null)
      return;
    const element = ReactEditor.toDOMNode(editor, editor);
    return pollBoxModel({
      element,
      onBoxModelChange: (boxModel) => control.changeBoxModel(boxModel)
    });
  }, [editor, control]);
  const isPreservingFocus = useRef(false);
  useSyncDOMSelection(editor, isPreservingFocus);
  const editMode = useBuilderEditMode();
  useEffect(() => {
    if (editMode !== BuilderEditMode.CONTENT) {
      isPreservingFocus.current = false;
      ReactEditor.deselect(editor);
    }
  }, [editMode]);
  useSyncRemoteChanges(editor, text);
  const presetValue = usePresetValue(definition);
  const initialValue = useMemo(
    () => (text && RichText.dataToNodes(text)) ?? presetValue,
    [text, presetValue]
  );
  useEffect(() => {
    control?.setEditor(editor);
    control?.setDefaultValue(defaultValue);
  }, [control, editor]);
  useEffect(() => {
    if (initialValue === presetValue) {
      control?.onLocalUserChange();
    }
  }, [control, initialValue, presetValue]);
  const renderElement = useCallback(
    (props) => {
      return /* @__PURE__ */ jsx(RichTextV2Element, { ...props, definition, plugins });
    },
    [plugins, definition]
  );
  const renderLeaf = useCallback(
    (props) => {
      return /* @__PURE__ */ jsx(RichTextV2Leaf, { ...props, definition, plugins });
    },
    [plugins, definition]
  );
  const handleFocus = useCallback(() => {
    isPreservingFocus.current = true;
    control?.select();
  }, [control]);
  const handleKeyDown = useCallback(
    (e) => {
      if (isHotkey("mod+shift+z", e))
        return control?.redo();
      if (isHotkey("mod+z", e))
        return control?.undo();
      if (isHotkey("escape")(e)) {
        isPreservingFocus.current = false;
        ReactEditor.blur(editor);
        control?.switchToBuildMode();
      }
      if (editMode === BuilderEditMode.CONTENT) {
        e.stopPropagation();
      }
      plugins.forEach((plugin) => plugin?.onKeyDown?.(e, editor));
    },
    [control, plugins, editor, editMode]
  );
  const handleKeyUp = useCallback(
    (e) => {
      if (editMode === BuilderEditMode.CONTENT) {
        e.stopPropagation();
        e.preventDefault();
      }
    },
    [control, editor, editMode]
  );
  const handleClick = useCallback(
    (e) => {
      if (editMode === BuilderEditMode.CONTENT) {
        e.stopPropagation();
        e.preventDefault();
      }
    },
    [editMode]
  );
  const handleBlur = useCallback((e) => {
    if (e.relatedTarget == null)
      return;
    if (e.relatedTarget?.getAttribute("contenteditable") === "true")
      isPreservingFocus.current = false;
  }, []);
  return /* @__PURE__ */ jsx(Slate, { editor, value: initialValue, children: /* @__PURE__ */ jsx(
    Editable,
    {
      renderLeaf,
      renderElement,
      onFocus: handleFocus,
      onKeyDown: handleKeyDown,
      onKeyUp: handleKeyUp,
      onClick: handleClick,
      onBlur: handleBlur,
      readOnly: editMode !== BuilderEditMode.CONTENT,
      placeholder: "Write some text..."
    }
  ) });
}
var editable_text_v2_default = EditableTextV2;
export {
  EditableTextV2,
  editable_text_v2_default as default
};
//# sourceMappingURL=editable-text-v2.js.map