@atlaskit/editor-plugin-code-block-advanced 3.2.4 → 4.0.1

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @atlaskit/editor-plugin-code-block-advanced
 
+## 4.0.1
+
+### Patch Changes
+
+- Updated dependencies
+
+## 4.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
+
 ## 3.2.4
 
 ### Patch Changes

package/afm-cc/tsconfig.json

@@ -22,6 +22,9 @@
 		"../src/**/stories/**/*"
 	],
 	"references": [
+		{
+			"path": "../../editor-plugin-block-menu/afm-cc/tsconfig.json"
+		},
 		{
 			"path": "../../editor-plugin-code-block/afm-cc/tsconfig.json"
 		},
@@ -37,6 +40,12 @@
 		{
 			"path": "../../editor-plugin-selection-marker/afm-cc/tsconfig.json"
 		},
+		{
+			"path": "../../editor-toolbar/afm-cc/tsconfig.json"
+		},
+		{
+			"path": "../../../design-system/icon/afm-cc/tsconfig.json"
+		},
 		{
 			"path": "../../../platform/feature-flags/afm-cc/tsconfig.json"
 		},

package/afm-jira/tsconfig.json

@@ -22,6 +22,9 @@
 		"../src/**/stories/**/*"
 	],
 	"references": [
+		{
+			"path": "../../editor-plugin-block-menu/afm-jira/tsconfig.json"
+		},
 		{
 			"path": "../../editor-plugin-code-block/afm-jira/tsconfig.json"
 		},
@@ -37,6 +40,12 @@
 		{
 			"path": "../../editor-plugin-selection-marker/afm-jira/tsconfig.json"
 		},
+		{
+			"path": "../../editor-toolbar/afm-jira/tsconfig.json"
+		},
+		{
+			"path": "../../../design-system/icon/afm-jira/tsconfig.json"
+		},
 		{
 			"path": "../../../platform/feature-flags/afm-jira/tsconfig.json"
 		},

package/afm-post-office/tsconfig.json

@@ -22,6 +22,9 @@
 		"../src/**/stories/**/*"
 	],
 	"references": [
+		{
+			"path": "../../editor-plugin-block-menu/afm-post-office/tsconfig.json"
+		},
 		{
 			"path": "../../editor-plugin-code-block/afm-post-office/tsconfig.json"
 		},
@@ -37,6 +40,12 @@
 		{
 			"path": "../../editor-plugin-selection-marker/afm-post-office/tsconfig.json"
 		},
+		{
+			"path": "../../editor-toolbar/afm-post-office/tsconfig.json"
+		},
+		{
+			"path": "../../../design-system/icon/afm-post-office/tsconfig.json"
+		},
 		{
 			"path": "../../../platform/feature-flags/afm-post-office/tsconfig.json"
 		},

package/afm-townsquare/tsconfig.json

@@ -22,6 +22,9 @@
 		"../src/**/stories/**/*"
 	],
 	"references": [
+		{
+			"path": "../../editor-plugin-block-menu/afm-townsquare/tsconfig.json"
+		},
 		{
 			"path": "../../editor-plugin-code-block/afm-townsquare/tsconfig.json"
 		},
@@ -37,6 +40,12 @@
 		{
 			"path": "../../editor-plugin-selection-marker/afm-townsquare/tsconfig.json"
 		},
+		{
+			"path": "../../editor-toolbar/afm-townsquare/tsconfig.json"
+		},
+		{
+			"path": "../../../design-system/icon/afm-townsquare/tsconfig.json"
+		},
 		{
 			"path": "../../../platform/feature-flags/afm-townsquare/tsconfig.json"
 		},

package/dist/cjs/codeBlockAdvancedPlugin.js

@@ -4,11 +4,27 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.codeBlockAdvancedPlugin = void 0;
+var _blockMenu = require("@atlaskit/editor-common/block-menu");
+var _expValEqualsNoExposure = require("@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure");
 var _codeBlockNodeWithToDOMFixed = require("./nodeviews/codeBlockNodeWithToDOMFixed");
 var _main = require("./pm-plugins/main");
+var _createCodeBlockMenuItem = require("./ui/createCodeBlockMenuItem");
 var codeBlockAdvancedPlugin = exports.codeBlockAdvancedPlugin = function codeBlockAdvancedPlugin(_ref) {
   var api = _ref.api,
     config = _ref.config;
+  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_CODE_BLOCK_MENU_ITEM.key,
+      parent: {
+        type: 'block-menu-section',
+        key: _blockMenu.FORMAT_MENU_ITEM.key,
+        rank: _blockMenu.FORMAT_NESTED_MENU_RANK[_blockMenu.FORMAT_CODE_BLOCK_MENU_ITEM.key]
+      },
+      component: (0, _createCodeBlockMenuItem.createCodeBlockMenuItem)(api)
+    }]);
+  }
   return {
     name: 'codeBlockAdvanced',
     nodes: function nodes() {

package/dist/cjs/nodeviews/codeBlockNodeWithToDOMFixed.js

@@ -9,6 +9,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _adfSchema = require("@atlaskit/adf-schema");
 var _lazyNodeView = require("@atlaskit/editor-common/lazy-node-view");
 var _styles = require("@atlaskit/editor-common/styles");
+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 codeBlockClassNames = {
@@ -67,12 +68,14 @@ var _toDOM = function toDOM(node, formattedAriaLabel, config) {
     'data-label': content
   }]], ['div', {
     class: codeBlockClassNames.content
-  }, ['code', {
+  }, ['code', _objectSpread({
     'data-language': node.attrs.language || '',
     spellcheck: 'false',
     'data-testid': 'code-block--code',
     'aria-label': formattedAriaLabel
-  }, 0]]], ['div', {
+  }, (0, _platformFeatureFlags.fg)('platform_editor_adf_with_localid') && {
+    'data-local-id': node.attrs.localId
+  }), 0]]], ['div', {
     class: codeBlockClassNames.end,
     contenteditable: 'false'
   }]];

