@atlaskit/editor-synced-block-provider 2.6.0 → 2.7.0

package/dist/es2019/utils/utils.js

@@ -7,4 +7,35 @@ export const convertSyncBlockPMNodeToSyncBlockData = node => {
 };
 export const isBlogPageType = pageType => {
   return pageType === 'blogpost';
+};
+export const createSyncBlockNode = (localId, resourceId) => {
+  return {
+    type: 'syncBlock',
+    attrs: {
+      localId,
+      resourceId
+    }
+  };
+};
+export const createBodiedSyncBlockNode = (localId, resourceId) => {
+  return {
+    type: 'bodiedSyncBlock',
+    attrs: {
+      localId,
+      resourceId
+    }
+  };
+};
+export const convertSyncBlockJSONNodeToSyncBlockNode = node => {
+  if (node.type !== 'syncBlock' || !node.attrs || !('localId' in node.attrs) || !('resourceId' in node.attrs) || typeof node.attrs.localId !== 'string' || typeof node.attrs.resourceId !== 'string') {
+    return undefined;
+  }
+  return createSyncBlockNode(node.attrs.localId, node.attrs.resourceId);
+};
+export const convertPMNodeToSyncBlockNode = node => {
+  var _node$attrs, _node$attrs2;
+  if (node.type.name !== 'syncBlock' || !((_node$attrs = node.attrs) !== null && _node$attrs !== void 0 && _node$attrs.localId) || !((_node$attrs2 = node.attrs) !== null && _node$attrs2 !== void 0 && _node$attrs2.resourceId) || typeof node.attrs.localId !== 'string' || typeof node.attrs.resourceId !== 'string') {
+    return undefined;
+  }
+  return createSyncBlockNode(node.attrs.localId, node.attrs.resourceId);
 };

package/dist/esm/hooks/useFetchSyncBlockData.js

@@ -3,7 +3,7 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _regeneratorRuntime from "@babel/runtime/regenerator";
 import { useCallback, useEffect, useState } from 'react';
 import { SyncBlockError } from '../common/types';
