@atlaskit/editor-plugin-insert-block 1.7.0 → 1.8.0

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # @atlaskit/editor-plugin-insert-block
 
+## 1.8.0
+
+### Minor Changes
+
+- [`3ac0ae73c0d52`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/3ac0ae73c0d52) -
+  [ED-24499] Add Turn into dropdown button to text selection toolbar for
+  platform_editor_basic_text_transformations experiment. This button will be used to provide options
+  to transform selected texts/inline nodes into other elements (e.g. expand) containing the content.
+
+### Patch Changes
+
+- Updated dependencies
+
+## 1.7.1
+
+### Patch Changes
+
+- [#126987](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/126987)
+  [`e2759b19623a1`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/e2759b19623a1) -
+  [ux] Migrate icons in Editor toolbar insert block
+
 ## 1.7.0
 
 ### Minor Changes

package/dist/cjs/assets/switch.js

@@ -0,0 +1,30 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = SwitchIcon;
+var _react = _interopRequireDefault(require("react"));
+var _svg = _interopRequireDefault(require("@atlaskit/icon/svg"));
+function SwitchIcon() {
+  return /*#__PURE__*/_react.default.createElement(_svg.default, {
+    label: ""
+  }, /*#__PURE__*/_react.default.createElement("path", {
+    d: "M6.003 16H8.998C9.26322 16 9.51757 15.8947 9.70511 15.7071C9.89264 15.5196 9.998 15.2652 9.998 15C9.998 14.7348 9.89264 14.4805 9.70511 14.2929C9.51757 14.1054 9.26322 14 8.998 14H5.102C4.494 14 4 14.493 4 15.1V19C4 19.2656 4.10551 19.5204 4.29333 19.7082C4.48115 19.896 4.73589 20.0015 5.0015 20.0015C5.26711 20.0015 5.52185 19.896 5.70967 19.7082C5.89748 19.5204 6.003 19.2656 6.003 19V16Z",
+    fill: "var(--ds-icon, #44546F)"
+  }), /*#__PURE__*/_react.default.createElement("path", {
+    d: "M18.018 14.572C16.989 16.649 14.807 18 12.37 18C10.104 18 8.051 16.833 6.945 14.98C6.659 14.5 6.023 14.334 5.524 14.609C5.40677 14.6709 5.30331 14.7559 5.21991 14.8589C5.13651 14.9619 5.0749 15.0808 5.0388 15.2083C5.00271 15.3359 4.99289 15.4694 5.00994 15.6009C5.027 15.7323 5.07056 15.8589 5.138 15.973C6.611 18.443 9.35 20 12.37 20C15.618 20 18.528 18.198 19.899 15.43C20.146 14.932 19.925 14.335 19.406 14.098C18.886 13.861 18.265 14.073 18.018 14.572Z",
+    fill: "var(--ds-icon, #44546F)"
+  }), /*#__PURE__*/_react.default.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M15.002 10L18.898 10C19.506 10 20 9.50703 20 8.90003V5.00003C20 4.73441 19.8945 4.47968 19.7067 4.29186C19.5188 4.10404 19.2641 3.99853 18.9985 3.99853C18.7329 3.99853 18.4782 4.10404 18.2903 4.29186C18.1025 4.47968 17.997 4.73441 17.997 5.00003V8.00003H15.002C14.7368 8.00003 14.4824 8.10538 14.2949 8.29292C14.1074 8.48046 14.002 8.73481 14.002 9.00003C14.002 9.26524 14.1074 9.5196 14.2949 9.70713C14.4824 9.89467 14.7368 10 15.002 10Z",
+    fill: "var(--ds-icon, #44546F)"
+  }), /*#__PURE__*/_react.default.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M4.596 9.90303C5.116 10.14 5.736 9.92803 5.983 9.42903C7.012 7.35203 9.193 6.00103 11.63 6.00103C13.896 6.00103 15.95 7.16803 17.055 9.02203C17.1988 9.25438 17.4265 9.42245 17.6909 9.49135C17.9553 9.56024 18.2361 9.52468 18.475 9.39203C18.975 9.11803 19.148 8.50703 18.862 8.02803C17.389 5.55803 14.65 4.00103 11.63 4.00103C8.382 4.00103 5.472 5.80303 4.102 8.57103C4.03537 8.70353 4.00045 8.84971 4 8.99803C4.00188 9.1902 4.05909 9.37775 4.16479 9.53825C4.27049 9.69875 4.4202 9.8254 4.596 9.90303Z",
+    fill: "var(--ds-icon, #44546F)"
+  }));
+}

package/dist/cjs/plugin.js

@@ -9,9 +9,11 @@ exports.insertBlockPlugin = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _analytics = require("@atlaskit/editor-common/analytics");
 var _hooks = require("@atlaskit/editor-common/hooks");
+var _messages = require("@atlaskit/editor-common/messages");
 var _providerFactory = require("@atlaskit/editor-common/provider-factory");
 var _types = require("@atlaskit/editor-common/types");
 var _consts = require("@atlaskit/editor-plugin-block-type/consts");
+var _switch = _interopRequireDefault(require("./assets/switch"));
 var _ToolbarInsertBlock = _interopRequireDefault(require("./ui/ToolbarInsertBlock"));
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -114,6 +116,28 @@ var insertBlockPlugin = exports.insertBlockPlugin = function insertBlockPlugin(_
         toggle();
       }
     },
