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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (18) hide show
  1. package/CHANGELOG.md +16 -0
  2. package/dist/cjs/editor-commands/index.js +19 -13
  3. package/dist/cjs/nodeviews/syncedBlock.js +2 -4
  4. package/dist/cjs/pm-plugins/main.js +16 -2
  5. package/dist/cjs/ui/SyncBlockRendererWrapper.js +2 -4
  6. package/dist/es2019/editor-commands/index.js +19 -13
  7. package/dist/es2019/nodeviews/syncedBlock.js +3 -4
  8. package/dist/es2019/pm-plugins/main.js +16 -2
  9. package/dist/es2019/ui/SyncBlockRendererWrapper.js +2 -4
  10. package/dist/esm/editor-commands/index.js +19 -12
  11. package/dist/esm/nodeviews/syncedBlock.js +2 -4
  12. package/dist/esm/pm-plugins/main.js +16 -2
  13. package/dist/esm/ui/SyncBlockRendererWrapper.js +2 -4
  14. package/dist/types/syncedBlockPluginType.d.ts +1 -4
  15. package/dist/types/ui/SyncBlockRendererWrapper.d.ts +2 -4
  16. package/dist/types-ts4.5/syncedBlockPluginType.d.ts +1 -4
  17. package/dist/types-ts4.5/ui/SyncBlockRendererWrapper.d.ts +2 -4
  18. package/package.json +2 -2
package/CHANGELOG.md CHANGED
@@ -1,5 +1,21 @@
1
1
  # @atlaskit/editor-plugin-synced-block
2
2
 
3
+ ## 4.1.2
4
+
5
+ ### Patch Changes
6
+
7
+ - [`5b03ddd528034`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/5b03ddd528034) -
8
+ [EDITOR-2542] Save new bodiedSyncBlock to backend when creating the node, so that the node can be
9
+ copied and reference without page being published/updated
10
+ - Updated dependencies
11
+
12
+ ## 4.1.1
13
+
14
+ ### Patch Changes
15
+
16
+ - [`aa14795cecd60`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/aa14795cecd60) -
17
+ EDITOR-2350 Pass media options to sync block nested renderer.
18
+
3
19
  ## 4.1.0
4
20
 
5
21
  ### Minor Changes
package/dist/cjs/editor-commands/index.js CHANGED
@@ -1,17 +1,13 @@
1
1
  "use strict";
2
2
 
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
3
  Object.defineProperty(exports, "__esModule", {
5
4
  value: true
6
5
  });
7
6
  exports.removeSyncedBlock = exports.editSyncedBlockSource = exports.createSyncedBlock = exports.copySyncedBlockReferenceToClipboard = void 0;
8
- var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
9
7
  var _analytics = require("@atlaskit/editor-common/analytics");
10
8
  var _copyButton = require("@atlaskit/editor-common/copy-button");
11
9
  var _utils = require("@atlaskit/editor-prosemirror/utils");
12
10
  var _utils2 = require("../pm-plugins/utils/utils");
