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

Caption plugin for @atlaskit/editor-core

import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
import _createClass from "@babel/runtime/helpers/createClass";
import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
import _inherits from "@babel/runtime/helpers/inherits";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(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; })(); }
import React from 'react';
import { SelectionBasedNodeView } from '@atlaskit/editor-common/selection-based-node-view';
import { Caption } from '@atlaskit/editor-common/ui';
export var CaptionNodeView = /*#__PURE__*/function (_SelectionBasedNodeVi) {
  function CaptionNodeView(node, view, getPos, portalProviderAPI, eventDispatcher, reactComponentProps, reactComponent, viewShouldUpdate, pluginInjectionApi) {
    var _this;
    _classCallCheck(this, CaptionNodeView);
    _this = _callSuper(this, CaptionNodeView, [node, view, getPos, portalProviderAPI, eventDispatcher, reactComponentProps, reactComponent, viewShouldUpdate]);
    _defineProperty(_this, "selected", _this.insideSelection());
    _this.pluginInjectionApi = pluginInjectionApi;
    _this.handleEditorDisabledChanged();
    return _this;
  }
  _inherits(CaptionNodeView, _SelectionBasedNodeVi);
  return _createClass(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.createElement(Caption, {
        selected: this.insideSelection(),
        hasContent: this.node.content.childCount > 0
      }, /*#__PURE__*/React.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);
export default function captionNodeView(portalProviderAPI, eventDispatcher, pluginInjectionApi) {
  return function (node, view, getPos) {
    return new CaptionNodeView(node, view, getPos, portalProviderAPI, eventDispatcher, {}, undefined, undefined, pluginInjectionApi).init();
  };
}