import { jsxs, jsx } from "react/jsx-runtime";
import { useClassName } from "@contember/react-utils";
import { useRef, useCallback } from "react";
import { Transforms } from "slate";
import { useSlate, Editable } from "slate-react";
const EditableCanvas = ({ leading, trailing, className, ...editableProps }) => {
  const editor = useSlate();
  const pathRef = useRef(void 0);
  const handleSlateNodeChange = useCallback((event) => {
    pathRef.current = editor.selection?.anchor.path;
  }, [editor]);
  const handleCapturedMouseDown = useCallback((event) => {
    if (event.target instanceof HTMLElement) {
      const slateNode = event.target.dataset.slateNode;
      if (slateNode === "value" && pathRef.current) {
        Transforms.deselect(editor);
        event.stopPropagation();
        event.preventDefault();
      }
    }
  }, [editor]);
  const handleCapturedKeyDown = useCallback((event) => {
    if (event.key === "Escape") {
      Transforms.deselect(editor);
      event.stopPropagation();
      event.preventDefault();
    }
  }, [editor]);
  return /* @__PURE__ */ jsxs(
    "div",
    {
      className: useClassName("editable-canvas", className),
      onKeyDownCapture: handleCapturedKeyDown,
      onKeyUp: handleSlateNodeChange,
      onMouseDownCapture: handleCapturedMouseDown,
      onMouseUp: handleSlateNodeChange,
      children: [
        leading,
        /* @__PURE__ */ jsx(Editable, { ...editableProps }),
        trailing
      ]
    }
  );
};
export {
  EditableCanvas
};
//# sourceMappingURL=EditableCanvas.js.map
