@atlaskit/editor-plugin-synced-block 4.2.5 → 4.2.7

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/editor-plugin-synced-block
 
+## 4.2.7
+
+### Patch Changes
+
+- [`42b421f5241a4`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/42b421f5241a4) -
+  EDITOR-2865 Add menuTriggerByNode to block plugin state and use for sync block options
+
+## 4.2.6
+
+### Patch Changes
+
+- [`9e7aa73151ed0`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/9e7aa73151ed0) -
+  [ux] EDITOR-2670 add selected state for sync block when selection is inside
+- [`18f894b7433f3`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/18f894b7433f3) -
+  EDITOR-2863 Fix Add copy sync block option to block menu
+- Updated dependencies
+
 ## 4.2.5
 
 ### Patch Changes

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

@@ -1,19 +1,26 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.syncedBlockPluginKey = exports.createPlugin = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
+var _selection = require("@atlaskit/editor-common/selection");
+var _syncBlock = require("@atlaskit/editor-common/sync-block");
 var _state = require("@atlaskit/editor-prosemirror/state");
 var _bodiedLazySyncedBlock = require("../nodeviews/bodiedLazySyncedBlock");
 var _lazySyncedBlock = require("../nodeviews/lazySyncedBlock");
+var _selectionDecorations = require("./utils/selection-decorations");
 var _trackSyncBlocks2 = require("./utils/track-sync-blocks");