+    pluginsOptions: {
+      // This is added for basic text transformations experiment.
+      // This may not be the most ideal plugin to add this to, but it is suitable for experiment purpose
+      // as relevant plugin dependencies are already set up.
+      // If we decide to ship the feature, we will consider a separate plugin if needed.
+      // Experiment one-pager: https://hello.atlassian.net/wiki/spaces/ETM/pages/3931754727/Experiment+Elements+Basic+Text+Transformations
+      selectionToolbar: function selectionToolbar(_, intl) {
+        var _api$featureFlags;
+        if (!(api !== null && api !== void 0 && (_api$featureFlags = api.featureFlags) !== null && _api$featureFlags !== void 0 && (_api$featureFlags = _api$featureFlags.sharedState.currentState()) !== null && _api$featureFlags !== void 0 && _api$featureFlags.basicTextTransformations)) {
+          return;
+        }
+        return {
+          items: [{
+            type: 'dropdown',
+            title: intl.formatMessage(_messages.toolbarInsertBlockMessages.turnInto),
+            iconBefore: _switch.default,
+            options: []
+          }],
+          rank: -9
+        };
+      }
+    },
     usePluginHook: function usePluginHook() {
       (0, _react.useLayoutEffect)(function () {
         return function () {

package/dist/cjs/ui/ToolbarInsertBlock/dropdown-button.js

@@ -10,8 +10,11 @@ var _react2 = require("@emotion/react");
 var _keymaps = require("@atlaskit/editor-common/keymaps");
 var _styles = require("@atlaskit/editor-common/styles");
 var _uiMenu = require("@atlaskit/editor-common/ui-menu");
+var _addEditorAdd = _interopRequireDefault(require("@atlaskit/icon/core/migration/add--editor-add"));
 var _chevronDown = _interopRequireDefault(require("@atlaskit/icon/glyph/chevron-down"));
 var _add = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/add"));
+var _chevronDown2 = _interopRequireDefault(require("@atlaskit/icon/utility/migration/chevron-down"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _styles2 = require("./styles");
 /**
  * @jsxRuntime classic
@@ -25,9 +28,21 @@ var DropDownButtonIcon = /*#__PURE__*/_react.default.memo(function (props) {
     // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
     (0, _react2.jsx)("span", {
       css: _styles2.triggerWrapper
-    }, (0, _react2.jsx)(_add.default, {
+    }, (0, _platformFeatureFlags.fg)('platform_editor_migration_icon_and_typography') ? (0, _react2.jsx)(_addEditorAdd.default, {
+      label: props.label,
+      color: "currentColor"
+    }) : (0, _react2.jsx)(_add.default, {
       label: props.label
-    }), (0, _react2.jsx)("span", {
+    }), (0, _platformFeatureFlags.fg)('platform_editor_migration_icon_and_typography') ?
+    //eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
+    (0, _react2.jsx)("span", {
+      css: _styles2.expandWrapperStyle
+    }, (0, _react2.jsx)(_chevronDown2.default, {
+      label: "",
+      color: "currentColor"
+    })) :
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
+    (0, _react2.jsx)("span", {
       css: _styles.expandIconWrapperStyle
     }, (0, _react2.jsx)(_chevronDown.default, {
       label: ""

package/dist/cjs/ui/ToolbarInsertBlock/item.js

@@ -10,6 +10,17 @@ var _react2 = require("@emotion/react");
 var _memoizeOne = _interopRequireDefault(require("memoize-one"));
 var _keymaps = require("@atlaskit/editor-common/keymaps");
 var _shortcut = require("@atlaskit/editor-shared-styles/shortcut");
+var _angleBracketsEditorCode = _interopRequireDefault(require("@atlaskit/icon/core/migration/angle-brackets--editor-code"));
+var _calendarEditorDate = _interopRequireDefault(require("@atlaskit/icon/core/migration/calendar--editor-date"));
+var _checkboxCheckedEditorTask = _interopRequireDefault(require("@atlaskit/icon/core/migration/checkbox-checked--editor-task"));
+var _decisionEditorDecision = _interopRequireDefault(require("@atlaskit/icon/core/migration/decision--editor-decision"));
+var _emojiEditorEmoji = _interopRequireDefault(require("@atlaskit/icon/core/migration/emoji--editor-emoji"));
+var _imageEditorImage = _interopRequireDefault(require("@atlaskit/icon/core/migration/image--editor-image"));
+var _informationEditorInfo = _interopRequireDefault(require("@atlaskit/icon/core/migration/information--editor-info"));
+var _linkEditorLink = _interopRequireDefault(require("@atlaskit/icon/core/migration/link--editor-link"));
+var _mentionEditorMention = _interopRequireDefault(require("@atlaskit/icon/core/migration/mention--editor-mention"));
+var _quotationMarkQuote = _interopRequireDefault(require("@atlaskit/icon/core/migration/quotation-mark--quote"));
+var _showMoreHorizontalEditorMore = _interopRequireDefault(require("@atlaskit/icon/core/migration/show-more-horizontal--editor-more"));
 var _chevronDown = _interopRequireDefault(require("@atlaskit/icon/glyph/chevron-down"));
 var _chevronRightCircle = _interopRequireDefault(require("@atlaskit/icon/glyph/chevron-right-circle"));
 var _code = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/code"));
@@ -28,6 +39,8 @@ var _task = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/task"));
 var _text = _interopRequireDefault(require("@atlaskit/icon/glyph/media-services/text"));
 var _quote = _interopRequireDefault(require("@atlaskit/icon/glyph/quote"));
 var _status = _interopRequireDefault(require("@atlaskit/icon/glyph/status"));
+var _chevronDown2 = _interopRequireDefault(require("@atlaskit/icon/utility/migration/chevron-down"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _shallowEquals = require("./shallow-equals");
 /**
  * @jsxRuntime classic
@@ -68,7 +81,7 @@ var action = exports.action = mem(function (init) {
     disabled: init.disabled,
     name: 'action',
     shortcut: '[]',
-    Icon: _task.default,
+    Icon: (0, _platformFeatureFlags.fg)('platform_editor_migration_icon_and_typography') ? _checkboxCheckedEditorTask.default : _task.default,
     'aria-keyshortcuts': '[ ] Space'
   });
 });
@@ -79,7 +92,7 @@ var link = exports.link = mem(function (init) {
     disabled: init.disabled,
     name: 'link',
     shortcut: (0, _keymaps.tooltip)(_keymaps.addLink),
-    Icon: _link.default,
+    Icon: (0, _platformFeatureFlags.fg)('platform_editor_migration_icon_and_typography') ? _linkEditorLink.default : _link.default,
     'aria-haspopup': init['aria-haspopup'],
     'aria-keyshortcuts': (0, _keymaps.getAriaKeyshortcuts)(_keymaps.addLink)
   });
@@ -90,7 +103,7 @@ var media = exports.media = mem(function (init) {
     tooltipDescription: init.tooltipDescription,
     disabled: init.disabled,
     name: 'media',
-    Icon: _image.default
+    Icon: (0, _platformFeatureFlags.fg)('platform_editor_migration_icon_and_typography') ? _imageEditorImage.default : _image.default
   });
 });
 var imageUpload = exports.imageUpload = mem(function (init) {
@@ -99,7 +112,7 @@ var imageUpload = exports.imageUpload = mem(function (init) {
     tooltipDescription: init.tooltipDescription,
     disabled: init.disabled,
     name: 'image upload',
-    Icon: _image.default
+    Icon: (0, _platformFeatureFlags.fg)('platform_editor_migration_icon_and_typography') ? _imageEditorImage.default : _image.default
   });
 });
 var mention = exports.mention = mem(function (init) {
@@ -108,7 +121,7 @@ var mention = exports.mention = mem(function (init) {
     tooltipDescription: init.tooltipDescription,
     disabled: init.disabled,
     name: 'mention',
-    Icon: _mention.default,
+    Icon: (0, _platformFeatureFlags.fg)('platform_editor_migration_icon_and_typography') ? _mentionEditorMention.default : _mention.default,
     shortcut: '@',
     'aria-haspopup': init['aria-haspopup'],
     'aria-keyshortcuts': 'Shift+2 Space'
@@ -120,7 +133,7 @@ var emoji = exports.emoji = mem(function (init) {
     tooltipDescription: init.tooltipDescription,
     disabled: init.disabled,
     name: 'emoji',
-    Icon: _emoji.default,
+    Icon: (0, _platformFeatureFlags.fg)('platform_editor_migration_icon_and_typography') ? _emojiEditorEmoji.default : _emoji.default,
     shortcut: ':',
     'aria-haspopup': init['aria-haspopup'],
     'aria-keyshortcuts': 'Shift+;'
@@ -143,7 +156,12 @@ var tableSelector = exports.tableSelector = mem(function (init) {
     tooltipDescription: init.tooltipDescription,
     disabled: init.disabled,
     name: 'table selector',
-    Icon: _chevronDown.default
+    Icon: (0, _platformFeatureFlags.fg)('platform_editor_migration_icon_and_typography') ? function () {
+      return (0, _react2.jsx)(_chevronDown2.default, {
+        label: "",
+        color: "currentColor"
+      });
+    } : _chevronDown.default
   });
 });
 var layout = exports.layout = mem(function (init) {
@@ -161,7 +179,7 @@ var codeblock = exports.codeblock = mem(function (init) {
     tooltipDescription: init.tooltipDescription,
     disabled: init.disabled,
     name: 'codeblock',
-    Icon: _code.default,
+    Icon: (0, _platformFeatureFlags.fg)('platform_editor_migration_icon_and_typography') ? _angleBracketsEditorCode.default : _code.default,
     shortcut: init.shortcut,
     'aria-keyshortcuts': (0, _keymaps.getAriaKeyshortcuts)(init.shortcut)
   });
@@ -172,7 +190,7 @@ var panel = exports.panel = mem(function (init) {
     tooltipDescription: init.tooltipDescription,
     disabled: init.disabled,
     name: 'panel',
-    Icon: _info.default,
+    Icon: (0, _platformFeatureFlags.fg)('platform_editor_migration_icon_and_typography') ? _informationEditorInfo.default : _info.default,
     shortcut: init.shortcut,
     'aria-keyshortcuts': (0, _keymaps.getAriaKeyshortcuts)(init.shortcut)
   });
@@ -183,7 +201,7 @@ var blockquote = exports.blockquote = mem(function (init) {
     tooltipDescription: init.tooltipDescription,
     disabled: init.disabled,
     name: 'blockquote',
-    Icon: _quote.default,
+    Icon: (0, _platformFeatureFlags.fg)('platform_editor_migration_icon_and_typography') ? _quotationMarkQuote.default : _quote.default,
     shortcut: init.shortcut,
     'aria-keyshortcuts': 'Shift+. Space'
   });
@@ -194,7 +212,7 @@ var decision = exports.decision = mem(function (init) {
     tooltipDescription: init.tooltipDescription,
     disabled: init.disabled,
     name: 'decision',
-    Icon: _decision.default,
+    Icon: (0, _platformFeatureFlags.fg)('platform_editor_migration_icon_and_typography') ? _decisionEditorDecision.default : _decision.default,
     shortcut: '<>',
     'aria-keyshortcuts': 'Shift+, Shift+. Space'
   });
@@ -225,7 +243,7 @@ var date = exports.date = mem(function (init) {
     tooltipDescription: init.tooltipDescription,
     disabled: init.disabled,
     name: 'date',
-    Icon: _date.default,
+    Icon: (0, _platformFeatureFlags.fg)('platform_editor_migration_icon_and_typography') ? _calendarEditorDate.default : _date.default,
     shortcut: '//',
     'aria-keyshortcuts': '/ / Enter'
   });
@@ -259,7 +277,10 @@ var more = exports.more = mem(function (init) {
     disabled: init.disabled,
     name: 'macro',
     Icon: function Icon() {
-      return (0, _react2.jsx)(_more.default, {
+      return (0, _platformFeatureFlags.fg)('platform_editor_migration_icon_and_typography') ? (0, _react2.jsx)(_showMoreHorizontalEditorMore.default, {
+        label: "",
+        color: "currentColor"
+      }) : (0, _react2.jsx)(_more.default, {
         label: ""
       });
     }

package/dist/cjs/ui/ToolbarInsertBlock/styles.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.triggerWrapper = void 0;
+exports.triggerWrapper = exports.expandWrapperStyle = void 0;
 var _react = require("@emotion/react");
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 
@@ -20,4 +20,9 @@ var triggerWrapper = exports.triggerWrapper = (0, _react.css)({
   '> div > div': {
     display: 'flex'
   }
+});
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
+var expandWrapperStyle = exports.expandWrapperStyle = (0, _react.css)({
+  marginLeft: "var(--ds-space-050, 4px)"
 });

package/dist/es2019/assets/switch.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import SVG from '@atlaskit/icon/svg';
+export default function SwitchIcon() {
+  return /*#__PURE__*/React.createElement(SVG, {
+    label: ""
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M6.003 16H8.998C9.26322 16 9.51757 15.8947 9.70511 15.7071C9.89264 15.5196 9.998 15.2652 9.998 15C9.998 14.7348 9.89264 14.4805 9.70511 14.2929C9.51757 14.1054 9.26322 14 8.998 14H5.102C4.494 14 4 14.493 4 15.1V19C4 19.2656 4.10551 19.5204 4.29333 19.7082C4.48115 19.896 4.73589 20.0015 5.0015 20.0015C5.26711 20.0015 5.52185 19.896 5.70967 19.7082C5.89748 19.5204 6.003 19.2656 6.003 19V16Z",
+    fill: "var(--ds-icon, #44546F)"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M18.018 14.572C16.989 16.649 14.807 18 12.37 18C10.104 18 8.051 16.833 6.945 14.98C6.659 14.5 6.023 14.334 5.524 14.609C5.40677 14.6709 5.30331 14.7559 5.21991 14.8589C5.13651 14.9619 5.0749 15.0808 5.0388 15.2083C5.00271 15.3359 4.99289 15.4694 5.00994 15.6009C5.027 15.7323 5.07056 15.8589 5.138 15.973C6.611 18.443 9.35 20 12.37 20C15.618 20 18.528 18.198 19.899 15.43C20.146 14.932 19.925 14.335 19.406 14.098C18.886 13.861 18.265 14.073 18.018 14.572Z",
+    fill: "var(--ds-icon, #44546F)"
+  }), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M15.002 10L18.898 10C19.506 10 20 9.50703 20 8.90003V5.00003C20 4.73441 19.8945 4.47968 19.7067 4.29186C19.5188 4.10404 19.2641 3.99853 18.9985 3.99853C18.7329 3.99853 18.4782 4.10404 18.2903 4.29186C18.1025 4.47968 17.997 4.73441 17.997 5.00003V8.00003H15.002C14.7368 8.00003 14.4824 8.10538 14.2949 8.29292C14.1074 8.48046 14.002 8.73481 14.002 9.00003C14.002 9.26524 14.1074 9.5196 14.2949 9.70713C14.4824 9.89467 14.7368 10 15.002 10Z",
+    fill: "var(--ds-icon, #44546F)"
+  }), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M4.596 9.90303C5.116 10.14 5.736 9.92803 5.983 9.42903C7.012 7.35203 9.193 6.00103 11.63 6.00103C13.896 6.00103 15.95 7.16803 17.055 9.02203C17.1988 9.25438 17.4265 9.42245 17.6909 9.49135C17.9553 9.56024 18.2361 9.52468 18.475 9.39203C18.975 9.11803 19.148 8.50703 18.862 8.02803C17.389 5.55803 14.65 4.00103 11.63 4.00103C8.382 4.00103 5.472 5.80303 4.102 8.57103C4.03537 8.70353 4.00045 8.84971 4 8.99803C4.00188 9.1902 4.05909 9.37775 4.16479 9.53825C4.27049 9.69875 4.4202 9.8254 4.596 9.90303Z",
+    fill: "var(--ds-icon, #44546F)"
+  }));
+}

package/dist/es2019/plugin.js

@@ -1,9 +1,11 @@
 import React, { useLayoutEffect } from 'react';
 import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
+import { toolbarInsertBlockMessages as messages } from '@atlaskit/editor-common/messages';
 import { WithProviders } from '@atlaskit/editor-common/provider-factory';
 import { ToolbarSize } from '@atlaskit/editor-common/types';
 import { BLOCK_QUOTE, CODE_BLOCK, PANEL } from '@atlaskit/editor-plugin-block-type/consts';
+import SwitchIcon from './assets/switch';
 import ToolbarInsertBlock from './ui/ToolbarInsertBlock';
 const toolbarSizeToButtons = toolbarSize => {
   switch (toolbarSize) {
@@ -103,6 +105,28 @@ export const insertBlockPlugin = ({
         toggle();
       }
     },
+    pluginsOptions: {
+      // This is added for basic text transformations experiment.
+      // This may not be the most ideal plugin to add this to, but it is suitable for experiment purpose
+      // as relevant plugin dependencies are already set up.
+      // If we decide to ship the feature, we will consider a separate plugin if needed.
+      // Experiment one-pager: https://hello.atlassian.net/wiki/spaces/ETM/pages/3931754727/Experiment+Elements+Basic+Text+Transformations
+      selectionToolbar: (_, intl) => {
+        var _api$featureFlags, _api$featureFlags$sha;
+        if (!(api !== null && api !== void 0 && (_api$featureFlags = api.featureFlags) !== null && _api$featureFlags !== void 0 && (_api$featureFlags$sha = _api$featureFlags.sharedState.currentState()) !== null && _api$featureFlags$sha !== void 0 && _api$featureFlags$sha.basicTextTransformations)) {
+          return;
+        }
+        return {
+          items: [{
+            type: 'dropdown',
+            title: intl.formatMessage(messages.turnInto),
+            iconBefore: SwitchIcon,
+            options: []
+          }],
+          rank: -9
+        };
+      }
+    },
     usePluginHook: () => {
       useLayoutEffect(() => {
         return () => {

package/dist/es2019/ui/ToolbarInsertBlock/dropdown-button.js

@@ -9,16 +9,31 @@ import { jsx } from '@emotion/react';
 import { ToolTipContent } from '@atlaskit/editor-common/keymaps';
 import { expandIconWrapperStyle } from '@atlaskit/editor-common/styles';
 import { ToolbarButton } from '@atlaskit/editor-common/ui-menu';
+import AddIcon from '@atlaskit/icon/core/migration/add--editor-add';
 import ExpandIcon from '@atlaskit/icon/glyph/chevron-down';
-import AddIcon from '@atlaskit/icon/glyph/editor/add';
-import { triggerWrapper } from './styles';
+import { default as AddIconLegacy } from '@atlaskit/icon/glyph/editor/add';
+import ChevronDownIcon from '@atlaskit/icon/utility/migration/chevron-down';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { expandWrapperStyle, triggerWrapper } from './styles';
 const DropDownButtonIcon = /*#__PURE__*/React.memo(props =>
 // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
 jsx("span", {
   css: triggerWrapper
-}, jsx(AddIcon, {
+}, fg('platform_editor_migration_icon_and_typography') ? jsx(AddIcon, {
+  label: props.label,
+  color: "currentColor"
+}) : jsx(AddIconLegacy, {
   label: props.label
-}), jsx("span", {
+}), fg('platform_editor_migration_icon_and_typography') ?
+//eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
+jsx("span", {
+  css: expandWrapperStyle
+}, jsx(ChevronDownIcon, {
+  label: "",
+  color: "currentColor"
+})) :
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
+jsx("span", {
   css: expandIconWrapperStyle
 }, jsx(ExpandIcon, {
   label: ""

package/dist/es2019/ui/ToolbarInsertBlock/item.js

@@ -9,24 +9,37 @@ import { jsx } from '@emotion/react';
 import memoizeOne from 'memoize-one';
 import { addLink, getAriaKeyshortcuts, toggleTable, tooltip } from '@atlaskit/editor-common/keymaps';
 import { shortcutStyle } from '@atlaskit/editor-shared-styles/shortcut';
+import AngleBracketsIcon from '@atlaskit/icon/core/migration/angle-brackets--editor-code';
+import CalendarIcon from '@atlaskit/icon/core/migration/calendar--editor-date';
+import CheckboxCheckedIcon from '@atlaskit/icon/core/migration/checkbox-checked--editor-task';
+import DecisionIcon from '@atlaskit/icon/core/migration/decision--editor-decision';
+import EmojiIcon from '@atlaskit/icon/core/migration/emoji--editor-emoji';
+import ImageIcon from '@atlaskit/icon/core/migration/image--editor-image';
+import InformationIcon from '@atlaskit/icon/core/migration/information--editor-info';
+import LinkIcon from '@atlaskit/icon/core/migration/link--editor-link';
+import MentionIcon from '@atlaskit/icon/core/migration/mention--editor-mention';
+import QuotationMarkIcon from '@atlaskit/icon/core/migration/quotation-mark--quote';
+import ShowMoreHorizontalIcon from '@atlaskit/icon/core/migration/show-more-horizontal--editor-more';
 import ExpandIcon from '@atlaskit/icon/glyph/chevron-down';
 import ExpandNodeIcon from '@atlaskit/icon/glyph/chevron-right-circle';
 import CodeIcon from '@atlaskit/icon/glyph/editor/code';
 import DateIcon from '@atlaskit/icon/glyph/editor/date';
-import DecisionIcon from '@atlaskit/icon/glyph/editor/decision';
-import EmojiIcon from '@atlaskit/icon/glyph/editor/emoji';
+import { default as DecisionIconLegacy } from '@atlaskit/icon/glyph/editor/decision';
+import { default as EmojiIconLegacy } from '@atlaskit/icon/glyph/editor/emoji';
 import HorizontalRuleIcon from '@atlaskit/icon/glyph/editor/horizontal-rule';
 import EditorImageIcon from '@atlaskit/icon/glyph/editor/image';
 import InfoIcon from '@atlaskit/icon/glyph/editor/info';
 import LayoutTwoEqualIcon from '@atlaskit/icon/glyph/editor/layout-two-equal';
-import LinkIcon from '@atlaskit/icon/glyph/editor/link';
-import MentionIcon from '@atlaskit/icon/glyph/editor/mention';
+import { default as LinkIconLegacy } from '@atlaskit/icon/glyph/editor/link';
+import { default as MentionIconLegacy } from '@atlaskit/icon/glyph/editor/mention';
 import EditorMoreIcon from '@atlaskit/icon/glyph/editor/more';
 import TableIcon from '@atlaskit/icon/glyph/editor/table';
 import TaskIcon from '@atlaskit/icon/glyph/editor/task';
 import PlaceholderTextIcon from '@atlaskit/icon/glyph/media-services/text';
 import QuoteIcon from '@atlaskit/icon/glyph/quote';
 import StatusIcon from '@atlaskit/icon/glyph/status';
+import ChevronDownIcon from '@atlaskit/icon/utility/migration/chevron-down';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { shallowEquals } from './shallow-equals';
 const from = init => ({
   content: init.content,
@@ -56,7 +69,7 @@ export const action = mem(init => {
     disabled: init.disabled,
     name: 'action',
     shortcut: '[]',
-    Icon: TaskIcon,
+    Icon: fg('platform_editor_migration_icon_and_typography') ? CheckboxCheckedIcon : TaskIcon,
     'aria-keyshortcuts': '[ ] Space'
   });
 });
@@ -66,7 +79,7 @@ export const link = mem(init => from({
   disabled: init.disabled,
   name: 'link',
   shortcut: tooltip(addLink),
-  Icon: LinkIcon,
+  Icon: fg('platform_editor_migration_icon_and_typography') ? LinkIcon : LinkIconLegacy,
   'aria-haspopup': init['aria-haspopup'],
   'aria-keyshortcuts': getAriaKeyshortcuts(addLink)
 }));
@@ -75,21 +88,21 @@ export const media = mem(init => from({
   tooltipDescription: init.tooltipDescription,
   disabled: init.disabled,
   name: 'media',
-  Icon: EditorImageIcon
+  Icon: fg('platform_editor_migration_icon_and_typography') ? ImageIcon : EditorImageIcon
 }));
 export const imageUpload = mem(init => from({
   content: init.content,
   tooltipDescription: init.tooltipDescription,
   disabled: init.disabled,
   name: 'image upload',
-  Icon: EditorImageIcon
+  Icon: fg('platform_editor_migration_icon_and_typography') ? ImageIcon : EditorImageIcon
 }));
 export const mention = mem(init => from({
   content: init.content,
   tooltipDescription: init.tooltipDescription,
   disabled: init.disabled,
   name: 'mention',
-  Icon: MentionIcon,
+  Icon: fg('platform_editor_migration_icon_and_typography') ? MentionIcon : MentionIconLegacy,
   shortcut: '@',
   'aria-haspopup': init['aria-haspopup'],
   'aria-keyshortcuts': 'Shift+2 Space'
@@ -99,7 +112,7 @@ export const emoji = mem(init => from({
   tooltipDescription: init.tooltipDescription,
   disabled: init.disabled,
   name: 'emoji',
-  Icon: EmojiIcon,
+  Icon: fg('platform_editor_migration_icon_and_typography') ? EmojiIcon : EmojiIconLegacy,
   shortcut: ':',
   'aria-haspopup': init['aria-haspopup'],
   'aria-keyshortcuts': 'Shift+;'
@@ -118,7 +131,10 @@ export const tableSelector = mem(init => from({
   tooltipDescription: init.tooltipDescription,
   disabled: init.disabled,
   name: 'table selector',
-  Icon: ExpandIcon
+  Icon: fg('platform_editor_migration_icon_and_typography') ? () => jsx(ChevronDownIcon, {
+    label: "",
+    color: "currentColor"
+  }) : ExpandIcon
 }));
 export const layout = mem(init => from({
   content: init.content,
@@ -132,7 +148,7 @@ export const codeblock = mem(init => from({
   tooltipDescription: init.tooltipDescription,
   disabled: init.disabled,
   name: 'codeblock',
-  Icon: CodeIcon,
+  Icon: fg('platform_editor_migration_icon_and_typography') ? AngleBracketsIcon : CodeIcon,
   shortcut: init.shortcut,
   'aria-keyshortcuts': getAriaKeyshortcuts(init.shortcut)
 }));
@@ -141,7 +157,7 @@ export const panel = mem(init => from({
   tooltipDescription: init.tooltipDescription,
   disabled: init.disabled,
   name: 'panel',
-  Icon: InfoIcon,
+  Icon: fg('platform_editor_migration_icon_and_typography') ? InformationIcon : InfoIcon,
   shortcut: init.shortcut,
   'aria-keyshortcuts': getAriaKeyshortcuts(init.shortcut)
 }));
@@ -150,7 +166,7 @@ export const blockquote = mem(init => from({
   tooltipDescription: init.tooltipDescription,
   disabled: init.disabled,
   name: 'blockquote',
-  Icon: QuoteIcon,
+  Icon: fg('platform_editor_migration_icon_and_typography') ? QuotationMarkIcon : QuoteIcon,
   shortcut: init.shortcut,
   'aria-keyshortcuts': 'Shift+. Space'
 }));
@@ -159,7 +175,7 @@ export const decision = mem(init => from({
   tooltipDescription: init.tooltipDescription,
   disabled: init.disabled,
   name: 'decision',
-  Icon: DecisionIcon,
+  Icon: fg('platform_editor_migration_icon_and_typography') ? DecisionIcon : DecisionIconLegacy,
   shortcut: '<>',
   'aria-keyshortcuts': 'Shift+, Shift+. Space'
 }));
@@ -184,7 +200,7 @@ export const date = mem(init => from({
   tooltipDescription: init.tooltipDescription,
   disabled: init.disabled,
   name: 'date',
-  Icon: DateIcon,
+  Icon: fg('platform_editor_migration_icon_and_typography') ? CalendarIcon : DateIcon,
   shortcut: '//',
   'aria-keyshortcuts': '/ / Enter'
 }));
@@ -209,7 +225,10 @@ export const more = mem(init => from({
   tooltipDescription: init.tooltipDescription,
   disabled: init.disabled,
   name: 'macro',
-  Icon: () => jsx(EditorMoreIcon, {
+  Icon: () => fg('platform_editor_migration_icon_and_typography') ? jsx(ShowMoreHorizontalIcon, {
+    label: "",
+    color: "currentColor"
+  }) : jsx(EditorMoreIcon, {
     label: ""
   })
 }));

package/dist/es2019/ui/ToolbarInsertBlock/styles.js

@@ -1,6 +1,5 @@
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css } from '@emotion/react';
-
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 export const triggerWrapper = css({
   width: '42px',
@@ -14,4 +13,9 @@ export const triggerWrapper = css({
   '> div > div': {
     display: 'flex'
   }
+});
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
+export const expandWrapperStyle = css({
+  marginLeft: "var(--ds-space-050, 4px)"
 });

package/dist/esm/assets/switch.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import SVG from '@atlaskit/icon/svg';
+export default function SwitchIcon() {
+  return /*#__PURE__*/React.createElement(SVG, {
+    label: ""
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M6.003 16H8.998C9.26322 16 9.51757 15.8947 9.70511 15.7071C9.89264 15.5196 9.998 15.2652 9.998 15C9.998 14.7348 9.89264 14.4805 9.70511 14.2929C9.51757 14.1054 9.26322 14 8.998 14H5.102C4.494 14 4 14.493 4 15.1V19C4 19.2656 4.10551 19.5204 4.29333 19.7082C4.48115 19.896 4.73589 20.0015 5.0015 20.0015C5.26711 20.0015 5.52185 19.896 5.70967 19.7082C5.89748 19.5204 6.003 19.2656 6.003 19V16Z",
+    fill: "var(--ds-icon, #44546F)"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M18.018 14.572C16.989 16.649 14.807 18 12.37 18C10.104 18 8.051 16.833 6.945 14.98C6.659 14.5 6.023 14.334 5.524 14.609C5.40677 14.6709 5.30331 14.7559 5.21991 14.8589C5.13651 14.9619 5.0749 15.0808 5.0388 15.2083C5.00271 15.3359 4.99289 15.4694 5.00994 15.6009C5.027 15.7323 5.07056 15.8589 5.138 15.973C6.611 18.443 9.35 20 12.37 20C15.618 20 18.528 18.198 19.899 15.43C20.146 14.932 19.925 14.335 19.406 14.098C18.886 13.861 18.265 14.073 18.018 14.572Z",
+    fill: "var(--ds-icon, #44546F)"
+  }), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M15.002 10L18.898 10C19.506 10 20 9.50703 20 8.90003V5.00003C20 4.73441 19.8945 4.47968 19.7067 4.29186C19.5188 4.10404 19.2641 3.99853 18.9985 3.99853C18.7329 3.99853 18.4782 4.10404 18.2903 4.29186C18.1025 4.47968 17.997 4.73441 17.997 5.00003V8.00003H15.002C14.7368 8.00003 14.4824 8.10538 14.2949 8.29292C14.1074 8.48046 14.002 8.73481 14.002 9.00003C14.002 9.26524 14.1074 9.5196 14.2949 9.70713C14.4824 9.89467 14.7368 10 15.002 10Z",
+    fill: "var(--ds-icon, #44546F)"
+  }), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M4.596 9.90303C5.116 10.14 5.736 9.92803 5.983 9.42903C7.012 7.35203 9.193 6.00103 11.63 6.00103C13.896 6.00103 15.95 7.16803 17.055 9.02203C17.1988 9.25438 17.4265 9.42245 17.6909 9.49135C17.9553 9.56024 18.2361 9.52468 18.475 9.39203C18.975 9.11803 19.148 8.50703 18.862 8.02803C17.389 5.55803 14.65 4.00103 11.63 4.00103C8.382 4.00103 5.472 5.80303 4.102 8.57103C4.03537 8.70353 4.00045 8.84971 4 8.99803C4.00188 9.1902 4.05909 9.37775 4.16479 9.53825C4.27049 9.69875 4.4202 9.8254 4.596 9.90303Z",
+    fill: "var(--ds-icon, #44546F)"
+  }));
+}

package/dist/esm/plugin.js

@@ -1,9 +1,11 @@
 import React, { useLayoutEffect } from 'react';
 import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
+import { toolbarInsertBlockMessages as messages } from '@atlaskit/editor-common/messages';
 import { WithProviders } from '@atlaskit/editor-common/provider-factory';
 import { ToolbarSize } from '@atlaskit/editor-common/types';
 import { BLOCK_QUOTE, CODE_BLOCK, PANEL } from '@atlaskit/editor-plugin-block-type/consts';
+import SwitchIcon from './assets/switch';
 import ToolbarInsertBlock from './ui/ToolbarInsertBlock';
 var toolbarSizeToButtons = function toolbarSizeToButtons(toolbarSize) {
   switch (toolbarSize) {
@@ -104,6 +106,28 @@ export var insertBlockPlugin = function insertBlockPlugin(_ref) {
         toggle();
       }
     },
+    pluginsOptions: {
+      // This is added for basic text transformations experiment.
+      // This may not be the most ideal plugin to add this to, but it is suitable for experiment purpose
+      // as relevant plugin dependencies are already set up.
+      // If we decide to ship the feature, we will consider a separate plugin if needed.
+      // Experiment one-pager: https://hello.atlassian.net/wiki/spaces/ETM/pages/3931754727/Experiment+Elements+Basic+Text+Transformations
+      selectionToolbar: function selectionToolbar(_, intl) {
+        var _api$featureFlags;
+        if (!(api !== null && api !== void 0 && (_api$featureFlags = api.featureFlags) !== null && _api$featureFlags !== void 0 && (_api$featureFlags = _api$featureFlags.sharedState.currentState()) !== null && _api$featureFlags !== void 0 && _api$featureFlags.basicTextTransformations)) {
+          return;
+        }
+        return {
+          items: [{
+            type: 'dropdown',
+            title: intl.formatMessage(messages.turnInto),
+            iconBefore: SwitchIcon,
+            options: []
+          }],
+          rank: -9
+        };
+      }
+    },
     usePluginHook: function usePluginHook() {
       useLayoutEffect(function () {
         return function () {

package/dist/esm/ui/ToolbarInsertBlock/dropdown-button.js

@@ -9,17 +9,32 @@ import { jsx } from '@emotion/react';
 import { ToolTipContent } from '@atlaskit/editor-common/keymaps';
 import { expandIconWrapperStyle } from '@atlaskit/editor-common/styles';
 import { ToolbarButton } from '@atlaskit/editor-common/ui-menu';
+import AddIcon from '@atlaskit/icon/core/migration/add--editor-add';
 import ExpandIcon from '@atlaskit/icon/glyph/chevron-down';
-import AddIcon from '@atlaskit/icon/glyph/editor/add';
-import { triggerWrapper } from './styles';
+import { default as AddIconLegacy } from '@atlaskit/icon/glyph/editor/add';
+import ChevronDownIcon from '@atlaskit/icon/utility/migration/chevron-down';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { expandWrapperStyle, triggerWrapper } from './styles';
 var DropDownButtonIcon = /*#__PURE__*/React.memo(function (props) {
   return (
     // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
     jsx("span", {
       css: triggerWrapper
-    }, jsx(AddIcon, {
+    }, fg('platform_editor_migration_icon_and_typography') ? jsx(AddIcon, {
+      label: props.label,
+      color: "currentColor"
+    }) : jsx(AddIconLegacy, {
       label: props.label
-    }), jsx("span", {
+    }), fg('platform_editor_migration_icon_and_typography') ?
+    //eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
+    jsx("span", {
+      css: expandWrapperStyle
+    }, jsx(ChevronDownIcon, {
+      label: "",
+      color: "currentColor"
+    })) :
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
+    jsx("span", {
       css: expandIconWrapperStyle
     }, jsx(ExpandIcon, {
       label: ""

package/dist/esm/ui/ToolbarInsertBlock/item.js

@@ -9,24 +9,37 @@ import { jsx } from '@emotion/react';
 import memoizeOne from 'memoize-one';
 import { addLink, getAriaKeyshortcuts, toggleTable, tooltip } from '@atlaskit/editor-common/keymaps';
 import { shortcutStyle } from '@atlaskit/editor-shared-styles/shortcut';
+import AngleBracketsIcon from '@atlaskit/icon/core/migration/angle-brackets--editor-code';
+import CalendarIcon from '@atlaskit/icon/core/migration/calendar--editor-date';
+import CheckboxCheckedIcon from '@atlaskit/icon/core/migration/checkbox-checked--editor-task';
+import DecisionIcon from '@atlaskit/icon/core/migration/decision--editor-decision';
+import EmojiIcon from '@atlaskit/icon/core/migration/emoji--editor-emoji';
+import ImageIcon from '@atlaskit/icon/core/migration/image--editor-image';
+import InformationIcon from '@atlaskit/icon/core/migration/information--editor-info';
+import LinkIcon from '@atlaskit/icon/core/migration/link--editor-link';
+import MentionIcon from '@atlaskit/icon/core/migration/mention--editor-mention';
+import QuotationMarkIcon from '@atlaskit/icon/core/migration/quotation-mark--quote';
+import ShowMoreHorizontalIcon from '@atlaskit/icon/core/migration/show-more-horizontal--editor-more';
 import ExpandIcon from '@atlaskit/icon/glyph/chevron-down';
 import ExpandNodeIcon from '@atlaskit/icon/glyph/chevron-right-circle';
 import CodeIcon from '@atlaskit/icon/glyph/editor/code';
 import DateIcon from '@atlaskit/icon/glyph/editor/date';
-import DecisionIcon from '@atlaskit/icon/glyph/editor/decision';
-import EmojiIcon from '@atlaskit/icon/glyph/editor/emoji';
+import { default as DecisionIconLegacy } from '@atlaskit/icon/glyph/editor/decision';
+import { default as EmojiIconLegacy } from '@atlaskit/icon/glyph/editor/emoji';
 import HorizontalRuleIcon from '@atlaskit/icon/glyph/editor/horizontal-rule';
 import EditorImageIcon from '@atlaskit/icon/glyph/editor/image';
 import InfoIcon from '@atlaskit/icon/glyph/editor/info';
 import LayoutTwoEqualIcon from '@atlaskit/icon/glyph/editor/layout-two-equal';
-import LinkIcon from '@atlaskit/icon/glyph/editor/link';
-import MentionIcon from '@atlaskit/icon/glyph/editor/mention';
+import { default as LinkIconLegacy } from '@atlaskit/icon/glyph/editor/link';
+import { default as MentionIconLegacy } from '@atlaskit/icon/glyph/editor/mention';
 import EditorMoreIcon from '@atlaskit/icon/glyph/editor/more';
 import TableIcon from '@atlaskit/icon/glyph/editor/table';
 import TaskIcon from '@atlaskit/icon/glyph/editor/task';
 import PlaceholderTextIcon from '@atlaskit/icon/glyph/media-services/text';
 import QuoteIcon from '@atlaskit/icon/glyph/quote';
 import StatusIcon from '@atlaskit/icon/glyph/status';
+import ChevronDownIcon from '@atlaskit/icon/utility/migration/chevron-down';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { shallowEquals } from './shallow-equals';
 var from = function from(init) {
   return {
@@ -60,7 +73,7 @@ export var action = mem(function (init) {
     disabled: init.disabled,
     name: 'action',
     shortcut: '[]',
-    Icon: TaskIcon,
+    Icon: fg('platform_editor_migration_icon_and_typography') ? CheckboxCheckedIcon : TaskIcon,
     'aria-keyshortcuts': '[ ] Space'
   });
 });
@@ -71,7 +84,7 @@ export var link = mem(function (init) {
     disabled: init.disabled,
     name: 'link',
     shortcut: tooltip(addLink),
-    Icon: LinkIcon,
+    Icon: fg('platform_editor_migration_icon_and_typography') ? LinkIcon : LinkIconLegacy,
     'aria-haspopup': init['aria-haspopup'],
     'aria-keyshortcuts': getAriaKeyshortcuts(addLink)
   });
@@ -82,7 +95,7 @@ export var media = mem(function (init) {
     tooltipDescription: init.tooltipDescription,
     disabled: init.disabled,
     name: 'media',
-    Icon: EditorImageIcon
+    Icon: fg('platform_editor_migration_icon_and_typography') ? ImageIcon : EditorImageIcon
   });
 });
 export var imageUpload = mem(function (init) {
@@ -91,7 +104,7 @@ export var imageUpload = mem(function (init) {
     tooltipDescription: init.tooltipDescription,
     disabled: init.disabled,
     name: 'image upload',
-    Icon: EditorImageIcon
+    Icon: fg('platform_editor_migration_icon_and_typography') ? ImageIcon : EditorImageIcon
   });
 });
 export var mention = mem(function (init) {
@@ -100,7 +113,7 @@ export var mention = mem(function (init) {
     tooltipDescription: init.tooltipDescription,
     disabled: init.disabled,
     name: 'mention',
-    Icon: MentionIcon,
+    Icon: fg('platform_editor_migration_icon_and_typography') ? MentionIcon : MentionIconLegacy,
     shortcut: '@',
     'aria-haspopup': init['aria-haspopup'],
     'aria-keyshortcuts': 'Shift+2 Space'
@@ -112,7 +125,7 @@ export var emoji = mem(function (init) {
     tooltipDescription: init.tooltipDescription,
     disabled: init.disabled,
     name: 'emoji',
-    Icon: EmojiIcon,
+    Icon: fg('platform_editor_migration_icon_and_typography') ? EmojiIcon : EmojiIconLegacy,
     shortcut: ':',
     'aria-haspopup': init['aria-haspopup'],
     'aria-keyshortcuts': 'Shift+;'
@@ -135,7 +148,12 @@ export var tableSelector = mem(function (init) {
     tooltipDescription: init.tooltipDescription,
     disabled: init.disabled,
     name: 'table selector',
-    Icon: ExpandIcon
+    Icon: fg('platform_editor_migration_icon_and_typography') ? function () {
+      return jsx(ChevronDownIcon, {
+        label: "",
+        color: "currentColor"
+      });
+    } : ExpandIcon
   });
 });
 export var layout = mem(function (init) {
@@ -153,7 +171,7 @@ export var codeblock = mem(function (init) {
     tooltipDescription: init.tooltipDescription,
     disabled: init.disabled,
     name: 'codeblock',
-    Icon: CodeIcon,
+    Icon: fg('platform_editor_migration_icon_and_typography') ? AngleBracketsIcon : CodeIcon,
     shortcut: init.shortcut,
     'aria-keyshortcuts': getAriaKeyshortcuts(init.shortcut)
   });
@@ -164,7 +182,7 @@ export var panel = mem(function (init) {
     tooltipDescription: init.tooltipDescription,
     disabled: init.disabled,
     name: 'panel',
-    Icon: InfoIcon,
+    Icon: fg('platform_editor_migration_icon_and_typography') ? InformationIcon : InfoIcon,
     shortcut: init.shortcut,
     'aria-keyshortcuts': getAriaKeyshortcuts(init.shortcut)
   });
@@ -175,7 +193,7 @@ export var blockquote = mem(function (init) {
     tooltipDescription: init.tooltipDescription,
     disabled: init.disabled,
     name: 'blockquote',
-    Icon: QuoteIcon,
+    Icon: fg('platform_editor_migration_icon_and_typography') ? QuotationMarkIcon : QuoteIcon,
     shortcut: init.shortcut,
     'aria-keyshortcuts': 'Shift+. Space'
   });
@@ -186,7 +204,7 @@ export var decision = mem(function (init) {
     tooltipDescription: init.tooltipDescription,
     disabled: init.disabled,
     name: 'decision',
-    Icon: DecisionIcon,
+    Icon: fg('platform_editor_migration_icon_and_typography') ? DecisionIcon : DecisionIconLegacy,
     shortcut: '<>',
     'aria-keyshortcuts': 'Shift+, Shift+. Space'
   });
@@ -217,7 +235,7 @@ export var date = mem(function (init) {
     tooltipDescription: init.tooltipDescription,
     disabled: init.disabled,
     name: 'date',
-    Icon: DateIcon,
+    Icon: fg('platform_editor_migration_icon_and_typography') ? CalendarIcon : DateIcon,
     shortcut: '//',
     'aria-keyshortcuts': '/ / Enter'
   });
@@ -251,7 +269,10 @@ export var more = mem(function (init) {
     disabled: init.disabled,
     name: 'macro',
     Icon: function Icon() {
-      return jsx(EditorMoreIcon, {
+      return fg('platform_editor_migration_icon_and_typography') ? jsx(ShowMoreHorizontalIcon, {
+        label: "",
+        color: "currentColor"
+      }) : jsx(EditorMoreIcon, {
         label: ""
       });
     }

package/dist/esm/ui/ToolbarInsertBlock/styles.js

@@ -1,6 +1,5 @@
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css } from '@emotion/react';
-
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 export var triggerWrapper = css({
   width: '42px',
@@ -14,4 +13,9 @@ export var triggerWrapper = css({
   '> div > div': {
     display: 'flex'
   }
+});
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
+export var expandWrapperStyle = css({
+  marginLeft: "var(--ds-space-050, 4px)"
 });

package/dist/types/assets/switch.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export default function SwitchIcon(): JSX.Element;

package/dist/types/types.d.ts

@@ -6,6 +6,7 @@ import type { DatePlugin } from '@atlaskit/editor-plugin-date';
 import type { EmojiPlugin } from '@atlaskit/editor-plugin-emoji';
 import type { ExpandPlugin } from '@atlaskit/editor-plugin-expand';
 import type { ExtensionPlugin } from '@atlaskit/editor-plugin-extension';
+import type { FeatureFlagsPlugin } from '@atlaskit/editor-plugin-feature-flags';
 import type { HyperlinkPlugin } from '@atlaskit/editor-plugin-hyperlink';
 import type { ImageUploadPlugin } from '@atlaskit/editor-plugin-image-upload';
 import type { LayoutPlugin } from '@atlaskit/editor-plugin-layout';
@@ -41,5 +42,6 @@ export type InsertBlockPluginDependencies = [
     OptionalPlugin<PlaceholderTextPlugin>,
     OptionalPlugin<ExtensionPlugin>,
     OptionalPlugin<TasksAndDecisionsPlugin>,
-    OptionalPlugin<PrimaryToolbarPlugin>
+    OptionalPlugin<PrimaryToolbarPlugin>,
+    OptionalPlugin<FeatureFlagsPlugin>
 ];

package/dist/types/ui/ToolbarInsertBlock/styles.d.ts

@@ -1 +1,2 @@
 export declare const triggerWrapper: import("@emotion/react").SerializedStyles;
+export declare const expandWrapperStyle: import("@emotion/react").SerializedStyles;

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

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export default function SwitchIcon(): JSX.Element;

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

@@ -6,6 +6,7 @@ import type { DatePlugin } from '@atlaskit/editor-plugin-date';
 import type { EmojiPlugin } from '@atlaskit/editor-plugin-emoji';
 import type { ExpandPlugin } from '@atlaskit/editor-plugin-expand';
 import type { ExtensionPlugin } from '@atlaskit/editor-plugin-extension';
+import type { FeatureFlagsPlugin } from '@atlaskit/editor-plugin-feature-flags';
 import type { HyperlinkPlugin } from '@atlaskit/editor-plugin-hyperlink';
 import type { ImageUploadPlugin } from '@atlaskit/editor-plugin-image-upload';
 import type { LayoutPlugin } from '@atlaskit/editor-plugin-layout';
@@ -41,5 +42,6 @@ export type InsertBlockPluginDependencies = [
     OptionalPlugin<PlaceholderTextPlugin>,
     OptionalPlugin<ExtensionPlugin>,
     OptionalPlugin<TasksAndDecisionsPlugin>,
-    OptionalPlugin<PrimaryToolbarPlugin>
+    OptionalPlugin<PrimaryToolbarPlugin>,
+    OptionalPlugin<FeatureFlagsPlugin>
 ];

package/dist/types-ts4.5/ui/ToolbarInsertBlock/styles.d.ts

@@ -1 +1,2 @@
 export declare const triggerWrapper: import("@emotion/react").SerializedStyles;
+export declare const expandWrapperStyle: import("@emotion/react").SerializedStyles;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-insert-block",
-	"version": "1.7.0",
+	"version": "1.8.0",
 	"description": "Insert block plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -33,7 +33,7 @@
 		".": "./src/index.ts"
 	},
 	"dependencies": {
-		"@atlaskit/editor-common": "^87.3.0",
+		"@atlaskit/editor-common": "^87.4.0",
 		"@atlaskit/editor-plugin-analytics": "^1.6.0",
 		"@atlaskit/editor-plugin-block-type": "^3.11.0",
 		"@atlaskit/editor-plugin-code-block": "^3.2.0",
@@ -41,6 +41,7 @@
 		"@atlaskit/editor-plugin-emoji": "^2.2.0",
 		"@atlaskit/editor-plugin-expand": "^2.2.0",
 		"@atlaskit/editor-plugin-extension": "^1.12.0",
+		"@atlaskit/editor-plugin-feature-flags": "^1.2.0",
 		"@atlaskit/editor-plugin-hyperlink": "^2.7.0",
 		"@atlaskit/editor-plugin-image-upload": "^1.2.0",
 		"@atlaskit/editor-plugin-layout": "^1.6.0",
@@ -58,10 +59,11 @@
 		"@atlaskit/editor-prosemirror": "5.0.1",
 		"@atlaskit/editor-shared-styles": "^2.13.0",
 		"@atlaskit/emoji": "^67.7.0",
-		"@atlaskit/icon": "^22.9.0",
+		"@atlaskit/icon": "^22.10.0",
+		"@atlaskit/platform-feature-flags": "^0.3.0",
 		"@atlaskit/primitives": "^11.1.0",
 		"@atlaskit/theme": "^12.11.0",
-		"@atlaskit/tokens": "^1.56.0",
+		"@atlaskit/tokens": "^1.57.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1",
 		"bind-event-listener": "^3.0.0",
@@ -114,5 +116,10 @@
 				"import-no-extraneous-disable-for-examples-and-docs"
 			]
 		}
+	},
+	"platform-feature-flags": {
+		"platform_editor_migration_icon_and_typography": {
+			"type": "boolean"
+		}
 	}
 }