@atlaskit/editor-core 207.15.0 → 207.16.0

package/CHANGELOG.md

@@ -1,5 +1,34 @@
 # @atlaskit/editor-core
 
+## 207.16.0
+
+### Minor Changes
+
+- [#165698](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/165698)
+  [`e97682ca74f19`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/e97682ca74f19) -
+  [ux] [ED-27954] this change is extending the Find algorithm to status nodes behind the
+  platform_editor_find_and_replace_1 flag
+
+### Patch Changes
+
+- [#166424](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/166424)
+  [`5bfa5b37065b1`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/5bfa5b37065b1) -
+  [ED-27807] Fix a bug where first button in the floating toolbar is shown with focus ring when
+  pressing Option+F10
+- [#165803](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/165803)
+  [`18e18ed9e9794`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/18e18ed9e9794) -
+  [ux] Migrate expand styles to static emotion
+- Updated dependencies
+
+## 207.15.1
+
+### Patch Changes
+
+- [#166381](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/166381)
+  [`e7b0081a1b221`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/e7b0081a1b221) -
+  EDM-12154 cleaning up hardcoded embed only on new line feature flag
+- Updated dependencies
+
 ## 207.15.0
 
 ### Minor Changes

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

@@ -136,6 +136,14 @@ var placeholderWrapStyles = (0, _react2.css)({
 });
 var firstBlockNodeStylesNew = (0, _react2.css)(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n\t.ProseMirror {\n\t\t> .", ",\n\t\t\t> .", ",\n\t\t\t> .", ",\n\t\t\t> div[data-task-list-local-id],\n\t\t> div[data-layout-section],\n\t\t> .", " {\n\t\t\t&:first-child {\n\t\t\t\tmargin-top: 0;\n\t\t\t}\n\t\t}\n\n\t\t> hr:first-child,\n\t\t> .ProseMirror-widget:first-child + hr {\n\t\t\tmargin-top: 0;\n\t\t}\n\t}\n"])), _panel.PanelSharedCssClassName.prefix, _styles.CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER, _styles.SmartCardSharedCssClassName.BLOCK_CARD_CONTAINER, _styles.expandClassNames.prefix);
 
+// Make sure the first floating toolbar button has focus ring when focused via .focus()
+var firstFloatingToolbarButtonStyles = (0, _react2.css)({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  'button.first-floating-toolbar-button:focus': {
+    outline: "2px solid ".concat("var(--ds-border-focused, #2684FF)")
+  }
+});
+
 // The breakpoint for small devices is 1266px, copied from getBreakpoint in platform/packages/editor/editor-common/src/ui/WidthProvider/index.tsx
 var akEditorBreakpointForSmallDevice = "1266px";
 
@@ -144,9 +152,9 @@ var akEditorBreakpointForSmallDevice = "1266px";
 // Under editor experiment platform_editor_core_static_emotion
 // If you are making changes to this file, please make sure to update in EditorContentContainer.tsx as well
 var legacyContentStyles = function legacyContentStyles(props) {
-  return (0, _react2.css)(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n\t--ak-editor--default-gutter-padding: ", "px;\n\t/* 52 is from akEditorGutterPaddingDynamic via editor-shared-styles */\n\t--ak-editor--large-gutter-padding: ", "px;\n\t--ak-editor--default-layout-width: ", "px;\n\t--ak-editor--full-width-layout-width: ", "px;\n\t/* calculate editor line length, 100cqw is the editor container width */\n\t--ak-editor--line-length: min(\n\t\tcalc(100cqw - var(--ak-editor--large-gutter-padding) * 2),\n\t\tvar(--ak-editor--default-layout-width)\n\t);\n\t--ak-editor--breakout-wide-layout-width: ", "px;\n\t--ak-editor--breakout-full-page-guttering-padding: calc(\n\t\tvar(--ak-editor--large-gutter-padding) * 2 + var(--ak-editor--default-gutter-padding)\n\t);\n\n\t.fabric-editor--full-width-mode {\n\t\t--ak-editor--line-length: min(\n\t\t\tcalc(100cqw - var(--ak-editor--large-gutter-padding) * 2),\n\t\t\tvar(--ak-editor--full-width-layout-width)\n\t\t);\n\t}\n\n\t.ProseMirror {\n\t\t--ak-editor-max-container-width: calc(100cqw - var(--ak-editor--large-gutter-padding));\n\t}\n\n\t/* We can't allow nodes that are inside other nodes to bleed from the parent container */\n\t.ProseMirror > div[data-prosemirror-node-block] [data-prosemirror-node-block] {\n\t\t--ak-editor-max-container-width: 100%;\n\t}\n\n\t/* container editor-area is defined in platform/packages/editor/editor-core/src/ui/Appearance/FullPage/StyledComponents.ts */\n\t@container editor-area (width >= ", ") {\n\t\t.ProseMirror {\n\t\t\t--ak-editor--breakout-wide-layout-width: ", "px;\n\t\t}\n\t}\n\n\t.ProseMirror {\n\t\toutline: none;\n\t\tfont-size: ", "px;\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t}\n\n\t.ProseMirror-hideselection *::selection {\n\t\tbackground: transparent;\n\t}\n\n\t.ProseMirror-hideselection *::-moz-selection {\n\t\tbackground: transparent;\n\t}\n\n\t/**\n\t * This prosemirror css style: https://github.com/ProseMirror/prosemirror-view/blob/f37ebb29befdbde3cd194fe13fe17b78e743d2f2/style/prosemirror.css#L24\n\t *\n\t * 1. Merge and Release platform_editor_hide_cursor_when_pm_hideselection\n\t * 2. Cleanup duplicated style from platform_editor_advanced_code_blocks\n\t *    https://product-fabric.atlassian.net/browse/ED-26331\n\t */\n\t", "\n\n\t/* This prosemirror css style: https://github.com/ProseMirror/prosemirror-view/blob/f37ebb29befdbde3cd194fe13fe17b78e743d2f2/style/prosemirror.css#L24 */\n\t", "\n\n\t.ProseMirror-selectednode {\n\t\toutline: none;\n\t}\n\n\t.ProseMirror-selectednode:empty {\n\t\toutline: 2px solid ", ";\n\t}\n\n\t.ProseMirror.ProseMirror-focused:has(.ProseMirror-mark-boundary-cursor) {\n\t\tcaret-color: transparent;\n\t}\n\t.ProseMirror:not(.ProseMirror-focused) .ProseMirror-mark-boundary-cursor {\n\t\tdisplay: none;\n\t}\n\n\t", "\n\t", "\n\t", "\n\t", "\n\n  ", "\n\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", ";\n\t", "\n\t", "\n\t", "\n\t", "\n\t", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  /* Switch between the two icons based on the visual refresh feature gate */\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n\t", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n\n  .panelView-content-wrap {\n\t\tbox-sizing: border-box;\n\t}\n\n\t.mediaGroupView-content-wrap ul {\n\t\tpadding: 0;\n\t}\n\n\t/** Needed to override any cleared floats, e.g. image wrapping */\n\n\tdiv.fabric-editor-block-mark[class^='fabric-editor-align'] {\n\t\tclear: none !important;\n\t}\n\n\t.fabric-editor-align-end {\n\t\ttext-align: right;\n\t}\n\n\t.fabric-editor-align-start {\n\t\ttext-align: left;\n\t}\n\n\t.fabric-editor-align-center {\n\t\ttext-align: center;\n\t}\n\n\t/* For FullPage only when inside a table\n\tRelated code all lives inside: packages/editor/editor-core/src/ui/Appearance/FullPage/StyledComponents.ts\n\tIn the \"editorContentAreaContainerStyle\" function */\n\t.fabric-editor--full-width-mode {\n\t\t.pm-table-container {\n\t\t\t.code-block,\n\t\t\t.extension-container,\n\t\t\t.multiBodiedExtension--container {\n\t\t\t\tmax-width: 100%;\n\t\t\t}\n\t\t}\n\t}\n\n\t.pm-table-header-content-wrap :not(.fabric-editor-alignment),\n\t.pm-table-header-content-wrap :not(p, .fabric-editor-block-mark) + div.fabric-editor-block-mark,\n\t.pm-table-cell-content-wrap :not(p, .fabric-editor-block-mark) + div.fabric-editor-block-mark {\n\t\tp:first-of-type {\n\t\t\tmargin-top: 0;\n\t\t}\n\t}\n\t.pm-table-cell-content-wrap .mediaGroupView-content-wrap {\n\t\tclear: both;\n\t}\n\n\t.hyperlink-floating-toolbar,\n\t.", " {\n\t\tpadding: 0;\n\t}\n\n\t/* Legacy Link icon in the Atlaskit package\n     is bigger than the others, new ADS icon does not have this issue\n  */\n\t", "\n"])), _editorSharedStyles.akEditorGutterPadding, (0, _editorSharedStyles.akEditorGutterPaddingDynamic)(), _editorSharedStyles.akEditorDefaultLayoutWidth, _editorSharedStyles.akEditorFullWidthLayoutWidth, _editorSharedStyles.akEditorCalculatedWideLayoutWidthSmallViewport, akEditorBreakpointForSmallDevice, _editorSharedStyles.akEditorCalculatedWideLayoutWidth, (0, _editorSharedStyles.editorFontSize)({
+  return (0, _react2.css)(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n\t--ak-editor--default-gutter-padding: ", "px;\n\t/* 52 is from akEditorGutterPaddingDynamic via editor-shared-styles */\n\t--ak-editor--large-gutter-padding: ", "px;\n\t--ak-editor--default-layout-width: ", "px;\n\t--ak-editor--full-width-layout-width: ", "px;\n\t/* calculate editor line length, 100cqw is the editor container width */\n\t--ak-editor--line-length: min(\n\t\tcalc(100cqw - var(--ak-editor--large-gutter-padding) * 2),\n\t\tvar(--ak-editor--default-layout-width)\n\t);\n\t--ak-editor--breakout-wide-layout-width: ", "px;\n\t--ak-editor--breakout-full-page-guttering-padding: calc(\n\t\tvar(--ak-editor--large-gutter-padding) * 2 + var(--ak-editor--default-gutter-padding)\n\t);\n\n\t.fabric-editor--full-width-mode {\n\t\t--ak-editor--line-length: min(\n\t\t\tcalc(100cqw - var(--ak-editor--large-gutter-padding) * 2),\n\t\t\tvar(--ak-editor--full-width-layout-width)\n\t\t);\n\t}\n\n\t.ProseMirror {\n\t\t--ak-editor-max-container-width: calc(100cqw - var(--ak-editor--large-gutter-padding));\n\t}\n\n\t/* We can't allow nodes that are inside other nodes to bleed from the parent container */\n\t.ProseMirror > div[data-prosemirror-node-block] [data-prosemirror-node-block] {\n\t\t--ak-editor-max-container-width: 100%;\n\t}\n\n\t/* container editor-area is defined in platform/packages/editor/editor-core/src/ui/Appearance/FullPage/StyledComponents.ts */\n\t@container editor-area (width >= ", ") {\n\t\t.ProseMirror {\n\t\t\t--ak-editor--breakout-wide-layout-width: ", "px;\n\t\t}\n\t}\n\n\t.ProseMirror {\n\t\toutline: none;\n\t\tfont-size: ", "px;\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t}\n\n\t.ProseMirror-hideselection *::selection {\n\t\tbackground: transparent;\n\t}\n\n\t.ProseMirror-hideselection *::-moz-selection {\n\t\tbackground: transparent;\n\t}\n\n\t/**\n\t * This prosemirror css style: https://github.com/ProseMirror/prosemirror-view/blob/f37ebb29befdbde3cd194fe13fe17b78e743d2f2/style/prosemirror.css#L24\n\t *\n\t * 1. Merge and Release platform_editor_hide_cursor_when_pm_hideselection\n\t * 2. Cleanup duplicated style from platform_editor_advanced_code_blocks\n\t *    https://product-fabric.atlassian.net/browse/ED-26331\n\t */\n\t", "\n\n\t/* This prosemirror css style: https://github.com/ProseMirror/prosemirror-view/blob/f37ebb29befdbde3cd194fe13fe17b78e743d2f2/style/prosemirror.css#L24 */\n\t", "\n\n\t.ProseMirror-selectednode {\n\t\toutline: none;\n\t}\n\n\t.ProseMirror-selectednode:empty {\n\t\toutline: 2px solid ", ";\n\t}\n\n\t.ProseMirror.ProseMirror-focused:has(.ProseMirror-mark-boundary-cursor) {\n\t\tcaret-color: transparent;\n\t}\n\t.ProseMirror:not(.ProseMirror-focused) .ProseMirror-mark-boundary-cursor {\n\t\tdisplay: none;\n\t}\n\n\t", "\n\t", "\n\t", "\n\t", "\n\t", "\n\n  ", "\n\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", ";\n\t", "\n\t", "\n\t", "\n\t", "\n\t", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  /* Switch between the two icons based on the visual refresh feature gate */\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n\t", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n\n  .panelView-content-wrap {\n\t\tbox-sizing: border-box;\n\t}\n\n\t.mediaGroupView-content-wrap ul {\n\t\tpadding: 0;\n\t}\n\n\t/** Needed to override any cleared floats, e.g. image wrapping */\n\n\tdiv.fabric-editor-block-mark[class^='fabric-editor-align'] {\n\t\tclear: none !important;\n\t}\n\n\t.fabric-editor-align-end {\n\t\ttext-align: right;\n\t}\n\n\t.fabric-editor-align-start {\n\t\ttext-align: left;\n\t}\n\n\t.fabric-editor-align-center {\n\t\ttext-align: center;\n\t}\n\n\t/* For FullPage only when inside a table\n\tRelated code all lives inside: packages/editor/editor-core/src/ui/Appearance/FullPage/StyledComponents.ts\n\tIn the \"editorContentAreaContainerStyle\" function */\n\t.fabric-editor--full-width-mode {\n\t\t.pm-table-container {\n\t\t\t.code-block,\n\t\t\t.extension-container,\n\t\t\t.multiBodiedExtension--container {\n\t\t\t\tmax-width: 100%;\n\t\t\t}\n\t\t}\n\t}\n\n\t.pm-table-header-content-wrap :not(.fabric-editor-alignment),\n\t.pm-table-header-content-wrap :not(p, .fabric-editor-block-mark) + div.fabric-editor-block-mark,\n\t.pm-table-cell-content-wrap :not(p, .fabric-editor-block-mark) + div.fabric-editor-block-mark {\n\t\tp:first-of-type {\n\t\t\tmargin-top: 0;\n\t\t}\n\t}\n\t.pm-table-cell-content-wrap .mediaGroupView-content-wrap {\n\t\tclear: both;\n\t}\n\n\t.hyperlink-floating-toolbar,\n\t.", " {\n\t\tpadding: 0;\n\t}\n\n\t/* Legacy Link icon in the Atlaskit package\n     is bigger than the others, new ADS icon does not have this issue\n  */\n\t", "\n"])), _editorSharedStyles.akEditorGutterPadding, (0, _editorSharedStyles.akEditorGutterPaddingDynamic)(), _editorSharedStyles.akEditorDefaultLayoutWidth, _editorSharedStyles.akEditorFullWidthLayoutWidth, _editorSharedStyles.akEditorCalculatedWideLayoutWidthSmallViewport, akEditorBreakpointForSmallDevice, _editorSharedStyles.akEditorCalculatedWideLayoutWidth, (0, _editorSharedStyles.editorFontSize)({
     theme: props.theme
-  }), _styles.whitespaceSharedStyles, (0, _styles.paragraphSharedStyles)(props.typographyTheme), _styles.listsSharedStyles, _styles.indentationSharedStyles, _styles.shadowSharedStyle, _getInlineNodeViewProducer.InlineNodeViewSharedStyles, (0, _platformFeatureFlags.fg)('platform_editor_hide_cursor_when_pm_hideselection') ? (0, _react2.css)(_templateObject0 || (_templateObject0 = (0, _taggedTemplateLiteral2.default)(["\n\t\t\t\t.ProseMirror-hideselection {\n\t\t\t\t\tcaret-color: transparent;\n\t\t\t\t}\n\t\t\t"]))) : null, (0, _experiments.editorExperiment)('platform_editor_advanced_code_blocks', true) ? (0, _react2.css)(_templateObject1 || (_templateObject1 = (0, _taggedTemplateLiteral2.default)(["\n\t\t\t\t.ProseMirror-hideselection {\n\t\t\t\t\tcaret-color: transparent;\n\t\t\t\t}\n\t\t\t"]))) : null, "var(--ds-border-focused, #8cf)", _styles5.placeholderTextStyles, placeholderStyles, (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') ? placeholderOverflowStyles : null, (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') && (0, _platformFeatureFlags.fg)('platform_editor_quick_insert_placeholder') ? placeholderWrapStyles : null, (0, _codeBlock.codeBlockStyles)(), (0, _styles2.blocktypeStyles)(props.typographyTheme), (0, _styles.codeMarkSharedStyles)(), _styles.textColorStyles, (0, _styles.backgroundColorStyles)(), listsStyles, ruleStyles(), (0, _media.mediaStyles)(), (0, _layout.layoutStyles)(props.viewMode), (0, _platformFeatureFlags.fg)('confluence_team_presence_scroll_to_pointer') ? _collab.telepointerStyle : _collab.telepointerStyleWithInitialOnly, _selection.gapCursorStyles, (0, _panel2.panelStyles)(), mentionsStyles, (0, _experiments.editorExperiment)('platform_editor_vanilla_dom', true, {
+  }), _styles.whitespaceSharedStyles, (0, _styles.paragraphSharedStyles)(props.typographyTheme), _styles.listsSharedStyles, _styles.indentationSharedStyles, _styles.shadowSharedStyle, _getInlineNodeViewProducer.InlineNodeViewSharedStyles, (0, _platformFeatureFlags.fg)('platform_editor_hide_cursor_when_pm_hideselection') ? (0, _react2.css)(_templateObject0 || (_templateObject0 = (0, _taggedTemplateLiteral2.default)(["\n\t\t\t\t.ProseMirror-hideselection {\n\t\t\t\t\tcaret-color: transparent;\n\t\t\t\t}\n\t\t\t"]))) : null, (0, _experiments.editorExperiment)('platform_editor_advanced_code_blocks', true) ? (0, _react2.css)(_templateObject1 || (_templateObject1 = (0, _taggedTemplateLiteral2.default)(["\n\t\t\t\t.ProseMirror-hideselection {\n\t\t\t\t\tcaret-color: transparent;\n\t\t\t\t}\n\t\t\t"]))) : null, "var(--ds-border-focused, #8cf)", (0, _platformFeatureFlags.fg)('platform_editor_fix_floating_toolbar_focus') ? firstFloatingToolbarButtonStyles : null, _styles5.placeholderTextStyles, placeholderStyles, (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') ? placeholderOverflowStyles : null, (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') && (0, _platformFeatureFlags.fg)('platform_editor_quick_insert_placeholder') ? placeholderWrapStyles : null, (0, _codeBlock.codeBlockStyles)(), (0, _styles2.blocktypeStyles)(props.typographyTheme), (0, _styles.codeMarkSharedStyles)(), _styles.textColorStyles, (0, _styles.backgroundColorStyles)(), listsStyles, ruleStyles(), (0, _media.mediaStyles)(), (0, _layout.layoutStyles)(props.viewMode), (0, _platformFeatureFlags.fg)('confluence_team_presence_scroll_to_pointer') ? _collab.telepointerStyle : _collab.telepointerStyleWithInitialOnly, _selection.gapCursorStyles, (0, _panel2.panelStyles)(), mentionsStyles, (0, _experiments.editorExperiment)('platform_editor_vanilla_dom', true, {
     exposure: false
   }) && vanillaMentionsStyles, (0, _experiments.editorExperiment)('platform_editor_vanilla_dom', true, {
     exposure: false

package/dist/cjs/ui/EditorContentContainer/EditorContentContainer.js

@@ -11,14 +11,11 @@ var _react2 = require("@emotion/react");
 var _browser = require("@atlaskit/editor-common/browser");
 var _selection = require("@atlaskit/editor-common/selection");
 var _styles = require("@atlaskit/editor-common/styles");
-var _styles2 = require("@atlaskit/editor-plugins/placeholder-text/styles");
 var _commonStyles = require("@atlaskit/editor-plugins/table/ui/common-styles");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _tokens = require("@atlaskit/tokens");
-var _getInlineNodeViewProducer = require("../../nodeviews/getInlineNodeViewProducer.styles");
-var _expand = require("../ContentStyles/expand");
 var _extension = require("../ContentStyles/extension");
 var _panel = require("../ContentStyles/panel");
 var _status = require("../ContentStyles/status");
@@ -33,16 +30,19 @@ var _dateStyles = require("./styles/dateStyles");
 var _editorUGCTokenStyles = require("./styles/editorUGCTokenStyles");
 var _embedCardStyles = require("./styles/embedCardStyles");
 var _emoji = require("./styles/emoji");
+var _expandStyles = require("./styles/expandStyles");
 var _findReplaceStyles = require("./styles/findReplaceStyles");
 var _firstBlockNodeStyles = require("./styles/firstBlockNodeStyles");
 var _gridStyles = require("./styles/gridStyles");
 var _indentationStyles = require("./styles/indentationStyles");
+var _inlineNodeViewSharedStyles = require("./styles/inlineNodeViewSharedStyles");
 var _layout = require("./styles/layout");
 var _link = require("./styles/link");
 var _list = require("./styles/list");
 var _mediaStyles = require("./styles/mediaStyles");
 var _mentions = require("./styles/mentions");
 var _paragraphStyles = require("./styles/paragraphStyles");
+var _placeholderTextStyles = require("./styles/placeholderTextStyles");
 var _resizerStyles = require("./styles/resizerStyles");
 var _rule = require("./styles/rule");
 var _shadowStyles = require("./styles/shadowStyles");
@@ -103,7 +103,7 @@ var akEditorBreakpointForSmallDevice = "1266px";
 
 // jest warning: JSDOM version (22) doesn't support the new @container CSS rule
 var contentStyles = function contentStyles() {
-  return (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\t--ak-editor--default-gutter-padding: ", "px;\n\t/* 52 is from akEditorGutterPaddingDynamic via editor-shared-styles */\n\t--ak-editor--large-gutter-padding: ", "px;\n\t--ak-editor--default-layout-width: ", "px;\n\t--ak-editor--full-width-layout-width: ", "px;\n\t/* calculate editor line length, 100cqw is the editor container width */\n\t--ak-editor--line-length: min(\n\t\tcalc(100cqw - var(--ak-editor--large-gutter-padding) * 2),\n\t\tvar(--ak-editor--default-layout-width)\n\t);\n\t--ak-editor--breakout-wide-layout-width: ", "px;\n\t--ak-editor--breakout-full-page-guttering-padding: calc(\n\t\tvar(--ak-editor--large-gutter-padding) * 2 + var(--ak-editor--default-gutter-padding)\n\t);\n\n\t.fabric-editor--full-width-mode {\n\t\t--ak-editor--line-length: min(\n\t\t\tcalc(100cqw - var(--ak-editor--large-gutter-padding) * 2),\n\t\t\tvar(--ak-editor--full-width-layout-width)\n\t\t);\n\t}\n\n\t.ProseMirror {\n\t\t--ak-editor-max-container-width: calc(100cqw - var(--ak-editor--large-gutter-padding));\n\t}\n\n\t/* We can't allow nodes that are inside other nodes to bleed from the parent container */\n\t.ProseMirror > div[data-prosemirror-node-block] [data-prosemirror-node-block] {\n\t\t--ak-editor-max-container-width: 100%;\n\t}\n\n\t/* container editor-area is defined in platform/packages/editor/editor-core/src/ui/Appearance/FullPage/StyledComponents.ts */\n\t@container editor-area (width >= ", ") {\n\t\t.ProseMirror {\n\t\t\t--ak-editor--breakout-wide-layout-width: ", "px;\n\t\t}\n\t}\n\n\t.ProseMirror {\n\t\toutline: none;\n\t\tfont-size: var(--ak-editor-base-font-size);\n\n\t\t", ";\n\n\t\t", ";\n\n\t\t", ";\n\n\t\t", ";\n\t}\n\n\t.ProseMirror-hideselection *::selection {\n\t\tbackground: transparent;\n\t}\n\n\t.ProseMirror-hideselection *::-moz-selection {\n\t\tbackground: transparent;\n\t}\n\n\t/**\n\t * This prosemirror css style: https://github.com/ProseMirror/prosemirror-view/blob/f37ebb29befdbde3cd194fe13fe17b78e743d2f2/style/prosemirror.css#L24\n\t *\n\t * 1. Merge and Release platform_editor_hide_cursor_when_pm_hideselection\n\t * 2. Cleanup duplicated style from platform_editor_advanced_code_blocks\n\t *    https://product-fabric.atlassian.net/browse/ED-26331\n\t */\n\t", "\n\n\t/* This prosemirror css style: https://github.com/ProseMirror/prosemirror-view/blob/f37ebb29befdbde3cd194fe13fe17b78e743d2f2/style/prosemirror.css#L24 */\n\t", "\n\n\t.ProseMirror-selectednode {\n\t\toutline: none;\n\t}\n\n\t.ProseMirror-selectednode:empty {\n\t\toutline: 2px solid ", ";\n\t}\n\n\t.ProseMirror.ProseMirror-focused:has(.ProseMirror-mark-boundary-cursor) {\n\t\tcaret-color: transparent;\n\t}\n\t.ProseMirror:not(.ProseMirror-focused) .ProseMirror-mark-boundary-cursor {\n\t\tdisplay: none;\n\t}\n\n\t", "\n\n\t", "\n\n\t", "\n\n\t", "\n\n\t", "\n\n\t", "\n\t", "\n  \t", "\n\n\n  \t", "\n\n\t", "\n\t", "\n\n\t", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  /* This needs to be after telepointer styles as some overlapping rules have equal specificity, and so the order is significant */\n  ", "\n\n  ", ";\n\n\t", "\n\n\t", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  // Switch between the two icons based on the visual refresh feature gate\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n\t.panelView-content-wrap {\n\t\tbox-sizing: border-box;\n\t}\n\n\t.mediaGroupView-content-wrap ul {\n\t\tpadding: 0;\n\t}\n\n\t/** Needed to override any cleared floats, e.g. image wrapping */\n\n\tdiv.fabric-editor-block-mark[class^='fabric-editor-align'] {\n\t\tclear: none !important;\n\t}\n\n\t.fabric-editor-align-end {\n\t\ttext-align: right;\n\t}\n\n\t.fabric-editor-align-start {\n\t\ttext-align: left;\n\t}\n\n\t.fabric-editor-align-center {\n\t\ttext-align: center;\n\t}\n\n\t// For FullPage only when inside a table\n\t// Related code all lives inside: packages/editor/editor-core/src/ui/Appearance/FullPage/StyledComponents.ts\n\t// In the \"editorContentAreaContainerStyle\" function\n\t.fabric-editor--full-width-mode {\n\t\t.pm-table-container {\n\t\t\t.code-block,\n\t\t\t.extension-container,\n\t\t\t.multiBodiedExtension--container {\n\t\t\t\tmax-width: 100%;\n\t\t\t}\n\t\t}\n\t}\n\n\t.pm-table-header-content-wrap :not(.fabric-editor-alignment),\n\t.pm-table-header-content-wrap :not(p, .fabric-editor-block-mark) + div.fabric-editor-block-mark,\n\t.pm-table-cell-content-wrap :not(p, .fabric-editor-block-mark) + div.fabric-editor-block-mark {\n\t\tp:first-of-type {\n\t\t\tmargin-top: 0;\n\t\t}\n\t}\n\t.pm-table-cell-content-wrap .mediaGroupView-content-wrap {\n\t\tclear: both;\n\t}\n\n\t.hyperlink-floating-toolbar {\n\t\tpadding: 0;\n\t}\n\n\t/* Legacy Link icon in the Atlaskit package\n\t is bigger than the others, new ADS icon does not have this issue\n  */\n\t", "\n"])), _editorSharedStyles.akEditorGutterPadding, (0, _editorSharedStyles.akEditorGutterPaddingDynamic)(), _editorSharedStyles.akEditorDefaultLayoutWidth, _editorSharedStyles.akEditorFullWidthLayoutWidth, _editorSharedStyles.akEditorCalculatedWideLayoutWidthSmallViewport, akEditorBreakpointForSmallDevice, _editorSharedStyles.akEditorCalculatedWideLayoutWidth, _whitespaceStyles.whitespaceStyles, _indentationStyles.indentationStyles, _shadowStyles.shadowStyles, _getInlineNodeViewProducer.InlineNodeViewSharedStyles, (0, _platformFeatureFlags.fg)('platform_editor_hide_cursor_when_pm_hideselection') ? (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n\t\t\t\t.ProseMirror-hideselection {\n\t\t\t\t\tcaret-color: transparent;\n\t\t\t\t}\n\t\t\t"]))) : null, (0, _experiments.editorExperiment)('platform_editor_advanced_code_blocks', true) ? (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n\t\t\t\t.ProseMirror-hideselection {\n\t\t\t\t\tcaret-color: transparent;\n\t\t\t\t}\n\t\t\t"]))) : null, "var(--ds-border-focused, #8cf)", _styles2.placeholderTextStyles, placeholderStyles, (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') ? placeholderOverflowStyles : null, (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') && (0, _platformFeatureFlags.fg)('platform_editor_quick_insert_placeholder') ? placeholderWrapStyles : null, _codeBlockStyles.codeBlockStyles, !(0, _platformFeatureFlags.fg)('platform_editor_typography_ugc') && _editorUGCTokenStyles.editorUGCTokensDefault,
+  return (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\t--ak-editor--default-gutter-padding: ", "px;\n\t/* 52 is from akEditorGutterPaddingDynamic via editor-shared-styles */\n\t--ak-editor--large-gutter-padding: ", "px;\n\t--ak-editor--default-layout-width: ", "px;\n\t--ak-editor--full-width-layout-width: ", "px;\n\t/* calculate editor line length, 100cqw is the editor container width */\n\t--ak-editor--line-length: min(\n\t\tcalc(100cqw - var(--ak-editor--large-gutter-padding) * 2),\n\t\tvar(--ak-editor--default-layout-width)\n\t);\n\t--ak-editor--breakout-wide-layout-width: ", "px;\n\t--ak-editor--breakout-full-page-guttering-padding: calc(\n\t\tvar(--ak-editor--large-gutter-padding) * 2 + var(--ak-editor--default-gutter-padding)\n\t);\n\n\t.fabric-editor--full-width-mode {\n\t\t--ak-editor--line-length: min(\n\t\t\tcalc(100cqw - var(--ak-editor--large-gutter-padding) * 2),\n\t\t\tvar(--ak-editor--full-width-layout-width)\n\t\t);\n\t}\n\n\t.ProseMirror {\n\t\t--ak-editor-max-container-width: calc(100cqw - var(--ak-editor--large-gutter-padding));\n\t}\n\n\t/* We can't allow nodes that are inside other nodes to bleed from the parent container */\n\t.ProseMirror > div[data-prosemirror-node-block] [data-prosemirror-node-block] {\n\t\t--ak-editor-max-container-width: 100%;\n\t}\n\n\t/* container editor-area is defined in platform/packages/editor/editor-core/src/ui/Appearance/FullPage/StyledComponents.ts */\n\t@container editor-area (width >= ", ") {\n\t\t.ProseMirror {\n\t\t\t--ak-editor--breakout-wide-layout-width: ", "px;\n\t\t}\n\t}\n\n\t.ProseMirror {\n\t\toutline: none;\n\t\tfont-size: var(--ak-editor-base-font-size);\n\n\t\t", ";\n\n\t\t", ";\n\n\t\t", ";\n\n\t\t", ";\n\t}\n\n\t.ProseMirror-hideselection *::selection {\n\t\tbackground: transparent;\n\t}\n\n\t.ProseMirror-hideselection *::-moz-selection {\n\t\tbackground: transparent;\n\t}\n\n\t/**\n\t * This prosemirror css style: https://github.com/ProseMirror/prosemirror-view/blob/f37ebb29befdbde3cd194fe13fe17b78e743d2f2/style/prosemirror.css#L24\n\t *\n\t * 1. Merge and Release platform_editor_hide_cursor_when_pm_hideselection\n\t * 2. Cleanup duplicated style from platform_editor_advanced_code_blocks\n\t *    https://product-fabric.atlassian.net/browse/ED-26331\n\t */\n\t", "\n\n\t/* This prosemirror css style: https://github.com/ProseMirror/prosemirror-view/blob/f37ebb29befdbde3cd194fe13fe17b78e743d2f2/style/prosemirror.css#L24 */\n\t", "\n\n\t.ProseMirror-selectednode {\n\t\toutline: none;\n\t}\n\n\t.ProseMirror-selectednode:empty {\n\t\toutline: 2px solid ", ";\n\t}\n\n\t.ProseMirror.ProseMirror-focused:has(.ProseMirror-mark-boundary-cursor) {\n\t\tcaret-color: transparent;\n\t}\n\t.ProseMirror:not(.ProseMirror-focused) .ProseMirror-mark-boundary-cursor {\n\t\tdisplay: none;\n\t}\n\n\t", "\n\n\t", "\n\n\t", "\n\n\t", "\n\n\t", "\n\n\t", "\n\t", "\n  \t", "\n\n\n  \t", "\n\n\t", "\n\t", "\n\n\t", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  /* This needs to be after telepointer styles as some overlapping rules have equal specificity, and so the order is significant */\n  ", "\n\n  ", ";\n\n\t", "\n\n\t", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n  ", "\n  ", "\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  // Switch between the two icons based on the visual refresh feature gate\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n\t.panelView-content-wrap {\n\t\tbox-sizing: border-box;\n\t}\n\n\t.mediaGroupView-content-wrap ul {\n\t\tpadding: 0;\n\t}\n\n\t/** Needed to override any cleared floats, e.g. image wrapping */\n\n\tdiv.fabric-editor-block-mark[class^='fabric-editor-align'] {\n\t\tclear: none !important;\n\t}\n\n\t.fabric-editor-align-end {\n\t\ttext-align: right;\n\t}\n\n\t.fabric-editor-align-start {\n\t\ttext-align: left;\n\t}\n\n\t.fabric-editor-align-center {\n\t\ttext-align: center;\n\t}\n\n\t// For FullPage only when inside a table\n\t// Related code all lives inside: packages/editor/editor-core/src/ui/Appearance/FullPage/StyledComponents.ts\n\t// In the \"editorContentAreaContainerStyle\" function\n\t.fabric-editor--full-width-mode {\n\t\t.pm-table-container {\n\t\t\t.code-block,\n\t\t\t.extension-container,\n\t\t\t.multiBodiedExtension--container {\n\t\t\t\tmax-width: 100%;\n\t\t\t}\n\t\t}\n\t}\n\n\t.pm-table-header-content-wrap :not(.fabric-editor-alignment),\n\t.pm-table-header-content-wrap :not(p, .fabric-editor-block-mark) + div.fabric-editor-block-mark,\n\t.pm-table-cell-content-wrap :not(p, .fabric-editor-block-mark) + div.fabric-editor-block-mark {\n\t\tp:first-of-type {\n\t\t\tmargin-top: 0;\n\t\t}\n\t}\n\t.pm-table-cell-content-wrap .mediaGroupView-content-wrap {\n\t\tclear: both;\n\t}\n\n\t.hyperlink-floating-toolbar {\n\t\tpadding: 0;\n\t}\n\n\t/* Legacy Link icon in the Atlaskit package\n\t is bigger than the others, new ADS icon does not have this issue\n  */\n\t", "\n"])), _editorSharedStyles.akEditorGutterPadding, (0, _editorSharedStyles.akEditorGutterPaddingDynamic)(), _editorSharedStyles.akEditorDefaultLayoutWidth, _editorSharedStyles.akEditorFullWidthLayoutWidth, _editorSharedStyles.akEditorCalculatedWideLayoutWidthSmallViewport, akEditorBreakpointForSmallDevice, _editorSharedStyles.akEditorCalculatedWideLayoutWidth, _whitespaceStyles.whitespaceStyles, _indentationStyles.indentationStyles, _shadowStyles.shadowStyles, _inlineNodeViewSharedStyles.InlineNodeViewSharedStyles, (0, _platformFeatureFlags.fg)('platform_editor_hide_cursor_when_pm_hideselection') ? (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n\t\t\t\t.ProseMirror-hideselection {\n\t\t\t\t\tcaret-color: transparent;\n\t\t\t\t}\n\t\t\t"]))) : null, (0, _experiments.editorExperiment)('platform_editor_advanced_code_blocks', true) ? (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n\t\t\t\t.ProseMirror-hideselection {\n\t\t\t\t\tcaret-color: transparent;\n\t\t\t\t}\n\t\t\t"]))) : null, "var(--ds-border-focused, #8cf)", _placeholderTextStyles.placeholderTextStyles, placeholderStyles, (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') ? placeholderOverflowStyles : null, (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') && (0, _platformFeatureFlags.fg)('platform_editor_quick_insert_placeholder') ? placeholderWrapStyles : null, _codeBlockStyles.codeBlockStyles, !(0, _platformFeatureFlags.fg)('platform_editor_typography_ugc') && _editorUGCTokenStyles.editorUGCTokensDefault,
   // eslint-disable-next-line @atlaskit/platform/no-preconditioning
   (0, _platformFeatureFlags.fg)('platform_editor_typography_ugc') && ( /* eslint-disable @atlaskit/platform/ensure-feature-flag-prefix */
   (0, _platformFeatureFlags.fg)('platform-dst-jira-web-fonts') || (0, _platformFeatureFlags.fg)('confluence_typography_refreshed') || (0, _platformFeatureFlags.fg)('atlas_editor_typography_refreshed')) && _editorUGCTokenStyles.editorUGCTokensRefreshed
@@ -111,7 +111,7 @@ var contentStyles = function contentStyles() {
   // eslint-disable-next-line @atlaskit/platform/no-preconditioning
   (0, _platformFeatureFlags.fg)('platform_editor_typography_ugc') && /* eslint-disable @atlaskit/platform/ensure-feature-flag-prefix */
   !((0, _platformFeatureFlags.fg)('platform-dst-jira-web-fonts') || (0, _platformFeatureFlags.fg)('confluence_typography_refreshed') || (0, _platformFeatureFlags.fg)('atlas_editor_typography_refreshed')) && _editorUGCTokenStyles.editorUGCTokensModernized
-  /* eslint-enable @atlaskit/platform/ensure-feature-flag-prefix */, _blockTypeStyles.blocktypeStyles, (0, _platformFeatureFlags.fg)('platform_editor_typography_ugc') && _blockTypeStyles.blocktypeStyles_fg_platform_editor_typography_ugc, !(0, _platformFeatureFlags.fg)('platform_editor_typography_ugc') && _blockTypeStyles.blocktypeStyles_without_fg_platform_editor_typography_ugc, (0, _platformFeatureFlags.fg)('platform_editor_nested_dnd_styles_changes') && _blockTypeStyles.blocktypeStyles_fg_platform_editor_nested_dnd_styles_changes, _codeMarkStyles.codeMarkStyles, _textColorStyles.textColorStyles, _backgroundColorStyles.backgroundColorStyles, _list.listsStyles, _rule.ruleStyles, _mediaStyles.mediaStyles, (0, _platformFeatureFlags.fg)('confluence_team_presence_scroll_to_pointer') ? _telepointerStyles.telepointerStyle : _telepointerStyles.telepointerStyleWithInitialOnly, _telepointerStyles.telepointerColorAndCommonStyle, _selection.gapCursorStyles, (0, _panel.panelStyles)(), _mentions.mentionsStyles, _tasksAndDecisionsStyles.tasksAndDecisionsStyles, _gridStyles.gridStyles, _blockMarksStyles.blockMarksStyles, _dateStyles.dateStyles, _extension.extensionStyles, (0, _expand.expandStyles)(), _findReplaceStyles.findReplaceStyles, _textHighlightStyles.textHighlightStyle, _tasksAndDecisionsStyles.decisionStyles, (0, _experiments.editorExperiment)('platform_editor_vanilla_dom', true, {
+  /* eslint-enable @atlaskit/platform/ensure-feature-flag-prefix */, _blockTypeStyles.blocktypeStyles, (0, _platformFeatureFlags.fg)('platform_editor_typography_ugc') && _blockTypeStyles.blocktypeStyles_fg_platform_editor_typography_ugc, !(0, _platformFeatureFlags.fg)('platform_editor_typography_ugc') && _blockTypeStyles.blocktypeStyles_without_fg_platform_editor_typography_ugc, (0, _platformFeatureFlags.fg)('platform_editor_nested_dnd_styles_changes') && _blockTypeStyles.blocktypeStyles_fg_platform_editor_nested_dnd_styles_changes, _codeMarkStyles.codeMarkStyles, _textColorStyles.textColorStyles, _backgroundColorStyles.backgroundColorStyles, _list.listsStyles, _rule.ruleStyles, _mediaStyles.mediaStyles, (0, _platformFeatureFlags.fg)('confluence_team_presence_scroll_to_pointer') ? _telepointerStyles.telepointerStyle : _telepointerStyles.telepointerStyleWithInitialOnly, _telepointerStyles.telepointerColorAndCommonStyle, _selection.gapCursorStyles, (0, _panel.panelStyles)(), _mentions.mentionsStyles, _tasksAndDecisionsStyles.tasksAndDecisionsStyles, _gridStyles.gridStyles, _blockMarksStyles.blockMarksStyles, _dateStyles.dateStyles, _extension.extensionStyles, _expandStyles.expandStyles, (0, _platformFeatureFlags.fg)('platform_editor_nested_dnd_styles_changes') && _expandStyles.expandStylesMixin_fg_platform_editor_nested_dnd_styles_changes, !(0, _platformFeatureFlags.fg)('platform_editor_nested_dnd_styles_changes') && _expandStyles.expandStylesMixin_without_fg_platform_editor_nested_dnd_styles_changes, (0, _platformFeatureFlags.fg)('platform-visual-refresh-icons') && _expandStyles.expandStylesMixin_fg_platform_visual_refresh_icons, _findReplaceStyles.findReplaceStyles, _textHighlightStyles.textHighlightStyle, _tasksAndDecisionsStyles.decisionStyles, (0, _experiments.editorExperiment)('platform_editor_vanilla_dom', true, {
     exposure: false
   }) && _tasksAndDecisionsStyles.vanillaTaskItemStyles, (0, _experiments.editorExperiment)('platform_editor_vanilla_dom', true, {
     exposure: false
@@ -187,6 +187,14 @@ var listLayoutShiftFix = (0, _react2.css)({
   }
 });
 
+// Make sure the first floating toolbar button has focus ring when focused via .focus()
+var firstFloatingToolbarButtonStyles = (0, _react2.css)({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  'button.first-floating-toolbar-button:focus': {
+    outline: "2px solid ".concat("var(--ds-border-focused, #2684FF)")
+  }
+});
+
 /**
  * EditorContentStyles is a wrapper component that applies styles to its children
  * based on the provided feature flags, view mode, and other props.
@@ -261,7 +269,7 @@ var EditorContentContainer = /*#__PURE__*/_react.default.forwardRef(function (pr
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
     _emoji.vanillaEmojiStyles :
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
-    _emoji.reactEmojiStyles],
+    _emoji.reactEmojiStyles, (0, _platformFeatureFlags.fg)('platform_editor_fix_floating_toolbar_focus') && firstFloatingToolbarButtonStyles],
     "data-editor-scroll-container": isScrollable ? 'true' : undefined,
     "data-testid": "editor-content-container",
     style: {

package/dist/cjs/ui/EditorContentContainer/styles/expandStyles.js

@@ -0,0 +1,263 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.expandStylesMixin_without_fg_platform_editor_nested_dnd_styles_changes = exports.expandStylesMixin_fg_platform_visual_refresh_icons = exports.expandStylesMixin_fg_platform_editor_nested_dnd_styles_changes = exports.expandStyles = void 0;
+var _react = require("@emotion/react");
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
+var expandStyles = exports.expandStyles = (0, _react.css)({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '.ak-editor-expand__icon > div': {
+    display: 'flex'
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '.ak-editor-expand': {
+    // sharedExpandStyles.containerStyles({ expanded: false, focused: false })(),
+    borderWidth: '1px',
+    borderStyle: 'solid',
+    borderColor: 'transparent',
+    borderRadius: "var(--ds-border-radius-100, 4px)",
+    minHeight: '25px',
+    background: "var(--ds-background-neutral-subtle, transparent)",
+    margin: "var(--ds-space-050, 0.25rem)".concat(" 0 0"),
+    transition: 'background 0.3s cubic-bezier(0.15, 1, 0.3, 1), border-color 0.3s cubic-bezier(0.15, 1, 0.3, 1)',
+    padding: "var(--ds-space-100, 8px)",
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
+    'td > :not(style):first-child, td > style:first-child + *': {
+      marginTop: 0
+    },
+    cursor: 'pointer',
+    boxSizing: 'border-box',
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
+    'td > &': {
+      marginTop: 0
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '.ak-editor-expand__icon-container svg': {
+      color: "var(--ds-icon-subtle, #626F86)",
+      transform: 'rotate(90deg)'
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
+    '&.ak-editor-selected-node:not(.danger)': {
+      // SelectionStyle.Blanket
+      position: 'relative',
+      // Fixes ED-9263, where emoji or inline card in panel makes selection go outside the panel
+      // in Safari. Looks like it's caused by user-select: all in the emoji element
+      '-webkit-user-select': 'text',
+      '&::before': {
+        position: 'absolute',
+        content: "''",
+        left: 0,
+        right: 0,
+        top: 0,
+        bottom: 0,
+        width: '100%',
+        pointerEvents: 'none',
+        zIndex: 12,
+        // akEditorStickyheaderZIndex (11) + 1
+        backgroundColor: "var(--ds-blanket-selected, #388BFF14)"
+      },
+      // SelectionStyle.Border (common case)
+      border: "1px solid ".concat("var(--ds-border-selected, #0C66E4)"),
+      // If fg('platform_editor_nested_dnd_styles_changes') is true,
+      // then we'll also need the rest of the selection styles for blanket
+
+      // hideNativeBrowserTextSelectionStyles
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+      '&::selection, *::selection': {
+        backgroundColor: 'transparent'
+      },
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
+      '&::-moz-selection, *::-moz-selection': {
+        backgroundColor: 'transparent'
+      }
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '&.danger': {
+      background: "var(--ds-background-danger, #FFECEB)",
+      borderColor: "var(--ds-border-danger, #E2483D)"
+    }
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '.ProseMirror > .ak-editor-expand__type-expand, .fabric-editor-breakout-mark-dom > .ak-editor-expand__type-expand': {
+    // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
+    marginLeft: '-12px',
+    // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
+    marginRight: '-12px'
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '.ak-editor-expand__content': {
+    // sharedExpandStyles.contentStyles({ expanded: false, focused: false })(),
+    paddingTop: "var(--ds-space-0, 0px)",
+    paddingRight: "var(--ds-space-100, 8px)",
+    paddingLeft: "var(--ds-space-300, 24px)",
+    marginLeft: "var(--ds-space-050, 4px)",
+    display: 'flow-root',
+    /* The follow rules inside @supports block are added as a part of ED-8893
+    	The fix is targeting mobile bridge on iOS 12 or below,
+    	We should consider remove this fix when we no longer support iOS 12 */
+    '@supports not (display: flow-root)': {
+      width: '100%',
+      boxSizing: 'border-box'
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '.expand-content-wrapper, .nestedExpand-content-wrapper': {
+      /* We visually hide the content here to preserve the content during copy+paste */
+      /* Do not add text nowrap here because inline comment navigation depends on the location of the text */
+      width: '100%',
+      display: 'block',
+      height: 0,
+      overflow: 'hidden',
+      clip: 'rect(1px, 1px, 1px, 1px)',
+      userSelect: 'none'
+    },
+    cursor: 'text'
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '.ak-editor-expand__title-input': {
+    // sharedExpandStyles.titleInputStyles(),
+    outline: 'none',
+    border: 'none',
+    // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
+    fontSize: 'calc(14rem / 16)',
+    // relativeFontSizeToBase16(14),
+    // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
+    lineHeight: 1.714,
+    // If fg('platform-visual-refresh-icons') then this needs to be overridden
+    fontWeight: "var(--ds-font-weight-regular, 400)",
+    color: "var(--ds-text-subtlest, #626F86)",
+    background: 'transparent',
+    display: 'flex',
+    flex: 1,
+    padding: "0 0 0 ".concat("var(--ds-space-050, 4px)"),
+    width: '100%',
+    '&::placeholder': {
+      opacity: 1,
+      color: "var(--ds-text-subtlest, #626F86)"
+    }
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '.ak-editor-expand__title-container': {
+    // sharedExpandStyles.titleContainerStyles(),
+    padding: 0,
+    display: 'flex',
+    // Omitting alignItems: 'flex-start' as it would be overridden
+    background: 'none',
+    border: 'none',
+    // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
+    fontSize: 'calc(14rem / 16)',
+    // relativeFontSizeToBase16(14),
+    width: '100%',
+    color: "var(--ds-text-subtle, #44546F)",
+    // Omitting overflow: 'hidden' as it would be overridden
+    cursor: 'pointer',
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '&:focus': {
+      outline: 0
+    },
+    alignItems: 'center',
+    overflow: 'visible'
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '.ak-editor-expand__expanded': {
+    background: "var(--ds-background-neutral-subtle, #00000000)",
+    borderColor: "var(--ds-border, #091E4224)",
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '.ak-editor-expand__content': {
+      paddingTop: "var(--ds-space-100, 8px)"
+      // If fg('platform_editor_nested_dnd_styles_changes') then this needs to be extended
+    }
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '.ak-editor-expand__input-container': {
+    width: '100%'
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
+  '.ak-editor-expand:not(.ak-editor-expand__expanded)': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '.ak-editor-expand__content': {
+      position: 'absolute',
+      height: '1px',
+      width: '1px',
+      overflow: 'hidden',
+      clip: 'rect(1px, 1px, 1px, 1px)',
+      whiteSpace: 'nowrap'
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '.ak-editor-expand__icon-container svg': {
+      color: "var(--ds-icon-subtle, #626F86)",
+      transform: 'rotate(0deg)'
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
+    '&:not(.ak-editor-selected-node):not(.danger)': {
+      background: 'transparent',
+      borderColor: 'transparent',
+      '&:hover': {
+        borderColor: "var(--ds-border, #091E4224)",
+        background: "var(--ds-background-neutral-subtle, #00000000)"
+      }
+    }
+  }
+});
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
+var expandStylesMixin_fg_platform_visual_refresh_icons = exports.expandStylesMixin_fg_platform_visual_refresh_icons = (0, _react.css)({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '.ak-editor-expand__title-input': {
+    // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
+    lineHeight: 1
+  }
+});
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
+var expandStylesMixin_fg_platform_editor_nested_dnd_styles_changes = exports.expandStylesMixin_fg_platform_editor_nested_dnd_styles_changes = (0, _react.css)({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '.ak-editor-content-area.appearance-full-page .ProseMirror > .ak-editor-expand__type-expand, .fabric-editor-breakout-mark-dom > .ak-editor-expand__type-expand': {
+    // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
+    marginLeft: '-20px',
+    // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
+    marginRight: '-20px'
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '.ak-editor-expand__expanded': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '.ak-editor-expand__content': {
+      // firstNodeWithNotMarginTop
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
+      '> :nth-child(1 of :not(style, .ProseMirror-gapcursor, .ProseMirror-widget, span))': {
+        marginTop: 0
+      },
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+      '> div.ak-editor-expand[data-node-type="nestedExpand"]': {
+        marginTop: "var(--ds-space-050, 0.25rem)"
+      }
+    }
+  }
+});
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
+var expandStylesMixin_without_fg_platform_editor_nested_dnd_styles_changes = exports.expandStylesMixin_without_fg_platform_editor_nested_dnd_styles_changes = (0, _react.css)({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '.ak-editor-expand': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
+    '&.ak-editor-selected-node:not(.danger)': {
+      // SelectionStyle.Border (with fg('platform_editor_nested_dnd_styles_changes'))
+      // Fixes ED-15246: Trello card is visible through a border of a table border
+      '&::after': {
+        height: '100%',
+        content: "'\\00a0'",
+        background: "var(--ds-border-selected, #0C66E4)",
+        position: 'absolute',
+        right: '-1px',
+        top: 0,
+        bottom: 0,
+        width: '1px',
+        border: 'none',
+        display: 'inline-block'
+      }
+    }
+  }
+});

package/dist/cjs/ui/EditorContentContainer/styles/inlineNodeViewSharedStyles.js

@@ -0,0 +1,46 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.InlineNodeViewSharedStyles = void 0;
+var _react = require("@emotion/react");
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
+var InlineNodeViewSharedStyles = exports.InlineNodeViewSharedStyles = (0, _react.css)({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '.inlineNodeView': {
+    display: 'inline',
+    userSelect: 'all',
+    whiteSpace: 'nowrap',
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
+    '& > *:not(.zeroWidthSpaceContainer)': {
+      whiteSpace: 'pre-wrap'
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '& > .assistive': {
+      userSelect: 'none'
+    }
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '&.ua-safari': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '.inlineNodeView': {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+      '&::selection, *::selection': {
+        background: 'transparent'
+      }
+    }
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '&.ua-chrome .inlineNodeView > span': {
+    userSelect: 'none'
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '.inlineNodeViewAddZeroWidthSpace': {
+    '&::after': {
+      content: "'\u200B'" // ZERO_WIDTH_SPACE
+    }
+  }
+});

package/dist/cjs/ui/EditorContentContainer/styles/placeholderTextStyles.js

@@ -0,0 +1,72 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.placeholderTextStyles = void 0;
+var _react = require("@emotion/react");
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
+var placeholderTextStyles = exports.placeholderTextStyles = (0, _react.css)({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '.ProseMirror span[data-placeholder]': {
+    color: "var(--ds-text-subtlest, #626F86)",
+    display: 'inline'
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '.ProseMirror span.pm-placeholder': {
+    display: 'inline',
+    color: "var(--ds-text-subtlest, #626F86)"
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '.ProseMirror span.pm-placeholder__text': {
+    display: 'inline',
+    color: "var(--ds-text-subtlest, #626F86)"
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '.ProseMirror span.pm-placeholder.ak-editor-selected-node': {
+    // ...backgroundSelectionStyles
+    backgroundColor: "var(--ds-background-selected, #E9F2FF)",
+    // ...backgroundSelectionStyles -> hideNativeBrowserTextSelectionStyles
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '&::selection,*::selection': {
+      backgroundColor: 'transparent'
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors, @atlaskit/ui-styling-standard/no-nested-selectors
+    '&::-moz-selection,*::-moz-selection': {
+      backgroundColor: 'transparent'
+    }
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '.ProseMirror span.pm-placeholder__text[data-placeholder]::after': {
+    color: "var(--ds-text-subtlest, #626F86)",
+    cursor: 'text',
+    content: 'attr(data-placeholder)',
+    display: 'inline'
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '.ProseMirror': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '.ProseMirror-fake-text-cursor': {
+      display: 'inline',
+      pointerEvents: 'none',
+      position: 'relative'
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '.ProseMirror-fake-text-cursor::after': {
+      content: '""',
+      display: 'inline',
+      top: 0,
+      position: 'absolute',
+      borderRight: "1px solid ".concat("var(--ds-border, #091E4224)")
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '.ProseMirror-fake-text-selection': {
+      display: 'inline',
+      pointerEvents: 'none',
+      position: 'relative',
+      backgroundColor: "var(--ds-background-selected, #B3D4FF)"
+    }
+  }
+});

package/dist/cjs/version-wrapper.js

@@ -5,4 +5,4 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.version = exports.name = void 0;
 var name = exports.name = "@atlaskit/editor-core";
-var version = exports.version = "207.15.0";
+var version = exports.version = "207.16.0";

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

@@ -269,6 +269,14 @@ const firstBlockNodeStylesNew = css`
 	}
 `;
 
+// Make sure the first floating toolbar button has focus ring when focused via .focus()
+const firstFloatingToolbarButtonStyles = css({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  'button.first-floating-toolbar-button:focus': {
+    outline: `2px solid ${"var(--ds-border-focused, #2684FF)"}`
+  }
+});
+
 // The breakpoint for small devices is 1266px, copied from getBreakpoint in platform/packages/editor/editor-common/src/ui/WidthProvider/index.tsx
 const akEditorBreakpointForSmallDevice = `1266px`;
 
@@ -371,6 +379,7 @@ const legacyContentStyles = props => css`
 		display: none;
 	}
 
+	${fg('platform_editor_fix_floating_toolbar_focus') ? firstFloatingToolbarButtonStyles : null}
 	${placeholderTextStyles}
 	${placeholderStyles}
 	${editorExperiment('platform_editor_controls', 'variant1') ? placeholderOverflowStyles : null}