@atlaskit/editor-plugin-synced-block 3.0.0 → 3.0.1

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/editor-plugin-synced-block
 
+## 3.0.1
+
+### Patch Changes
+
+- [`6e2b6f72d4bc2`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/6e2b6f72d4bc2) -
+  Added floating toolbar for sync block
+- Updated dependencies
+
 ## 3.0.0
 
 ### Patch Changes

package/afm-cc/tsconfig.json

@@ -25,9 +25,18 @@
 		{
 			"path": "../../../design-system/button/afm-cc/tsconfig.json"
 		},
+		{
+			"path": "../../editor-plugin-decorations/afm-cc/tsconfig.json"
+		},
+		{
+			"path": "../../editor-plugin-floating-toolbar/afm-cc/tsconfig.json"
+		},
 		{
 			"path": "../../editor-plugin-selection/afm-cc/tsconfig.json"
 		},
+		{
+			"path": "../../editor-shared-styles/afm-cc/tsconfig.json"
+		},
 		{
 			"path": "../../editor-synced-block-provider/afm-cc/tsconfig.json"
 		},

package/afm-dev-agents/tsconfig.json

@@ -25,9 +25,18 @@
 		{
 			"path": "../../../design-system/button/afm-dev-agents/tsconfig.json"
 		},
+		{
+			"path": "../../editor-plugin-decorations/afm-dev-agents/tsconfig.json"
+		},
+		{
+			"path": "../../editor-plugin-floating-toolbar/afm-dev-agents/tsconfig.json"
+		},
 		{
 			"path": "../../editor-plugin-selection/afm-dev-agents/tsconfig.json"
 		},
+		{
+			"path": "../../editor-shared-styles/afm-dev-agents/tsconfig.json"
+		},
 		{
 			"path": "../../editor-synced-block-provider/afm-dev-agents/tsconfig.json"
 		},

package/afm-jira/tsconfig.json

@@ -25,9 +25,18 @@
 		{
 			"path": "../../../design-system/button/afm-jira/tsconfig.json"
 		},
+		{
+			"path": "../../editor-plugin-decorations/afm-jira/tsconfig.json"
+		},
+		{
+			"path": "../../editor-plugin-floating-toolbar/afm-jira/tsconfig.json"
+		},
 		{
 			"path": "../../editor-plugin-selection/afm-jira/tsconfig.json"
 		},
+		{
+			"path": "../../editor-shared-styles/afm-jira/tsconfig.json"
+		},
 		{
 			"path": "../../editor-synced-block-provider/afm-jira/tsconfig.json"
 		},

package/afm-passionfruit/tsconfig.json

@@ -25,9 +25,18 @@
 		{
 			"path": "../../../design-system/button/afm-passionfruit/tsconfig.json"
 		},
+		{
+			"path": "../../editor-plugin-decorations/afm-passionfruit/tsconfig.json"
+		},
+		{
+			"path": "../../editor-plugin-floating-toolbar/afm-passionfruit/tsconfig.json"
+		},
 		{
 			"path": "../../editor-plugin-selection/afm-passionfruit/tsconfig.json"
 		},
+		{
+			"path": "../../editor-shared-styles/afm-passionfruit/tsconfig.json"
+		},
 		{
 			"path": "../../editor-synced-block-provider/afm-passionfruit/tsconfig.json"
 		},

package/afm-post-office/tsconfig.json

@@ -25,9 +25,18 @@
 		{
 			"path": "../../../design-system/button/afm-post-office/tsconfig.json"
 		},
+		{
+			"path": "../../editor-plugin-decorations/afm-post-office/tsconfig.json"
+		},
+		{
+			"path": "../../editor-plugin-floating-toolbar/afm-post-office/tsconfig.json"
+		},
 		{
 			"path": "../../editor-plugin-selection/afm-post-office/tsconfig.json"
 		},
+		{
+			"path": "../../editor-shared-styles/afm-post-office/tsconfig.json"
+		},
 		{
 			"path": "../../editor-synced-block-provider/afm-post-office/tsconfig.json"
 		},

package/afm-rovo-extension/tsconfig.json

@@ -25,9 +25,18 @@
 		{
 			"path": "../../../design-system/button/afm-rovo-extension/tsconfig.json"
 		},
+		{
+			"path": "../../editor-plugin-decorations/afm-rovo-extension/tsconfig.json"
+		},
+		{
+			"path": "../../editor-plugin-floating-toolbar/afm-rovo-extension/tsconfig.json"
+		},
 		{
 			"path": "../../editor-plugin-selection/afm-rovo-extension/tsconfig.json"
 		},