package/dist/cjs/ui/createCodeBlockMenuItem.js

@@ -0,0 +1,51 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createCodeBlockMenuItem = 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 _angleBrackets = _interopRequireDefault(require("@atlaskit/icon/core/angle-brackets"));
+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 = 'codeBlock';
+var CodeBlockMenuItem = function CodeBlockMenuItem(_ref) {
+  var api = _ref.api;
+  var _useIntl = (0, _reactIntlNext.useIntl)(),
+    formatMessage = _useIntl.formatMessage;
+  var selection = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'selection.selection');
+  var isCodeBlockSelected = (0, _react.useMemo)(function () {
+    if (!selection) {
+      return false;
+    }
+    if (selection instanceof _state.NodeSelection) {
+      // Note: we are checking for any type of panel, not just of type infopanel
+      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: isCodeBlockSelected,
+    elemBefore: /*#__PURE__*/_react.default.createElement(_angleBrackets.default, {
+      label: ""
+    })
+  }, formatMessage(_messages.blockMenuMessages.codeBlock));
+};
+var createCodeBlockMenuItem = exports.createCodeBlockMenuItem = function createCodeBlockMenuItem(api) {
+  return function () {
+    return /*#__PURE__*/_react.default.createElement(CodeBlockMenuItem, {
+      api: api
+    });
+  };
+};

package/dist/es2019/codeBlockAdvancedPlugin.js

@@ -1,33 +1,51 @@
+import { FORMAT_MENU_ITEM, FORMAT_CODE_BLOCK_MENU_ITEM, FORMAT_NESTED_MENU_RANK } from '@atlaskit/editor-common/block-menu';
+import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
 import { codeBlockNodeWithFixedToDOM } from './nodeviews/codeBlockNodeWithToDOMFixed';
 import { createPlugin } from './pm-plugins/main';
