@atlaskit/editor-plugin-synced-block 4.1.3 → 4.2.0

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/editor-plugin-synced-block
 
+## 4.2.0
+
+### Minor Changes
+
+- [`cd4d309562a37`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/cd4d309562a37) -
+  EDITOR-2534 add sync-block toolbar option
+
+### Patch Changes
+
+- Updated dependencies
+
+## 4.1.4
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 4.1.3
 
 ### Patch Changes

package/afm-cc/tsconfig.json

@@ -58,6 +58,9 @@
 		{
 			"path": "../../../design-system/icon/afm-cc/tsconfig.json"
 		},
+		{
+			"path": "../../../design-system/icon-lab/afm-cc/tsconfig.json"
+		},
 		{
 			"path": "../../../design-system/logo/afm-cc/tsconfig.json"
 		},

package/dist/cjs/syncedBlockPlugin.js

@@ -17,12 +17,14 @@ var _blockMenuComponents = require("./ui/block-menu-components");
 var _DeleteConfirmationModal = require("./ui/DeleteConfirmationModal");
 var _floatingToolbar = require("./ui/floating-toolbar");
 var _SyncBlockRefresher = require("./ui/SyncBlockRefresher");
+var _toolbarComponents = require("./ui/toolbar-components");
 var syncedBlockPlugin = exports.syncedBlockPlugin = function syncedBlockPlugin(_ref) {
-  var _api$blockMenu;
+  var _api$blockMenu, _api$toolbar;
   var config = _ref.config,
     api = _ref.api;
   var syncBlockStore = new _editorSyncedBlockProvider.SyncBlockStoreManager(config === null || config === void 0 ? void 0 : config.syncBlockDataProvider);
   api === null || api === void 0 || (_api$blockMenu = api.blockMenu) === null || _api$blockMenu === void 0 || _api$blockMenu.actions.registerBlockMenuComponents((0, _blockMenuComponents.getBlockMenuComponents)(api));
+  api === null || api === void 0 || (_api$toolbar = api.toolbar) === null || _api$toolbar === void 0 || _api$toolbar.actions.registerComponents((0, _toolbarComponents.getToolbarComponents)(api));
   return {
     name: 'syncedBlock',
     nodes: function nodes() {

package/dist/cjs/ui/CreateSyncedBlockButton.js

@@ -0,0 +1,51 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CreateSyncedBlockButton = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactIntlNext = require("react-intl-next");
+var _hooks = require("@atlaskit/editor-common/hooks");
+var _messages = require("@atlaskit/editor-common/messages");
+var _editorToolbar = require("@atlaskit/editor-toolbar");
+var _blockSynced = _interopRequireDefault(require("@atlaskit/icon-lab/core/block-synced"));
+var _utils = require("../pm-plugins/utils/utils");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+var CreateSyncedBlockButton = exports.CreateSyncedBlockButton = function CreateSyncedBlockButton(_ref) {
+  var api = _ref.api;
+  var intl = (0, _reactIntlNext.useIntl)();
+  var selection = (0, _hooks.useSharedPluginStateWithSelector)(api, ['selection'], function (states) {
+    var _states$selectionStat;
+    return (_states$selectionStat = states.selectionState) === null || _states$selectionStat === void 0 ? void 0 : _states$selectionStat.selection;
+  });
+
+  // for toolbar button, we allow both creating a new synced block
+  // and converting existing block to synced block
+  var canBeConverted = Boolean(selection && (0, _utils.canBeConvertedToSyncBlock)(selection));
+  var canInsertEmptyBlock = Boolean(selection === null || selection === void 0 ? void 0 : selection.empty);
+  var isDisabled = Boolean(!canBeConverted && !canInsertEmptyBlock);
+  var onClick = (0, _react.useCallback)(function () {
+    var _api$core, _api$core2;
+    api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 || _api$core.actions.execute(function (_ref2) {
+      var tr = _ref2.tr;
+      return api === null || api === void 0 ? void 0 : api.syncedBlock.commands.insertSyncedBlock()({
+        tr: tr
+      });
+    });
+    api === null || api === void 0 || (_api$core2 = api.core) === null || _api$core2 === void 0 || _api$core2.actions.focus();
+  }, [api]);
+  var message = intl.formatMessage(_messages.syncBlockMessages.createSyncBlockLabel);
+  return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarTooltip, {
+    content: message
+  }, /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarButton, {
+    label: message,
+    iconBefore: /*#__PURE__*/_react.default.createElement(_blockSynced.default, {
+      label: ""
+    }),
+    isDisabled: isDisabled,
+    onClick: onClick
+  }));
+};

package/dist/cjs/ui/CreateSyncedBlockItem.js

@@ -0,0 +1,43 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CreateSyncedBlockItem = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactIntlNext = require("react-intl-next");
+var _hooks = require("@atlaskit/editor-common/hooks");
+var _messages = require("@atlaskit/editor-common/messages");
+var _editorToolbar = require("@atlaskit/editor-toolbar");
+var _blockSynced = _interopRequireDefault(require("@atlaskit/icon-lab/core/block-synced"));
+var _utils = require("../pm-plugins/utils/utils");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+var CreateSyncedBlockItem = exports.CreateSyncedBlockItem = function CreateSyncedBlockItem(_ref) {
+  var api = _ref.api;
+  var intl = (0, _reactIntlNext.useIntl)();
+  var selection = (0, _hooks.useSharedPluginStateWithSelector)(api, ['selection'], function (states) {
+    var _states$selectionStat;
+    return (_states$selectionStat = states.selectionState) === null || _states$selectionStat === void 0 ? void 0 : _states$selectionStat.selection;
+  });
+  var isDisabled = Boolean(!selection || !(0, _utils.canBeConvertedToSyncBlock)(selection));
+  var onClick = (0, _react.useCallback)(function () {
+    var _api$core, _api$core2;
+    api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 || _api$core.actions.execute(function (_ref2) {
+      var tr = _ref2.tr;
+      return api === null || api === void 0 ? void 0 : api.syncedBlock.commands.insertSyncedBlock()({
+        tr: tr
+      });
+    });
+    api === null || api === void 0 || (_api$core2 = api.core) === null || _api$core2 === void 0 || _api$core2.actions.focus();
+  }, [api]);
+  var message = intl.formatMessage(_messages.syncBlockMessages.createSyncBlockLabel);
+  return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownItem, {
+    onClick: onClick,
+    isDisabled: isDisabled,
+    elemBefore: /*#__PURE__*/_react.default.createElement(_blockSynced.default, {
+      label: ""
+    })
+  }, message);
+};

