@atlaskit/editor-plugin-synced-block 3.0.6 → 3.1.1

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @atlaskit/editor-plugin-synced-block
 
+## 3.1.1
+
+### Patch Changes
+
+- [`7011f9be6a430`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/7011f9be6a430) -
+  [ux] EDITOR-1653 add create synced block item to the block menu
+- Updated dependencies
+
+## 3.1.0
+
+### Minor Changes
+
+- [`9e7a5a0bb1869`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/9e7a5a0bb1869) -
+  Add content api sync block provider
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 3.0.6
 
 ### Patch Changes

package/afm-cc/tsconfig.json

@@ -25,6 +25,9 @@
 		{
 			"path": "../../../design-system/button/afm-cc/tsconfig.json"
 		},
+		{
+			"path": "../../editor-plugin-block-menu/afm-cc/tsconfig.json"
+		},
 		{
 			"path": "../../editor-plugin-decorations/afm-cc/tsconfig.json"
 		},
@@ -40,6 +43,9 @@
 		{
 			"path": "../../editor-synced-block-provider/afm-cc/tsconfig.json"
 		},
+		{
+			"path": "../../editor-toolbar/afm-cc/tsconfig.json"
+		},
 		{
 			"path": "../../../design-system/icon/afm-cc/tsconfig.json"
 		},

package/dist/cjs/nodeviews/syncedBlock.js

@@ -74,7 +74,7 @@ var SyncBlock = /*#__PURE__*/function (_ReactNodeView) {
       }
       // write data
       var node = (0, _editorSyncedBlockProvider.convertSyncBlockPMNodeToSyncBlockData)(this.node, false);
