@atlaskit/editor-plugin-synced-block 5.3.7 → 5.3.9

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @atlaskit/editor-plugin-synced-block
 
+## 5.3.9
+
+### Patch Changes
+
+- [`8782c30447091`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/8782c30447091) -
+  [ux] EDITOR-4756 Fix convert to synced block logic by expanding selection to block range before
+  conversion
+- Updated dependencies
+
+## 5.3.8
+
+### Patch Changes
+
+- [`f11ff647ea458`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/f11ff647ea458) -
+  [ux] [EDITOR-4521] Implement source deleted reference UI, update block deleted/unsynced reference
+  UI to add delete button, unsynced label and source title/url
+- Updated dependencies
+
 ## 5.3.7
 
 ### Patch Changes

package/dist/cjs/editor-commands/index.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.unsync = exports.removeSyncedBlock = exports.editSyncedBlockSource = exports.createSyncedBlock = exports.copySyncedBlockReferenceToClipboardEditorCommand = exports.copySyncedBlockReferenceToClipboard = void 0;
+exports.unsync = exports.removeSyncedBlockAtPos = exports.removeSyncedBlock = exports.editSyncedBlockSource = exports.createSyncedBlock = exports.copySyncedBlockReferenceToClipboardEditorCommand = exports.copySyncedBlockReferenceToClipboard = void 0;
 var _schemaDefault = require("@atlaskit/adf-schema/schema-default");
 var _analytics = require("@atlaskit/editor-common/analytics");
 var _copyButton = require("@atlaskit/editor-common/copy-button");
@@ -30,6 +30,17 @@ var createSyncedBlock = exports.createSyncedBlock = function createSyncedBlock(_
     var paragraphNode = paragraph.createAndFill({});
     var newBodiedSyncBlockNode = bodiedSyncBlock.createAndFill(attrs, paragraphNode ? [paragraphNode] : []);
     if (!newBodiedSyncBlockNode) {
+      if ((0, _platformFeatureFlags.fg)('platform_synced_block_dogfooding')) {
+        fireAnalyticsEvent === null || fireAnalyticsEvent === void 0 || fireAnalyticsEvent({
+          action: _analytics.ACTION.ERROR,
+          actionSubject: _analytics.ACTION_SUBJECT.SYNCED_BLOCK,
+          actionSubjectId: _analytics.ACTION_SUBJECT_ID.SYNCED_BLOCK_CREATE,
+          attributes: {
+            error: 'Create and fill for empty content failed'
+          },
+          eventType: _analytics.EVENT_TYPE.OPERATIONAL
+        });
+      }
       return false;
     }
 
@@ -60,6 +71,17 @@ var createSyncedBlock = exports.createSyncedBlock = function createSyncedBlock(_
     var _attrs = syncBlockStore.sourceManager.generateBodiedSyncBlockAttrs();
     var _newBodiedSyncBlockNode = bodiedSyncBlock.createAndFill(_attrs, conversionInfo.contentToInclude);
     if (!_newBodiedSyncBlockNode) {
+      if ((0, _platformFeatureFlags.fg)('platform_synced_block_dogfooding')) {
+        fireAnalyticsEvent === null || fireAnalyticsEvent === void 0 || fireAnalyticsEvent({
+          action: _analytics.ACTION.ERROR,
+          actionSubject: _analytics.ACTION_SUBJECT.SYNCED_BLOCK,
+          actionSubjectId: _analytics.ACTION_SUBJECT_ID.SYNCED_BLOCK_CREATE,
+          attributes: {
+            error: 'Create and fill for content failed'
+          },
+          eventType: _analytics.EVENT_TYPE.OPERATIONAL
+        });
+      }
       return false;
     }
 
@@ -178,7 +200,17 @@ var removeSyncedBlock = exports.removeSyncedBlock = function removeSyncedBlock(a
     return true;
   };
 };
-
+var removeSyncedBlockAtPos = exports.removeSyncedBlockAtPos = function removeSyncedBlockAtPos(api, pos) {
+  api === null || api === void 0 || api.core.actions.execute(function (_ref4) {
+    var tr = _ref4.tr;
+    var node = tr.doc.nodeAt(pos);
+    if ((node === null || node === void 0 ? void 0 : node.type.name) === 'syncBlock') {
+      var _node$nodeSize;
+      return tr.replace(pos, pos + ((_node$nodeSize = node === null || node === void 0 ? void 0 : node.nodeSize) !== null && _node$nodeSize !== void 0 ? _node$nodeSize : 0));
+    }
+    return tr;
+  });
+};
 /**
  * Deletes (bodied)SyncBlock node and paste its content to the editor
  */

package/dist/cjs/nodeviews/syncedBlock.js

@@ -18,6 +18,7 @@ var _reactNodeView = _interopRequireDefault(require("@atlaskit/editor-common/rea
 var _syncBlock = require("@atlaskit/editor-common/sync-block");
 var _editorSyncedBlockProvider = require("@atlaskit/editor-synced-block-provider");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+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; })(); }
