@atlaskit/editor-plugin-synced-block/dist/cjs/nodeviews/syncedBlock.js

SyncedBlock plugin for @atlaskit/editor-core

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.syncBlockNodeView = exports.SyncBlock = void 0;
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 _get2 = _interopRequireDefault(require("@babel/runtime/helpers/get"));
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
var _react = _interopRequireDefault(require("react"));
var _analytics = require("@atlaskit/editor-common/analytics");
var _errorBoundary = require("@atlaskit/editor-common/error-boundary");
var _reactNodeView = _interopRequireDefault(require("@atlaskit/editor-common/react-node-view"));
var _syncBlock = require("@atlaskit/editor-common/sync-block");
var _editorSyncedBlockProvider = require("@atlaskit/editor-synced-block-provider");
var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
var _editorCommands = require("../editor-commands");
var _SyncBlockRendererWrapper = require("../ui/SyncBlockRendererWrapper");
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; })(); }
function _superPropGet(t, o, e, r) { var p = (0, _get2.default)((0, _getPrototypeOf2.default)(1 & r ? t.prototype : t), o, e); return 2 & r && "function" == typeof p ? function (t) { return p.apply(e, t); } : p; }
var SyncBlock = exports.SyncBlock = /*#__PURE__*/function (_ReactNodeView) {
  function SyncBlock(props) {
    var _this;
    (0, _classCallCheck2.default)(this, SyncBlock);
    _this = _callSuper(this, SyncBlock, [props.node, props.view, props.getPos, props.portalProviderAPI, props.eventDispatcher, props]);
    _this.options = props.options;
    _this.api = props.api;
    _this.syncBlockStore = props.syncBlockStore;
    return _this;
  }
  (0, _inherits2.default)(SyncBlock, _ReactNodeView);
  return (0, _createClass2.default)(SyncBlock, [{
    key: "createDomRef",
    value: function createDomRef() {
      var domRef = document.createElement('div');
      domRef.classList.add(_syncBlock.SyncBlockSharedCssClassName.prefix);
      return domRef;
    }
  }, {
    key: "validUpdate",
    value: function validUpdate(currentNode, newNode) {
      // Only consider as the valid update if the localId and resourceId are the same
      // This prevents PM reusing the same node view for different sync block node in live page transition
      return currentNode.attrs.localId === newNode.attrs.localId && currentNode.attrs.resourceId === newNode.attrs.resourceId;
    }
  }, {
    key: "update",
    value: function update(node, decorations, innerDecorations) {
      return _superPropGet(SyncBlock, "update", this, 3)([node, decorations, innerDecorations, (0, _experiments.editorExperiment)('platform_synced_block_patch_6', true, {
        exposure: true
      }) ? this.validUpdate : undefined]);
    }
  }, {
    key: "render",
    value: function render(_ref) {
      var _this$options,
        _this$api$syncedBlock,
        _this$api,
        _this$api2,
        _this2 = this,
        _this$options2;
      var getPos = _ref.getPos;
      if (!((_this$options = this.options) !== null && _this$options !== void 0 && _this$options.syncedBlockRenderer)) {
        return null;
      }
      var _this$node$attrs = this.node.attrs,
        resourceId = _this$node$attrs.resourceId,
        localId = _this$node$attrs.localId;
      if (!resourceId || !localId) {
        return null;
      }
      var syncBlockStore = (_this$api$syncedBlock = (_this$api = this.api) === null || _this$api === void 0 || (_this$api = _this$api.syncedBlock) === null || _this$api === void 0 || (_this$api = _this$api.sharedState.currentState()) === null || _this$api === void 0 ? void 0 : _this$api.syncBlockStore) !== null && _this$api$syncedBlock !== void 0 ? _this$api$syncedBlock : this.syncBlockStore;
      if (!syncBlockStore) {
        return null;
      }

      // get document node from data provider
      return /*#__PURE__*/_react.default.createElement(_errorBoundary.ErrorBoundary, {
        component: _analytics.ACTION_SUBJECT.SYNCED_BLOCK,
        dispatchAnalyticsEvent: (_this$api2 = this.api) === null || _this$api2 === void 0 || (_this$api2 = _this$api2.analytics) === null || _this$api2 === void 0 ? void 0 : _this$api2.actions.fireAnalyticsEvent,
        fallbackComponent: null
      }, /*#__PURE__*/_react.default.createElement(_syncBlock.SyncBlockActionsProvider
      // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
      , {
        removeSyncBlock: function removeSyncBlock() {
          var pos = getPos();
          if (pos !== undefined) {
            (0, _editorCommands.removeSyncedBlockAtPos)(_this2.api, pos);
          }
        }
        // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
        ,
        fetchSyncBlockSourceInfo: function fetchSyncBlockSourceInfo(sourceAri) {
          return syncBlockStore.referenceManager.fetchSyncBlockSourceInfoBySourceAri(sourceAri);
        }
      }, /*#__PURE__*/_react.default.createElement(_SyncBlockRendererWrapper.SyncBlockRendererWrapper, {
        localId: this.node.attrs.localId,
        syncedBlockRenderer: (_this$options2 = this.options) === null || _this$options2 === void 0 ? void 0 : _this$options2.syncedBlockRenderer
        // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
        ,
        useFetchSyncBlockTitle: function useFetchSyncBlockTitle() {
          return (0, _editorSyncedBlockProvider.useFetchSyncBlockTitle)(syncBlockStore, _this2.node);
        }
        // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
        ,
        useFetchSyncBlockData: function useFetchSyncBlockData() {
          var _this2$api;
          return (0, _editorSyncedBlockProvider.useFetchSyncBlockData)(syncBlockStore, resourceId, localId, (_this2$api = _this2.api) === null || _this2$api === void 0 || (_this2$api = _this2$api.analytics) === null || _this2$api === void 0 || (_this2$api = _this2$api.actions) === null || _this2$api === void 0 ? void 0 : _this2$api.fireAnalyticsEvent);
        },
        api: this.api
      })));
    }
  }, {
    key: "destroy",
    value: function destroy() {
      var _this$unsubscribe;
      (_this$unsubscribe = this.unsubscribe) === null || _this$unsubscribe === void 0 || _this$unsubscribe.call(this);
      _superPropGet(SyncBlock, "destroy", this, 3)([]);
    }
  }]);
}(_reactNodeView.default);
var syncBlockNodeView = exports.syncBlockNodeView = function syncBlockNodeView(_ref2) {
  var options = _ref2.options,
    pmPluginFactoryParams = _ref2.pmPluginFactoryParams,
    api = _ref2.api;
  return function (node, view, getPos) {
    var portalProviderAPI = pmPluginFactoryParams.portalProviderAPI,
      eventDispatcher = pmPluginFactoryParams.eventDispatcher;
    return new SyncBlock({
      api: api,
      options: options,
      node: node,
      view: view,
      getPos: getPos,
      portalProviderAPI: portalProviderAPI,
      eventDispatcher: eventDispatcher
    }).init();
  };
};