@atlaskit/editor-core 207.9.0 → 207.11.0

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

@@ -0,0 +1,52 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.shadowStyles = exports.shadowObserverClassNames = exports.shadowClassNames = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = require("@emotion/react");
+// eslint-disable-line @atlaskit/ui-styling-standard/use-compiled
+
+var shadowClassNames = exports.shadowClassNames = {
+  RIGHT_SHADOW: 'right-shadow',
+  LEFT_SHADOW: 'left-shadow'
+};
+var shadowObserverClassNames = exports.shadowObserverClassNames = {
+  SENTINEL_LEFT: 'sentinel-left',
+  SENTINEL_RIGHT: 'sentinel-right',
+  SHADOW_CONTAINER: 'with-shadow-observer'
+};
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
+var shadowStyles = exports.shadowStyles = (0, _react.css)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, "& .".concat(shadowClassNames.RIGHT_SHADOW, "::before, .").concat(shadowClassNames.RIGHT_SHADOW, "::after, .").concat(shadowClassNames.LEFT_SHADOW, "::before, .").concat(shadowClassNames.LEFT_SHADOW, "::after"), {
+  display: 'none',
+  position: 'absolute',
+  pointerEvents: 'none',
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+  zIndex: 2,
+  width: 8,
+  content: "''",
+  height: 'calc(100%)'
+}), "& .".concat(shadowClassNames.RIGHT_SHADOW, ", .").concat(shadowClassNames.LEFT_SHADOW), {
+  position: 'relative'
+}), "& .".concat(shadowClassNames.LEFT_SHADOW, "::before"), {
+  background: "linear-gradient(to left, transparent 0, ".concat("var(--ds-shadow-overflow-spread, #091e4229)", " 140% ), linear-gradient( to right, ", "var(--ds-shadow-overflow-perimeter, transparent)", " 0px, transparent 1px)"),
+  top: 0,
+  left: 0,
+  display: 'block'
+}), "& .".concat(shadowClassNames.RIGHT_SHADOW, "::after"), {
+  background: "linear-gradient(to right, transparent 0, ".concat("var(--ds-shadow-overflow-spread, #091e4229)", " 140% ), linear-gradient( to left, ", "var(--ds-shadow-overflow-perimeter, transparent)", " 0px, transparent 1px)"),
+  right: 0,
+  top: 0,
+  display: 'block'
+}), "& .".concat(shadowObserverClassNames.SENTINEL_LEFT), {
+  height: '100%',
+  width: 0,
+  minWidth: 0
+}), "& .".concat(shadowObserverClassNames.SENTINEL_RIGHT), {
+  height: '100%',
+  width: 0,
+  minWidth: 0
+}));

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