+import { createCodeBlockMenuItem } from './ui/createCodeBlockMenuItem';
 export const codeBlockAdvancedPlugin = ({
   api,
   config
-}) => ({
-  name: 'codeBlockAdvanced',
-  nodes() {
-    var _config$allowCodeFold;
-    return [{
-      name: 'codeBlock',
-      node: codeBlockNodeWithFixedToDOM({
-        allowCodeFolding: (_config$allowCodeFold = config === null || config === void 0 ? void 0 : config.allowCodeFolding) !== null && _config$allowCodeFold !== void 0 ? _config$allowCodeFold : false
-      })
-    }];
-  },
-  pmPlugins() {
-    return [{
-      name: 'codeBlockAdvancedPlugin',
-      plugin: ({
-        getIntl
-      }) => {
-        var _config$extensions, _config$allowCodeFold2;
-        return createPlugin({
-          api,
-          extensions: (_config$extensions = config === null || config === void 0 ? void 0 : config.extensions) !== null && _config$extensions !== void 0 ? _config$extensions : [],
-          allowCodeFolding: (_config$allowCodeFold2 = config === null || config === void 0 ? void 0 : config.allowCodeFolding) !== null && _config$allowCodeFold2 !== void 0 ? _config$allowCodeFold2 : false,
-          getIntl
-        });
-      }
-    }];
+}) => {
+  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_CODE_BLOCK_MENU_ITEM.key,
+      parent: {
+        type: 'block-menu-section',
+        key: FORMAT_MENU_ITEM.key,
+        rank: FORMAT_NESTED_MENU_RANK[FORMAT_CODE_BLOCK_MENU_ITEM.key]
+      },
+      component: createCodeBlockMenuItem(api)
+    }]);
   }
-});
+  return {
+    name: 'codeBlockAdvanced',
+    nodes() {
+      var _config$allowCodeFold;
+      return [{
+        name: 'codeBlock',
+        node: codeBlockNodeWithFixedToDOM({
+          allowCodeFolding: (_config$allowCodeFold = config === null || config === void 0 ? void 0 : config.allowCodeFolding) !== null && _config$allowCodeFold !== void 0 ? _config$allowCodeFold : false
+        })
+      }];
+    },
+    pmPlugins() {
+      return [{
+        name: 'codeBlockAdvancedPlugin',
+        plugin: ({
+          getIntl
+        }) => {
+          var _config$extensions, _config$allowCodeFold2;
+          return createPlugin({
+            api,
+            extensions: (_config$extensions = config === null || config === void 0 ? void 0 : config.extensions) !== null && _config$extensions !== void 0 ? _config$extensions : [],
+            allowCodeFolding: (_config$allowCodeFold2 = config === null || config === void 0 ? void 0 : config.allowCodeFolding) !== null && _config$allowCodeFold2 !== void 0 ? _config$allowCodeFold2 : false,
+            getIntl
+          });
+        }
+      }];
+    }
+  };
+};

package/dist/es2019/nodeviews/codeBlockNodeWithToDOMFixed.js

@@ -1,6 +1,7 @@
 import { codeBlock } from '@atlaskit/adf-schema';
 import { convertToInlineCss } from '@atlaskit/editor-common/lazy-node-view';
 import { CodeBlockSharedCssClassName } from '@atlaskit/editor-common/styles';
