"use strict";
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
const jsxRuntime = require("react/jsx-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__ */ jsxRuntime.jsxs(
    "div",
    {
      className: reactUtils.useClassName("editable-canvas", className),
      onKeyDownCapture: handleCapturedKeyDown,
      onKeyUp: handleSlateNodeChange,
      onMouseDownCapture: handleCapturedMouseDown,
      onMouseUp: handleSlateNodeChange,
      children: [
        leading,
        /* @__PURE__ */ jsxRuntime.jsx(slateReact.Editable, { ...editableProps }),
        trailing
      ]
    }
  );
};
exports.EditableCanvas = EditableCanvas;
//# sourceMappingURL=EditableCanvas.cjs.map
