@sanity/form-builder/lib/inputs/PortableText/Editor.js

Sanity form builder

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.Editor = Editor;
var _portableTextEditor = require("@sanity/portable-text-editor");
var _ui = require("@sanity/ui");
var _react = _interopRequireWildcard(require("react"));
var _toolbar = require("./toolbar");
var _text = require("./text");
var _Editor = require("./Editor.styles");
var _useSpellCheck = require("./hooks/useSpellCheck");
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
var renderDecorator = (mark, mType, attributes, defaultRender) => {
  return /*#__PURE__*/_react.default.createElement(_text.Decorator, {
    mark: mark
  }, defaultRender());
};
function Editor(props) {
  var hotkeys = props.hotkeys,
    initialSelection = props.initialSelection,
    isActive = props.isActive,
    isFullscreen = props.isFullscreen,
    onFocus = props.onFocus,
    onCopy = props.onCopy,
    onPaste = props.onPaste,
    onToggleFullscreen = props.onToggleFullscreen,
    readOnly = props.readOnly,
    renderAnnotation = props.renderAnnotation,
    renderBlock = props.renderBlock,
    renderChild = props.renderChild,
    scrollElement = props.scrollElement,
    scrollSelectionIntoView = props.scrollSelectionIntoView,
    setPortalElement = props.setPortalElement,
    setScrollElement = props.setScrollElement;
  var _useLayer = (0, _ui.useLayer)(),
    isTopLayer = _useLayer.isTopLayer;
  var editableRef = (0, _react.useRef)(null);
  var _useBoundaryElement = (0, _ui.useBoundaryElement)(),
    boundaryElement = _useBoundaryElement.element;

  // Let escape close fullscreen mode
  (0, _ui.useGlobalKeyDown)((0, _react.useCallback)(event => {
    if (!isTopLayer || !isFullscreen) {
      return;
    }
    if (event.key === 'Escape') {
      onToggleFullscreen();
    }
  }, [onToggleFullscreen, isFullscreen, isTopLayer]));

  // Keep the editor focused even though we are clicking on the background or the toolbar of the editor.
  var handleMouseDown = (0, _react.useCallback)(event => {
    var _editableRef$current;
    if (event.target instanceof Node && !((_editableRef$current = editableRef.current) !== null && _editableRef$current !== void 0 && _editableRef$current.contains(event.target))) {
      event.preventDefault();
      event.stopPropagation();
    }
  }, []);
  var renderPlaceholder = (0, _react.useCallback)(() => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, "Empty"), []);
  var spellcheck = (0, _useSpellCheck.useSpellcheck)();
  var editable = (0, _react.useMemo)(() => /*#__PURE__*/_react.default.createElement(_portableTextEditor.PortableTextEditable, {
    hotkeys: hotkeys,
    onCopy: onCopy,
    onPaste: onPaste,
    ref: editableRef,
    renderAnnotation: renderAnnotation,
    renderBlock: renderBlock,
    renderChild: renderChild,
    renderDecorator: renderDecorator,
    renderPlaceholder: renderPlaceholder,
    scrollSelectionIntoView: scrollSelectionIntoView,
    selection: initialSelection,
    spellCheck: spellcheck
  }), [hotkeys, initialSelection, onCopy, onPaste, renderAnnotation, renderBlock, renderChild, renderPlaceholder, scrollSelectionIntoView, spellcheck]);
  return /*#__PURE__*/_react.default.createElement(_Editor.Root, {
    $fullscreen: isFullscreen,
    "data-testid": "pt-editor",
    onMouseDown: handleMouseDown
  }, isActive && /*#__PURE__*/_react.default.createElement(_Editor.ToolbarCard, {
    "data-testid": "pt-editor__toolbar-card",
    shadow: 1
  }, /*#__PURE__*/_react.default.createElement(_toolbar.Toolbar, {
    isFullscreen: isFullscreen,
    hotkeys: hotkeys,
    onFocus: onFocus,
    readOnly: readOnly,
    onToggleFullscreen: onToggleFullscreen
  })), /*#__PURE__*/_react.default.createElement(_Editor.EditableCard, {
    flex: 1,
    tone: readOnly ? 'transparent' : 'default'
  }, /*#__PURE__*/_react.default.createElement(_Editor.Scroller, {
    ref: setScrollElement
  }, /*#__PURE__*/_react.default.createElement(_Editor.EditableContainer, {
    padding: isFullscreen ? 2 : 0,
    sizing: "border",
    width: 1
  }, /*#__PURE__*/_react.default.createElement(_Editor.EditableWrapper, {
    $isFullscreen: isFullscreen,
    tone: readOnly ? 'transparent' : 'default'
  }, /*#__PURE__*/_react.default.createElement(_ui.BoundaryElementProvider, {
    element: isFullscreen ? scrollElement : boundaryElement
  }, editable)))), /*#__PURE__*/_react.default.createElement("div", {
    "data-portal": "",
    ref: setPortalElement
  })));
}