@@ -42,14 +43,15 @@ var SyncBlock = exports.SyncBlock = /*#__PURE__*/function (_ReactNodeView) {
     }
   }, {
     key: "render",
-    value: function render() {
+    value: function render(_ref) {
       var _this$options,
         _this$api$syncedBlock,
         _this$api,
         _this$api2,
-        _this$options2,
         _this2 = this,
+        _this$options2,
         _this$options3;
+      var getPos = _ref.getPos;
       if (!((_this$options = this.options) !== null && _this$options !== void 0 && _this$options.syncedBlockRenderer)) {
         return null;
       }
@@ -70,6 +72,16 @@ var SyncBlock = exports.SyncBlock = /*#__PURE__*/function (_ReactNodeView) {
         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, {
+        removeSyncBlock: function removeSyncBlock() {
+          var pos = getPos();
+          if (pos !== undefined) {
+            (0, _editorCommands.removeSyncedBlockAtPos)(_this2.api, pos);
+          }
+        },
+        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,
@@ -81,7 +93,7 @@ var SyncBlock = exports.SyncBlock = /*#__PURE__*/function (_ReactNodeView) {
           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
-      })) : /*#__PURE__*/_react.default.createElement(_SyncBlockRendererWrapper.SyncBlockRendererWrapper, {
+      }))) : /*#__PURE__*/_react.default.createElement(_SyncBlockRendererWrapper.SyncBlockRendererWrapper, {
         localId: this.node.attrs.localId,
         syncedBlockRenderer: (_this$options3 = this.options) === null || _this$options3 === void 0 ? void 0 : _this$options3.syncedBlockRenderer,
         useFetchSyncBlockTitle: function useFetchSyncBlockTitle() {
@@ -103,10 +115,10 @@ var SyncBlock = exports.SyncBlock = /*#__PURE__*/function (_ReactNodeView) {
     }
   }]);
 }(_reactNodeView.default);