-      (_this$options = this.options) === null || _this$options === void 0 || (_this$options = _this$options.syncedBlockProvider) === null || _this$options === void 0 || _this$options.writeNodesData([node], [{
+      (_this$options = this.options) === null || _this$options === void 0 || (_this$options = _this$options.dataProvider) === null || _this$options === void 0 || _this$options.writeNodesData([node], [{
         content: updatedDoc.toJSON()
       }]);
     }
@@ -84,7 +84,7 @@ var SyncBlock = /*#__PURE__*/function (_ReactNodeView) {
       var _this$options2;
       // set inner editor view
       var nodes = [(0, _editorSyncedBlockProvider.convertSyncBlockPMNodeToSyncBlockData)(this.node, false)];
-      (_this$options2 = this.options) === null || _this$options2 === void 0 || (_this$options2 = _this$options2.syncedBlockProvider) === null || _this$options2 === void 0 || _this$options2.fetchNodesData(nodes).then(function (data) {
+      (_this$options2 = this.options) === null || _this$options2 === void 0 || (_this$options2 = _this$options2.dataProvider) === null || _this$options2 === void 0 || _this$options2.fetchNodesData(nodes).then(function (data) {
         var _data$;
         var tr = editorView.state.tr;
         if (data && (_data$ = data[0]) !== null && _data$ !== void 0 && _data$.content) {
@@ -134,7 +134,7 @@ var SyncBlock = /*#__PURE__*/function (_ReactNodeView) {
       return /*#__PURE__*/_react.default.createElement(_SyncBlockRendererWrapper.SyncBlockRendererWrapper, {
         useFetchDocNode: function useFetchDocNode() {
           var _this3$options;
-          return (0, _editorSyncedBlockProvider.useFetchDocNode)(_this3.view, _this3.node, defaultSyncBlockRendererDocument, (_this3$options = _this3.options) === null || _this3$options === void 0 ? void 0 : _this3$options.syncedBlockProvider);
+          return (0, _editorSyncedBlockProvider.useFetchDocNode)(_this3.view, _this3.node, defaultSyncBlockRendererDocument, (_this3$options = _this3.options) === null || _this3$options === void 0 ? void 0 : _this3$options.dataProvider);
         },
         getSyncedBlockRenderer: (_this$options6 = this.options) === null || _this$options6 === void 0 ? void 0 : _this$options6.getSyncedBlockRenderer
       });

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

@@ -7,37 +7,30 @@ Object.defineProperty(exports, "__esModule", {
 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 _insert = require("@atlaskit/editor-common/insert");
-var _utils = require("@atlaskit/editor-common/utils");
+var _utils = require("@atlaskit/editor-prosemirror/utils");
 var _editorSyncedBlockProvider = require("@atlaskit/editor-synced-block-provider");
 var _utils2 = require("./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(typeAheadInsert, state, syncBlockStore) {
-  var syncBlock = state.schema.nodes.syncBlock;
-  var tr;
+var createSyncedBlock = exports.createSyncedBlock = function createSyncedBlock(tr, syncBlockStore, typeAheadInsert) {
+  var syncBlock = tr.doc.type.schema.nodes.syncBlock;
   var syncBlockNode = syncBlockStore.createSyncBlockNode();
 
   // If the selection is empty, we want to insert the panel on a new line
-  if (state.selection.empty) {
+  if (tr.selection.empty) {
     var node = syncBlock.createAndFill(_objectSpread({}, syncBlockNode.attrs));
     if (!node) {
       return false;
     }
-    if (typeAheadInsert !== undefined) {
-      // If the type-ahead insert is provided, we should use that to insert the node
+    if (typeAheadInsert) {
       tr = typeAheadInsert(node);
     } else {
-      var _insertSelectedItem;
-      // Otherwise we can use insertSelectedItem to insert the node
-      tr = (_insertSelectedItem = (0, _insert.insertSelectedItem)(node)(state, state.tr, state.selection.head)) === null || _insertSelectedItem === void 0 ? void 0 : _insertSelectedItem.scrollIntoView();
+      tr = tr.replaceSelectionWith(node).scrollIntoView();
     }
   } else {
-    tr = (0, _utils.createWrapSelectionTransaction)({
-      state: state,
-      type: syncBlock,
-      nodeAttributes: _objectSpread({}, syncBlockNode.attrs)
-    });
+    var _safeInsert;
+    // TODO: EDITOR-1653 - put selection inside the sync block if possible
+    (_safeInsert = (0, _utils.safeInsert)(syncBlock.createAndFill(syncBlockNode.attrs))(tr)) === null || _safeInsert === void 0 || _safeInsert.scrollIntoView();
   }
   return tr;
 };

package/dist/cjs/syncedBlockPlugin.js

@@ -12,12 +12,15 @@ var _quickInsert = require("@atlaskit/editor-common/quick-insert");
 var _editorSyncedBlockProvider = require("@atlaskit/editor-synced-block-provider");
 var _actions = require("./pm-plugins/actions");
 var _main = require("./pm-plugins/main");
+var _blockMenuComponents = require("./ui/block-menu-components");
 var _ContentComponent = require("./ui/ContentComponent");
 var _floatingToolbar = require("./ui/floating-toolbar");
 var syncedBlockPlugin = exports.syncedBlockPlugin = function syncedBlockPlugin(_ref) {
+  var _api$blockMenu;
   var config = _ref.config,
     api = _ref.api;
   var syncBlockStore = new _editorSyncedBlockProvider.SyncBlockStoreManager(config === null || config === void 0 ? void 0 : config.dataProvider);
+  api === null || api === void 0 || (_api$blockMenu = api.blockMenu) === null || _api$blockMenu === void 0 || _api$blockMenu.actions.registerBlockMenuComponents((0, _blockMenuComponents.getBlockMenuComponents)(api));
   return {
     name: 'syncedBlock',
     nodes: function nodes() {
@@ -34,9 +37,17 @@ var syncedBlockPlugin = exports.syncedBlockPlugin = function syncedBlockPlugin(_
         }
       }];
     },
+    commands: {
+      insertSyncedBlock: function insertSyncedBlock() {
+        return function (_ref2) {
+          var tr = _ref2.tr;
+          return (0, _actions.createSyncedBlock)(tr, syncBlockStore) || null;
+        };
+      }
+    },
     pluginsOptions: {
-      quickInsert: function quickInsert(_ref2) {
-        var formatMessage = _ref2.formatMessage;
+      quickInsert: function quickInsert(_ref3) {
+        var formatMessage = _ref3.formatMessage;
         return [{
           id: 'syncBlock',
           title: formatMessage(_messages.blockTypeMessages.syncedBlock),
@@ -50,7 +61,7 @@ var syncedBlockPlugin = exports.syncedBlockPlugin = function syncedBlockPlugin(_
             });
           },
           action: function action(insert, state) {
-            return (0, _actions.createSyncedBlock)(insert, state, syncBlockStore);
+            return (0, _actions.createSyncedBlock)(state.tr, syncBlockStore, insert);
           }
         }];
       },

package/dist/cjs/ui/CreateSyncedBlockDropdownItem.js

@@ -0,0 +1,31 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CreateSyncedBlockDropdownItem = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _reactIntlNext = require("react-intl-next");
+var _messages = require("@atlaskit/editor-common/messages");
+var _editorToolbar = require("@atlaskit/editor-toolbar");
+var CreateSyncedBlockDropdownItem = exports.CreateSyncedBlockDropdownItem = function CreateSyncedBlockDropdownItem(_ref) {
+  var _api$selection;
+  var api = _ref.api;
+  var _useIntl = (0, _reactIntlNext.useIntl)(),
+    formatMessage = _useIntl.formatMessage;
+  var selection = api === null || api === void 0 || (_api$selection = api.selection) === null || _api$selection === void 0 || (_api$selection = _api$selection.sharedState) === null || _api$selection === void 0 || (_api$selection = _api$selection.currentState()) === null || _api$selection === void 0 ? void 0 : _api$selection.selection;
+  if (!(selection !== null && selection !== void 0 && selection.empty)) {
+    return null;
+  }
+  var onClick = function onClick() {
+    var _api$core;
+    api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 || _api$core.actions.execute(api === null || api === void 0 ? void 0 : api.syncedBlock.commands.insertSyncedBlock());
+  };
+  return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownItem, {
+    elemBefore: /*#__PURE__*/_react.default.createElement(_editorToolbar.SyncBlocksIcon, {
+      label: ""
+    }),
+    onClick: onClick
+  }, formatMessage(_messages.blockMenuMessages.createSyncedBlock));
+};

package/dist/cjs/ui/block-menu-components.js

@@ -0,0 +1,26 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getBlockMenuComponents = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _blockMenu = require("@atlaskit/editor-common/block-menu");
+var _CreateSyncedBlockDropdownItem = require("./CreateSyncedBlockDropdownItem");
+var getBlockMenuComponents = exports.getBlockMenuComponents = function getBlockMenuComponents(api) {
+  return [{
+    type: 'block-menu-item',
+    key: _blockMenu.CREATE_SYNCED_BLOCK_MENU_ITEM.key,
+    parent: {
+      type: 'block-menu-section',
+      key: _blockMenu.ADD_BLOCKS_MENU_SECTION.key,
+      rank: _blockMenu.ADD_BLOCKS_MENU_SECTION_RANK[_blockMenu.CREATE_SYNCED_BLOCK_MENU_ITEM.key]
+    },
+    component: function component() {
+      return /*#__PURE__*/_react.default.createElement(_CreateSyncedBlockDropdownItem.CreateSyncedBlockDropdownItem, {
+        api: api
+      });
+    }
+  }];
+};

package/dist/es2019/nodeviews/syncedBlock.js

@@ -42,21 +42,21 @@ class SyncBlock extends ReactNodeView {
     return this.syncBlockStore.isSourceBlock(this.node);
   }
   handleContentChanges(updatedDoc) {
-    var _this$options, _this$options$syncedB;
+    var _this$options, _this$options$dataPro;
     if (!this.isSource) {
       return;
     }
     // write data
     const node = convertSyncBlockPMNodeToSyncBlockData(this.node, false);
-    (_this$options = this.options) === null || _this$options === void 0 ? void 0 : (_this$options$syncedB = _this$options.syncedBlockProvider) === null || _this$options$syncedB === void 0 ? void 0 : _this$options$syncedB.writeNodesData([node], [{
+    (_this$options = this.options) === null || _this$options === void 0 ? void 0 : (_this$options$dataPro = _this$options.dataProvider) === null || _this$options$dataPro === void 0 ? void 0 : _this$options$dataPro.writeNodesData([node], [{
       content: updatedDoc.toJSON()
     }]);
   }
   setInnerEditorView(editorView) {
-    var _this$options2, _this$options2$synced;
+    var _this$options2, _this$options2$dataPr;
     // set inner editor view
     const nodes = [convertSyncBlockPMNodeToSyncBlockData(this.node, false)];
-    (_this$options2 = this.options) === null || _this$options2 === void 0 ? void 0 : (_this$options2$synced = _this$options2.syncedBlockProvider) === null || _this$options2$synced === void 0 ? void 0 : _this$options2$synced.fetchNodesData(nodes).then(data => {
+    (_this$options2 = this.options) === null || _this$options2 === void 0 ? void 0 : (_this$options2$dataPr = _this$options2.dataProvider) === null || _this$options2$dataPr === void 0 ? void 0 : _this$options2$dataPr.fetchNodesData(nodes).then(data => {
       var _data$;
       const tr = editorView.state.tr;
       if (data && (_data$ = data[0]) !== null && _data$ !== void 0 && _data$.content) {
@@ -94,7 +94,7 @@ class SyncBlock extends ReactNodeView {
     return /*#__PURE__*/React.createElement(SyncBlockRendererWrapper, {
       useFetchDocNode: () => {
         var _this$options6;
-        return useFetchDocNode(this.view, this.node, defaultSyncBlockRendererDocument, (_this$options6 = this.options) === null || _this$options6 === void 0 ? void 0 : _this$options6.syncedBlockProvider);
+        return useFetchDocNode(this.view, this.node, defaultSyncBlockRendererDocument, (_this$options6 = this.options) === null || _this$options6 === void 0 ? void 0 : _this$options6.dataProvider);
       },
       getSyncedBlockRenderer: (_this$options7 = this.options) === null || _this$options7 === void 0 ? void 0 : _this$options7.getSyncedBlockRenderer
     });

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

@@ -1,43 +1,34 @@
 import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
-import { insertSelectedItem } from '@atlaskit/editor-common/insert';
-import { createWrapSelectionTransaction } from '@atlaskit/editor-common/utils';
+import { safeInsert } from '@atlaskit/editor-prosemirror/utils';
 import { generateSyncBlockSourceUrl } from '@atlaskit/editor-synced-block-provider';
 import { findSyncBlock } from './utils/utils';
-export const createSyncedBlock = (typeAheadInsert, state, syncBlockStore) => {
+export const createSyncedBlock = (tr, syncBlockStore, typeAheadInsert) => {
   const {
     schema: {
       nodes: {
         syncBlock
       }
     }
-  } = state;
-  let tr;
+  } = tr.doc.type;
   const syncBlockNode = syncBlockStore.createSyncBlockNode();
 
   // If the selection is empty, we want to insert the panel on a new line
-  if (state.selection.empty) {
+  if (tr.selection.empty) {
     const node = syncBlock.createAndFill({
       ...syncBlockNode.attrs
     });
     if (!node) {
       return false;
     }
-    if (typeAheadInsert !== undefined) {
-      // If the type-ahead insert is provided, we should use that to insert the node
+    if (typeAheadInsert) {
       tr = typeAheadInsert(node);
     } else {
-      var _insertSelectedItem;
-      // Otherwise we can use insertSelectedItem to insert the node
-      tr = (_insertSelectedItem = insertSelectedItem(node)(state, state.tr, state.selection.head)) === null || _insertSelectedItem === void 0 ? void 0 : _insertSelectedItem.scrollIntoView();
+      tr = tr.replaceSelectionWith(node).scrollIntoView();
     }
   } else {
-    tr = createWrapSelectionTransaction({
-      state,
-      type: syncBlock,
-      nodeAttributes: {
-        ...syncBlockNode.attrs
-      }
-    });
+    var _safeInsert;
+    // TODO: EDITOR-1653 - put selection inside the sync block if possible
+    (_safeInsert = safeInsert(syncBlock.createAndFill(syncBlockNode.attrs))(tr)) === null || _safeInsert === void 0 ? void 0 : _safeInsert.scrollIntoView();
   }
   return tr;
 };

package/dist/es2019/syncedBlockPlugin.js

@@ -5,13 +5,16 @@ import { IconSyncBlock } from '@atlaskit/editor-common/quick-insert';
 import { SyncBlockStoreManager } from '@atlaskit/editor-synced-block-provider';
 import { createSyncedBlock } from './pm-plugins/actions';
 import { createPlugin } from './pm-plugins/main';
+import { getBlockMenuComponents } from './ui/block-menu-components';
 import { ContentComponent } from './ui/ContentComponent';
 import { getToolbarConfig } from './ui/floating-toolbar';
 export const syncedBlockPlugin = ({
   config,
   api
 }) => {
+  var _api$blockMenu;
   const syncBlockStore = new SyncBlockStoreManager(config === null || config === void 0 ? void 0 : config.dataProvider);
+  api === null || api === void 0 ? void 0 : (_api$blockMenu = api.blockMenu) === null || _api$blockMenu === void 0 ? void 0 : _api$blockMenu.actions.registerBlockMenuComponents(getBlockMenuComponents(api));
   return {
     name: 'syncedBlock',
     nodes() {
@@ -26,6 +29,11 @@ export const syncedBlockPlugin = ({
         plugin: params => createPlugin(config, params, syncBlockStore, api)
       }];
     },
+    commands: {
+      insertSyncedBlock: () => ({
+        tr
+      }) => createSyncedBlock(tr, syncBlockStore) || null
+    },
     pluginsOptions: {
       quickInsert: ({
         formatMessage
@@ -40,7 +48,7 @@ export const syncedBlockPlugin = ({
           label: formatMessage(blockTypeMessages.syncedBlock)
         }),
         action: (insert, state) => {
-          return createSyncedBlock(insert, state, syncBlockStore);
+          return createSyncedBlock(state.tr, syncBlockStore, insert);
         }
       }],
       floatingToolbar: (state, intl, providerFactory) => getToolbarConfig(state, intl, config, providerFactory, api, syncBlockStore)

package/dist/es2019/ui/CreateSyncedBlockDropdownItem.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import { useIntl } from 'react-intl-next';
+import { blockMenuMessages } from '@atlaskit/editor-common/messages';
+import { SyncBlocksIcon, ToolbarDropdownItem } from '@atlaskit/editor-toolbar';
+export const CreateSyncedBlockDropdownItem = ({
+  api
+}) => {
+  var _api$selection, _api$selection$shared, _api$selection$shared2;
+  const {
+    formatMessage
+  } = useIntl();
+  const selection = api === null || api === void 0 ? void 0 : (_api$selection = api.selection) === null || _api$selection === void 0 ? void 0 : (_api$selection$shared = _api$selection.sharedState) === null || _api$selection$shared === void 0 ? void 0 : (_api$selection$shared2 = _api$selection$shared.currentState()) === null || _api$selection$shared2 === void 0 ? void 0 : _api$selection$shared2.selection;
+  if (!(selection !== null && selection !== void 0 && selection.empty)) {
+    return null;
+  }
+  const onClick = () => {
+    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(api === null || api === void 0 ? void 0 : api.syncedBlock.commands.insertSyncedBlock());
+  };
+  return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
+    elemBefore: /*#__PURE__*/React.createElement(SyncBlocksIcon, {
+      label: ""
+    }),
+    onClick: onClick
+  }, formatMessage(blockMenuMessages.createSyncedBlock));
+};

package/dist/es2019/ui/block-menu-components.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import { ADD_BLOCKS_MENU_SECTION, ADD_BLOCKS_MENU_SECTION_RANK, CREATE_SYNCED_BLOCK_MENU_ITEM } from '@atlaskit/editor-common/block-menu';
+import { CreateSyncedBlockDropdownItem } from './CreateSyncedBlockDropdownItem';
+export const getBlockMenuComponents = api => {
+  return [{
+    type: 'block-menu-item',
+    key: CREATE_SYNCED_BLOCK_MENU_ITEM.key,
+    parent: {
+      type: 'block-menu-section',
+      key: ADD_BLOCKS_MENU_SECTION.key,
+      rank: ADD_BLOCKS_MENU_SECTION_RANK[CREATE_SYNCED_BLOCK_MENU_ITEM.key]
+    },
+    component: () => /*#__PURE__*/React.createElement(CreateSyncedBlockDropdownItem, {
+      api: api
+    })
+  }];
+};

package/dist/esm/nodeviews/syncedBlock.js

@@ -67,7 +67,7 @@ var SyncBlock = /*#__PURE__*/function (_ReactNodeView) {
       }
       // write data
       var node = convertSyncBlockPMNodeToSyncBlockData(this.node, false);
-      (_this$options = this.options) === null || _this$options === void 0 || (_this$options = _this$options.syncedBlockProvider) === null || _this$options === void 0 || _this$options.writeNodesData([node], [{
+      (_this$options = this.options) === null || _this$options === void 0 || (_this$options = _this$options.dataProvider) === null || _this$options === void 0 || _this$options.writeNodesData([node], [{
         content: updatedDoc.toJSON()
       }]);
     }
@@ -77,7 +77,7 @@ var SyncBlock = /*#__PURE__*/function (_ReactNodeView) {
       var _this$options2;
       // set inner editor view
       var nodes = [convertSyncBlockPMNodeToSyncBlockData(this.node, false)];
-      (_this$options2 = this.options) === null || _this$options2 === void 0 || (_this$options2 = _this$options2.syncedBlockProvider) === null || _this$options2 === void 0 || _this$options2.fetchNodesData(nodes).then(function (data) {
+      (_this$options2 = this.options) === null || _this$options2 === void 0 || (_this$options2 = _this$options2.dataProvider) === null || _this$options2 === void 0 || _this$options2.fetchNodesData(nodes).then(function (data) {
         var _data$;
         var tr = editorView.state.tr;
         if (data && (_data$ = data[0]) !== null && _data$ !== void 0 && _data$.content) {
@@ -127,7 +127,7 @@ var SyncBlock = /*#__PURE__*/function (_ReactNodeView) {
       return /*#__PURE__*/React.createElement(SyncBlockRendererWrapper, {
         useFetchDocNode: function useFetchDocNode() {
           var _this3$options;
-          return _useFetchDocNode(_this3.view, _this3.node, defaultSyncBlockRendererDocument, (_this3$options = _this3.options) === null || _this3$options === void 0 ? void 0 : _this3$options.syncedBlockProvider);
+          return _useFetchDocNode(_this3.view, _this3.node, defaultSyncBlockRendererDocument, (_this3$options = _this3.options) === null || _this3$options === void 0 ? void 0 : _this3$options.dataProvider);
         },
         getSyncedBlockRenderer: (_this$options6 = this.options) === null || _this$options6 === void 0 ? void 0 : _this$options6.getSyncedBlockRenderer
       });

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

@@ -2,35 +2,28 @@ 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 { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
-import { insertSelectedItem } from '@atlaskit/editor-common/insert';
-import { createWrapSelectionTransaction } from '@atlaskit/editor-common/utils';
+import { safeInsert } from '@atlaskit/editor-prosemirror/utils';
 import { generateSyncBlockSourceUrl } from '@atlaskit/editor-synced-block-provider';
 import { findSyncBlock } from './utils/utils';
-export var createSyncedBlock = function createSyncedBlock(typeAheadInsert, state, syncBlockStore) {
-  var syncBlock = state.schema.nodes.syncBlock;
-  var tr;
+export var createSyncedBlock = function createSyncedBlock(tr, syncBlockStore, typeAheadInsert) {
+  var syncBlock = tr.doc.type.schema.nodes.syncBlock;
   var syncBlockNode = syncBlockStore.createSyncBlockNode();
 
   // If the selection is empty, we want to insert the panel on a new line
-  if (state.selection.empty) {
+  if (tr.selection.empty) {
     var node = syncBlock.createAndFill(_objectSpread({}, syncBlockNode.attrs));
     if (!node) {
       return false;
     }
-    if (typeAheadInsert !== undefined) {
-      // If the type-ahead insert is provided, we should use that to insert the node
+    if (typeAheadInsert) {
       tr = typeAheadInsert(node);
     } else {
-      var _insertSelectedItem;
-      // Otherwise we can use insertSelectedItem to insert the node
-      tr = (_insertSelectedItem = insertSelectedItem(node)(state, state.tr, state.selection.head)) === null || _insertSelectedItem === void 0 ? void 0 : _insertSelectedItem.scrollIntoView();
+      tr = tr.replaceSelectionWith(node).scrollIntoView();
     }
   } else {
-    tr = createWrapSelectionTransaction({
-      state: state,
-      type: syncBlock,
-      nodeAttributes: _objectSpread({}, syncBlockNode.attrs)
-    });
+    var _safeInsert;
+    // TODO: EDITOR-1653 - put selection inside the sync block if possible
+    (_safeInsert = safeInsert(syncBlock.createAndFill(syncBlockNode.attrs))(tr)) === null || _safeInsert === void 0 || _safeInsert.scrollIntoView();
   }
   return tr;
 };

package/dist/esm/syncedBlockPlugin.js

@@ -5,12 +5,15 @@ import { IconSyncBlock } from '@atlaskit/editor-common/quick-insert';
 import { SyncBlockStoreManager } from '@atlaskit/editor-synced-block-provider';
 import { createSyncedBlock } from './pm-plugins/actions';
 import { createPlugin } from './pm-plugins/main';
+import { getBlockMenuComponents } from './ui/block-menu-components';
 import { ContentComponent } from './ui/ContentComponent';
 import { getToolbarConfig } from './ui/floating-toolbar';
 export var syncedBlockPlugin = function syncedBlockPlugin(_ref) {
+  var _api$blockMenu;
   var config = _ref.config,
     api = _ref.api;
   var syncBlockStore = new SyncBlockStoreManager(config === null || config === void 0 ? void 0 : config.dataProvider);
+  api === null || api === void 0 || (_api$blockMenu = api.blockMenu) === null || _api$blockMenu === void 0 || _api$blockMenu.actions.registerBlockMenuComponents(getBlockMenuComponents(api));
   return {
     name: 'syncedBlock',
     nodes: function nodes() {
@@ -27,9 +30,17 @@ export var syncedBlockPlugin = function syncedBlockPlugin(_ref) {
         }
       }];
     },
+    commands: {
+      insertSyncedBlock: function insertSyncedBlock() {
+        return function (_ref2) {
+          var tr = _ref2.tr;
+          return createSyncedBlock(tr, syncBlockStore) || null;
+        };
+      }
+    },
     pluginsOptions: {
-      quickInsert: function quickInsert(_ref2) {
-        var formatMessage = _ref2.formatMessage;
+      quickInsert: function quickInsert(_ref3) {
+        var formatMessage = _ref3.formatMessage;
         return [{
           id: 'syncBlock',
           title: formatMessage(blockTypeMessages.syncedBlock),
@@ -43,7 +54,7 @@ export var syncedBlockPlugin = function syncedBlockPlugin(_ref) {
             });
           },
           action: function action(insert, state) {
-            return createSyncedBlock(insert, state, syncBlockStore);
+            return createSyncedBlock(state.tr, syncBlockStore, insert);
           }
         }];
       },

package/dist/esm/ui/CreateSyncedBlockDropdownItem.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import { useIntl } from 'react-intl-next';
+import { blockMenuMessages } from '@atlaskit/editor-common/messages';
+import { SyncBlocksIcon, ToolbarDropdownItem } from '@atlaskit/editor-toolbar';
+export var CreateSyncedBlockDropdownItem = function CreateSyncedBlockDropdownItem(_ref) {
+  var _api$selection;
+  var api = _ref.api;
+  var _useIntl = useIntl(),
+    formatMessage = _useIntl.formatMessage;
+  var selection = api === null || api === void 0 || (_api$selection = api.selection) === null || _api$selection === void 0 || (_api$selection = _api$selection.sharedState) === null || _api$selection === void 0 || (_api$selection = _api$selection.currentState()) === null || _api$selection === void 0 ? void 0 : _api$selection.selection;
+  if (!(selection !== null && selection !== void 0 && selection.empty)) {
+    return null;
+  }
+  var onClick = function onClick() {
+    var _api$core;
+    api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 || _api$core.actions.execute(api === null || api === void 0 ? void 0 : api.syncedBlock.commands.insertSyncedBlock());
+  };
+  return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
+    elemBefore: /*#__PURE__*/React.createElement(SyncBlocksIcon, {
+      label: ""
+    }),
+    onClick: onClick
+  }, formatMessage(blockMenuMessages.createSyncedBlock));
+};

package/dist/esm/ui/block-menu-components.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import { ADD_BLOCKS_MENU_SECTION, ADD_BLOCKS_MENU_SECTION_RANK, CREATE_SYNCED_BLOCK_MENU_ITEM } from '@atlaskit/editor-common/block-menu';
+import { CreateSyncedBlockDropdownItem } from './CreateSyncedBlockDropdownItem';
+export var getBlockMenuComponents = function getBlockMenuComponents(api) {
+  return [{
+    type: 'block-menu-item',
+    key: CREATE_SYNCED_BLOCK_MENU_ITEM.key,
+    parent: {
+      type: 'block-menu-section',
+      key: ADD_BLOCKS_MENU_SECTION.key,
+      rank: ADD_BLOCKS_MENU_SECTION_RANK[CREATE_SYNCED_BLOCK_MENU_ITEM.key]
+    },
+    component: function component() {
+      return /*#__PURE__*/React.createElement(CreateSyncedBlockDropdownItem, {
+        api: api
+      });
+    }
+  }];
+};

package/dist/types/pm-plugins/actions.d.ts

@@ -1,8 +1,8 @@
 import type { Command, ExtractInjectionAPI, TypeAheadInsert } from '@atlaskit/editor-common/types';
-import { type EditorState, type Transaction } from '@atlaskit/editor-prosemirror/state';
+import { type Transaction } from '@atlaskit/editor-prosemirror/state';
 import type { SyncBlockStoreManager } from '@atlaskit/editor-synced-block-provider';
 import type { SyncedBlockPlugin } from '../syncedBlockPluginType';
-export declare const createSyncedBlock: (typeAheadInsert: TypeAheadInsert, state: EditorState, syncBlockStore: SyncBlockStoreManager) => false | Transaction;
+export declare const createSyncedBlock: (tr: Transaction, syncBlockStore: SyncBlockStoreManager, typeAheadInsert?: TypeAheadInsert) => false | Transaction;
 export declare const copySyncedBlockReferenceToClipboard: (api?: ExtractInjectionAPI<SyncedBlockPlugin>) => Command;
 export declare const editSyncedBlockSource: (_api?: ExtractInjectionAPI<SyncedBlockPlugin>) => Command;
 export declare const removeSyncedBlock: (api?: ExtractInjectionAPI<SyncedBlockPlugin>) => Command;

package/dist/types/syncedBlockPluginType.d.ts

@@ -1,12 +1,13 @@
 import type { DocNode } from '@atlaskit/adf-schema';
 import type { EventDispatcher } from '@atlaskit/editor-common/event-dispatcher';
-import type { NextEditorPlugin } from '@atlaskit/editor-common/types';
+import type { EditorCommand, NextEditorPlugin, OptionalPlugin } from '@atlaskit/editor-common/types';
 import type { JSONDocNode } from '@atlaskit/editor-json-transformer';
+import type { BlockMenuPlugin } from '@atlaskit/editor-plugin-block-menu';
 import type { DecorationsPlugin } from '@atlaskit/editor-plugin-decorations';
 import type { FloatingToolbarPlugin } from '@atlaskit/editor-plugin-floating-toolbar';
 import type { SelectionPlugin } from '@atlaskit/editor-plugin-selection';
 import type { EditorView } from '@atlaskit/editor-prosemirror/dist/types/view';
-import type { SyncBlockDataProvider, SyncedBlockProvider } from '@atlaskit/editor-synced-block-provider';
+import type { SyncBlockDataProvider } from '@atlaskit/editor-synced-block-provider';
 export type SyncedBlockEditorProps = {
     defaultDocument: JSONDocNode;
     onChange: (editorView: EditorView, meta: {
@@ -36,10 +37,17 @@ export type SyncedBlockPluginOptions = {
     dataProvider?: SyncBlockDataProvider;
     getSyncedBlockEditor?: (props: SyncedBlockEditorProps) => React.JSX.Element;
     getSyncedBlockRenderer?: (props: SyncedBlockRendererProps) => React.JSX.Element;
-    syncedBlockProvider?: SyncedBlockProvider;
 };
 export type SyncedBlockPlugin = NextEditorPlugin<'syncedBlock', {
-    dependencies: [SelectionPlugin, FloatingToolbarPlugin, DecorationsPlugin];
+    commands: {
+        insertSyncedBlock: () => EditorCommand;
+    };
+    dependencies: [
+        SelectionPlugin,
+        FloatingToolbarPlugin,
+        DecorationsPlugin,
+        OptionalPlugin<BlockMenuPlugin>
+    ];
     pluginConfiguration: SyncedBlockPluginOptions | undefined;
 }>;
 export type SyncBlockAttrs = {

package/dist/types/ui/CreateSyncedBlockDropdownItem.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import type { SyncedBlockPlugin } from '../syncedBlockPluginType';
+export declare const CreateSyncedBlockDropdownItem: ({ api }: {
+    api: ExtractInjectionAPI<SyncedBlockPlugin> | undefined;
+}) => React.JSX.Element | null;

package/dist/types/ui/block-menu-components.d.ts

@@ -0,0 +1,4 @@
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import type { RegisterBlockMenuComponent } from '@atlaskit/editor-plugin-block-menu';
+import type { SyncedBlockPlugin } from '../syncedBlockPluginType';
+export declare const getBlockMenuComponents: (api: ExtractInjectionAPI<SyncedBlockPlugin> | undefined) => RegisterBlockMenuComponent[];

package/dist/types-ts4.5/pm-plugins/actions.d.ts

@@ -1,8 +1,8 @@
 import type { Command, ExtractInjectionAPI, TypeAheadInsert } from '@atlaskit/editor-common/types';
-import { type EditorState, type Transaction } from '@atlaskit/editor-prosemirror/state';
+import { type Transaction } from '@atlaskit/editor-prosemirror/state';
 import type { SyncBlockStoreManager } from '@atlaskit/editor-synced-block-provider';
 import type { SyncedBlockPlugin } from '../syncedBlockPluginType';
-export declare const createSyncedBlock: (typeAheadInsert: TypeAheadInsert, state: EditorState, syncBlockStore: SyncBlockStoreManager) => false | Transaction;
+export declare const createSyncedBlock: (tr: Transaction, syncBlockStore: SyncBlockStoreManager, typeAheadInsert?: TypeAheadInsert) => false | Transaction;
 export declare const copySyncedBlockReferenceToClipboard: (api?: ExtractInjectionAPI<SyncedBlockPlugin>) => Command;
 export declare const editSyncedBlockSource: (_api?: ExtractInjectionAPI<SyncedBlockPlugin>) => Command;
 export declare const removeSyncedBlock: (api?: ExtractInjectionAPI<SyncedBlockPlugin>) => Command;

package/dist/types-ts4.5/syncedBlockPluginType.d.ts

@@ -1,12 +1,13 @@
 import type { DocNode } from '@atlaskit/adf-schema';
 import type { EventDispatcher } from '@atlaskit/editor-common/event-dispatcher';
-import type { NextEditorPlugin } from '@atlaskit/editor-common/types';
+import type { EditorCommand, NextEditorPlugin, OptionalPlugin } from '@atlaskit/editor-common/types';
 import type { JSONDocNode } from '@atlaskit/editor-json-transformer';
+import type { BlockMenuPlugin } from '@atlaskit/editor-plugin-block-menu';
 import type { DecorationsPlugin } from '@atlaskit/editor-plugin-decorations';
 import type { FloatingToolbarPlugin } from '@atlaskit/editor-plugin-floating-toolbar';
 import type { SelectionPlugin } from '@atlaskit/editor-plugin-selection';
 import type { EditorView } from '@atlaskit/editor-prosemirror/dist/types/view';
-import type { SyncBlockDataProvider, SyncedBlockProvider } from '@atlaskit/editor-synced-block-provider';
+import type { SyncBlockDataProvider } from '@atlaskit/editor-synced-block-provider';
 export type SyncedBlockEditorProps = {
     defaultDocument: JSONDocNode;
     onChange: (editorView: EditorView, meta: {
@@ -36,13 +37,16 @@ export type SyncedBlockPluginOptions = {
     dataProvider?: SyncBlockDataProvider;
     getSyncedBlockEditor?: (props: SyncedBlockEditorProps) => React.JSX.Element;
     getSyncedBlockRenderer?: (props: SyncedBlockRendererProps) => React.JSX.Element;
-    syncedBlockProvider?: SyncedBlockProvider;
 };
 export type SyncedBlockPlugin = NextEditorPlugin<'syncedBlock', {
+    commands: {
+        insertSyncedBlock: () => EditorCommand;
+    };
     dependencies: [
         SelectionPlugin,
         FloatingToolbarPlugin,
-        DecorationsPlugin
+        DecorationsPlugin,
+        OptionalPlugin<BlockMenuPlugin>
     ];
     pluginConfiguration: SyncedBlockPluginOptions | undefined;
 }>;

package/dist/types-ts4.5/ui/CreateSyncedBlockDropdownItem.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import type { SyncedBlockPlugin } from '../syncedBlockPluginType';
+export declare const CreateSyncedBlockDropdownItem: ({ api }: {
+    api: ExtractInjectionAPI<SyncedBlockPlugin> | undefined;
+}) => React.JSX.Element | null;

package/dist/types-ts4.5/ui/block-menu-components.d.ts

@@ -0,0 +1,4 @@
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import type { RegisterBlockMenuComponent } from '@atlaskit/editor-plugin-block-menu';
+import type { SyncedBlockPlugin } from '../syncedBlockPluginType';
+export declare const getBlockMenuComponents: (api: ExtractInjectionAPI<SyncedBlockPlugin> | undefined) => RegisterBlockMenuComponent[];

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-synced-block",
-	"version": "3.0.6",
+	"version": "3.1.1",
 	"description": "SyncedBlock plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -30,13 +30,15 @@
 	"dependencies": {
 		"@atlaskit/adf-schema": "^51.2.0",
 		"@atlaskit/button": "23.5.0",
+		"@atlaskit/editor-plugin-block-menu": "^4.0.0",
 		"@atlaskit/editor-plugin-decorations": "^6.1.0",
-		"@atlaskit/editor-plugin-floating-toolbar": "^8.1.0",
+		"@atlaskit/editor-plugin-floating-toolbar": "^8.2.0",
 		"@atlaskit/editor-plugin-selection": "^6.0.0",
 		"@atlaskit/editor-prosemirror": "7.0.0",
 		"@atlaskit/editor-shared-styles": "^3.6.0",
-		"@atlaskit/editor-synced-block-provider": "^0.2.0",
-		"@atlaskit/icon": "28.3.0",
+		"@atlaskit/editor-synced-block-provider": "^0.3.0",
+		"@atlaskit/editor-toolbar": "^0.13.0",
+		"@atlaskit/icon": "28.4.0",
 		"@atlaskit/modal-dialog": "^14.4.0",
 		"@babel/runtime": "^7.0.0",
 		"react-intl-next": "npm:react-intl@^5.18.1"