@atlaskit/editor-plugin-synced-block 4.2.4 → 4.2.6

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @atlaskit/editor-plugin-synced-block
 
+## 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
+
+- [`7e8c949e9c8c0`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/7e8c949e9c8c0) -
+  [ux] Add new lozenge next to create synced block in toolbar and typeahead, and text updates
+- Updated dependencies
+
 ## 4.2.4
 
 ### 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/syncedBlockPlugin.js

@@ -10,6 +10,7 @@ var _adfSchema = require("@atlaskit/adf-schema");
 var _messages = require("@atlaskit/editor-common/messages");
 var _quickInsert = require("@atlaskit/editor-common/quick-insert");
 var _editorSyncedBlockProvider = require("@atlaskit/editor-synced-block-provider");
+var _lozenge = _interopRequireDefault(require("@atlaskit/lozenge"));
 var _editorActions = require("./editor-actions");
 var _editorCommands = require("./editor-commands");
 var _main = require("./pm-plugins/main");
@@ -73,6 +74,9 @@ var syncedBlockPlugin = exports.syncedBlockPlugin = function syncedBlockPlugin(_
           priority: 800,
           keywords: ['synced', 'block', 'synced-block', 'sync', 'sync-block', 'auto', 'update', 'excerpt', 'connect'],
           keyshortcut: '',
+          lozenge: /*#__PURE__*/_react.default.createElement(_lozenge.default, {
+            appearance: "new"
+          }, formatMessage(_messages.blockTypeMessages.newLozenge)),
           icon: function icon() {
             return /*#__PURE__*/_react.default.createElement(_quickInsert.IconSyncBlock, {
               label: formatMessage(_messages.blockTypeMessages.syncedBlock)

package/dist/cjs/syncedBlockPluginType.js

@@ -2,4 +2,5 @@
 
 Object.defineProperty(exports, "__esModule", {
   value: true
-});
+});
+;

package/dist/cjs/ui/CreateSyncedBlockButton.js

@@ -43,6 +43,7 @@ var CreateSyncedBlockButton = exports.CreateSyncedBlockButton = function CreateS
   }, /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarButton, {
     label: message,
     iconBefore: /*#__PURE__*/_react.default.createElement(_blockSynced.default, {
+      size: "small",
       label: ""
     }),
     isDisabled: isDisabled,

package/dist/cjs/ui/CreateSyncedBlockDropdownItem.js

@@ -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$blockControls2, _states$blockControls3;
       return {
-        menuTriggerBy: (_states$blockControls2 = states.blockControlsState) === null || _states$blockControls2 === void 0 ? void 0 : _states$blockControls2.menuTriggerBy
+        activeNodeType: (_states$blockControls2 = (_states$blockControls3 = states.blockControlsState) === null || _states$blockControls3 === void 0 || (_states$blockControls3 = _states$blockControls3.activeNode) === null || _states$blockControls3 === void 0 ? void 0 : _states$blockControls3.nodeType) !== null && _states$blockControls2 !== void 0 ? _states$blockControls2 : undefined
       };
     }),
-    menuTriggerBy = _useSharedPluginState2.menuTriggerBy;
-  if (menuTriggerBy === 'syncBlock' || menuTriggerBy === 'bodiedSyncBlock') {
+    activeNodeType = _useSharedPluginState2.activeNodeType;
+  if (activeNodeType === 'syncBlock' || activeNodeType === 'bodiedSyncBlock') {
     return /*#__PURE__*/_react.default.createElement(CopySyncedBlockDropdownItem, {
       api: api
     });

package/dist/cjs/ui/CreateSyncedBlockItem.js

@@ -12,6 +12,8 @@ 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 _lozenge = _interopRequireDefault(require("@atlaskit/lozenge"));
+var _compiled = require("@atlaskit/primitives/compiled");
 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) {
@@ -37,7 +39,13 @@ var CreateSyncedBlockItem = exports.CreateSyncedBlockItem = function CreateSynce
     onClick: onClick,
     isDisabled: isDisabled,
     elemBefore: /*#__PURE__*/_react.default.createElement(_blockSynced.default, {
+      size: "small",
       label: ""
     })
-  }, message);
+  }, /*#__PURE__*/_react.default.createElement(_compiled.Flex, {
+    alignItems: "center",
+    gap: "space.050"
+  }, message, /*#__PURE__*/_react.default.createElement(_lozenge.default, {
+    appearance: "new"
+  }, intl.formatMessage(_messages.syncBlockMessages.newLozenge))));
 };

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/syncedBlockPlugin.js

