@atlaskit/editor-common 87.3.5 → 87.4.1

package/CHANGELOG.md

@@ -1,5 +1,29 @@
 # @atlaskit/editor-common
 
+## 87.4.1
+
+### Patch Changes
+
+- [#127369](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/127369)
+  [`95ff22b16d347`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/95ff22b16d347) -
+  [ux] ED-24374 Add support for dynamic line number positions on code block nodeview
+
+## 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

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.5";
+var packageVersion = "87.4.1";
 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/code-block.js

@@ -21,12 +21,16 @@ var CodeBlockSharedCssClassName = exports.CodeBlockSharedCssClassName = {
   CODEBLOCK_LINE_NUMBER_GUTTER: 'line-number-gutter',
   CODEBLOCK_CONTENT: 'code-content',
   DS_CODEBLOCK: '[data-ds--code--code-block]',
-  CODEBLOCK_CONTENT_WRAPPED: 'code-content--wrapped'
+  CODEBLOCK_LINE_NUMBER_GUTTER_FG_WRAP: 'line-number-gutter--fg-wrap',
+  CODEBLOCK_CONTENT_WRAPPED: 'code-content--wrapped',
+  CODEBLOCK_CONTAINER_LINE_NUMBER_WRAPPED: 'code-content__line-number--wrapped'
 };
+
+// TODO: ED-24222 Remove flex styling and hardcoded word
 var codeBlockSharedStyles = exports.codeBlockSharedStyles = function codeBlockSharedStyles() {
-  return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\t.", " {\n\t\tposition: relative;\n\t\tbackground-color: ", ";\n\t\tborder-radius: ", ";\n\t\tmargin: ", " 0 0 0;\n\t\tfont-family: ", ";\n\t\tmin-width: ", "px;\n\t\tcursor: pointer;\n\n\t\t--ds--code--bg-color: transparent;\n\n\t\t/* This is necessary to allow for arrow key navigation in/out of code blocks in Firefox. */\n\t\twhite-space: normal;\n\n\t\t.", " {\n\t\t\tposition: absolute;\n\t\t\tvisibility: hidden;\n\t\t\theight: 1.5rem;\n\t\t\ttop: 0px;\n\t\t\tleft: 0px;\n\t\t}\n\n\t\t.", " {\n\t\t\tposition: absolute;\n\t\t\tvisibility: hidden;\n\t\t\theight: 1.5rem;\n\t\t\tbottom: 0px;\n\t\t\tright: 0px;\n\t\t}\n\n\t\t.", " {\n\t\t\tbackground-color: ", ";\n\t\t\tdisplay: flex;\n\t\t\tborder-radius: ", ";\n\t\t\twidth: 100%;\n\t\t\tcounter-reset: line;\n\t\t\toverflow-x: auto;\n\n\t\t\tbackground-image: ", ";\n\n\t\t\tbackground-repeat: no-repeat;\n\t\t\tbackground-attachment: local, local, local, local, scroll, scroll, scroll, scroll;\n\t\t\tbackground-size:\n\t\t\t\t", " 100%,\n\t\t\t\t", " 100%,\n\t\t\t\t", " 100%,\n\t\t\t\t", " 100%,\n\t\t\t\t", " 100%,\n\t\t\t\t1px 100%,\n\t\t\t\t", " 100%,\n\t\t\t\t1px 100%;\n\t\t\tbackground-position:\n\t\t\t\t0 0,\n\t\t\t\t0 0,\n\t\t\t\t100% 0,\n\t\t\t\t100% 0,\n\t\t\t\t100% 0,\n\t\t\t\t100% 0,\n\t\t\t\t0 0,\n\t\t\t\t0 0;\n\n\t\t\t/* Be careful if refactoring this; it is needed to keep arrow key navigation in Firefox consistent with other browsers. */\n\t\t\toverflow-y: hidden;\n\t\t}\n\n\t\t.", " {\n\t\t\tflex-shrink: 0;\n\t\t\ttext-align: right;\n\t\t\tbackground-color: ", ";\n\t\t\tpadding: ", ";\n\t\t\tposition: relative;\n\n\t\t\tspan {\n\t\t\t\tdisplay: block;\n\t\t\t\tline-height: 0;\n\t\t\t\tfont-size: 0;\n\n\t\t\t\t::before {\n\t\t\t\t\tdisplay: inline-block;\n\t\t\t\t\tcontent: counter(line);\n\t\t\t\t\tcounter-increment: line;\n\t\t\t\t\tcolor: ", ";\n\t\t\t\t\tfont-size: ", ";\n\t\t\t\t\tline-height: 1.5rem;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t.", " {\n\t\t\tdisplay: flex;\n\t\t\tflex: 1;\n\n\t\t\tcode {\n\t\t\t\tflex-grow: 1;\n\t\t\t\ttab-size: 4;\n\t\t\t\tcursor: text;\n\t\t\t\tcolor: ", ";\n\t\t\t\tborder-radius: ", ";\n\t\t\t\tmargin: ", ";\n\t\t\t\twhite-space: pre;\n\t\t\t\tfont-size: ", ";\n\t\t\t\tline-height: 1.5rem;\n\t\t\t}\n\t\t}\n\n\t\t.", " {\n\t\t\tcode {\n\t\t\t\tword-break: break-word;\n\t\t\t\twhite-space: pre-wrap;\n\t\t\t}\n\t\t}\n\t}\n"])), CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER, "var(--ds-surface-raised, transparent)", "var(--ds-border-radius, 3px)", _editorSharedStyles.blockNodesVerticalMargin, _editorSharedStyles.akEditorCodeFontFamily, _editorSharedStyles.akEditorTableCellMinWidth, CodeBlockSharedCssClassName.CODEBLOCK_START, CodeBlockSharedCssClassName.CODEBLOCK_END, CodeBlockSharedCssClassName.CODEBLOCK_CONTENT_WRAPPER, "var(--ds-background-neutral, ".concat(_colors.N20, ")"), "var(--ds-border-radius, 3px)", (0, _editorSharedStyles.overflowShadow)({
+  return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\t.", " {\n\t\tposition: relative;\n\t\tbackground-color: ", ";\n\t\tborder-radius: ", ";\n\t\tmargin: ", " 0 0 0;\n\t\tfont-family: ", ";\n\t\tmin-width: ", "px;\n\t\tcursor: pointer;\n\n\t\t--ds--code--bg-color: transparent;\n\n\t\t/* This is necessary to allow for arrow key navigation in/out of code blocks in Firefox. */\n\t\twhite-space: normal;\n\n\t\t.", " {\n\t\t\tposition: absolute;\n\t\t\tvisibility: hidden;\n\t\t\theight: 1.5rem;\n\t\t\ttop: 0px;\n\t\t\tleft: 0px;\n\t\t}\n\n\t\t.", " {\n\t\t\tposition: absolute;\n\t\t\tvisibility: hidden;\n\t\t\theight: 1.5rem;\n\t\t\tbottom: 0px;\n\t\t\tright: 0px;\n\t\t}\n\n\t\t.", " {\n\t\t\tbackground-color: ", ";\n\t\t\tdisplay: flex;\n\t\t\tborder-radius: ", ";\n\t\t\twidth: 100%;\n\t\t\tcounter-reset: line;\n\t\t\toverflow-x: auto;\n\n\t\t\tbackground-image: ", ";\n\n\t\t\tbackground-repeat: no-repeat;\n\t\t\tbackground-attachment: local, local, local, local, scroll, scroll, scroll, scroll;\n\t\t\tbackground-size:\n\t\t\t\t", " 100%,\n\t\t\t\t", " 100%,\n\t\t\t\t", " 100%,\n\t\t\t\t", " 100%,\n\t\t\t\t", " 100%,\n\t\t\t\t1px 100%,\n\t\t\t\t", " 100%,\n\t\t\t\t1px 100%;\n\t\t\tbackground-position:\n\t\t\t\t0 0,\n\t\t\t\t0 0,\n\t\t\t\t100% 0,\n\t\t\t\t100% 0,\n\t\t\t\t100% 0,\n\t\t\t\t100% 0,\n\t\t\t\t0 0,\n\t\t\t\t0 0;\n\n\t\t\t/* Be careful if refactoring this; it is needed to keep arrow key navigation in Firefox consistent with other browsers. */\n\t\t\toverflow-y: hidden;\n\t\t}\n\n\t\t.", " {\n\t\t\tflex-shrink: 0;\n\t\t\ttext-align: right;\n\t\t\tbackground-color: ", ";\n\t\t\tpadding: ", ";\n\t\t\tposition: relative;\n\n\t\t\tspan {\n\t\t\t\tdisplay: block;\n\t\t\t\tline-height: 0;\n\t\t\t\tfont-size: 0;\n\n\t\t\t\t::before {\n\t\t\t\t\tdisplay: inline-block;\n\t\t\t\t\tcontent: counter(line);\n\t\t\t\t\tcounter-increment: line;\n\t\t\t\t\tcolor: ", ";\n\t\t\t\t\tfont-size: ", ";\n\t\t\t\t\tline-height: 1.5rem;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t.", " {\n\t\t\tbackground-color: ", ";\n\t\t\tpadding: ", ";\n\t\t\tposition: relative;\n\t\t\twidth: 1rem;\n\t\t}\n\n\t\t.", " {\n\t\t\tdisplay: flex;\n\t\t\tflex: 1;\n\n\t\t\tcode {\n\t\t\t\tflex-grow: 1;\n\t\t\t\ttab-size: 4;\n\t\t\t\tcursor: text;\n\t\t\t\tcolor: ", ";\n\t\t\t\tborder-radius: ", ";\n\t\t\t\tmargin: ", ";\n\t\t\t\twhite-space: pre;\n\t\t\t\tfont-size: ", ";\n\t\t\t\tline-height: 1.5rem;\n\t\t\t}\n\t\t}\n\n\t\t.", " {\n\t\t\tcode {\n\t\t\t\tcounter-reset: line var(--line-num, 0);\n\t\t\t\tword-break: break-word;\n\t\t\t\twhite-space: pre-wrap;\n\t\t\t}\n\t\t}\n\n\t\t.", " {\n\t\t\tcounter-increment: line;\n\t\t\tline-height: 1rem;\n\t\t\tpointer-events: none;\n\n\t\t\t::before {\n\t\t\t\ttext-align: right;\n\t\t\t\tmin-width: 1.5rem;\n\t\t\t\tdisplay: block;\n\t\t\t\theight: 1rem;\n\t\t\t\tposition: absolute;\n\t\t\t\tpadding-right: ", ";\n\t\t\t\tpadding-left: ", ";\n\t\t\t\tmargin-top: ", ";\n\t\t\t\tmargin-right: ", ";\n\t\t\t\tleft: -0.5rem;\n\t\t\t\tcolor: ", ";\n\t\t\t\tfont-size: ", ";\n\t\t\t\tcontent: counter(line);\n\t\t\t}\n\t\t}\n\t}\n"])), CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER, "var(--ds-surface-raised, transparent)", "var(--ds-border-radius, 3px)", _editorSharedStyles.blockNodesVerticalMargin, _editorSharedStyles.akEditorCodeFontFamily, _editorSharedStyles.akEditorTableCellMinWidth, CodeBlockSharedCssClassName.CODEBLOCK_START, CodeBlockSharedCssClassName.CODEBLOCK_END, CodeBlockSharedCssClassName.CODEBLOCK_CONTENT_WRAPPER, "var(--ds-background-neutral, ".concat(_colors.N20, ")"), "var(--ds-border-radius, 3px)", (0, _editorSharedStyles.overflowShadow)({
     leftCoverWidth: "var(--ds-space-300, 24px)"
-  }), "var(--ds-space-300, 24px)", "var(--ds-space-300, 24px)", "var(--ds-space-100, 8px)", "var(--ds-space-100, 8px)", "var(--ds-space-100, 8px)", "var(--ds-space-100, 8px)", CodeBlockSharedCssClassName.CODEBLOCK_LINE_NUMBER_GUTTER, "var(--ds-background-neutral, ".concat(_colors.N30, ")"), "var(--ds-space-100, 8px)", "var(--ds-text-subtlest, ".concat(_colors.N400, ")"), (0, _editorSharedStyles.relativeFontSizeToBase16)((0, _constants.fontSize)()), CodeBlockSharedCssClassName.CODEBLOCK_CONTENT, "var(--ds-text, ".concat(_colors.N800, ")"), "var(--ds-border-radius, 3px)", "var(--ds-space-100, 8px)", (0, _editorSharedStyles.relativeFontSizeToBase16)((0, _constants.fontSize)()), CodeBlockSharedCssClassName.CODEBLOCK_CONTENT_WRAPPED);
+  }), "var(--ds-space-300, 24px)", "var(--ds-space-300, 24px)", "var(--ds-space-100, 8px)", "var(--ds-space-100, 8px)", "var(--ds-space-100, 8px)", "var(--ds-space-100, 8px)", CodeBlockSharedCssClassName.CODEBLOCK_LINE_NUMBER_GUTTER, "var(--ds-background-neutral, ".concat(_colors.N30, ")"), "var(--ds-space-100, 8px)", "var(--ds-text-subtlest, ".concat(_colors.N400, ")"), (0, _editorSharedStyles.relativeFontSizeToBase16)((0, _constants.fontSize)()), CodeBlockSharedCssClassName.CODEBLOCK_LINE_NUMBER_GUTTER_FG_WRAP, "var(--ds-background-neutral, ".concat(_colors.N30, ")"), "var(--ds-space-100, 8px)", CodeBlockSharedCssClassName.CODEBLOCK_CONTENT, "var(--ds-text, ".concat(_colors.N800, ")"), "var(--ds-border-radius, 3px)", "var(--ds-space-100, 8px)", (0, _editorSharedStyles.relativeFontSizeToBase16)((0, _constants.fontSize)()), CodeBlockSharedCssClassName.CODEBLOCK_CONTENT_WRAPPED, CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER_LINE_NUMBER_WRAPPED, "var(--ds-space-100, 8px)", "var(--ds-space-100, 8px)", "var(--ds-space-050, 4px)", "var(--ds-space-100, 8px)", "var(--ds-text-subtlest, ".concat(_colors.N400, ")"), (0, _editorSharedStyles.relativeFontSizeToBase16)((0, _constants.fontSize)()));
 };
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766

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.5";
+var packageVersion = "87.4.1";
 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.5";
+const packageVersion = "87.4.1";
 const sanitiseSentryEvents = (data, _hint) => {
   // Remove URL as it has UGC
   // TODO: Sanitise the URL instead of just removing it

package/dist/es2019/styles/shared/code-block.js

@@ -12,8 +12,12 @@ export const CodeBlockSharedCssClassName = {
   CODEBLOCK_LINE_NUMBER_GUTTER: 'line-number-gutter',
   CODEBLOCK_CONTENT: 'code-content',
   DS_CODEBLOCK: '[data-ds--code--code-block]',
-  CODEBLOCK_CONTENT_WRAPPED: 'code-content--wrapped'
+  CODEBLOCK_LINE_NUMBER_GUTTER_FG_WRAP: 'line-number-gutter--fg-wrap',
+  CODEBLOCK_CONTENT_WRAPPED: 'code-content--wrapped',
+  CODEBLOCK_CONTAINER_LINE_NUMBER_WRAPPED: 'code-content__line-number--wrapped'
 };
+
+// TODO: ED-24222 Remove flex styling and hardcoded word
 export const codeBlockSharedStyles = () => css`
 	.${CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER} {
 		position: relative;
@@ -105,6 +109,13 @@ export const codeBlockSharedStyles = () => css`
 			}
 		}
 