13
- 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; }
14
- 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; }
15
11
  var createSyncedBlock = exports.createSyncedBlock = function createSyncedBlock(_ref) {
16
12
  var tr = _ref.tr,
17
13
  syncBlockStore = _ref.syncBlockStore,
@@ -22,12 +18,16 @@ var createSyncedBlock = exports.createSyncedBlock = function createSyncedBlock(_
22
18
 
23
19
  // If the selection is empty, we want to insert the sync block on a new line
24
20
  if (tr.selection.empty) {
25
- var storeSyncBlockNode = syncBlockStore.createSyncBlockNode();
21
+ var attrs = syncBlockStore.generateBodiedSyncBlockAttrs();
26
22
  var paragraphNode = paragraph.createAndFill({});
27
- var newBodiedSyncBlockNode = bodiedSyncBlock.createAndFill(_objectSpread({}, storeSyncBlockNode.attrs), paragraphNode ? [paragraphNode] : []);
23
+ var newBodiedSyncBlockNode = bodiedSyncBlock.createAndFill(attrs, paragraphNode ? [paragraphNode] : []);
28
24
  if (!newBodiedSyncBlockNode) {
29
25
  return false;
30
26
  }
27
+
28
+ // Save the new node with empty content to backend
29
+ // This is so that the node can be copied and referenced without the source being saved/published
30
+ syncBlockStore.createBodiedSyncBlockNode(attrs);
31
31
  if (typeAheadInsert) {
32
32
  tr = typeAheadInsert(newBodiedSyncBlockNode);
33
33
  } else {
@@ -38,15 +38,21 @@ var createSyncedBlock = exports.createSyncedBlock = function createSyncedBlock(_
38
38
  if (!conversionInfo) {
39
39
  // TODO: EDITOR-1665 - Raise an error analytics event
40
40
  return false;
41
- } else {
42
- var _storeSyncBlockNode = syncBlockStore.createSyncBlockNode();
43
- var _newBodiedSyncBlockNode = bodiedSyncBlock.createAndFill(_objectSpread({}, _storeSyncBlockNode.attrs), conversionInfo.contentToInclude);
44
- if (!_newBodiedSyncBlockNode) {
45
- return false;
46
- }
47
- tr.replaceWith(conversionInfo.from - 1, conversionInfo.to, _newBodiedSyncBlockNode).scrollIntoView();
48
41
  }
42
+ var _attrs = syncBlockStore.generateBodiedSyncBlockAttrs();
43
+ var _newBodiedSyncBlockNode = bodiedSyncBlock.createAndFill(_attrs, conversionInfo.contentToInclude);
44
+ if (!_newBodiedSyncBlockNode) {
45
+ return false;
46
+ }
47
+
48
+ // Save the new node with empty content to backend
49
+ // This is so that the node can be copied and referenced without the source being saved/published
50
+ syncBlockStore.createBodiedSyncBlockNode(_attrs);
51
+ tr.replaceWith(conversionInfo.from - 1, conversionInfo.to, _newBodiedSyncBlockNode).scrollIntoView();
49
52
  }
53
+
54
+ // This transaction will be intercepted in filterTransaction and dispatched when saving to backend succeeds
55
+ // see filterTransaction for more details
50
56
  return tr;
51
57
  };
52
58
  var copySyncedBlockReferenceToClipboard = exports.copySyncedBlockReferenceToClipboard = function copySyncedBlockReferenceToClipboard(api) {
package/dist/cjs/nodeviews/syncedBlock.js CHANGED
@@ -41,9 +41,8 @@ var SyncBlock = /*#__PURE__*/function (_ReactNodeView) {
41
41
  value: function render() {
42
42
  var _this$options,
43
43
  _this$options2,
44
- _this$options3,
45
44
  _this2 = this;
46
- if (!((_this$options = this.options) !== null && _this$options !== void 0 && _this$options.getSyncedBlockRenderer)) {
45
+ if (!((_this$options = this.options) !== null && _this$options !== void 0 && _this$options.syncedBlockRenderer)) {
47
46
  return null;
48
47
  }
49
48
  var _this$node$attrs = this.node.attrs,
@@ -56,8 +55,7 @@ var SyncBlock = /*#__PURE__*/function (_ReactNodeView) {
56
55
  // get document node from data provider
57
56
  return /*#__PURE__*/_react.default.createElement(_SyncBlockRendererWrapper.SyncBlockRendererWrapper, {
58
57
  localId: this.node.attrs.localId,
59
- getSyncedBlockRenderer: (_this$options2 = this.options) === null || _this$options2 === void 0 ? void 0 : _this$options2.getSyncedBlockRenderer,
60
- syncBlockRendererDataProviders: (_this$options3 = this.options) === null || _this$options3 === void 0 ? void 0 : _this$options3.syncBlockRendererDataProviders,
58
+ syncedBlockRenderer: (_this$options2 = this.options) === null || _this$options2 === void 0 ? void 0 : _this$options2.syncedBlockRenderer,
61
59
  useFetchSyncBlockTitle: function useFetchSyncBlockTitle() {
62
60
  return (0, _editorSyncedBlockProvider.useFetchSyncBlockTitle)(_this2.syncBlockStore, _this2.node);
63
61
  },
package/dist/cjs/pm-plugins/main.js CHANGED
@@ -61,11 +61,12 @@ var createPlugin = exports.createPlugin = function createPlugin(options, pmPlugi
61
61
  // or are from remote (collab) or already confirmed sync block deletion
62
62
  // We only care about local changes that change the document
63
63
  // and are not yet confirmed for sync block deletion
64
- if (!tr.docChanged || !(syncBlockStore !== null && syncBlockStore !== void 0 && syncBlockStore.requireConfirmationBeforeDelete()) || Boolean(tr.getMeta('isRemote')) || Boolean(tr.getMeta('isConfirmedSyncBlockDeletion'))) {
64
+ if (!tr.docChanged || !(syncBlockStore !== null && syncBlockStore !== void 0 && syncBlockStore.requireConfirmationBeforeDelete()) && !syncBlockStore.hasPendingCreation() || Boolean(tr.getMeta('isRemote')) || Boolean(tr.getMeta('isConfirmedSyncBlockDeletion')) || Boolean(tr.getMeta('isCommitSyncBlockCreation'))) {
65
65
  return true;
66
66
  }
67
67
  var _trackSyncBlocks = (0, _trackSyncBlocks2.trackSyncBlocks)(syncBlockStore, tr, state),
68
- removed = _trackSyncBlocks.removed;
68
+ removed = _trackSyncBlocks.removed,
69
+ added = _trackSyncBlocks.added;
69
70
  if (removed.length > 0) {
70
71
  // If there are source sync blocks being removed, and we need to confirm with user before deleting,
71
72
  // 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
74
75
  syncBlockStore.deleteSyncBlocksWithConfirmation(tr, removed);
75
76
  return false;
76
77
  }
78
+ if (added.length > 0) {
79
+ // If there is bodiedSyncBlock node addition and it's waiting for the result of saving the node to backend (syncBlockStore.hasPendingCreation()),
80
+ // 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
81
+ // The callback will be evoked by in SourceSyncBlockStoreManager.commitPendingCreation
82
+ syncBlockStore.registerCreationCallback(function () {
83
+ var _api$core;
84
+ api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 || _api$core.actions.execute(function () {
85
+ return tr.setMeta('isCommitSyncBlockCreation', true);
86
+ });
87
+ api === null || api === void 0 || api.core.actions.focus();
88
+ });
89
+ return false;
90
+ }
77
91
  return true;
78
92
  },
79
93
  appendTransaction: function appendTransaction(trs, _oldState, newState) {
package/dist/cjs/ui/SyncBlockRendererWrapper.js CHANGED
@@ -10,9 +10,8 @@ var _syncBlock = require("@atlaskit/editor-common/sync-block");
10
10
  var _SyncBlockLabel = require("./SyncBlockLabel");
11
11
  var SyncBlockRendererWrapperDataId = 'sync-block-plugin-renderer-wrapper';
12
12
  var SyncBlockRendererWrapperComponent = function SyncBlockRendererWrapperComponent(_ref) {
13
- var getSyncedBlockRenderer = _ref.getSyncedBlockRenderer,
13
+ var syncedBlockRenderer = _ref.syncedBlockRenderer,
14
14
  useFetchSyncBlockData = _ref.useFetchSyncBlockData,
15
- syncBlockRendererDataProviders = _ref.syncBlockRendererDataProviders,
16
15
  localId = _ref.localId,
17
16
  useFetchSyncBlockTitle = _ref.useFetchSyncBlockTitle;
18
17
  return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
@@ -20,8 +19,7 @@ var SyncBlockRendererWrapperComponent = function SyncBlockRendererWrapperCompone
20
19
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
21
20
  ,
22
21
  className: _syncBlock.SyncBlockSharedCssClassName.renderer
23
- }, getSyncedBlockRenderer({
24
- syncBlockRendererDataProviders: syncBlockRendererDataProviders,
22
+ }, syncedBlockRenderer({
25
23
  useFetchSyncBlockData: useFetchSyncBlockData
26
24
  })), /*#__PURE__*/_react.default.createElement(_SyncBlockLabel.SyncBlockLabel, {
27
25
  isSource: false,
package/dist/es2019/editor-commands/index.js CHANGED
@@ -18,14 +18,16 @@ export const createSyncedBlock = ({
18
18
 
19
19
  // If the selection is empty, we want to insert the sync block on a new line
20
20
  if (tr.selection.empty) {
21
- const storeSyncBlockNode = syncBlockStore.createSyncBlockNode();
21
+ const attrs = syncBlockStore.generateBodiedSyncBlockAttrs();
22
22
  const paragraphNode = paragraph.createAndFill({});
23
- const newBodiedSyncBlockNode = bodiedSyncBlock.createAndFill({
24
- ...storeSyncBlockNode.attrs
25
- }, paragraphNode ? [paragraphNode] : []);
23
+ const newBodiedSyncBlockNode = bodiedSyncBlock.createAndFill(attrs, paragraphNode ? [paragraphNode] : []);
26
24
  if (!newBodiedSyncBlockNode) {
27
25
  return false;
28
26
  }
27
+
28
+ // Save the new node with empty content to backend
29
+ // This is so that the node can be copied and referenced without the source being saved/published
30
+ syncBlockStore.createBodiedSyncBlockNode(attrs);
29
31
  if (typeAheadInsert) {
30
32
  tr = typeAheadInsert(newBodiedSyncBlockNode);
31
33
  } else {
@@ -36,17 +38,21 @@ export const createSyncedBlock = ({
36
38
  if (!conversionInfo) {
37
39
  // TODO: EDITOR-1665 - Raise an error analytics event
38
40
  return false;
39
- } else {
40
- const storeSyncBlockNode = syncBlockStore.createSyncBlockNode();
41
- const newBodiedSyncBlockNode = bodiedSyncBlock.createAndFill({
42
- ...storeSyncBlockNode.attrs
43
- }, conversionInfo.contentToInclude);
44
- if (!newBodiedSyncBlockNode) {
45
- return false;
46
- }
47
- tr.replaceWith(conversionInfo.from - 1, conversionInfo.to, newBodiedSyncBlockNode).scrollIntoView();
48
41
  }
42
+ const attrs = syncBlockStore.generateBodiedSyncBlockAttrs();
43
+ const newBodiedSyncBlockNode = bodiedSyncBlock.createAndFill(attrs, conversionInfo.contentToInclude);
44
+ if (!newBodiedSyncBlockNode) {
45
+ return false;
46
+ }
47
+
48
+ // Save the new node with empty content to backend
49
+ // This is so that the node can be copied and referenced without the source being saved/published
50
+ syncBlockStore.createBodiedSyncBlockNode(attrs);
51
+ tr.replaceWith(conversionInfo.from - 1, conversionInfo.to, newBodiedSyncBlockNode).scrollIntoView();
49
52
  }
53
+
54
+ // This transaction will be intercepted in filterTransaction and dispatched when saving to backend succeeds
55
+ // see filterTransaction for more details
50
56
  return tr;
51
57
  };
52
58
  export const copySyncedBlockReferenceToClipboard = api => (state, _dispatch, _view) => {
package/dist/es2019/nodeviews/syncedBlock.js CHANGED
@@ -15,8 +15,8 @@ class SyncBlock extends ReactNodeView {
15
15
  return domRef;
16
16
  }
17
17
  render() {
18
- var _this$options, _this$options2, _this$options3;
19
- if (!((_this$options = this.options) !== null && _this$options !== void 0 && _this$options.getSyncedBlockRenderer)) {
18
+ var _this$options, _this$options2;
19
+ if (!((_this$options = this.options) !== null && _this$options !== void 0 && _this$options.syncedBlockRenderer)) {
20
20
  return null;
21
21
  }
22
22
  const {
@@ -30,8 +30,7 @@ class SyncBlock extends ReactNodeView {
30
30
  // get document node from data provider
31
31
  return /*#__PURE__*/React.createElement(SyncBlockRendererWrapper, {
32
32
  localId: this.node.attrs.localId,
33
- getSyncedBlockRenderer: (_this$options2 = this.options) === null || _this$options2 === void 0 ? void 0 : _this$options2.getSyncedBlockRenderer,
34
- syncBlockRendererDataProviders: (_this$options3 = this.options) === null || _this$options3 === void 0 ? void 0 : _this$options3.syncBlockRendererDataProviders,
33
+ syncedBlockRenderer: (_this$options2 = this.options) === null || _this$options2 === void 0 ? void 0 : _this$options2.syncedBlockRenderer,
35
34
  useFetchSyncBlockTitle: () => useFetchSyncBlockTitle(this.syncBlockStore, this.node),
36
35
  useFetchSyncBlockData: () => useFetchSyncBlockData(this.syncBlockStore, resourceId, localId)
37
36
  });
package/dist/es2019/pm-plugins/main.js CHANGED
@@ -53,11 +53,12 @@ export const createPlugin = (options, pmPluginFactoryParams, syncBlockStore, api
53
53
  // or are from remote (collab) or already confirmed sync block deletion
54
54
  // We only care about local changes that change the document
55
55
  // and are not yet confirmed for sync block deletion
56
- if (!tr.docChanged || !(syncBlockStore !== null && syncBlockStore !== void 0 && syncBlockStore.requireConfirmationBeforeDelete()) || Boolean(tr.getMeta('isRemote')) || Boolean(tr.getMeta('isConfirmedSyncBlockDeletion'))) {
56
+ if (!tr.docChanged || !(syncBlockStore !== null && syncBlockStore !== void 0 && syncBlockStore.requireConfirmationBeforeDelete()) && !syncBlockStore.hasPendingCreation() || Boolean(tr.getMeta('isRemote')) || Boolean(tr.getMeta('isConfirmedSyncBlockDeletion')) || Boolean(tr.getMeta('isCommitSyncBlockCreation'))) {
57
57
  return true;
58
58
  }
59
59
  const {
60
- removed
60
+ removed,
61
+ added
61
62
  } = trackSyncBlocks(syncBlockStore, tr, state);
62
63
  if (removed.length > 0) {
63
64
  // 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
67
68
  syncBlockStore.deleteSyncBlocksWithConfirmation(tr, removed);
68
69
  return false;
69
70
  }
71
+ if (added.length > 0) {
72
+ // If there is bodiedSyncBlock node addition and it's waiting for the result of saving the node to backend (syncBlockStore.hasPendingCreation()),
73
+ // 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
74
+ // The callback will be evoked by in SourceSyncBlockStoreManager.commitPendingCreation
75
+ syncBlockStore.registerCreationCallback(() => {
76
+ var _api$core;
77
+ api === null || api === void 0 ? void 0 : (_api$core = api.core) === null || _api$core === void 0 ? void 0 : _api$core.actions.execute(() => {
78
+ return tr.setMeta('isCommitSyncBlockCreation', true);
79
+ });
80
+ api === null || api === void 0 ? void 0 : api.core.actions.focus();
81
+ });
82
+ return false;
83
+ }
70
84
  return true;
71
85
  },
72
86
  appendTransaction: (trs, _oldState, newState) => {
package/dist/es2019/ui/SyncBlockRendererWrapper.js CHANGED
@@ -3,9 +3,8 @@ import { SyncBlockSharedCssClassName } from '@atlaskit/editor-common/sync-block'
3
3
  import { SyncBlockLabel } from './SyncBlockLabel';
4
4
  const SyncBlockRendererWrapperDataId = 'sync-block-plugin-renderer-wrapper';
5
5
  const SyncBlockRendererWrapperComponent = ({
6
- getSyncedBlockRenderer,
6
+ syncedBlockRenderer,
7
7
  useFetchSyncBlockData,
8
- syncBlockRendererDataProviders,
9
8
  localId,
10
9
  useFetchSyncBlockTitle
11
10
  }) => {
@@ -14,8 +13,7 @@ const SyncBlockRendererWrapperComponent = ({
14
13
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
15
14
  ,
16
15
  className: SyncBlockSharedCssClassName.renderer
17
- }, getSyncedBlockRenderer({
18
- syncBlockRendererDataProviders,
16
+ }, syncedBlockRenderer({
19
17
  useFetchSyncBlockData
20
18
  })), /*#__PURE__*/React.createElement(SyncBlockLabel, {
21
19
  isSource: false,
package/dist/esm/editor-commands/index.js CHANGED
@@ -1,6 +1,3 @@
1
- import _defineProperty from "@babel/runtime/helpers/defineProperty";
2
- 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; }
3
- 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; }
4
1
  import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
5
2
  import { copyDomNode, toDOM } from '@atlaskit/editor-common/copy-button';
6
3
  import { findSelectedNodeOfType, removeParentNodeOfType, removeSelectedNode } from '@atlaskit/editor-prosemirror/utils';
@@ -15,12 +12,16 @@ export var createSyncedBlock = function createSyncedBlock(_ref) {
15
12
 
16
13
  // If the selection is empty, we want to insert the sync block on a new line
17
14
  if (tr.selection.empty) {
18
- var storeSyncBlockNode = syncBlockStore.createSyncBlockNode();
15
+ var attrs = syncBlockStore.generateBodiedSyncBlockAttrs();
19
16
  var paragraphNode = paragraph.createAndFill({});
20
- var newBodiedSyncBlockNode = bodiedSyncBlock.createAndFill(_objectSpread({}, storeSyncBlockNode.attrs), paragraphNode ? [paragraphNode] : []);
17
+ var newBodiedSyncBlockNode = bodiedSyncBlock.createAndFill(attrs, paragraphNode ? [paragraphNode] : []);
21
18
  if (!newBodiedSyncBlockNode) {
22
19
  return false;
23
20
  }
21
+
22
+ // Save the new node with empty content to backend
23
+ // This is so that the node can be copied and referenced without the source being saved/published
24
+ syncBlockStore.createBodiedSyncBlockNode(attrs);
24
25
  if (typeAheadInsert) {
25
26
  tr = typeAheadInsert(newBodiedSyncBlockNode);
26
27
  } else {
@@ -31,15 +32,21 @@ export var createSyncedBlock = function createSyncedBlock(_ref) {
31
32
  if (!conversionInfo) {
32
33
  // TODO: EDITOR-1665 - Raise an error analytics event
33
34
  return false;
34
- } else {
35
- var _storeSyncBlockNode = syncBlockStore.createSyncBlockNode();
36
- var _newBodiedSyncBlockNode = bodiedSyncBlock.createAndFill(_objectSpread({}, _storeSyncBlockNode.attrs), conversionInfo.contentToInclude);
37
- if (!_newBodiedSyncBlockNode) {
38
- return false;
39
- }
40
- tr.replaceWith(conversionInfo.from - 1, conversionInfo.to, _newBodiedSyncBlockNode).scrollIntoView();
41
35
  }
36
+ var _attrs = syncBlockStore.generateBodiedSyncBlockAttrs();
37
+ var _newBodiedSyncBlockNode = bodiedSyncBlock.createAndFill(_attrs, conversionInfo.contentToInclude);
38
+ if (!_newBodiedSyncBlockNode) {
39
+ return false;
40
+ }
41
+
42
+ // Save the new node with empty content to backend
43
+ // This is so that the node can be copied and referenced without the source being saved/published
44
+ syncBlockStore.createBodiedSyncBlockNode(_attrs);
45
+ tr.replaceWith(conversionInfo.from - 1, conversionInfo.to, _newBodiedSyncBlockNode).scrollIntoView();
42
46
  }
47
+
48
+ // This transaction will be intercepted in filterTransaction and dispatched when saving to backend succeeds
49
+ // see filterTransaction for more details
43
50
  return tr;
44
51
  };
45
52
  export var copySyncedBlockReferenceToClipboard = function copySyncedBlockReferenceToClipboard(api) {
package/dist/esm/nodeviews/syncedBlock.js CHANGED
@@ -34,9 +34,8 @@ var SyncBlock = /*#__PURE__*/function (_ReactNodeView) {
34
34
  value: function render() {
35
35
  var _this$options,
36
36
  _this$options2,
37
- _this$options3,
38
37
  _this2 = this;
39
- if (!((_this$options = this.options) !== null && _this$options !== void 0 && _this$options.getSyncedBlockRenderer)) {
38
+ if (!((_this$options = this.options) !== null && _this$options !== void 0 && _this$options.syncedBlockRenderer)) {
40
39
  return null;
41
40
  }
42
41
  var _this$node$attrs = this.node.attrs,
@@ -49,8 +48,7 @@ var SyncBlock = /*#__PURE__*/function (_ReactNodeView) {
49
48
  // get document node from data provider
50
49
  return /*#__PURE__*/React.createElement(SyncBlockRendererWrapper, {
51
50
  localId: this.node.attrs.localId,
52
- getSyncedBlockRenderer: (_this$options2 = this.options) === null || _this$options2 === void 0 ? void 0 : _this$options2.getSyncedBlockRenderer,
53
- syncBlockRendererDataProviders: (_this$options3 = this.options) === null || _this$options3 === void 0 ? void 0 : _this$options3.syncBlockRendererDataProviders,
51
+ syncedBlockRenderer: (_this$options2 = this.options) === null || _this$options2 === void 0 ? void 0 : _this$options2.syncedBlockRenderer,
54
52
  useFetchSyncBlockTitle: function useFetchSyncBlockTitle() {
55
53
  return _useFetchSyncBlockTitle(_this2.syncBlockStore, _this2.node);
56
54
  },
package/dist/esm/pm-plugins/main.js CHANGED
@@ -55,11 +55,12 @@ export var createPlugin = function createPlugin(options, pmPluginFactoryParams,
55
55
  // or are from remote (collab) or already confirmed sync block deletion
56
56
  // We only care about local changes that change the document
57
57
  // and are not yet confirmed for sync block deletion
58
- if (!tr.docChanged || !(syncBlockStore !== null && syncBlockStore !== void 0 && syncBlockStore.requireConfirmationBeforeDelete()) || Boolean(tr.getMeta('isRemote')) || Boolean(tr.getMeta('isConfirmedSyncBlockDeletion'))) {
58
+ if (!tr.docChanged || !(syncBlockStore !== null && syncBlockStore !== void 0 && syncBlockStore.requireConfirmationBeforeDelete()) && !syncBlockStore.hasPendingCreation() || Boolean(tr.getMeta('isRemote')) || Boolean(tr.getMeta('isConfirmedSyncBlockDeletion')) || Boolean(tr.getMeta('isCommitSyncBlockCreation'))) {
59
59
  return true;
60
60
  }
61
61
  var _trackSyncBlocks = trackSyncBlocks(syncBlockStore, tr, state),
62
- removed = _trackSyncBlocks.removed;
62
+ removed = _trackSyncBlocks.removed,
63
+ added = _trackSyncBlocks.added;
63
64
  if (removed.length > 0) {
64
65
  // If there are source sync blocks being removed, and we need to confirm with user before deleting,
65
66
  // 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,
68
69
  syncBlockStore.deleteSyncBlocksWithConfirmation(tr, removed);
69
70
  return false;
70
71
  }
72
+ if (added.length > 0) {
73
+ // If there is bodiedSyncBlock node addition and it's waiting for the result of saving the node to backend (syncBlockStore.hasPendingCreation()),
74
+ // 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
75
+ // The callback will be evoked by in SourceSyncBlockStoreManager.commitPendingCreation
76
+ syncBlockStore.registerCreationCallback(function () {
77
+ var _api$core;
78
+ api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 || _api$core.actions.execute(function () {
79
+ return tr.setMeta('isCommitSyncBlockCreation', true);
80
+ });
81
+ api === null || api === void 0 || api.core.actions.focus();
82
+ });
83
+ return false;
84
+ }
71
85
  return true;
72
86
  },
73
87
  appendTransaction: function appendTransaction(trs, _oldState, newState) {
package/dist/esm/ui/SyncBlockRendererWrapper.js CHANGED
@@ -3,9 +3,8 @@ import { SyncBlockSharedCssClassName } from '@atlaskit/editor-common/sync-block'
3
3
  import { SyncBlockLabel } from './SyncBlockLabel';
4
4
  var SyncBlockRendererWrapperDataId = 'sync-block-plugin-renderer-wrapper';
5
5
  var SyncBlockRendererWrapperComponent = function SyncBlockRendererWrapperComponent(_ref) {
6
- var getSyncedBlockRenderer = _ref.getSyncedBlockRenderer,
6
+ var syncedBlockRenderer = _ref.syncedBlockRenderer,
7
7
  useFetchSyncBlockData = _ref.useFetchSyncBlockData,
8
- syncBlockRendererDataProviders = _ref.syncBlockRendererDataProviders,
9
8
  localId = _ref.localId,
10
9
  useFetchSyncBlockTitle = _ref.useFetchSyncBlockTitle;
11
10
  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
@@ -13,8 +12,7 @@ var SyncBlockRendererWrapperComponent = function SyncBlockRendererWrapperCompone
13
12
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
14
13
  ,
15
14
  className: SyncBlockSharedCssClassName.renderer
16
- }, getSyncedBlockRenderer({
17
- syncBlockRendererDataProviders: syncBlockRendererDataProviders,
15
+ }, syncedBlockRenderer({
18
16
  useFetchSyncBlockData: useFetchSyncBlockData
19
17
  })), /*#__PURE__*/React.createElement(SyncBlockLabel, {
20
18
  isSource: false,
package/dist/types/syncedBlockPluginType.d.ts CHANGED
@@ -1,5 +1,4 @@
1
1
  import type { EventDispatcher } from '@atlaskit/editor-common/event-dispatcher';
2
- import type { SyncedBlockRendererDataProviders } from '@atlaskit/editor-common/provider-factory';
3
2
  import type { EditorCommand, NextEditorPlugin, OptionalPlugin } from '@atlaskit/editor-common/types';
4
3
  import type { JSONDocNode } from '@atlaskit/editor-json-transformer';
5
4
  import type { AnalyticsPlugin } from '@atlaskit/editor-plugin-analytics';
@@ -33,13 +32,11 @@ export type SyncedBlockEditorProps = {
33
32
  popupsMountPoint: HTMLElement;
34
33
  };
35
34
  export type SyncedBlockRendererProps = {
36
- syncBlockRendererDataProviders: SyncedBlockRendererDataProviders;
37
35
  useFetchSyncBlockData: () => UseFetchSyncBlockDataResult;
38
36
  };
39
37
  export type SyncedBlockPluginOptions = {
40
- getSyncedBlockRenderer: (props: SyncedBlockRendererProps) => React.JSX.Element;
41
38
  syncBlockDataProvider: SyncBlockDataProvider;
42
- syncBlockRendererDataProviders: SyncedBlockRendererDataProviders;
39
+ syncedBlockRenderer: (props: SyncedBlockRendererProps) => React.JSX.Element;
43
40
  };
44
41
  export type SyncedBlockPlugin = NextEditorPlugin<'syncedBlock', {
45
42
  actions: {
package/dist/types/ui/SyncBlockRendererWrapper.d.ts CHANGED
@@ -1,13 +1,11 @@
1
1
  import React from 'react';
2
- import type { SyncedBlockRendererDataProviders } from '@atlaskit/editor-common/provider-factory';
3
2
  import type { UseFetchSyncBlockDataResult } from '@atlaskit/editor-synced-block-provider';
4
3
  import type { SyncedBlockRendererProps } from '../syncedBlockPluginType';
5
4
  type Props = {
6
- getSyncedBlockRenderer: (props: SyncedBlockRendererProps) => React.JSX.Element;
5
+ syncedBlockRenderer: (props: SyncedBlockRendererProps) => React.JSX.Element;
7
6
  localId: string;
8
- syncBlockRendererDataProviders: SyncedBlockRendererDataProviders;
9
7
  useFetchSyncBlockData: () => UseFetchSyncBlockDataResult;
10
8
  useFetchSyncBlockTitle: () => string | undefined;
11
9
  };
12
- export declare const SyncBlockRendererWrapper: React.MemoExoticComponent<({ getSyncedBlockRenderer, useFetchSyncBlockData, syncBlockRendererDataProviders, localId, useFetchSyncBlockTitle, }: Props) => React.JSX.Element>;
10
+ export declare const SyncBlockRendererWrapper: React.MemoExoticComponent<({ syncedBlockRenderer, useFetchSyncBlockData, localId, useFetchSyncBlockTitle, }: Props) => React.JSX.Element>;
13
11
  export {};
package/dist/types-ts4.5/syncedBlockPluginType.d.ts CHANGED
@@ -1,5 +1,4 @@
1
1
  import type { EventDispatcher } from '@atlaskit/editor-common/event-dispatcher';
2
- import type { SyncedBlockRendererDataProviders } from '@atlaskit/editor-common/provider-factory';
3
2
  import type { EditorCommand, NextEditorPlugin, OptionalPlugin } from '@atlaskit/editor-common/types';
4
3
  import type { JSONDocNode } from '@atlaskit/editor-json-transformer';
5
4
  import type { AnalyticsPlugin } from '@atlaskit/editor-plugin-analytics';
@@ -33,13 +32,11 @@ export type SyncedBlockEditorProps = {
33
32
  popupsMountPoint: HTMLElement;
34
33
  };
35
34
  export type SyncedBlockRendererProps = {
36
- syncBlockRendererDataProviders: SyncedBlockRendererDataProviders;
37
35
  useFetchSyncBlockData: () => UseFetchSyncBlockDataResult;
38
36
  };
39
37
  export type SyncedBlockPluginOptions = {
40
- getSyncedBlockRenderer: (props: SyncedBlockRendererProps) => React.JSX.Element;
41
38
  syncBlockDataProvider: SyncBlockDataProvider;
42
- syncBlockRendererDataProviders: SyncedBlockRendererDataProviders;
39
+ syncedBlockRenderer: (props: SyncedBlockRendererProps) => React.JSX.Element;
43
40
  };
44
41
  export type SyncedBlockPlugin = NextEditorPlugin<'syncedBlock', {
45
42
  actions: {
package/dist/types-ts4.5/ui/SyncBlockRendererWrapper.d.ts CHANGED
@@ -1,13 +1,11 @@
1
1
  import React from 'react';
2
- import type { SyncedBlockRendererDataProviders } from '@atlaskit/editor-common/provider-factory';
3
2
  import type { UseFetchSyncBlockDataResult } from '@atlaskit/editor-synced-block-provider';
4
3
  import type { SyncedBlockRendererProps } from '../syncedBlockPluginType';
5
4
  type Props = {
6
- getSyncedBlockRenderer: (props: SyncedBlockRendererProps) => React.JSX.Element;
5
+ syncedBlockRenderer: (props: SyncedBlockRendererProps) => React.JSX.Element;
7
6
  localId: string;
8
- syncBlockRendererDataProviders: SyncedBlockRendererDataProviders;
9
7
  useFetchSyncBlockData: () => UseFetchSyncBlockDataResult;
10
8
  useFetchSyncBlockTitle: () => string | undefined;
11
9
  };
12
- export declare const SyncBlockRendererWrapper: React.MemoExoticComponent<({ getSyncedBlockRenderer, useFetchSyncBlockData, syncBlockRendererDataProviders, localId, useFetchSyncBlockTitle, }: Props) => React.JSX.Element>;
10
+ export declare const SyncBlockRendererWrapper: React.MemoExoticComponent<({ syncedBlockRenderer, useFetchSyncBlockData, localId, useFetchSyncBlockTitle, }: Props) => React.JSX.Element>;
13
11
  export {};
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-synced-block",
3
- "version": "4.1.0",
3
+ "version": "4.1.2",
4
4
  "description": "SyncedBlock plugin for @atlaskit/editor-core",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",
@@ -38,7 +38,7 @@
38
38
  "@atlaskit/editor-plugin-selection": "^6.1.0",
39
39
  "@atlaskit/editor-prosemirror": "7.0.0",
40
40
  "@atlaskit/editor-shared-styles": "^3.8.0",
41
- "@atlaskit/editor-synced-block-provider": "^2.6.0",
41
+ "@atlaskit/editor-synced-block-provider": "^2.7.0",
42
42
  "@atlaskit/editor-tables": "^2.9.0",
43
43
  "@atlaskit/editor-toolbar": "^0.17.0",
44
44
  "@atlaskit/icon": "28.5.3",