@@ -3,6 +3,7 @@ import { bodiedSyncBlock, syncBlock } from '@atlaskit/adf-schema';
 import { blockTypeMessages } from '@atlaskit/editor-common/messages';
 import { IconSyncBlock } from '@atlaskit/editor-common/quick-insert';
 import { SyncBlockStoreManager } from '@atlaskit/editor-synced-block-provider';
+import Lozenge from '@atlaskit/lozenge';
 import { flushBodiedSyncBlocks } from './editor-actions';
 import { copySyncedBlockReferenceToClipboardEditorCommand, createSyncedBlock } from './editor-commands';
 import { createPlugin } from './pm-plugins/main';
@@ -60,6 +61,9 @@ export const syncedBlockPlugin = ({
         priority: 800,
         keywords: ['synced', 'block', 'synced-block', 'sync', 'sync-block', 'auto', 'update', 'excerpt', 'connect'],
         keyshortcut: '',
+        lozenge: /*#__PURE__*/React.createElement(Lozenge, {
+          appearance: "new"
+        }, formatMessage(blockTypeMessages.newLozenge)),
         icon: () => /*#__PURE__*/React.createElement(IconSyncBlock, {
           label: formatMessage(blockTypeMessages.syncedBlock)
         }),

package/dist/es2019/syncedBlockPluginType.js

@@ -1 +1,2 @@
+;
 export {};

package/dist/es2019/ui/CreateSyncedBlockButton.js

@@ -34,6 +34,7 @@ export const CreateSyncedBlockButton = ({
   }, /*#__PURE__*/React.createElement(ToolbarButton, {
     label: message,
     iconBefore: /*#__PURE__*/React.createElement(BlockSyncedIcon, {
+      size: "small",
       label: ""
     }),
     isDisabled: isDisabled,

package/dist/es2019/ui/CreateSyncedBlockDropdownItem.js

@@ -75,14 +75,14 @@ export const CreateOrCopySyncedBlockDropdownItem = ({
   api
 }) => {
   const {
-    menuTriggerBy
+    activeNodeType
   } = useSharedPluginStateWithSelector(api, ['blockControls'], states => {
-    var _states$blockControls2;
+    var _states$blockControls2, _states$blockControls3, _states$blockControls4;
     return {
-      menuTriggerBy: (_states$blockControls2 = states.blockControlsState) === null || _states$blockControls2 === void 0 ? void 0 : _states$blockControls2.menuTriggerBy
+      activeNodeType: (_states$blockControls2 = (_states$blockControls3 = states.blockControlsState) === null || _states$blockControls3 === void 0 ? void 0 : (_states$blockControls4 = _states$blockControls3.activeNode) === null || _states$blockControls4 === void 0 ? void 0 : _states$blockControls4.nodeType) !== null && _states$blockControls2 !== void 0 ? _states$blockControls2 : undefined
     };
   });
-  if (menuTriggerBy === 'syncBlock' || menuTriggerBy === 'bodiedSyncBlock') {
+  if (activeNodeType === 'syncBlock' || activeNodeType === 'bodiedSyncBlock') {
     return /*#__PURE__*/React.createElement(CopySyncedBlockDropdownItem, {
       api: api
     });

package/dist/es2019/ui/CreateSyncedBlockItem.js

@@ -4,6 +4,8 @@ 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 Lozenge from '@atlaskit/lozenge';
+import { Flex } from '@atlaskit/primitives/compiled';
 import { canBeConvertedToSyncBlock } from '../pm-plugins/utils/utils';
 export const CreateSyncedBlockItem = ({
   api
@@ -28,7 +30,13 @@ export const CreateSyncedBlockItem = ({
     onClick: onClick,
     isDisabled: isDisabled,
     elemBefore: /*#__PURE__*/React.createElement(BlockSyncedIcon, {
+      size: "small",
       label: ""
     })
-  }, message);
+  }, /*#__PURE__*/React.createElement(Flex, {
+    alignItems: "center",
+    gap: "space.050"
+  }, message, /*#__PURE__*/React.createElement(Lozenge, {
+    appearance: "new"
+  }, intl.formatMessage(syncBlockMessages.newLozenge))));
 };

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/syncedBlockPlugin.js

@@ -3,6 +3,7 @@ import { bodiedSyncBlock, syncBlock } from '@atlaskit/adf-schema';
 import { blockTypeMessages } from '@atlaskit/editor-common/messages';
 import { IconSyncBlock } from '@atlaskit/editor-common/quick-insert';
 import { SyncBlockStoreManager } from '@atlaskit/editor-synced-block-provider';
+import Lozenge from '@atlaskit/lozenge';
 import { flushBodiedSyncBlocks as _flushBodiedSyncBlocks } from './editor-actions';
 import { copySyncedBlockReferenceToClipboardEditorCommand, createSyncedBlock } from './editor-commands';
 import { createPlugin } from './pm-plugins/main';
@@ -66,6 +67,9 @@ export var syncedBlockPlugin = function syncedBlockPlugin(_ref) {
           priority: 800,
           keywords: ['synced', 'block', 'synced-block', 'sync', 'sync-block', 'auto', 'update', 'excerpt', 'connect'],
           keyshortcut: '',
+          lozenge: /*#__PURE__*/React.createElement(Lozenge, {
+            appearance: "new"
+          }, formatMessage(blockTypeMessages.newLozenge)),
           icon: function icon() {
             return /*#__PURE__*/React.createElement(IconSyncBlock, {
               label: formatMessage(blockTypeMessages.syncedBlock)

package/dist/esm/syncedBlockPluginType.js

@@ -1 +1,2 @@
+;
 export {};

package/dist/esm/ui/CreateSyncedBlockButton.js

@@ -34,6 +34,7 @@ export var CreateSyncedBlockButton = function CreateSyncedBlockButton(_ref) {
   }, /*#__PURE__*/React.createElement(ToolbarButton, {
     label: message,
     iconBefore: /*#__PURE__*/React.createElement(BlockSyncedIcon, {
+      size: "small",
       label: ""
     }),
     isDisabled: isDisabled,

package/dist/esm/ui/CreateSyncedBlockDropdownItem.js

@@ -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$blockControls2, _states$blockControls3;
       return {
-        menuTriggerBy: (_states$blockControls2 = states.blockControlsState) === null || _states$blockControls2 === void 0 ? void 0 : _states$blockControls2.menuTriggerBy
+        activeNodeType: (_states$blockControls2 = (_states$blockControls3 = states.blockControlsState) === null || _states$blockControls3 === void 0 || (_states$blockControls3 = _states$blockControls3.activeNode) === null || _states$blockControls3 === void 0 ? void 0 : _states$blockControls3.nodeType) !== null && _states$blockControls2 !== void 0 ? _states$blockControls2 : undefined
       };
     }),
-    menuTriggerBy = _useSharedPluginState2.menuTriggerBy;
-  if (menuTriggerBy === 'syncBlock' || menuTriggerBy === 'bodiedSyncBlock') {
+    activeNodeType = _useSharedPluginState2.activeNodeType;
+  if (activeNodeType === 'syncBlock' || activeNodeType === 'bodiedSyncBlock') {
     return /*#__PURE__*/React.createElement(CopySyncedBlockDropdownItem, {
       api: api
     });

package/dist/esm/ui/CreateSyncedBlockItem.js

@@ -4,6 +4,8 @@ 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 Lozenge from '@atlaskit/lozenge';
+import { Flex } from '@atlaskit/primitives/compiled';
 import { canBeConvertedToSyncBlock } from '../pm-plugins/utils/utils';
 export var CreateSyncedBlockItem = function CreateSyncedBlockItem(_ref) {
   var api = _ref.api;
@@ -28,7 +30,13 @@ export var CreateSyncedBlockItem = function CreateSyncedBlockItem(_ref) {
     onClick: onClick,
     isDisabled: isDisabled,
     elemBefore: /*#__PURE__*/React.createElement(BlockSyncedIcon, {
+      size: "small",
       label: ""
     })
-  }, message);
+  }, /*#__PURE__*/React.createElement(Flex, {
+    alignItems: "center",
+    gap: "space.050"
+  }, message, /*#__PURE__*/React.createElement(Lozenge, {
+    appearance: "new"
+  }, intl.formatMessage(syncBlockMessages.newLozenge))));
 };

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.4",
+	"version": "4.2.6",
 	"description": "SyncedBlock plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -38,7 +38,7 @@
 		"@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",