@atlaskit/editor-plugin-caption/dist/cjs/nodeviews/index.js

Caption plugin for @atlaskit/editor-core

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.CaptionNodeView = void 0;
exports.default = captionNodeView;
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _react = _interopRequireDefault(require("react"));
var _selectionBasedNodeView = require("@atlaskit/editor-common/selection-based-node-view");
var _ui = require("@atlaskit/editor-common/ui");
function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0, _possibleConstructorReturn2.default)(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2.default)(t).constructor) : o.apply(t, e)); }
function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
var CaptionNodeView = exports.CaptionNodeView = /*#__PURE__*/function (_SelectionBasedNodeVi) {
  function CaptionNodeView(node, view, getPos, portalProviderAPI, eventDispatcher, reactComponentProps, reactComponent, viewShouldUpdate, pluginInjectionApi) {
    var _this;
    (0, _classCallCheck2.default)(this, CaptionNodeView);
    _this = _callSuper(this, CaptionNodeView, [node, view, getPos, portalProviderAPI, eventDispatcher, reactComponentProps, reactComponent, viewShouldUpdate]);
    (0, _defineProperty2.default)(_this, "selected", _this.insideSelection());
    _this.pluginInjectionApi = pluginInjectionApi;
    _this.handleEditorDisabledChanged();
    return _this;
  }
  (0, _inherits2.default)(CaptionNodeView, _SelectionBasedNodeVi);
  return (0, _createClass2.default)(CaptionNodeView, [{
    key: "createDomRef",
    value: function createDomRef() {
      var domRef = document.createElement('figcaption');
      domRef.setAttribute('data-caption', 'true');
      return domRef;
    }
  }, {
    key: "getContentDOM",
    value: function getContentDOM() {
      var _this$pluginInjection;
      var dom = document.createElement('div');
      // setting a className prevents PM/Chrome mutation observer from
      // incorrectly deleting nodes
      dom.className = 'caption-wrapper';
      dom.setAttribute('contenteditable', (_this$pluginInjection = this.pluginInjectionApi) !== null && _this$pluginInjection !== void 0 && (_this$pluginInjection = _this$pluginInjection.editorDisabled) !== null && _this$pluginInjection !== void 0 && (_this$pluginInjection = _this$pluginInjection.sharedState.currentState()) !== null && _this$pluginInjection !== void 0 && _this$pluginInjection.editorDisabled ? 'false' : 'true');
      return {
        dom: dom
      };
    }

    // ED-24114: We need to ignore mutations that are not related to the caption node
    // since these mutations can cause an infinite loop in React 18 when using createRoot
  }, {
    key: "ignoreMutation",
    value: function ignoreMutation(mutation) {
      if (!this.contentDOM) {
        return true;
      }
      return !this.contentDOM.contains(mutation.target) && mutation.type !== 'selection';
    }
  }, {
    key: "handleEditorDisabledChanged",
    value: function handleEditorDisabledChanged() {
      var _this$pluginInjection2,
        _this2 = this;
      if ((_this$pluginInjection2 = this.pluginInjectionApi) !== null && _this$pluginInjection2 !== void 0 && _this$pluginInjection2.editorDisabled) {
        this.cleanupEditorDisabledListener = this.pluginInjectionApi.editorDisabled.sharedState.onChange(function (sharedState) {
          if (_this2.contentDOM) {
            _this2.contentDOM.setAttribute('contenteditable', sharedState.nextSharedState.editorDisabled ? 'false' : 'true');
          }
        });
      }
    }
  }, {
    key: "render",
    value: function render(_props, forwardRef) {
      return /*#__PURE__*/_react.default.createElement(_ui.Caption, {
        selected: this.insideSelection(),
        hasContent: this.node.content.childCount > 0
      }, /*#__PURE__*/_react.default.createElement("div", {
        ref: forwardRef
      }));
    }
  }, {
    key: "viewShouldUpdate",
    value: function viewShouldUpdate(nextNode) {
      if (this.node.childCount !== nextNode.childCount) {
        return true;
      }
      var newSelected = this.insideSelection();
      var selectedStateChange = this.selected !== newSelected;
      this.selected = newSelected;
      return selectedStateChange;
    }
  }, {
    key: "destroy",
    value: function destroy() {
      if (this.cleanupEditorDisabledListener) {
        this.cleanupEditorDisabledListener();
      }
      this.cleanupEditorDisabledListener = undefined;
    }
  }]);
}(_selectionBasedNodeView.SelectionBasedNodeView);
function captionNodeView(portalProviderAPI, eventDispatcher, pluginInjectionApi) {
  return function (node, view, getPos) {
    return new CaptionNodeView(node, view, getPos, portalProviderAPI, eventDispatcher, {}, undefined, undefined, pluginInjectionApi).init();
  };
}