+import { fg } from '@atlaskit/platform-feature-flags';
 const codeBlockClassNames = {
   container: CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER,
   start: CodeBlockSharedCssClassName.CODEBLOCK_START,
@@ -59,7 +60,10 @@ const toDOM = (node, formattedAriaLabel, config) => {
     'data-language': node.attrs.language || '',
     spellcheck: 'false',
     'data-testid': 'code-block--code',
-    'aria-label': formattedAriaLabel
+    'aria-label': formattedAriaLabel,
+    ...(fg('platform_editor_adf_with_localid') && {
+      'data-local-id': node.attrs.localId
+    })
   }, 0]]], ['div', {
     class: codeBlockClassNames.end,
     contenteditable: 'false'

package/dist/es2019/ui/createCodeBlockMenuItem.js

@@ -0,0 +1,42 @@
+import React, { useMemo } from 'react';
+import { useIntl } from 'react-intl-next';
+import { blockMenuMessages } 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 AngleBracketsIcon from '@atlaskit/icon/core/angle-brackets';
+const nodeName = 'codeBlock';
+const CodeBlockMenuItem = ({
+  api
+}) => {
+  const {
+    formatMessage
+  } = useIntl();
+  const selection = useSharedPluginStateSelector(api, 'selection.selection');
+  const isCodeBlockSelected = useMemo(() => {
+    if (!selection) {
+      return false;
+    }
+    if (selection instanceof NodeSelection) {
+      // Note: we are checking for any type of panel, not just of type infopanel
+      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: isCodeBlockSelected,
+    elemBefore: /*#__PURE__*/React.createElement(AngleBracketsIcon, {
+      label: ""
+    })
+  }, formatMessage(blockMenuMessages.codeBlock));
+};
+export const createCodeBlockMenuItem = api => {
+  return () => /*#__PURE__*/React.createElement(CodeBlockMenuItem, {
+    api: api
+  });
+};

package/dist/esm/codeBlockAdvancedPlugin.js

@@ -1,8 +1,24 @@
+import { FORMAT_MENU_ITEM, FORMAT_CODE_BLOCK_MENU_ITEM, FORMAT_NESTED_MENU_RANK } from '@atlaskit/editor-common/block-menu';
+import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
 import { codeBlockNodeWithFixedToDOM } from './nodeviews/codeBlockNodeWithToDOMFixed';
 import { createPlugin } from './pm-plugins/main';
+import { createCodeBlockMenuItem } from './ui/createCodeBlockMenuItem';
 export var codeBlockAdvancedPlugin = function codeBlockAdvancedPlugin(_ref) {
   var api = _ref.api,
     config = _ref.config;
+  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_CODE_BLOCK_MENU_ITEM.key,
+      parent: {
+        type: 'block-menu-section',
+        key: FORMAT_MENU_ITEM.key,
+        rank: FORMAT_NESTED_MENU_RANK[FORMAT_CODE_BLOCK_MENU_ITEM.key]
+      },
+      component: createCodeBlockMenuItem(api)
+    }]);
+  }
   return {
     name: 'codeBlockAdvanced',
     nodes: function nodes() {

package/dist/esm/nodeviews/codeBlockNodeWithToDOMFixed.js

@@ -4,6 +4,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 import { codeBlock } from '@atlaskit/adf-schema';
 import { convertToInlineCss } from '@atlaskit/editor-common/lazy-node-view';
 import { CodeBlockSharedCssClassName } from '@atlaskit/editor-common/styles';
+import { fg } from '@atlaskit/platform-feature-flags';
 var codeBlockClassNames = {
   container: CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER,
   start: CodeBlockSharedCssClassName.CODEBLOCK_START,
@@ -60,12 +61,14 @@ var _toDOM = function toDOM(node, formattedAriaLabel, config) {
     'data-label': content
   }]], ['div', {
     class: codeBlockClassNames.content
-  }, ['code', {
+  }, ['code', _objectSpread({
     'data-language': node.attrs.language || '',
     spellcheck: 'false',
     'data-testid': 'code-block--code',
     'aria-label': formattedAriaLabel
-  }, 0]]], ['div', {
+  }, fg('platform_editor_adf_with_localid') && {
+    'data-local-id': node.attrs.localId
+  }), 0]]], ['div', {
     class: codeBlockClassNames.end,
     contenteditable: 'false'
   }]];

package/dist/esm/ui/createCodeBlockMenuItem.js

