@atlaskit/editor-common 87.3.4 → 87.4.0

package/CHANGELOG.md

@@ -1,5 +1,29 @@
 # @atlaskit/editor-common
 
+## 87.4.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
+
+- [#126418](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/126418)
+  [`dc10688cd20b6`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/dc10688cd20b6) -
+  [ux] Migrate typography with new ADS token and primitive
+- Updated dependencies
+
+## 87.3.5
+
+### Patch Changes
+
+- [#126974](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/126974)
+  [`8730c454c41f7`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/8730c454c41f7) -
+  [ux] [ED-24386] Clean up FF platform.editor.review-text-highlighting-styling
+
 ## 87.3.4
 
 ### Patch Changes

package/dist/cjs/element-browser/components/ElementList/EmptyState.js

@@ -8,6 +8,7 @@ exports.default = EmptyState;
 var _react = require("@emotion/react");
 var _reactIntlNext = require("react-intl-next");
 var _new = require("@atlaskit/button/new");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _primitives = require("@atlaskit/primitives");
 var _NotFoundIllustration = _interopRequireDefault(require("./NotFoundIllustration"));
 /**
@@ -22,7 +23,7 @@ function EmptyState(_ref) {
     css: emptyStateWrapper,
     "data-testid": "empty-state-wrapper"
   }, (0, _react.jsx)(_NotFoundIllustration.default, null), (0, _react.jsx)("div", {
-    css: emptyStateHeading
+    css: [emptyStateHeading, (0, _platformFeatureFlags.fg)('platform_editor_migration_icon_and_typography') ? emptyStateHeadingFontToken : emptyStateHeadingFont]
   }, (0, _react.jsx)(_reactIntlNext.FormattedMessage, {
     id: "fabric.editor.elementbrowser.search.empty-state.heading",
     defaultMessage: "Nothing matches your search",
@@ -46,12 +47,17 @@ function EmptyState(_ref) {
     description: "Empty state sub-heading external link"
   })))));
 }
-var emptyStateHeading = (0, _react.css)({
+var emptyStateHeadingFontToken = (0, _react.css)({
+  font: "var(--ds-font-heading-medium, normal 500 20px/24px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
+});
+var emptyStateHeadingFont = (0, _react.css)({
   fontSize: '1.42857em',
   lineHeight: 1.2,
-  color: "var(--ds-text, rgb(23, 43, 77))",
   fontWeight: 500,
-  letterSpacing: '-0.008em',
+  letterSpacing: '-0.008em'
+});
+var emptyStateHeading = (0, _react.css)({
+  color: "var(--ds-text, rgb(23, 43, 77))",
   marginTop: "var(--ds-space-300, 24px)"
 });
 var emptyStateSubHeading = (0, _react.css)({

package/dist/cjs/link/LinkPicker/HyperlinkAddToolbar/HyperlinkAddToolbar.js

@@ -26,6 +26,7 @@ var _adfSchema = require("@atlaskit/adf-schema");
 var _analyticsNext = require("@atlaskit/analytics-next");
 var _ = _interopRequireDefault(require("@atlaskit/icon-object/glyph/page/16"));
 var _crossCircle = _interopRequireDefault(require("@atlaskit/icon/glyph/cross-circle"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _primitives = require("@atlaskit/primitives");
 var _colors = require("@atlaskit/theme/colors");
 var _constants = require("@atlaskit/theme/constants");
@@ -76,10 +77,16 @@ var containerPadding = (0, _react2.css)({
 var textLabelMargin = (0, _react2.css)({
   marginTop: "var(--ds-space-150, 12px)"
 });
-var inputLabel = (0, _react2.css)({
+var inputLabelFontToken = (0, _react2.css)({
+  font: "var(--ds-font-body-small, normal 400 11px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
+  fontWeight: "var(--ds-font-weight-medium, 500)"
+});
+var inputLabelFont = (0, _react2.css)({
   fontSize: "".concat((0, _constants.fontSizeSmall)(), "px"),
+  fontWeight: 500
+});
+var inputLabel = (0, _react2.css)({
   color: "var(--ds-text-subtlest, ".concat(_colors.N200, ")"),
-  fontWeight: 500,
   paddingBottom: "var(--ds-space-050, 4px)"
 });
 var inputWrapperPosition = (0, _react2.css)({
@@ -854,7 +861,7 @@ var HyperlinkLinkAddToolbar = exports.HyperlinkLinkAddToolbar = /*#__PURE__*/fun
         ref: this.wrapperRef
       }, (0, _react2.jsx)("label", {
         htmlFor: linkSearchInputId,
-        css: inputLabel
+        css: [inputLabel, (0, _platformFeatureFlags.fg)('platform_editor_migration_icon_and_typography') ? inputLabelFontToken : inputLabelFont]
       }, formatMessage(messages.linkVisibleLabel)), (0, _react2.jsx)("div", {
         css: [_ToolbarComponents.inputWrapper, inputWrapperPosition]
       }, screenReaderText && (0, _react2.jsx)(_ui.Announcer, {
@@ -898,7 +905,7 @@ var HyperlinkLinkAddToolbar = exports.HyperlinkLinkAddToolbar = /*#__PURE__*/fun
         primaryColor: "var(--ds-icon-subtle, #626F86)"
       }))))), (0, _react2.jsx)("label", {
         htmlFor: displayTextInputId,
-        css: [inputLabel, textLabelMargin]
+        css: [inputLabel, textLabelMargin, (0, _platformFeatureFlags.fg)('platform_editor_migration_icon_and_typography') ? inputLabelFontToken : inputLabelFont]
       }, formatMessage(messages.textVisibleLabel)), (0, _react2.jsx)("div", {
         css: [_ToolbarComponents.inputWrapper, inputWrapperPosition]
       }, (0, _react2.jsx)(_ui.PanelTextInput, {

package/dist/cjs/messages/block-type.js

@@ -151,6 +151,11 @@ var messages = exports.messages = (0, _reactIntlNext.defineMessages)({
     defaultMessage: 'Add a note with an emoji and colored background',
     description: 'Visually distinguishes your panel by adding a emoji icon and background color '
   },
+  panel: {
+    id: 'fabric.editor.panel',
+    defaultMessage: 'Panel',
+    description: 'Visually distinguishes your text by adding a panel'
+  },
   other: {
     id: 'fabric.editor.other',
     defaultMessage: 'Others...',

package/dist/cjs/messages/insert-block.js

@@ -230,5 +230,10 @@ var toolbarInsertBlockMessages = exports.toolbarInsertBlockMessages = (0, _react
     id: 'fabric.editor.recordLoomShortTitle',
     defaultMessage: 'Record',
     description: 'Record'
+  },
+  turnInto: {
+    id: 'fabric.editor.turnInto',
+    defaultMessage: 'Turn into',
+    description: 'Turn selected texts into another element containing those texts'
   }
 });

package/dist/cjs/monitoring/error.js

@@ -17,7 +17,7 @@ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return
 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; }
 var SENTRY_DSN = 'https://0b10c8e02fb44d8796c047b102c9bee8@o55978.ingest.sentry.io/4505129224110080';
 var packageName = 'editor-common'; // Sentry doesn't accept '/' in its releases https://docs.sentry.io/platforms/javascript/configuration/releases/
-var packageVersion = "87.3.4";
+var packageVersion = "87.4.0";
 var sanitiseSentryEvents = function sanitiseSentryEvents(data, _hint) {
   // Remove URL as it has UGC
   // TODO: Sanitise the URL instead of just removing it

package/dist/cjs/styles/shared/background-color.js

@@ -5,12 +5,11 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.backgroundColorStyles = void 0;
 var _react = require("@emotion/react");
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 var backgroundColorStyles = exports.backgroundColorStyles = function backgroundColorStyles() {
-  return (0, _platformFeatureFlags.getBooleanFF)('platform.editor.review-text-highlighting-styling') ? (0, _react.css)({
+  return (0, _react.css)({
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
     '.fabric-background-color-mark': {
       backgroundColor: 'var(--custom-palette-color, inherit)',
@@ -31,20 +30,5 @@ var backgroundColorStyles = exports.backgroundColorStyles = function backgroundC
     '.fabric-background-color-mark .ak-editor-annotation': {
       backgroundColor: 'unset'
     }
-  }) : (0, _react.css)({
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
-    '.fabric-background-color-mark': {
-      backgroundColor: 'var(--custom-palette-color, inherit)'
-    },
-    // Don't show text highlight styling when there is a hyperlink
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
-    'a .fabric-background-color-mark': {
-      backgroundColor: 'unset'
-    },
-    // Don't show text highlight styling when there is an inline comment
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
-    '.fabric-background-color-mark .ak-editor-annotation': {
-      backgroundColor: 'unset'
-    }
   });
 };

package/dist/cjs/ui/DropList/index.js

@@ -23,7 +23,7 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
  * @jsx jsx
  */ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 var packageName = "@atlaskit/editor-common";
-var packageVersion = "87.3.4";
+var packageVersion = "87.4.0";
 var halfFocusRing = 1;
 var dropOffset = '0, 8';
 var DropList = /*#__PURE__*/function (_Component) {

package/dist/es2019/element-browser/components/ElementList/EmptyState.js

@@ -6,6 +6,7 @@
 import { css, jsx } from '@emotion/react';
 import { FormattedMessage } from 'react-intl-next';
 import { LinkButton } from '@atlaskit/button/new';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { Box, xcss } from '@atlaskit/primitives';
 import NotFoundIllustration from './NotFoundIllustration';
 export default function EmptyState({
@@ -15,7 +16,7 @@ export default function EmptyState({
     css: emptyStateWrapper,
     "data-testid": "empty-state-wrapper"
   }, jsx(NotFoundIllustration, null), jsx("div", {
-    css: emptyStateHeading
+    css: [emptyStateHeading, fg('platform_editor_migration_icon_and_typography') ? emptyStateHeadingFontToken : emptyStateHeadingFont]
   }, jsx(FormattedMessage, {
     id: "fabric.editor.elementbrowser.search.empty-state.heading",
     defaultMessage: "Nothing matches your search",
@@ -39,12 +40,17 @@ export default function EmptyState({
     description: "Empty state sub-heading external link"
   })))));
 }
-const emptyStateHeading = css({
+const emptyStateHeadingFontToken = css({
+  font: "var(--ds-font-heading-medium, normal 500 20px/24px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
+});
+const emptyStateHeadingFont = css({
   fontSize: '1.42857em',
   lineHeight: 1.2,
-  color: "var(--ds-text, rgb(23, 43, 77))",
   fontWeight: 500,
-  letterSpacing: '-0.008em',
+  letterSpacing: '-0.008em'
+});
+const emptyStateHeading = css({
+  color: "var(--ds-text, rgb(23, 43, 77))",
   marginTop: "var(--ds-space-300, 24px)"
 });
 const emptyStateSubHeading = css({

package/dist/es2019/link/LinkPicker/HyperlinkAddToolbar/HyperlinkAddToolbar.js

@@ -15,6 +15,7 @@ import { isSafeUrl } from '@atlaskit/adf-schema';
 import { withAnalyticsEvents } from '@atlaskit/analytics-next';
 import Page16Icon from '@atlaskit/icon-object/glyph/page/16';
 import CrossCircleIcon from '@atlaskit/icon/glyph/cross-circle';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { Pressable, xcss } from '@atlaskit/primitives';
 import { N200 } from '@atlaskit/theme/colors';
 import { fontSizeSmall } from '@atlaskit/theme/constants';
@@ -59,10 +60,16 @@ const containerPadding = css({
 const textLabelMargin = css({
   marginTop: "var(--ds-space-150, 12px)"
 });
-const inputLabel = css({
+const inputLabelFontToken = css({
+  font: "var(--ds-font-body-small, normal 400 11px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
+  fontWeight: "var(--ds-font-weight-medium, 500)"
+});
+const inputLabelFont = css({
   fontSize: `${fontSizeSmall()}px`,
+  fontWeight: 500
+});
+const inputLabel = css({
   color: `var(--ds-text-subtlest, ${N200})`,
-  fontWeight: 500,
   paddingBottom: "var(--ds-space-050, 4px)"
 });
 const inputWrapperPosition = css({
@@ -696,7 +703,7 @@ export class HyperlinkLinkAddToolbar extends PureComponent {
       ref: this.wrapperRef
     }, jsx("label", {
       htmlFor: linkSearchInputId,
-      css: inputLabel
+      css: [inputLabel, fg('platform_editor_migration_icon_and_typography') ? inputLabelFontToken : inputLabelFont]
     }, formatMessage(messages.linkVisibleLabel)), jsx("div", {
       css: [inputWrapper, inputWrapperPosition]
     }, screenReaderText && jsx(Announcer, {
@@ -738,7 +745,7 @@ export class HyperlinkLinkAddToolbar extends PureComponent {
       primaryColor: "var(--ds-icon-subtle, #626F86)"
     }))))), jsx("label", {
       htmlFor: displayTextInputId,
-      css: [inputLabel, textLabelMargin]
+      css: [inputLabel, textLabelMargin, fg('platform_editor_migration_icon_and_typography') ? inputLabelFontToken : inputLabelFont]
     }, formatMessage(messages.textVisibleLabel)), jsx("div", {
       css: [inputWrapper, inputWrapperPosition]
     }, jsx(PanelTextInput, {

package/dist/es2019/messages/block-type.js

@@ -145,6 +145,11 @@ export const messages = defineMessages({
     defaultMessage: 'Add a note with an emoji and colored background',
     description: 'Visually distinguishes your panel by adding a emoji icon and background color '
   },
+  panel: {
+    id: 'fabric.editor.panel',
+    defaultMessage: 'Panel',
+    description: 'Visually distinguishes your text by adding a panel'
+  },
   other: {
     id: 'fabric.editor.other',
     defaultMessage: 'Others...',

package/dist/es2019/messages/insert-block.js

@@ -224,5 +224,10 @@ export const toolbarInsertBlockMessages = defineMessages({
     id: 'fabric.editor.recordLoomShortTitle',
     defaultMessage: 'Record',
     description: 'Record'
+  },
+  turnInto: {
+    id: 'fabric.editor.turnInto',
+    defaultMessage: 'Turn into',
+    description: 'Turn selected texts into another element containing those texts'
   }
 });

package/dist/es2019/monitoring/error.js

@@ -1,7 +1,7 @@
 import { isFedRamp } from './environment';
 const SENTRY_DSN = 'https://0b10c8e02fb44d8796c047b102c9bee8@o55978.ingest.sentry.io/4505129224110080';
 const packageName = 'editor-common'; // Sentry doesn't accept '/' in its releases https://docs.sentry.io/platforms/javascript/configuration/releases/
-const packageVersion = "87.3.4";
+const packageVersion = "87.4.0";
 const sanitiseSentryEvents = (data, _hint) => {
   // Remove URL as it has UGC
   // TODO: Sanitise the URL instead of just removing it

package/dist/es2019/styles/shared/background-color.js

@@ -1,10 +1,9 @@
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css } from '@emotion/react';
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 export const backgroundColorStyles = () => {
-  return getBooleanFF('platform.editor.review-text-highlighting-styling') ? css({
+  return css({
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
     '.fabric-background-color-mark': {
       backgroundColor: 'var(--custom-palette-color, inherit)',
@@ -25,20 +24,5 @@ export const backgroundColorStyles = () => {
     '.fabric-background-color-mark .ak-editor-annotation': {
       backgroundColor: 'unset'
     }
-  }) : css({
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
-    '.fabric-background-color-mark': {
-      backgroundColor: 'var(--custom-palette-color, inherit)'
-    },
-    // Don't show text highlight styling when there is a hyperlink
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
-    'a .fabric-background-color-mark': {
-      backgroundColor: 'unset'
-    },
-    // Don't show text highlight styling when there is an inline comment
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
-    '.fabric-background-color-mark .ak-editor-annotation': {
-      backgroundColor: 'unset'
-    }
   });
 };

package/dist/es2019/ui/DropList/index.js

@@ -12,7 +12,7 @@ import { createAndFireEvent, withAnalyticsContext, withAnalyticsEvents } from '@
 import { N0, N50A, N60A, N900 } from '@atlaskit/theme/colors';
 import Layer from '../Layer';
 const packageName = "@atlaskit/editor-common";
-const packageVersion = "87.3.4";
+const packageVersion = "87.4.0";
 const halfFocusRing = 1;
 const dropOffset = '0, 8';
 class DropList extends Component {

package/dist/esm/element-browser/components/ElementList/EmptyState.js

@@ -6,6 +6,7 @@
 import { css, jsx } from '@emotion/react';
 import { FormattedMessage } from 'react-intl-next';
 import { LinkButton } from '@atlaskit/button/new';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { Box, xcss } from '@atlaskit/primitives';
 import NotFoundIllustration from './NotFoundIllustration';
 export default function EmptyState(_ref) {
@@ -14,7 +15,7 @@ export default function EmptyState(_ref) {
     css: emptyStateWrapper,
     "data-testid": "empty-state-wrapper"
   }, jsx(NotFoundIllustration, null), jsx("div", {
-    css: emptyStateHeading
+    css: [emptyStateHeading, fg('platform_editor_migration_icon_and_typography') ? emptyStateHeadingFontToken : emptyStateHeadingFont]
   }, jsx(FormattedMessage, {
     id: "fabric.editor.elementbrowser.search.empty-state.heading",
     defaultMessage: "Nothing matches your search",
@@ -38,12 +39,17 @@ export default function EmptyState(_ref) {
     description: "Empty state sub-heading external link"
   })))));
 }
-var emptyStateHeading = css({
+var emptyStateHeadingFontToken = css({
+  font: "var(--ds-font-heading-medium, normal 500 20px/24px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
+});
+var emptyStateHeadingFont = css({
   fontSize: '1.42857em',
   lineHeight: 1.2,
-  color: "var(--ds-text, rgb(23, 43, 77))",
   fontWeight: 500,
-  letterSpacing: '-0.008em',
+  letterSpacing: '-0.008em'
+});
+var emptyStateHeading = css({
+  color: "var(--ds-text, rgb(23, 43, 77))",
   marginTop: "var(--ds-space-300, 24px)"
 });
 var emptyStateSubHeading = css({

package/dist/esm/link/LinkPicker/HyperlinkAddToolbar/HyperlinkAddToolbar.js

@@ -27,6 +27,7 @@ import { isSafeUrl } from '@atlaskit/adf-schema';
 import { withAnalyticsEvents } from '@atlaskit/analytics-next';
 import Page16Icon from '@atlaskit/icon-object/glyph/page/16';
 import CrossCircleIcon from '@atlaskit/icon/glyph/cross-circle';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { Pressable, xcss } from '@atlaskit/primitives';
 import { N200 } from '@atlaskit/theme/colors';
 import { fontSizeSmall } from '@atlaskit/theme/constants';
@@ -71,10 +72,16 @@ var containerPadding = css({
 var textLabelMargin = css({
   marginTop: "var(--ds-space-150, 12px)"
 });
-var inputLabel = css({
+var inputLabelFontToken = css({
+  font: "var(--ds-font-body-small, normal 400 11px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
+  fontWeight: "var(--ds-font-weight-medium, 500)"
+});
+var inputLabelFont = css({
   fontSize: "".concat(fontSizeSmall(), "px"),
+  fontWeight: 500
+});
+var inputLabel = css({
   color: "var(--ds-text-subtlest, ".concat(N200, ")"),
-  fontWeight: 500,
   paddingBottom: "var(--ds-space-050, 4px)"
 });
 var inputWrapperPosition = css({
@@ -849,7 +856,7 @@ export var HyperlinkLinkAddToolbar = /*#__PURE__*/function (_PureComponent) {
         ref: this.wrapperRef
       }, jsx("label", {
         htmlFor: linkSearchInputId,
-        css: inputLabel
+        css: [inputLabel, fg('platform_editor_migration_icon_and_typography') ? inputLabelFontToken : inputLabelFont]
       }, formatMessage(messages.linkVisibleLabel)), jsx("div", {
         css: [inputWrapper, inputWrapperPosition]
       }, screenReaderText && jsx(Announcer, {
@@ -893,7 +900,7 @@ export var HyperlinkLinkAddToolbar = /*#__PURE__*/function (_PureComponent) {
         primaryColor: "var(--ds-icon-subtle, #626F86)"
       }))))), jsx("label", {
         htmlFor: displayTextInputId,
-        css: [inputLabel, textLabelMargin]
+        css: [inputLabel, textLabelMargin, fg('platform_editor_migration_icon_and_typography') ? inputLabelFontToken : inputLabelFont]
       }, formatMessage(messages.textVisibleLabel)), jsx("div", {
         css: [inputWrapper, inputWrapperPosition]
       }, jsx(PanelTextInput, {

package/dist/esm/messages/block-type.js

@@ -145,6 +145,11 @@ export var messages = defineMessages({
     defaultMessage: 'Add a note with an emoji and colored background',
     description: 'Visually distinguishes your panel by adding a emoji icon and background color '
   },
+  panel: {
+    id: 'fabric.editor.panel',
+    defaultMessage: 'Panel',
+    description: 'Visually distinguishes your text by adding a panel'
+  },
   other: {
     id: 'fabric.editor.other',
     defaultMessage: 'Others...',

package/dist/esm/messages/insert-block.js

@@ -224,5 +224,10 @@ export var toolbarInsertBlockMessages = defineMessages({
     id: 'fabric.editor.recordLoomShortTitle',
     defaultMessage: 'Record',
     description: 'Record'
+  },
+  turnInto: {
+    id: 'fabric.editor.turnInto',
+    defaultMessage: 'Turn into',
+    description: 'Turn selected texts into another element containing those texts'
   }
 });

package/dist/esm/monitoring/error.js

@@ -7,7 +7,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 import { isFedRamp } from './environment';
 var SENTRY_DSN = 'https://0b10c8e02fb44d8796c047b102c9bee8@o55978.ingest.sentry.io/4505129224110080';
 var packageName = 'editor-common'; // Sentry doesn't accept '/' in its releases https://docs.sentry.io/platforms/javascript/configuration/releases/
-var packageVersion = "87.3.4";
+var packageVersion = "87.4.0";
 var sanitiseSentryEvents = function sanitiseSentryEvents(data, _hint) {
   // Remove URL as it has UGC
   // TODO: Sanitise the URL instead of just removing it

package/dist/esm/styles/shared/background-color.js

@@ -1,10 +1,9 @@
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css } from '@emotion/react';
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 export var backgroundColorStyles = function backgroundColorStyles() {
-  return getBooleanFF('platform.editor.review-text-highlighting-styling') ? css({
+  return css({
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
     '.fabric-background-color-mark': {
       backgroundColor: 'var(--custom-palette-color, inherit)',
@@ -25,20 +24,5 @@ export var backgroundColorStyles = function backgroundColorStyles() {
     '.fabric-background-color-mark .ak-editor-annotation': {
       backgroundColor: 'unset'
     }
-  }) : css({
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
-    '.fabric-background-color-mark': {
-      backgroundColor: 'var(--custom-palette-color, inherit)'
-    },
-    // Don't show text highlight styling when there is a hyperlink
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
-    'a .fabric-background-color-mark': {
-      backgroundColor: 'unset'
-    },
-    // Don't show text highlight styling when there is an inline comment
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
-    '.fabric-background-color-mark .ak-editor-annotation': {
-      backgroundColor: 'unset'
-    }
   });
 };

package/dist/esm/ui/DropList/index.js

@@ -20,7 +20,7 @@ import { createAndFireEvent, withAnalyticsContext, withAnalyticsEvents } from '@
 import { N0, N50A, N60A, N900 } from '@atlaskit/theme/colors';
 import Layer from '../Layer';
 var packageName = "@atlaskit/editor-common";
-var packageVersion = "87.3.4";
+var packageVersion = "87.4.0";
 var halfFocusRing = 1;
 var dropOffset = '0, 8';
 var DropList = /*#__PURE__*/function (_Component) {

package/dist/types/messages/block-type.d.ts

@@ -144,6 +144,11 @@ export declare const messages: {
         defaultMessage: string;
         description: string;
     };
+    panel: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
     other: {
         id: string;
         defaultMessage: string;

package/dist/types/messages/insert-block.d.ts

@@ -224,4 +224,9 @@ export declare const toolbarInsertBlockMessages: {
         defaultMessage: string;
         description: string;
     };
+    turnInto: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
 };

package/dist/types/types/feature-flags.d.ts

@@ -327,6 +327,14 @@ export type FeatureFlags = {
 
      */
     moreElementsInQuickInsertView?: boolean;
+    /**
+     * @description
+     * Enables basic text transformations options in floating toolbar
+     *
+     * @see https://product-fabric.atlassian.net/browse/ED-24447
+     * @default false
+     */
+    basicTextTransformations?: boolean;
 };
 export type FeatureFlagKey = keyof FeatureFlags;
 export type GetEditorFeatureFlags = () => FeatureFlags;

package/dist/types/types/floating-toolbar.d.ts

@@ -202,6 +202,10 @@ export type FloatingToolbarDropdown<T extends {}> = {
     type: 'dropdown';
     title: string;
     icon?: Icon;
+    /**
+     * Places an icon before the title as a representation
+     */
+    iconBefore?: Icon;
     options: DropdownOptions<T>;
     hidden?: boolean;
     hideExpandIcon?: boolean;

package/dist/types-ts4.5/messages/block-type.d.ts

@@ -144,6 +144,11 @@ export declare const messages: {
         defaultMessage: string;
         description: string;
     };
+    panel: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
     other: {
         id: string;
         defaultMessage: string;

package/dist/types-ts4.5/messages/insert-block.d.ts

@@ -224,4 +224,9 @@ export declare const toolbarInsertBlockMessages: {
         defaultMessage: string;
         description: string;
     };
+    turnInto: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
 };

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

@@ -327,6 +327,14 @@ export type FeatureFlags = {
 
      */
     moreElementsInQuickInsertView?: boolean;
+    /**
+     * @description
+     * Enables basic text transformations options in floating toolbar
+     *
+     * @see https://product-fabric.atlassian.net/browse/ED-24447
+     * @default false
+     */
+    basicTextTransformations?: boolean;
 };
 export type FeatureFlagKey = keyof FeatureFlags;
 export type GetEditorFeatureFlags = () => FeatureFlags;

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

@@ -202,6 +202,10 @@ export type FloatingToolbarDropdown<T extends {}> = {
     type: 'dropdown';
     title: string;
     icon?: Icon;
+    /**
+     * Places an icon before the title as a representation
+     */
+    iconBefore?: Icon;
     options: DropdownOptions<T>;
     hidden?: boolean;
     hideExpandIcon?: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-common",
-	"version": "87.3.4",
+	"version": "87.4.0",
 	"description": "A package that contains common classes and components for editor and renderer",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -134,7 +134,7 @@
 		"@atlaskit/primitives": "^11.1.0",
 		"@atlaskit/profilecard": "^19.17.0",
 		"@atlaskit/section-message": "^6.5.0",
-		"@atlaskit/smart-card": "^27.12.0",
+		"@atlaskit/smart-card": "^27.13.0",
 		"@atlaskit/smart-user-picker": "^6.10.0",
 		"@atlaskit/spinner": "^16.2.0",
 		"@atlaskit/task-decision": "^17.10.0",
@@ -254,9 +254,6 @@
 		"platform_editor_a11y_table_context_menu": {
 			"type": "boolean"
 		},
-		"platform.editor.review-text-highlighting-styling": {
-			"type": "boolean"
-		},
 		"react_18_color_picker_concurrent_mode": {
 			"type": "boolean"
 		},
@@ -268,6 +265,9 @@
 		},
 		"editor_support_code_block_wrapping": {
 			"type": "boolean"
+		},
+		"platform_editor_migration_icon_and_typography": {
+			"type": "boolean"
 		}
 	}
 }