-import { createSyncBlockNode } from '../utils/createSyncBlock';
+import { createSyncBlockNode } from '../utils/utils';
 export var useFetchSyncBlockData = function useFetchSyncBlockData(manager, resourceId, localId) {
   var _useState = useState(null),
     _useState2 = _slicedToArray(_useState, 2),

package/dist/esm/index.js

@@ -11,6 +11,5 @@ export { SyncBlockProvider as SyncedBlockProvider, useMemoizedSyncedBlockProvide
 export { ReferenceSyncBlockStoreManager } from './store-manager/referenceSyncBlockStoreManager';
 export { SyncBlockStoreManager } from './store-manager/syncBlockStoreManager';
 export { getConfluencePageAri, getPageIdAndTypeFromAri } from './utils/ari';
-export { createSyncBlockNode } from './utils/createSyncBlock';
-export { resolveSyncBlockInstance } from './utils/resolveSyncBlockInstance';
-export { convertSyncBlockPMNodeToSyncBlockData } from './utils/utils';
+export { createSyncBlockNode, convertSyncBlockPMNodeToSyncBlockData, convertSyncBlockJSONNodeToSyncBlockNode } from './utils/utils';
+export { resolveSyncBlockInstance } from './utils/resolveSyncBlockInstance';

package/dist/esm/providers/confluence/confluenceContentAPI.js

@@ -8,6 +8,7 @@ import { useMemo } from 'react';
 import { SyncBlockError } from '../../common/types';
 import { getLocalIdFromAri, getPageIdAndTypeFromAri } from '../../utils/ari';
 import { getContentProperty, createContentProperty, updateContentProperty, deleteContentProperty } from '../../utils/contentProperty';
+import { stringifyError } from '../../utils/errorHandling';
 import { isBlogPageType } from '../../utils/utils';
 
 /**
@@ -163,7 +164,7 @@ var ConfluenceADFWriteProvider = /*#__PURE__*/function () {
               }
               return _context2.abrupt("return", key);
             case 9:
-              throw new Error('Failed to create blog post content property');
+              return _context2.abrupt("return", Promise.reject('Failed to create blog post content property'));
             case 10:
               _context2.next = 20;
               break;
@@ -178,7 +179,7 @@ var ConfluenceADFWriteProvider = /*#__PURE__*/function () {
               }
               return _context2.abrupt("return", key);
             case 19:
-              throw new Error('Failed to create page content property');
+              return _context2.abrupt("return", Promise.reject('Failed to create page content property'));
             case 20:
             case "end":
               return _context2.stop();
@@ -195,17 +196,26 @@ var ConfluenceADFWriteProvider = /*#__PURE__*/function () {
     key: "writeData",
     value: function () {
       var _writeData = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3(data) {
-        var _getPageIdAndTypeFrom2, pageId, pageType, localId, key, options, _contentProperty$data4, contentProperty, _contentProperty3$dat, _contentProperty3, _key;
+        var match, resourceId, _match, pageId, pageType, localId, key, options, updatePayload, updateResult;
         return _regeneratorRuntime.wrap(function _callee3$(_context3) {
           while (1) switch (_context3.prev = _context3.next) {
             case 0:
-              _getPageIdAndTypeFrom2 = getPageIdAndTypeFromAri(data.resourceId), pageId = _getPageIdAndTypeFrom2.id, pageType = _getPageIdAndTypeFrom2.type;
-              if (!data.resourceId) {
-                _context3.next = 34;
-                break;
-              }
+              resourceId = data.resourceId;
+              _context3.prev = 1;
+              match = getPageIdAndTypeFromAri(data.resourceId);
+              _context3.next = 8;
+              break;
+            case 5:
+              _context3.prev = 5;
+              _context3.t0 = _context3["catch"](1);
+              return _context3.abrupt("return", {
+                error: stringifyError(_context3.t0)
+              });
+            case 8:
+              _match = match, pageId = _match.id, pageType = _match.type;
+              _context3.prev = 9;
               // Update existing content property
-              localId = getLocalIdFromAri(data.resourceId);
+              localId = getLocalIdFromAri(resourceId);
               key = getContentPropertyKey(this.config.contentPropertyKey, localId);
               options = {
                 pageId: pageId,
@@ -214,60 +224,50 @@ var ConfluenceADFWriteProvider = /*#__PURE__*/function () {
                 cloudId: this.config.cloudId,
                 pageType: pageType
               };
-              if (!isBlogPageType(pageType)) {
-                _context3.next = 20;
-                break;
-              }
-              _context3.next = 8;
+              _context3.next = 15;
               return updateContentProperty(options);
-            case 8:
-              contentProperty = _context3.sent;
-              if (!(((_contentProperty$data4 = contentProperty.data.confluence.updateValueBlogPostProperty.blogPostProperty) === null || _contentProperty$data4 === void 0 ? void 0 : _contentProperty$data4.key) === key)) {
-                _context3.next = 13;
+            case 15:
+              updatePayload = _context3.sent;
+              updateResult = isBlogPageType(pageType) ? updatePayload.data.confluence.updateValueBlogPostProperty.blogPostProperty : updatePayload.data.confluence.updateValuePageProperty.pageProperty;
+              if (!((updateResult === null || updateResult === void 0 ? void 0 : updateResult.key) === key)) {
+                _context3.next = 21;
                 break;
               }
-              return _context3.abrupt("return", key);
-            case 13:
-              if (!(contentProperty.data.confluence.updateValueBlogPostProperty.blogPostProperty === null)) {
-                _context3.next = 17;
+              return _context3.abrupt("return", {
+                resourceId: resourceId
+              });
+            case 21:
+              if (updateResult) {
+                _context3.next = 25;
                 break;
               }
-              return _context3.abrupt("return", this.createNewContentProperty(pageId, key, data, pageType));
-            case 17:
-              throw new Error('Failed to update blog post content property');
-            case 18:
-              _context3.next = 32;
+              return _context3.abrupt("return", this.createNewContentProperty(pageId, key, data, pageType).then(function () {
+                return {
+                  resourceId: resourceId
+                };
+              }, function (error) {
+                return {
+                  error: error
+                };
+              }));
+            case 25:
+              return _context3.abrupt("return", {
+                error: "Failed to update ".concat(pageType, " content property")
+              });
+            case 26:
+              _context3.next = 31;
               break;
-            case 20:
-              _context3.next = 22;
-              return updateContentProperty(options);
-            case 22:
-              _contentProperty3 = _context3.sent;
-              if (!(((_contentProperty3$dat = _contentProperty3.data.confluence.updateValuePageProperty.pageProperty) === null || _contentProperty3$dat === void 0 ? void 0 : _contentProperty3$dat.key) === key)) {
-                _context3.next = 27;
-                break;
-              }
-              return _context3.abrupt("return", key);
-            case 27:
-              if (!(_contentProperty3.data.confluence.updateValuePageProperty.pageProperty === null)) {
-                _context3.next = 31;
-                break;
-              }
-              return _context3.abrupt("return", this.createNewContentProperty(pageId, key, data, pageType));
+            case 28:
+              _context3.prev = 28;
+              _context3.t1 = _context3["catch"](9);
+              return _context3.abrupt("return", {
+                error: "Failed to write ".concat(pageType)
+              });
             case 31:
-              throw new Error('Failed to update content property');
-            case 32:
-              _context3.next = 36;
-              break;
-            case 34:
-              // Create new content property
-              _key = getContentPropertyKey(this.config.contentPropertyKey, data.blockInstanceId);
-              return _context3.abrupt("return", this.createNewContentProperty(pageId, _key, data, pageType));
-            case 36:
             case "end":
               return _context3.stop();
           }
-        }, _callee3, this);
+        }, _callee3, this, [[1, 5], [9, 28]]);
       }));
       function writeData(_x6) {
         return _writeData.apply(this, arguments);
@@ -278,11 +278,25 @@ var ConfluenceADFWriteProvider = /*#__PURE__*/function () {
     key: "deleteData",
     value: function () {
       var _deleteData = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee4(resourceId) {
-        var _getPageIdAndTypeFrom3, pageId, pageType, localId, key, options, deletePayload, deleteResult;
+        var deletePayload, deleteResult, match, _match2, pageId, pageType, localId, key, options, _stringifyError;
         return _regeneratorRuntime.wrap(function _callee4$(_context4) {
           while (1) switch (_context4.prev = _context4.next) {
             case 0:
-              _getPageIdAndTypeFrom3 = getPageIdAndTypeFromAri(resourceId), pageId = _getPageIdAndTypeFrom3.id, pageType = _getPageIdAndTypeFrom3.type;
+              _context4.prev = 0;
+              match = getPageIdAndTypeFromAri(resourceId);
+              _context4.next = 7;
+              break;
+            case 4:
+              _context4.prev = 4;
+              _context4.t0 = _context4["catch"](0);
+              return _context4.abrupt("return", {
+                resourceId: resourceId,
+                success: false,
+                error: stringifyError(_context4.t0)
+              });
+            case 7:
+              _match2 = match, pageId = _match2.id, pageType = _match2.type;
+              _context4.prev = 8;
               localId = getLocalIdFromAri(resourceId);
               key = getContentPropertyKey(this.config.contentPropertyKey, localId);
               options = {
@@ -291,33 +305,32 @@ var ConfluenceADFWriteProvider = /*#__PURE__*/function () {
                 cloudId: this.config.cloudId,
                 pageType: pageType
               };
-              _context4.prev = 4;
-              _context4.next = 7;
+              _context4.next = 14;
               return deleteContentProperty(options);
-            case 7:
+            case 14:
               deletePayload = _context4.sent;
               deleteResult = isBlogPageType(pageType) ? deletePayload.data.confluence.deleteBlogPostProperty : deletePayload.data.confluence.deletePageProperty;
-              _context4.next = 14;
+              _context4.next = 21;
               break;
-            case 11:
-              _context4.prev = 11;
-              _context4.t0 = _context4["catch"](4);
+            case 18:
+              _context4.prev = 18;
+              _context4.t1 = _context4["catch"](8);
               return _context4.abrupt("return", {
                 resourceId: resourceId,
                 success: false,
-                error: "Fail to delete ".concat(pageType, " content property")
+                error: (_stringifyError = stringifyError(_context4.t1)) !== null && _stringifyError !== void 0 ? _stringifyError : "Fail to delete ".concat(pageType, " content property")
               });
-            case 14:
+            case 21:
               return _context4.abrupt("return", {
                 resourceId: resourceId,
                 success: deleteResult.success,
                 error: deleteResult.errors.join()
               });
-            case 15:
+            case 22:
             case "end":
               return _context4.stop();
           }
-        }, _callee4, this, [[4, 11]]);
+        }, _callee4, this, [[0, 4], [8, 18]]);
       }));
       function deleteData(_x7) {
         return _deleteData.apply(this, arguments);

package/dist/esm/providers/syncBlockProvider.js

@@ -66,39 +66,63 @@ export var SyncBlockProvider = /*#__PURE__*/function (_SyncBlockDataProvide) {
      * @param nodes
      * @param data
      *
-     * @returns the resource ids of the nodes that were written
+     * @returns Array of {resourceId?: string, error?: string}.
+     * resourceId: resource id of the node if write successfully , error: reason for when write failed
      */
   }, {
     key: "writeNodesData",
-    value: function writeNodesData(nodes, data) {
-      var _this3 = this;
-      var resourceIds = [];
-      nodes.forEach(function (_node, index) {
-        if (!data[index].content) {
-          resourceIds.push(Promise.reject('No Synced Block content to write'));
-          return;
-        }
-        var resourceId = _this3.writeProvider.writeData(data[index]);
-        resourceIds.push(resourceId);
-      });
-      return Promise.all(resourceIds);
-    }
+    value: (function () {
+      var _writeNodesData = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(nodes, data) {
+        var _this3 = this;
+        var results;
+        return _regeneratorRuntime.wrap(function _callee$(_context) {
+          while (1) switch (_context.prev = _context.next) {
+            case 0:
+              _context.next = 2;
+              return Promise.allSettled(nodes.map(function (_node, index) {
+                if (!data[index].content) {
+                  return Promise.reject('No Synced Block content to write');
+                }
+                return _this3.writeProvider.writeData(data[index]);
+              }));
+            case 2:
+              results = _context.sent;
+              return _context.abrupt("return", results.map(function (result) {
+                if (result.status === 'fulfilled') {
+                  return result.value;
+                } else {
+                  return {
+                    error: result.reason
+                  };
+                }
+              }));
+            case 4:
+            case "end":
+              return _context.stop();
+          }
+        }, _callee);
+      }));
+      function writeNodesData(_x, _x2) {
+        return _writeNodesData.apply(this, arguments);
+      }
+      return writeNodesData;
+    }())
   }, {
     key: "deleteNodesData",
     value: function () {
-      var _deleteNodesData = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(resourceIds) {
+      var _deleteNodesData = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(resourceIds) {
         var _this4 = this;
         var results;
-        return _regeneratorRuntime.wrap(function _callee$(_context) {
-          while (1) switch (_context.prev = _context.next) {
+        return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+          while (1) switch (_context2.prev = _context2.next) {
             case 0:
-              _context.next = 2;
+              _context2.next = 2;
               return Promise.allSettled(resourceIds.map(function (resourceId) {
                 return _this4.writeProvider.deleteData(resourceId);
               }));
             case 2:
-              results = _context.sent;
-              return _context.abrupt("return", results.map(function (result, index) {
+              results = _context2.sent;
+              return _context2.abrupt("return", results.map(function (result, index) {
                 if (result.status === 'fulfilled') {
                   return result.value;
                 } else {
@@ -111,11 +135,11 @@ export var SyncBlockProvider = /*#__PURE__*/function (_SyncBlockDataProvide) {
               }));
             case 4:
             case "end":
-              return _context.stop();
+              return _context2.stop();
           }
-        }, _callee);
+        }, _callee2);
       }));
-      function deleteNodesData(_x) {
+      function deleteNodesData(_x3) {
         return _deleteNodesData.apply(this, arguments);
       }
       return deleteNodesData;
@@ -153,12 +177,12 @@ export var useMemoizedSyncedBlockProvider = function useMemoizedSyncedBlockProvi
   }, [fetchProvider, writeProvider, sourceId]);
 };
 var fetchURLandTitlefromARI = /*#__PURE__*/function () {
-  var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(ari, sourceLocalId) {
+  var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3(ari, sourceLocalId) {
     var response, _payload$data, _payload$data2, payload, url, title;
-    return _regeneratorRuntime.wrap(function _callee2$(_context2) {
-      while (1) switch (_context2.prev = _context2.next) {
+    return _regeneratorRuntime.wrap(function _callee3$(_context3) {
+      while (1) switch (_context3.prev = _context3.next) {
         case 0:
-          _context2.next = 2;
+          _context3.next = 2;
           return fetch('/gateway/api/object-resolver/resolve/ari', {
             method: 'POST',
             headers: {
@@ -170,18 +194,18 @@ var fetchURLandTitlefromARI = /*#__PURE__*/function () {
             })
           });
         case 2:
-          response = _context2.sent;
+          response = _context3.sent;
           if (!response.ok) {
-            _context2.next = 12;
+            _context3.next = 12;
             break;
           }
-          _context2.next = 6;
+          _context3.next = 6;
           return response.json();
         case 6:
-          payload = _context2.sent;
+          payload = _context3.sent;
           url = payload === null || payload === void 0 || (_payload$data = payload.data) === null || _payload$data === void 0 ? void 0 : _payload$data.url;
           title = payload === null || payload === void 0 || (_payload$data2 = payload.data) === null || _payload$data2 === void 0 ? void 0 : _payload$data2.name;
-          return _context2.abrupt("return", {
+          return _context3.abrupt("return", {
             url: typeof url === 'string' ? sourceLocalId ? url + "?block=".concat(sourceLocalId) : url : undefined,
             title: typeof title === 'string' ? title : undefined
           });
@@ -189,14 +213,14 @@ var fetchURLandTitlefromARI = /*#__PURE__*/function () {
           //eslint-disable-next-line no-console
           console.error('Failed to fetch URL and title from ARI', response.statusText);
         case 13:
-          return _context2.abrupt("return", undefined);
+          return _context3.abrupt("return", undefined);
         case 14:
         case "end":
-          return _context2.stop();
+          return _context3.stop();
       }
-    }, _callee2);
+    }, _callee3);
   }));
-  return function fetchURLandTitlefromARI(_x2, _x3) {
+  return function fetchURLandTitlefromARI(_x4, _x5) {
     return _ref.apply(this, arguments);
   };
 }();

package/dist/esm/store-manager/referenceSyncBlockStoreManager.js

@@ -9,8 +9,8 @@ import _regeneratorRuntime from "@babel/runtime/regenerator";
 function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t.return || t.return(); } finally { if (u) throw o; } } }; }
 function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
 function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
-import { createSyncBlockNode } from '../utils/createSyncBlock';
 import { resolveSyncBlockInstance } from '../utils/resolveSyncBlockInstance';
+import { createSyncBlockNode } from '../utils/utils';
 export var ReferenceSyncBlockStoreManager = /*#__PURE__*/function () {
   function ReferenceSyncBlockStoreManager(dataProvider) {
     _classCallCheck(this, ReferenceSyncBlockStoreManager);

package/dist/esm/store-manager/sourceSyncBlockStoreManager.js

@@ -5,7 +5,7 @@ import _regeneratorRuntime from "@babel/runtime/regenerator";
 import uuid from 'uuid';
 import { rebaseTransaction as _rebaseTransaction } from '../common/rebase-transaction';
 import { resourceIdFromSourceAndLocalId } from '../utils/ari';
-import { convertSyncBlockPMNodeToSyncBlockData } from '../utils/utils';
+import { convertSyncBlockPMNodeToSyncBlockData, createBodiedSyncBlockNode as _createBodiedSyncBlockNode } from '../utils/utils';
 export var SourceSyncBlockStoreManager = /*#__PURE__*/function () {
   function SourceSyncBlockStoreManager(dataProvider) {
     _classCallCheck(this, SourceSyncBlockStoreManager);
@@ -40,7 +40,7 @@ export var SourceSyncBlockStoreManager = /*#__PURE__*/function () {
     key: "flushBodiedSyncBlocks",
     value: (function () {
       var _flushBodiedSyncBlocks = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
-        var bodiedSyncBlockNodes, bodiedSyncBlockData, resourceIds;
+        var bodiedSyncBlockNodes, bodiedSyncBlockData, writeResults;
         return _regeneratorRuntime.wrap(function _callee$(_context) {
           while (1) switch (_context.prev = _context.next) {
             case 0:
@@ -72,9 +72,9 @@ export var SourceSyncBlockStoreManager = /*#__PURE__*/function () {
               _context.next = 10;
               return this.dataProvider.writeNodesData(bodiedSyncBlockNodes, bodiedSyncBlockData);
             case 10:
-              resourceIds = _context.sent;
-              return _context.abrupt("return", resourceIds.every(function (resourceId) {
-                return resourceId !== undefined;
+              writeResults = _context.sent;
+              return _context.abrupt("return", writeResults.every(function (result) {
+                return result.resourceId !== undefined;
               }));
             case 14:
               _context.prev = 14;
@@ -96,6 +96,35 @@ export var SourceSyncBlockStoreManager = /*#__PURE__*/function () {
     value: function setEditorView(editorView) {
       this.editorView = editorView;
     }
+  }, {
+    key: "registerPendingCreation",
+    value: function registerPendingCreation(resourceId) {
+      this.pendingResourceId = resourceId;
+    }
+  }, {
+    key: "registerCreationCallback",
+    value: function registerCreationCallback(callback) {
+      this.creationCallback = callback;
+    }
+
+    /**
+     *  Fires callback to insert node (if creation is successful) and clears pending creation data
+     * @param success
+     */
+  }, {
+    key: "commitPendingCreation",
+    value: function commitPendingCreation(success) {
+      if (success && this.creationCallback) {
+        this.creationCallback();
+      }
+      this.pendingResourceId = undefined;
+      this.creationCallback = undefined;
+    }
+  }, {
+    key: "hasPendingCreation",
+    value: function hasPendingCreation() {
+      return !!this.pendingResourceId;
+    }
   }, {
     key: "registerConfirmationCallback",
     value: function registerConfirmationCallback(callback) {
@@ -111,31 +140,63 @@ export var SourceSyncBlockStoreManager = /*#__PURE__*/function () {
       return !!this.confirmationCallback;
     }
   }, {
-    key: "createSyncBlockNode",
-    value: function createSyncBlockNode() {
+    key: "generateBodiedSyncBlockAttrs",
+    value: function generateBodiedSyncBlockAttrs() {
       var _this$dataProvider;
-      var blockInstanceId = uuid();
+      var localId = uuid();
       var sourceId = (_this$dataProvider = this.dataProvider) === null || _this$dataProvider === void 0 ? void 0 : _this$dataProvider.getSourceId();
       if (!sourceId) {
         throw new Error('Provider of sync block plugin is not set');
       }
 
       // This should be generated by the data provider implementation as it differs between data providers
-      var resourceId = resourceIdFromSourceAndLocalId(sourceId, blockInstanceId);
-      var syncBlockNode = {
-        attrs: {
-          resourceId: resourceId,
-          localId: blockInstanceId
-        },
-        type: 'bodiedSyncBlock'
+      var resourceId = resourceIdFromSourceAndLocalId(sourceId, localId);
+      return {
+        resourceId: resourceId,
+        localId: localId
       };
-      return syncBlockNode;
+    }
+  }, {
+    key: "createBodiedSyncBlockNode",
+    value: function createBodiedSyncBlockNode(attrs) {
+      var _this2 = this;
+      try {
+        if (!this.dataProvider) {
+          throw new Error('Data provider not set');
+        }
+        var resourceId = attrs.resourceId,
+          blockInstanceId = attrs.localId;
+        this.dataProvider.writeNodesData([_createBodiedSyncBlockNode(blockInstanceId, resourceId)], [{
+          content: [],
+          blockInstanceId: blockInstanceId,
+          resourceId: resourceId
+        }]).then(function (results) {
+          results.forEach(function (result) {
+            var resourceId = result.resourceId;
+            if (resourceId) {
+              _this2.commitPendingCreation(true);
+            } else {
+              _this2.commitPendingCreation(false);
+              // TODO: EDITOR-1921 - add error analytics
+            }
+          });
+        }).catch(function (_reason) {
+          _this2.commitPendingCreation(false);
+          // TODO: EDITOR-1921 - add error analytics
+        });
+        this.registerPendingCreation(resourceId);
+      } catch (error) {
+        if (this.hasPendingCreation()) {
+          this.commitPendingCreation(false);
+        }
+        // TODO: EDITOR-1921 - add error analytics
+      }
     }
   }, {
     key: "deleteSyncBlocksWithConfirmation",
     value: function () {
       var _deleteSyncBlocksWithConfirmation = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(tr, syncBlockIds) {
-        var _this2 = this;
+        var _this3 = this;
         var confirmed, _this$editorView, results;
         return _regeneratorRuntime.wrap(function _callee2$(_context2) {
           while (1) switch (_context2.prev = _context2.next) {
@@ -170,7 +231,7 @@ export var SourceSyncBlockStoreManager = /*#__PURE__*/function () {
               results.forEach(function (result) {
                 if (result.success) {
                   // Only delete when it's deleted successfully in backend
-                  _this2.syncBlockCache.delete(result.resourceId);
+                  _this3.syncBlockCache.delete(result.resourceId);
                 } else {
                   // TODO: EDITOR-1921 - add error analytics with result.error
                 }