+		{
+			"path": "../../editor-shared-styles/afm-rovo-extension/tsconfig.json"
+		},
 		{
 			"path": "../../editor-synced-block-provider/afm-rovo-extension/tsconfig.json"
 		},

package/afm-townsquare/tsconfig.json

@@ -25,9 +25,18 @@
 		{
 			"path": "../../../design-system/button/afm-townsquare/tsconfig.json"
 		},
+		{
+			"path": "../../editor-plugin-decorations/afm-townsquare/tsconfig.json"
+		},
+		{
+			"path": "../../editor-plugin-floating-toolbar/afm-townsquare/tsconfig.json"
+		},
 		{
 			"path": "../../editor-plugin-selection/afm-townsquare/tsconfig.json"
 		},
+		{
+			"path": "../../editor-shared-styles/afm-townsquare/tsconfig.json"
+		},
 		{
 			"path": "../../editor-synced-block-provider/afm-townsquare/tsconfig.json"
 		},

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

@@ -1,39 +1,70 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.createSyncedBlock = exports.copySyncedBlockReferenceToClipboard = void 0;
-var _uuid = _interopRequireDefault(require("uuid"));
-var _copyButton = require("@atlaskit/editor-common/copy-button");
-var _state = require("@atlaskit/editor-prosemirror/state");
+exports.removeSyncedBlock = exports.editSyncedBlockSource = exports.createSyncedBlock = exports.copySyncedBlockReferenceToClipboard = void 0;
+var _analytics = require("@atlaskit/editor-common/analytics");
 var _utils = require("@atlaskit/editor-prosemirror/utils");
+var _editorSyncedBlockProvider = require("@atlaskit/editor-synced-block-provider");
+var _utils2 = require("./utils/utils");
 var createSyncedBlock = exports.createSyncedBlock = function createSyncedBlock(state) {
-  var id = (0, _uuid.default)();
-  var tr = state.tr;
-  // const { breakout } = state.schema.marks;
-  var node = state.schema.nodes.syncBlock.createChecked({
-    resourceId: id,
-    localId: id
-  }, null
-  // [breakout.create({ mode: 'wide' })],
-  );
+  var tr = state.tr,
+    syncBlock = state.schema.nodes.syncBlock;
+  var node = (0, _editorSyncedBlockProvider.createSyncBlockPMNode)(syncBlock);
   (0, _utils.safeInsert)(node)(tr);
   return tr;
 };