-var syncBlockNodeView = exports.syncBlockNodeView = function syncBlockNodeView(_ref) {
-  var options = _ref.options,
-    pmPluginFactoryParams = _ref.pmPluginFactoryParams,
-    api = _ref.api;
+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;

package/dist/cjs/pm-plugins/utils/utils.js

@@ -3,11 +3,13 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.sliceFullyContainsNode = exports.isBodiedSyncBlockNode = exports.findSyncBlockOrBodiedSyncBlock = exports.findSyncBlock = exports.findBodiedSyncBlock = exports.canBeConvertedToSyncBlock = void 0;
+exports.sliceFullyContainsNode = exports.isBodiedSyncBlockNode = exports.findSyncBlockOrBodiedSyncBlock = exports.findSyncBlock = exports.findBodiedSyncBlock = exports.canBeConvertedToSyncBlockOld = exports.canBeConvertedToSyncBlockNew = exports.canBeConvertedToSyncBlock = void 0;
+var _selection = require("@atlaskit/editor-common/selection");
 var _model = require("@atlaskit/editor-prosemirror/model");
 var _state = require("@atlaskit/editor-prosemirror/state");
 var _utils = require("@atlaskit/editor-prosemirror/utils");
 var _editorTables = require("@atlaskit/editor-tables");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var findSyncBlock = exports.findSyncBlock = function findSyncBlock(schema, selection) {
   var syncBlock = schema.nodes.syncBlock;
   return (0, _utils.findSelectedNodeOfType)(syncBlock)(selection);
@@ -32,6 +34,9 @@ var UNSUPPORTED_NODE_TYPES = new Set(['inlineExtension', 'extension', 'bodiedExt
  * or false if conversion is not possible
  */
 var canBeConvertedToSyncBlock = exports.canBeConvertedToSyncBlock = function canBeConvertedToSyncBlock(selection) {
+  return (0, _platformFeatureFlags.fg)('platform_synced_block_dogfooding') ? canBeConvertedToSyncBlockNew(selection) : canBeConvertedToSyncBlockOld(selection);
+};
+var canBeConvertedToSyncBlockOld = exports.canBeConvertedToSyncBlockOld = function canBeConvertedToSyncBlockOld(selection) {
   var schema = selection.$from.doc.type.schema;
   var nodes = schema.nodes;
   var from = selection.from;
@@ -70,6 +75,32 @@ var canBeConvertedToSyncBlock = exports.canBeConvertedToSyncBlock = function can
     to: to
   };
 };
+var canBeConvertedToSyncBlockNew = exports.canBeConvertedToSyncBlockNew = function canBeConvertedToSyncBlockNew(selection) {
+  var _expandSelectionToBlo = (0, _selection.expandSelectionToBlockRange)(selection),
+    $from = _expandSelectionToBlo.$from,
+    range = _expandSelectionToBlo.range;
+  if (!range) {
+    return false;
+  }
+  var from = range.start;
+  var to = range.end;
+  var canBeConverted = true;
+  $from.doc.nodesBetween(from, to, function (node) {
+    if (UNSUPPORTED_NODE_TYPES.has(node.type.name)) {
+      canBeConverted = false;
+      return false;
+    }
+  });
+  if (!canBeConverted) {
+    return false;
+  }
+  var contentToInclude = removeBreakoutMarks($from.doc.slice(from, to).content);
+  return {
+    contentToInclude: contentToInclude,
+    from: from,
+    to: to
+  };
+};
 var removeBreakoutMarks = function removeBreakoutMarks(content) {
   var nodes = [];
 

package/dist/cjs/ui/DeleteConfirmationModal.js

@@ -26,10 +26,10 @@ var _main = require("../pm-plugins/main");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 var modalContentMap = {
   'source-block-deleted': {
-    titleMultiple: _messages.syncBlockMessages.deleteConfirmationModalTitleSingle,
+    titleMultiple: _messages.syncBlockMessages.deleteConfirmationModalTitleMultiple,
     titleSingle: _messages.syncBlockMessages.deleteConfirmationModalTitleSingle,
     descriptionSingle: _messages.syncBlockMessages.deleteConfirmationModalDescriptionNoRef,
-    descriptionMultiple: _messages.syncBlockMessages.deleteConfirmationModalDescription,
+    descriptionMultiple: _messages.syncBlockMessages.deleteConfirmationModalDescriptionMultiple,
     confirmButtonLabel: _messages.syncBlockMessages.deleteConfirmationModalDeleteButton
   },
   'source-block-unsynced': {
@@ -63,10 +63,6 @@ var DeleteConfirmationModal = exports.DeleteConfirmationModal = function DeleteC
     _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
     deleteReason = _useState8[0],
     setDeleteReason = _useState8[1];
-  var _useState9 = (0, _react.useState)('none'),
-    _useState0 = (0, _slicedToArray2.default)(_useState9, 2),
-    fetchStatus = _useState0[0],
-    setFetchStatus = _useState0[1];
   var _useSharedPluginState = (0, _hooks.useSharedPluginStateWithSelector)(api, ['connectivity', 'syncedBlock'], function (states) {
       var _states$connectivityS, _states$syncedBlockSt, _states$syncedBlockSt2;
       return {
@@ -90,7 +86,6 @@ var DeleteConfirmationModal = exports.DeleteConfirmationModal = function DeleteC
       }
       if (!confirm) {
         setIsOpen(false);
-        setFetchStatus('none');
         setReferenceCount(undefined);
       }
       api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 || _api$core.actions.execute(function (_ref2) {
@@ -134,7 +129,6 @@ var DeleteConfirmationModal = exports.DeleteConfirmationModal = function DeleteC
       var _api$core5;
       // auto close modal once deletion is successful
       setIsOpen(false);
-      setFetchStatus('none');
       api === null || api === void 0 || (_api$core5 = api.core) === null || _api$core5 === void 0 || _api$core5.actions.execute(function (_ref4) {
         var tr = _ref4.tr;
         return tr.setMeta(_main.syncedBlockPluginKey, {
@@ -146,49 +140,65 @@ var DeleteConfirmationModal = exports.DeleteConfirmationModal = function DeleteC
   }, [api === null || api === void 0 || (_api$core6 = api.core) === null || _api$core6 === void 0 ? void 0 : _api$core6.actions, bodiedSyncBlockDeletionStatus, isOpen]);
   (0, _react.useEffect)(function () {
     if (isOpen && syncBlockIds !== undefined && (0, _platformFeatureFlags.fg)('platform_synced_block_dogfooding')) {
-      var _referenceCount = 0;
-      setFetchStatus('loading');
-      var fetchFailed = false;
-      syncBlockIds.forEach( /*#__PURE__*/function () {
-        var _ref5 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(syncBlockId) {
-          var references, _references$reference, _references$reference2;
-          return _regenerator.default.wrap(function _callee$(_context) {
-            while (1) switch (_context.prev = _context.next) {
+      var fetchReferences = /*#__PURE__*/function () {
+        var _ref5 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2() {
+          var references, totalCount;
+          return _regenerator.default.wrap(function _callee2$(_context2) {
+            while (1) switch (_context2.prev = _context2.next) {
               case 0:
-                if (!fetchFailed) {
-                  _context.next = 2;
-                  break;
-                }
-                return _context.abrupt("return");
-              case 2:
-                _context.next = 4;
-                return syncBlockStoreManager.sourceManager.fetchReferences(syncBlockId.resourceId);
-              case 4:
-                references = _context.sent;
-                if (!references.error) {
-                  _context.next = 11;
-                  break;
-                }
-                // Consider fetch fails as soon as one of the fetches fails
-                setFetchStatus('error');
-                fetchFailed = true;
-                return _context.abrupt("return");
+                _context2.prev = 0;
+                _context2.next = 3;
+                return Promise.all(syncBlockIds.map( /*#__PURE__*/function () {
+                  var _ref6 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(syncBlockId) {
+                    var _references$reference, _references$reference2;
+                    var references;
+                    return _regenerator.default.wrap(function _callee$(_context) {
+                      while (1) switch (_context.prev = _context.next) {
+                        case 0:
+                          _context.next = 2;
+                          return syncBlockStoreManager.sourceManager.fetchReferences(syncBlockId.resourceId);
+                        case 2:
+                          references = _context.sent;
+                          if (!(references !== null && references !== void 0 && references.error)) {
+                            _context.next = 5;
+                            break;
+                          }
+                          throw new Error();
+                        case 5:
+                          return _context.abrupt("return", (_references$reference = (_references$reference2 = references.references) === null || _references$reference2 === void 0 ? void 0 : _references$reference2.length) !== null && _references$reference !== void 0 ? _references$reference : 0);
+                        case 6:
+                        case "end":
+                          return _context.stop();
+                      }
+                    }, _callee);
+                  }));
+                  return function (_x) {
+                    return _ref6.apply(this, arguments);
+                  };
+                }()));
+              case 3:
+                references = _context2.sent;
+                totalCount = references.reduce(function (sum, count) {
+                  return sum + count;
+                }, 0);
+                setReferenceCount(totalCount);
+                _context2.next = 11;
+                break;
+              case 8:
+                _context2.prev = 8;
+                _context2.t0 = _context2["catch"](0);
+                setReferenceCount(0);
               case 11:
-                _referenceCount += (_references$reference = (_references$reference2 = references.references) === null || _references$reference2 === void 0 ? void 0 : _references$reference2.length) !== null && _references$reference !== void 0 ? _references$reference : 0;
-              case 12:
               case "end":
-                return _context.stop();
+                return _context2.stop();
             }
-          }, _callee);
+          }, _callee2, null, [[0, 8]]);
         }));
-        return function (_x) {
+        return function fetchReferences() {
           return _ref5.apply(this, arguments);
         };
-      }());
-      if (!fetchFailed) {
-        setReferenceCount(_referenceCount);
-        setFetchStatus('success');
-      }
+      }();
+      fetchReferences();
     }
   }, [isOpen, syncBlockIds, syncBlockStoreManager.sourceManager]);
   return /*#__PURE__*/_react.default.createElement(_modalDialog.ModalTransition, null, isOpen && /*#__PURE__*/_react.default.createElement(_modalDialog.default, {
@@ -207,7 +217,7 @@ var DeleteConfirmationModal = exports.DeleteConfirmationModal = function DeleteC
     isDeleting: bodiedSyncBlockDeletionStatus === 'processing',
     isDisabled: (0, _editorPluginConnectivity.isOfflineMode)(mode),
     deleteReason: deleteReason,
-    failToFetch: fetchStatus === 'error'
+    sourceCount: (syncBlockIds === null || syncBlockIds === void 0 ? void 0 : syncBlockIds.length) || 0
   })) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_modalDialog.ModalHeader, {
     hasCloseButton: true
   }, /*#__PURE__*/_react.default.createElement(_modalDialog.ModalTitle, {
@@ -225,29 +235,30 @@ var DeleteConfirmationModal = exports.DeleteConfirmationModal = function DeleteC
     isLoading: bodiedSyncBlockDeletionStatus === 'processing'
   }, formatMessage(_messages.syncBlockMessages.deleteConfirmationModalDeleteButton))))));
 };
-var ModalContent = function ModalContent(_ref6) {
-  var content = _ref6.content,
-    referenceCount = _ref6.referenceCount,
-    handleClick = _ref6.handleClick,
-    formatMessage = _ref6.formatMessage,
-    isDeleting = _ref6.isDeleting,
-    isDisabled = _ref6.isDisabled,
-    deleteReason = _ref6.deleteReason,
-    failToFetch = _ref6.failToFetch;
+var ModalContent = function ModalContent(_ref7) {
+  var content = _ref7.content,
+    referenceCount = _ref7.referenceCount,
+    handleClick = _ref7.handleClick,
+    formatMessage = _ref7.formatMessage,
+    isDeleting = _ref7.isDeleting,
+    isDisabled = _ref7.isDisabled,
+    deleteReason = _ref7.deleteReason,
+    sourceCount = _ref7.sourceCount;
   var titleMultiple = content.titleMultiple,
     titleSingle = content.titleSingle,
     descriptionSingle = content.descriptionSingle,
     descriptionMultiple = content.descriptionMultiple,
     confirmButtonLabel = content.confirmButtonLabel;
-  var hasNoReferenceOrFailToFetch = referenceCount === 0 || failToFetch;
+  var hasNoReferenceOrFailToFetch = referenceCount === 0;
+  var syncBlockCount = deleteReason === 'source-block-deleted' ? referenceCount + sourceCount : referenceCount;
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_modalDialog.ModalHeader, {
     hasCloseButton: true
   }, /*#__PURE__*/_react.default.createElement(_modalDialog.ModalTitle, {
     appearance: "warning"
   }, hasNoReferenceOrFailToFetch ? formatMessage(titleSingle) : formatMessage(titleMultiple, {
-    count: referenceCount
+    count: syncBlockCount
   }))), /*#__PURE__*/_react.default.createElement(_modalDialog.ModalBody, null, /*#__PURE__*/_react.default.createElement(_compiled.Text, null, hasNoReferenceOrFailToFetch ? formatMessage(descriptionSingle) : formatMessage(descriptionMultiple, {
-    syncBlockCount: referenceCount
+    syncBlockCount: syncBlockCount
   }))), /*#__PURE__*/_react.default.createElement(_modalDialog.ModalFooter, null, /*#__PURE__*/_react.default.createElement(_new.default, {
     appearance: "subtle",
     onClick: handleClick(false)

package/dist/cjs/ui/SyncBlockLabel.js

@@ -23,7 +23,8 @@ var SyncBlockLabelComponent = function SyncBlockLabelComponent(_ref) {
   var contentUpdatedAt = _ref.contentUpdatedAt,
     isSource = _ref.isSource,
     localId = _ref.localId,
-    title = _ref.title;
+    title = _ref.title,
+    isUnsyncedBlock = _ref.isUnsyncedBlock;
   var intl = (0, _reactIntlNext.useIntl)();
   var formatMessage = intl.formatMessage;
   var _useState = (0, _react.useState)(formatMessage(_messages.syncBlockMessages.defaultSyncBlockTooltip)),
@@ -60,6 +61,25 @@ var SyncBlockLabelComponent = function SyncBlockLabelComponent(_ref) {
     setTooltipContent(tooltipContent);
   }, [contentUpdatedAt, formatMessage, intl, tooltipMessage]);
   var ariaDescribedById = "sync-block-label-description-".concat(localId);
+  var getLabelContent = (0, _react.useMemo)(function () {
+    if (isUnsyncedBlock && (0, _platformFeatureFlags.fg)('platform_synced_block_dogfooding')) {
+      return /*#__PURE__*/_react.default.createElement(_compiled.Text, {
+        size: "small",
+        color: "color.text.subtle"
+      }, formatMessage(_messages.syncBlockMessages.unsyncedBlockLabel));
+    }
+    if (isSource || !title) {
+      return /*#__PURE__*/_react.default.createElement(_compiled.Text, {
+        size: "small",
+        color: "color.text.subtle"
+      }, formatMessage(_messages.syncBlockMessages.syncedBlockLabel));
+    }
+    return /*#__PURE__*/_react.default.createElement(_compiled.Text, {
+      maxLines: 1,
+      size: "small",
+      color: "color.text.subtle"
+    }, title);
+  }, [formatMessage, isSource, isUnsyncedBlock, title]);
   var label = /*#__PURE__*/_react.default.createElement("div", {
     "data-testid": SyncBlockLabelDataId
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
@@ -70,15 +90,8 @@ var SyncBlockLabelComponent = function SyncBlockLabelComponent(_ref) {
     color: "var(--ds-icon-subtle, #505258)",
     size: "small",
     label: ""
-  }), isSource || !title ? /*#__PURE__*/_react.default.createElement(_compiled.Text, {
-    size: "small",
-    color: "color.text.subtle"
-  }, formatMessage(_messages.syncBlockMessages.syncedBlockLabel)) : /*#__PURE__*/_react.default.createElement(_compiled.Text, {
-    maxLines: 1,
-    size: "small",
-    color: "color.text.subtle"
-  }, title));
-  if (isSource && (0, _platformFeatureFlags.fg)('platform_synced_block_dogfooding')) {
+  }), getLabelContent);
+  if ((isSource || isUnsyncedBlock) && (0, _platformFeatureFlags.fg)('platform_synced_block_dogfooding')) {
     return label;
   }
   return /*#__PURE__*/_react.default.createElement(_tooltip.default, {

package/dist/cjs/ui/SyncBlockRendererWrapper.js

@@ -7,10 +7,11 @@ Object.defineProperty(exports, "__esModule", {
 exports.SyncBlockRendererWrapper = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _syncBlock = require("@atlaskit/editor-common/sync-block");
+var _editorSyncedBlockProvider = require("@atlaskit/editor-synced-block-provider");
 var _SyncBlockLabel = require("./SyncBlockLabel");
 var SyncBlockRendererWrapperDataId = 'sync-block-plugin-renderer-wrapper';
 var SyncBlockRendererWrapperComponent = function SyncBlockRendererWrapperComponent(_ref) {
-  var _syncBlockFetchResult;
+  var _syncBlockFetchResult, _syncBlockFetchResult2, _syncBlockFetchResult3;
   var syncedBlockRenderer = _ref.syncedBlockRenderer,
     useFetchSyncBlockData = _ref.useFetchSyncBlockData,
     useFetchSyncBlockTitle = _ref.useFetchSyncBlockTitle,
@@ -19,6 +20,8 @@ var SyncBlockRendererWrapperComponent = function SyncBlockRendererWrapperCompone
   var syncBlockFetchResult = useFetchSyncBlockData();
   var title = useFetchSyncBlockTitle === null || useFetchSyncBlockTitle === void 0 ? void 0 : useFetchSyncBlockTitle();
   var contentUpdatedAt = syncBlockFetchResult === null || syncBlockFetchResult === void 0 || (_syncBlockFetchResult = syncBlockFetchResult.syncBlockInstance) === null || _syncBlockFetchResult === void 0 || (_syncBlockFetchResult = _syncBlockFetchResult.data) === null || _syncBlockFetchResult === void 0 ? void 0 : _syncBlockFetchResult.contentUpdatedAt;
+  var isUnpublishedBlock = ((_syncBlockFetchResult2 = syncBlockFetchResult.syncBlockInstance) === null || _syncBlockFetchResult2 === void 0 || (_syncBlockFetchResult2 = _syncBlockFetchResult2.data) === null || _syncBlockFetchResult2 === void 0 ? void 0 : _syncBlockFetchResult2.status) === 'unpublished';
+  var isUnsyncedBlock = isUnpublishedBlock || (syncBlockFetchResult === null || syncBlockFetchResult === void 0 || (_syncBlockFetchResult3 = syncBlockFetchResult.syncBlockInstance) === null || _syncBlockFetchResult3 === void 0 || (_syncBlockFetchResult3 = _syncBlockFetchResult3.error) === null || _syncBlockFetchResult3 === void 0 ? void 0 : _syncBlockFetchResult3.type) === _editorSyncedBlockProvider.SyncBlockError.NotFound;
   return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
     "data-testid": SyncBlockRendererWrapperDataId
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
@@ -31,7 +34,8 @@ var SyncBlockRendererWrapperComponent = function SyncBlockRendererWrapperCompone
     isSource: false,
     title: title,
     contentUpdatedAt: contentUpdatedAt,
-    localId: localId
+    localId: localId,
+    isUnsyncedBlock: isUnsyncedBlock
   }));
 };
 var SyncBlockRendererWrapper = exports.SyncBlockRendererWrapper = /*#__PURE__*/_react.default.memo(SyncBlockRendererWrapperComponent);

package/dist/es2019/editor-commands/index.js

@@ -30,6 +30,17 @@ export const createSyncedBlock = ({
     const paragraphNode = paragraph.createAndFill({});
     const newBodiedSyncBlockNode = bodiedSyncBlock.createAndFill(attrs, paragraphNode ? [paragraphNode] : []);
     if (!newBodiedSyncBlockNode) {
+      if (fg('platform_synced_block_dogfooding')) {
+        fireAnalyticsEvent === null || fireAnalyticsEvent === void 0 ? void 0 : fireAnalyticsEvent({
+          action: ACTION.ERROR,
+          actionSubject: ACTION_SUBJECT.SYNCED_BLOCK,
+          actionSubjectId: ACTION_SUBJECT_ID.SYNCED_BLOCK_CREATE,
+          attributes: {
+            error: 'Create and fill for empty content failed'
+          },
+          eventType: EVENT_TYPE.OPERATIONAL
+        });
+      }
       return false;
     }
 
@@ -60,6 +71,17 @@ export const createSyncedBlock = ({
     const attrs = syncBlockStore.sourceManager.generateBodiedSyncBlockAttrs();
     const newBodiedSyncBlockNode = bodiedSyncBlock.createAndFill(attrs, conversionInfo.contentToInclude);
     if (!newBodiedSyncBlockNode) {
+      if (fg('platform_synced_block_dogfooding')) {
+        fireAnalyticsEvent === null || fireAnalyticsEvent === void 0 ? void 0 : fireAnalyticsEvent({
+          action: ACTION.ERROR,
+          actionSubject: ACTION_SUBJECT.SYNCED_BLOCK,
+          actionSubjectId: ACTION_SUBJECT_ID.SYNCED_BLOCK_CREATE,
+          attributes: {
+            error: 'Create and fill for content failed'
+          },
+          eventType: EVENT_TYPE.OPERATIONAL
+        });
+      }
       return false;
     }
 
@@ -180,7 +202,18 @@ export const removeSyncedBlock = api => (state, dispatch, _view) => {
   api === null || api === void 0 ? void 0 : api.core.actions.focus();
   return true;
 };
-
+export const removeSyncedBlockAtPos = (api, pos) => {
+  api === null || api === void 0 ? void 0 : api.core.actions.execute(({
+    tr
+  }) => {
+    const node = tr.doc.nodeAt(pos);
+    if ((node === null || node === void 0 ? void 0 : node.type.name) === 'syncBlock') {
+      var _node$nodeSize;
+      return tr.replace(pos, pos + ((_node$nodeSize = node === null || node === void 0 ? void 0 : node.nodeSize) !== null && _node$nodeSize !== void 0 ? _node$nodeSize : 0));
+    }
+    return tr;
+  });
+};
 /**
  * Deletes (bodied)SyncBlock node and paste its content to the editor
  */

package/dist/es2019/nodeviews/syncedBlock.js

@@ -2,9 +2,10 @@ 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 } from '@atlaskit/editor-common/sync-block';
+import { SyncBlockSharedCssClassName, SyncBlockActionsProvider } from '@atlaskit/editor-common/sync-block';
 import { useFetchSyncBlockData, useFetchSyncBlockTitle } from '@atlaskit/editor-synced-block-provider';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { removeSyncedBlockAtPos } from '../editor-commands';
 import { SyncBlockRendererWrapper } from '../ui/SyncBlockRendererWrapper';
 export class SyncBlock extends ReactNodeView {
   constructor(props) {
@@ -18,7 +19,9 @@ export class SyncBlock extends ReactNodeView {
     domRef.classList.add(SyncBlockSharedCssClassName.prefix);
     return domRef;
   }
-  render() {
+  render({
+    getPos
+  }) {
     var _this$options, _this$api$syncedBlock, _this$api, _this$api$syncedBlock2, _this$api$syncedBlock3, _this$api2, _this$api2$analytics, _this$options2, _this$options3;
     if (!((_this$options = this.options) !== null && _this$options !== void 0 && _this$options.syncedBlockRenderer)) {
       return null;
@@ -41,6 +44,14 @@ export class SyncBlock extends ReactNodeView {
       component: ACTION_SUBJECT.SYNCED_BLOCK,
       dispatchAnalyticsEvent: (_this$api2 = this.api) === null || _this$api2 === void 0 ? void 0 : (_this$api2$analytics = _this$api2.analytics) === null || _this$api2$analytics === void 0 ? void 0 : _this$api2$analytics.actions.fireAnalyticsEvent,
       fallbackComponent: null
+    }, /*#__PURE__*/React.createElement(SyncBlockActionsProvider, {
+      removeSyncBlock: () => {
+        const pos = getPos();
+        if (pos !== undefined) {
+          removeSyncedBlockAtPos(this.api, pos);
+        }
+      },
+      fetchSyncBlockSourceInfo: sourceAri => 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,
@@ -50,7 +61,7 @@ export class SyncBlock extends ReactNodeView {
         return useFetchSyncBlockData(syncBlockStore, resourceId, localId, (_this$api3 = this.api) === null || _this$api3 === void 0 ? void 0 : (_this$api3$analytics = _this$api3.analytics) === null || _this$api3$analytics === void 0 ? void 0 : (_this$api3$analytics$ = _this$api3$analytics.actions) === null || _this$api3$analytics$ === void 0 ? void 0 : _this$api3$analytics$.fireAnalyticsEvent);
       },
       api: this.api
-    })) : /*#__PURE__*/React.createElement(SyncBlockRendererWrapper, {
+    }))) : /*#__PURE__*/React.createElement(SyncBlockRendererWrapper, {
       localId: this.node.attrs.localId,
       syncedBlockRenderer: (_this$options3 = this.options) === null || _this$options3 === void 0 ? void 0 : _this$options3.syncedBlockRenderer,
       useFetchSyncBlockTitle: () => useFetchSyncBlockTitle(syncBlockStore, this.node),
@@ -81,7 +92,7 @@ export const syncBlockNodeView = ({
     options,
     node,
     view,
-    getPos,
+    getPos: getPos,
     portalProviderAPI,
     eventDispatcher
   }).init();