@atlaskit/editor-core 206.0.2 → 206.1.0

package/dist/es2019/ui/Appearance/Chromeless.js

@@ -9,7 +9,10 @@ import React, { Fragment } from 'react';
 import { css, jsx } from '@emotion/react';
 import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
 import { scrollbarStyles } from '@atlaskit/editor-shared-styles/scrollbar';
+import { componentWithCondition } from '@atlaskit/platform-feature-flags-react';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { createEditorContentStyle } from '../ContentStyles';
+import EditorContentContainer from '../EditorContentContainer';
 import PluginSlot from '../PluginSlot';
 import WithFlash from '../WithFlash';
 const chromelessEditorStyles = css({
@@ -36,8 +39,10 @@ scrollbarStyles, {
     }
   }
 });
-const ContentArea = createEditorContentStyle();
+export const ContentArea = createEditorContentStyle();
 ContentArea.displayName = 'ContentArea';
+const EditorContainer = componentWithCondition(() => editorExperiment('platform_editor_core_static_emotion', true), EditorContentContainer, ContentArea);
+
 // Ignored via go/ees005
 // eslint-disable-next-line @repo/internal/react/no-class-components
 export default class Editor extends React.Component {
@@ -86,12 +91,13 @@ export default class Editor extends React.Component {
         })],
         "data-testid": "chromeless-editor",
         ref: ref => this.containerElement = ref
