import { jsxDEV } from "react/jsx-dev-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__ */ jsxDEV(
    "div",
    {
      className: useClassName("editable-canvas", className),
      onKeyDownCapture: handleCapturedKeyDown,
      onKeyUp: handleSlateNodeChange,
      onMouseDownCapture: handleCapturedMouseDown,
      onMouseUp: handleSlateNodeChange,
      children: [
        leading,
        /* @__PURE__ */ jsxDEV(Editable, { ...editableProps }, void 0, false, {
          fileName: "/__w/interface/interface/packages/admin/src/components/bindingFacade/richText/baseEditor/EditableCanvas.tsx",
          lineNumber: 51,
          columnNumber: 4
        }, void 0),
        trailing
      ]
    },
    void 0,
    true,
    {
      fileName: "/__w/interface/interface/packages/admin/src/components/bindingFacade/richText/baseEditor/EditableCanvas.tsx",
      lineNumber: 43,
      columnNumber: 3
    },
    void 0
  );
};
export {
  EditableCanvas
};
//# sourceMappingURL=EditableCanvas.js.map