@@ -0,0 +1,42 @@
+import React, { useMemo } from 'react';
+import { useIntl } from 'react-intl-next';
+import { blockMenuMessages } 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 AngleBracketsIcon from '@atlaskit/icon/core/angle-brackets';
+var nodeName = 'codeBlock';
+var CodeBlockMenuItem = function CodeBlockMenuItem(_ref) {
+  var api = _ref.api;
+  var _useIntl = useIntl(),
+    formatMessage = _useIntl.formatMessage;
+  var selection = useSharedPluginStateSelector(api, 'selection.selection');
+  var isCodeBlockSelected = useMemo(function () {
+    if (!selection) {
+      return false;
+    }
+    if (selection instanceof NodeSelection) {
+      // Note: we are checking for any type of panel, not just of type infopanel
+      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: isCodeBlockSelected,
+    elemBefore: /*#__PURE__*/React.createElement(AngleBracketsIcon, {
+      label: ""
+    })
+  }, formatMessage(blockMenuMessages.codeBlock));
+};
+export var createCodeBlockMenuItem = function createCodeBlockMenuItem(api) {
+  return function () {
+    return /*#__PURE__*/React.createElement(CodeBlockMenuItem, {
+      api: api
+    });
+  };
+};

package/dist/types/codeBlockAdvancedPluginType.d.ts

@@ -1,5 +1,6 @@
 import type { Extension } from '@codemirror/state';
 import type { NextEditorPlugin, OptionalPlugin } from '@atlaskit/editor-common/types';
+import type { BlockMenuPlugin } from '@atlaskit/editor-plugin-block-menu';
 import type { CodeBlockPlugin } from '@atlaskit/editor-plugin-code-block';
 import type { EditorDisabledPlugin } from '@atlaskit/editor-plugin-editor-disabled';
 import type { FindReplacePlugin } from '@atlaskit/editor-plugin-find-replace';
@@ -11,7 +12,8 @@ export type CodeBlockAdvancedPlugin = NextEditorPlugin<'codeBlockAdvanced', {
         SelectionPlugin,
         OptionalPlugin<EditorDisabledPlugin>,
         OptionalPlugin<SelectionMarkerPlugin>,
-        OptionalPlugin<FindReplacePlugin>
+        OptionalPlugin<FindReplacePlugin>,
+        OptionalPlugin<BlockMenuPlugin>
     ];
     pluginConfiguration: CodeBlockAdvancedPluginOptions | undefined;
 }>;

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

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

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

@@ -1,5 +1,6 @@
 import type { Extension } from '@codemirror/state';
 import type { NextEditorPlugin, OptionalPlugin } from '@atlaskit/editor-common/types';
+import type { BlockMenuPlugin } from '@atlaskit/editor-plugin-block-menu';
 import type { CodeBlockPlugin } from '@atlaskit/editor-plugin-code-block';
 import type { EditorDisabledPlugin } from '@atlaskit/editor-plugin-editor-disabled';
 import type { FindReplacePlugin } from '@atlaskit/editor-plugin-find-replace';
@@ -11,7 +12,8 @@ export type CodeBlockAdvancedPlugin = NextEditorPlugin<'codeBlockAdvanced', {
         SelectionPlugin,
         OptionalPlugin<EditorDisabledPlugin>,
         OptionalPlugin<SelectionMarkerPlugin>,
-        OptionalPlugin<FindReplacePlugin>
+        OptionalPlugin<FindReplacePlugin>,
+        OptionalPlugin<BlockMenuPlugin>
     ];
     pluginConfiguration: CodeBlockAdvancedPluginOptions | undefined;
 }>;

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-code-block-advanced",
-	"version": "3.2.4",
+	"version": "4.0.1",
 	"description": "CodeBlockAdvanced plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -29,14 +29,17 @@
 	"atlaskit:src": "src/index.ts",
 	"dependencies": {
 		"@atlaskit/adf-schema": "^50.2.3",
-		"@atlaskit/editor-plugin-code-block": "^5.0.0",
-		"@atlaskit/editor-plugin-editor-disabled": "^3.0.0",
-		"@atlaskit/editor-plugin-find-replace": "^3.2.0",
-		"@atlaskit/editor-plugin-selection": "^3.2.0",
-		"@atlaskit/editor-plugin-selection-marker": "^3.0.0",
+		"@atlaskit/editor-plugin-block-menu": "^1.0.0",
+		"@atlaskit/editor-plugin-code-block": "^6.0.0",
+		"@atlaskit/editor-plugin-editor-disabled": "^4.0.0",
+		"@atlaskit/editor-plugin-find-replace": "^4.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-toolbar": "^0.7.0",
+		"@atlaskit/icon": "^28.1.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
-		"@atlaskit/tmp-editor-statsig": "^11.9.0",
+		"@atlaskit/tmp-editor-statsig": "^12.2.0",
 		"@atlaskit/tokens": "^6.1.0",
 		"@babel/runtime": "^7.0.0",
 		"@codemirror/autocomplete": "6.18.4",
@@ -52,8 +55,9 @@
 		"codemirror-lang-elixir": "4.0.0"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^107.33.0",
-		"react": "^18.2.0"
+		"@atlaskit/editor-common": "^108.1.0",
+		"react": "^18.2.0",
+		"react-intl-next": "npm:react-intl@^5.18.1"
 	},
 	"devDependencies": {
 		"@atlaskit/code": "^17.2.0"
@@ -100,6 +104,9 @@
 		},
 		"platform_editor_code_syntax_highlight_actionscript": {
 			"type": "boolean"
+		},
+		"platform_editor_adf_with_localid": {
+			"type": "boolean"
 		}
 	}
 }

