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

SyncedBlock 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 _get from "@babel/runtime/helpers/get";
import _inherits from "@babel/runtime/helpers/inherits";
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; })(); }
function _superPropGet(t, o, e, r) { var p = _get(_getPrototypeOf(1 & r ? t.prototype : t), o, e); return 2 & r && "function" == typeof p ? function (t) { return p.apply(e, t); } : p; }
import React from 'react';
import { ACTION_SUBJECT } from '@atlaskit/editor-common/analytics';
import { ErrorBoundary } from '@atlaskit/editor-common/error-boundary';
import ReactNodeView from '@atlaskit/editor-common/react-node-view';
import { SyncBlockSharedCssClassName, SyncBlockActionsProvider } from '@atlaskit/editor-common/sync-block';
import { useFetchSyncBlockData as _useFetchSyncBlockData, useFetchSyncBlockTitle as _useFetchSyncBlockTitle } from '@atlaskit/editor-synced-block-provider';
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
import { removeSyncedBlockAtPos } from '../editor-commands';
import { SyncBlockRendererWrapper } from '../ui/SyncBlockRendererWrapper';
export var SyncBlock = /*#__PURE__*/function (_ReactNodeView) {
  function SyncBlock(props) {
    var _this;
    _classCallCheck(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;
  }
  _inherits(SyncBlock, _ReactNodeView);
  return _createClass(SyncBlock, [{
    key: "createDomRef",
    value: function createDomRef() {
      var domRef = document.createElement('div');
      domRef.classList.add(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, 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.createElement(ErrorBoundary, {
        component: 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.createElement(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) {
            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.createElement(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 _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 _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);
export var 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();
  };
};