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

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

@@ -47,7 +47,7 @@ var SourceSyncBlockStoreManager = exports.SourceSyncBlockStoreManager = /*#__PUR
     key: "flushBodiedSyncBlocks",
     value: (function () {
       var _flushBodiedSyncBlocks = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
-        var bodiedSyncBlockNodes, bodiedSyncBlockData, resourceIds;
+        var bodiedSyncBlockNodes, bodiedSyncBlockData, writeResults;
         return _regenerator.default.wrap(function _callee$(_context) {
           while (1) switch (_context.prev = _context.next) {
             case 0:
@@ -79,9 +79,9 @@ var SourceSyncBlockStoreManager = exports.SourceSyncBlockStoreManager = /*#__PUR
               _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;
@@ -103,6 +103,35 @@ var SourceSyncBlockStoreManager = exports.SourceSyncBlockStoreManager = /*#__PUR
     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) {
@@ -118,31 +147,63 @@ var SourceSyncBlockStoreManager = exports.SourceSyncBlockStoreManager = /*#__PUR
       return !!this.confirmationCallback;
     }
   }, {
-    key: "createSyncBlockNode",
-    value: function createSyncBlockNode() {
+    key: "generateBodiedSyncBlockAttrs",
+    value: function generateBodiedSyncBlockAttrs() {
       var _this$dataProvider;
-      var blockInstanceId = (0, _uuid.default)();
+      var localId = (0, _uuid.default)();
       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 = (0, _ari.resourceIdFromSourceAndLocalId)(sourceId, blockInstanceId);
-      var syncBlockNode = {
-        attrs: {
-          resourceId: resourceId,
-          localId: blockInstanceId
-        },
-        type: 'bodiedSyncBlock'
+      var resourceId = (0, _ari.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([(0, _utils.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 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2(tr, syncBlockIds) {
-        var _this2 = this;
+        var _this3 = this;
         var confirmed, _this$editorView, results;
         return _regenerator.default.wrap(function _callee2$(_context2) {
           while (1) switch (_context2.prev = _context2.next) {
@@ -177,7 +238,7 @@ var SourceSyncBlockStoreManager = exports.SourceSyncBlockStoreManager = /*#__PUR
               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
                 }

package/dist/cjs/store-manager/syncBlockStoreManager.js

@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.SyncBlockStoreManager = void 0;
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-var _createSyncBlock = require("../utils/createSyncBlock");
+var _utils = require("../utils/utils");
 var _referenceSyncBlockStoreManager = require("./referenceSyncBlockStoreManager");
 var _sourceSyncBlockStoreManager = require("./sourceSyncBlockStoreManager");
 // A store manager responsible for the lifecycle and state management of sync blocks in an editor instance.
@@ -30,10 +30,10 @@ var SyncBlockStoreManager = exports.SyncBlockStoreManager = /*#__PURE__*/functio
   return (0, _createClass2.default)(SyncBlockStoreManager, [{
     key: "fetchSyncBlocksData",
     value: function fetchSyncBlocksData(nodes) {
-      var syncBlockNodes = nodes.filter(function (node) {
-        return node.type.name === 'syncBlock' && node.attrs.resourceId && node.attrs.localId;
-      }).map(function (node) {
-        return (0, _createSyncBlock.createSyncBlockNode)(node.attrs.localId, node.attrs.resourceId);
+      var syncBlockNodes = nodes.map(function (node) {
+        return (0, _utils.convertPMNodeToSyncBlockNode)(node);
+      }).filter(function (node) {
+        return node !== undefined;
       }) || [];
       if (syncBlockNodes.length === 0) {
         return Promise.resolve([]);
@@ -105,11 +105,44 @@ var SyncBlockStoreManager = exports.SyncBlockStoreManager = /*#__PURE__*/functio
       // only applicable to source sync block, for now (will be refactored further)
       return this.sourceSyncBlockStoreManager.requireConfirmationBeforeDelete();
     }
+
+    /**
+     * Register callback function (which inserts node, handles focus etc) to be used later when creation to backend succeed
+     */
+  }, {
+    key: "registerCreationCallback",
+    value: function registerCreationCallback(callback) {
+      this.sourceSyncBlockStoreManager.registerCreationCallback(callback);
+    }
+
+    /**
+     *
+     * @returns true if waiting for the result of saving new bodiedSyncBlock to backend
+     */
+  }, {
+    key: "hasPendingCreation",
+    value: function hasPendingCreation() {
+      return this.sourceSyncBlockStoreManager.hasPendingCreation();
+    }
+
+    /**
+     * @returns attributes for a new bodiedSyncBlock node
+     */
+  }, {
+    key: "generateBodiedSyncBlockAttrs",
+    value: function generateBodiedSyncBlockAttrs() {
+      return this.sourceSyncBlockStoreManager.generateBodiedSyncBlockAttrs();
+    }
+
+    /**
+     * Save bodiedSyncBlock with empty content to backend
+     * @param attrs attributes Ids of the node
+     */
   }, {
-    key: "createSyncBlockNode",
-    value: function createSyncBlockNode() {
+    key: "createBodiedSyncBlockNode",
+    value: function createBodiedSyncBlockNode(attrs) {
       // only applicable to source sync block, for now (will be refactored further)
-      return this.sourceSyncBlockStoreManager.createSyncBlockNode();
+      return this.sourceSyncBlockStoreManager.createBodiedSyncBlockNode(attrs);
     }
   }, {
     key: "subscribeToSyncBlockData",

package/dist/cjs/utils/errorHandling.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.stringifyError = void 0;
+var stringifyError = exports.stringifyError = function stringifyError(error) {
+  try {
+    return JSON.stringify(error);
+  } catch (_unused) {
+    return undefined;
+  }
+};

package/dist/cjs/utils/utils.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.isBlogPageType = exports.convertSyncBlockPMNodeToSyncBlockData = void 0;
+exports.isBlogPageType = exports.createSyncBlockNode = exports.createBodiedSyncBlockNode = exports.convertSyncBlockPMNodeToSyncBlockData = exports.convertSyncBlockJSONNodeToSyncBlockNode = exports.convertPMNodeToSyncBlockNode = void 0;
 var convertSyncBlockPMNodeToSyncBlockData = exports.convertSyncBlockPMNodeToSyncBlockData = function convertSyncBlockPMNodeToSyncBlockData(node) {
   return {
     blockInstanceId: node.attrs.localId,
@@ -13,4 +13,35 @@ var convertSyncBlockPMNodeToSyncBlockData = exports.convertSyncBlockPMNodeToSync
 };
 var isBlogPageType = exports.isBlogPageType = function isBlogPageType(pageType) {
   return pageType === 'blogpost';
+};
+var createSyncBlockNode = exports.createSyncBlockNode = function createSyncBlockNode(localId, resourceId) {
+  return {
+    type: 'syncBlock',
+    attrs: {
+      localId: localId,
+      resourceId: resourceId
+    }
+  };
+};
+var createBodiedSyncBlockNode = exports.createBodiedSyncBlockNode = function createBodiedSyncBlockNode(localId, resourceId) {
+  return {
+    type: 'bodiedSyncBlock',
+    attrs: {
+      localId: localId,
+      resourceId: resourceId
+    }
+  };
+};
+var convertSyncBlockJSONNodeToSyncBlockNode = exports.convertSyncBlockJSONNodeToSyncBlockNode = function 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);
+};
+var convertPMNodeToSyncBlockNode = exports.convertPMNodeToSyncBlockNode = function 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/es2019/hooks/useFetchSyncBlockData.js

@@ -1,6 +1,6 @@
 import { useCallback, useEffect, useState } from 'react';
 import { SyncBlockError } from '../common/types';
-import { createSyncBlockNode } from '../utils/createSyncBlock';
+import { createSyncBlockNode } from '../utils/utils';
 export const useFetchSyncBlockData = (manager, resourceId, localId) => {
   const [syncBlockInstance, setSyncBlockInstance] = useState(null);
   const [isLoading, setIsLoading] = useState(true);

package/dist/es2019/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/es2019/providers/confluence/confluenceContentAPI.js

@@ -3,6 +3,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';
 
 /**
@@ -118,7 +119,7 @@ class ConfluenceADFWriteProvider {
         if (((_contentProperty$data7 = contentProperty.data.confluence.createBlogPostProperty.blogPostProperty) === null || _contentProperty$data7 === void 0 ? void 0 : _contentProperty$data7.key) === key) {
           return key;
         } else {
-          throw new Error('Failed to create blog post content property');
+          return Promise.reject('Failed to create blog post content property');
         }
       } else {
         var _contentProperty$data8;
@@ -126,20 +127,31 @@ class ConfluenceADFWriteProvider {
         if (((_contentProperty$data8 = contentProperty.data.confluence.createPageProperty.pageProperty) === null || _contentProperty$data8 === void 0 ? void 0 : _contentProperty$data8.key) === key) {
           return key;
         } else {
-          throw new Error('Failed to create page content property');
+          return Promise.reject('Failed to create page content property');
         }
       }
     });
     this.config = config;
   }
   async writeData(data) {
+    let match;
+    const {
+      resourceId
+    } = data;
+    try {
+      match = getPageIdAndTypeFromAri(data.resourceId);
+    } catch (error) {
+      return {
+        error: stringifyError(error)
+      };
+    }
     const {
       id: pageId,
       type: pageType
-    } = getPageIdAndTypeFromAri(data.resourceId);
-    if (data.resourceId) {
+    } = match;
+    try {
       // Update existing content property
-      const localId = getLocalIdFromAri(data.resourceId);
+      const localId = getLocalIdFromAri(resourceId);
       const key = getContentPropertyKey(this.config.contentPropertyKey, localId);
       const options = {
         pageId,
@@ -148,55 +160,65 @@ class ConfluenceADFWriteProvider {
         cloudId: this.config.cloudId,
         pageType
       };
-      if (isBlogPageType(pageType)) {
-        var _contentProperty$data9;
-        const contentProperty = await updateContentProperty(options);
-        if (((_contentProperty$data9 = contentProperty.data.confluence.updateValueBlogPostProperty.blogPostProperty) === null || _contentProperty$data9 === void 0 ? void 0 : _contentProperty$data9.key) === key) {
-          return key;
-        } else if (contentProperty.data.confluence.updateValueBlogPostProperty.blogPostProperty === null) {
-          return this.createNewContentProperty(pageId, key, data, pageType);
-        } else {
-          throw new Error('Failed to update blog post content property');
-        }
+      const updatePayload = await updateContentProperty(options);
+      const updateResult = isBlogPageType(pageType) ? updatePayload.data.confluence.updateValueBlogPostProperty.blogPostProperty : updatePayload.data.confluence.updateValuePageProperty.pageProperty;
+      if ((updateResult === null || updateResult === void 0 ? void 0 : updateResult.key) === key) {
+        return {
+          resourceId
+        };
+      } else if (!updateResult) {
+        return this.createNewContentProperty(pageId, key, data, pageType).then(() => {
+          return {
+            resourceId
+          };
+        }, error => {
+          return {
+            error
+          };
+        });
       } else {
-        var _contentProperty$data0;
-        const contentProperty = await updateContentProperty(options);
-        if (((_contentProperty$data0 = contentProperty.data.confluence.updateValuePageProperty.pageProperty) === null || _contentProperty$data0 === void 0 ? void 0 : _contentProperty$data0.key) === key) {
-          return key;
-        } else if (contentProperty.data.confluence.updateValuePageProperty.pageProperty === null) {
-          return this.createNewContentProperty(pageId, key, data, pageType);
-        } else {
-          throw new Error('Failed to update content property');
-        }
+        return {
+          error: `Failed to update ${pageType} content property`
+        };
       }
-    } else {
-      // Create new content property
-      const key = getContentPropertyKey(this.config.contentPropertyKey, data.blockInstanceId);
-      return this.createNewContentProperty(pageId, key, data, pageType);
+    } catch {
+      return {
+        error: `Failed to write ${pageType}`
+      };
     }
   }
   async deleteData(resourceId) {
+    let deletePayload, deleteResult, match;
+    try {
+      match = getPageIdAndTypeFromAri(resourceId);
+    } catch (error) {
+      return {
+        resourceId,
+        success: false,
+        error: stringifyError(error)
+      };
+    }
     const {
       id: pageId,
       type: pageType
-    } = getPageIdAndTypeFromAri(resourceId);
-    const localId = getLocalIdFromAri(resourceId);
-    const key = getContentPropertyKey(this.config.contentPropertyKey, localId);
-    const options = {
-      pageId,
-      key,
-      cloudId: this.config.cloudId,
-      pageType
-    };
-    let deletePayload, deleteResult;
+    } = match;
     try {
+      const localId = getLocalIdFromAri(resourceId);
+      const key = getContentPropertyKey(this.config.contentPropertyKey, localId);
+      const options = {
+        pageId,
+        key,
+        cloudId: this.config.cloudId,
+        pageType
+      };
       deletePayload = await deleteContentProperty(options);
       deleteResult = isBlogPageType(pageType) ? deletePayload.data.confluence.deleteBlogPostProperty : deletePayload.data.confluence.deletePageProperty;
-    } catch {
+    } catch (error) {
+      var _stringifyError;
       return {
         resourceId,
         success: false,
-        error: `Fail to delete ${pageType} content property`
+        error: (_stringifyError = stringifyError(error)) !== null && _stringifyError !== void 0 ? _stringifyError : `Fail to delete ${pageType} content property`
       };
     }
     return {

package/dist/es2019/providers/syncBlockProvider.js

@@ -41,19 +41,25 @@ export class SyncBlockProvider extends SyncBlockDataProvider {
    * @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
    */
-  writeNodesData(nodes, data) {
-    const resourceIds = [];
-    nodes.forEach((_node, index) => {
+  async writeNodesData(nodes, data) {
+    const results = await Promise.allSettled(nodes.map((_node, index) => {
       if (!data[index].content) {
-        resourceIds.push(Promise.reject('No Synced Block content to write'));
-        return;
+        return Promise.reject('No Synced Block content to write');
+      }
+      return this.writeProvider.writeData(data[index]);
+    }));
+    return results.map(result => {
+      if (result.status === 'fulfilled') {
+        return result.value;
+      } else {
+        return {
+          error: result.reason
+        };
       }
-      const resourceId = this.writeProvider.writeData(data[index]);
-      resourceIds.push(resourceId);
     });
-    return Promise.all(resourceIds);
   }
   async deleteNodesData(resourceIds) {
     const results = await Promise.allSettled(resourceIds.map(resourceId => this.writeProvider.deleteData(resourceId)));

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

@@ -1,6 +1,6 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import { createSyncBlockNode } from '../utils/createSyncBlock';
 import { resolveSyncBlockInstance } from '../utils/resolveSyncBlockInstance';
+import { createSyncBlockNode } from '../utils/utils';
 export class ReferenceSyncBlockStoreManager {
   constructor(dataProvider) {
     _defineProperty(this, "isRefreshingSubscriptions", false);

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

@@ -1,7 +1,7 @@
 import uuid from 'uuid';
 import { rebaseTransaction } from '../common/rebase-transaction';
 import { resourceIdFromSourceAndLocalId } from '../utils/ari';
-import { convertSyncBlockPMNodeToSyncBlockData } from '../utils/utils';
+import { convertSyncBlockPMNodeToSyncBlockData, createBodiedSyncBlockNode } from '../utils/utils';
 export class SourceSyncBlockStoreManager {
   constructor(dataProvider) {
     this.dataProvider = dataProvider;
@@ -50,8 +50,8 @@ export class SourceSyncBlockStoreManager {
       if (bodiedSyncBlockNodes.length === 0) {
         return Promise.resolve(true);
       }
-      const resourceIds = await this.dataProvider.writeNodesData(bodiedSyncBlockNodes, bodiedSyncBlockData);
-      return resourceIds.every(resourceId => resourceId !== undefined);
+      const writeResults = await this.dataProvider.writeNodesData(bodiedSyncBlockNodes, bodiedSyncBlockData);
+      return writeResults.every(result => result.resourceId !== undefined);
     } catch {
       //TODO: EDITOR-1921 - add error analytics
       return false;
@@ -60,6 +60,27 @@ export class SourceSyncBlockStoreManager {
   setEditorView(editorView) {
     this.editorView = editorView;
   }
+  registerPendingCreation(resourceId) {
+    this.pendingResourceId = resourceId;
+  }
+  registerCreationCallback(callback) {
+    this.creationCallback = callback;
+  }
+
+  /**
+   *  Fires callback to insert node (if creation is successful) and clears pending creation data
+   * @param success
+   */
+  commitPendingCreation(success) {
+    if (success && this.creationCallback) {
+      this.creationCallback();
+    }
+    this.pendingResourceId = undefined;
+    this.creationCallback = undefined;
+  }
+  hasPendingCreation() {
+    return !!this.pendingResourceId;
+  }
   registerConfirmationCallback(callback) {
     this.confirmationCallback = callback;
     return () => {
@@ -69,24 +90,55 @@ export class SourceSyncBlockStoreManager {
   requireConfirmationBeforeDelete() {
     return !!this.confirmationCallback;
   }
-  createSyncBlockNode() {
+  generateBodiedSyncBlockAttrs() {
     var _this$dataProvider;
-    const blockInstanceId = uuid();
+    const localId = uuid();
     const 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
-    const resourceId = resourceIdFromSourceAndLocalId(sourceId, blockInstanceId);
-    const syncBlockNode = {
-      attrs: {
+    const resourceId = resourceIdFromSourceAndLocalId(sourceId, localId);
+    return {
+      resourceId,
+      localId
+    };
+  }
+  createBodiedSyncBlockNode(attrs) {
+    try {
+      if (!this.dataProvider) {
+        throw new Error('Data provider not set');
+      }
+      const {
         resourceId,
         localId: blockInstanceId
-      },
-      type: 'bodiedSyncBlock'
-    };
-    return syncBlockNode;
+      } = attrs;
+      this.dataProvider.writeNodesData([createBodiedSyncBlockNode(blockInstanceId, resourceId)], [{
+        content: [],
+        blockInstanceId,
+        resourceId: resourceId
+      }]).then(results => {
+        results.forEach(result => {
+          const resourceId = result.resourceId;
+          if (resourceId) {
+            this.commitPendingCreation(true);
+          } else {
+            this.commitPendingCreation(false);
+            // TODO: EDITOR-1921 - add error analytics
+          }
+        });
+      }).catch(_reason => {
+        this.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
+    }
   }
   async deleteSyncBlocksWithConfirmation(tr, syncBlockIds) {
     if (this.confirmationCallback) {

package/dist/es2019/store-manager/syncBlockStoreManager.js

@@ -1,4 +1,4 @@
-import { createSyncBlockNode } from '../utils/createSyncBlock';
+import { convertPMNodeToSyncBlockNode } from '../utils/utils';
 import { ReferenceSyncBlockStoreManager } from './referenceSyncBlockStoreManager';
 import { SourceSyncBlockStoreManager } from './sourceSyncBlockStoreManager';
 
@@ -19,11 +19,7 @@ export class SyncBlockStoreManager {
    * @returns The fetched sync block data results
    */
   fetchSyncBlocksData(nodes) {
-    const syncBlockNodes = nodes.filter(node => {
-      return node.type.name === 'syncBlock' && node.attrs.resourceId && node.attrs.localId;
-    }).map(node => {
-      return createSyncBlockNode(node.attrs.localId, node.attrs.resourceId);
-    }) || [];
+    const syncBlockNodes = nodes.map(node => convertPMNodeToSyncBlockNode(node)).filter(node => node !== undefined) || [];
     if (syncBlockNodes.length === 0) {
       return Promise.resolve([]);
     }
@@ -78,9 +74,36 @@ export class SyncBlockStoreManager {
     // only applicable to source sync block, for now (will be refactored further)
     return this.sourceSyncBlockStoreManager.requireConfirmationBeforeDelete();
   }
-  createSyncBlockNode() {
+
+  /**
+   * Register callback function (which inserts node, handles focus etc) to be used later when creation to backend succeed
+   */
+  registerCreationCallback(callback) {
+    this.sourceSyncBlockStoreManager.registerCreationCallback(callback);
+  }
+
+  /**
+   *
+   * @returns true if waiting for the result of saving new bodiedSyncBlock to backend
+   */
+  hasPendingCreation() {
+    return this.sourceSyncBlockStoreManager.hasPendingCreation();
+  }
+
+  /**
+   * @returns attributes for a new bodiedSyncBlock node
+   */
+  generateBodiedSyncBlockAttrs() {
+    return this.sourceSyncBlockStoreManager.generateBodiedSyncBlockAttrs();
+  }
+
+  /**
+   * Save bodiedSyncBlock with empty content to backend
+   * @param attrs attributes Ids of the node
+   */
+  createBodiedSyncBlockNode(attrs) {
     // only applicable to source sync block, for now (will be refactored further)
-    return this.sourceSyncBlockStoreManager.createSyncBlockNode();
+    return this.sourceSyncBlockStoreManager.createBodiedSyncBlockNode(attrs);
   }
   subscribeToSyncBlockData(node, callback) {
     return this.referenceSyncBlockStoreManager.subscribe(node, callback);

package/dist/es2019/utils/errorHandling.js

@@ -0,0 +1,7 @@
+export const stringifyError = error => {
+  try {
+    return JSON.stringify(error);
+  } catch {
+    return undefined;
+  }
+};