"use strict";
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
const jsxDevRuntime = require("react/jsx-dev-runtime");
const reactUtils = require("@contember/react-utils");
const react = require("react");
const Slate = require("slate");
const slateReact = require("slate-react");
const EditableCanvas = ({ leading, trailing, className, ...editableProps }) => {
  const editor = slateReact.useSlate();
  const pathRef = react.useRef(void 0);
  const handleSlateNodeChange = react.useCallback((event) => {
    pathRef.current = editor.selection?.anchor.path;
  }, [editor]);
  const handleCapturedMouseDown = react.useCallback((event) => {
    if (event.target instanceof HTMLElement) {
      const slateNode = event.target.dataset.slateNode;
      if (slateNode === "value" && pathRef.current) {
        Slate.Transforms.deselect(editor);
        event.stopPropagation();
        event.preventDefault();
      }
    }
  }, [editor]);
  const handleCapturedKeyDown = react.useCallback((event) => {
    if (event.key === "Escape") {
      Slate.Transforms.deselect(editor);
      event.stopPropagation();
      event.preventDefault();
    }
  }, [editor]);
  return /* @__PURE__ */ jsxDevRuntime.jsxDEV(
    "div",
    {
      className: reactUtils.useClassName("editable-canvas", className),
      onKeyDownCapture: handleCapturedKeyDown,
      onKeyUp: handleSlateNodeChange,
      onMouseDownCapture: handleCapturedMouseDown,
      onMouseUp: handleSlateNodeChange,
      children: [
        leading,
        /* @__PURE__ */ jsxDevRuntime.jsxDEV(slateReact.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
  );
};
exports.EditableCanvas = EditableCanvas;
//# sourceMappingURL=EditableCanvas.cjs.map