package/dist/cjs/ui/toolbar-components.js

@@ -0,0 +1,58 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getToolbarComponents = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _toolbar = require("@atlaskit/editor-common/toolbar");
+var _CreateSyncedBlockButton = require("./CreateSyncedBlockButton");
+var _CreateSyncedBlockItem = require("./CreateSyncedBlockItem");
+var SYNCED_BLOCK_OVERFLOW_MENU_SECTION = {
+  type: _toolbar.SYNCED_BLOCK_SECTION.type,
+  key: _toolbar.SYNCED_BLOCK_SECTION.key,
+  parents: [{
+    type: _toolbar.OVERFLOW_MENU.type,
+    key: _toolbar.OVERFLOW_MENU.key,
+    rank: _toolbar.OVERFLOW_MENU_RANK[_toolbar.SYNCED_BLOCK_SECTION.key]
+  }]
+};
+var SYNCED_BLOCK_PRIMARY_TOOLBAR_GROUP = {
+  type: _toolbar.SYNCED_BLOCK_GROUP.type,
+  key: _toolbar.SYNCED_BLOCK_GROUP.key,
+  parents: [{
+    type: _toolbar.INSERT_BLOCK_SECTION.type,
+    key: _toolbar.INSERT_BLOCK_SECTION.key,
+    rank: _toolbar.INSERT_BLOCK_SECTION_RANK[_toolbar.SYNCED_BLOCK_GROUP.key]
+  }]
+};
+var getToolbarComponents = exports.getToolbarComponents = function getToolbarComponents(api) {
+  return [SYNCED_BLOCK_PRIMARY_TOOLBAR_GROUP, SYNCED_BLOCK_OVERFLOW_MENU_SECTION, {
+    type: _toolbar.SYNCED_BLOCK_BUTTON.type,
+    key: _toolbar.SYNCED_BLOCK_BUTTON.key,
+    component: function component() {
+      return /*#__PURE__*/_react.default.createElement(_CreateSyncedBlockButton.CreateSyncedBlockButton, {
+        api: api
+      });
+    },
+    parents: [{
+      type: _toolbar.SYNCED_BLOCK_GROUP.type,
+      key: _toolbar.SYNCED_BLOCK_GROUP.key,
+      rank: _toolbar.SYNCED_BLOCK_SECTION_RANK[_toolbar.SYNCED_BLOCK_BUTTON.key]
+    }]
+  }, {
+    type: _toolbar.SYNCED_BLOCK_ITEM.type,
+    key: _toolbar.SYNCED_BLOCK_ITEM.key,
+    parents: [{
+      type: _toolbar.SYNCED_BLOCK_SECTION.type,
+      key: _toolbar.SYNCED_BLOCK_SECTION.key,
+      rank: _toolbar.SYNCED_BLOCK_SECTION_RANK[_toolbar.SYNCED_BLOCK_ITEM.key]
+    }],
+    component: function component() {
+      return /*#__PURE__*/_react.default.createElement(_CreateSyncedBlockItem.CreateSyncedBlockItem, {
+        api: api
+      });
+    }
+  }];
+};