package/src/codeBlockAdvancedPlugin.tsx

@@ -1,31 +1,58 @@
+import {
+	FORMAT_MENU_ITEM,
+	FORMAT_CODE_BLOCK_MENU_ITEM,
+	FORMAT_NESTED_MENU_RANK,
+} from '@atlaskit/editor-common/block-menu';
+import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
+
 import type { CodeBlockAdvancedPlugin } from './codeBlockAdvancedPluginType';
 import { codeBlockNodeWithFixedToDOM } from './nodeviews/codeBlockNodeWithToDOMFixed';
 import { createPlugin } from './pm-plugins/main';
+import { createCodeBlockMenuItem } from './ui/createCodeBlockMenuItem';
 
-export const codeBlockAdvancedPlugin: CodeBlockAdvancedPlugin = ({ api, config }) => ({
-	name: 'codeBlockAdvanced',
-
-	nodes() {
-		return [
+export const codeBlockAdvancedPlugin: CodeBlockAdvancedPlugin = ({ api, config }) => {
+	if (expValEqualsNoExposure('platform_editor_block_menu', 'isEnabled', true)) {
+		api?.blockMenu?.actions.registerBlockMenuComponents([
 			{
-				name: 'codeBlock',
-				node: codeBlockNodeWithFixedToDOM({ allowCodeFolding: config?.allowCodeFolding ?? false }),
+				type: 'block-menu-item',
+				key: FORMAT_CODE_BLOCK_MENU_ITEM.key,
+				parent: {
+					type: 'block-menu-section' as const,
+					key: FORMAT_MENU_ITEM.key,
+					rank: FORMAT_NESTED_MENU_RANK[FORMAT_CODE_BLOCK_MENU_ITEM.key],
+				},
+				component: createCodeBlockMenuItem(api),
 			},
-		];
-	},
+		]);
+	}
 
-	pmPlugins() {
-		return [
-			{
-				name: 'codeBlockAdvancedPlugin',
-				plugin: ({ getIntl }) =>
-					createPlugin({
-						api,
-						extensions: config?.extensions ?? [],
+	return {
+		name: 'codeBlockAdvanced',
+
+		nodes() {
+			return [
+				{
+					name: 'codeBlock',
+					node: codeBlockNodeWithFixedToDOM({
 						allowCodeFolding: config?.allowCodeFolding ?? false,
-						getIntl,
 					}),
-			},
-		];
-	},
-});
+				},
+			];
+		},
+
+		pmPlugins() {
+			return [
+				{
+					name: 'codeBlockAdvancedPlugin',
+					plugin: ({ getIntl }) =>
+						createPlugin({
+							api,
+							extensions: config?.extensions ?? [],
+							allowCodeFolding: config?.allowCodeFolding ?? false,
+							getIntl,
+						}),
+				},
+			];
+		},
+	};
+};

package/src/codeBlockAdvancedPluginType.ts

@@ -1,6 +1,7 @@
 import type { Extension } from '@codemirror/state';
 
 import type { NextEditorPlugin, OptionalPlugin } from '@atlaskit/editor-common/types';
+import type { BlockMenuPlugin } from '@atlaskit/editor-plugin-block-menu';
 import type { CodeBlockPlugin } from '@atlaskit/editor-plugin-code-block';
 import type { EditorDisabledPlugin } from '@atlaskit/editor-plugin-editor-disabled';
 import type { FindReplacePlugin } from '@atlaskit/editor-plugin-find-replace';
@@ -16,6 +17,7 @@ export type CodeBlockAdvancedPlugin = NextEditorPlugin<
 			OptionalPlugin<EditorDisabledPlugin>,
 			OptionalPlugin<SelectionMarkerPlugin>,
 			OptionalPlugin<FindReplacePlugin>,
+			OptionalPlugin<BlockMenuPlugin>,
 		];
 		pluginConfiguration: CodeBlockAdvancedPluginOptions | undefined;
 	}