@@ -0,0 +1,155 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.smartLinksInLivePagesStylesOld = exports.smartLinksInLivePagesStyles = exports.smartCardStyles = exports.linkingVisualRefreshV1Styles = exports.SmartCardSharedCssClassName = exports.FLOATING_TOOLBAR_LINKPICKER_CLASSNAME = exports.DATASOURCE_INNER_CONTAINER_CLASSNAME = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = require("@emotion/react");
+var _selectionStyles = require("./selectionStyles");
+// eslint-disable-line
+
+var DATASOURCE_INNER_CONTAINER_CLASSNAME = exports.DATASOURCE_INNER_CONTAINER_CLASSNAME = 'datasourceView-content-inner-wrap';
+var FLOATING_TOOLBAR_LINKPICKER_CLASSNAME = exports.FLOATING_TOOLBAR_LINKPICKER_CLASSNAME = 'card-floating-toolbar--link-picker';
+var SmartCardSharedCssClassName = exports.SmartCardSharedCssClassName = {
+  INLINE_CARD_CONTAINER: 'inlineCardView-content-wrap',
+  BLOCK_CARD_CONTAINER: 'blockCardView-content-wrap',
+  EMBED_CARD_CONTAINER: 'embedCardView-content-wrap',
+  DATASOURCE_CONTAINER: 'datasourceView-content-wrap',
+  LOADER_WRAPPER: 'loader-wrapper'
+};
+
+// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
+var smartCardStyles = exports.smartCardStyles = (0, _react.css)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, ".".concat(SmartCardSharedCssClassName.INLINE_CARD_CONTAINER), (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({
+  maxWidth: 'calc(100% - 20px)',
+  verticalAlign: 'top',
+  wordBreak: 'break-all',
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '.card-with-comment': {
+    background: "var(--ds-background-accent-yellow-subtler, #F8E6A0)",
+    borderBottom: "2px solid ".concat("var(--ds-border-accent-yellow, #B38600)"),
+    boxShadow: "var(--ds-shadow-overlay, 0px 8px 12px #091E4226, 0px 0px 1px #091E424f)"
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '.card': (0, _defineProperty2.default)({
+    paddingLeft: "var(--ds-space-025, 2px)",
+    paddingRight: "var(--ds-space-025, 2px)",
+    paddingTop: "var(--ds-space-100, 0.5em)",
+    paddingBottom: "var(--ds-space-100, 0.5em)",
+    marginBottom: "var(--ds-space-negative-100, -0.5em)"
+  }, ".".concat(SmartCardSharedCssClassName.LOADER_WRAPPER, " > a:focus"), [
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+  _selectionStyles.boxShadowSelectionStyles,
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+  _selectionStyles.hideNativeBrowserTextSelectionStyles])
+}, "&.ak-editor-selected-node .".concat(SmartCardSharedCssClassName.LOADER_WRAPPER, " > a"), [
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+_selectionStyles.boxShadowSelectionStyles,
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+_selectionStyles.hideNativeBrowserTextSelectionStyles]), ".".concat(SmartCardSharedCssClassName.LOADER_WRAPPER, " > a"), {
+  // EDM-1717: box-shadow Safari fix start
+  zIndex: 1,
+  position: 'relative'
+}), '&.danger', (0, _defineProperty2.default)({}, ".".concat(SmartCardSharedCssClassName.LOADER_WRAPPER, " > a"), {
+  boxShadow: "0 0 0 1px ".concat("var(--ds-border-danger, #E2483D)"),
+  // EDM-1717: box-shadow Safari fix start
+  zIndex: 2
+  // EDM-1717: box-shadow Safari fix end
+}))), ".".concat(SmartCardSharedCssClassName.BLOCK_CARD_CONTAINER), (0, _defineProperty2.default)((0, _defineProperty2.default)({
+  display: 'block',
+  margin: '0.75rem 0 0',
+  maxWidth: "".concat(8 * 95, "px")
+}, "&.ak-editor-selected-node .".concat(SmartCardSharedCssClassName.LOADER_WRAPPER, " > div"), [
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+_selectionStyles.boxShadowSelectionStyles,
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+_selectionStyles.hideNativeBrowserTextSelectionStyles, {
+  borderRadius: "var(--ds-border-radius-200, 8px)"
+}]), '&.danger', (0, _defineProperty2.default)({}, ".".concat(SmartCardSharedCssClassName.LOADER_WRAPPER, " > div"), {
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
+  boxShadow: "0 0 0 1px ".concat("var(--ds-border-danger, #E2483D)", " !important")
+}))), ".".concat(SmartCardSharedCssClassName.DATASOURCE_CONTAINER, ".").concat(SmartCardSharedCssClassName.BLOCK_CARD_CONTAINER), (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({
+  maxWidth: '100%',
+  display: 'flex',
+  justifyContent: 'center'
+}, ".".concat(DATASOURCE_INNER_CONTAINER_CLASSNAME), {
+  cursor: 'pointer',
+  backgroundColor: "var(--ds-background-neutral-subtle, #00000000)",
+  borderRadius: "var(--ds-border-radius-200, 8px)",
+  border: "1px solid ".concat("var(--ds-border, #091E4224)"),
+  overflow: 'hidden'
+}), '&.ak-editor-selected-node', (0, _defineProperty2.default)({}, ".".concat(DATASOURCE_INNER_CONTAINER_CLASSNAME), [
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+_selectionStyles.boxShadowSelectionStyles,
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+_selectionStyles.hideNativeBrowserTextSelectionStyles, {
+  'input::selection': {
+    backgroundColor: "var(--ds-background-selected-hovered, #CCE0FF)"
+  },
+  'input::-moz-selection': {
+    backgroundColor: "var(--ds-background-selected-hovered, #CCE0FF)"
+  }
+}])), '&.danger', (0, _defineProperty2.default)({}, ".".concat(DATASOURCE_INNER_CONTAINER_CLASSNAME), {
+  boxShadow: "0 0 0 1px ".concat("var(--ds-border-danger, #E2483D)")
+}))), ".".concat(SmartCardSharedCssClassName.EMBED_CARD_CONTAINER), (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, ".".concat(SmartCardSharedCssClassName.LOADER_WRAPPER, " > div"), {
+  cursor: 'pointer',
+  '&::after': {
+    transition: 'box-shadow 0s'
+  }
+}), "&.ak-editor-selected-node .".concat(SmartCardSharedCssClassName.LOADER_WRAPPER, " > div::after"), [
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+_selectionStyles.boxShadowSelectionStyles,
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+_selectionStyles.hideNativeBrowserTextSelectionStyles]), '&.danger', {
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '.media-card-frame::after': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
+    boxShadow: "0 0 0 1px ".concat("var(--ds-border-danger, #E2483D)", " !important"),
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
+    background: "var(--ds-background-danger, #FFECEB)".concat(" !important")
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '.richMedia-resize-handle-right::after, .richMedia-resize-handle-left::after': {
+    background: "var(--ds-border-danger, #E2483D)"
+  }
+})), ".".concat(FLOATING_TOOLBAR_LINKPICKER_CLASSNAME), {
+  padding: 0
+}));
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
+var smartLinksInLivePagesStyles = exports.smartLinksInLivePagesStyles = (0, _react.css)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, ".".concat(SmartCardSharedCssClassName.BLOCK_CARD_CONTAINER), (0, _defineProperty2.default)({}, ".".concat(SmartCardSharedCssClassName.LOADER_WRAPPER, " > div"), {
+  cursor: 'text',
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  a: {
+    cursor: 'pointer'
+  }
+})), ".".concat(SmartCardSharedCssClassName.EMBED_CARD_CONTAINER), (0, _defineProperty2.default)({}, ".".concat(SmartCardSharedCssClassName.LOADER_WRAPPER, " > div"), {
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  a: {
+    cursor: 'pointer'
+  }
+})));
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
+var smartLinksInLivePagesStylesOld = exports.smartLinksInLivePagesStylesOld = (0, _react.css)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, ".".concat(SmartCardSharedCssClassName.BLOCK_CARD_CONTAINER), (0, _defineProperty2.default)({}, ".".concat(SmartCardSharedCssClassName.LOADER_WRAPPER, " > div"), {
+  cursor: 'pointer',
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  a: {
+    cursor: 'auto'
+  }
+})), ".".concat(SmartCardSharedCssClassName.EMBED_CARD_CONTAINER), (0, _defineProperty2.default)({}, ".".concat(SmartCardSharedCssClassName.LOADER_WRAPPER, " > div"), {
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  a: {
+    cursor: 'auto'
+  }
+})));
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
+var linkingVisualRefreshV1Styles = exports.linkingVisualRefreshV1Styles = (0, _react.css)((0, _defineProperty2.default)({}, ".".concat(SmartCardSharedCssClassName.BLOCK_CARD_CONTAINER), {
+  // EDM-11991: Fix list plugin adding padding to ADS AvatarGroup
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  'ul, ol': {
+    paddingLeft: 'inherit'
+  }
+}));

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

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.textColorStyles = void 0;
+var _react = require("@emotion/react");
+// eslint-disable-line @atlaskit/ui-styling-standard/use-compiled
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
+var textColorStyles = exports.textColorStyles = (0, _react.css)({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+  '.fabric-text-color-mark': {
+    color: 'var(--custom-palette-color, inherit)'
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+  'a .fabric-text-color-mark': {
+    color: 'unset'
+  }
+});

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

@@ -0,0 +1,35 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.unsupportedStyles = exports.UnsupportedSharedCssClassName = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = require("@emotion/react");
+var _selectionStyles = require("./selectionStyles");
+// eslint-disable-line @atlaskit/ui-styling-standard/use-compiled
+
+var UnsupportedSharedCssClassName = exports.UnsupportedSharedCssClassName = {
+  BLOCK_CONTAINER: 'unsupportedBlockView-content-wrap',
+  INLINE_CONTAINER: 'unsupportedInlineView-content-wrap'
+};
+
+// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
+var unsupportedStyles = exports.unsupportedStyles = (0, _react.css)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, ".".concat(UnsupportedSharedCssClassName.BLOCK_CONTAINER, " > div, .").concat(UnsupportedSharedCssClassName.INLINE_CONTAINER, " > span:nth-of-type(2)"), {
+  cursor: 'pointer'
+}), '.ak-editor-selected-node', (0, _defineProperty2.default)({}, "&.".concat(UnsupportedSharedCssClassName.BLOCK_CONTAINER, " > div, &.").concat(UnsupportedSharedCssClassName.INLINE_CONTAINER, " > span:nth-of-type(2)"),
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
+[
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+_selectionStyles.backgroundSelectionStyles,
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+_selectionStyles.borderSelectionStyles,
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+_selectionStyles.hideNativeBrowserTextSelectionStyles])), '.danger', {
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '.ak-editor-selected-node': (0, _defineProperty2.default)({}, "&.".concat(UnsupportedSharedCssClassName.BLOCK_CONTAINER, " > div, &.").concat(UnsupportedSharedCssClassName.INLINE_CONTAINER, " > span:nth-of-type(2)"), {
+    border: "1px solid ".concat("var(--ds-border-danger, #E2483D)"),
+    backgroundColor: "var(--ds-blanket-danger, #EF5C4814)"
+  })
+}));

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

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

