@atlaskit/editor-core 207.8.0 → 207.10.1

package/CHANGELOG.md

@@ -1,5 +1,75 @@
 # @atlaskit/editor-core
 
+## 207.10.1
+
+### Patch Changes
+
+- [#160084](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/160084)
+  [`ad90a6f9f245d`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/ad90a6f9f245d) -
+  refactor emotion styles for list
+- [#160454](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/160454)
+  [`e09cbdb2a1f3c`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/e09cbdb2a1f3c) -
+  Cleaned up INP feature gate
+- Updated dependencies
+
+## 207.10.0
+
+### Minor Changes
+
+- [#160678](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/160678)
+  [`9454f60883904`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/9454f60883904) -
+  [https://product-fabric.atlassian.net/browse/ED-27746](ED-27746) - rewrite editor shadow, text
+  color and unsupported CSS in static emotion
+- [#160532](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/160532)
+  [`0997882c2118b`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/0997882c2118b) -
+  [https://product-fabric.atlassian.net/browse/ED-27746](ED-27746) - rewrite editor date CSS in
+  static emotion
+
+### Patch Changes
+
+- [#159090](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/159090)
+  [`9cbae97c20f84`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/9cbae97c20f84) -
+  Reduces rerenders of text formatting options and the toolbar when it is docked to top.
+- Updated dependencies
+
+## 207.9.0
+
+### Minor Changes
+
+- [#160567](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/160567)
+  [`2088abf31e988`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/2088abf31e988) -
+  [https://product-fabric.atlassian.net/browse/ED-27746](ED-27746) - rewrite editor block marks CSS
+  in static emotion
+- [#156919](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/156919)
+  [`379f5c27f4939`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/379f5c27f4939) -
+  delay table sticky headers until table is in viewport
+- [#160638](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/160638)
+  [`73485f1de1b41`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/73485f1de1b41) -
+  [https://product-fabric.atlassian.net/browse/ED-27746](ED-27746) - rewrite editor grid,
+  indentation, whitespace CSS in static emotion
+
+### Patch Changes
+
+- [#159655](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/159655)
+  [`24f8c627d50f2`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/24f8c627d50f2) - ##
+  WHAT? Remove experimental graceful edit mode from view mode plugin and associated props.
+
+  ## WHY?
+
+  This experiment is being cleaned up and we are no longer proceeding in this direction.
+
+  ## HOW to adjust?
+
+  This experiment was only enabled for Confluence and should not have been enabled in other places.
+  If for some reason any of the following props/state/methdos were used please remove them:
+
+  - isConsumption
+  - contentMode
+  - initialContentMode
+  - updateContentMode
+
+- Updated dependencies
+
 ## 207.8.0
 
 ### Minor Changes

package/dist/cjs/composable-editor/core-editor.js

@@ -17,7 +17,6 @@ var _useAnalyticsEvents2 = require("@atlaskit/analytics-next/useAnalyticsEvents"
 var _analytics = require("@atlaskit/editor-common/analytics");
 var _performanceMeasures = require("@atlaskit/editor-common/performance-measures");
 var _analytics2 = require("@atlaskit/editor-common/utils/analytics");
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _actions = _interopRequireDefault(require("../actions"));
 var _EditorContext = require("../ui/EditorContext");
 var _featureFlagsFromProps = require("../utils/feature-flags-from-props");
@@ -94,7 +93,7 @@ function Editor(passedProps) {
     }
   }, [onSaveFromProps]);
   var isFullPageApperance = Boolean(props.appearance && ['full-page', 'full-width'].includes(props.appearance));
-  return (0, _react2.jsx)(_react.Fragment, null, isFullPageApperance && (0, _platformFeatureFlags.fg)('platform_editor_fe--inp-metrics') ? (0, _react2.jsx)(_editorInpMetrics.EditorINPMetrics, null) : null, (0, _react2.jsx)(_editorInternal.EditorInternal, {
+  return (0, _react2.jsx)(_react.Fragment, null, isFullPageApperance ? (0, _react2.jsx)(_editorInpMetrics.EditorINPMetrics, null) : null, (0, _react2.jsx)(_editorInternal.EditorInternal, {
     props: props,
     handleAnalyticsEvent: handleAnalyticsEvent,
     createAnalyticsEvent: createAnalyticsEvent,

package/dist/cjs/create-editor/ReactEditorView.js

@@ -15,6 +15,7 @@ var _v = _interopRequireDefault(require("uuid/v4"));
 var _analytics = require("@atlaskit/editor-common/analytics");
 var _eventDispatcher = require("@atlaskit/editor-common/event-dispatcher");
 var _hooks = require("@atlaskit/editor-common/hooks");
+var _nodeVisibility = require("@atlaskit/editor-common/node-visibility");
 var _normalizeFeatureFlags = require("@atlaskit/editor-common/normalize-feature-flags");
 var _measureRender = require("@atlaskit/editor-common/performance/measure-render");
 var _navigation = require("@atlaskit/editor-common/performance/navigation");
@@ -26,6 +27,7 @@ var _document = require("@atlaskit/editor-common/utils/document");
 var _state2 = require("@atlaskit/editor-prosemirror/state");
 var _view = require("@atlaskit/editor-prosemirror/view");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _useProviders = require("../composable-editor/hooks/useProviders");
 var _featureFlagsFromProps = require("../utils/feature-flags-from-props");
 var _getNodesCount = require("../utils/getNodesCount");
@@ -492,6 +494,12 @@ function ReactEditorView(props) {
   }, [editorView, shouldFocus, __livePage, mitigateScrollJump]);
   var handleEditorViewRef = (0, _react.useCallback)(function (node) {
     if (!viewRef.current && node) {
+      // make sure this doesn't expose the experiment
+      if ((0, _experiments.editorExperiment)('platform_editor_nodevisibility', true, {
+        exposure: false
+      })) {
+        (0, _nodeVisibility.nodeVisibilityManager)(node).initialiseNodeObserver();
+      }
       var view = createEditorView(node);
       if ((0, _platformFeatureFlags.fg)('platform_editor_reduce_scroll_jump_on_editor_start')) {
         if (mitigateScrollJump) {
@@ -562,6 +570,9 @@ function ReactEditorView(props) {
       } else {
         viewRef.current.destroy(); // Destroys the dom node & all node views
       }
+      if ((0, _experiments.editorExperiment)('platform_editor_nodevisibility', true)) {
+        (0, _nodeVisibility.nodeVisibilityManager)(viewRef.current.dom).disconnect();
+      }
       viewRef.current = undefined;
     }
   }, [createEditorView, onEditorCreated, eventDispatcher, shouldFocus, __livePage, onEditorDestroyed, handleAnalyticsEvent, mitigateScrollJump]);

package/dist/cjs/ui/Appearance/FullPage/FullPage.js

@@ -71,7 +71,6 @@ var useFullPageEditorPluginsStates = (0, _hooks.sharedPluginStateHookMigratorFac
 }, function (pluginInjectionApi) {
   var primaryToolbarComponents = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(pluginInjectionApi, 'primaryToolbar.components');
   var editorViewMode = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(pluginInjectionApi, 'editorViewMode.mode');
-  var showTopToolbar = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(pluginInjectionApi, 'editorViewMode._showTopToolbar');
   var hasHadInteraction = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(pluginInjectionApi, 'interaction.hasHadInteraction');
   var interactionState = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(pluginInjectionApi, 'interaction.interactionState');
   return {
@@ -79,8 +78,7 @@ var useFullPageEditorPluginsStates = (0, _hooks.sharedPluginStateHookMigratorFac
       components: primaryToolbarComponents
     },
     editorViewModeState: !editorViewMode ? undefined : {
-      mode: editorViewMode,
-      _showTopToolbar: showTopToolbar
+      mode: editorViewMode
     },
     interactionState: hasHadInteraction === undefined || interactionState === undefined ? undefined : {
       hasHadInteraction: hasHadInteraction,
@@ -89,7 +87,7 @@ var useFullPageEditorPluginsStates = (0, _hooks.sharedPluginStateHookMigratorFac
   };
 });
 var FullPageEditor = exports.FullPageEditor = function FullPageEditor(props) {
-  var _scrollContentContain, _scrollContentContain2, _scrollContentContain3, _scrollContentContain4, _scrollContentContain5, _wrapperElementRef$cu;
+  var _scrollContentContain, _scrollContentContain2, _scrollContentContain3, _wrapperElementRef$cu;
   var wrapperElementRef = (0, _react.useMemo)(function () {
     return props.innerRef;
   }, [props.innerRef]);
@@ -128,23 +126,6 @@ var FullPageEditor = exports.FullPageEditor = function FullPageEditor(props) {
     primaryToolbarComponents = primaryToolbarState.components.concat(primaryToolbarComponents);
   }
   var isEditorToolbarHidden = (0, _platformFeatureFlags.fg)('platform_editor_sync_editor_view_mode_state') ? viewMode === 'view' : (editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode) === 'view';
-  if (props.__livePage && !(0, _experiments.editorExperiment)('live_pages_graceful_edit', 'control')) {
-    // the custom toolbar logic should only be applied when the experiment cohort is not control,
-    // and the editor is in live page mode.
-    if (!editorViewModeState) {
-      // when first loading the editor, the toolbar should be hidden for all content modes
-      // the editorViewMode plugin state is not able to be relied as it will not be setup when
-      // the appearance component is being rendered.
-      // In this case we set the toolbar to be hidden by default.
-      isEditorToolbarHidden = true;
-    } else {
-      if ((0, _experiments.editorExperiment)('live_pages_graceful_edit', 'initially-hide-toolbar')) {
-        // for the initially-hide-toolbar variant, the toolbar should be hidden based on
-        // a separate flag in the editorViewMode plugin state.
-        isEditorToolbarHidden = !editorViewModeState._showTopToolbar || false;
-      }
-    }
-  }
   var customPrimaryToolbarComponents = props.customPrimaryToolbarComponents;
   if ((0, _experiments.editorExperiment)('platform_editor_controls', 'variant1', {
     exposure: true
@@ -174,10 +155,7 @@ var FullPageEditor = exports.FullPageEditor = function FullPageEditor(props) {
     ,
     className: "akEditor",
     ref: wrapperElementRef
-  }, !(0, _experiments.editorExperiment)('live_pages_graceful_edit', 'control') && (0, _react2.jsx)("div", {
-    css: hiddenStyle,
-    "data-hidden": isEditorToolbarHidden
-  }, (0, _react2.jsx)(_FullPageToolbar.FullPageToolbar, {
+  }, !isEditorToolbarHidden && (0, _react2.jsx)(_FullPageToolbar.FullPageToolbar, {
     appearance: props.appearance,
     editorAPI: editorAPI,
     beforeIcon: props.primaryToolbarIconBefore,
@@ -204,33 +182,6 @@ var FullPageEditor = exports.FullPageEditor = function FullPageEditor(props) {
     providerFactory: props.providerFactory,
     showKeyline: showKeyline,
     featureFlags: props.featureFlags
-  })), (0, _experiments.editorExperiment)('live_pages_graceful_edit', 'control') && !isEditorToolbarHidden && (0, _react2.jsx)(_FullPageToolbar.FullPageToolbar, {
-    appearance: props.appearance,
-    editorAPI: editorAPI,
-    beforeIcon: props.primaryToolbarIconBefore,
-    collabEdit: props.collabEdit,
-    containerElement: (_scrollContentContain4 = (_scrollContentContain5 = scrollContentContainerRef.current) === null || _scrollContentContain5 === void 0 ? void 0 : _scrollContentContain5.scrollContainer) !== null && _scrollContentContain4 !== void 0 ? _scrollContentContain4 : null,
-    customPrimaryToolbarComponents: props.customPrimaryToolbarComponents,
-    disabled: !!props.disabled,
-    dispatchAnalyticsEvent: props.dispatchAnalyticsEvent,
-    editorActions: props.editorActions,
-    editorDOMElement: props.editorDOMElement
-    // Ignored via go/ees005
-    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-    ,
-    editorView: props.editorView
-    // Ignored via go/ees005
-    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-    ,
-    eventDispatcher: props.eventDispatcher,
-    hasMinWidth: props.enableToolbarMinWidth,
-    popupsBoundariesElement: props.popupsBoundariesElement,
-    popupsMountPoint: props.popupsMountPoint,
-    popupsScrollableElement: props.popupsScrollableElement,
-    primaryToolbarComponents: primaryToolbarComponents,
-    providerFactory: props.providerFactory,
-    showKeyline: showKeyline,
-    featureFlags: props.featureFlags
   }), (0, _react2.jsx)(_FullPageContentArea.FullPageContentArea, {
     editorAPI: editorAPI,
     ref: scrollContentContainerRef,
@@ -258,16 +209,4 @@ var FullPageEditor = exports.FullPageEditor = function FullPageEditor(props) {
     viewMode: editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode,
     hasHadInteraction: hasHadInteraction
   })));
-};
-var hiddenStyle = (0, _react2.css)({
-  visibility: 'visible',
-  opacity: 1,
-  transition: '200ms opacity, 200ms visibility, 200ms transform',
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-  '&[data-hidden="true"]': {
-    height: 0,
-    visibility: 'hidden',
-    opacity: 0
-    // transition: '0ms opacity, 0ms visibility, 0ms transform',
-  }
-});
+};

package/dist/cjs/ui/Appearance/FullPage/FullPageContentArea.js

@@ -102,14 +102,11 @@ var Content = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
     _StyledComponents.contentArea,
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
-    (0, _experiments.editorExperiment)('live_pages_graceful_edit', 'control') && props.isEditorToolbarHidden &&
+    props.isEditorToolbarHidden &&
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
     _StyledComponents.contentAreaHeightNoToolbar],
     "data-testid": CONTENT_AREA_TEST_ID,
     ref: containerRef
-    // eslint-disable-next-line  @atlaskit/ui-styling-standard/no-classname-prop
-    ,
-    className: !(0, _experiments.editorExperiment)('live_pages_graceful_edit', 'control') && props.isEditorToolbarHidden ? 'ak-editor-content-area-no-toolbar' : undefined
   }, (0, _react2.jsx)("div", {
     css:
     // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values

package/dist/cjs/ui/Appearance/FullPage/FullPageToolbar.js

@@ -99,11 +99,13 @@ var EditorToolbar = exports.EditorToolbar = /*#__PURE__*/_react.default.memo(fun
       };
     }
   });
-  var isShortcutToFocusToolbar = function isShortcutToFocusToolbar(event) {
+  var isShortcutToFocusToolbarRaw = function isShortcutToFocusToolbarRaw(event) {
     //Alt + F9 to reach first element in this main toolbar
     return event.altKey && (event.key === 'F9' || event.keyCode === 120);
   };
-  var handleEscape = function handleEscape(event) {
+  var isShortcutToFocusToolbarMemoized = (0, _react.useCallback)(isShortcutToFocusToolbarRaw, []);
+  var isShortcutToFocusToolbar = (0, _platformFeatureFlags.fg)('platform_editor_toolbar_rerender_optimization') ? isShortcutToFocusToolbarMemoized : isShortcutToFocusToolbarRaw;
+  var handleEscapeRaw = function handleEscapeRaw(event) {
     var _props$editorView;
     if (!((_props$editorView = props.editorView) !== null && _props$editorView !== void 0 && _props$editorView.hasFocus())) {
       var _props$editorView2;
@@ -112,6 +114,16 @@ var EditorToolbar = exports.EditorToolbar = /*#__PURE__*/_react.default.memo(fun
     event.preventDefault();
     event.stopPropagation();
   };
+  var handleEscapeMemoized = (0, _react.useCallback)(function (event) {
+    var _props$editorView3;
+    if (!((_props$editorView3 = props.editorView) !== null && _props$editorView3 !== void 0 && _props$editorView3.hasFocus())) {
+      var _props$editorView4;
+      (_props$editorView4 = props.editorView) === null || _props$editorView4 === void 0 || _props$editorView4.focus();
+    }
+    event.preventDefault();
+    event.stopPropagation();
+  }, [props.editorView]);
+  var handleEscape = (0, _platformFeatureFlags.fg)('platform_editor_toolbar_rerender_optimization') ? handleEscapeMemoized : handleEscapeRaw;
   return (0, _react2.jsx)(_ui.ContextPanelConsumer, null, function (_ref2) {
     var contextPanelWidth = _ref2.width;
     return (0, _react2.jsx)(_uiMenu.ToolbarArrowKeyNavigationProvider, {

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

@@ -4,10 +4,11 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.placeholderStyles = exports.default = void 0;
+exports.placeholderStyles = exports.isFirefox = exports.default = void 0;
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = _interopRequireDefault(require("react"));
 var _react2 = require("@emotion/react");
+var _browser = require("@atlaskit/editor-common/browser");
 var _collab = require("@atlaskit/editor-common/collab");
 var _emoji = require("@atlaskit/editor-common/emoji");
 var _mention = require("@atlaskit/editor-common/mention");
@@ -24,27 +25,35 @@ 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 _date = require("../ContentStyles/date");
 var _expand = require("../ContentStyles/expand");
 var _extension = require("../ContentStyles/extension");
 var _panel = require("../ContentStyles/panel");
 var _status = require("../ContentStyles/status");
 var _tasksAndDecisions = require("../ContentStyles/tasks-and-decisions");
-var _aiPanel = require("./styles/ai-panel");
+var _aiPanel = require("./styles/aiPanel");
 var _annotationStyles = require("./styles/annotationStyles");
 var _backgroundColorStyles = require("./styles/backgroundColorStyles");
+var _blockMarksStyles = require("./styles/blockMarksStyles");
 var _codeBlockStyles = require("./styles/codeBlockStyles");
 var _codeMarkStyles = require("./styles/codeMarkStyles");
+var _dateStyles = require("./styles/dateStyles");
 var _embedCardStyles = require("./styles/embedCardStyles");
 var _firstBlockNodeStyles = require("./styles/firstBlockNodeStyles");
+var _gridStyles = require("./styles/gridStyles");
+var _indentationStyles = require("./styles/indentationStyles");
 var _layout = require("./styles/layout");
 var _link = require("./styles/link");
+var _list = require("./styles/list");
 var _mediaStyles = require("./styles/mediaStyles");
 var _paragraphStyles = require("./styles/paragraphStyles");
 var _resizerStyles = require("./styles/resizerStyles");
 var _rule = require("./styles/rule");
+var _shadowStyles = require("./styles/shadowStyles");
 var _tasksAndDecisionsStyles = require("./styles/tasksAndDecisionsStyles");
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10;
+var _textColorStyles = require("./styles/textColorStyles");
+var _unsupportedStyles = require("./styles/unsupportedStyles");
+var _whitespaceStyles = require("./styles/whitespaceStyles");
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
 /* eslint-disable @atlaskit/design-system/consistent-css-prop-usage */
 /* eslint-disable react-hooks/rules-of-hooks */
 /* eslint-disable @atlaskit/design-system/no-css-tagged-template-expression -- Requires manual remediation over time due to use of unsafe nested mixins */
@@ -53,6 +62,7 @@ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _temp
  * @jsx jsx
  */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+var isFirefox = exports.isFirefox = typeof navigator !== 'undefined' && navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
 var vanillaMentionsStyles = (0, _react2.css)({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
   '.editor-mention-primitive': {
@@ -99,9 +109,8 @@ var vanillaMentionsStyles = (0, _react2.css)({
 });
 var vanillaSelectionStyles = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\t.danger {\n\t\t.editor-mention-primitive {\n\t\t\tbox-shadow: 0 0 0 ", "px ", ";\n\t\t\tbackground-color: ", ";\n\t\t}\n\t}\n\n\t.", " > .editor-mention-primitive,\n\t.", " > .editor-mention-primitive.mention-self,\n\t.", " > .editor-mention-primitive.mention-restricted {\n\t\t", "\n\t\t/* need to specify dark text colour because personal mentions\n\t\t   (in dark blue) have white text by default */\n\t\tcolor: ", "\n\t}\n"])), _editorSharedStyles.akEditorSelectedBorderSize, _editorSharedStyles.akEditorDeleteBorder, "var(--ds-background-danger, ".concat(_editorSharedStyles.akEditorDeleteBackgroundWithOpacity, ")"), _editorSharedStyles.akEditorSelectedNodeClassName, _editorSharedStyles.akEditorSelectedNodeClassName, _editorSharedStyles.akEditorSelectedNodeClassName, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.BoxShadow, _editorSharedStyles.SelectionStyle.Background]), "var(--ds-text-subtle, #44546F)");
 var mentionsStyles = (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n\t.", " {\n\t\t&.", " [data-mention-id] > span {\n\t\t\t", "\n\n\t\t\t/* need to specify dark text colour because personal mentions\n\t\t (in dark blue) have white text by default */\n\t  color: ", ";\n\t\t}\n\t}\n\n\t.danger {\n\t\t.", ".", "\n\t\t\t> span\n\t\t\t> span\n\t\t\t> span {\n\t\t\tbox-shadow: 0 0 0 ", "px ", ";\n\t\t\tbackground-color: ", ";\n\t\t}\n\t\t.", " > span > span > span {\n\t\t\tbackground-color: ", ";\n\t\t\tcolor: ", ";\n\t\t}\n\t}\n"])), _mention.MentionSharedCssClassName.MENTION_CONTAINER, _editorSharedStyles.akEditorSelectedNodeClassName, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.BoxShadow, _editorSharedStyles.SelectionStyle.Background]), "var(--ds-text-subtle, #44546F)", _mention.MentionSharedCssClassName.MENTION_CONTAINER, _editorSharedStyles.akEditorSelectedNodeClassName, _editorSharedStyles.akEditorSelectedBorderSize, _editorSharedStyles.akEditorDeleteBorder, "var(--ds-background-danger, ".concat(_editorSharedStyles.akEditorDeleteBackgroundWithOpacity, ")"), _mention.MentionSharedCssClassName.MENTION_CONTAINER, "var(--ds-background-neutral, #091E420F)", "var(--ds-text-subtle, #44546F)");
-var listsStyles = (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n\t.ProseMirror {\n\t\tli {\n\t\t\tposition: relative;\n\n\t\t\t> p:not(:first-child) {\n\t\t\t\tmargin: ", " 0 0 0;\n\t\t\t}\n\n\t\t\t// In SSR the above rule will apply to all p tags because first-child would be a style tag.\n\t\t\t// The following rule resets the first p tag back to its original margin\n\t\t\t// defined in packages/editor/editor-common/src/styles/shared/paragraph.ts\n\t\t\t> style:first-child + p {\n\t\t\t\tmargin-top: ", ";\n\t\t\t}\n\t\t}\n\t}\n"])), "var(--ds-space-050, 4px)", _editorSharedStyles.blockNodesVerticalMargin);
-var reactEmojiStyles = (0, _react2.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n\t.", " {\n\t\tdisplay: inline-block;\n\n\t\t.", " {\n\t\t\tcursor: pointer;\n\n\t\t\t&.", " > span {\n\t\t\t\t/** needed for selection style to cover custom emoji image properly */\n\t\t\t\tdisplay: flex;\n\t\t\t}\n\t\t}\n\n\t\t&.", " {\n\t\t\t.", ", .", " {\n\t\t\t\tborder-radius: 2px;\n\t\t\t\t", "\n\t\t\t}\n\t\t}\n\t}\n"])), _emoji.EmojiSharedCssClassName.EMOJI_CONTAINER, _emoji.EmojiSharedCssClassName.EMOJI_NODE, _emoji.EmojiSharedCssClassName.EMOJI_IMAGE, _editorSharedStyles.akEditorSelectedNodeClassName, _emoji.EmojiSharedCssClassName.EMOJI_SPRITE, _emoji.EmojiSharedCssClassName.EMOJI_IMAGE, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.Blanket, _editorSharedStyles.SelectionStyle.BoxShadow]));
-var emojiStyles = (0, _react2.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n\t[data-prosemirror-node-view-type='vanilla'] {\n\t\t.", " {\n\t\t\tdisplay: inline-block;\n\t\t}\n\n\t\t.", ", .", " {\n\t\t\tbackground: no-repeat transparent;\n\t\t\tdisplay: inline-block;\n\t\t\theight: ", "px;\n\t\t\tmax-height: ", "px;\n\t\t\tcursor: pointer;\n\t\t\tvertical-align: middle;\n\t\t\tuser-select: all;\n\t\t}\n\n\t\t&.", " {\n\t\t\t.", ", .", " {\n\t\t\t\tborder-radius: 2px;\n\t\t\t\t", "\n\t\t\t}\n\t\t}\n\t}\n"])), _emoji.EmojiSharedCssClassName.EMOJI_CONTAINER, _emoji.EmojiSharedCssClassName.EMOJI_SPRITE, _emoji.EmojiSharedCssClassName.EMOJI_IMAGE, _emoji.defaultEmojiHeight, _emoji.defaultEmojiHeight, _editorSharedStyles.akEditorSelectedNodeClassName, _emoji.EmojiSharedCssClassName.EMOJI_SPRITE, _emoji.EmojiSharedCssClassName.EMOJI_IMAGE, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.Blanket, _editorSharedStyles.SelectionStyle.BoxShadow]));
+var reactEmojiStyles = (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n\t.", " {\n\t\tdisplay: inline-block;\n\n\t\t.", " {\n\t\t\tcursor: pointer;\n\n\t\t\t&.", " > span {\n\t\t\t\t/** needed for selection style to cover custom emoji image properly */\n\t\t\t\tdisplay: flex;\n\t\t\t}\n\t\t}\n\n\t\t&.", " {\n\t\t\t.", ", .", " {\n\t\t\t\tborder-radius: 2px;\n\t\t\t\t", "\n\t\t\t}\n\t\t}\n\t}\n"])), _emoji.EmojiSharedCssClassName.EMOJI_CONTAINER, _emoji.EmojiSharedCssClassName.EMOJI_NODE, _emoji.EmojiSharedCssClassName.EMOJI_IMAGE, _editorSharedStyles.akEditorSelectedNodeClassName, _emoji.EmojiSharedCssClassName.EMOJI_SPRITE, _emoji.EmojiSharedCssClassName.EMOJI_IMAGE, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.Blanket, _editorSharedStyles.SelectionStyle.BoxShadow]));
+var emojiStyles = (0, _react2.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n\t[data-prosemirror-node-view-type='vanilla'] {\n\t\t.", " {\n\t\t\tdisplay: inline-block;\n\t\t}\n\n\t\t.", ", .", " {\n\t\t\tbackground: no-repeat transparent;\n\t\t\tdisplay: inline-block;\n\t\t\theight: ", "px;\n\t\t\tmax-height: ", "px;\n\t\t\tcursor: pointer;\n\t\t\tvertical-align: middle;\n\t\t\tuser-select: all;\n\t\t}\n\n\t\t&.", " {\n\t\t\t.", ", .", " {\n\t\t\t\tborder-radius: 2px;\n\t\t\t\t", "\n\t\t\t}\n\t\t}\n\t}\n"])), _emoji.EmojiSharedCssClassName.EMOJI_CONTAINER, _emoji.EmojiSharedCssClassName.EMOJI_SPRITE, _emoji.EmojiSharedCssClassName.EMOJI_IMAGE, _emoji.defaultEmojiHeight, _emoji.defaultEmojiHeight, _editorSharedStyles.akEditorSelectedNodeClassName, _emoji.EmojiSharedCssClassName.EMOJI_SPRITE, _emoji.EmojiSharedCssClassName.EMOJI_IMAGE, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.Blanket, _editorSharedStyles.SelectionStyle.BoxShadow]));
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 var placeholderStyles = exports.placeholderStyles = (0, _react2.css)({
@@ -142,13 +151,13 @@ var akEditorBreakpointForSmallDevice = "1266px";
 
 // jest warning: JSDOM version (22) doesn't support the new @container CSS rule
 var contentStyles = function contentStyles() {
-  return (0, _react2.css)(_templateObject6 || (_templateObject6 = (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\n\t\t", ";\n\t}\n\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  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\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\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\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\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, _styles.whitespaceSharedStyles, _styles.listsSharedStyles, _styles.indentationSharedStyles, _styles.shadowSharedStyle, _getInlineNodeViewProducer.InlineNodeViewSharedStyles, (0, _platformFeatureFlags.fg)('editor_request_to_edit_task') ? null : (0, _react2.css)(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n\t\t\t\t.ProseMirror[contenteditable='false'] .taskItemView-content-wrap {\n\t\t\t\t\tpointer-events: none;\n\t\t\t\t\topacity: 0.7;\n\t\t\t\t}\n\t\t\t"]))), (0, _platformFeatureFlags.fg)('platform_editor_hide_cursor_when_pm_hideselection') ? (0, _react2.css)(_templateObject8 || (_templateObject8 = (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)(_templateObject9 || (_templateObject9 = (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, _codeBlockStyles.codeBlockStyles, (0, _styles2.blocktypeStyles)(), _codeMarkStyles.codeMarkStyles, _styles.textColorStyles, _backgroundColorStyles.backgroundColorStyles, listsStyles, _rule.ruleStyles, _mediaStyles.mediaStyles, (0, _platformFeatureFlags.fg)('confluence_team_presence_scroll_to_pointer') ? _collab.telepointerStyle : _collab.telepointerStyleWithInitialOnly, _selection.gapCursorStyles, (0, _panel.panelStyles)(), mentionsStyles, (0, _experiments.editorExperiment)('platform_editor_vanilla_dom', true, {
+  return (0, _react2.css)(_templateObject5 || (_templateObject5 = (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\n\t\t", ";\n\t}\n\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  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\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\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  .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, _styles.listsSharedStyles, _indentationStyles.indentationStyles, _shadowStyles.shadowStyles, _getInlineNodeViewProducer.InlineNodeViewSharedStyles, (0, _platformFeatureFlags.fg)('editor_request_to_edit_task') ? null : (0, _react2.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n\t\t\t\t.ProseMirror[contenteditable='false'] .taskItemView-content-wrap {\n\t\t\t\t\tpointer-events: none;\n\t\t\t\t\topacity: 0.7;\n\t\t\t\t}\n\t\t\t"]))), (0, _platformFeatureFlags.fg)('platform_editor_hide_cursor_when_pm_hideselection') ? (0, _react2.css)(_templateObject7 || (_templateObject7 = (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)(_templateObject8 || (_templateObject8 = (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, _codeBlockStyles.codeBlockStyles, (0, _styles2.blocktypeStyles)(), _codeMarkStyles.codeMarkStyles, _textColorStyles.textColorStyles, _backgroundColorStyles.backgroundColorStyles, _list.listsStyles, _rule.ruleStyles, _mediaStyles.mediaStyles, (0, _platformFeatureFlags.fg)('confluence_team_presence_scroll_to_pointer') ? _collab.telepointerStyle : _collab.telepointerStyleWithInitialOnly, _selection.gapCursorStyles, (0, _panel.panelStyles)(), mentionsStyles, (0, _experiments.editorExperiment)('platform_editor_vanilla_dom', true, {
     exposure: false
   }) && vanillaMentionsStyles, (0, _experiments.editorExperiment)('platform_editor_vanilla_dom', true, {
     exposure: false
   }) && vanillaSelectionStyles, (0, _experiments.editorExperiment)('platform_editor_vanilla_dom', true, {
     exposure: false
-  }) ? emojiStyles : reactEmojiStyles, emojiStyles, _tasksAndDecisionsStyles.tasksAndDecisionsStyles, _styles.gridStyles, _styles.blockMarksSharedStyles, _styles.dateSharedStyle, _extension.extensionStyles, (0, _expand.expandStyles)(), _styles3.findReplaceStyles, _styles4.textHighlightStyle, _tasksAndDecisions.taskDecisionStyles, (0, _experiments.editorExperiment)('platform_editor_vanilla_dom', true, {
+  }) ? emojiStyles : reactEmojiStyles, emojiStyles, _tasksAndDecisionsStyles.tasksAndDecisionsStyles, _gridStyles.gridStyles, _blockMarksStyles.blockMarksStyles, _dateStyles.dateStyles, _extension.extensionStyles, (0, _expand.expandStyles)(), _styles3.findReplaceStyles, _styles4.textHighlightStyle, _tasksAndDecisions.taskDecisionStyles, (0, _experiments.editorExperiment)('platform_editor_vanilla_dom', true, {
     exposure: false
   }) && _tasksAndDecisions.vanillaTaskItemStyles, (0, _experiments.editorExperiment)('platform_editor_vanilla_dom', true, {
     exposure: false
@@ -156,7 +165,7 @@ var contentStyles = function contentStyles() {
     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, _annotationStyles.annotationStyles, (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, _embedCardStyles.embedCardStyles, _styles.unsupportedStyles, _resizerStyles.resizerStyles, !(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, _annotationStyles.annotationStyles, (0, _styles.smartCardStyles)(), (0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-v1') ? (0, _styles.getSmartCardSharedStyles)() : _styles.smartCardSharedStyles, _embedCardStyles.embedCardStyles, _unsupportedStyles.unsupportedStyles, _resizerStyles.resizerStyles, !(0, _platformFeatureFlags.fg)('platform-visual-refresh-icons') ? (0, _react2.css)(_templateObject9 || (_templateObject9 = (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 CommentEditorMargin = 14;
 
@@ -226,7 +235,9 @@ var EditorContentContainer = /*#__PURE__*/_react.default.forwardRef(function (pr
     ref: ref,
     css: [contentStyles(),
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
-    (0, _layout.layoutBaseStyles)(), (0, _platformFeatureFlags.fg)('platform_editor_typography_ugc') ? (0, _platformFeatureFlags.fg)('platform-dst-jira-web-fonts') || (0, _platformFeatureFlags.fg)('confluence_typography_refreshed') || (0, _platformFeatureFlags.fg)('atlas_editor_typography_refreshed') ?
+    (0, _layout.layoutBaseStyles)(), (0, _experiments.editorExperiment)('platform_editor_vanilla_dom', true) &&
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    _dateStyles.dateVanillaStyles, (0, _platformFeatureFlags.fg)('platform_editor_typography_ugc') ? (0, _platformFeatureFlags.fg)('platform-dst-jira-web-fonts') || (0, _platformFeatureFlags.fg)('confluence_typography_refreshed') || (0, _platformFeatureFlags.fg)('atlas_editor_typography_refreshed') ?
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
     _paragraphStyles.paragraphStylesUGCRefreshed :
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
@@ -234,14 +245,20 @@ var EditorContentContainer = /*#__PURE__*/_react.default.forwardRef(function (pr
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
     _paragraphStyles.paragraphStylesOld,
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
-    (0, _platformFeatureFlags.fg)('platform_editor_hyperlink_underline') ? _link.linkStyles : _link.linkStylesOld, (0, _experiments.editorExperiment)('platform_editor_breakout_resizing', true) &&
+    (0, _platformFeatureFlags.fg)('platform_editor_hyperlink_underline') ? _link.linkStyles : _link.linkStylesOld,
+    // 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,
     // 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
+    isFirefox && _aiPanel.aiPanelBaseFirefoxStyles,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
     colorMode === 'dark' && _aiPanel.aiPanelDarkStyles,
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    colorMode === 'dark' && isFirefox && _aiPanel.aiPanelDarkFirefoxStyles,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
     viewMode === 'view' && _layout.layoutViewStyles, isComment && commentEditorStyles, isFullPage && fullPageEditorStyles, (0, _platformFeatureFlags.fg)('platform_editor_ssr_fix_lists') && listLayoutShiftFix, (0, _platformFeatureFlags.fg)('platform_editor_nested_dnd_styles_changes') ?
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
     _codeBlockStyles.firstCodeBlockWithNoMargin :