+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 syncedBlockPluginKey = exports.syncedBlockPluginKey = new _state.PluginKey('syncedBlockPlugin');
-
-// eslint-disable-next-line @typescript-eslint/no-empty-object-type
-
 var createPlugin = exports.createPlugin = function createPlugin(options, pmPluginFactoryParams, syncBlockStore, api) {
+  var _ref = options || {},
+    _ref$useLongPressSele = _ref.useLongPressSelection,
+    useLongPressSelection = _ref$useLongPressSele === void 0 ? false : _ref$useLongPressSele;
   return new _safePlugin.SafePlugin({
     key: syncedBlockPluginKey,
     state: {
@@ -22,14 +29,26 @@ var createPlugin = exports.createPlugin = function createPlugin(options, pmPlugi
           return node.type.name === 'syncBlock';
         });
         syncBlockStore.fetchSyncBlocksData(syncBlockNodes);
-        return {};
+        return {
+          decorationSet: (0, _selectionDecorations.calculateDecorations)(instance.doc, instance.selection, instance.schema)
+        };
       },
-      apply: function apply(tr, currentPluginState) {
+      apply: function apply(tr, currentPluginState, oldEditorState) {
         var meta = tr.getMeta(syncedBlockPluginKey);
         if (meta) {
           return meta;
         }
-        return currentPluginState;
+        var newState = currentPluginState;
+        if (!tr.selection.eq(oldEditorState.selection)) {
+          newState = _objectSpread(_objectSpread({}, newState), {}, {
+            decorationSet: (0, _selectionDecorations.calculateDecorations)(tr.doc, tr.selection, tr.doc.type.schema)
+          });
+        } else if (newState.decorationSet) {
+          newState = _objectSpread(_objectSpread({}, newState), {}, {
+            decorationSet: newState.decorationSet.map(tr.mapping, tr.doc)
+          });
+        }
+        return newState;
       }
     },
     props: {
@@ -46,7 +65,16 @@ var createPlugin = exports.createPlugin = function createPlugin(options, pmPlugi
           api: api,
           syncBlockStore: syncBlockStore
         })
-      }
+      },
+      decorations: function decorations(state) {
+        var pluginState = syncedBlockPluginKey.getState(state);
+        return pluginState === null || pluginState === void 0 ? void 0 : pluginState.decorationSet;
+      },
+      handleClickOn: (0, _selection.createSelectionClickHandler)(['bodiedSyncBlock'], function (target) {
+        return !!target.closest(".".concat(_syncBlock.BodiedSyncBlockSharedCssClassName.prefix));
+      }, {
+        useLongPressSelection: useLongPressSelection
+      })
     },
     view: function view(editorView) {
       syncBlockStore.setEditorView(editorView);

package/dist/cjs/pm-plugins/utils/selection-decorations.js

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.calculateDecorations = void 0;
+var _syncBlock = require("@atlaskit/editor-common/sync-block");
+var _utils = require("@atlaskit/editor-prosemirror/utils");
+var _view = require("@atlaskit/editor-prosemirror/view");
+var calculateDecorations = exports.calculateDecorations = function calculateDecorations(doc, selection, schema) {
+  var bodiedSyncBlock = schema.nodes.bodiedSyncBlock;
+  var syncBlockParent = (0, _utils.findParentNodeOfType)(bodiedSyncBlock)(selection);
+  if (syncBlockParent) {
+    var node = syncBlockParent.node,
+      pos = syncBlockParent.pos;
+    var decoration = _view.Decoration.node(pos, pos + node.nodeSize, {
+      class: "".concat(_syncBlock.BodiedSyncBlockSharedCssClassName.selectionInside)
+    });
+    return _view.DecorationSet.create(doc, [decoration]);
+  }
+  return _view.DecorationSet.empty;
+};

package/dist/cjs/ui/CreateSyncedBlockDropdownItem.js

@@ -20,15 +20,15 @@ var CreateSyncedBlockDropdownItem = function CreateSyncedBlockDropdownItem(_ref)
   var _useIntl = (0, _reactIntlNext.useIntl)(),
     formatMessage = _useIntl.formatMessage;
   var _useSharedPluginState = (0, _hooks.useSharedPluginStateWithSelector)(api, ['selection', 'blockControls'], function (states) {
-      var _states$selectionStat, _states$blockControls;
+      var _states$selectionStat, _states$blockControls, _states$blockControls2;
       return {
         selection: (_states$selectionStat = states.selectionState) === null || _states$selectionStat === void 0 ? void 0 : _states$selectionStat.selection,
-        activeNode: (_states$blockControls = states.blockControlsState) === null || _states$blockControls === void 0 ? void 0 : _states$blockControls.activeNode
+        menuTriggerByNode: (_states$blockControls = (_states$blockControls2 = states.blockControlsState) === null || _states$blockControls2 === void 0 ? void 0 : _states$blockControls2.menuTriggerByNode) !== null && _states$blockControls !== void 0 ? _states$blockControls : undefined
       };
     }),
     selection = _useSharedPluginState.selection,
-    activeNode = _useSharedPluginState.activeNode;
-  var isNested = activeNode && activeNode.rootPos !== activeNode.pos;
+    menuTriggerByNode = _useSharedPluginState.menuTriggerByNode;
+  var isNested = menuTriggerByNode && menuTriggerByNode.rootPos !== menuTriggerByNode.pos;
   var canBeConverted = (0, _react.useMemo)(function () {
     return selection && (0, _utils.canBeConvertedToSyncBlock)(selection);
   }, [selection]);
@@ -80,13 +80,13 @@ var CopySyncedBlockDropdownItem = function CopySyncedBlockDropdownItem(_ref2) {
 var CreateOrCopySyncedBlockDropdownItem = exports.CreateOrCopySyncedBlockDropdownItem = function CreateOrCopySyncedBlockDropdownItem(_ref3) {
   var api = _ref3.api;
   var _useSharedPluginState2 = (0, _hooks.useSharedPluginStateWithSelector)(api, ['blockControls'], function (states) {
-      var _states$blockControls2;
+      var _states$blockControls3, _states$blockControls4;
       return {
-        menuTriggerBy: (_states$blockControls2 = states.blockControlsState) === null || _states$blockControls2 === void 0 ? void 0 : _states$blockControls2.menuTriggerBy
+        menuTriggerByNode: (_states$blockControls3 = (_states$blockControls4 = states.blockControlsState) === null || _states$blockControls4 === void 0 ? void 0 : _states$blockControls4.menuTriggerByNode) !== null && _states$blockControls3 !== void 0 ? _states$blockControls3 : undefined
       };
     }),
-    menuTriggerBy = _useSharedPluginState2.menuTriggerBy;
-  if (menuTriggerBy === 'syncBlock' || menuTriggerBy === 'bodiedSyncBlock') {
+    menuTriggerByNode = _useSharedPluginState2.menuTriggerByNode;
+  if ((menuTriggerByNode === null || menuTriggerByNode === void 0 ? void 0 : menuTriggerByNode.nodeType) === 'syncBlock' || (menuTriggerByNode === null || menuTriggerByNode === void 0 ? void 0 : menuTriggerByNode.nodeType) === 'bodiedSyncBlock') {
     return /*#__PURE__*/_react.default.createElement(CopySyncedBlockDropdownItem, {
       api: api
     });

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

@@ -1,27 +1,44 @@
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { createSelectionClickHandler } from '@atlaskit/editor-common/selection';
+import { BodiedSyncBlockSharedCssClassName } from '@atlaskit/editor-common/sync-block';
 import { PluginKey } from '@atlaskit/editor-prosemirror/state';
 import { lazyBodiedSyncBlockView } from '../nodeviews/bodiedLazySyncedBlock';
 import { lazySyncBlockView } from '../nodeviews/lazySyncedBlock';
+import { calculateDecorations } from './utils/selection-decorations';
 import { trackSyncBlocks } from './utils/track-sync-blocks';
 export const syncedBlockPluginKey = new PluginKey('syncedBlockPlugin');
-
-// eslint-disable-next-line @typescript-eslint/no-empty-object-type
-
 export const createPlugin = (options, pmPluginFactoryParams, syncBlockStore, api) => {
+  const {
+    useLongPressSelection = false
+  } = options || {};
   return new SafePlugin({
     key: syncedBlockPluginKey,
     state: {
       init(_, instance) {
         const syncBlockNodes = instance.doc.children.filter(node => node.type.name === 'syncBlock');
         syncBlockStore.fetchSyncBlocksData(syncBlockNodes);
-        return {};
+        return {
+          decorationSet: calculateDecorations(instance.doc, instance.selection, instance.schema)
+        };
       },
-      apply: (tr, currentPluginState) => {
+      apply: (tr, currentPluginState, oldEditorState) => {
         const meta = tr.getMeta(syncedBlockPluginKey);
         if (meta) {
           return meta;
         }
-        return currentPluginState;
+        let newState = currentPluginState;
+        if (!tr.selection.eq(oldEditorState.selection)) {
+          newState = {
+            ...newState,
+            decorationSet: calculateDecorations(tr.doc, tr.selection, tr.doc.type.schema)
+          };
+        } else if (newState.decorationSet) {
+          newState = {
+            ...newState,
+            decorationSet: newState.decorationSet.map(tr.mapping, tr.doc)
+          };
+        }
+        return newState;
       }
     },
     props: {
@@ -38,7 +55,14 @@ export const createPlugin = (options, pmPluginFactoryParams, syncBlockStore, api
           api,
           syncBlockStore
         })
-      }
+      },
+      decorations: state => {
+        const pluginState = syncedBlockPluginKey.getState(state);
+        return pluginState === null || pluginState === void 0 ? void 0 : pluginState.decorationSet;
+      },
+      handleClickOn: createSelectionClickHandler(['bodiedSyncBlock'], target => !!target.closest(`.${BodiedSyncBlockSharedCssClassName.prefix}`), {
+        useLongPressSelection
+      })
     },
     view: editorView => {
       syncBlockStore.setEditorView(editorView);

package/dist/es2019/pm-plugins/utils/selection-decorations.js

@@ -0,0 +1,20 @@
+import { BodiedSyncBlockSharedCssClassName } from '@atlaskit/editor-common/sync-block';
+import { findParentNodeOfType } from '@atlaskit/editor-prosemirror/utils';
+import { Decoration, DecorationSet } from '@atlaskit/editor-prosemirror/view';
+export const calculateDecorations = (doc, selection, schema) => {
+  const {
+    bodiedSyncBlock
+  } = schema.nodes;
+  const syncBlockParent = findParentNodeOfType(bodiedSyncBlock)(selection);
+  if (syncBlockParent) {
+    const {
+      node,
+      pos
+    } = syncBlockParent;
+    const decoration = Decoration.node(pos, pos + node.nodeSize, {
+      class: `${BodiedSyncBlockSharedCssClassName.selectionInside}`
+    });
+    return DecorationSet.create(doc, [decoration]);
+  }
+  return DecorationSet.empty;
+};

package/dist/es2019/ui/CreateSyncedBlockDropdownItem.js

@@ -14,15 +14,15 @@ const CreateSyncedBlockDropdownItem = ({
   } = useIntl();
   const {
     selection,
-    activeNode
+    menuTriggerByNode
   } = useSharedPluginStateWithSelector(api, ['selection', 'blockControls'], states => {
-    var _states$selectionStat, _states$blockControls;
+    var _states$selectionStat, _states$blockControls, _states$blockControls2;
     return {
       selection: (_states$selectionStat = states.selectionState) === null || _states$selectionStat === void 0 ? void 0 : _states$selectionStat.selection,
-      activeNode: (_states$blockControls = states.blockControlsState) === null || _states$blockControls === void 0 ? void 0 : _states$blockControls.activeNode
+      menuTriggerByNode: (_states$blockControls = (_states$blockControls2 = states.blockControlsState) === null || _states$blockControls2 === void 0 ? void 0 : _states$blockControls2.menuTriggerByNode) !== null && _states$blockControls !== void 0 ? _states$blockControls : undefined
     };
   });
-  const isNested = activeNode && activeNode.rootPos !== activeNode.pos;
+  const isNested = menuTriggerByNode && menuTriggerByNode.rootPos !== menuTriggerByNode.pos;
   const canBeConverted = useMemo(() => selection && canBeConvertedToSyncBlock(selection), [selection]);
   if (isNested || !canBeConverted) {
     return null;
@@ -75,14 +75,14 @@ export const CreateOrCopySyncedBlockDropdownItem = ({
   api
 }) => {
   const {
-    menuTriggerBy
+    menuTriggerByNode
   } = useSharedPluginStateWithSelector(api, ['blockControls'], states => {
-    var _states$blockControls2;
+    var _states$blockControls3, _states$blockControls4;
     return {
-      menuTriggerBy: (_states$blockControls2 = states.blockControlsState) === null || _states$blockControls2 === void 0 ? void 0 : _states$blockControls2.menuTriggerBy
+      menuTriggerByNode: (_states$blockControls3 = (_states$blockControls4 = states.blockControlsState) === null || _states$blockControls4 === void 0 ? void 0 : _states$blockControls4.menuTriggerByNode) !== null && _states$blockControls3 !== void 0 ? _states$blockControls3 : undefined
     };
   });
-  if (menuTriggerBy === 'syncBlock' || menuTriggerBy === 'bodiedSyncBlock') {
+  if ((menuTriggerByNode === null || menuTriggerByNode === void 0 ? void 0 : menuTriggerByNode.nodeType) === 'syncBlock' || (menuTriggerByNode === null || menuTriggerByNode === void 0 ? void 0 : menuTriggerByNode.nodeType) === 'bodiedSyncBlock') {
     return /*#__PURE__*/React.createElement(CopySyncedBlockDropdownItem, {
       api: api
     });

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

@@ -1,13 +1,19 @@
+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 { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { createSelectionClickHandler } from '@atlaskit/editor-common/selection';
+import { BodiedSyncBlockSharedCssClassName } from '@atlaskit/editor-common/sync-block';
 import { PluginKey } from '@atlaskit/editor-prosemirror/state';
 import { lazyBodiedSyncBlockView } from '../nodeviews/bodiedLazySyncedBlock';
 import { lazySyncBlockView } from '../nodeviews/lazySyncedBlock';
+import { calculateDecorations } from './utils/selection-decorations';
 import { trackSyncBlocks } from './utils/track-sync-blocks';
 export var syncedBlockPluginKey = new PluginKey('syncedBlockPlugin');
-
-// eslint-disable-next-line @typescript-eslint/no-empty-object-type
-
 export var createPlugin = function createPlugin(options, pmPluginFactoryParams, syncBlockStore, api) {
+  var _ref = options || {},
+    _ref$useLongPressSele = _ref.useLongPressSelection,
+    useLongPressSelection = _ref$useLongPressSele === void 0 ? false : _ref$useLongPressSele;
   return new SafePlugin({
     key: syncedBlockPluginKey,
     state: {
@@ -16,14 +22,26 @@ export var createPlugin = function createPlugin(options, pmPluginFactoryParams,
           return node.type.name === 'syncBlock';
         });
         syncBlockStore.fetchSyncBlocksData(syncBlockNodes);
-        return {};
+        return {
+          decorationSet: calculateDecorations(instance.doc, instance.selection, instance.schema)
+        };
       },
-      apply: function apply(tr, currentPluginState) {
+      apply: function apply(tr, currentPluginState, oldEditorState) {
         var meta = tr.getMeta(syncedBlockPluginKey);
         if (meta) {
           return meta;
         }
-        return currentPluginState;
+        var newState = currentPluginState;
+        if (!tr.selection.eq(oldEditorState.selection)) {
+          newState = _objectSpread(_objectSpread({}, newState), {}, {
+            decorationSet: calculateDecorations(tr.doc, tr.selection, tr.doc.type.schema)
+          });
+        } else if (newState.decorationSet) {
+          newState = _objectSpread(_objectSpread({}, newState), {}, {
+            decorationSet: newState.decorationSet.map(tr.mapping, tr.doc)
+          });
+        }
+        return newState;
       }
     },
     props: {
@@ -40,7 +58,16 @@ export var createPlugin = function createPlugin(options, pmPluginFactoryParams,
           api: api,
           syncBlockStore: syncBlockStore
         })
-      }
+      },
+      decorations: function decorations(state) {
+        var pluginState = syncedBlockPluginKey.getState(state);
+        return pluginState === null || pluginState === void 0 ? void 0 : pluginState.decorationSet;
+      },
+      handleClickOn: createSelectionClickHandler(['bodiedSyncBlock'], function (target) {
+        return !!target.closest(".".concat(BodiedSyncBlockSharedCssClassName.prefix));
+      }, {
+        useLongPressSelection: useLongPressSelection
+      })
     },
     view: function view(editorView) {
       syncBlockStore.setEditorView(editorView);

package/dist/esm/pm-plugins/utils/selection-decorations.js

@@ -0,0 +1,16 @@
+import { BodiedSyncBlockSharedCssClassName } from '@atlaskit/editor-common/sync-block';
+import { findParentNodeOfType } from '@atlaskit/editor-prosemirror/utils';
+import { Decoration, DecorationSet } from '@atlaskit/editor-prosemirror/view';
+export var calculateDecorations = function calculateDecorations(doc, selection, schema) {
+  var bodiedSyncBlock = schema.nodes.bodiedSyncBlock;
+  var syncBlockParent = findParentNodeOfType(bodiedSyncBlock)(selection);
+  if (syncBlockParent) {
+    var node = syncBlockParent.node,
+      pos = syncBlockParent.pos;
+    var decoration = Decoration.node(pos, pos + node.nodeSize, {
+      class: "".concat(BodiedSyncBlockSharedCssClassName.selectionInside)
+    });
+    return DecorationSet.create(doc, [decoration]);
+  }
+  return DecorationSet.empty;
+};

package/dist/esm/ui/CreateSyncedBlockDropdownItem.js

@@ -11,15 +11,15 @@ var CreateSyncedBlockDropdownItem = function CreateSyncedBlockDropdownItem(_ref)
   var _useIntl = useIntl(),
     formatMessage = _useIntl.formatMessage;
   var _useSharedPluginState = useSharedPluginStateWithSelector(api, ['selection', 'blockControls'], function (states) {
-      var _states$selectionStat, _states$blockControls;
+      var _states$selectionStat, _states$blockControls, _states$blockControls2;
       return {
         selection: (_states$selectionStat = states.selectionState) === null || _states$selectionStat === void 0 ? void 0 : _states$selectionStat.selection,
-        activeNode: (_states$blockControls = states.blockControlsState) === null || _states$blockControls === void 0 ? void 0 : _states$blockControls.activeNode
+        menuTriggerByNode: (_states$blockControls = (_states$blockControls2 = states.blockControlsState) === null || _states$blockControls2 === void 0 ? void 0 : _states$blockControls2.menuTriggerByNode) !== null && _states$blockControls !== void 0 ? _states$blockControls : undefined
       };
     }),
     selection = _useSharedPluginState.selection,
-    activeNode = _useSharedPluginState.activeNode;
-  var isNested = activeNode && activeNode.rootPos !== activeNode.pos;
+    menuTriggerByNode = _useSharedPluginState.menuTriggerByNode;
+  var isNested = menuTriggerByNode && menuTriggerByNode.rootPos !== menuTriggerByNode.pos;
   var canBeConverted = useMemo(function () {
     return selection && canBeConvertedToSyncBlock(selection);
   }, [selection]);
@@ -71,13 +71,13 @@ var CopySyncedBlockDropdownItem = function CopySyncedBlockDropdownItem(_ref2) {
 export var CreateOrCopySyncedBlockDropdownItem = function CreateOrCopySyncedBlockDropdownItem(_ref3) {
   var api = _ref3.api;
   var _useSharedPluginState2 = useSharedPluginStateWithSelector(api, ['blockControls'], function (states) {
-      var _states$blockControls2;
+      var _states$blockControls3, _states$blockControls4;
       return {
-        menuTriggerBy: (_states$blockControls2 = states.blockControlsState) === null || _states$blockControls2 === void 0 ? void 0 : _states$blockControls2.menuTriggerBy
+        menuTriggerByNode: (_states$blockControls3 = (_states$blockControls4 = states.blockControlsState) === null || _states$blockControls4 === void 0 ? void 0 : _states$blockControls4.menuTriggerByNode) !== null && _states$blockControls3 !== void 0 ? _states$blockControls3 : undefined
       };
     }),
-    menuTriggerBy = _useSharedPluginState2.menuTriggerBy;
-  if (menuTriggerBy === 'syncBlock' || menuTriggerBy === 'bodiedSyncBlock') {
+    menuTriggerByNode = _useSharedPluginState2.menuTriggerByNode;
+  if ((menuTriggerByNode === null || menuTriggerByNode === void 0 ? void 0 : menuTriggerByNode.nodeType) === 'syncBlock' || (menuTriggerByNode === null || menuTriggerByNode === void 0 ? void 0 : menuTriggerByNode.nodeType) === 'bodiedSyncBlock') {
     return /*#__PURE__*/React.createElement(CopySyncedBlockDropdownItem, {
       api: api
     });

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

@@ -1,9 +1,12 @@
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import type { ExtractInjectionAPI, PMPluginFactoryParams } from '@atlaskit/editor-common/types';
 import { PluginKey } from '@atlaskit/editor-prosemirror/state';
+import type { DecorationSet } from '@atlaskit/editor-prosemirror/view';
 import type { SyncBlockStoreManager } from '@atlaskit/editor-synced-block-provider';
 import type { SyncedBlockPlugin, SyncedBlockPluginOptions } from '../syncedBlockPluginType';
 export declare const syncedBlockPluginKey: PluginKey<any>;
-type SyncedBlockPluginState = {};
+type SyncedBlockPluginState = {
+    decorationSet: DecorationSet;
+};
 export declare const createPlugin: (options: SyncedBlockPluginOptions | undefined, pmPluginFactoryParams: PMPluginFactoryParams, syncBlockStore: SyncBlockStoreManager, api?: ExtractInjectionAPI<SyncedBlockPlugin>) => SafePlugin<SyncedBlockPluginState>;
 export {};

package/dist/types/pm-plugins/utils/selection-decorations.d.ts

@@ -0,0 +1,4 @@
+import type { Node as PMNode, Schema } from '@atlaskit/editor-prosemirror/model';
+import type { Selection } from '@atlaskit/editor-prosemirror/state';
+import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
+export declare const calculateDecorations: (doc: PMNode, selection: Selection, schema: Schema) => DecorationSet;

package/dist/types/syncedBlockPluginType.d.ts

@@ -1,5 +1,5 @@
 import type { EventDispatcher } from '@atlaskit/editor-common/event-dispatcher';
-import type { EditorCommand, NextEditorPlugin, OptionalPlugin } from '@atlaskit/editor-common/types';
+import type { EditorCommand, LongPressSelectionPluginOptions, NextEditorPlugin, OptionalPlugin } from '@atlaskit/editor-common/types';
 import type { JSONDocNode } from '@atlaskit/editor-json-transformer';
 import type { AnalyticsPlugin } from '@atlaskit/editor-plugin-analytics';
 import type { BlockControlsPlugin } from '@atlaskit/editor-plugin-block-controls';
@@ -35,10 +35,10 @@ export type SyncedBlockEditorProps = {
 export type SyncedBlockRendererProps = {
     useFetchSyncBlockData: () => UseFetchSyncBlockDataResult;
 };
-export type SyncedBlockPluginOptions = {
+export interface SyncedBlockPluginOptions extends LongPressSelectionPluginOptions {
     syncBlockDataProvider: SyncBlockDataProvider;
     syncedBlockRenderer: (props: SyncedBlockRendererProps) => React.JSX.Element;
-};
+}
 export type SyncedBlockPlugin = NextEditorPlugin<'syncedBlock', {
     actions: {
         /**

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

@@ -1,9 +1,12 @@
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import type { ExtractInjectionAPI, PMPluginFactoryParams } from '@atlaskit/editor-common/types';
 import { PluginKey } from '@atlaskit/editor-prosemirror/state';
+import type { DecorationSet } from '@atlaskit/editor-prosemirror/view';
 import type { SyncBlockStoreManager } from '@atlaskit/editor-synced-block-provider';
 import type { SyncedBlockPlugin, SyncedBlockPluginOptions } from '../syncedBlockPluginType';
 export declare const syncedBlockPluginKey: PluginKey<any>;
-type SyncedBlockPluginState = {};
+type SyncedBlockPluginState = {
+    decorationSet: DecorationSet;
+};
 export declare const createPlugin: (options: SyncedBlockPluginOptions | undefined, pmPluginFactoryParams: PMPluginFactoryParams, syncBlockStore: SyncBlockStoreManager, api?: ExtractInjectionAPI<SyncedBlockPlugin>) => SafePlugin<SyncedBlockPluginState>;
 export {};

package/dist/types-ts4.5/pm-plugins/utils/selection-decorations.d.ts

@@ -0,0 +1,4 @@
+import type { Node as PMNode, Schema } from '@atlaskit/editor-prosemirror/model';
+import type { Selection } from '@atlaskit/editor-prosemirror/state';
+import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
+export declare const calculateDecorations: (doc: PMNode, selection: Selection, schema: Schema) => DecorationSet;

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

@@ -1,5 +1,5 @@
 import type { EventDispatcher } from '@atlaskit/editor-common/event-dispatcher';
-import type { EditorCommand, NextEditorPlugin, OptionalPlugin } from '@atlaskit/editor-common/types';
+import type { EditorCommand, LongPressSelectionPluginOptions, NextEditorPlugin, OptionalPlugin } from '@atlaskit/editor-common/types';
 import type { JSONDocNode } from '@atlaskit/editor-json-transformer';
 import type { AnalyticsPlugin } from '@atlaskit/editor-plugin-analytics';
 import type { BlockControlsPlugin } from '@atlaskit/editor-plugin-block-controls';
@@ -35,10 +35,10 @@ export type SyncedBlockEditorProps = {
 export type SyncedBlockRendererProps = {
     useFetchSyncBlockData: () => UseFetchSyncBlockDataResult;
 };
-export type SyncedBlockPluginOptions = {
+export interface SyncedBlockPluginOptions extends LongPressSelectionPluginOptions {
     syncBlockDataProvider: SyncBlockDataProvider;
     syncedBlockRenderer: (props: SyncedBlockRendererProps) => React.JSX.Element;
-};
+}
 export type SyncedBlockPlugin = NextEditorPlugin<'syncedBlock', {
     actions: {
         /**

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-synced-block",
-	"version": "4.2.5",
+	"version": "4.2.7",
 	"description": "SyncedBlock plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -38,14 +38,14 @@
 		"@atlaskit/editor-plugin-selection": "^6.1.0",
 		"@atlaskit/editor-prosemirror": "7.0.0",
 		"@atlaskit/editor-shared-styles": "^3.9.0",
-		"@atlaskit/editor-synced-block-provider": "^2.7.0",
+		"@atlaskit/editor-synced-block-provider": "^2.8.0",
 		"@atlaskit/editor-tables": "^2.9.0",
 		"@atlaskit/editor-toolbar": "^0.17.0",
 		"@atlaskit/icon": "29.0.0",
 		"@atlaskit/icon-lab": "^5.12.0",
 		"@atlaskit/logo": "^19.9.0",
 		"@atlaskit/lozenge": "^13.1.0",
-		"@atlaskit/modal-dialog": "^14.6.0",
+		"@atlaskit/modal-dialog": "^14.7.0",
 		"@atlaskit/primitives": "^16.1.0",
 		"@atlaskit/tooltip": "^20.8.0",
 		"@atlaskit/visually-hidden": "^3.0.0",
@@ -53,7 +53,7 @@
 		"react-intl-next": "npm:react-intl@^5.18.1"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^110.27.0",
+		"@atlaskit/editor-common": "^110.29.0",
 		"react": "^18.2.0"
 	},
 	"devDependencies": {