@@ -14,7 +14,6 @@ import { useAnalyticsEvents } from '@atlaskit/analytics-next/useAnalyticsEvents'
 import { ACTION, fireAnalyticsEvent } from '@atlaskit/editor-common/analytics';
 import { startMeasure, stopMeasure } from '@atlaskit/editor-common/performance-measures';
 import { getAnalyticsAppearance } from '@atlaskit/editor-common/utils/analytics';
-import { fg } from '@atlaskit/platform-feature-flags';
 import EditorActions from '../actions';
 import { useEditorContext } from '../ui/EditorContext';
 import { createFeatureFlagsFromProps } from '../utils/feature-flags-from-props';
@@ -92,7 +91,7 @@ function Editor(passedProps) {
     }
   }, [onSaveFromProps]);
   const isFullPageApperance = Boolean(props.appearance && ['full-page', 'full-width'].includes(props.appearance));
-  return jsx(Fragment, null, isFullPageApperance && fg('platform_editor_fe--inp-metrics') ? jsx(EditorINPMetrics, null) : null, jsx(EditorInternal, {
+  return jsx(Fragment, null, isFullPageApperance ? jsx(EditorINPMetrics, null) : null, jsx(EditorInternal, {
     props: props,
     handleAnalyticsEvent: handleAnalyticsEvent,
     createAnalyticsEvent: createAnalyticsEvent,

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

@@ -3,7 +3,7 @@
  * @jsx jsx
  */
 
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useCallback, useState } from 'react';
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
@@ -86,11 +86,13 @@ export const EditorToolbar = /*#__PURE__*/React.memo(props => {
       return () => window.removeEventListener('resize', updateOnResize);
     }
   });
-  const isShortcutToFocusToolbar = event => {
+  const isShortcutToFocusToolbarRaw = event => {
     //Alt + F9 to reach first element in this main toolbar
     return event.altKey && (event.key === 'F9' || event.keyCode === 120);
   };
-  const handleEscape = event => {
+  const isShortcutToFocusToolbarMemoized = useCallback(isShortcutToFocusToolbarRaw, []);
+  const isShortcutToFocusToolbar = fg('platform_editor_toolbar_rerender_optimization') ? isShortcutToFocusToolbarMemoized : isShortcutToFocusToolbarRaw;
+  const handleEscapeRaw = event => {
     var _props$editorView;
     if (!((_props$editorView = props.editorView) !== null && _props$editorView !== void 0 && _props$editorView.hasFocus())) {
       var _props$editorView2;
@@ -99,6 +101,16 @@ export const EditorToolbar = /*#__PURE__*/React.memo(props => {
     event.preventDefault();
     event.stopPropagation();
   };
+  const handleEscapeMemoized = useCallback(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 ? void 0 : _props$editorView4.focus();
+    }
+    event.preventDefault();
+    event.stopPropagation();
+  }, [props.editorView]);
+  const handleEscape = fg('platform_editor_toolbar_rerender_optimization') ? handleEscapeMemoized : handleEscapeRaw;
   return jsx(ContextPanelConsumer, null, ({
     width: contextPanelWidth
   }) => jsx(ToolbarArrowKeyNavigationProvider, {

package/dist/es2019/ui/EditorContentContainer/EditorContentContainer.js

@@ -9,46 +9,53 @@ import React from 'react';
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx, useTheme } from '@emotion/react';
+import { browser } from '@atlaskit/editor-common/browser';
 import { telepointerStyle, telepointerStyleWithInitialOnly } from '@atlaskit/editor-common/collab';
 import { EmojiSharedCssClassName, defaultEmojiHeight } from '@atlaskit/editor-common/emoji';
 import { MentionSharedCssClassName } from '@atlaskit/editor-common/mention';
 import { gapCursorStyles } from '@atlaskit/editor-common/selection';
-import { GRID_GUTTER, dateSharedStyle, getSmartCardSharedStyles, listsSharedStyles, shadowSharedStyle, smartCardSharedStyles, smartCardStyles, textColorStyles, unsupportedStyles } from '@atlaskit/editor-common/styles';
+import { GRID_GUTTER, listsSharedStyles } 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';
 import { placeholderTextStyles } from '@atlaskit/editor-plugins/placeholder-text/styles';
 import { tableCommentEditorStyles } from '@atlaskit/editor-plugins/table/ui/common-styles';
-import { SelectionStyle, akEditorCalculatedWideLayoutWidth, akEditorCalculatedWideLayoutWidthSmallViewport, akEditorDefaultLayoutWidth, akEditorDeleteBackgroundWithOpacity, akEditorDeleteBorder, akEditorFullWidthLayoutWidth, akEditorGutterPadding, akEditorGutterPaddingDynamic, akEditorSelectedBorderSize, akEditorSelectedNodeClassName, blockNodesVerticalMargin, editorFontSize, getSelectionStyles } from '@atlaskit/editor-shared-styles';
+import { SelectionStyle, akEditorCalculatedWideLayoutWidth, akEditorCalculatedWideLayoutWidthSmallViewport, akEditorDefaultLayoutWidth, akEditorDeleteBackgroundWithOpacity, akEditorDeleteBorder, akEditorFullWidthLayoutWidth, akEditorGutterPadding, akEditorGutterPaddingDynamic, akEditorSelectedBorderSize, akEditorSelectedNodeClassName, editorFontSize, getSelectionStyles } from '@atlaskit/editor-shared-styles';
 import { scrollbarStyles } from '@atlaskit/editor-shared-styles/scrollbar';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { useThemeObserver } from '@atlaskit/tokens';
 import { InlineNodeViewSharedStyles } from '../../nodeviews/getInlineNodeViewProducer.styles';
-import { dateStyles, dateVanillaStyles } from '../ContentStyles/date';
 import { expandStyles } from '../ContentStyles/expand';
 import { extensionStyles } from '../ContentStyles/extension';
 import { panelStyles } from '../ContentStyles/panel';
 import { statusStyles, vanillaStatusStyles } from '../ContentStyles/status';
 import { taskDecisionStyles, vanillaTaskDecisionIconWithoutVisualRefresh as vanillaDecisionIconWithoutVisualRefresh, vanillaTaskDecisionIconWithVisualRefresh as vanillaDecisionIconWithVisualRefresh, vanillaTaskDecisionStyles as vanillaDecisionStyles, vanillaTaskItemStyles } from '../ContentStyles/tasks-and-decisions';
-import { aiPanelBaseStyles, aiPanelDarkStyles } from './styles/ai-panel';
+import { aiPanelBaseFirefoxStyles, aiPanelBaseStyles, aiPanelDarkFirefoxStyles, aiPanelDarkStyles } from './styles/aiPanel';
 import { annotationStyles } from './styles/annotationStyles';
 import { backgroundColorStyles } from './styles/backgroundColorStyles';
 import { blockMarksStyles } from './styles/blockMarksStyles';
 import { codeBlockStyles, firstCodeBlockWithNoMargin, firstCodeBlockWithNoMarginOld } from './styles/codeBlockStyles';
 import { codeMarkStyles } from './styles/codeMarkStyles';
+import { dateStyles, dateVanillaStyles } from './styles/dateStyles';
 import { embedCardStyles } from './styles/embedCardStyles';
 import { firstBlockNodeStyles, firstBlockNodeStylesOld } from './styles/firstBlockNodeStyles';
 import { gridStyles } from './styles/gridStyles';
 import { indentationStyles } from './styles/indentationStyles';
 import { layoutBaseStyles, layoutViewStyles } from './styles/layout';
 import { linkStyles, linkStylesOld } from './styles/link';
+import { listsStyles, listsStylesSafariFix } from './styles/list';
 import { mediaStyles } from './styles/mediaStyles';
 import { paragraphStylesOld, paragraphStylesUGCModernized, paragraphStylesUGCRefreshed } from './styles/paragraphStyles';
 import { resizerStyles, pragmaticResizerStyles } from './styles/resizerStyles';
 import { ruleStyles } from './styles/rule';
+import { shadowStyles } from './styles/shadowStyles';
+import { linkingVisualRefreshV1Styles, smartCardStyles, smartLinksInLivePagesStyles, smartLinksInLivePagesStylesOld } from './styles/smartCardStyles';
 import { tasksAndDecisionsStyles } from './styles/tasksAndDecisionsStyles';
+import { textColorStyles } from './styles/textColorStyles';
+import { unsupportedStyles } from './styles/unsupportedStyles';
 import { whitespaceStyles } from './styles/whitespaceStyles';
+export const isFirefox = typeof navigator !== 'undefined' && navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
 const vanillaMentionsStyles = css({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
   '.editor-mention-primitive': {
@@ -135,24 +142,6 @@ const mentionsStyles = css`
 		}
 	}
 `;
-const listsStyles = css`
-	.ProseMirror {
-		li {
-			position: relative;
-
-			> p:not(:first-child) {
-				margin: ${"var(--ds-space-050, 4px)"} 0 0 0;
-			}
-
-			// In SSR the above rule will apply to all p tags because first-child would be a style tag.
-			// The following rule resets the first p tag back to its original margin
-			// defined in packages/editor/editor-common/src/styles/shared/paragraph.ts
-			> style:first-child + p {
-				margin-top: ${blockNodesVerticalMargin};
-			}
-		}
-	}
-`;
 const reactEmojiStyles = css`
 	.${EmojiSharedCssClassName.EMOJI_CONTAINER} {
 		display: inline-block;
@@ -286,7 +275,7 @@ const contentStyles = () => css`
 
 		${indentationStyles};
 
-		${shadowSharedStyle};
+		${shadowStyles};
 
 		${InlineNodeViewSharedStyles};
 	}
@@ -392,7 +381,7 @@ const contentStyles = () => css`
 
   ${blockMarksStyles}
 
-  ${dateSharedStyle}
+  ${dateStyles}
 
   ${extensionStyles}
 
@@ -427,13 +416,7 @@ const contentStyles = () => css`
 
   ${annotationStyles}
 
-  ${smartCardStyles()}
-
-  ${fg('platform-linking-visual-refresh-v1') ? getSmartCardSharedStyles() : smartCardSharedStyles}
-
-  ${editorExperiment('platform_editor_vanilla_dom', true) ? dateVanillaStyles : null}
-
-	${dateStyles}
+  ${smartCardStyles}
 
   ${embedCardStyles}
 
@@ -578,7 +561,15 @@ const EditorContentContainer = /*#__PURE__*/React.forwardRef((props, ref) => {
     ref: ref,
     css: [contentStyles(),
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
-    layoutBaseStyles(), fg('platform_editor_typography_ugc') ? fg('platform-dst-jira-web-fonts') || fg('confluence_typography_refreshed') || fg('atlas_editor_typography_refreshed') ?
+    layoutBaseStyles(), fg('linking_platform_smart_links_in_live_pages') ?
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    smartLinksInLivePagesStyles :
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    smartLinksInLivePagesStylesOld, fg('platform-linking-visual-refresh-v1') &&
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    linkingVisualRefreshV1Styles, editorExperiment('platform_editor_vanilla_dom', true) &&
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    dateVanillaStyles, fg('platform_editor_typography_ugc') ? fg('platform-dst-jira-web-fonts') || fg('confluence_typography_refreshed') || fg('atlas_editor_typography_refreshed') ?
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
     paragraphStylesUGCRefreshed :
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
@@ -586,14 +577,20 @@ const EditorContentContainer = /*#__PURE__*/React.forwardRef((props, ref) => {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
     paragraphStylesOld,
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
-    fg('platform_editor_hyperlink_underline') ? linkStyles : linkStylesOld, editorExperiment('platform_editor_breakout_resizing', true) &&
+    fg('platform_editor_hyperlink_underline') ? linkStyles : linkStylesOld,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    browser.safari && listsStylesSafariFix, editorExperiment('platform_editor_breakout_resizing', true) &&
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
     pragmaticResizerStyles,
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
     aiPanelBaseStyles,
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    isFirefox && aiPanelBaseFirefoxStyles,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
     colorMode === 'dark' && aiPanelDarkStyles,
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    colorMode === 'dark' && isFirefox && aiPanelDarkFirefoxStyles,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
     viewMode === 'view' && layoutViewStyles, isComment && commentEditorStyles, isFullPage && fullPageEditorStyles, fg('platform_editor_ssr_fix_lists') && listLayoutShiftFix, fg('platform_editor_nested_dnd_styles_changes') ?
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
     firstCodeBlockWithNoMargin :