@atlaskit/editor-plugin-synced-block 4.1.1 → 4.1.2

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @atlaskit/editor-plugin-synced-block
 
+## 4.1.2
+
+### Patch Changes
+
+- [`5b03ddd528034`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/5b03ddd528034) -
+  [EDITOR-2542] Save new bodiedSyncBlock to backend when creating the node, so that the node can be
+  copied and reference without page being published/updated
+- Updated dependencies
+
 ## 4.1.1
 
 ### Patch Changes

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

@@ -1,17 +1,13 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.removeSyncedBlock = exports.editSyncedBlockSource = exports.createSyncedBlock = exports.copySyncedBlockReferenceToClipboard = void 0;
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _analytics = require("@atlaskit/editor-common/analytics");
 var _copyButton = require("@atlaskit/editor-common/copy-button");
 var _utils = require("@atlaskit/editor-prosemirror/utils");
 var _utils2 = require("../pm-plugins/utils/utils");
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var createSyncedBlock = exports.createSyncedBlock = function createSyncedBlock(_ref) {
   var tr = _ref.tr,
     syncBlockStore = _ref.syncBlockStore,
@@ -22,12 +18,16 @@ var createSyncedBlock = exports.createSyncedBlock = function createSyncedBlock(_
 
   // If the selection is empty, we want to insert the sync block on a new line
   if (tr.selection.empty) {
-    var storeSyncBlockNode = syncBlockStore.createBodiedSyncBlockNode();
+    var attrs = syncBlockStore.generateBodiedSyncBlockAttrs();
     var paragraphNode = paragraph.createAndFill({});
-    var newBodiedSyncBlockNode = bodiedSyncBlock.createAndFill(_objectSpread({}, storeSyncBlockNode.attrs), paragraphNode ? [paragraphNode] : []);
+    var newBodiedSyncBlockNode = bodiedSyncBlock.createAndFill(attrs, paragraphNode ? [paragraphNode] : []);
     if (!newBodiedSyncBlockNode) {
       return false;
     }
+
+    // Save the new node with empty content to backend
+    // This is so that the node can be copied and referenced without the source being saved/published
+    syncBlockStore.createBodiedSyncBlockNode(attrs);
     if (typeAheadInsert) {
       tr = typeAheadInsert(newBodiedSyncBlockNode);
     } else {
@@ -38,15 +38,21 @@ var createSyncedBlock = exports.createSyncedBlock = function createSyncedBlock(_
     if (!conversionInfo) {
       // TODO: EDITOR-1665 - Raise an error analytics event
       return false;
-    } else {
-      var _storeSyncBlockNode = syncBlockStore.createBodiedSyncBlockNode();
-      var _newBodiedSyncBlockNode = bodiedSyncBlock.createAndFill(_objectSpread({}, _storeSyncBlockNode.attrs), conversionInfo.contentToInclude);
-      if (!_newBodiedSyncBlockNode) {
-        return false;
-      }
-      tr.replaceWith(conversionInfo.from - 1, conversionInfo.to, _newBodiedSyncBlockNode).scrollIntoView();
     }
+    var _attrs = syncBlockStore.generateBodiedSyncBlockAttrs();
+    var _newBodiedSyncBlockNode = bodiedSyncBlock.createAndFill(_attrs, conversionInfo.contentToInclude);
+    if (!_newBodiedSyncBlockNode) {
+      return false;
+    }
+
+    // Save the new node with empty content to backend
+    // This is so that the node can be copied and referenced without the source being saved/published
+    syncBlockStore.createBodiedSyncBlockNode(_attrs);
+    tr.replaceWith(conversionInfo.from - 1, conversionInfo.to, _newBodiedSyncBlockNode).scrollIntoView();
   }
+
+  // This transaction will be intercepted in filterTransaction and dispatched when saving to backend succeeds
+  // see filterTransaction for more details
   return tr;
 };
 var copySyncedBlockReferenceToClipboard = exports.copySyncedBlockReferenceToClipboard = function copySyncedBlockReferenceToClipboard(api) {

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

@@ -61,11 +61,12 @@ var createPlugin = exports.createPlugin = function createPlugin(options, pmPlugi
       // or are from remote (collab) or already confirmed sync block deletion
       // We only care about local changes that change the document
       // and are not yet confirmed for sync block deletion
-      if (!tr.docChanged || !(syncBlockStore !== null && syncBlockStore !== void 0 && syncBlockStore.requireConfirmationBeforeDelete()) || Boolean(tr.getMeta('isRemote')) || Boolean(tr.getMeta('isConfirmedSyncBlockDeletion'))) {
+      if (!tr.docChanged || !(syncBlockStore !== null && syncBlockStore !== void 0 && syncBlockStore.requireConfirmationBeforeDelete()) && !syncBlockStore.hasPendingCreation() || Boolean(tr.getMeta('isRemote')) || Boolean(tr.getMeta('isConfirmedSyncBlockDeletion')) || Boolean(tr.getMeta('isCommitSyncBlockCreation'))) {
         return true;
       }
       var _trackSyncBlocks = (0, _trackSyncBlocks2.trackSyncBlocks)(syncBlockStore, tr, state),
-        removed = _trackSyncBlocks.removed;
+        removed = _trackSyncBlocks.removed,
+        added = _trackSyncBlocks.added;
       if (removed.length > 0) {
         // If there are source sync blocks being removed, and we need to confirm with user before deleting,
         // we block the transaction here, and wait for user confirmation to proceed with deletion.
@@ -74,6 +75,19 @@ var createPlugin = exports.createPlugin = function createPlugin(options, pmPlugi
         syncBlockStore.deleteSyncBlocksWithConfirmation(tr, removed);
         return false;
       }
+      if (added.length > 0) {
+        // If there is bodiedSyncBlock node addition and it's waiting for the result of saving the node to backend (syncBlockStore.hasPendingCreation()),
+        // we need to intercept the transaction and save it in insert callback so that we only insert it to the document when backend call if backend call is successful
+        // The callback will be evoked by in SourceSyncBlockStoreManager.commitPendingCreation
+        syncBlockStore.registerCreationCallback(function () {
+          var _api$core;
+          api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 || _api$core.actions.execute(function () {
+            return tr.setMeta('isCommitSyncBlockCreation', true);
+          });
+          api === null || api === void 0 || api.core.actions.focus();
+        });
+        return false;
+      }
       return true;
     },
     appendTransaction: function appendTransaction(trs, _oldState, newState) {

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

@@ -18,14 +18,16 @@ export const createSyncedBlock = ({
 
   // If the selection is empty, we want to insert the sync block on a new line
   if (tr.selection.empty) {
-    const storeSyncBlockNode = syncBlockStore.createBodiedSyncBlockNode();
+    const attrs = syncBlockStore.generateBodiedSyncBlockAttrs();
     const paragraphNode = paragraph.createAndFill({});
-    const newBodiedSyncBlockNode = bodiedSyncBlock.createAndFill({
-      ...storeSyncBlockNode.attrs
-    }, paragraphNode ? [paragraphNode] : []);
+    const newBodiedSyncBlockNode = bodiedSyncBlock.createAndFill(attrs, paragraphNode ? [paragraphNode] : []);
     if (!newBodiedSyncBlockNode) {
       return false;
     }
+
+    // Save the new node with empty content to backend
+    // This is so that the node can be copied and referenced without the source being saved/published
+    syncBlockStore.createBodiedSyncBlockNode(attrs);
     if (typeAheadInsert) {
       tr = typeAheadInsert(newBodiedSyncBlockNode);
     } else {
@@ -36,17 +38,21 @@ export const createSyncedBlock = ({
     if (!conversionInfo) {
       // TODO: EDITOR-1665 - Raise an error analytics event
       return false;
-    } else {
-      const storeSyncBlockNode = syncBlockStore.createBodiedSyncBlockNode();
-      const newBodiedSyncBlockNode = bodiedSyncBlock.createAndFill({
-        ...storeSyncBlockNode.attrs
-      }, conversionInfo.contentToInclude);
-      if (!newBodiedSyncBlockNode) {
-        return false;
-      }
-      tr.replaceWith(conversionInfo.from - 1, conversionInfo.to, newBodiedSyncBlockNode).scrollIntoView();
     }
+    const attrs = syncBlockStore.generateBodiedSyncBlockAttrs();
+    const newBodiedSyncBlockNode = bodiedSyncBlock.createAndFill(attrs, conversionInfo.contentToInclude);
+    if (!newBodiedSyncBlockNode) {
+      return false;
+    }
+
+    // Save the new node with empty content to backend
+    // This is so that the node can be copied and referenced without the source being saved/published
+    syncBlockStore.createBodiedSyncBlockNode(attrs);
+    tr.replaceWith(conversionInfo.from - 1, conversionInfo.to, newBodiedSyncBlockNode).scrollIntoView();
   }
+
+  // This transaction will be intercepted in filterTransaction and dispatched when saving to backend succeeds
+  // see filterTransaction for more details
   return tr;
 };
 export const copySyncedBlockReferenceToClipboard = api => (state, _dispatch, _view) => {

package/dist/es2019/pm-plugins/main.js

@@ -53,11 +53,12 @@ export const createPlugin = (options, pmPluginFactoryParams, syncBlockStore, api
       // or are from remote (collab) or already confirmed sync block deletion
       // We only care about local changes that change the document
       // and are not yet confirmed for sync block deletion
-      if (!tr.docChanged || !(syncBlockStore !== null && syncBlockStore !== void 0 && syncBlockStore.requireConfirmationBeforeDelete()) || Boolean(tr.getMeta('isRemote')) || Boolean(tr.getMeta('isConfirmedSyncBlockDeletion'))) {
+      if (!tr.docChanged || !(syncBlockStore !== null && syncBlockStore !== void 0 && syncBlockStore.requireConfirmationBeforeDelete()) && !syncBlockStore.hasPendingCreation() || Boolean(tr.getMeta('isRemote')) || Boolean(tr.getMeta('isConfirmedSyncBlockDeletion')) || Boolean(tr.getMeta('isCommitSyncBlockCreation'))) {
         return true;
       }
       const {
-        removed
+        removed,
+        added
       } = trackSyncBlocks(syncBlockStore, tr, state);
       if (removed.length > 0) {
         // If there are source sync blocks being removed, and we need to confirm with user before deleting,
@@ -67,6 +68,19 @@ export const createPlugin = (options, pmPluginFactoryParams, syncBlockStore, api
         syncBlockStore.deleteSyncBlocksWithConfirmation(tr, removed);
         return false;
       }
+      if (added.length > 0) {
+        // If there is bodiedSyncBlock node addition and it's waiting for the result of saving the node to backend (syncBlockStore.hasPendingCreation()),
+        // we need to intercept the transaction and save it in insert callback so that we only insert it to the document when backend call if backend call is successful
+        // The callback will be evoked by in SourceSyncBlockStoreManager.commitPendingCreation
+        syncBlockStore.registerCreationCallback(() => {
+          var _api$core;
+          api === null || api === void 0 ? void 0 : (_api$core = api.core) === null || _api$core === void 0 ? void 0 : _api$core.actions.execute(() => {
+            return tr.setMeta('isCommitSyncBlockCreation', true);
+          });
+          api === null || api === void 0 ? void 0 : api.core.actions.focus();
+        });
+        return false;
+      }
       return true;
     },
     appendTransaction: (trs, _oldState, newState) => {

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

@@ -1,6 +1,3 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
 import { copyDomNode, toDOM } from '@atlaskit/editor-common/copy-button';
 import { findSelectedNodeOfType, removeParentNodeOfType, removeSelectedNode } from '@atlaskit/editor-prosemirror/utils';
@@ -15,12 +12,16 @@ export var createSyncedBlock = function createSyncedBlock(_ref) {
 
   // If the selection is empty, we want to insert the sync block on a new line
   if (tr.selection.empty) {
-    var storeSyncBlockNode = syncBlockStore.createBodiedSyncBlockNode();
+    var attrs = syncBlockStore.generateBodiedSyncBlockAttrs();
     var paragraphNode = paragraph.createAndFill({});
-    var newBodiedSyncBlockNode = bodiedSyncBlock.createAndFill(_objectSpread({}, storeSyncBlockNode.attrs), paragraphNode ? [paragraphNode] : []);
+    var newBodiedSyncBlockNode = bodiedSyncBlock.createAndFill(attrs, paragraphNode ? [paragraphNode] : []);
     if (!newBodiedSyncBlockNode) {
       return false;
     }
+
+    // Save the new node with empty content to backend
+    // This is so that the node can be copied and referenced without the source being saved/published
+    syncBlockStore.createBodiedSyncBlockNode(attrs);
     if (typeAheadInsert) {
       tr = typeAheadInsert(newBodiedSyncBlockNode);
     } else {
@@ -31,15 +32,21 @@ export var createSyncedBlock = function createSyncedBlock(_ref) {
     if (!conversionInfo) {
       // TODO: EDITOR-1665 - Raise an error analytics event
       return false;
-    } else {
-      var _storeSyncBlockNode = syncBlockStore.createBodiedSyncBlockNode();
-      var _newBodiedSyncBlockNode = bodiedSyncBlock.createAndFill(_objectSpread({}, _storeSyncBlockNode.attrs), conversionInfo.contentToInclude);
-      if (!_newBodiedSyncBlockNode) {
-        return false;
-      }
-      tr.replaceWith(conversionInfo.from - 1, conversionInfo.to, _newBodiedSyncBlockNode).scrollIntoView();
     }
+    var _attrs = syncBlockStore.generateBodiedSyncBlockAttrs();
+    var _newBodiedSyncBlockNode = bodiedSyncBlock.createAndFill(_attrs, conversionInfo.contentToInclude);
+    if (!_newBodiedSyncBlockNode) {
+      return false;
+    }
+
+    // Save the new node with empty content to backend
+    // This is so that the node can be copied and referenced without the source being saved/published
+    syncBlockStore.createBodiedSyncBlockNode(_attrs);
+    tr.replaceWith(conversionInfo.from - 1, conversionInfo.to, _newBodiedSyncBlockNode).scrollIntoView();
   }
+
+  // This transaction will be intercepted in filterTransaction and dispatched when saving to backend succeeds
+  // see filterTransaction for more details
   return tr;
 };
 export var copySyncedBlockReferenceToClipboard = function copySyncedBlockReferenceToClipboard(api) {

package/dist/esm/pm-plugins/main.js

@@ -55,11 +55,12 @@ export var createPlugin = function createPlugin(options, pmPluginFactoryParams,
       // or are from remote (collab) or already confirmed sync block deletion
       // We only care about local changes that change the document
       // and are not yet confirmed for sync block deletion
-      if (!tr.docChanged || !(syncBlockStore !== null && syncBlockStore !== void 0 && syncBlockStore.requireConfirmationBeforeDelete()) || Boolean(tr.getMeta('isRemote')) || Boolean(tr.getMeta('isConfirmedSyncBlockDeletion'))) {
+      if (!tr.docChanged || !(syncBlockStore !== null && syncBlockStore !== void 0 && syncBlockStore.requireConfirmationBeforeDelete()) && !syncBlockStore.hasPendingCreation() || Boolean(tr.getMeta('isRemote')) || Boolean(tr.getMeta('isConfirmedSyncBlockDeletion')) || Boolean(tr.getMeta('isCommitSyncBlockCreation'))) {
         return true;
       }
       var _trackSyncBlocks = trackSyncBlocks(syncBlockStore, tr, state),
-        removed = _trackSyncBlocks.removed;
+        removed = _trackSyncBlocks.removed,
+        added = _trackSyncBlocks.added;
       if (removed.length > 0) {
         // If there are source sync blocks being removed, and we need to confirm with user before deleting,
         // we block the transaction here, and wait for user confirmation to proceed with deletion.
@@ -68,6 +69,19 @@ export var createPlugin = function createPlugin(options, pmPluginFactoryParams,
         syncBlockStore.deleteSyncBlocksWithConfirmation(tr, removed);
         return false;
       }
+      if (added.length > 0) {
+        // If there is bodiedSyncBlock node addition and it's waiting for the result of saving the node to backend (syncBlockStore.hasPendingCreation()),
+        // we need to intercept the transaction and save it in insert callback so that we only insert it to the document when backend call if backend call is successful
+        // The callback will be evoked by in SourceSyncBlockStoreManager.commitPendingCreation
+        syncBlockStore.registerCreationCallback(function () {
+          var _api$core;
+          api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 || _api$core.actions.execute(function () {
+            return tr.setMeta('isCommitSyncBlockCreation', true);
+          });
+          api === null || api === void 0 || api.core.actions.focus();
+        });
+        return false;
+      }
       return true;
     },
     appendTransaction: function appendTransaction(trs, _oldState, newState) {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-synced-block",
-	"version": "4.1.1",
+	"version": "4.1.2",
 	"description": "SyncedBlock plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -38,7 +38,7 @@
 		"@atlaskit/editor-plugin-selection": "^6.1.0",
 		"@atlaskit/editor-prosemirror": "7.0.0",
 		"@atlaskit/editor-shared-styles": "^3.8.0",
-		"@atlaskit/editor-synced-block-provider": "^2.6.0",
+		"@atlaskit/editor-synced-block-provider": "^2.7.0",
 		"@atlaskit/editor-tables": "^2.9.0",
 		"@atlaskit/editor-toolbar": "^0.17.0",
 		"@atlaskit/icon": "28.5.3",