@atlaskit/editor-core 207.18.1 → 207.19.1

package/dist/es2019/version-wrapper.js

@@ -1,2 +1,2 @@
 export const name = "@atlaskit/editor-core";
-export const version = "207.18.1";
+export const version = "207.19.1";

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

@@ -20,6 +20,7 @@ import { isEmptyDocument } from '@atlaskit/editor-common/utils/document';
 import { EditorState, Selection, TextSelection } from '@atlaskit/editor-prosemirror/state';
 import { EditorView } from '@atlaskit/editor-prosemirror/view';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { useProviders } from '../composable-editor/hooks/useProviders';
 import { createFeatureFlagsFromProps } from '../utils/feature-flags-from-props';
@@ -568,7 +569,7 @@ export function ReactEditorView(props) {
   var createEditor = useCallback(function (assistiveLabel, assistiveDescribedBy) {
     return /*#__PURE__*/React.createElement("div", {
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-      className: getUAPrefix(),
+      className: (expValEquals('platform_editor_stable_editorview_classname', 'isEnabled', true) ? 'ProseMirror ' : '') + getUAPrefix(),
       key: "ProseMirror",
       ref: handleEditorViewRef,
       "aria-label": assistiveLabel || props.intl.formatMessage(editorMessages.editorAssistiveLabel)

package/dist/esm/ui/ContextPanel/index.js

@@ -149,6 +149,7 @@ export var SwappableContentArea = /*#__PURE__*/function (_React$PureComponent) {
           _this2.props.customWidth && customPanelWidthStyles, !visible && panelHidden, fg('platform_editor_disable_context_panel_animation') && disablePanelAnimation],
           "data-testid": "context-panel-panel",
           "aria-labelledby": "context-panel-title",
+          "aria-label": "context-panel-panel",
           role: "dialog"
         }, jsx("div", {
           "data-testid": "context-panel-content",

package/dist/esm/ui/EditorContentContainer/EditorContentContainer.js

@@ -12,7 +12,6 @@ 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 { gapCursorStyles } from '@atlaskit/editor-common/selection';
 import { GRID_GUTTER } from '@atlaskit/editor-common/styles';
 import { tableCommentEditorStyles } from '@atlaskit/editor-plugins/table/ui/common-styles';
 import { akEditorCalculatedWideLayoutWidth, akEditorCalculatedWideLayoutWidthSmallViewport, akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth, akEditorGutterPadding, akEditorGutterPaddingDynamic, editorFontSize } from '@atlaskit/editor-shared-styles';
@@ -34,10 +33,11 @@ import { reactEmojiStyles, vanillaEmojiStyles } from './styles/emoji';
 import { expandStyles, expandStylesMixin_fg_platform_editor_nested_dnd_styles_changes, expandStylesMixin_fg_platform_visual_refresh_icons, expandStylesMixin_without_fg_platform_editor_nested_dnd_styles_changes } from './styles/expandStyles';
 import { findReplaceStyles } from './styles/findReplaceStyles';
 import { firstBlockNodeStyles } from './styles/firstBlockNodeStyles';
+import { gapCursorStyles } from './styles/gapCursorStyles';
 import { gridStyles } from './styles/gridStyles';
 import { indentationStyles } from './styles/indentationStyles';
 import { InlineNodeViewSharedStyles } from './styles/inlineNodeViewSharedStyles';
-import { layoutBaseStyles, layoutViewStyles } from './styles/layout';
+import { layoutColumnResponsiveStyles, layoutBaseStyles, layoutBaseStylesAdvanced, layoutBaseStylesFixesUnderNestedDnDFG, layoutSelectedStylesNotAdvanced, layoutSelectedStylesForViewNotAdvanced, layoutColumnMartinTopFixesNew, layoutColumnMartinTopFixesOld, layoutColumnStylesAdvanced, layoutColumnStylesNotAdvanced, layoutResponsiveBaseStyles, layoutResponsiveStylesForView, layoutSectionStylesAdvanced, layoutSectionStylesNotAdvanced, layoutStylesForView, layoutSelectedStylesAdvanced, layoutSelectedStylesForViewAdvanced } from './styles/layout';
 import { linkStyles, linkStylesOld } from './styles/link';
 import { listsStyles, listsStylesSafariFix } from './styles/list';
 import { mediaStyles } from './styles/mediaStyles';
@@ -213,7 +213,33 @@ var EditorContentContainer = /*#__PURE__*/React.forwardRef(function (props, ref)
     ref: ref,
     css: [contentStyles(),
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
-    layoutBaseStyles(), fg('linking_platform_smart_links_in_live_pages') ?
+    layoutBaseStyles,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    editorExperiment('advanced_layouts', true) && layoutBaseStylesAdvanced, editorExperiment('advanced_layouts', true) ?
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    layoutSectionStylesAdvanced :
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    layoutSectionStylesNotAdvanced, editorExperiment('advanced_layouts', true) ?
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    layoutColumnStylesAdvanced :
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    layoutColumnStylesNotAdvanced,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    editorExperiment('advanced_layouts', true) ?
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    layoutSelectedStylesAdvanced :
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    layoutSelectedStylesNotAdvanced,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    editorExperiment('advanced_layouts', true) && layoutColumnResponsiveStyles,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    editorExperiment('advanced_layouts', true) && layoutResponsiveBaseStyles, fg('platform_editor_nested_dnd_styles_changes') &&
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    layoutBaseStylesFixesUnderNestedDnDFG, fg('platform_editor_nested_dnd_styles_changes') ?
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    layoutColumnMartinTopFixesNew :
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    layoutColumnMartinTopFixesOld, 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
@@ -245,7 +271,15 @@ var EditorContentContainer = /*#__PURE__*/React.forwardRef(function (props, ref)
     // 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, isFullPage && scrollbarStyles, fg('platform_editor_ssr_fix_lists') && listLayoutShiftFix, fg('platform_editor_nested_dnd_styles_changes') ?
+    viewMode === 'view' && layoutStylesForView,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    viewMode === 'view' && editorExperiment('advanced_layouts', true) &&
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    layoutSelectedStylesForViewAdvanced, viewMode === 'view' && editorExperiment('advanced_layouts', false) &&
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    layoutSelectedStylesForViewNotAdvanced, viewMode === 'view' && editorExperiment('advanced_layouts', true) &&
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    layoutResponsiveStylesForView, isComment && commentEditorStyles, isFullPage && fullPageEditorStyles, isFullPage && scrollbarStyles, 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 :
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values

package/dist/esm/ui/EditorContentContainer/styles/gapCursorStyles.js

@@ -0,0 +1,91 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled
+import { css, keyframes } from '@emotion/react';
+var gapCursorBlink = keyframes({
+  'from, to': {
+    opacity: 0
+  },
+  '50%': {
+    opacity: 1
+  }
+});
+export var hideCaretModifier = 'ProseMirror-hide-gapcursor';
+var gapCursorSelector = '.ProseMirror-gapcursor';
+var prosemirrorwidgetNotBlock = '.ProseMirror-widget:not([data-blocks-decoration-container="true"]):not([data-blocks-drag-handle-container="true"]):not([data-blocks-quick-insert-container="true"])';
+var wrapLeft = '[layout="wrap-left"]';
+var wrapRight = '[layout="wrap-right"]';
+var fixVerticalAlignmentSelector = "\n\t&:first-of-type + ul,\n\t&:first-of-type + span + ul,\n\t&:first-of-type + ol,\n\t&:first-of-type + span + ol,\n\t&:first-of-type + pre,\n\t&:first-of-type + span + pre,\n\t&:first-of-type + blockquote,\n\t&:first-of-type + span + blockquote\n";
+var twoImagesSideBySideFixSelector = "\n  ".concat(gapCursorSelector).concat(wrapLeft, " + span + ").concat(wrapLeft, ",\n  ").concat(gapCursorSelector).concat(wrapRight, " + span + ").concat(wrapRight, ",\n  ").concat(gapCursorSelector, " + ").concat(wrapLeft, " + ").concat(wrapRight, ",\n  ").concat(gapCursorSelector, " + ").concat(wrapLeft, " + span + ").concat(wrapRight, ",\n  ").concat(gapCursorSelector, " + ").concat(wrapRight, " + ").concat(wrapLeft, ",\n  ").concat(gapCursorSelector, " + ").concat(wrapRight, " + span + ").concat(wrapLeft, ",\n  ").concat(wrapLeft, " + ").concat(gapCursorSelector, " + ").concat(wrapRight, ",\n  ").concat(wrapLeft, " + ").concat(gapCursorSelector, " + span ").concat(wrapRight, ",\n  ").concat(wrapRight, " + ").concat(gapCursorSelector, " + ").concat(wrapLeft, ",\n  ").concat(wrapRight, " + ").concat(gapCursorSelector, " + span + ").concat(wrapLeft, ",\n  ").concat(wrapLeft, " + ").concat(gapCursorSelector);
+var marginFixSelector = "\n  ".concat(wrapLeft, " + ").concat(gapCursorSelector, " + ").concat(wrapRight, " > div,\n  ").concat(wrapLeft, " + ").concat(gapCursorSelector, " + span + ").concat(wrapRight, " > div,\n  ").concat(wrapRight, " + ").concat(gapCursorSelector, " + ").concat(wrapLeft, " > div,\n  ").concat(wrapRight, " + ").concat(gapCursorSelector, " + span + ").concat(wrapLeft, " > div,\n  ").concat(gapCursorSelector, " + ").concat(wrapRight, " + ").concat(wrapLeft, " > div,\n  ").concat(gapCursorSelector, " + ").concat(wrapRight, " + span + ").concat(wrapLeft, " > div,\n  ").concat(gapCursorSelector, " + ").concat(wrapLeft, " + ").concat(wrapRight, " > div,\n  ").concat(gapCursorSelector, " + ").concat(wrapLeft, " + span + ").concat(wrapRight, " > div");
+var floatLeftFixSelector = "\n  ".concat(wrapLeft, " + ").concat(gapCursorSelector, ",\n  ").concat(wrapRight, " + ").concat(gapCursorSelector);
+var afterPresudoSelector = "\n  ".concat(gapCursorSelector, " + ").concat(wrapLeft, " + span + ").concat(wrapRight, "::after,\n  ").concat(gapCursorSelector, " + ").concat(wrapRight, " + span + ").concat(wrapLeft, "::after,\n  ").concat(wrapLeft, " + ").concat(gapCursorSelector, " + ").concat(wrapRight, "::after,\n  ").concat(wrapLeft, " + ").concat(gapCursorSelector, " + span + ").concat(wrapRight, "::after,\n  ").concat(wrapRight, " + ").concat(gapCursorSelector, " + ").concat(wrapLeft, "::after,\n  ").concat(wrapRight, " + ").concat(gapCursorSelector, " + span + ").concat(wrapLeft, "::after");
+var marginDeepChildrenFixSelector = "\n".concat(wrapLeft, " + ").concat(gapCursorSelector, " + ").concat(wrapRight, " + *,\n  ").concat(wrapLeft, " + ").concat(gapCursorSelector, " + ").concat(wrapRight, " + span + *,\n  ").concat(wrapRight, " + ").concat(gapCursorSelector, " + ").concat(wrapLeft, " + *,\n  ").concat(wrapRight, " + ").concat(gapCursorSelector, " + ").concat(wrapLeft, " + span + *,\n  ").concat(wrapLeft, " + ").concat(gapCursorSelector, " + span + ").concat(wrapRight, " + *,\n  ").concat(wrapRight, " + ").concat(gapCursorSelector, " + span + ").concat(wrapLeft, " + *,\n  ").concat(gapCursorSelector, " + ").concat(wrapLeft, " + span + ").concat(wrapRight, " + *,\n  ").concat(gapCursorSelector, " + ").concat(wrapRight, " + span + ").concat(wrapLeft, " + *,\n  ").concat(wrapLeft, " + ").concat(gapCursorSelector, " + ").concat(wrapRight, " + * > *,\n  ").concat(wrapLeft, " + ").concat(gapCursorSelector, " + ").concat(wrapRight, " + span + * > *,\n  ").concat(wrapRight, " + ").concat(gapCursorSelector, " + ").concat(wrapLeft, " + * > *,\n  ").concat(wrapRight, " + ").concat(gapCursorSelector, " + ").concat(wrapLeft, " + span + * > *,\n  ").concat(wrapLeft, " + ").concat(gapCursorSelector, " + span + ").concat(wrapRight, " + * > *,\n  ").concat(wrapRight, " + ").concat(gapCursorSelector, " + span + ").concat(wrapLeft, " + * > *,\n  ").concat(gapCursorSelector, " + ").concat(wrapLeft, " + span + ").concat(wrapRight, " + * > *,\n  ").concat(gapCursorSelector, " + ").concat(wrapRight, " + span + ").concat(wrapLeft, " + * > *,\n  ").concat(prosemirrorwidgetNotBlock, " + ").concat(gapCursorSelector, " + *,\n  ").concat(prosemirrorwidgetNotBlock, " + ").concat(gapCursorSelector, " + span + *");
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
+export var gapCursorStyles = css(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '.ProseMirror': _defineProperty(_defineProperty(_defineProperty({}, "&.".concat(hideCaretModifier), {
+    caretColor: 'transparent'
+  }), gapCursorSelector, _defineProperty(_defineProperty({
+    display: 'none',
+    pointerEvents: 'none',
+    position: 'relative',
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '& span': {
+      caretColor: 'transparent',
+      position: 'absolute',
+      height: '100%',
+      width: '100%',
+      display: 'block'
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '& span::after': {
+      animation: "1s ".concat(gapCursorBlink, " step-start infinite"),
+      borderLeft: '1px solid',
+      content: "''",
+      display: 'block',
+      position: 'absolute',
+      top: 0,
+      height: '100%'
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '&.-left span::after': {
+      left: "var(--ds-space-negative-050, -4px)"
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '&.-right span::after': {
+      right: "var(--ds-space-negative-050, -4px)"
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '& span[layout="full-width"], & span[layout="wide"], & span[layout="fixed-width"]': {
+      // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
+      marginLeft: '50%',
+      transform: 'translateX(-50%)'
+    }
+  }, "&".concat(wrapRight), {
+    float: 'right'
+  }), fixVerticalAlignmentSelector, {
+    marginTop: 0
+  })), "&.ProseMirror-focused ".concat(gapCursorSelector), {
+    display: 'block',
+    borderColor: 'transparent'
+  })
+}, twoImagesSideBySideFixSelector, {
+  clear: 'none'
+}), marginFixSelector, {
+  marginRight: 0,
+  marginLeft: 0,
+  marginBottom: 0
+}), floatLeftFixSelector, {
+  float: 'left'
+}), afterPresudoSelector, {
+  visibility: 'hidden',
+  display: 'block',
+  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
+  fontSize: 0,
+  content: "' '",
+  clear: 'both',
+  height: 0
+}), marginDeepChildrenFixSelector, {
+  marginTop: 0
+}));