+		.${CodeBlockSharedCssClassName.CODEBLOCK_LINE_NUMBER_GUTTER_FG_WRAP} {
+			background-color: ${`var(--ds-background-neutral, ${N30})`};
+			padding: ${"var(--ds-space-100, 8px)"};
+			position: relative;
+			width: 1rem;
+		}
+
 		.${CodeBlockSharedCssClassName.CODEBLOCK_CONTENT} {
 			display: flex;
 			flex: 1;
@@ -124,10 +135,33 @@ export const codeBlockSharedStyles = () => css`
 
 		.${CodeBlockSharedCssClassName.CODEBLOCK_CONTENT_WRAPPED} {
 			code {
+				counter-reset: line var(--line-num, 0);
 				word-break: break-word;
 				white-space: pre-wrap;
 			}
 		}
+
+		.${CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER_LINE_NUMBER_WRAPPED} {
+			counter-increment: line;
+			line-height: 1rem;
+			pointer-events: none;
+
+			::before {
+				text-align: right;
+				min-width: 1.5rem;
+				display: block;
+				height: 1rem;
+				position: absolute;
+				padding-right: ${"var(--ds-space-100, 8px)"};
+				padding-left: ${"var(--ds-space-100, 8px)"};
+				margin-top: ${"var(--ds-space-050, 4px)"};
+				margin-right: ${"var(--ds-space-100, 8px)"};
+				left: -0.5rem;
+				color: ${`var(--ds-text-subtlest, ${N400})`};
+				font-size: ${relativeFontSizeToBase16(fontSize())};
+				content: counter(line);
+			}
+		}
 	}
 `;
 

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.5";
+const packageVersion = "87.4.1";
 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.5";
+var packageVersion = "87.4.1";
 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/code-block.js

@@ -14,12 +14,16 @@ export var CodeBlockSharedCssClassName = {
   CODEBLOCK_LINE_NUMBER_GUTTER: 'line-number-gutter',
   CODEBLOCK_CONTENT: 'code-content',
   DS_CODEBLOCK: '[data-ds--code--code-block]',
-  CODEBLOCK_CONTENT_WRAPPED: 'code-content--wrapped'
+  CODEBLOCK_LINE_NUMBER_GUTTER_FG_WRAP: 'line-number-gutter--fg-wrap',
+  CODEBLOCK_CONTENT_WRAPPED: 'code-content--wrapped',
+  CODEBLOCK_CONTAINER_LINE_NUMBER_WRAPPED: 'code-content__line-number--wrapped'
 };
+
+// TODO: ED-24222 Remove flex styling and hardcoded word
 export var codeBlockSharedStyles = function codeBlockSharedStyles() {
-  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\t.", " {\n\t\tposition: relative;\n\t\tbackground-color: ", ";\n\t\tborder-radius: ", ";\n\t\tmargin: ", " 0 0 0;\n\t\tfont-family: ", ";\n\t\tmin-width: ", "px;\n\t\tcursor: pointer;\n\n\t\t--ds--code--bg-color: transparent;\n\n\t\t/* This is necessary to allow for arrow key navigation in/out of code blocks in Firefox. */\n\t\twhite-space: normal;\n\n\t\t.", " {\n\t\t\tposition: absolute;\n\t\t\tvisibility: hidden;\n\t\t\theight: 1.5rem;\n\t\t\ttop: 0px;\n\t\t\tleft: 0px;\n\t\t}\n\n\t\t.", " {\n\t\t\tposition: absolute;\n\t\t\tvisibility: hidden;\n\t\t\theight: 1.5rem;\n\t\t\tbottom: 0px;\n\t\t\tright: 0px;\n\t\t}\n\n\t\t.", " {\n\t\t\tbackground-color: ", ";\n\t\t\tdisplay: flex;\n\t\t\tborder-radius: ", ";\n\t\t\twidth: 100%;\n\t\t\tcounter-reset: line;\n\t\t\toverflow-x: auto;\n\n\t\t\tbackground-image: ", ";\n\n\t\t\tbackground-repeat: no-repeat;\n\t\t\tbackground-attachment: local, local, local, local, scroll, scroll, scroll, scroll;\n\t\t\tbackground-size:\n\t\t\t\t", " 100%,\n\t\t\t\t", " 100%,\n\t\t\t\t", " 100%,\n\t\t\t\t", " 100%,\n\t\t\t\t", " 100%,\n\t\t\t\t1px 100%,\n\t\t\t\t", " 100%,\n\t\t\t\t1px 100%;\n\t\t\tbackground-position:\n\t\t\t\t0 0,\n\t\t\t\t0 0,\n\t\t\t\t100% 0,\n\t\t\t\t100% 0,\n\t\t\t\t100% 0,\n\t\t\t\t100% 0,\n\t\t\t\t0 0,\n\t\t\t\t0 0;\n\n\t\t\t/* Be careful if refactoring this; it is needed to keep arrow key navigation in Firefox consistent with other browsers. */\n\t\t\toverflow-y: hidden;\n\t\t}\n\n\t\t.", " {\n\t\t\tflex-shrink: 0;\n\t\t\ttext-align: right;\n\t\t\tbackground-color: ", ";\n\t\t\tpadding: ", ";\n\t\t\tposition: relative;\n\n\t\t\tspan {\n\t\t\t\tdisplay: block;\n\t\t\t\tline-height: 0;\n\t\t\t\tfont-size: 0;\n\n\t\t\t\t::before {\n\t\t\t\t\tdisplay: inline-block;\n\t\t\t\t\tcontent: counter(line);\n\t\t\t\t\tcounter-increment: line;\n\t\t\t\t\tcolor: ", ";\n\t\t\t\t\tfont-size: ", ";\n\t\t\t\t\tline-height: 1.5rem;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t.", " {\n\t\t\tdisplay: flex;\n\t\t\tflex: 1;\n\n\t\t\tcode {\n\t\t\t\tflex-grow: 1;\n\t\t\t\ttab-size: 4;\n\t\t\t\tcursor: text;\n\t\t\t\tcolor: ", ";\n\t\t\t\tborder-radius: ", ";\n\t\t\t\tmargin: ", ";\n\t\t\t\twhite-space: pre;\n\t\t\t\tfont-size: ", ";\n\t\t\t\tline-height: 1.5rem;\n\t\t\t}\n\t\t}\n\n\t\t.", " {\n\t\t\tcode {\n\t\t\t\tword-break: break-word;\n\t\t\t\twhite-space: pre-wrap;\n\t\t\t}\n\t\t}\n\t}\n"])), CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER, "var(--ds-surface-raised, transparent)", "var(--ds-border-radius, 3px)", blockNodesVerticalMargin, akEditorCodeFontFamily, akEditorTableCellMinWidth, CodeBlockSharedCssClassName.CODEBLOCK_START, CodeBlockSharedCssClassName.CODEBLOCK_END, CodeBlockSharedCssClassName.CODEBLOCK_CONTENT_WRAPPER, "var(--ds-background-neutral, ".concat(N20, ")"), "var(--ds-border-radius, 3px)", overflowShadow({
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\t.", " {\n\t\tposition: relative;\n\t\tbackground-color: ", ";\n\t\tborder-radius: ", ";\n\t\tmargin: ", " 0 0 0;\n\t\tfont-family: ", ";\n\t\tmin-width: ", "px;\n\t\tcursor: pointer;\n\n\t\t--ds--code--bg-color: transparent;\n\n\t\t/* This is necessary to allow for arrow key navigation in/out of code blocks in Firefox. */\n\t\twhite-space: normal;\n\n\t\t.", " {\n\t\t\tposition: absolute;\n\t\t\tvisibility: hidden;\n\t\t\theight: 1.5rem;\n\t\t\ttop: 0px;\n\t\t\tleft: 0px;\n\t\t}\n\n\t\t.", " {\n\t\t\tposition: absolute;\n\t\t\tvisibility: hidden;\n\t\t\theight: 1.5rem;\n\t\t\tbottom: 0px;\n\t\t\tright: 0px;\n\t\t}\n\n\t\t.", " {\n\t\t\tbackground-color: ", ";\n\t\t\tdisplay: flex;\n\t\t\tborder-radius: ", ";\n\t\t\twidth: 100%;\n\t\t\tcounter-reset: line;\n\t\t\toverflow-x: auto;\n\n\t\t\tbackground-image: ", ";\n\n\t\t\tbackground-repeat: no-repeat;\n\t\t\tbackground-attachment: local, local, local, local, scroll, scroll, scroll, scroll;\n\t\t\tbackground-size:\n\t\t\t\t", " 100%,\n\t\t\t\t", " 100%,\n\t\t\t\t", " 100%,\n\t\t\t\t", " 100%,\n\t\t\t\t", " 100%,\n\t\t\t\t1px 100%,\n\t\t\t\t", " 100%,\n\t\t\t\t1px 100%;\n\t\t\tbackground-position:\n\t\t\t\t0 0,\n\t\t\t\t0 0,\n\t\t\t\t100% 0,\n\t\t\t\t100% 0,\n\t\t\t\t100% 0,\n\t\t\t\t100% 0,\n\t\t\t\t0 0,\n\t\t\t\t0 0;\n\n\t\t\t/* Be careful if refactoring this; it is needed to keep arrow key navigation in Firefox consistent with other browsers. */\n\t\t\toverflow-y: hidden;\n\t\t}\n\n\t\t.", " {\n\t\t\tflex-shrink: 0;\n\t\t\ttext-align: right;\n\t\t\tbackground-color: ", ";\n\t\t\tpadding: ", ";\n\t\t\tposition: relative;\n\n\t\t\tspan {\n\t\t\t\tdisplay: block;\n\t\t\t\tline-height: 0;\n\t\t\t\tfont-size: 0;\n\n\t\t\t\t::before {\n\t\t\t\t\tdisplay: inline-block;\n\t\t\t\t\tcontent: counter(line);\n\t\t\t\t\tcounter-increment: line;\n\t\t\t\t\tcolor: ", ";\n\t\t\t\t\tfont-size: ", ";\n\t\t\t\t\tline-height: 1.5rem;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t.", " {\n\t\t\tbackground-color: ", ";\n\t\t\tpadding: ", ";\n\t\t\tposition: relative;\n\t\t\twidth: 1rem;\n\t\t}\n\n\t\t.", " {\n\t\t\tdisplay: flex;\n\t\t\tflex: 1;\n\n\t\t\tcode {\n\t\t\t\tflex-grow: 1;\n\t\t\t\ttab-size: 4;\n\t\t\t\tcursor: text;\n\t\t\t\tcolor: ", ";\n\t\t\t\tborder-radius: ", ";\n\t\t\t\tmargin: ", ";\n\t\t\t\twhite-space: pre;\n\t\t\t\tfont-size: ", ";\n\t\t\t\tline-height: 1.5rem;\n\t\t\t}\n\t\t}\n\n\t\t.", " {\n\t\t\tcode {\n\t\t\t\tcounter-reset: line var(--line-num, 0);\n\t\t\t\tword-break: break-word;\n\t\t\t\twhite-space: pre-wrap;\n\t\t\t}\n\t\t}\n\n\t\t.", " {\n\t\t\tcounter-increment: line;\n\t\t\tline-height: 1rem;\n\t\t\tpointer-events: none;\n\n\t\t\t::before {\n\t\t\t\ttext-align: right;\n\t\t\t\tmin-width: 1.5rem;\n\t\t\t\tdisplay: block;\n\t\t\t\theight: 1rem;\n\t\t\t\tposition: absolute;\n\t\t\t\tpadding-right: ", ";\n\t\t\t\tpadding-left: ", ";\n\t\t\t\tmargin-top: ", ";\n\t\t\t\tmargin-right: ", ";\n\t\t\t\tleft: -0.5rem;\n\t\t\t\tcolor: ", ";\n\t\t\t\tfont-size: ", ";\n\t\t\t\tcontent: counter(line);\n\t\t\t}\n\t\t}\n\t}\n"])), CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER, "var(--ds-surface-raised, transparent)", "var(--ds-border-radius, 3px)", blockNodesVerticalMargin, akEditorCodeFontFamily, akEditorTableCellMinWidth, CodeBlockSharedCssClassName.CODEBLOCK_START, CodeBlockSharedCssClassName.CODEBLOCK_END, CodeBlockSharedCssClassName.CODEBLOCK_CONTENT_WRAPPER, "var(--ds-background-neutral, ".concat(N20, ")"), "var(--ds-border-radius, 3px)", overflowShadow({
     leftCoverWidth: "var(--ds-space-300, 24px)"
-  }), "var(--ds-space-300, 24px)", "var(--ds-space-300, 24px)", "var(--ds-space-100, 8px)", "var(--ds-space-100, 8px)", "var(--ds-space-100, 8px)", "var(--ds-space-100, 8px)", CodeBlockSharedCssClassName.CODEBLOCK_LINE_NUMBER_GUTTER, "var(--ds-background-neutral, ".concat(N30, ")"), "var(--ds-space-100, 8px)", "var(--ds-text-subtlest, ".concat(N400, ")"), relativeFontSizeToBase16(fontSize()), CodeBlockSharedCssClassName.CODEBLOCK_CONTENT, "var(--ds-text, ".concat(N800, ")"), "var(--ds-border-radius, 3px)", "var(--ds-space-100, 8px)", relativeFontSizeToBase16(fontSize()), CodeBlockSharedCssClassName.CODEBLOCK_CONTENT_WRAPPED);
+  }), "var(--ds-space-300, 24px)", "var(--ds-space-300, 24px)", "var(--ds-space-100, 8px)", "var(--ds-space-100, 8px)", "var(--ds-space-100, 8px)", "var(--ds-space-100, 8px)", CodeBlockSharedCssClassName.CODEBLOCK_LINE_NUMBER_GUTTER, "var(--ds-background-neutral, ".concat(N30, ")"), "var(--ds-space-100, 8px)", "var(--ds-text-subtlest, ".concat(N400, ")"), relativeFontSizeToBase16(fontSize()), CodeBlockSharedCssClassName.CODEBLOCK_LINE_NUMBER_GUTTER_FG_WRAP, "var(--ds-background-neutral, ".concat(N30, ")"), "var(--ds-space-100, 8px)", CodeBlockSharedCssClassName.CODEBLOCK_CONTENT, "var(--ds-text, ".concat(N800, ")"), "var(--ds-border-radius, 3px)", "var(--ds-space-100, 8px)", relativeFontSizeToBase16(fontSize()), CodeBlockSharedCssClassName.CODEBLOCK_CONTENT_WRAPPED, CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER_LINE_NUMBER_WRAPPED, "var(--ds-space-100, 8px)", "var(--ds-space-100, 8px)", "var(--ds-space-050, 4px)", "var(--ds-space-100, 8px)", "var(--ds-text-subtlest, ".concat(N400, ")"), relativeFontSizeToBase16(fontSize()));
 };
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766

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.5";
+var packageVersion = "87.4.1";
 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/styles/shared/code-block.d.ts

@@ -6,7 +6,9 @@ export declare const CodeBlockSharedCssClassName: {
     CODEBLOCK_LINE_NUMBER_GUTTER: string;
     CODEBLOCK_CONTENT: string;
     DS_CODEBLOCK: string;
+    CODEBLOCK_LINE_NUMBER_GUTTER_FG_WRAP: string;
     CODEBLOCK_CONTENT_WRAPPED: string;
+    CODEBLOCK_CONTAINER_LINE_NUMBER_WRAPPED: string;
 };
 export declare const codeBlockSharedStyles: () => import("@emotion/react").SerializedStyles;
 export declare const codeBlockInListSafariFix: import("@emotion/react").SerializedStyles;

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/styles/shared/code-block.d.ts

@@ -6,7 +6,9 @@ export declare const CodeBlockSharedCssClassName: {
     CODEBLOCK_LINE_NUMBER_GUTTER: string;
     CODEBLOCK_CONTENT: string;
     DS_CODEBLOCK: string;
+    CODEBLOCK_LINE_NUMBER_GUTTER_FG_WRAP: string;
     CODEBLOCK_CONTENT_WRAPPED: string;
+    CODEBLOCK_CONTAINER_LINE_NUMBER_WRAPPED: string;
 };
 export declare const codeBlockSharedStyles: () => import("@emotion/react").SerializedStyles;
 export declare const codeBlockInListSafariFix: import("@emotion/react").SerializedStyles;

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.5",
+	"version": "87.4.1",
 	"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",
@@ -265,6 +265,9 @@
 		},
 		"editor_support_code_block_wrapping": {
 			"type": "boolean"
+		},
+		"platform_editor_migration_icon_and_typography": {
+			"type": "boolean"
 		}
 	}
 }