@atlaskit/editor-plugin-placeholder-text/dist/cjs/pm-plugins/placeholder-text-nodeview.js

placeholder text plugin for @atlaskit/editor-core

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.PlaceholderTextNodeView = void 0;
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
var _browser = require("@atlaskit/editor-common/browser");
var _whitespace = require("@atlaskit/editor-common/whitespace");
var _state = require("@atlaskit/editor-prosemirror/state");
var serializePlaceholderNode = function serializePlaceholderNode(node) {
  var element = document.createElement('span');
  var browser = (0, _browser.getBrowserInfo)();
  element.classList.add('pm-placeholder');

  // the inline node api test suite requires the following class name
  element.classList.add('placeholderView-content-wrap');
  element.innerText = _whitespace.ZERO_WIDTH_SPACE;
  var elementChildren = document.createElement('span');
  elementChildren.classList.add('pm-placeholder__text');
  elementChildren.dataset.placeholder = node.attrs.text;
  elementChildren.setAttribute('contenteditable', 'false');
  element.appendChild(elementChildren);
  if (browser.safari) {
    element.appendChild(document.createTextNode(_whitespace.ZERO_WIDTH_SPACE));
  } else {
    element.appendChild(document.createElement('wbr'));
  }
  return element;
};
var PlaceholderTextNodeView = exports.PlaceholderTextNodeView = /*#__PURE__*/function () {
  function PlaceholderTextNodeView(node, view, getPos) {
    (0, _classCallCheck2.default)(this, PlaceholderTextNodeView);
    this.node = node;
    this.view = view;
    this.getPos = getPos;
    this.dom = serializePlaceholderNode(this.node);
    this.getPos = getPos;
  }
  return (0, _createClass2.default)(PlaceholderTextNodeView, [{
    key: "stopEvent",
    value: function stopEvent(e) {
      if (e.type === 'mousedown' && typeof this.getPos === 'function') {
        e.preventDefault();
        var _view = this.view;
        var startNodePosition = this.getPos();
        if (typeof startNodePosition !== 'number') {
          return false;
        }
        var tr = _view.state.tr;
        tr.setSelection(_state.Selection.near(tr.doc.resolve(startNodePosition)));
        _view.dispatch(tr);
        if (!_view.hasFocus()) {
          window.requestAnimationFrame(function () {
            _view.focus();
          });
        }
        return true;
      }
      return false;
    }
  }, {
    key: "ignoreMutation",
    value: function ignoreMutation(record) {
      if (typeof this.getPos !== 'function' || record.type !== 'selection') {
        return true;
      }
      var view = this.view,
        node = this.node;
      var placeholderStartPosition = this.getPos();
      if (typeof placeholderStartPosition !== 'number') {
        return false;
      }
      var placeholderEndPosition = placeholderStartPosition + node.nodeSize;
      var selection = view.state.selection;

      // when the selection is set right after the placeholder.
      // we should let ProseMirror deal with this edge-case
      if (selection.from === placeholderEndPosition) {
        return false;
      }
      var isSelectionAtPlaceholder = selection.from === placeholderStartPosition;
      var isSelectionAfterlaceholder = selection.from > placeholderEndPosition;
      if (isSelectionAtPlaceholder || isSelectionAfterlaceholder) {
        var tr = view.state.tr;
        tr.setSelection(_state.Selection.near(tr.doc.resolve(placeholderEndPosition)));
        view.dispatch(tr);
        return true;
      }
      return true;
    }
  }]);
}();