package/src/nodeviews/codeBlockNodeWithToDOMFixed.ts

@@ -2,6 +2,7 @@ import { codeBlock } from '@atlaskit/adf-schema';
 import { convertToInlineCss } from '@atlaskit/editor-common/lazy-node-view';
 import { CodeBlockSharedCssClassName } from '@atlaskit/editor-common/styles';
 import type { NodeSpec, DOMOutputSpec, Node } from '@atlaskit/editor-prosemirror/model';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { token } from '@atlaskit/tokens';
 
 interface Config {
@@ -94,6 +95,7 @@ const toDOM = (node: Node, formattedAriaLabel: string, config: Config): DOMOutpu
 						spellcheck: 'false',
 						'data-testid': 'code-block--code',
 						'aria-label': formattedAriaLabel,
+						...(fg('platform_editor_adf_with_localid') && { 'data-local-id': node.attrs.localId }),
 					},
 					0,
 				],

package/src/ui/createCodeBlockMenuItem.tsx

@@ -0,0 +1,54 @@
+import React, { useMemo } from 'react';
+
+import { useIntl } from 'react-intl-next';
+
+import { blockMenuMessages } from '@atlaskit/editor-common/messages';
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+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 AngleBracketsIcon from '@atlaskit/icon/core/angle-brackets';
+
+import type { CodeBlockAdvancedPlugin } from '../codeBlockAdvancedPluginType';
+
+type Props = {
+	api: ExtractInjectionAPI<CodeBlockAdvancedPlugin> | undefined;
+};
+
+const nodeName = 'codeBlock';
+
+const CodeBlockMenuItem = ({ api }: Props) => {
+	const { formatMessage } = useIntl();
+	const selection = useSharedPluginStateSelector(api, 'selection.selection');
+
+	const isCodeBlockSelected = useMemo(() => {
+		if (!selection) {
+			return false;
+		}
+
+		if (selection instanceof NodeSelection) {
+			// Note: we are checking for any type of panel, not just of type infopanel
+			return selection.node.type.name === nodeName;
+		}
+
+		return false;
+	}, [selection]);
+
+	const handleClick = () => {
+		api?.core.actions.execute(api?.blockMenu?.commands.formatNode(nodeName));
+	};
+
+	return (
+		<ToolbarDropdownItem
+			onClick={handleClick}
+			isSelected={isCodeBlockSelected}
+			elemBefore={<AngleBracketsIcon label="" />}
+		>
+			{formatMessage(blockMenuMessages.codeBlock)}
+		</ToolbarDropdownItem>
+	);
+};
+
+export const createCodeBlockMenuItem = (api: ExtractInjectionAPI<CodeBlockAdvancedPlugin>) => {
+	return () => <CodeBlockMenuItem api={api} />;
+};

package/tsconfig.app.json

@@ -37,6 +37,9 @@
 		{
 			"path": "../editor-common/tsconfig.app.json"
 		},
+		{
+			"path": "../editor-plugin-block-menu/tsconfig.app.json"
+		},
 		{
 			"path": "../editor-plugin-code-block/tsconfig.app.json"
 		},
@@ -52,6 +55,12 @@
 		{
 			"path": "../editor-plugin-selection-marker/tsconfig.app.json"
 		},
+		{
+			"path": "../editor-toolbar/tsconfig.app.json"
+		},
+		{
+			"path": "../../design-system/icon/tsconfig.app.json"
+		},
 		{
 			"path": "../../platform/feature-flags/tsconfig.app.json"
 		},