@atlaskit/editor-core 207.17.1 → 207.18.1

package/CHANGELOG.md

@@ -1,5 +1,30 @@
 # @atlaskit/editor-core
 
+## 207.18.1
+
+### Patch Changes
+
+- [#167056](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/167056)
+  [`2e67525f3e72c`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/2e67525f3e72c) -
+  [ux] Migrate panelStyles
+- [#166490](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/166490)
+  [`9f140155c14be`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/9f140155c14be) -
+  [ux] Shows tooltip on the resize handle when it is hovered.
+- Updated dependencies
+
+## 207.18.0
+
+### Minor Changes
+
+- [#166502](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/166502)
+  [`ea1ed63fc9615`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/ea1ed63fc9615) -
+  ED-28032 add keyboard shortcuts for new resizing experience behind
+  platform_editor_breakout_resizing
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 207.17.1
 
 ### Patch Changes

package/afm-cc/tsconfig.json

@@ -4,7 +4,7 @@
         "declaration": true,
         "target": "es5",
         "composite": true,
-        "outDir": "../dist",
+        "outDir": "../../../../../confluence/tsDist/@atlaskit__editor-core",
         "rootDir": "../"
     },
     "include": [

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

@@ -152,7 +152,7 @@ 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\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\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)", (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
@@ -168,7 +168,7 @@ var legacyContentStyles = function legacyContentStyles(props) {
     exposure: false
   }) && (0, _platformFeatureFlags.fg)('platform-visual-refresh-icons') && _tasksAndDecisions.vanillaTaskDecisionIconWithVisualRefresh, (0, _experiments.editorExperiment)('platform_editor_vanilla_dom', true, {
     exposure: false
-  }) && !(0, _platformFeatureFlags.fg)('platform-visual-refresh-icons') && _tasksAndDecisions.vanillaTaskDecisionIconWithoutVisualRefresh, _status.statusStyles, (0, _experiments.editorExperiment)('platform_editor_vanilla_dom', true) ? (0, _status.vanillaStatusStyles)() : null, (0, _styles.annotationSharedStyles)(), (0, _styles.smartCardStyles)(), (0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-v1') ? (0, _styles.getSmartCardSharedStyles)() : _styles.smartCardSharedStyles, (0, _experiments.editorExperiment)('platform_editor_vanilla_dom', true) ? _date.dateVanillaStyles : null, _date.dateStyles, (0, _styles.embedCardStyles)(), _styles.unsupportedStyles, _styles.resizerStyles, (0, _styles.pragmaticResizerStyles)(), (0, _aiPanels.aiPanelStyles)(props.colorMode), firstBlockNodeStylesNew, _styles.MediaSharedClassNames.FLOATING_TOOLBAR_COMPONENT, !(0, _platformFeatureFlags.fg)('platform-visual-refresh-icons') ? (0, _react2.css)(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n\t\t\t\t.hyperlink-open-link {\n\t\t\t\t\tmin-width: 24px;\n\t\t\t\t\tsvg {\n\t\t\t\t\t\tmax-width: 18px;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t"]))) : null);
+  }) && !(0, _platformFeatureFlags.fg)('platform-visual-refresh-icons') && _tasksAndDecisions.vanillaTaskDecisionIconWithoutVisualRefresh, _status.statusStyles, (0, _experiments.editorExperiment)('platform_editor_vanilla_dom', true) ? (0, _status.vanillaStatusStyles)() : null, (0, _styles.annotationSharedStyles)(), (0, _styles.smartCardStyles)(), (0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-v1') ? (0, _styles.getSmartCardSharedStyles)() : _styles.smartCardSharedStyles, (0, _experiments.editorExperiment)('platform_editor_vanilla_dom', true) ? _date.dateVanillaStyles : null, _date.dateStyles, (0, _styles.embedCardStyles)(), _styles.unsupportedStyles, _styles.resizerStyles, (0, _styles.pragmaticResizerStyles)(), (0, _styles.pragmaticResizerStylesForTooltip)(), (0, _aiPanels.aiPanelStyles)(props.colorMode), firstBlockNodeStylesNew, _styles.MediaSharedClassNames.FLOATING_TOOLBAR_COMPONENT, !(0, _platformFeatureFlags.fg)('platform-visual-refresh-icons') ? (0, _react2.css)(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n\t\t\t\t.hyperlink-open-link {\n\t\t\t\t\tmin-width: 24px;\n\t\t\t\t\tsvg {\n\t\t\t\t\t\tmax-width: 18px;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t"]))) : null);
 };
 var listLayoutShiftFix = (0, _react2.css)({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors

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

@@ -17,7 +17,6 @@ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _tokens = require("@atlaskit/tokens");
 var _extension = require("../ContentStyles/extension");
-var _panel = require("../ContentStyles/panel");
 var _aiPanel = require("./styles/aiPanel");
 var _annotationStyles = require("./styles/annotationStyles");
 var _backgroundColorStyles = require("./styles/backgroundColorStyles");
@@ -40,6 +39,7 @@ var _link = require("./styles/link");
 var _list = require("./styles/list");
 var _mediaStyles = require("./styles/mediaStyles");
 var _mentions = require("./styles/mentions");
+var _panelStyles = require("./styles/panelStyles");
 var _paragraphStyles = require("./styles/paragraphStyles");
 var _placeholderTextStyles = require("./styles/placeholderTextStyles");
 var _resizerStyles = require("./styles/resizerStyles");
@@ -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\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\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,
+  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\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\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\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, _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, {
+  /* 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, _panelStyles.panelStyles, (0, _platformFeatureFlags.fg)('platform_editor_add_border_for_nested_panel') && _panelStyles.panelStylesMixin_fg_platform_editor_add_border_for_nested_panel, (0, _platformFeatureFlags.fg)('platform_editor_nested_dnd_styles_changes') && _panelStyles.panelStylesMixin_fg_platform_editor_nested_dnd_styles_changes, (0, _platformFeatureFlags.fg)('platform_editor_lcm_nested_panel_icon_fix') && _panelStyles.panelStylesMixin_fg_platform_editor_lcm_nested_panel_icon_fix, !(0, _platformFeatureFlags.fg)('platform_editor_lcm_nested_panel_icon_fix') && _panelStyles.panelStylesMixin_without_fg_platform_editor_lcm_nested_panel_icon_fix, _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
@@ -239,7 +239,9 @@ var EditorContentContainer = /*#__PURE__*/_react.default.forwardRef(function (pr
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
     _browser.browser.safari && _list.listsStylesSafariFix, (0, _experiments.editorExperiment)('platform_editor_breakout_resizing', true) &&
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
-    _resizerStyles.pragmaticResizerStyles,
+    _resizerStyles.pragmaticResizerStyles, (0, _experiments.editorExperiment)('platform_editor_breakout_resizing', true) && (0, _platformFeatureFlags.fg)('platform_editor_breakout_resizing_hello_release') &&
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    _resizerStyles.pragmaticResizerStylesForTooltip,
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
     _aiPanel.aiPanelBaseStyles,
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values

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

@@ -0,0 +1,349 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.panelStylesMixin_without_fg_platform_editor_lcm_nested_panel_icon_fix = exports.panelStylesMixin_fg_platform_editor_nested_dnd_styles_changes = exports.panelStylesMixin_fg_platform_editor_lcm_nested_panel_icon_fix = exports.panelStylesMixin_fg_platform_editor_add_border_for_nested_panel = exports.panelStyles = 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 panelStyles = exports.panelStyles = (0, _react.css)({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '.ProseMirror': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '.ak-editor-panel': {
+      cursor: 'pointer',
+      /* Danger when top level node */
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+      '&.danger': {
+        boxShadow: "0 0 0 1px ".concat("var(--ds-border-danger, #E2483D)"),
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
+        backgroundColor: "var(--ds-background-danger, #FFECEB)".concat(" !important"),
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+        '.ak-editor-panel__icon': {
+          // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
+          color: "var(--ds-icon-danger, #C9372C)".concat(" !important")
+        }
+      },
+      // panelSharedStyles()
+      // panelSharedStylesWithoutPrefix()
+      borderRadius: "var(--ds-border-radius, 3px)",
+      margin: "0.75rem 0 0",
+      paddingTop: "var(--ds-space-100, 8px)",
+      paddingRight: "var(--ds-space-200, 16px)",
+      paddingBottom: "var(--ds-space-100, 8px)",
+      paddingLeft: "var(--ds-space-100, 8px)",
+      minWidth: '48px',
+      display: 'flex',
+      position: 'relative',
+      alignItems: 'normal',
+      wordBreak: 'break-word',
+      // mainDynamicStyles(PanelType.INFO)
+      // > getPanelTypeBackground(PanelType.INFO)
+      backgroundColor: "var(--ds-background-accent-blue-subtlest, #E9F2FF)",
+      color: 'inherit',
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+      '.ak-editor-panel__icon': {
+        flexShrink: 0,
+        height: "var(--ds-space-300, 24px)",
+        width: "var(--ds-space-300, 24px)",
+        boxSizing: 'content-box',
+        paddingRight: "var(--ds-space-100, 8px)",
+        textAlign: 'center',
+        userSelect: 'none',
+        '-moz-user-select': 'none',
+        '-webkit-user-select': 'none',
+        '-ms-user-select': 'none',
+        // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
+        marginTop: '0.1em',
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+        '> span': {
+          verticalAlign: 'middle',
+          display: 'inline-flex'
+        },
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+        '.emoji-common-emoji-sprite': {
+          verticalAlign: '-2px' // -(8*3-20)/2 [px]
+        },
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+        '.emoji-common-emoji-image': {
+          verticalAlign: '-3px',
+          // panelEmojiSpriteVerticalAlignment - 1 [px]
+
+          /* Vertical align only works for inline-block elements in Firefox */
+          // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
+          '@-moz-document url-prefix()': {
+            // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+            img: {
+              display: 'inline-block'
+            }
+          }
+        }
+      },
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+      '.ak-editor-panel__content': {
+        margin: "var(--ds-space-025, 2px)".concat(" 0 ", "var(--ds-space-025, 2px)"),
+        flex: '1 0 0',
+        /*
+        	https://ishadeed.com/article/min-max-css/#setting-min-width-to-zero-with-flexbox
+        	The default value for min-width is auto, which is computed to zero.
+        	When an element is a flex item, the value of min-width doesn’t compute to zero.
+        	The minimum size of a flex item is equal to the size of its contents.
+        */
+        minWidth: 0
+      },
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+      '&[data-panel-type="note"]': {
+        // mainDynamicStyles(PanelType.NOTE)
+        backgroundColor: "var(--ds-background-accent-purple-subtlest, #F3F0FF)",
+        color: 'inherit'
+      },
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+      '&[data-panel-type="tip"]': {
+        // mainDynamicStyles(PanelType.TIP)
+        backgroundColor: "var(--ds-background-accent-green-subtlest, #DCFFF1)",
+        color: 'inherit'
+      },
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+      '&[data-panel-type="warning"]': {
+        // mainDynamicStyles(PanelType.WARNING)
+        backgroundColor: "var(--ds-background-accent-yellow-subtlest, #FFF7D6)",
+        color: 'inherit'
+      },
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+      '&[data-panel-type="error"]': {
+        // mainDynamicStyles(PanelType.ERROR)
+        backgroundColor: "var(--ds-background-accent-red-subtlest, #FFECEB)",
+        color: 'inherit'
+      },
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+      '&[data-panel-type="success"]': {
+        // mainDynamicStyles(PanelType.SUCCESS)
+        backgroundColor: "var(--ds-background-accent-green-subtlest, #DCFFF1)",
+        color: 'inherit'
+      }
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '.ak-editor-panel__content': {
+      cursor: 'text'
+    },
+    /* Danger when nested node */
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '.danger .ak-editor-panel': {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+      '&[data-panel-type]': {
+        backgroundColor: "var(--ds-blanket-danger, #EF5C4814)",
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+        '.ak-editor-panel__icon': {
+          color: "var(--ds-icon-danger, #C9372C)"
+        }
+      }
+    }
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
+  '.ak-editor-panel.ak-editor-selected-node:not(.danger)': {
+    // getSelectionStyles([SelectionStyle.BoxShadow, SelectionStyle.Blanket]),
+    // SelectionStyle.BoxShadow
+    boxShadow: "0 0 0 1px ".concat("var(--ds-border-selected, #0C66E4)"),
+    borderColor: 'transparent',
+    // 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,
+      // akEditorSmallZIndex
+      backgroundColor: "var(--ds-blanket-selected, #388BFF14)"
+    },
+    // hideNativeSelectionStyles
+    // 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-exported-styles
+var panelStylesMixin_fg_platform_editor_add_border_for_nested_panel = exports.panelStylesMixin_fg_platform_editor_add_border_for_nested_panel = (0, _react.css)({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '.ProseMirror': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '.ak-editor-panel': {
+      // Support nested panel
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+      '.ak-editor-panel__content .ak-editor-panel': {
+        border: "1px solid ".concat("var(--ds-border, #091E4224)")
+      }
+    }
+  }
+});
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
+var panelStylesMixin_fg_platform_editor_nested_dnd_styles_changes = exports.panelStylesMixin_fg_platform_editor_nested_dnd_styles_changes = (0, _react.css)({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '.ProseMirror': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '.ak-editor-panel': {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+      '&.ak-editor-panel__no-icon': {
+        paddingRight: "var(--ds-space-150, 12px)",
+        paddingLeft: "var(--ds-space-150, 12px)"
+      }
+    }
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '.ak-editor-content-area.appearance-full-page .ProseMirror': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '.ak-editor-panel .ak-editor-panel__icon': {
+      paddingRight: "var(--ds-space-150, 12px)"
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '.ak-editor-panel.ak-editor-panel__no-icon': {
+      paddingLeft: "var(--ds-space-250, 20px)",
+      paddingRight: "var(--ds-space-250, 20px)"
+    }
+  },
+  /* Don't want extra padding for inline editor (nested) */
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '.ak-editor-content-area .ak-editor-content-area .ProseMirror': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '.ak-editor-panel .ak-editor-panel__icon': {
+      paddingRight: "var(--ds-space-100, 8px)"
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '.ak-editor-panel.ak-editor-panel__no-icon': {
+      paddingRight: "var(--ds-space-150, 12px)",
+      paddingLeft: "var(--ds-space-150, 12px)"
+    }
+  }
+});
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
+var panelStylesMixin_fg_platform_editor_lcm_nested_panel_icon_fix = exports.panelStylesMixin_fg_platform_editor_lcm_nested_panel_icon_fix = (0, _react.css)({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '.ProseMirror': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '.ak-editor-panel': {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+      '&[data-panel-type="info"]': {
+        // getIconStyles(PanelType.INFO),
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+        '.ak-editor-panel__icon[data-panel-type="info"]': {
+          color: "var(--ds-icon-information, #1D7AFC)"
+        }
+      },
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+      '&[data-panel-type="note"]': {
+        // getIconStyles(PanelType.NOTE),
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+        '.ak-editor-panel__icon[data-panel-type="note"]': {
+          color: "var(--ds-icon-discovery, #8270DB)"
+        }
+      },
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+      '&[data-panel-type="tip"]': {
+        // getIconStyles(PanelType.TIP),
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+        '.ak-editor-panel__icon[data-panel-type="tip"]': {
+          color: "var(--ds-icon-success, #22A06B)"
+        }
+      },
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+      '&[data-panel-type="warning"]': {
+        // getIconStyles(PanelType.WARNING),
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+        '.ak-editor-panel__icon[data-panel-type="warning"]': {
+          color: "var(--ds-icon-warning, #E56910)"
+        }
+      },
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+      '&[data-panel-type="error"]': {
+        // getIconStyles(PanelType.ERROR),
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+        '.ak-editor-panel__icon[data-panel-type="error"]': {
+          color: "var(--ds-icon-danger, #C9372C)"
+        }
+      },
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+      '&[data-panel-type="success"]': {
+        // getIconStyles(PanelType.SUCCESS),
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+        '.ak-editor-panel__icon[data-panel-type="success"]': {
+          color: "var(--ds-icon-success, #22A06B)"
+        }
+      }
+    }
+  }
+});
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
+var panelStylesMixin_without_fg_platform_editor_lcm_nested_panel_icon_fix = exports.panelStylesMixin_without_fg_platform_editor_lcm_nested_panel_icon_fix = (0, _react.css)({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '.ProseMirror': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '.ak-editor-panel': {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+      '&[data-panel-type="info"]': {
+        // getIconStyles(PanelType.INFO),
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+        '.ak-editor-panel__icon': {
+          color: "var(--ds-icon-information, #1D7AFC)"
+        }
+      },
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+      '&[data-panel-type="note"]': {
+        // getIconStyles(PanelType.NOTE),
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+        '.ak-editor-panel__icon': {
+          color: "var(--ds-icon-discovery, #8270DB)"
+        }
+      },
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+      '&[data-panel-type="tip"]': {
+        // getIconStyles(PanelType.TIP),
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+        '.ak-editor-panel__icon': {
+          color: "var(--ds-icon-success, #22A06B)"
+        }
+      },
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+      '&[data-panel-type="warning"]': {
+        // getIconStyles(PanelType.WARNING),
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+        '.ak-editor-panel__icon': {
+          color: "var(--ds-icon-warning, #E56910)"
+        }
+      },
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+      '&[data-panel-type="error"]': {
+        // getIconStyles(PanelType.ERROR),
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+        '.ak-editor-panel__icon': {
+          color: "var(--ds-icon-danger, #C9372C)"
+        }
+      },
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+      '&[data-panel-type="success"]': {
+        // getIconStyles(PanelType.SUCCESS),
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+        '.ak-editor-panel__icon': {
+          color: "var(--ds-icon-success, #22A06B)"
+        }
+      }
+    }
+  }
+});

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

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.resizerStyles = exports.resizerItemClassName = exports.resizerHoverZoneClassName = exports.resizerHandleTrackClassName = exports.resizerHandleThumbWidth = exports.resizerHandleThumbClassName = exports.resizerHandleClassName = exports.resizerExtendedZone = exports.resizerDangerClassName = exports.pragmaticResizerStyles = exports.handleWrapperClass = void 0;
+exports.resizerStyles = exports.resizerItemClassName = exports.resizerHoverZoneClassName = exports.resizerHandleTrackClassName = exports.resizerHandleThumbWidth = exports.resizerHandleThumbClassName = exports.resizerHandleClassName = exports.resizerExtendedZone = exports.resizerDangerClassName = exports.pragmaticResizerStylesForTooltip = exports.pragmaticResizerStyles = exports.handleWrapperClass = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = require("@emotion/react");
 // eslint-disable-line
@@ -163,6 +163,30 @@ var resizerStyles = exports.resizerStyles = (0, _react.css)((0, _defineProperty2
   left: 'unset'
 }));
 
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
+var pragmaticResizerStylesForTooltip = exports.pragmaticResizerStylesForTooltip = (0, _react.css)({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '.pm-breakout-resize-handle-rail-wrapper': {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    height: '100%',
+    cursor: 'col-resize',
+    borderRadius: 4,
+    zIndex: 2,
+    // Tootip element
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '[role="presentation"]': {
+      height: '100%',
+      width: '100%'
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '.pm-breakout-resize-handle-rail-inside-tooltip': {
+      height: '100%'
+    }
+  }
+});
+
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
 var pragmaticResizerStyles = exports.pragmaticResizerStyles = (0, _react.css)({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors

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.17.1";
+var version = exports.version = "207.18.1";

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

@@ -17,7 +17,7 @@ import { EmojiSharedCssClassName, defaultEmojiHeight } from '@atlaskit/editor-co
 import { MentionSharedCssClassName } from '@atlaskit/editor-common/mention';
 import { PanelSharedCssClassName } from '@atlaskit/editor-common/panel';
 import { gapCursorStyles } from '@atlaskit/editor-common/selection';
-import { CodeBlockSharedCssClassName, MediaSharedClassNames, SmartCardSharedCssClassName, annotationSharedStyles, backgroundColorStyles, blockMarksSharedStyles, codeBlockInListSafariFix, codeMarkSharedStyles, dateSharedStyle, embedCardStyles, expandClassNames, getSmartCardSharedStyles, gridStyles, indentationSharedStyles, linkSharedStyle, listsSharedStyles, paragraphSharedStyles, resizerStyles, pragmaticResizerStyles, ruleSharedStyles, shadowSharedStyle, smartCardSharedStyles, smartCardStyles, tasksAndDecisionsStyles, textColorStyles, unsupportedStyles, whitespaceSharedStyles } from '@atlaskit/editor-common/styles';
+import { CodeBlockSharedCssClassName, MediaSharedClassNames, SmartCardSharedCssClassName, annotationSharedStyles, backgroundColorStyles, blockMarksSharedStyles, codeBlockInListSafariFix, codeMarkSharedStyles, dateSharedStyle, embedCardStyles, expandClassNames, getSmartCardSharedStyles, gridStyles, indentationSharedStyles, linkSharedStyle, listsSharedStyles, paragraphSharedStyles, resizerStyles, pragmaticResizerStyles, pragmaticResizerStylesForTooltip, ruleSharedStyles, shadowSharedStyle, smartCardSharedStyles, smartCardStyles, tasksAndDecisionsStyles, textColorStyles, unsupportedStyles, whitespaceSharedStyles } from '@atlaskit/editor-common/styles';
 import { blocktypeStyles } from '@atlaskit/editor-plugins/block-type/styles';
 import { findReplaceStyles } from '@atlaskit/editor-plugins/find-replace/styles';
 import { textHighlightStyle } from '@atlaskit/editor-plugins/paste-options-toolbar/styles';
@@ -443,6 +443,7 @@ const legacyContentStyles = props => css`
   ${unsupportedStyles}
   ${resizerStyles}
   ${pragmaticResizerStyles()}
+  ${pragmaticResizerStylesForTooltip()}
   ${aiPanelStyles(props.colorMode)}
   ${firstBlockNodeStylesNew}