package/dist/es2019/syncedBlockPlugin.js

@@ -10,13 +10,15 @@ import { getBlockMenuComponents } from './ui/block-menu-components';
 import { DeleteConfirmationModal } from './ui/DeleteConfirmationModal';
 import { getToolbarConfig } from './ui/floating-toolbar';
 import { SyncBlockRefresher } from './ui/SyncBlockRefresher';
+import { getToolbarComponents } from './ui/toolbar-components';
 export const syncedBlockPlugin = ({
   config,
   api
 }) => {
-  var _api$blockMenu;
+  var _api$blockMenu, _api$toolbar;
   const syncBlockStore = new SyncBlockStoreManager(config === null || config === void 0 ? void 0 : config.syncBlockDataProvider);
   api === null || api === void 0 ? void 0 : (_api$blockMenu = api.blockMenu) === null || _api$blockMenu === void 0 ? void 0 : _api$blockMenu.actions.registerBlockMenuComponents(getBlockMenuComponents(api));
+  api === null || api === void 0 ? void 0 : (_api$toolbar = api.toolbar) === null || _api$toolbar === void 0 ? void 0 : _api$toolbar.actions.registerComponents(getToolbarComponents(api));
   return {
     name: 'syncedBlock',
     nodes() {

package/dist/es2019/ui/CreateSyncedBlockButton.js

@@ -0,0 +1,42 @@
+import React, { useCallback } from 'react';
+import { useIntl } from 'react-intl-next';
+import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
+import { syncBlockMessages } from '@atlaskit/editor-common/messages';
+import { ToolbarButton, ToolbarTooltip } from '@atlaskit/editor-toolbar';
+import BlockSyncedIcon from '@atlaskit/icon-lab/core/block-synced';
+import { canBeConvertedToSyncBlock } from '../pm-plugins/utils/utils';
+export const CreateSyncedBlockButton = ({
+  api
+}) => {
+  const intl = useIntl();
+  const selection = useSharedPluginStateWithSelector(api, ['selection'], states => {
+    var _states$selectionStat;
+    return (_states$selectionStat = states.selectionState) === null || _states$selectionStat === void 0 ? void 0 : _states$selectionStat.selection;
+  });
+
+  // for toolbar button, we allow both creating a new synced block
+  // and converting existing block to synced block
+  const canBeConverted = Boolean(selection && canBeConvertedToSyncBlock(selection));
+  const canInsertEmptyBlock = Boolean(selection === null || selection === void 0 ? void 0 : selection.empty);
+  const isDisabled = Boolean(!canBeConverted && !canInsertEmptyBlock);
+  const onClick = useCallback(() => {
+    var _api$core, _api$core2;
+    api === null || api === void 0 ? void 0 : (_api$core = api.core) === null || _api$core === void 0 ? void 0 : _api$core.actions.execute(({
+      tr
+    }) => api === null || api === void 0 ? void 0 : api.syncedBlock.commands.insertSyncedBlock()({
+      tr
+    }));
+    api === null || api === void 0 ? void 0 : (_api$core2 = api.core) === null || _api$core2 === void 0 ? void 0 : _api$core2.actions.focus();
+  }, [api]);
+  const message = intl.formatMessage(syncBlockMessages.createSyncBlockLabel);
+  return /*#__PURE__*/React.createElement(ToolbarTooltip, {
+    content: message
+  }, /*#__PURE__*/React.createElement(ToolbarButton, {
+    label: message,
+    iconBefore: /*#__PURE__*/React.createElement(BlockSyncedIcon, {
+      label: ""
+    }),
+    isDisabled: isDisabled,
+    onClick: onClick
+  }));
+};

package/dist/es2019/ui/CreateSyncedBlockItem.js

@@ -0,0 +1,34 @@
+import React, { useCallback } from 'react';
+import { useIntl } from 'react-intl-next';
+import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
+import { syncBlockMessages } from '@atlaskit/editor-common/messages';
+import { ToolbarDropdownItem } from '@atlaskit/editor-toolbar';
+import BlockSyncedIcon from '@atlaskit/icon-lab/core/block-synced';
+import { canBeConvertedToSyncBlock } from '../pm-plugins/utils/utils';
+export const CreateSyncedBlockItem = ({
+  api
+}) => {
+  const intl = useIntl();
+  const selection = useSharedPluginStateWithSelector(api, ['selection'], states => {
+    var _states$selectionStat;
+    return (_states$selectionStat = states.selectionState) === null || _states$selectionStat === void 0 ? void 0 : _states$selectionStat.selection;
+  });
+  const isDisabled = Boolean(!selection || !canBeConvertedToSyncBlock(selection));
+  const onClick = useCallback(() => {
+    var _api$core, _api$core2;
+    api === null || api === void 0 ? void 0 : (_api$core = api.core) === null || _api$core === void 0 ? void 0 : _api$core.actions.execute(({
+      tr
+    }) => api === null || api === void 0 ? void 0 : api.syncedBlock.commands.insertSyncedBlock()({
+      tr
+    }));
+    api === null || api === void 0 ? void 0 : (_api$core2 = api.core) === null || _api$core2 === void 0 ? void 0 : _api$core2.actions.focus();
+  }, [api]);
+  const message = intl.formatMessage(syncBlockMessages.createSyncBlockLabel);
+  return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
+    onClick: onClick,
+    isDisabled: isDisabled,
+    elemBefore: /*#__PURE__*/React.createElement(BlockSyncedIcon, {
+      label: ""
+    })
+  }, message);
+};

package/dist/es2019/ui/toolbar-components.js

@@ -0,0 +1,49 @@
+import React from 'react';
+import { INSERT_BLOCK_SECTION, INSERT_BLOCK_SECTION_RANK, OVERFLOW_MENU, OVERFLOW_MENU_RANK, SYNCED_BLOCK_BUTTON, SYNCED_BLOCK_GROUP, SYNCED_BLOCK_ITEM, SYNCED_BLOCK_SECTION, SYNCED_BLOCK_SECTION_RANK } from '@atlaskit/editor-common/toolbar';
+import { CreateSyncedBlockButton } from './CreateSyncedBlockButton';
+import { CreateSyncedBlockItem } from './CreateSyncedBlockItem';
+const SYNCED_BLOCK_OVERFLOW_MENU_SECTION = {
+  type: SYNCED_BLOCK_SECTION.type,
+  key: SYNCED_BLOCK_SECTION.key,
+  parents: [{
+    type: OVERFLOW_MENU.type,
+    key: OVERFLOW_MENU.key,
+    rank: OVERFLOW_MENU_RANK[SYNCED_BLOCK_SECTION.key]
+  }]
+};
+const SYNCED_BLOCK_PRIMARY_TOOLBAR_GROUP = {
+  type: SYNCED_BLOCK_GROUP.type,
+  key: SYNCED_BLOCK_GROUP.key,
+  parents: [{
+    type: INSERT_BLOCK_SECTION.type,
+    key: INSERT_BLOCK_SECTION.key,
+    rank: INSERT_BLOCK_SECTION_RANK[SYNCED_BLOCK_GROUP.key]
+  }]
+};
+export const getToolbarComponents = api => {
+  return [SYNCED_BLOCK_PRIMARY_TOOLBAR_GROUP, SYNCED_BLOCK_OVERFLOW_MENU_SECTION, {
+    type: SYNCED_BLOCK_BUTTON.type,
+    key: SYNCED_BLOCK_BUTTON.key,
+    component: () => /*#__PURE__*/React.createElement(CreateSyncedBlockButton, {
+      api: api
+    }),
+    parents: [{
+      type: SYNCED_BLOCK_GROUP.type,
+      key: SYNCED_BLOCK_GROUP.key,
+      rank: SYNCED_BLOCK_SECTION_RANK[SYNCED_BLOCK_BUTTON.key]
+    }]
+  }, {
+    type: SYNCED_BLOCK_ITEM.type,
+    key: SYNCED_BLOCK_ITEM.key,
+    parents: [{
+      type: SYNCED_BLOCK_SECTION.type,
+      key: SYNCED_BLOCK_SECTION.key,
+      rank: SYNCED_BLOCK_SECTION_RANK[SYNCED_BLOCK_ITEM.key]
+    }],
+    component: () => {
+      return /*#__PURE__*/React.createElement(CreateSyncedBlockItem, {
+        api: api
+      });
+    }
+  }];
+};

package/dist/esm/syncedBlockPlugin.js

@@ -10,12 +10,14 @@ import { getBlockMenuComponents } from './ui/block-menu-components';
 import { DeleteConfirmationModal } from './ui/DeleteConfirmationModal';
 import { getToolbarConfig } from './ui/floating-toolbar';
 import { SyncBlockRefresher } from './ui/SyncBlockRefresher';
+import { getToolbarComponents } from './ui/toolbar-components';
 export var syncedBlockPlugin = function syncedBlockPlugin(_ref) {
-  var _api$blockMenu;
+  var _api$blockMenu, _api$toolbar;
   var config = _ref.config,
     api = _ref.api;
   var syncBlockStore = new SyncBlockStoreManager(config === null || config === void 0 ? void 0 : config.syncBlockDataProvider);
   api === null || api === void 0 || (_api$blockMenu = api.blockMenu) === null || _api$blockMenu === void 0 || _api$blockMenu.actions.registerBlockMenuComponents(getBlockMenuComponents(api));
+  api === null || api === void 0 || (_api$toolbar = api.toolbar) === null || _api$toolbar === void 0 || _api$toolbar.actions.registerComponents(getToolbarComponents(api));
   return {
     name: 'syncedBlock',
     nodes: function nodes() {

package/dist/esm/ui/CreateSyncedBlockButton.js

@@ -0,0 +1,42 @@
+import React, { useCallback } from 'react';
+import { useIntl } from 'react-intl-next';
+import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
+import { syncBlockMessages } from '@atlaskit/editor-common/messages';
+import { ToolbarButton, ToolbarTooltip } from '@atlaskit/editor-toolbar';
+import BlockSyncedIcon from '@atlaskit/icon-lab/core/block-synced';
+import { canBeConvertedToSyncBlock } from '../pm-plugins/utils/utils';
+export var CreateSyncedBlockButton = function CreateSyncedBlockButton(_ref) {
+  var api = _ref.api;
+  var intl = useIntl();
+  var selection = useSharedPluginStateWithSelector(api, ['selection'], function (states) {
+    var _states$selectionStat;
+    return (_states$selectionStat = states.selectionState) === null || _states$selectionStat === void 0 ? void 0 : _states$selectionStat.selection;
+  });
+
+  // for toolbar button, we allow both creating a new synced block
+  // and converting existing block to synced block
+  var canBeConverted = Boolean(selection && canBeConvertedToSyncBlock(selection));
+  var canInsertEmptyBlock = Boolean(selection === null || selection === void 0 ? void 0 : selection.empty);
+  var isDisabled = Boolean(!canBeConverted && !canInsertEmptyBlock);
+  var onClick = useCallback(function () {
+    var _api$core, _api$core2;
+    api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 || _api$core.actions.execute(function (_ref2) {
+      var tr = _ref2.tr;
+      return api === null || api === void 0 ? void 0 : api.syncedBlock.commands.insertSyncedBlock()({
+        tr: tr
+      });
+    });
+    api === null || api === void 0 || (_api$core2 = api.core) === null || _api$core2 === void 0 || _api$core2.actions.focus();
+  }, [api]);
+  var message = intl.formatMessage(syncBlockMessages.createSyncBlockLabel);
+  return /*#__PURE__*/React.createElement(ToolbarTooltip, {
+    content: message
+  }, /*#__PURE__*/React.createElement(ToolbarButton, {
+    label: message,
+    iconBefore: /*#__PURE__*/React.createElement(BlockSyncedIcon, {
+      label: ""
+    }),
+    isDisabled: isDisabled,
+    onClick: onClick
+  }));
+};

package/dist/esm/ui/CreateSyncedBlockItem.js

@@ -0,0 +1,34 @@
+import React, { useCallback } from 'react';
+import { useIntl } from 'react-intl-next';
+import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
+import { syncBlockMessages } from '@atlaskit/editor-common/messages';
+import { ToolbarDropdownItem } from '@atlaskit/editor-toolbar';
+import BlockSyncedIcon from '@atlaskit/icon-lab/core/block-synced';
+import { canBeConvertedToSyncBlock } from '../pm-plugins/utils/utils';
+export var CreateSyncedBlockItem = function CreateSyncedBlockItem(_ref) {
+  var api = _ref.api;
+  var intl = useIntl();
+  var selection = useSharedPluginStateWithSelector(api, ['selection'], function (states) {
+    var _states$selectionStat;
+    return (_states$selectionStat = states.selectionState) === null || _states$selectionStat === void 0 ? void 0 : _states$selectionStat.selection;
+  });
+  var isDisabled = Boolean(!selection || !canBeConvertedToSyncBlock(selection));
+  var onClick = useCallback(function () {
+    var _api$core, _api$core2;
+    api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 || _api$core.actions.execute(function (_ref2) {
+      var tr = _ref2.tr;
+      return api === null || api === void 0 ? void 0 : api.syncedBlock.commands.insertSyncedBlock()({
+        tr: tr
+      });
+    });
+    api === null || api === void 0 || (_api$core2 = api.core) === null || _api$core2 === void 0 || _api$core2.actions.focus();
+  }, [api]);
+  var message = intl.formatMessage(syncBlockMessages.createSyncBlockLabel);
+  return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
+    onClick: onClick,
+    isDisabled: isDisabled,
+    elemBefore: /*#__PURE__*/React.createElement(BlockSyncedIcon, {
+      label: ""
+    })
+  }, message);
+};

package/dist/esm/ui/toolbar-components.js

@@ -0,0 +1,51 @@
+import React from 'react';
+import { INSERT_BLOCK_SECTION, INSERT_BLOCK_SECTION_RANK, OVERFLOW_MENU, OVERFLOW_MENU_RANK, SYNCED_BLOCK_BUTTON, SYNCED_BLOCK_GROUP, SYNCED_BLOCK_ITEM, SYNCED_BLOCK_SECTION, SYNCED_BLOCK_SECTION_RANK } from '@atlaskit/editor-common/toolbar';
+import { CreateSyncedBlockButton } from './CreateSyncedBlockButton';
+import { CreateSyncedBlockItem } from './CreateSyncedBlockItem';
+var SYNCED_BLOCK_OVERFLOW_MENU_SECTION = {
+  type: SYNCED_BLOCK_SECTION.type,
+  key: SYNCED_BLOCK_SECTION.key,
+  parents: [{
+    type: OVERFLOW_MENU.type,
+    key: OVERFLOW_MENU.key,
+    rank: OVERFLOW_MENU_RANK[SYNCED_BLOCK_SECTION.key]
+  }]
+};
+var SYNCED_BLOCK_PRIMARY_TOOLBAR_GROUP = {
+  type: SYNCED_BLOCK_GROUP.type,
+  key: SYNCED_BLOCK_GROUP.key,
+  parents: [{
+    type: INSERT_BLOCK_SECTION.type,
+    key: INSERT_BLOCK_SECTION.key,
+    rank: INSERT_BLOCK_SECTION_RANK[SYNCED_BLOCK_GROUP.key]
+  }]
+};
+export var getToolbarComponents = function getToolbarComponents(api) {
+  return [SYNCED_BLOCK_PRIMARY_TOOLBAR_GROUP, SYNCED_BLOCK_OVERFLOW_MENU_SECTION, {
+    type: SYNCED_BLOCK_BUTTON.type,
+    key: SYNCED_BLOCK_BUTTON.key,
+    component: function component() {
+      return /*#__PURE__*/React.createElement(CreateSyncedBlockButton, {
+        api: api
+      });
+    },
+    parents: [{
+      type: SYNCED_BLOCK_GROUP.type,
+      key: SYNCED_BLOCK_GROUP.key,
+      rank: SYNCED_BLOCK_SECTION_RANK[SYNCED_BLOCK_BUTTON.key]
+    }]
+  }, {
+    type: SYNCED_BLOCK_ITEM.type,
+    key: SYNCED_BLOCK_ITEM.key,
+    parents: [{
+      type: SYNCED_BLOCK_SECTION.type,
+      key: SYNCED_BLOCK_SECTION.key,
+      rank: SYNCED_BLOCK_SECTION_RANK[SYNCED_BLOCK_ITEM.key]
+    }],
+    component: function component() {
+      return /*#__PURE__*/React.createElement(CreateSyncedBlockItem, {
+        api: api
+      });
+    }
+  }];
+};

package/dist/types/syncedBlockPluginType.d.ts

@@ -7,7 +7,8 @@ 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 { ToolbarPlugin } from '@atlaskit/editor-plugin-toolbar';
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { SyncBlockDataProvider, UseFetchSyncBlockDataResult } from '@atlaskit/editor-synced-block-provider';
 export type SyncedBlockEditorProps = {
     defaultDocument: JSONDocNode;
@@ -57,6 +58,7 @@ export type SyncedBlockPlugin = NextEditorPlugin<'syncedBlock', {
         FloatingToolbarPlugin,
         DecorationsPlugin,
         OptionalPlugin<BlockControlsPlugin>,
+        OptionalPlugin<ToolbarPlugin>,
         OptionalPlugin<BlockMenuPlugin>,
         OptionalPlugin<AnalyticsPlugin>
     ];

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

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

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

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

package/dist/types/ui/toolbar-components.d.ts

@@ -0,0 +1,4 @@
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import type { RegisterComponent } from '@atlaskit/editor-toolbar-model';
+import type { SyncedBlockPlugin } from '../syncedBlockPluginType';
+export declare const getToolbarComponents: (api?: ExtractInjectionAPI<SyncedBlockPlugin>) => RegisterComponent[];

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

@@ -7,7 +7,8 @@ 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 { ToolbarPlugin } from '@atlaskit/editor-plugin-toolbar';
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { SyncBlockDataProvider, UseFetchSyncBlockDataResult } from '@atlaskit/editor-synced-block-provider';
 export type SyncedBlockEditorProps = {
     defaultDocument: JSONDocNode;
@@ -57,6 +58,7 @@ export type SyncedBlockPlugin = NextEditorPlugin<'syncedBlock', {
         FloatingToolbarPlugin,
         DecorationsPlugin,
         OptionalPlugin<BlockControlsPlugin>,
+        OptionalPlugin<ToolbarPlugin>,
         OptionalPlugin<BlockMenuPlugin>,
         OptionalPlugin<AnalyticsPlugin>
     ];

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

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

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

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

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

@@ -0,0 +1,4 @@
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import type { RegisterComponent } from '@atlaskit/editor-toolbar-model';
+import type { SyncedBlockPlugin } from '../syncedBlockPluginType';
+export declare const getToolbarComponents: (api?: ExtractInjectionAPI<SyncedBlockPlugin>) => RegisterComponent[];

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-synced-block",
-	"version": "4.1.3",
+	"version": "4.2.0",
 	"description": "SyncedBlock plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -29,7 +29,7 @@
 	"atlaskit:src": "src/index.ts",
 	"dependencies": {
 		"@atlaskit/adf-schema": "^51.3.2",
-		"@atlaskit/button": "23.5.4",
+		"@atlaskit/button": "23.6.0",
 		"@atlaskit/editor-json-transformer": "^8.31.0",
 		"@atlaskit/editor-plugin-analytics": "^6.2.0",
 		"@atlaskit/editor-plugin-block-menu": "^5.0.0",
@@ -41,18 +41,19 @@
 		"@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",
+		"@atlaskit/icon": "28.5.4",
+		"@atlaskit/icon-lab": "^5.11.0",
 		"@atlaskit/logo": "^19.9.0",
-		"@atlaskit/lozenge": "^13.0.0",
+		"@atlaskit/lozenge": "^13.1.0",
 		"@atlaskit/modal-dialog": "^14.6.0",
 		"@atlaskit/primitives": "^16.1.0",
-		"@atlaskit/tooltip": "^20.7.0",
+		"@atlaskit/tooltip": "^20.8.0",
 		"@atlaskit/visually-hidden": "^3.0.0",
 		"@babel/runtime": "^7.0.0",
 		"react-intl-next": "npm:react-intl@^5.18.1"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^110.22.0",
+		"@atlaskit/editor-common": "^110.25.0",
 		"react": "^18.2.0"
 	},
 	"devDependencies": {