-      }, jsx(ContentArea
+      }, jsx(EditorContainer
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
       , {
         className: "ak-editor-content-area",
         featureFlags: featureFlags,
-        viewMode: editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode
+        viewMode: editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode,
+        appearance: this.appearance
       }, customContentComponents && 'before' in customContentComponents ? customContentComponents.before : customContentComponents, jsx(PluginSlot, {
         editorView: editorView,
         editorActions: editorActions,

package/dist/es2019/ui/Appearance/Comment/Comment.js

@@ -17,11 +17,14 @@ import { WidthConsumer, WidthProvider } from '@atlaskit/editor-common/ui';
 import { ToolbarArrowKeyNavigationProvider } from '@atlaskit/editor-common/ui-menu';
 import { tableCommentEditorStyles } from '@atlaskit/editor-plugins/table/ui/common-styles';
 import { akEditorMobileBreakoutPoint } from '@atlaskit/editor-shared-styles';
+import { componentWithCondition } from '@atlaskit/platform-feature-flags-react';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 // Ignored via go/ees005
 // eslint-disable-next-line import/no-named-as-default
 import ClickAreaBlock from '../../Addon/ClickAreaBlock';
 import { contentComponentClickWrapper } from '../../Addon/ClickAreaBlock/contentComponentWrapper';
 import { createEditorContentStyle } from '../../ContentStyles';
+import EditorContentContainer from '../../EditorContentContainer';
 import PluginSlot from '../../PluginSlot';
 import { ToolbarWithSizeDetector as Toolbar } from '../../Toolbar/ToolbarWithSizeDetector';
 import WithFlash from '../../WithFlash';
@@ -73,6 +76,7 @@ const secondaryToolbarStyles = css({
   padding: `${"var(--ds-space-150, 12px)"} ${"var(--ds-space-025, 2px)"}`
 });
 const appearance = 'comment';
+const EditorContainer = componentWithCondition(() => editorExperiment('platform_editor_core_static_emotion', true), EditorContentContainer, ContentArea);
 export const CommentEditorWithIntl = props => {
   const {
     editorAPI
@@ -205,7 +209,7 @@ export const CommentEditorWithIntl = props => {
   }, jsx(WidthConsumer, null, ({
     width
   }) => {
-    return jsx(ContentArea, {
+    return jsx(EditorContainer, {
       ref: containerElement,
       css: maxHeight ?
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
@@ -224,7 +228,8 @@ export const CommentEditorWithIntl = props => {
         'less-margin': width < akEditorMobileBreakoutPoint
       }),
       featureFlags: featureFlags,
-      viewMode: editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode
+      viewMode: editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode,
+      appearance: appearance
     }, customContentComponents && 'before' in customContentComponents ? contentComponentClickWrapper(customContentComponents.before) : contentComponentClickWrapper(customContentComponents), jsx(PluginSlot, {
       editorView: editorView,
       editorActions: editorActions,

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

@@ -6,21 +6,41 @@
 import React, { useImperativeHandle, useRef } from 'react';
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { jsx, useTheme } from '@emotion/react';
+import { css, jsx, useTheme } from '@emotion/react';
 import classnames from 'classnames';
 import { injectIntl } from 'react-intl-next';
 import { fullPageMessages as messages } from '@atlaskit/editor-common/messages';
+import { scrollbarStyles } from '@atlaskit/editor-shared-styles/scrollbar';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { componentWithCondition } from '@atlaskit/platform-feature-flags-react';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 // Ignored via go/ees005
 // eslint-disable-next-line import/no-named-as-default
 import ClickAreaBlock from '../../Addon/ClickAreaBlock';
 import { contentComponentClickWrapper } from '../../Addon/ClickAreaBlock/contentComponentWrapper';
+import { createEditorContentStyle } from '../../ContentStyles';
 import { ContextPanel } from '../../ContextPanel';
+import EditorContentContainer from '../../EditorContentContainer';
 import PluginSlot from '../../PluginSlot';
-import { contentArea, contentAreaHeightNoToolbar, contentAreaWrapper, editorContentAreaStyle, editorContentGutterStyle, ScrollContainer, sidebarArea } from './StyledComponents';
+import { contentArea, contentAreaHeightNoToolbar, contentAreaWrapper, editorContentAreaStyle, editorContentGutterStyle, sidebarArea } from './StyledComponents';
 export const CONTENT_AREA_TEST_ID = 'ak-editor-fp-content-area';
 export const EDITOR_CONTAINER = 'ak-editor-container';
+const scrollStyles = css({
+  flexGrow: 1,
+  height: '100%',
+  overflowY: 'scroll',
+  position: 'relative',
+  display: 'flex',
+  flexDirection: 'column',
+  scrollBehavior: 'smooth'
+},
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+scrollbarStyles);
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
+const ScrollContainer = createEditorContentStyle(scrollStyles);
+ScrollContainer.displayName = 'ScrollContainer';
+const EditorContainer = componentWithCondition(() => editorExperiment('platform_editor_core_static_emotion', true), EditorContentContainer, ScrollContainer);
 const Content = /*#__PURE__*/React.forwardRef((props, ref) => {
   var _contentAreaRef$curre;
   const theme = useTheme();
@@ -62,14 +82,15 @@ const Content = /*#__PURE__*/React.forwardRef((props, ref) => {
     contentAreaWrapper,
     "data-testid": EDITOR_CONTAINER,
     "data-editor-container": 'true'
-  }, jsx(ScrollContainer
+  }, jsx(EditorContainer
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
   , {
     className: "fabric-editor-popup-scroll-parent",
     featureFlags: props.featureFlags,
     ref: scrollContainerRef,
     viewMode: props === null || props === void 0 ? void 0 : props.viewMode,
-    isScrollable: true
+    isScrollable: true,
+    appearance: props.appearance
   }, jsx(ClickAreaBlock, {
     editorView: props.editorView,
     editorDisabled: props.disabled

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

@@ -11,6 +11,7 @@ import { injectIntl } from 'react-intl-next';
 import { fullPageMessages as messages } from '@atlaskit/editor-common/messages';
 import { ContextPanelConsumer } from '@atlaskit/editor-common/ui';
 import { ToolbarArrowKeyNavigationProvider } from '@atlaskit/editor-common/ui-menu';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { ToolbarPortalMountPoint, useToolbarPortal } from '../../Toolbar/ToolbarPortal';
 import { ToolbarWithSizeDetector as Toolbar } from '../../Toolbar/ToolbarWithSizeDetector';
@@ -63,7 +64,7 @@ export const EditorToolbar = /*#__PURE__*/React.memo(props => {
     css: customToolbarWrapperStyle
   }, !!props.customPrimaryToolbarComponents && 'before' in props.customPrimaryToolbarComponents ? jsx(BeforePrimaryToolbarWrapper, {
     beforePrimaryToolbarComponents: (_props$customPrimaryT = props.customPrimaryToolbarComponents) === null || _props$customPrimaryT === void 0 ? void 0 : _props$customPrimaryT.before
-  }) : null, editorAPI !== null && editorAPI !== void 0 && editorAPI.findReplace && twoLineEditorToolbar ? editorAPI === null || editorAPI === void 0 ? void 0 : editorAPI.findReplace.actions.registerToolbarButton({
+  }) : null, !(editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_find_and_replace_duplication')) && editorAPI !== null && editorAPI !== void 0 && editorAPI.findReplace && twoLineEditorToolbar ? editorAPI === null || editorAPI === void 0 ? void 0 : editorAPI.findReplace.actions.registerToolbarButton({
     popupsBoundariesElement: props.popupsBoundariesElement,
     popupsMountPoint: popupsMountPoint,
     popupsScrollableElement: props.popupsScrollableElement,

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

@@ -4,11 +4,8 @@ import { decisionListSelector, taskListSelector } from '@atlaskit/adf-schema';
 import { tableFullPageEditorStyles } from '@atlaskit/editor-plugins/table/ui/common-styles';
 import { tableMarginFullWidthMode } from '@atlaskit/editor-plugins/table/ui/consts';
 import { FULL_PAGE_EDITOR_TOOLBAR_HEIGHT, akEditorFullWidthLayoutWidth, akEditorGutterPaddingDynamic, akEditorSwoopCubicBezier, akLayoutGutterOffset } 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 { createEditorContentStyle } from '../../ContentStyles';
-
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
 const SWOOP_ANIMATION = `0.5s ${akEditorSwoopCubicBezier}`;
 const getTotalPadding = () => akEditorGutterPaddingDynamic() * 2;
@@ -21,21 +18,6 @@ export const fullPageEditorWrapper = css({
   flexDirection: 'column',
   boxSizing: 'border-box'
 });
-const scrollStyles = css({
-  flexGrow: 1,
-  height: '100%',
-  overflowY: 'scroll',
-  position: 'relative',
-  display: 'flex',
-  flexDirection: 'column',
-  scrollBehavior: 'smooth'
-},
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-scrollbarStyles);
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export const ScrollContainer = createEditorContentStyle(scrollStyles);
-ScrollContainer.displayName = 'ScrollContainer';
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 export const contentArea = () => {

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

@@ -299,7 +299,12 @@ export const fixBlockControlStylesSSR = () => {
 
 // The breakpoint for small devices is 1266px, copied from getBreakpoint in platform/packages/editor/editor-common/src/ui/WidthProvider/index.tsx
 const akEditorBreakpointForSmallDevice = `1266px`;
-const contentStyles = props => css`
+
+// We are going to deprecate this in near future
+// Currently, we are migrating content styles in packages/editor/editor-core/src/ui/EditorContentContainer.tsx
+// 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
+const legacyContentStyles = props => css`
 	--ak-editor--default-gutter-padding: ${akEditorGutterPadding}px;
 	/* 52 is from akEditorGutterPaddingDynamic via editor-shared-styles */
 	--ak-editor--large-gutter-padding: ${akEditorGutterPaddingDynamic()}px;
@@ -545,7 +550,7 @@ export const createEditorContentStyle = styles => {
       colorMode,
       typography
     } = useThemeObserver();
-    const memoizedStyle = useMemo(() => contentStyles({
+    const memoizedStyle = useMemo(() => legacyContentStyles({
       theme,
       colorMode,
       featureFlags,
@@ -558,14 +563,16 @@ export const createEditorContentStyle = styles => {
         className: className,
         ref: ref,
         css: [memoizedStyle, styles],
-        "data-editor-scroll-container": "true"
+        "data-editor-scroll-container": "true",
+        "data-testid": "editor-content-container"
       }, children);
     }
     return jsx("div", {
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
       className: className,
       ref: ref,
-      css: [memoizedStyle, styles]
+      css: [memoizedStyle, styles],
+      "data-testid": "editor-content-container"
     }, children);
   });
 };

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

@@ -165,6 +165,8 @@ const rowSeparatorStyles = viewMode => css`
 		height: unset;
 	}
 `;
+
+// jest warning: JSDOM version (22) doesn't support the new @container CSS rule
 const layoutWithSeparatorBorderResponsiveStyles = (breakpoint, viewMode
 // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
 ) => css`
@@ -219,6 +221,8 @@ const layoutWithSeparatorBorderStyles = viewMode => {
 		}
 	`;
 };
+
+// jest warning: JSDOM version (22) doesn't support the new @container CSS rule
 const layoutResponsiveStyles = viewMode =>
 // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
 css`