@atlaskit/editor-plugin-expand 4.3.1 → 5.0.1

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/editor-plugin-expand
 
+## 5.0.1
+
+### Patch Changes
+
+- [`5f1d8eb6b1fa2`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/5f1d8eb6b1fa2) -
+  EDITOR-1464 Update toDOM methods to include localId
+- Updated dependencies
+
+## 5.0.0
+
+### Patch Changes
+
+- [`e882e86092666`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/e882e86092666) -
+  [ux] Register expand, layout and code block itmes in block menu. Update panel item.
+- Updated dependencies
+
 ## 4.3.1
 
 ### Patch Changes

package/dist/cjs/legacyExpand/nodeviews/index.js

@@ -23,16 +23,20 @@ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _commands = require("../commands");
 var _ExpandIconButton = require("../ui/ExpandIconButton");
+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; }
 function buildExpandClassName(type, expanded) {
   return "".concat(_styles.expandClassNames.prefix, " ").concat(_styles.expandClassNames.type(type), " ").concat(expanded ? _styles.expandClassNames.expanded : '');
 }
 var toDOM = function toDOM(node, __livePage, intl, titleReadOnly, contentEditable) {
-  return ['div', {
+  return ['div', _objectSpread({
     // prettier-ignore
     'class': buildExpandClassName(node.type.name, __livePage ? !node.attrs.__expanded : node.attrs.__expanded),
     'data-node-type': node.type.name,
     'data-title': node.attrs.title
-  }, ['div', {
+  }, (0, _platformFeatureFlags.fg)('platform_editor_adf_with_localid') && {
+    'data-local-id': node.attrs.localId
+  }), ['div', {
     // prettier-ignore
     'class': _styles.expandClassNames.titleContainer,
     contenteditable: 'false',

package/dist/cjs/legacyExpand/plugin.js

@@ -8,9 +8,12 @@ exports.expandPlugin = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _adfSchema = require("@atlaskit/adf-schema");
 var _analytics = require("@atlaskit/editor-common/analytics");
+var _blockMenu = require("@atlaskit/editor-common/block-menu");
 var _messages = require("@atlaskit/editor-common/messages");
 var _quickInsert = require("@atlaskit/editor-common/quick-insert");
 var _utils = require("@atlaskit/editor-common/utils");
+var _expValEqualsNoExposure = require("@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure");
+var _ExpandBlockMenuItem = require("../ui/ExpandBlockMenuItem");
 var _commands = require("./commands");
 var _keymap = require("./pm-plugins/keymap");
 var _main = require("./pm-plugins/main");
@@ -22,6 +25,19 @@ var expandPlugin = exports.expandPlugin = function expandPlugin(_ref) {
   var _ref$config = _ref.config,
     options = _ref$config === void 0 ? {} : _ref$config,
     api = _ref.api;
+  if ((0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_block_menu', 'isEnabled', true)) {
+    var _api$blockMenu;
+    api === null || api === void 0 || (_api$blockMenu = api.blockMenu) === null || _api$blockMenu === void 0 || _api$blockMenu.actions.registerBlockMenuComponents([{
+      type: 'block-menu-item',
+      key: _blockMenu.FORMAT_EXPAND_MENU_ITEM.key,
+      parent: {
+        type: 'block-menu-section',
+        key: _blockMenu.FORMAT_MENU_ITEM.key,
+        rank: _blockMenu.FORMAT_NESTED_MENU_RANK[_blockMenu.FORMAT_EXPAND_MENU_ITEM.key]
+      },
+      component: (0, _ExpandBlockMenuItem.createExpandBlockMenuItem)(api)
+    }]);
+  }
   return {
     name: 'expand',
     nodes: function nodes() {

package/dist/cjs/singlePlayerExpand/plugin.js

@@ -8,10 +8,13 @@ exports.expandPlugin = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _adfSchema = require("@atlaskit/adf-schema");
 var _analytics = require("@atlaskit/editor-common/analytics");
+var _blockMenu = require("@atlaskit/editor-common/block-menu");
 var _messages = require("@atlaskit/editor-common/messages");
 var _quickInsert = require("@atlaskit/editor-common/quick-insert");
 var _utils = require("@atlaskit/editor-common/utils");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _expValEqualsNoExposure = require("@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure");
+var _ExpandBlockMenuItem = require("../ui/ExpandBlockMenuItem");
 var _commands = require("./commands");
 var _keymap = require("./pm-plugins/keymap");
 var _main = require("./pm-plugins/main");
@@ -23,6 +26,19 @@ var expandPlugin = exports.expandPlugin = function expandPlugin(_ref) {
   var _ref$config = _ref.config,
     options = _ref$config === void 0 ? {} : _ref$config,
     api = _ref.api;
+  if ((0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_block_menu', 'isEnabled', true)) {
+    var _api$blockMenu;
+    api === null || api === void 0 || (_api$blockMenu = api.blockMenu) === null || _api$blockMenu === void 0 || _api$blockMenu.actions.registerBlockMenuComponents([{
+      type: 'block-menu-item',
+      key: _blockMenu.FORMAT_EXPAND_MENU_ITEM.key,
+      parent: {
+        type: 'block-menu-section',
+        key: _blockMenu.FORMAT_MENU_ITEM.key,
+        rank: _blockMenu.FORMAT_NESTED_MENU_RANK[_blockMenu.FORMAT_EXPAND_MENU_ITEM.key]
+      },
+      component: (0, _ExpandBlockMenuItem.createExpandBlockMenuItem)(api)
+    }]);
+  }
   return {
     name: 'expand',
     nodes: function nodes() {

package/dist/cjs/singlePlayerExpand/ui/NodeView.js

@@ -1,23 +1,30 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.toDOM = exports.buildExpandClassName = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _expand = require("@atlaskit/editor-common/expand");
 var _styles = require("@atlaskit/editor-common/styles");
 var _ui = require("@atlaskit/editor-common/ui");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+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 buildExpandClassName = exports.buildExpandClassName = function buildExpandClassName(type, expanded) {
   return "".concat(_styles.expandClassNames.prefix, " ").concat(_styles.expandClassNames.type(type), " ").concat(expanded ? _styles.expandClassNames.expanded : '');
 };
 var toDOM = exports.toDOM = function toDOM(node, __livePage, intl, titleReadOnly, contentEditable) {
   var _expandedState$get;
-  return ['div', {
+  return ['div', _objectSpread({
     // prettier-ignore
     'class': buildExpandClassName(node.type.name, (_expandedState$get = _expand.expandedState.get(node)) !== null && _expandedState$get !== void 0 ? _expandedState$get : false),
     'data-node-type': node.type.name,
     'data-title': node.attrs.title
-  }, ['div', {
+  }, (0, _platformFeatureFlags.fg)('platform_editor_adf_with_localid') && {
+    'data-local-id': node.attrs.localId
+  }), ['div', {
     // prettier-ignore
     'class': _styles.expandClassNames.titleContainer,
     contenteditable: 'false',

package/dist/cjs/ui/ExpandBlockMenuItem.js

@@ -0,0 +1,50 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createExpandBlockMenuItem = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactIntlNext = require("react-intl-next");
+var _messages = require("@atlaskit/editor-common/messages");
+var _useSharedPluginStateSelector = require("@atlaskit/editor-common/use-shared-plugin-state-selector");
+var _state = require("@atlaskit/editor-prosemirror/state");
+var _editorToolbar = require("@atlaskit/editor-toolbar");
+var _expandElement = _interopRequireDefault(require("@atlaskit/icon-lab/core/expand-element"));
+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 nodeName = 'expand';
+var ExpandBlockMenuItem = function ExpandBlockMenuItem(_ref) {
+  var api = _ref.api;
+  var _useIntl = (0, _reactIntlNext.useIntl)(),
+    formatMessage = _useIntl.formatMessage;
+  var selection = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'selection.selection');
+  var isExpandSelected = (0, _react.useMemo)(function () {
+    if (!selection) {
+      return false;
+    }
+    if (selection instanceof _state.NodeSelection) {
+      return selection.node.type.name === nodeName;
+    }
+    return false;
+  }, [selection]);
+  var handleClick = function handleClick() {
+    var _api$blockMenu;
+    api === null || api === void 0 || api.core.actions.execute(api === null || api === void 0 || (_api$blockMenu = api.blockMenu) === null || _api$blockMenu === void 0 ? void 0 : _api$blockMenu.commands.formatNode(nodeName));
+  };
+  return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownItem, {
+    onClick: handleClick,
+    isSelected: isExpandSelected,
+    elemBefore: /*#__PURE__*/_react.default.createElement(_expandElement.default, {
+      label: ""
+    })
+  }, formatMessage(_messages.toolbarInsertBlockMessages.expand));
+};
+var createExpandBlockMenuItem = exports.createExpandBlockMenuItem = function createExpandBlockMenuItem(api) {
+  return function () {
+    return /*#__PURE__*/_react.default.createElement(ExpandBlockMenuItem, {
+      api: api
+    });
+  };
+};

package/dist/es2019/legacyExpand/nodeviews/index.js

@@ -20,7 +20,10 @@ const toDOM = (node, __livePage, intl, titleReadOnly, contentEditable) => ['div'
   // prettier-ignore
   'class': buildExpandClassName(node.type.name, __livePage ? !node.attrs.__expanded : node.attrs.__expanded),
   'data-node-type': node.type.name,
-  'data-title': node.attrs.title
+  'data-title': node.attrs.title,
+  ...(fg('platform_editor_adf_with_localid') && {
+    'data-local-id': node.attrs.localId
+  })
 }, ['div', {
   // prettier-ignore
   'class': expandClassNames.titleContainer,

package/dist/es2019/legacyExpand/plugin.js

@@ -1,9 +1,12 @@
 import React from 'react';
 import { expandWithNestedExpand, nestedExpand } from '@atlaskit/adf-schema';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
+import { FORMAT_MENU_ITEM, FORMAT_EXPAND_MENU_ITEM, FORMAT_NESTED_MENU_RANK } from '@atlaskit/editor-common/block-menu';
 import { toolbarInsertBlockMessages as messages } from '@atlaskit/editor-common/messages';
 import { IconExpand } from '@atlaskit/editor-common/quick-insert';
 import { createWrapSelectionTransaction } from '@atlaskit/editor-common/utils';
+import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
+import { createExpandBlockMenuItem } from '../ui/ExpandBlockMenuItem';
 import { createExpandNode, insertExpand, insertExpandWithInputMethod, toggleExpandWithMatch } from './commands';
 import { expandKeymap } from './pm-plugins/keymap';
 import { createPlugin } from './pm-plugins/main';
@@ -16,6 +19,19 @@ export let expandPlugin = ({
   api
 }) => {
   var _api$analytics, _api$analytics2;
+  if (expValEqualsNoExposure('platform_editor_block_menu', 'isEnabled', true)) {
+    var _api$blockMenu;
+    api === null || api === void 0 ? void 0 : (_api$blockMenu = api.blockMenu) === null || _api$blockMenu === void 0 ? void 0 : _api$blockMenu.actions.registerBlockMenuComponents([{
+      type: 'block-menu-item',
+      key: FORMAT_EXPAND_MENU_ITEM.key,
+      parent: {
+        type: 'block-menu-section',
+        key: FORMAT_MENU_ITEM.key,
+        rank: FORMAT_NESTED_MENU_RANK[FORMAT_EXPAND_MENU_ITEM.key]
+      },
+      component: createExpandBlockMenuItem(api)
+    }]);
+  }
   return {
     name: 'expand',
     nodes() {

package/dist/es2019/singlePlayerExpand/plugin.js

@@ -1,10 +1,13 @@
 import React from 'react';
 import { expandWithNestedExpand, expandWithNestedExpandLocalId, nestedExpand, nestedExpandWithLocalId } from '@atlaskit/adf-schema';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
+import { FORMAT_MENU_ITEM, FORMAT_EXPAND_MENU_ITEM, FORMAT_NESTED_MENU_RANK } from '@atlaskit/editor-common/block-menu';
 import { toolbarInsertBlockMessages as messages } from '@atlaskit/editor-common/messages';
 import { IconExpand } from '@atlaskit/editor-common/quick-insert';
 import { createWrapSelectionTransaction } from '@atlaskit/editor-common/utils';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
+import { createExpandBlockMenuItem } from '../ui/ExpandBlockMenuItem';
 import { createExpandNode, insertExpand, insertExpandWithInputMethod, toggleExpandWithMatch } from './commands';
 import { expandKeymap } from './pm-plugins/keymap';
 import { createPlugin } from './pm-plugins/main';
@@ -17,6 +20,19 @@ export let expandPlugin = ({
   api
 }) => {
   var _api$analytics, _api$analytics2;
+  if (expValEqualsNoExposure('platform_editor_block_menu', 'isEnabled', true)) {
+    var _api$blockMenu;
+    api === null || api === void 0 ? void 0 : (_api$blockMenu = api.blockMenu) === null || _api$blockMenu === void 0 ? void 0 : _api$blockMenu.actions.registerBlockMenuComponents([{
+      type: 'block-menu-item',
+      key: FORMAT_EXPAND_MENU_ITEM.key,
+      parent: {
+        type: 'block-menu-section',
+        key: FORMAT_MENU_ITEM.key,
+        rank: FORMAT_NESTED_MENU_RANK[FORMAT_EXPAND_MENU_ITEM.key]
+      },
+      component: createExpandBlockMenuItem(api)
+    }]);
+  }
   return {
     name: 'expand',
     nodes() {

package/dist/es2019/singlePlayerExpand/ui/NodeView.js

@@ -1,6 +1,7 @@
 import { expandedState } from '@atlaskit/editor-common/expand';
 import { expandClassNames } from '@atlaskit/editor-common/styles';
 import { expandMessages } from '@atlaskit/editor-common/ui';
+import { fg } from '@atlaskit/platform-feature-flags';
 export const buildExpandClassName = (type, expanded) => {
   return `${expandClassNames.prefix} ${expandClassNames.type(type)} ${expanded ? expandClassNames.expanded : ''}`;
 };
@@ -10,7 +11,10 @@ export const toDOM = (node, __livePage, intl, titleReadOnly, contentEditable) =>
     // prettier-ignore
     'class': buildExpandClassName(node.type.name, (_expandedState$get = expandedState.get(node)) !== null && _expandedState$get !== void 0 ? _expandedState$get : false),
     'data-node-type': node.type.name,
-    'data-title': node.attrs.title
+    'data-title': node.attrs.title,
+    ...(fg('platform_editor_adf_with_localid') && {
+      'data-local-id': node.attrs.localId
+    })
   }, ['div', {
     // prettier-ignore
     'class': expandClassNames.titleContainer,

package/dist/es2019/ui/ExpandBlockMenuItem.js

@@ -0,0 +1,41 @@
+import React, { useMemo } from 'react';
+import { useIntl } from 'react-intl-next';
+import { toolbarInsertBlockMessages } from '@atlaskit/editor-common/messages';
+import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
+import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
+import { ToolbarDropdownItem } from '@atlaskit/editor-toolbar';
+import ExpandElementIcon from '@atlaskit/icon-lab/core/expand-element';
+const nodeName = 'expand';
+const ExpandBlockMenuItem = ({
+  api
+}) => {
+  const {
+    formatMessage
+  } = useIntl();
+  const selection = useSharedPluginStateSelector(api, 'selection.selection');
+  const isExpandSelected = useMemo(() => {
+    if (!selection) {
+      return false;
+    }
+    if (selection instanceof NodeSelection) {
+      return selection.node.type.name === nodeName;
+    }
+    return false;
+  }, [selection]);
+  const handleClick = () => {
+    var _api$blockMenu;
+    api === null || api === void 0 ? void 0 : api.core.actions.execute(api === null || api === void 0 ? void 0 : (_api$blockMenu = api.blockMenu) === null || _api$blockMenu === void 0 ? void 0 : _api$blockMenu.commands.formatNode(nodeName));
+  };
+  return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
+    onClick: handleClick,
+    isSelected: isExpandSelected,
+    elemBefore: /*#__PURE__*/React.createElement(ExpandElementIcon, {
+      label: ""
+    })
+  }, formatMessage(toolbarInsertBlockMessages.expand));
+};
+export const createExpandBlockMenuItem = api => {
+  return () => /*#__PURE__*/React.createElement(ExpandBlockMenuItem, {
+    api: api
+  });
+};

package/dist/esm/legacyExpand/nodeviews/index.js

@@ -1,6 +1,8 @@
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
 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 uuid from 'uuid/v4';
 import { keyName } from 'w3c-keyname';
@@ -19,12 +21,14 @@ function buildExpandClassName(type, expanded) {
   return "".concat(expandClassNames.prefix, " ").concat(expandClassNames.type(type), " ").concat(expanded ? expandClassNames.expanded : '');
 }
 var toDOM = function toDOM(node, __livePage, intl, titleReadOnly, contentEditable) {
-  return ['div', {
+  return ['div', _objectSpread({
     // prettier-ignore
     'class': buildExpandClassName(node.type.name, __livePage ? !node.attrs.__expanded : node.attrs.__expanded),
     'data-node-type': node.type.name,
     'data-title': node.attrs.title
-  }, ['div', {
+  }, fg('platform_editor_adf_with_localid') && {
+    'data-local-id': node.attrs.localId
+  }), ['div', {
     // prettier-ignore
     'class': expandClassNames.titleContainer,
     contenteditable: 'false',

package/dist/esm/legacyExpand/plugin.js

@@ -1,9 +1,12 @@
 import React from 'react';
 import { expandWithNestedExpand, nestedExpand } from '@atlaskit/adf-schema';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
+import { FORMAT_MENU_ITEM, FORMAT_EXPAND_MENU_ITEM, FORMAT_NESTED_MENU_RANK } from '@atlaskit/editor-common/block-menu';
 import { toolbarInsertBlockMessages as messages } from '@atlaskit/editor-common/messages';
 import { IconExpand } from '@atlaskit/editor-common/quick-insert';
 import { createWrapSelectionTransaction } from '@atlaskit/editor-common/utils';
+import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
+import { createExpandBlockMenuItem } from '../ui/ExpandBlockMenuItem';
 import { createExpandNode, insertExpand, insertExpandWithInputMethod, toggleExpandWithMatch as _toggleExpandWithMatch } from './commands';
 import { expandKeymap } from './pm-plugins/keymap';
 import { createPlugin } from './pm-plugins/main';
@@ -16,6 +19,19 @@ export var expandPlugin = function expandPlugin(_ref) {
   var _ref$config = _ref.config,
     options = _ref$config === void 0 ? {} : _ref$config,
     api = _ref.api;
+  if (expValEqualsNoExposure('platform_editor_block_menu', 'isEnabled', true)) {
+    var _api$blockMenu;
+    api === null || api === void 0 || (_api$blockMenu = api.blockMenu) === null || _api$blockMenu === void 0 || _api$blockMenu.actions.registerBlockMenuComponents([{
+      type: 'block-menu-item',
+      key: FORMAT_EXPAND_MENU_ITEM.key,
+      parent: {
+        type: 'block-menu-section',
+        key: FORMAT_MENU_ITEM.key,
+        rank: FORMAT_NESTED_MENU_RANK[FORMAT_EXPAND_MENU_ITEM.key]
+      },
+      component: createExpandBlockMenuItem(api)
+    }]);
+  }
   return {
     name: 'expand',
     nodes: function nodes() {

package/dist/esm/singlePlayerExpand/plugin.js

@@ -1,10 +1,13 @@
 import React from 'react';
 import { expandWithNestedExpand, expandWithNestedExpandLocalId, nestedExpand, nestedExpandWithLocalId } from '@atlaskit/adf-schema';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
+import { FORMAT_MENU_ITEM, FORMAT_EXPAND_MENU_ITEM, FORMAT_NESTED_MENU_RANK } from '@atlaskit/editor-common/block-menu';
 import { toolbarInsertBlockMessages as messages } from '@atlaskit/editor-common/messages';
 import { IconExpand } from '@atlaskit/editor-common/quick-insert';
 import { createWrapSelectionTransaction } from '@atlaskit/editor-common/utils';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
+import { createExpandBlockMenuItem } from '../ui/ExpandBlockMenuItem';
 import { createExpandNode, insertExpand, insertExpandWithInputMethod, toggleExpandWithMatch as _toggleExpandWithMatch } from './commands';
 import { expandKeymap } from './pm-plugins/keymap';
 import { createPlugin } from './pm-plugins/main';
@@ -17,6 +20,19 @@ export var expandPlugin = function expandPlugin(_ref) {
   var _ref$config = _ref.config,
     options = _ref$config === void 0 ? {} : _ref$config,
     api = _ref.api;
+  if (expValEqualsNoExposure('platform_editor_block_menu', 'isEnabled', true)) {
+    var _api$blockMenu;
+    api === null || api === void 0 || (_api$blockMenu = api.blockMenu) === null || _api$blockMenu === void 0 || _api$blockMenu.actions.registerBlockMenuComponents([{
+      type: 'block-menu-item',
+      key: FORMAT_EXPAND_MENU_ITEM.key,
+      parent: {
+        type: 'block-menu-section',
+        key: FORMAT_MENU_ITEM.key,
+        rank: FORMAT_NESTED_MENU_RANK[FORMAT_EXPAND_MENU_ITEM.key]
+      },
+      component: createExpandBlockMenuItem(api)
+    }]);
+  }
   return {
     name: 'expand',
     nodes: function nodes() {

package/dist/esm/singlePlayerExpand/ui/NodeView.js

@@ -1,17 +1,23 @@
+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 { expandedState } from '@atlaskit/editor-common/expand';
 import { expandClassNames } from '@atlaskit/editor-common/styles';
 import { expandMessages } from '@atlaskit/editor-common/ui';
+import { fg } from '@atlaskit/platform-feature-flags';
 export var buildExpandClassName = function buildExpandClassName(type, expanded) {
   return "".concat(expandClassNames.prefix, " ").concat(expandClassNames.type(type), " ").concat(expanded ? expandClassNames.expanded : '');
 };
 export var toDOM = function toDOM(node, __livePage, intl, titleReadOnly, contentEditable) {
   var _expandedState$get;
-  return ['div', {
+  return ['div', _objectSpread({
     // prettier-ignore
     'class': buildExpandClassName(node.type.name, (_expandedState$get = expandedState.get(node)) !== null && _expandedState$get !== void 0 ? _expandedState$get : false),
     'data-node-type': node.type.name,
     'data-title': node.attrs.title
-  }, ['div', {
+  }, fg('platform_editor_adf_with_localid') && {
+    'data-local-id': node.attrs.localId
+  }), ['div', {
     // prettier-ignore
     'class': expandClassNames.titleContainer,
     contenteditable: 'false',

package/dist/esm/ui/ExpandBlockMenuItem.js

@@ -0,0 +1,41 @@
+import React, { useMemo } from 'react';
+import { useIntl } from 'react-intl-next';
+import { toolbarInsertBlockMessages } from '@atlaskit/editor-common/messages';
+import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
+import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
+import { ToolbarDropdownItem } from '@atlaskit/editor-toolbar';
+import ExpandElementIcon from '@atlaskit/icon-lab/core/expand-element';
+var nodeName = 'expand';
+var ExpandBlockMenuItem = function ExpandBlockMenuItem(_ref) {
+  var api = _ref.api;
+  var _useIntl = useIntl(),
+    formatMessage = _useIntl.formatMessage;
+  var selection = useSharedPluginStateSelector(api, 'selection.selection');
+  var isExpandSelected = useMemo(function () {
+    if (!selection) {
+      return false;
+    }
+    if (selection instanceof NodeSelection) {
+      return selection.node.type.name === nodeName;
+    }
+    return false;
+  }, [selection]);
+  var handleClick = function handleClick() {
+    var _api$blockMenu;
+    api === null || api === void 0 || api.core.actions.execute(api === null || api === void 0 || (_api$blockMenu = api.blockMenu) === null || _api$blockMenu === void 0 ? void 0 : _api$blockMenu.commands.formatNode(nodeName));
+  };
+  return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
+    onClick: handleClick,
+    isSelected: isExpandSelected,
+    elemBefore: /*#__PURE__*/React.createElement(ExpandElementIcon, {
+      label: ""
+    })
+  }, formatMessage(toolbarInsertBlockMessages.expand));
+};
+export var createExpandBlockMenuItem = function createExpandBlockMenuItem(api) {
+  return function () {
+    return /*#__PURE__*/React.createElement(ExpandBlockMenuItem, {
+      api: api
+    });
+  };
+};

package/dist/types/types.d.ts

@@ -1,6 +1,7 @@
 import { type INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import type { EditorAppearance, EditorCommand, LongPressSelectionPluginOptions, NextEditorPlugin, OptionalPlugin } from '@atlaskit/editor-common/types';
 import type { AnalyticsPlugin } from '@atlaskit/editor-plugin-analytics';
+import type { BlockMenuPlugin } from '@atlaskit/editor-plugin-block-menu';
 import type { DecorationsPlugin } from '@atlaskit/editor-plugin-decorations';
 import type { EditorDisabledPlugin } from '@atlaskit/editor-plugin-editor-disabled';
 import type { EditorViewModePlugin } from '@atlaskit/editor-plugin-editor-viewmode';
@@ -46,7 +47,8 @@ export type ExpandPluginDependencies = [
     OptionalPlugin<SelectionMarkerPlugin>,
     OptionalPlugin<EditorDisabledPlugin>,
     OptionalPlugin<FeatureFlagsPlugin>,
-    OptionalPlugin<EditorViewModePlugin>
+    OptionalPlugin<EditorViewModePlugin>,
+    OptionalPlugin<BlockMenuPlugin>
 ];
 export type ExpandPlugin = NextEditorPlugin<'expand', {
     actions: {

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

@@ -0,0 +1,4 @@
+import React from 'react';
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import type { ExpandPlugin } from '../types';
+export declare const createExpandBlockMenuItem: (api: ExtractInjectionAPI<ExpandPlugin>) => () => React.JSX.Element;

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

@@ -1,6 +1,7 @@
 import { type INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import type { EditorAppearance, EditorCommand, LongPressSelectionPluginOptions, NextEditorPlugin, OptionalPlugin } from '@atlaskit/editor-common/types';
 import type { AnalyticsPlugin } from '@atlaskit/editor-plugin-analytics';
+import type { BlockMenuPlugin } from '@atlaskit/editor-plugin-block-menu';
 import type { DecorationsPlugin } from '@atlaskit/editor-plugin-decorations';
 import type { EditorDisabledPlugin } from '@atlaskit/editor-plugin-editor-disabled';
 import type { EditorViewModePlugin } from '@atlaskit/editor-plugin-editor-viewmode';
@@ -46,7 +47,8 @@ export type ExpandPluginDependencies = [
     OptionalPlugin<SelectionMarkerPlugin>,
     OptionalPlugin<EditorDisabledPlugin>,
     OptionalPlugin<FeatureFlagsPlugin>,
-    OptionalPlugin<EditorViewModePlugin>
+    OptionalPlugin<EditorViewModePlugin>,
+    OptionalPlugin<BlockMenuPlugin>
 ];
 export type ExpandPlugin = NextEditorPlugin<'expand', {
     actions: {

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

@@ -0,0 +1,4 @@
+import React from 'react';
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import type { ExpandPlugin } from '../types';
+export declare const createExpandBlockMenuItem: (api: ExtractInjectionAPI<ExpandPlugin>) => () => React.JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-expand",
-	"version": "4.3.1",
+	"version": "5.0.1",
 	"description": "Expand plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -31,18 +31,21 @@
 	"dependencies": {
 		"@atlaskit/adf-schema": "^50.2.3",
 		"@atlaskit/button": "^23.4.0",
-		"@atlaskit/editor-plugin-analytics": "^3.0.0",
-		"@atlaskit/editor-plugin-decorations": "^3.1.0",
-		"@atlaskit/editor-plugin-editor-disabled": "^3.0.0",
-		"@atlaskit/editor-plugin-editor-viewmode": "^5.0.0",
-		"@atlaskit/editor-plugin-selection": "^3.2.0",
-		"@atlaskit/editor-plugin-selection-marker": "^3.0.0",
+		"@atlaskit/editor-plugin-analytics": "^4.0.0",
+		"@atlaskit/editor-plugin-block-menu": "^1.0.0",
+		"@atlaskit/editor-plugin-decorations": "^4.0.0",
+		"@atlaskit/editor-plugin-editor-disabled": "^4.0.0",
+		"@atlaskit/editor-plugin-editor-viewmode": "^6.0.0",
+		"@atlaskit/editor-plugin-selection": "^4.0.0",
+		"@atlaskit/editor-plugin-selection-marker": "^4.0.0",
 		"@atlaskit/editor-prosemirror": "7.0.0",
 		"@atlaskit/editor-shared-styles": "^3.6.0",
 		"@atlaskit/editor-tables": "^2.9.0",
+		"@atlaskit/editor-toolbar": "^0.6.0",
 		"@atlaskit/icon": "^28.1.0",
+		"@atlaskit/icon-lab": "^5.7.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
-		"@atlaskit/tmp-editor-statsig": "^11.9.0",
+		"@atlaskit/tmp-editor-statsig": "^12.0.0",
 		"@atlaskit/tokens": "^6.1.0",
 		"@atlaskit/tooltip": "^20.4.0",
 		"@babel/runtime": "^7.0.0",
@@ -51,19 +54,19 @@
 		"w3c-keyname": "^2.1.8"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^107.33.0",
+		"@atlaskit/editor-common": "^108.0.0",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",
 		"react-intl-next": "npm:react-intl@^5.18.1"
 	},
 	"devDependencies": {
 		"@atlaskit/analytics-next": "^11.1.0",
-		"@atlaskit/editor-plugin-content-insertion": "^3.1.0",
-		"@atlaskit/editor-plugin-guideline": "^3.0.0",
-		"@atlaskit/editor-plugin-quick-insert": "^3.0.0",
-		"@atlaskit/editor-plugin-table": "^12.3.0",
-		"@atlaskit/editor-plugin-type-ahead": "^3.1.0",
-		"@atlaskit/editor-plugin-width": "^4.0.0",
+		"@atlaskit/editor-plugin-content-insertion": "^4.0.0",
+		"@atlaskit/editor-plugin-guideline": "^4.0.0",
+		"@atlaskit/editor-plugin-quick-insert": "^4.0.0",
+		"@atlaskit/editor-plugin-table": "^13.0.0",
+		"@atlaskit/editor-plugin-type-ahead": "^4.0.0",
+		"@atlaskit/editor-plugin-width": "^5.0.0",
 		"@testing-library/react": "^13.4.0",
 		"react-test-renderer": "^18.2.0"
 	},