-var copySyncedBlockReferenceToClipboard = exports.copySyncedBlockReferenceToClipboard = function copySyncedBlockReferenceToClipboard(state, _dispatch, _view) {
-  var schema = state.schema,
-    selection = state.selection;
-  if (selection instanceof _state.NodeSelection) {
-    var nodeType = selection.node.type;
-    var domNode = (0, _copyButton.toDOM)(selection.node, schema);
-    // clear local-id
-    if (domNode instanceof HTMLElement) {
-      domNode.setAttribute('data-local-id', '');
+var copySyncedBlockReferenceToClipboard = exports.copySyncedBlockReferenceToClipboard = function copySyncedBlockReferenceToClipboard(api) {
+  return function (state, dispatch, _view) {
+    if (!(api !== null && api !== void 0 && api.floatingToolbar) || !dispatch) {
+      return false;
     }
-    (0, _copyButton.copyDomNode)(domNode, nodeType, selection);
+    var syncBlock = state.schema.nodes.syncBlock,
+      tr = state.tr;
+    var newTr = api.floatingToolbar.commands.copyNode(syncBlock, _analytics.INPUT_METHOD.FLOATING_TB)({
+      tr: tr
+    });
+    if (!newTr) {
+      return false;
+    }
+    dispatch(newTr);
+    return true;
+  };
+};
+var editSyncedBlockSource = exports.editSyncedBlockSource = function editSyncedBlockSource(_api) {
+  return function (state, _dispatch, _view) {
+    var syncBlock = (0, _utils2.findSyncBlock)(state);
+    if (!syncBlock) {
+      return false;
+    }
+    var url = (0, _editorSyncedBlockProvider.generateSyncBlockSourceUrl)(syncBlock.node);
+    if (!url) {
+      return false;
+    }
+    window.open(url, '_blank');
+    return true;
+  };
+};
+var removeSyncedBlock = exports.removeSyncedBlock = function removeSyncedBlock(api) {
+  return function (state, dispatch, _view) {
+    var _state$selection = state.selection,
+      from = _state$selection.$from.pos,
+      to = _state$selection.$to.pos,
+      tr = state.tr;
+    var syncBlock = (0, _utils2.findSyncBlock)(state);
+    if (!syncBlock) {
+      return false;
+    }
+    if (!dispatch) {
+      return false;
+    }
+    var newTr = tr.deleteRange(from, to);
+    if (!newTr) {
+      return false;
+    }
+    dispatch(newTr);
+    api === null || api === void 0 || api.core.actions.focus();
     return true;
-  }
-  return false;
+  };
 };

package/dist/cjs/syncedBlockPlugin.js

@@ -53,7 +53,7 @@ var syncedBlockPlugin = exports.syncedBlockPlugin = function syncedBlockPlugin(_
         }];
       },
       floatingToolbar: function floatingToolbar(state, intl, providerFactory) {
-        return (0, _floatingToolbar.getToolbarConfig)(state, intl, config, providerFactory);
+        return (0, _floatingToolbar.getToolbarConfig)(state, intl, config, providerFactory, api);
       }
     },
     contentComponent: function contentComponent() {

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

@@ -1,55 +1,88 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.getToolbarConfig = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireDefault(require("react"));
+var _messages = _interopRequireWildcard(require("@atlaskit/editor-common/messages"));
 var _utils = require("@atlaskit/editor-prosemirror/utils");
+var _consts = require("@atlaskit/editor-shared-styles/consts");
 var _copy = _interopRequireDefault(require("@atlaskit/icon/core/copy"));
+var _delete = _interopRequireDefault(require("@atlaskit/icon/core/delete"));
 var _linkExternal = _interopRequireDefault(require("@atlaskit/icon/core/link-external"));
 var _actions = require("../pm-plugins/actions");
 var _utils2 = require("../pm-plugins/utils/utils");
-var getToolbarConfig = exports.getToolbarConfig = function getToolbarConfig(state, _intl) {
+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); }
+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 getToolbarConfig = exports.getToolbarConfig = function getToolbarConfig(state, intl) {
+  var _api$decorations;
   var _options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
   var _providerFactory = arguments.length > 3 ? arguments[3] : undefined;
+  var api = arguments.length > 4 ? arguments[4] : undefined;
   var syncBlockObject = (0, _utils2.findSyncBlock)(state);
   if (!syncBlockObject) {
     return;
   }
+  var formatMessage = intl.formatMessage;
   var nodeType = state.schema.nodes.syncBlock;
+  var hoverDecoration = api === null || api === void 0 || (_api$decorations = api.decorations) === null || _api$decorations === void 0 ? void 0 : _api$decorations.actions.hoverDecoration;
+  var hoverDecorationProps = function hoverDecorationProps(nodeType, className) {
+    return {
+      onMouseEnter: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(nodeType, true, className),
+      onMouseLeave: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(nodeType, false, className),
+      onFocus: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(nodeType, true, className),
+      onBlur: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(nodeType, false, className)
+    };
+  };
   var items = [];
-  var copyButton = {
+  var copyButton = _objectSpread({
     id: 'editor.syncedBlock.copy',
     type: 'button',
     appearance: 'subtle',
     icon: _copy.default,
-    title: 'Copy',
+    title: formatMessage(_messages.syncBlockMessages.copySyncBlockLabel),
     showTitle: true,
-    tooltipContent: 'Copy reference to clipboard',
-    onClick: _actions.copySyncedBlockReferenceToClipboard
-  };
+    tooltipContent: formatMessage(_messages.syncBlockMessages.copySyncBlockTooltip),
+    onClick: (0, _actions.copySyncedBlockReferenceToClipboard)(api)
+  }, hoverDecorationProps(nodeType, _consts.akEditorSelectedNodeClassName));
   items.push(copyButton);
   if (syncBlockObject.node.attrs.resourceId !== syncBlockObject.node.attrs.localId) {
-    var editSourceButton = {
+    var editSourceButton = _objectSpread({
       id: 'editor.syncedBlock.editSource',
       type: 'button',
       appearance: 'subtle',
       icon: _linkExternal.default,
-      title: 'Edit source',
+      title: formatMessage(_messages.syncBlockMessages.editSourceLabel),
       showTitle: true,
-      tooltipContent: 'Navigate to source page of the sync block',
-      disabled: true,
-      onClick: function onClick(_state, _dispatch, view) {
-        if (!view) {
-          return false;
-        }
-        // to be implemented in a follow up PR
-        return true;
-      }
-    };
+      tooltipContent: formatMessage(_messages.syncBlockMessages.editSourceTooltip),
+      onClick: (0, _actions.editSyncedBlockSource)(api)
+    }, hoverDecorationProps(nodeType, _consts.akEditorSelectedNodeClassName));
     items.push(editSourceButton);
   }
+
+  // testId is required to show focus on trigger button on ESC key press
+  // see hideOnEsc in platform/packages/editor/editor-plugin-floating-toolbar/src/ui/Dropdown.tsx
+  var testId = 'synced-block-overflow-dropdown-trigger';
+  var overflowMenuConfig = [{
+    type: 'separator',
+    fullHeight: true
+  }, {
+    type: 'overflow-dropdown',
+    testId: testId,
+    options: [_objectSpread({
+      title: formatMessage(_messages.default.delete),
+      onClick: (0, _actions.removeSyncedBlock)(api),
+      icon: /*#__PURE__*/_react.default.createElement(_delete.default, {
+        label: ""
+      })
+    }, hoverDecorationProps(nodeType))]
+  }];
+  items.push.apply(items, overflowMenuConfig);
   var getDomRef = function getDomRef(editorView) {
     var domAtPos = editorView.domAtPos.bind(editorView);
     var element = (0, _utils.findDomRefAtPos)(syncBlockObject.pos, domAtPos);
@@ -61,6 +94,6 @@ var getToolbarConfig = exports.getToolbarConfig = function getToolbarConfig(stat
     nodeType: nodeType,
     items: items,
     scrollable: true,
-    groupLabel: 'Synced blocks'
+    groupLabel: formatMessage(_messages.syncBlockMessages.syncBlockGroup)
   };
 };

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

@@ -1,34 +1,77 @@
-import uuid from 'uuid';
-import { toDOM, copyDomNode } from '@atlaskit/editor-common/copy-button';
-import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
+import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { safeInsert } from '@atlaskit/editor-prosemirror/utils';
+import { createSyncBlockPMNode, generateSyncBlockSourceUrl } from '@atlaskit/editor-synced-block-provider';
+import { findSyncBlock } from './utils/utils';
 export const createSyncedBlock = state => {
-  const id = uuid();
-  const tr = state.tr;
-  // const { breakout } = state.schema.marks;
-  const node = state.schema.nodes.syncBlock.createChecked({
-    resourceId: id,
-    localId: id
-  }, null
-  // [breakout.create({ mode: 'wide' })],
-  );
+  const {
+    tr,
+    schema: {
+      nodes: {
+        syncBlock
+      }
+    }
+  } = state;
+  const node = createSyncBlockPMNode(syncBlock);
   safeInsert(node)(tr);
   return tr;
 };
-export const copySyncedBlockReferenceToClipboard = (state, _dispatch, _view) => {
+export const copySyncedBlockReferenceToClipboard = api => (state, dispatch, _view) => {
+  if (!(api !== null && api !== void 0 && api.floatingToolbar) || !dispatch) {
+    return false;
+  }
   const {
-    schema,
-    selection
+    schema: {
+      nodes: {
+        syncBlock
+      }
+    },
+    tr
   } = state;
-  if (selection instanceof NodeSelection) {
-    const nodeType = selection.node.type;
-    const domNode = toDOM(selection.node, schema);
-    // clear local-id
-    if (domNode instanceof HTMLElement) {
-      domNode.setAttribute('data-local-id', '');
-    }
-    copyDomNode(domNode, nodeType, selection);
-    return true;
+  const newTr = api.floatingToolbar.commands.copyNode(syncBlock, INPUT_METHOD.FLOATING_TB)({
+    tr
+  });
+  if (!newTr) {
+    return false;
+  }
+  dispatch(newTr);
+  return true;
+};
+export const editSyncedBlockSource = _api => (state, _dispatch, _view) => {
+  const syncBlock = findSyncBlock(state);
+  if (!syncBlock) {
+    return false;
+  }
+  const url = generateSyncBlockSourceUrl(syncBlock.node);
+  if (!url) {
+    return false;
+  }
+  window.open(url, '_blank');
+  return true;
+};
+export const removeSyncedBlock = api => (state, dispatch, _view) => {
+  const {
+    selection: {
+      $from: {
+        pos: from
+      },
+      $to: {
+        pos: to
+      }
+    },
+    tr
+  } = state;
+  const syncBlock = findSyncBlock(state);
+  if (!syncBlock) {
+    return false;
+  }
+  if (!dispatch) {
+    return false;
+  }
+  const newTr = tr.deleteRange(from, to);
+  if (!newTr) {
+    return false;
   }
-  return false;
+  dispatch(newTr);
+  api === null || api === void 0 ? void 0 : api.core.actions.focus();
+  return true;
 };

package/dist/es2019/syncedBlockPlugin.js

@@ -40,7 +40,7 @@ export const syncedBlockPlugin = ({
           return createSyncedBlock(state);
         }
       }],
-      floatingToolbar: (state, intl, providerFactory) => getToolbarConfig(state, intl, config, providerFactory)
+      floatingToolbar: (state, intl, providerFactory) => getToolbarConfig(state, intl, config, providerFactory, api)
     },
     contentComponent: () => {
       return /*#__PURE__*/React.createElement(ContentComponent, {

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

@@ -1,24 +1,40 @@
+import React from 'react';
+import commonMessages, { syncBlockMessages as messages } from '@atlaskit/editor-common/messages';
 import { findDomRefAtPos } from '@atlaskit/editor-prosemirror/utils';
+import { akEditorSelectedNodeClassName } from '@atlaskit/editor-shared-styles/consts';
 import CopyIcon from '@atlaskit/icon/core/copy';
+import DeleteIcon from '@atlaskit/icon/core/delete';
 import LinkExternalIcon from '@atlaskit/icon/core/link-external';
-import { copySyncedBlockReferenceToClipboard } from '../pm-plugins/actions';
+import { copySyncedBlockReferenceToClipboard, editSyncedBlockSource, removeSyncedBlock } from '../pm-plugins/actions';
 import { findSyncBlock } from '../pm-plugins/utils/utils';
-export const getToolbarConfig = (state, _intl, _options = {}, _providerFactory) => {
+export const getToolbarConfig = (state, intl, _options = {}, _providerFactory, api) => {
+  var _api$decorations;
   const syncBlockObject = findSyncBlock(state);
   if (!syncBlockObject) {
     return;
   }
+  const {
+    formatMessage
+  } = intl;
   const nodeType = state.schema.nodes.syncBlock;
+  const hoverDecoration = api === null || api === void 0 ? void 0 : (_api$decorations = api.decorations) === null || _api$decorations === void 0 ? void 0 : _api$decorations.actions.hoverDecoration;
+  const hoverDecorationProps = (nodeType, className) => ({
+    onMouseEnter: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(nodeType, true, className),
+    onMouseLeave: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(nodeType, false, className),
+    onFocus: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(nodeType, true, className),
+    onBlur: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(nodeType, false, className)
+  });
   const items = [];
   const copyButton = {
     id: 'editor.syncedBlock.copy',
     type: 'button',
     appearance: 'subtle',
     icon: CopyIcon,
-    title: 'Copy',
+    title: formatMessage(messages.copySyncBlockLabel),
     showTitle: true,
-    tooltipContent: 'Copy reference to clipboard',
-    onClick: copySyncedBlockReferenceToClipboard
+    tooltipContent: formatMessage(messages.copySyncBlockTooltip),
+    onClick: copySyncedBlockReferenceToClipboard(api),
+    ...hoverDecorationProps(nodeType, akEditorSelectedNodeClassName)
   };
   items.push(copyButton);
   if (syncBlockObject.node.attrs.resourceId !== syncBlockObject.node.attrs.localId) {
@@ -27,20 +43,34 @@ export const getToolbarConfig = (state, _intl, _options = {}, _providerFactory)
       type: 'button',
       appearance: 'subtle',
       icon: LinkExternalIcon,
-      title: 'Edit source',
+      title: formatMessage(messages.editSourceLabel),
       showTitle: true,
-      tooltipContent: 'Navigate to source page of the sync block',
-      disabled: true,
-      onClick: (_state, _dispatch, view) => {
-        if (!view) {
-          return false;
-        }
-        // to be implemented in a follow up PR
-        return true;
-      }
+      tooltipContent: formatMessage(messages.editSourceTooltip),
+      onClick: editSyncedBlockSource(api),
+      ...hoverDecorationProps(nodeType, akEditorSelectedNodeClassName)
     };
     items.push(editSourceButton);
   }
+
+  // testId is required to show focus on trigger button on ESC key press
+  // see hideOnEsc in platform/packages/editor/editor-plugin-floating-toolbar/src/ui/Dropdown.tsx
+  const testId = 'synced-block-overflow-dropdown-trigger';
+  const overflowMenuConfig = [{
+    type: 'separator',
+    fullHeight: true
+  }, {
+    type: 'overflow-dropdown',
+    testId,
+    options: [{
+      title: formatMessage(commonMessages.delete),
+      onClick: removeSyncedBlock(api),
+      icon: /*#__PURE__*/React.createElement(DeleteIcon, {
+        label: ""
+      }),
+      ...hoverDecorationProps(nodeType)
+    }]
+  }];
+  items.push(...overflowMenuConfig);
   const getDomRef = editorView => {
     const domAtPos = editorView.domAtPos.bind(editorView);
     const element = findDomRefAtPos(syncBlockObject.pos, domAtPos);
@@ -52,6 +82,6 @@ export const getToolbarConfig = (state, _intl, _options = {}, _providerFactory)
     nodeType,
     items,
     scrollable: true,
-    groupLabel: 'Synced blocks'
+    groupLabel: formatMessage(messages.syncBlockGroup)
   };
 };

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

@@ -1,32 +1,64 @@
-import uuid from 'uuid';
-import { toDOM, copyDomNode } from '@atlaskit/editor-common/copy-button';
-import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
+import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { safeInsert } from '@atlaskit/editor-prosemirror/utils';
+import { createSyncBlockPMNode, generateSyncBlockSourceUrl } from '@atlaskit/editor-synced-block-provider';
+import { findSyncBlock } from './utils/utils';
 export var createSyncedBlock = function createSyncedBlock(state) {
-  var id = uuid();
-  var tr = state.tr;
-  // const { breakout } = state.schema.marks;
-  var node = state.schema.nodes.syncBlock.createChecked({
-    resourceId: id,
-    localId: id
-  }, null
-  // [breakout.create({ mode: 'wide' })],
-  );
+  var tr = state.tr,
+    syncBlock = state.schema.nodes.syncBlock;
+  var node = createSyncBlockPMNode(syncBlock);
   safeInsert(node)(tr);
   return tr;
 };
-export var copySyncedBlockReferenceToClipboard = function copySyncedBlockReferenceToClipboard(state, _dispatch, _view) {
-  var schema = state.schema,
-    selection = state.selection;
-  if (selection instanceof NodeSelection) {
-    var nodeType = selection.node.type;
-    var domNode = toDOM(selection.node, schema);
-    // clear local-id
-    if (domNode instanceof HTMLElement) {
-      domNode.setAttribute('data-local-id', '');
+export var copySyncedBlockReferenceToClipboard = function copySyncedBlockReferenceToClipboard(api) {
+  return function (state, dispatch, _view) {
+    if (!(api !== null && api !== void 0 && api.floatingToolbar) || !dispatch) {
+      return false;
     }
-    copyDomNode(domNode, nodeType, selection);
+    var syncBlock = state.schema.nodes.syncBlock,
+      tr = state.tr;
+    var newTr = api.floatingToolbar.commands.copyNode(syncBlock, INPUT_METHOD.FLOATING_TB)({
+      tr: tr
+    });
+    if (!newTr) {
+      return false;
+    }
+    dispatch(newTr);
+    return true;
+  };
+};
+export var editSyncedBlockSource = function editSyncedBlockSource(_api) {
+  return function (state, _dispatch, _view) {
+    var syncBlock = findSyncBlock(state);
+    if (!syncBlock) {
+      return false;
+    }
+    var url = generateSyncBlockSourceUrl(syncBlock.node);
+    if (!url) {
+      return false;
+    }
+    window.open(url, '_blank');
+    return true;
+  };
+};
+export var removeSyncedBlock = function removeSyncedBlock(api) {
+  return function (state, dispatch, _view) {
+    var _state$selection = state.selection,
+      from = _state$selection.$from.pos,
+      to = _state$selection.$to.pos,
+      tr = state.tr;
+    var syncBlock = findSyncBlock(state);
+    if (!syncBlock) {
+      return false;
+    }
+    if (!dispatch) {
+      return false;
+    }
+    var newTr = tr.deleteRange(from, to);
+    if (!newTr) {
+      return false;
+    }
+    dispatch(newTr);
+    api === null || api === void 0 || api.core.actions.focus();
     return true;
-  }
-  return false;
+  };
 };

package/dist/esm/syncedBlockPlugin.js

@@ -46,7 +46,7 @@ export var syncedBlockPlugin = function syncedBlockPlugin(_ref) {
         }];
       },
       floatingToolbar: function floatingToolbar(state, intl, providerFactory) {
-        return getToolbarConfig(state, intl, config, providerFactory);
+        return getToolbarConfig(state, intl, config, providerFactory, api);
       }
     },
     contentComponent: function contentComponent() {

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

@@ -1,48 +1,79 @@
+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 React from 'react';
+import commonMessages, { syncBlockMessages as messages } from '@atlaskit/editor-common/messages';
 import { findDomRefAtPos } from '@atlaskit/editor-prosemirror/utils';
+import { akEditorSelectedNodeClassName } from '@atlaskit/editor-shared-styles/consts';
 import CopyIcon from '@atlaskit/icon/core/copy';
+import DeleteIcon from '@atlaskit/icon/core/delete';
 import LinkExternalIcon from '@atlaskit/icon/core/link-external';
-import { copySyncedBlockReferenceToClipboard } from '../pm-plugins/actions';
+import { copySyncedBlockReferenceToClipboard, editSyncedBlockSource, removeSyncedBlock } from '../pm-plugins/actions';
 import { findSyncBlock } from '../pm-plugins/utils/utils';
-export var getToolbarConfig = function getToolbarConfig(state, _intl) {
+export var getToolbarConfig = function getToolbarConfig(state, intl) {
+  var _api$decorations;
   var _options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
   var _providerFactory = arguments.length > 3 ? arguments[3] : undefined;
+  var api = arguments.length > 4 ? arguments[4] : undefined;
   var syncBlockObject = findSyncBlock(state);
   if (!syncBlockObject) {
     return;
   }
+  var formatMessage = intl.formatMessage;
   var nodeType = state.schema.nodes.syncBlock;
+  var hoverDecoration = api === null || api === void 0 || (_api$decorations = api.decorations) === null || _api$decorations === void 0 ? void 0 : _api$decorations.actions.hoverDecoration;
+  var hoverDecorationProps = function hoverDecorationProps(nodeType, className) {
+    return {
+      onMouseEnter: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(nodeType, true, className),
+      onMouseLeave: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(nodeType, false, className),
+      onFocus: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(nodeType, true, className),
+      onBlur: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(nodeType, false, className)
+    };
+  };
   var items = [];
-  var copyButton = {
+  var copyButton = _objectSpread({
     id: 'editor.syncedBlock.copy',
     type: 'button',
     appearance: 'subtle',
     icon: CopyIcon,
-    title: 'Copy',
+    title: formatMessage(messages.copySyncBlockLabel),
     showTitle: true,
-    tooltipContent: 'Copy reference to clipboard',
-    onClick: copySyncedBlockReferenceToClipboard
-  };
+    tooltipContent: formatMessage(messages.copySyncBlockTooltip),
+    onClick: copySyncedBlockReferenceToClipboard(api)
+  }, hoverDecorationProps(nodeType, akEditorSelectedNodeClassName));
   items.push(copyButton);
   if (syncBlockObject.node.attrs.resourceId !== syncBlockObject.node.attrs.localId) {
-    var editSourceButton = {
+    var editSourceButton = _objectSpread({
       id: 'editor.syncedBlock.editSource',
       type: 'button',
       appearance: 'subtle',
       icon: LinkExternalIcon,
-      title: 'Edit source',
+      title: formatMessage(messages.editSourceLabel),
       showTitle: true,
-      tooltipContent: 'Navigate to source page of the sync block',
-      disabled: true,
-      onClick: function onClick(_state, _dispatch, view) {
-        if (!view) {
-          return false;
-        }
-        // to be implemented in a follow up PR
-        return true;
-      }
-    };
+      tooltipContent: formatMessage(messages.editSourceTooltip),
+      onClick: editSyncedBlockSource(api)
+    }, hoverDecorationProps(nodeType, akEditorSelectedNodeClassName));
     items.push(editSourceButton);
   }
+
+  // testId is required to show focus on trigger button on ESC key press
+  // see hideOnEsc in platform/packages/editor/editor-plugin-floating-toolbar/src/ui/Dropdown.tsx
+  var testId = 'synced-block-overflow-dropdown-trigger';
+  var overflowMenuConfig = [{
+    type: 'separator',
+    fullHeight: true
+  }, {
+    type: 'overflow-dropdown',
+    testId: testId,
+    options: [_objectSpread({
+      title: formatMessage(commonMessages.delete),
+      onClick: removeSyncedBlock(api),
+      icon: /*#__PURE__*/React.createElement(DeleteIcon, {
+        label: ""
+      })
+    }, hoverDecorationProps(nodeType))]
+  }];
+  items.push.apply(items, overflowMenuConfig);
   var getDomRef = function getDomRef(editorView) {
     var domAtPos = editorView.domAtPos.bind(editorView);
     var element = findDomRefAtPos(syncBlockObject.pos, domAtPos);
@@ -54,6 +85,6 @@ export var getToolbarConfig = function getToolbarConfig(state, _intl) {
     nodeType: nodeType,
     items: items,
     scrollable: true,
-    groupLabel: 'Synced blocks'
+    groupLabel: formatMessage(messages.syncBlockGroup)
   };
 };

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

@@ -1,4 +1,7 @@
-import type { Command } from '@atlaskit/editor-common/types';
+import type { Command, ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import { type EditorState, type Transaction } from '@atlaskit/editor-prosemirror/state';
+import type { SyncedBlockPlugin } from '../syncedBlockPluginType';
 export declare const createSyncedBlock: (state: EditorState) => Transaction;
-export declare const copySyncedBlockReferenceToClipboard: Command;
+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

@@ -2,6 +2,8 @@ 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 { JSONDocNode } from '@atlaskit/editor-json-transformer';
+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';
@@ -37,7 +39,7 @@ export type SyncedBlockPluginOptions = {
     syncedBlockProvider?: SyncedBlockProvider;
 };
 export type SyncedBlockPlugin = NextEditorPlugin<'syncedBlock', {
-    dependencies: [SelectionPlugin];
+    dependencies: [SelectionPlugin, FloatingToolbarPlugin, DecorationsPlugin];
     pluginConfiguration: SyncedBlockPluginOptions | undefined;
 }>;
 export type SyncBlockAttrs = {

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

@@ -1,6 +1,6 @@
 import type { IntlShape } from 'react-intl-next';
 import type { ProviderFactory } from '@atlaskit/editor-common/provider-factory';
-import type { FloatingToolbarConfig } from '@atlaskit/editor-common/types';
-import type { EditorState } from '@atlaskit/editor-prosemirror/dist/types/state';
-import type { SyncedBlockPluginOptions } from '../syncedBlockPluginType';
-export declare const getToolbarConfig: (state: EditorState, _intl: IntlShape, _options: SyncedBlockPluginOptions | undefined, _providerFactory: ProviderFactory) => FloatingToolbarConfig | undefined;
+import type { ExtractInjectionAPI, FloatingToolbarConfig } from '@atlaskit/editor-common/types';
+import type { EditorState } from '@atlaskit/editor-prosemirror/state';
+import type { SyncedBlockPlugin, SyncedBlockPluginOptions } from '../syncedBlockPluginType';
+export declare const getToolbarConfig: (state: EditorState, intl: IntlShape, _options: SyncedBlockPluginOptions | undefined, _providerFactory: ProviderFactory, api: ExtractInjectionAPI<SyncedBlockPlugin> | undefined) => FloatingToolbarConfig | undefined;

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

@@ -1,4 +1,7 @@
-import type { Command } from '@atlaskit/editor-common/types';
+import type { Command, ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import { type EditorState, type Transaction } from '@atlaskit/editor-prosemirror/state';
+import type { SyncedBlockPlugin } from '../syncedBlockPluginType';
 export declare const createSyncedBlock: (state: EditorState) => Transaction;
-export declare const copySyncedBlockReferenceToClipboard: Command;
+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

@@ -2,6 +2,8 @@ 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 { JSONDocNode } from '@atlaskit/editor-json-transformer';
+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';
@@ -38,7 +40,9 @@ export type SyncedBlockPluginOptions = {
 };
 export type SyncedBlockPlugin = NextEditorPlugin<'syncedBlock', {
     dependencies: [
-        SelectionPlugin
+        SelectionPlugin,
+        FloatingToolbarPlugin,
+        DecorationsPlugin
     ];
     pluginConfiguration: SyncedBlockPluginOptions | undefined;
 }>;

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

@@ -1,6 +1,6 @@
 import type { IntlShape } from 'react-intl-next';
 import type { ProviderFactory } from '@atlaskit/editor-common/provider-factory';
-import type { FloatingToolbarConfig } from '@atlaskit/editor-common/types';
-import type { EditorState } from '@atlaskit/editor-prosemirror/dist/types/state';
-import type { SyncedBlockPluginOptions } from '../syncedBlockPluginType';
-export declare const getToolbarConfig: (state: EditorState, _intl: IntlShape, _options: SyncedBlockPluginOptions | undefined, _providerFactory: ProviderFactory) => FloatingToolbarConfig | undefined;
+import type { ExtractInjectionAPI, FloatingToolbarConfig } from '@atlaskit/editor-common/types';
+import type { EditorState } from '@atlaskit/editor-prosemirror/state';
+import type { SyncedBlockPlugin, SyncedBlockPluginOptions } from '../syncedBlockPluginType';
+export declare const getToolbarConfig: (state: EditorState, intl: IntlShape, _options: SyncedBlockPluginOptions | undefined, _providerFactory: ProviderFactory, api: ExtractInjectionAPI<SyncedBlockPlugin> | undefined) => FloatingToolbarConfig | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-synced-block",
-	"version": "3.0.0",
+	"version": "3.0.1",
 	"description": "SyncedBlock plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -30,17 +30,19 @@
 	"dependencies": {
 		"@atlaskit/adf-schema": "^51.2.0",
 		"@atlaskit/button": "23.4.9",
+		"@atlaskit/editor-plugin-decorations": "^6.1.0",
+		"@atlaskit/editor-plugin-floating-toolbar": "^8.1.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.1.0",
 		"@atlaskit/icon": "28.3.0",
 		"@atlaskit/modal-dialog": "^14.4.0",
 		"@babel/runtime": "^7.0.0",
-		"react-intl-next": "npm:react-intl@^5.18.1",
-		"uuid": "^3.1.0"
+		"react-intl-next": "npm:react-intl@^5.18.1"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^110.0.0",
+		"@atlaskit/editor-common": "^110.2.0",
 		"react": "^18.2.0"
 	},
 	"devDependencies": {