npm - @atlaskit/editor-core - Versions diffs - 208.1.0 → 208.1.2 - Mend

@atlaskit/editor-core 208.1.0 → 208.1.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (32) hide show

package/CHANGELOG.md CHANGED Viewed

@@ -1,5 +1,22 @@
 # @atlaskit/editor-core
+## 208.1.2
+### Patch Changes
+- [#174035](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/174035)
+  [`0d3ac8d3b7705`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/0d3ac8d3b7705) -
+  [ux] Migrate toolbarWithSizeDetector styles to static emotion
+- Updated dependencies
+## 208.1.1
+### Patch Changes
+- [#173477](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/173477)
+  [`bfdfefb6b7135`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/bfdfefb6b7135) -
+  [ux] Set focus before editor
 ## 208.1.0
 ### Minor Changes

package/dist/cjs/create-editor/ReactEditorView/focusEditorElement.js ADDED Viewed

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.focusEditorElement = focusEditorElement;
+function focusEditorElement(editorId) {
+  var parentElement = document.querySelector("[data-focus-id=\"".concat(editorId, "\"]"));
+  if (!(parentElement instanceof HTMLElement)) {
+    return;
+  }
+  parentElement.focus();
+}

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

@@ -42,6 +42,7 @@ var _createEditor = require("./create-editor");
 var _createPluginsList = _interopRequireDefault(require("./create-plugins-list"));
 var _createSchema = require("./create-schema");
 var _messages = require("./messages");
+var _focusEditorElement = require("./ReactEditorView/focusEditorElement");
 var _getUAPrefix = require("./ReactEditorView/getUAPrefix");
 var _handleEditorFocus = require("./ReactEditorView/handleEditorFocus");
 var _useDispatchTransaction = require("./ReactEditorView/useDispatchTransaction");
@@ -494,6 +495,11 @@ function ReactEditorView(props) {
           if (!liveDocWithContent || !(0, _platformFeatureFlags.fg)('platform_editor_no_cursor_on_live_doc_init')) {
             focusTimeoutId.current = (0, _handleEditorFocus.handleEditorFocus)(editorView);
           }
+          if ((0, _expValEquals.expValEquals)('platform_editor_no_cursor_on_edit_page_init', 'isEnabled', true) && (0, _platformFeatureFlags.fg)('cc_editor_focus_before_editor_on_load')) {
+            if (!disabled && shouldFocus && !(0, _document.isEmptyDocument)(editorView.state.doc)) {
+              (0, _focusEditorElement.focusEditorElement)(editorId.current);
+            }
+          }
         }
       } else {
         var _liveDocWithContent = (__livePage || (0, _expValEquals.expValEquals)('platform_editor_no_cursor_on_edit_page_init', 'isEnabled', true)) && !(0, _document.isEmptyDocument)(editorView.state.doc);
@@ -502,7 +508,7 @@ function ReactEditorView(props) {
         }
       }
     }
-  }, [editorView, shouldFocus, __livePage, mitigateScrollJump]);
+  }, [editorView, shouldFocus, __livePage, mitigateScrollJump, disabled]);
   var scrollElement = _react.default.useRef();
   var possibleListeners = _react.default.useRef([]);
   _react.default.useEffect(function () {
@@ -619,6 +625,11 @@ function ReactEditorView(props) {
               if (!isLivePageWithContent && shouldFocus && view.props.editable && view.props.editable(view.state)) {
                 focusTimeoutId.current = (0, _handleEditorFocus.handleEditorFocus)(view);
               }
+              if ((0, _expValEquals.expValEquals)('platform_editor_no_cursor_on_edit_page_init', 'isEnabled', true) && (0, _platformFeatureFlags.fg)('cc_editor_focus_before_editor_on_load')) {
+                if (shouldFocus && view.props.editable && view.props.editable(view.state) && !(0, _document.isEmptyDocument)(view.state.doc)) {
+                  (0, _focusEditorElement.focusEditorElement)(editorId.current);
+                }
+              }
             }
           } else {
             var _isLivePageWithContent = (__livePage || (0, _expValEquals.expValEquals)('platform_editor_no_cursor_on_edit_page_init', 'isEnabled', true)) && !(0, _document.isEmptyDocument)(view.state.doc) && (0, _platformFeatureFlags.fg)('platform_editor_no_cursor_on_live_doc_init');
@@ -658,7 +669,11 @@ function ReactEditorView(props) {
     }
   }, [createEditorView, onEditorCreated, eventDispatcher, shouldFocus, __livePage, onEditorDestroyed, handleAnalyticsEvent, mitigateScrollJump]);
   var createEditor = (0, _react.useCallback)(function (assistiveLabel, assistiveDescribedBy) {
-    return /*#__PURE__*/_react.default.createElement("div", {
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, (0, _platformFeatureFlags.fg)('cc_editor_focus_before_editor_on_load') && /*#__PURE__*/_react.default.createElement("div", {
+      tabIndex: -1,
+      "data-focus-id": editorId.current,
+      "data-testid": "react-editor-view-inital-focus-element"
+    }), /*#__PURE__*/_react.default.createElement("div", {
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
       className: ((0, _expValEquals.expValEquals)('platform_editor_stable_editorview_classname', 'isEnabled', true) ? 'ProseMirror ' : '') + (0, _getUAPrefix.getUAPrefix)(),
       key: "ProseMirror",
@@ -675,7 +690,7 @@ function ReactEditorView(props) {
       id: EDIT_AREA_ID,
       "aria-describedby": assistiveDescribedBy,
       "data-editor-id": editorId.current
-    });
+    }));
   }, [handleEditorViewRef, props.intl]);
   var previousPreset = (0, _hooks.usePreviousState)(preset);
   (0, _react.useLayoutEffect)(function () {
@@ -696,6 +711,11 @@ function ReactEditorView(props) {
       if (!disabled && shouldFocus && !isLivePageWithContent) {
         focusTimeoutId.current = (0, _handleEditorFocus.handleEditorFocus)(viewRef.current);
       }
+      if ((0, _expValEquals.expValEquals)('platform_editor_no_cursor_on_edit_page_init', 'isEnabled', true) && (0, _platformFeatureFlags.fg)('cc_editor_focus_before_editor_on_load')) {
+        if (!disabled && shouldFocus && !(0, _document.isEmptyDocument)(viewRef.current.state.doc)) {
+          (0, _focusEditorElement.focusEditorElement)(editorId.current);
+        }
+      }
     }
   }, [disabled, shouldFocus, previousDisabledState, __livePage]);
   (0, _useFireFullWidthEvent.useFireFullWidthEvent)(nextAppearance, dispatchAnalyticsEvent);

package/dist/cjs/ui/ContentStyles/date.js CHANGED Viewed

@@ -4,16 +4,16 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.dateVanillaStyles = exports.dateStyles = void 0;
+exports.dateStyles = exports.dateNodeStyles = void 0;
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = require("@emotion/react");
 var _styles = require("@atlaskit/editor-common/styles");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _templateObject; // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
-var dateVanillaStyles = exports.dateVanillaStyles = (0, _react.css)({
+var dateNodeStyles = exports.dateNodeStyles = (0, _react.css)({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-  "[data-prosemirror-node-view-type='vanilla'][data-prosemirror-node-name='date'] .date-lozenger-container span": {
+  "[data-prosemirror-node-name='date'] .date-lozenger-container span": {
     backgroundColor: "var(--ds-background-neutral, #091E420F)",
     color: "var(--ds-text, #172B4D)",
     borderRadius: "var(--ds-border-radius-100, 4px)",
@@ -25,16 +25,16 @@ var dateVanillaStyles = exports.dateVanillaStyles = (0, _react.css)({
     cursor: 'unset'
   },
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-  "[data-prosemirror-node-view-type='vanilla'][data-prosemirror-node-name='date'] .date-lozenger-container span:hover": {
+  "[data-prosemirror-node-name='date'] .date-lozenger-container span:hover": {
     backgroundColor: "var(--ds-background-neutral-hovered, #091E4224)"
   },
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-  "[data-prosemirror-node-view-type='vanilla'][data-prosemirror-node-name='date'] .date-lozenger-container span.date-node-color-red": {
+  "[data-prosemirror-node-name='date'] .date-lozenger-container span.date-node-color-red": {
     backgroundColor: "var(--ds-background-accent-red-subtlest, #FFECEB)",
     color: "var(--ds-text-accent-red, #AE2E24)"
   },
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-  "[data-prosemirror-node-view-type='vanilla'][data-prosemirror-node-name='date'] .date-lozenger-container span.date-node-color-red:hover": {
+  "[data-prosemirror-node-name='date'] .date-lozenger-container span.date-node-color-red:hover": {
     backgroundColor: "var(--ds-background-accent-red-subtler, #FFD5D2)"
   }
 });

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

@@ -152,7 +152,7 @@ var akEditorBreakpointForSmallDevice = "1266px";
 // Under editor experiment platform_editor_core_static_emotion
 // If you are making changes to this file, please make sure to update in EditorContentContainer.tsx as well
 var legacyContentStyles = function legacyContentStyles(props) {
-  return (0, _react2.css)(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n\t--ak-editor--default-gutter-padding: ", "px;\n\t/* 52 is from akEditorGutterPaddingDynamic via editor-shared-styles */\n\t--ak-editor--large-gutter-padding: ", "px;\n\t--ak-editor--default-layout-width: ", "px;\n\t--ak-editor--full-width-layout-width: ", "px;\n\t/* calculate editor line length, 100cqw is the editor container width */\n\t--ak-editor--line-length: min(\n\t\tcalc(100cqw - var(--ak-editor--large-gutter-padding) * 2),\n\t\tvar(--ak-editor--default-layout-width)\n\t);\n\t--ak-editor--breakout-wide-layout-width: ", "px;\n\t--ak-editor--breakout-full-page-guttering-padding: calc(\n\t\tvar(--ak-editor--large-gutter-padding) * 2 + var(--ak-editor--default-gutter-padding)\n\t);\n\n\t.fabric-editor--full-width-mode {\n\t\t--ak-editor--line-length: min(\n\t\t\tcalc(100cqw - var(--ak-editor--large-gutter-padding) * 2),\n\t\t\tvar(--ak-editor--full-width-layout-width)\n\t\t);\n\t}\n\n\t.ProseMirror {\n\t\t--ak-editor-max-container-width: calc(100cqw - var(--ak-editor--large-gutter-padding));\n\t}\n\n\t/* We can't allow nodes that are inside other nodes to bleed from the parent container */\n\t.ProseMirror > div[data-prosemirror-node-block] [data-prosemirror-node-block] {\n\t\t--ak-editor-max-container-width: 100%;\n\t}\n\n\t/* container editor-area is defined in platform/packages/editor/editor-core/src/ui/Appearance/FullPage/StyledComponents.ts */\n\t@container editor-area (width >= ", ") {\n\t\t.ProseMirror {\n\t\t\t--ak-editor--breakout-wide-layout-width: ", "px;\n\t\t}\n\t}\n\n\t.ProseMirror {\n\t\toutline: none;\n\t\tfont-size: ", "px;\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t}\n\n\t.ProseMirror-hideselection *::selection {\n\t\tbackground: transparent;\n\t}\n\n\t.ProseMirror-hideselection *::-moz-selection {\n\t\tbackground: transparent;\n\t}\n\n\t/**\n\t * This prosemirror css style: https://github.com/ProseMirror/prosemirror-view/blob/f37ebb29befdbde3cd194fe13fe17b78e743d2f2/style/prosemirror.css#L24\n\t *\n\t * 1. Merge and Release platform_editor_hide_cursor_when_pm_hideselection\n\t * 2. Cleanup duplicated style from platform_editor_advanced_code_blocks\n\t *    https://product-fabric.atlassian.net/browse/ED-26331\n\t */\n\t", "\n\n\t/* This prosemirror css style: https://github.com/ProseMirror/prosemirror-view/blob/f37ebb29befdbde3cd194fe13fe17b78e743d2f2/style/prosemirror.css#L24 */\n\t", "\n\n\t.ProseMirror-selectednode {\n\t\toutline: none;\n\t}\n\n\t.ProseMirror-selectednode:empty {\n\t\toutline: 2px solid ", ";\n\t}\n\n\t.ProseMirror.ProseMirror-focused:has(.ProseMirror-mark-boundary-cursor) {\n\t\tcaret-color: transparent;\n\t}\n\t.ProseMirror:not(.ProseMirror-focused) .ProseMirror-mark-boundary-cursor {\n\t\tdisplay: none;\n\t}\n\n\t", "\n\t", "\n\t", "\n\t", "\n\t", "\n\t", "\n\n  ", "\n\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", ";\n\t", "\n\t", "\n\t", "\n\t", "\n\t", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  /* Switch between the two icons based on the visual refresh feature gate */\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n\t", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n\n  .panelView-content-wrap {\n\t\tbox-sizing: border-box;\n\t}\n\n\t.mediaGroupView-content-wrap ul {\n\t\tpadding: 0;\n\t}\n\n\t/** Needed to override any cleared floats, e.g. image wrapping */\n\n\tdiv.fabric-editor-block-mark[class^='fabric-editor-align'] {\n\t\tclear: none !important;\n\t}\n\n\t.fabric-editor-align-end {\n\t\ttext-align: right;\n\t}\n\n\t.fabric-editor-align-start {\n\t\ttext-align: left;\n\t}\n\n\t.fabric-editor-align-center {\n\t\ttext-align: center;\n\t}\n\n\t/* For FullPage only when inside a table\n\tRelated code all lives inside: packages/editor/editor-core/src/ui/Appearance/FullPage/StyledComponents.ts\n\tIn the \"editorContentAreaContainerStyle\" function */\n\t.fabric-editor--full-width-mode {\n\t\t.pm-table-container {\n\t\t\t.code-block,\n\t\t\t.extension-container,\n\t\t\t.multiBodiedExtension--container {\n\t\t\t\tmax-width: 100%;\n\t\t\t}\n\t\t}\n\t}\n\n\t.pm-table-header-content-wrap :not(.fabric-editor-alignment),\n\t.pm-table-header-content-wrap :not(p, .fabric-editor-block-mark) + div.fabric-editor-block-mark,\n\t.pm-table-cell-content-wrap :not(p, .fabric-editor-block-mark) + div.fabric-editor-block-mark {\n\t\tp:first-of-type {\n\t\t\tmargin-top: 0;\n\t\t}\n\t}\n\t.pm-table-cell-content-wrap .mediaGroupView-content-wrap {\n\t\tclear: both;\n\t}\n\n\t.hyperlink-floating-toolbar,\n\t.", " {\n\t\tpadding: 0;\n\t}\n\n\t/* Legacy Link icon in the Atlaskit package\n     is bigger than the others, new ADS icon does not have this issue\n  */\n\t", "\n"])), _editorSharedStyles.akEditorGutterPadding, (0, _editorSharedStyles.akEditorGutterPaddingDynamic)(), _editorSharedStyles.akEditorDefaultLayoutWidth, _editorSharedStyles.akEditorFullWidthLayoutWidth, _editorSharedStyles.akEditorCalculatedWideLayoutWidthSmallViewport, akEditorBreakpointForSmallDevice, _editorSharedStyles.akEditorCalculatedWideLayoutWidth, (0, _editorSharedStyles.editorFontSize)({
+  return (0, _react2.css)(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n\t--ak-editor--default-gutter-padding: ", "px;\n\t/* 52 is from akEditorGutterPaddingDynamic via editor-shared-styles */\n\t--ak-editor--large-gutter-padding: ", "px;\n\t--ak-editor--default-layout-width: ", "px;\n\t--ak-editor--full-width-layout-width: ", "px;\n\t/* calculate editor line length, 100cqw is the editor container width */\n\t--ak-editor--line-length: min(\n\t\tcalc(100cqw - var(--ak-editor--large-gutter-padding) * 2),\n\t\tvar(--ak-editor--default-layout-width)\n\t);\n\t--ak-editor--breakout-wide-layout-width: ", "px;\n\t--ak-editor--breakout-full-page-guttering-padding: calc(\n\t\tvar(--ak-editor--large-gutter-padding) * 2 + var(--ak-editor--default-gutter-padding)\n\t);\n\n\t.fabric-editor--full-width-mode {\n\t\t--ak-editor--line-length: min(\n\t\t\tcalc(100cqw - var(--ak-editor--large-gutter-padding) * 2),\n\t\t\tvar(--ak-editor--full-width-layout-width)\n\t\t);\n\t}\n\n\t.ProseMirror {\n\t\t--ak-editor-max-container-width: calc(100cqw - var(--ak-editor--large-gutter-padding));\n\t}\n\n\t/* We can't allow nodes that are inside other nodes to bleed from the parent container */\n\t.ProseMirror > div[data-prosemirror-node-block] [data-prosemirror-node-block] {\n\t\t--ak-editor-max-container-width: 100%;\n\t}\n\n\t/* container editor-area is defined in platform/packages/editor/editor-core/src/ui/Appearance/FullPage/StyledComponents.ts */\n\t@container editor-area (width >= ", ") {\n\t\t.ProseMirror {\n\t\t\t--ak-editor--breakout-wide-layout-width: ", "px;\n\t\t}\n\t}\n\n\t.ProseMirror {\n\t\toutline: none;\n\t\tfont-size: ", "px;\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t}\n\n\t.ProseMirror-hideselection *::selection {\n\t\tbackground: transparent;\n\t}\n\n\t.ProseMirror-hideselection *::-moz-selection {\n\t\tbackground: transparent;\n\t}\n\n\t/**\n\t * This prosemirror css style: https://github.com/ProseMirror/prosemirror-view/blob/f37ebb29befdbde3cd194fe13fe17b78e743d2f2/style/prosemirror.css#L24\n\t *\n\t * 1. Merge and Release platform_editor_hide_cursor_when_pm_hideselection\n\t * 2. Cleanup duplicated style from platform_editor_advanced_code_blocks\n\t *    https://product-fabric.atlassian.net/browse/ED-26331\n\t */\n\t", "\n\n\t/* This prosemirror css style: https://github.com/ProseMirror/prosemirror-view/blob/f37ebb29befdbde3cd194fe13fe17b78e743d2f2/style/prosemirror.css#L24 */\n\t", "\n\n\t.ProseMirror-selectednode {\n\t\toutline: none;\n\t}\n\n\t.ProseMirror-selectednode:empty {\n\t\toutline: 2px solid ", ";\n\t}\n\n\t.ProseMirror.ProseMirror-focused:has(.ProseMirror-mark-boundary-cursor) {\n\t\tcaret-color: transparent;\n\t}\n\t.ProseMirror:not(.ProseMirror-focused) .ProseMirror-mark-boundary-cursor {\n\t\tdisplay: none;\n\t}\n\n\t", "\n\t", "\n\t", "\n\t", "\n\t", "\n\t", "\n\n  ", "\n\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", ";\n\t", "\n\t", "\n\t", "\n\t", "\n\t", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  /* Switch between the two icons based on the visual refresh feature gate */\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n\t", "\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\tRelated code all lives inside: packages/editor/editor-core/src/ui/Appearance/FullPage/StyledComponents.ts\n\tIn the \"editorContentAreaContainerStyle\" function */\n\t.fabric-editor--full-width-mode {\n\t\t.pm-table-container {\n\t\t\t.code-block,\n\t\t\t.extension-container,\n\t\t\t.multiBodiedExtension--container {\n\t\t\t\tmax-width: 100%;\n\t\t\t}\n\t\t}\n\t}\n\n\t.pm-table-header-content-wrap :not(.fabric-editor-alignment),\n\t.pm-table-header-content-wrap :not(p, .fabric-editor-block-mark) + div.fabric-editor-block-mark,\n\t.pm-table-cell-content-wrap :not(p, .fabric-editor-block-mark) + div.fabric-editor-block-mark {\n\t\tp:first-of-type {\n\t\t\tmargin-top: 0;\n\t\t}\n\t}\n\t.pm-table-cell-content-wrap .mediaGroupView-content-wrap {\n\t\tclear: both;\n\t}\n\n\t.hyperlink-floating-toolbar,\n\t.", " {\n\t\tpadding: 0;\n\t}\n\n\t/* Legacy Link icon in the Atlaskit package\n     is bigger than the others, new ADS icon does not have this issue\n  */\n\t", "\n"])), _editorSharedStyles.akEditorGutterPadding, (0, _editorSharedStyles.akEditorGutterPaddingDynamic)(), _editorSharedStyles.akEditorDefaultLayoutWidth, _editorSharedStyles.akEditorFullWidthLayoutWidth, _editorSharedStyles.akEditorCalculatedWideLayoutWidthSmallViewport, akEditorBreakpointForSmallDevice, _editorSharedStyles.akEditorCalculatedWideLayoutWidth, (0, _editorSharedStyles.editorFontSize)({
     theme: props.theme
   }), _styles.whitespaceSharedStyles, (0, _styles.paragraphSharedStyles)(props.typographyTheme), _styles.listsSharedStyles, _styles.indentationSharedStyles, _styles.shadowSharedStyle, _getInlineNodeViewProducer.InlineNodeViewSharedStyles, (0, _platformFeatureFlags.fg)('platform_editor_hide_cursor_when_pm_hideselection') ? (0, _react2.css)(_templateObject0 || (_templateObject0 = (0, _taggedTemplateLiteral2.default)(["\n\t\t\t\t.ProseMirror-hideselection {\n\t\t\t\t\tcaret-color: transparent;\n\t\t\t\t}\n\t\t\t"]))) : null, (0, _experiments.editorExperiment)('platform_editor_advanced_code_blocks', true) ? (0, _react2.css)(_templateObject1 || (_templateObject1 = (0, _taggedTemplateLiteral2.default)(["\n\t\t\t\t.ProseMirror-hideselection {\n\t\t\t\t\tcaret-color: transparent;\n\t\t\t\t}\n\t\t\t"]))) : null, "var(--ds-border-focused, #8cf)", (0, _platformFeatureFlags.fg)('platform_editor_fix_floating_toolbar_focus') ? firstFloatingToolbarButtonStyles : null, _styles5.placeholderTextStyles, (0, _platformFeatureFlags.fg)('platform_editor_system_fake_text_highlight_colour') && _styles5.placeholderTextStyles_fg_platform_editor_system_fake_text_highlight_colour, placeholderStyles, (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') ? placeholderOverflowStyles : null, (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') && (0, _platformFeatureFlags.fg)('platform_editor_quick_insert_placeholder') ? placeholderWrapStyles : null, (0, _codeBlock.codeBlockStyles)(), (0, _styles2.blocktypeStyles)(props.typographyTheme), (0, _styles.codeMarkSharedStyles)(), _styles.textColorStyles, (0, _styles.backgroundColorStyles)(), listsStyles, ruleStyles(), (0, _media.mediaStyles)(), (0, _layout.layoutStyles)(props.viewMode), (0, _platformFeatureFlags.fg)('confluence_team_presence_scroll_to_pointer') ? _collab.telepointerStyle : _collab.telepointerStyleWithInitialOnly, _selection.gapCursorStyles, (0, _panel2.panelStyles)(), mentionsStyles, (0, _experiments.editorExperiment)('platform_editor_vanilla_dom', true, {
     exposure: false
@@ -168,7 +168,7 @@ var legacyContentStyles = function legacyContentStyles(props) {
     exposure: false
   }) && (0, _platformFeatureFlags.fg)('platform-visual-refresh-icons') && _tasksAndDecisions.vanillaTaskDecisionIconWithVisualRefresh, (0, _experiments.editorExperiment)('platform_editor_vanilla_dom', true, {
     exposure: false
-  }) && !(0, _platformFeatureFlags.fg)('platform-visual-refresh-icons') && _tasksAndDecisions.vanillaTaskDecisionIconWithoutVisualRefresh, _status.statusStyles, (0, _experiments.editorExperiment)('platform_editor_vanilla_dom', true) ? (0, _status.vanillaStatusStyles)() : null, (0, _styles.annotationSharedStyles)(), (0, _styles.smartCardStyles)(), (0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-v1') ? (0, _styles.getSmartCardSharedStyles)() : _styles.smartCardSharedStyles, (0, _experiments.editorExperiment)('platform_editor_vanilla_dom', true) ? _date.dateVanillaStyles : null, _date.dateStyles, (0, _styles.embedCardStyles)(), _styles.unsupportedStyles, _styles.resizerStyles, (0, _styles.pragmaticResizerStyles)(), (0, _styles.pragmaticStylesLayoutFirstNodeResizeHandleFix)(), (0, _styles.pragmaticResizerStylesForTooltip)(), (0, _aiPanels.aiPanelStyles)(props.colorMode), firstBlockNodeStylesNew, _styles.MediaSharedClassNames.FLOATING_TOOLBAR_COMPONENT, !(0, _platformFeatureFlags.fg)('platform-visual-refresh-icons') ? (0, _react2.css)(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n\t\t\t\t.hyperlink-open-link {\n\t\t\t\t\tmin-width: 24px;\n\t\t\t\t\tsvg {\n\t\t\t\t\t\tmax-width: 18px;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t"]))) : null);
+  }) && !(0, _platformFeatureFlags.fg)('platform-visual-refresh-icons') && _tasksAndDecisions.vanillaTaskDecisionIconWithoutVisualRefresh, _status.statusStyles, (0, _experiments.editorExperiment)('platform_editor_vanilla_dom', true) ? (0, _status.vanillaStatusStyles)() : null, (0, _styles.annotationSharedStyles)(), (0, _styles.smartCardStyles)(), (0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-v1') ? (0, _styles.getSmartCardSharedStyles)() : _styles.smartCardSharedStyles, _date.dateStyles, _date.dateNodeStyles, (0, _styles.embedCardStyles)(), _styles.unsupportedStyles, _styles.resizerStyles, (0, _styles.pragmaticResizerStyles)(), (0, _styles.pragmaticStylesLayoutFirstNodeResizeHandleFix)(), (0, _styles.pragmaticResizerStylesForTooltip)(), (0, _aiPanels.aiPanelStyles)(props.colorMode), firstBlockNodeStylesNew, _styles.MediaSharedClassNames.FLOATING_TOOLBAR_COMPONENT, !(0, _platformFeatureFlags.fg)('platform-visual-refresh-icons') ? (0, _react2.css)(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n\t\t\t\t.hyperlink-open-link {\n\t\t\t\t\tmin-width: 24px;\n\t\t\t\t\tsvg {\n\t\t\t\t\t\tmax-width: 18px;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t"]))) : null);
 };
 var createEditorContentStyle = exports.createEditorContentStyle = function createEditorContentStyle(styles) {
   return /*#__PURE__*/_react.default.forwardRef(function (props, ref) {

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

@@ -264,7 +264,7 @@ var EditorContentContainer = /*#__PURE__*/_react.default.forwardRef(function (pr
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
     _smartCardStyles.smartLinksInLivePagesStylesOld, (0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-v1') &&
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
-    _smartCardStyles.linkingVisualRefreshV1Styles, (0, _experiments.editorExperiment)('platform_editor_vanilla_dom', true) &&
+    _smartCardStyles.linkingVisualRefreshV1Styles,
     // 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

package/dist/cjs/ui/EditorContentContainer/styles/dateStyles.js CHANGED Viewed

@@ -16,7 +16,7 @@ var DateSharedCssClassName = exports.DateSharedCssClassName = {
 };
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
-var dateVanillaStyles = exports.dateVanillaStyles = (0, _react.css)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, "[data-prosemirror-node-view-type='vanilla'][data-prosemirror-node-name='date'] .".concat(DateSharedCssClassName.DATE_WRAPPER, " span"), {
+var dateVanillaStyles = exports.dateVanillaStyles = (0, _react.css)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, "[data-prosemirror-node-name='date'] .".concat(DateSharedCssClassName.DATE_WRAPPER, " span"), {
   backgroundColor: "var(--ds-background-neutral, #091E420F)",
   color: "var(--ds-text, #172B4D)",
   borderRadius: "var(--ds-border-radius-100, 4px)",
@@ -26,12 +26,12 @@ var dateVanillaStyles = exports.dateVanillaStyles = (0, _react.css)((0, _defineP
   transition: 'background 0.3s',
   whiteSpace: 'nowrap',
   cursor: 'unset'
-}), "[data-prosemirror-node-view-type='vanilla'][data-prosemirror-node-name='date'] .".concat(DateSharedCssClassName.DATE_WRAPPER, " span:hover"), {
+}), "[data-prosemirror-node-name='date'] .".concat(DateSharedCssClassName.DATE_WRAPPER, " span:hover"), {
   backgroundColor: "var(--ds-background-neutral-hovered, #091E4224)"
-}), "[data-prosemirror-node-view-type='vanilla'][data-prosemirror-node-name='date'] .".concat(DateSharedCssClassName.DATE_WRAPPER, " span.date-node-color-red"), {
+}), "[data-prosemirror-node-name='date'] .".concat(DateSharedCssClassName.DATE_WRAPPER, " span.date-node-color-red"), {
   backgroundColor: "var(--ds-background-accent-red-subtlest, #FFECEB)",
   color: "var(--ds-text-accent-red, #AE2E24)"
-}), "[data-prosemirror-node-view-type='vanilla'][data-prosemirror-node-name='date'] .".concat(DateSharedCssClassName.DATE_WRAPPER, " span.date-node-color-red:hover"), {
+}), "[data-prosemirror-node-name='date'] .".concat(DateSharedCssClassName.DATE_WRAPPER, " span.date-node-color-red:hover"), {
   backgroundColor: "var(--ds-background-accent-red-subtler, #FFD5D2)"
 }));

package/dist/cjs/ui/Toolbar/ToolbarWithSizeDetector.js CHANGED Viewed

@@ -14,6 +14,8 @@ var _react2 = require("@emotion/react");
 var _coreUtils = require("@atlaskit/editor-common/core-utils");
 var _types = require("@atlaskit/editor-common/types");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
+var _platformFeatureFlagsReact = require("@atlaskit/platform-feature-flags-react");
+var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _widthDetector = require("@atlaskit/width-detector");
 var _isFullPage = require("../../utils/is-full-page");
 var _hooks = require("./hooks");
@@ -27,6 +29,7 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+// Remove when platform_editor_core_static_emotion is cleaned up
 var toolbar = (0, _react2.css)((0, _defineProperty2.default)({
   width: '100%',
   position: 'relative'
@@ -36,7 +39,20 @@ var toolbar = (0, _react2.css)((0, _defineProperty2.default)({
   width: 'calc(100% - 30px)',
   margin: "0 ".concat("var(--ds-space-200, 16px)")
 }));
-var ToolbarWithSizeDetector = exports.ToolbarWithSizeDetector = function ToolbarWithSizeDetector(props) {
+// Rename to toolbar when platform_editor_core_static_emotion is cleaned up
+var staticToolbar = (0, _react2.css)({
+  width: '100%',
+  position: 'relative'
+  // The media query below has been commented out as akEditorMobileMaxWidth is 0px  and thus the styles are never applied.
+  // [`@media (max-width: ${akEditorMobileMaxWidth}px)`]: {
+  //   gridColumn: '1 / 2',
+  //   gridRow: 2,
+  //   width: 'calc(100% - 30px)',
+  //   margin: `0 ${token('space.200', '16px')}`,
+  // },
+});
+var DynamicStyleToolbarWithSizeDetector = function DynamicStyleToolbarWithSizeDetector(props) {
   var ref = _react.default.useRef(null);
   var _React$useState = _react.default.useState(undefined),
     _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
@@ -71,4 +87,56 @@ var ToolbarWithSizeDetector = exports.ToolbarWithSizeDetector = function Toolbar
       ref: ref
     }))
   );
-};
+};
+var StaticStyleToolbarWithSizeDetector = function StaticStyleToolbarWithSizeDetector(props) {
+  var ref = _react.default.useRef(null);
+  var _React$useState3 = _react.default.useState(undefined),
+    _React$useState4 = (0, _slicedToArray2.default)(_React$useState3, 2),
+    width = _React$useState4[0],
+    setWidth = _React$useState4[1];
+  var elementWidth = (0, _hooks.useElementWidth)(ref, {
+    skip: typeof width !== 'undefined'
+  });
+  var defaultToolbarSize = (0, _coreUtils.isSSR)() && (0, _isFullPage.isFullPage)(props.appearance) ? _types.ToolbarSize.XXL : undefined;
+  var toolbarSize = typeof width === 'undefined' && typeof elementWidth === 'undefined' ? defaultToolbarSize :
+  // Ignored via go/ees005
+  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+  (0, _toolbarSize.widthToToolbarSize)(width || elementWidth, props.appearance);
+  var minWidthValue = (0, _react.useMemo)(function () {
+    if (props.hasMinWidth) {
+      var toolbarWidth = (0, _isFullPage.isFullPage)(props.appearance) && props.twoLineEditorToolbar ? _types.ToolbarSize.S : _types.ToolbarSize.M;
+      return (0, _toolbarSize.toolbarSizeToWidth)(toolbarWidth, props.appearance);
+    } else {
+      return 254;
+    }
+  }, [props.appearance, props.hasMinWidth, props.twoLineEditorToolbar]);
+  return (0, _react2.jsx)("div", {
+    css: staticToolbar,
+    style: {
+      minWidth: "".concat(minWidthValue, "px")
+    }
+  }, (0, _react2.jsx)(_widthDetector.WidthObserver, {
+    setWidth: setWidth
+  }), props.editorView && toolbarSize ? (0, _react2.jsx)(_Toolbar.Toolbar, {
+    toolbarSize: toolbarSize,
+    items: props.items,
+    editorView: props.editorView,
+    editorActions: props.editorActions,
+    eventDispatcher: props.eventDispatcher,
+    providerFactory: props.providerFactory,
+    appearance: props.appearance,
+    popupsMountPoint: props.popupsMountPoint,
+    popupsBoundariesElement: props.popupsBoundariesElement,
+    popupsScrollableElement: props.popupsScrollableElement,
+    disabled: props.disabled,
+    dispatchAnalyticsEvent: props.dispatchAnalyticsEvent,
+    containerElement: props.containerElement,
+    hasMinWidth: props.hasMinWidth,
+    twoLineEditorToolbar: props.twoLineEditorToolbar
+  }) : (0, _react2.jsx)("div", {
+    ref: ref
+  }));
+};
+var ToolbarWithSizeDetector = exports.ToolbarWithSizeDetector = (0, _platformFeatureFlagsReact.componentWithCondition)(function () {
+  return (0, _expValEquals.expValEquals)('platform_editor_core_static_emotion_non_central', 'isEnabled', true);
+}, StaticStyleToolbarWithSizeDetector, DynamicStyleToolbarWithSizeDetector);

package/dist/cjs/version-wrapper.js CHANGED Viewed

@@ -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 = "208.0.1";
+var version = exports.version = "208.1.1";

package/dist/es2019/create-editor/ReactEditorView/focusEditorElement.js ADDED Viewed

@@ -0,0 +1,7 @@
+export function focusEditorElement(editorId) {
+  const parentElement = document.querySelector(`[data-focus-id="${editorId}"]`);
+  if (!(parentElement instanceof HTMLElement)) {
+    return;
+  }
+  parentElement.focus();
+}

package/dist/es2019/create-editor/ReactEditorView.js CHANGED Viewed

@@ -30,6 +30,7 @@ import { createErrorReporter, createPMPlugins, processPluginsList } from './crea
 import createPluginsList from './create-plugins-list';
 import { createSchema } from './create-schema';
 import { editorMessages } from './messages';
+import { focusEditorElement } from './ReactEditorView/focusEditorElement';
 import { getUAPrefix } from './ReactEditorView/getUAPrefix';
 import { handleEditorFocus } from './ReactEditorView/handleEditorFocus';
 import { useDispatchTransaction } from './ReactEditorView/useDispatchTransaction';
@@ -461,6 +462,11 @@ export function ReactEditorView(props) {
           if (!liveDocWithContent || !fg('platform_editor_no_cursor_on_live_doc_init')) {
             focusTimeoutId.current = handleEditorFocus(editorView);
           }
+          if (expValEquals('platform_editor_no_cursor_on_edit_page_init', 'isEnabled', true) && fg('cc_editor_focus_before_editor_on_load')) {
+            if (!disabled && shouldFocus && !isEmptyDocument(editorView.state.doc)) {
+              focusEditorElement(editorId.current);
+            }
+          }
         }
       } else {
         const liveDocWithContent = (__livePage || expValEquals('platform_editor_no_cursor_on_edit_page_init', 'isEnabled', true)) && !isEmptyDocument(editorView.state.doc);
@@ -469,7 +475,7 @@ export function ReactEditorView(props) {
         }
       }
     }
-  }, [editorView, shouldFocus, __livePage, mitigateScrollJump]);
+  }, [editorView, shouldFocus, __livePage, mitigateScrollJump, disabled]);
   const scrollElement = React.useRef();
   const possibleListeners = React.useRef([]);
   React.useEffect(() => {
@@ -566,6 +572,11 @@ export function ReactEditorView(props) {
               if (!isLivePageWithContent && shouldFocus && view.props.editable && view.props.editable(view.state)) {
                 focusTimeoutId.current = handleEditorFocus(view);
               }
+              if (expValEquals('platform_editor_no_cursor_on_edit_page_init', 'isEnabled', true) && fg('cc_editor_focus_before_editor_on_load')) {
+                if (shouldFocus && view.props.editable && view.props.editable(view.state) && !isEmptyDocument(view.state.doc)) {
+                  focusEditorElement(editorId.current);
+                }
+              }
             }
           } else {
             const isLivePageWithContent = (__livePage || expValEquals('platform_editor_no_cursor_on_edit_page_init', 'isEnabled', true)) && !isEmptyDocument(view.state.doc) && fg('platform_editor_no_cursor_on_live_doc_init');
@@ -605,7 +616,11 @@ export function ReactEditorView(props) {
     }
   }, [createEditorView, onEditorCreated, eventDispatcher, shouldFocus, __livePage, onEditorDestroyed, handleAnalyticsEvent, mitigateScrollJump]);
   const createEditor = useCallback((assistiveLabel, assistiveDescribedBy) => {
-    return /*#__PURE__*/React.createElement("div", {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, fg('cc_editor_focus_before_editor_on_load') && /*#__PURE__*/React.createElement("div", {
+      tabIndex: -1,
+      "data-focus-id": editorId.current,
+      "data-testid": "react-editor-view-inital-focus-element"
+    }), /*#__PURE__*/React.createElement("div", {
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
       className: (expValEquals('platform_editor_stable_editorview_classname', 'isEnabled', true) ? 'ProseMirror ' : '') + getUAPrefix(),
       key: "ProseMirror",
@@ -622,7 +637,7 @@ export function ReactEditorView(props) {
       id: EDIT_AREA_ID,
       "aria-describedby": assistiveDescribedBy,
       "data-editor-id": editorId.current
-    });
+    }));
   }, [handleEditorViewRef, props.intl]);
   const previousPreset = usePreviousState(preset);
   useLayoutEffect(() => {
@@ -641,6 +656,11 @@ export function ReactEditorView(props) {
       if (!disabled && shouldFocus && !isLivePageWithContent) {
         focusTimeoutId.current = handleEditorFocus(viewRef.current);
       }
+      if (expValEquals('platform_editor_no_cursor_on_edit_page_init', 'isEnabled', true) && fg('cc_editor_focus_before_editor_on_load')) {
+        if (!disabled && shouldFocus && !isEmptyDocument(viewRef.current.state.doc)) {
+          focusEditorElement(editorId.current);
+        }
+      }
     }
   }, [disabled, shouldFocus, previousDisabledState, __livePage]);
   useFireFullWidthEvent(nextAppearance, dispatchAnalyticsEvent);

package/dist/es2019/ui/ContentStyles/date.js CHANGED Viewed

@@ -3,9 +3,9 @@ import { css } from '@emotion/react';
 import { DateSharedCssClassName } from '@atlaskit/editor-common/styles';
 import { akEditorDeleteBorder, akEditorSelectedBorderSize, akEditorSelectedNodeClassName, getSelectionStyles, SelectionStyle } from '@atlaskit/editor-shared-styles';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
-export const dateVanillaStyles = css({
+export const dateNodeStyles = css({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-  "[data-prosemirror-node-view-type='vanilla'][data-prosemirror-node-name='date'] .date-lozenger-container span": {
+  "[data-prosemirror-node-name='date'] .date-lozenger-container span": {
     backgroundColor: "var(--ds-background-neutral, #091E420F)",
     color: "var(--ds-text, #172B4D)",
     borderRadius: "var(--ds-border-radius-100, 4px)",
@@ -17,16 +17,16 @@ export const dateVanillaStyles = css({
     cursor: 'unset'
   },
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-  "[data-prosemirror-node-view-type='vanilla'][data-prosemirror-node-name='date'] .date-lozenger-container span:hover": {
+  "[data-prosemirror-node-name='date'] .date-lozenger-container span:hover": {
     backgroundColor: "var(--ds-background-neutral-hovered, #091E4224)"
   },
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-  "[data-prosemirror-node-view-type='vanilla'][data-prosemirror-node-name='date'] .date-lozenger-container span.date-node-color-red": {
+  "[data-prosemirror-node-name='date'] .date-lozenger-container span.date-node-color-red": {
     backgroundColor: "var(--ds-background-accent-red-subtlest, #FFECEB)",
     color: "var(--ds-text-accent-red, #AE2E24)"
   },
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-  "[data-prosemirror-node-view-type='vanilla'][data-prosemirror-node-name='date'] .date-lozenger-container span.date-node-color-red:hover": {
+  "[data-prosemirror-node-name='date'] .date-lozenger-container span.date-node-color-red:hover": {
     backgroundColor: "var(--ds-background-accent-red-subtler, #FFD5D2)"
   }
 });

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

@@ -29,7 +29,7 @@ import { useThemeObserver } from '@atlaskit/tokens';
 import { InlineNodeViewSharedStyles } from '../../nodeviews/getInlineNodeViewProducer.styles';
 import { aiPanelStyles } from './ai-panels';
 import { codeBlockStyles } from './code-block';
-import { dateStyles, dateVanillaStyles } from './date';
+import { dateStyles, dateNodeStyles } from './date';
 import { expandStyles } from './expand';
 import { extensionStyles } from './extension';
 import { layoutStyles } from './layout';
@@ -438,8 +438,8 @@ const legacyContentStyles = props => css`
   ${annotationSharedStyles()}
   ${smartCardStyles()}
   ${fg('platform-linking-visual-refresh-v1') ? getSmartCardSharedStyles() : smartCardSharedStyles}
-  ${editorExperiment('platform_editor_vanilla_dom', true) ? dateVanillaStyles : null}
 	${dateStyles}
+  ${dateNodeStyles}
   ${embedCardStyles()}
   ${unsupportedStyles}
   ${resizerStyles}

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

@@ -259,7 +259,7 @@ const EditorContentContainer = /*#__PURE__*/React.forwardRef((props, ref) => {
     // 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) &&
+    linkingVisualRefreshV1Styles,
     // 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

package/dist/es2019/ui/EditorContentContainer/styles/dateStyles.js CHANGED Viewed

@@ -9,7 +9,7 @@ export const DateSharedCssClassName = {
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
 export const dateVanillaStyles = css({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors,@atlaskit/ui-styling-standard/no-unsafe-values
-  [`[data-prosemirror-node-view-type='vanilla'][data-prosemirror-node-name='date'] .${DateSharedCssClassName.DATE_WRAPPER} span`]: {
+  [`[data-prosemirror-node-name='date'] .${DateSharedCssClassName.DATE_WRAPPER} span`]: {
     backgroundColor: "var(--ds-background-neutral, #091E420F)",
     color: "var(--ds-text, #172B4D)",
     borderRadius: "var(--ds-border-radius-100, 4px)",
@@ -21,16 +21,16 @@ export const dateVanillaStyles = css({
     cursor: 'unset'
   },
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors,@atlaskit/ui-styling-standard/no-unsafe-values
-  [`[data-prosemirror-node-view-type='vanilla'][data-prosemirror-node-name='date'] .${DateSharedCssClassName.DATE_WRAPPER} span:hover`]: {
+  [`[data-prosemirror-node-name='date'] .${DateSharedCssClassName.DATE_WRAPPER} span:hover`]: {
     backgroundColor: "var(--ds-background-neutral-hovered, #091E4224)"
   },
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors,@atlaskit/ui-styling-standard/no-unsafe-values
-  [`[data-prosemirror-node-view-type='vanilla'][data-prosemirror-node-name='date'] .${DateSharedCssClassName.DATE_WRAPPER} span.date-node-color-red`]: {
+  [`[data-prosemirror-node-name='date'] .${DateSharedCssClassName.DATE_WRAPPER} span.date-node-color-red`]: {
     backgroundColor: "var(--ds-background-accent-red-subtlest, #FFECEB)",
     color: "var(--ds-text-accent-red, #AE2E24)"
   },
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors,@atlaskit/ui-styling-standard/no-unsafe-values
-  [`[data-prosemirror-node-view-type='vanilla'][data-prosemirror-node-name='date'] .${DateSharedCssClassName.DATE_WRAPPER} span.date-node-color-red:hover`]: {
+  [`[data-prosemirror-node-name='date'] .${DateSharedCssClassName.DATE_WRAPPER} span.date-node-color-red:hover`]: {
     backgroundColor: "var(--ds-background-accent-red-subtler, #FFD5D2)"
   }
 });

package/dist/es2019/ui/Toolbar/ToolbarWithSizeDetector.js CHANGED Viewed

@@ -10,11 +10,14 @@ import { css, jsx } from '@emotion/react';
 import { isSSR } from '@atlaskit/editor-common/core-utils';
 import { ToolbarSize } from '@atlaskit/editor-common/types';
 import { akEditorMobileMaxWidth } from '@atlaskit/editor-shared-styles';
+import { componentWithCondition } from '@atlaskit/platform-feature-flags-react';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { WidthObserver } from '@atlaskit/width-detector';
 import { isFullPage } from '../../utils/is-full-page';
 import { useElementWidth } from './hooks';
 import { Toolbar } from './Toolbar';
 import { toolbarSizeToWidth, widthToToolbarSize } from './toolbar-size';
+// Remove when platform_editor_core_static_emotion is cleaned up
 const toolbar = css({
   width: '100%',
   position: 'relative',
@@ -26,7 +29,20 @@ const toolbar = css({
     margin: `0 ${"var(--ds-space-200, 16px)"}`
   }
 });
-export const ToolbarWithSizeDetector = props => {
+// Rename to toolbar when platform_editor_core_static_emotion is cleaned up
+const staticToolbar = css({
+  width: '100%',
+  position: 'relative'
+  // The media query below has been commented out as akEditorMobileMaxWidth is 0px  and thus the styles are never applied.
+  // [`@media (max-width: ${akEditorMobileMaxWidth}px)`]: {
+  //   gridColumn: '1 / 2',
+  //   gridRow: 2,
+  //   width: 'calc(100% - 30px)',
+  //   margin: `0 ${token('space.200', '16px')}`,
+  // },
+});
+const DynamicStyleToolbarWithSizeDetector = props => {
   const ref = React.useRef(null);
   const [width, setWidth] = React.useState(undefined);
   const elementWidth = useElementWidth(ref, {
@@ -58,4 +74,51 @@ export const ToolbarWithSizeDetector = props => {
       ref: ref
     }))
   );
-};
+};
+const StaticStyleToolbarWithSizeDetector = props => {
+  const ref = React.useRef(null);
+  const [width, setWidth] = React.useState(undefined);
+  const elementWidth = useElementWidth(ref, {
+    skip: typeof width !== 'undefined'
+  });
+  const defaultToolbarSize = isSSR() && isFullPage(props.appearance) ? ToolbarSize.XXL : undefined;
+  const toolbarSize = typeof width === 'undefined' && typeof elementWidth === 'undefined' ? defaultToolbarSize :
+  // Ignored via go/ees005
+  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+  widthToToolbarSize(width || elementWidth, props.appearance);
+  const minWidthValue = useMemo(() => {
+    if (props.hasMinWidth) {
+      const toolbarWidth = isFullPage(props.appearance) && props.twoLineEditorToolbar ? ToolbarSize.S : ToolbarSize.M;
+      return toolbarSizeToWidth(toolbarWidth, props.appearance);
+    } else {
+      return 254;
+    }
+  }, [props.appearance, props.hasMinWidth, props.twoLineEditorToolbar]);
+  return jsx("div", {
+    css: staticToolbar,
+    style: {
+      minWidth: `${minWidthValue}px`
+    }
+  }, jsx(WidthObserver, {
+    setWidth: setWidth
+  }), props.editorView && toolbarSize ? jsx(Toolbar, {
+    toolbarSize: toolbarSize,
+    items: props.items,
+    editorView: props.editorView,
+    editorActions: props.editorActions,
+    eventDispatcher: props.eventDispatcher,
+    providerFactory: props.providerFactory,
+    appearance: props.appearance,
+    popupsMountPoint: props.popupsMountPoint,
+    popupsBoundariesElement: props.popupsBoundariesElement,
+    popupsScrollableElement: props.popupsScrollableElement,
+    disabled: props.disabled,
+    dispatchAnalyticsEvent: props.dispatchAnalyticsEvent,
+    containerElement: props.containerElement,
+    hasMinWidth: props.hasMinWidth,
+    twoLineEditorToolbar: props.twoLineEditorToolbar
+  }) : jsx("div", {
+    ref: ref
+  }));
+};
+export const ToolbarWithSizeDetector = componentWithCondition(() => expValEquals('platform_editor_core_static_emotion_non_central', 'isEnabled', true), StaticStyleToolbarWithSizeDetector, DynamicStyleToolbarWithSizeDetector);

package/dist/es2019/version-wrapper.js CHANGED Viewed

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

package/dist/esm/create-editor/ReactEditorView/focusEditorElement.js ADDED Viewed

@@ -0,0 +1,7 @@
+export function focusEditorElement(editorId) {
+  var parentElement = document.querySelector("[data-focus-id=\"".concat(editorId, "\"]"));
+  if (!(parentElement instanceof HTMLElement)) {
+    return;
+  }
+  parentElement.focus();
+}

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

@@ -38,6 +38,7 @@ import { createErrorReporter, createPMPlugins, processPluginsList } from './crea
 import createPluginsList from './create-plugins-list';
 import { createSchema } from './create-schema';
 import { editorMessages } from './messages';
+import { focusEditorElement } from './ReactEditorView/focusEditorElement';
 import { getUAPrefix } from './ReactEditorView/getUAPrefix';
 import { handleEditorFocus } from './ReactEditorView/handleEditorFocus';
 import { useDispatchTransaction } from './ReactEditorView/useDispatchTransaction';
@@ -484,6 +485,11 @@ export function ReactEditorView(props) {
           if (!liveDocWithContent || !fg('platform_editor_no_cursor_on_live_doc_init')) {
             focusTimeoutId.current = handleEditorFocus(editorView);
           }
+          if (expValEquals('platform_editor_no_cursor_on_edit_page_init', 'isEnabled', true) && fg('cc_editor_focus_before_editor_on_load')) {
+            if (!disabled && shouldFocus && !isEmptyDocument(editorView.state.doc)) {
+              focusEditorElement(editorId.current);
+            }
+          }
         }
       } else {
         var _liveDocWithContent = (__livePage || expValEquals('platform_editor_no_cursor_on_edit_page_init', 'isEnabled', true)) && !isEmptyDocument(editorView.state.doc);
@@ -492,7 +498,7 @@ export function ReactEditorView(props) {
         }
       }
     }
-  }, [editorView, shouldFocus, __livePage, mitigateScrollJump]);
+  }, [editorView, shouldFocus, __livePage, mitigateScrollJump, disabled]);
   var scrollElement = React.useRef();
   var possibleListeners = React.useRef([]);
   React.useEffect(function () {
@@ -609,6 +615,11 @@ export function ReactEditorView(props) {
               if (!isLivePageWithContent && shouldFocus && view.props.editable && view.props.editable(view.state)) {
                 focusTimeoutId.current = handleEditorFocus(view);
               }
+              if (expValEquals('platform_editor_no_cursor_on_edit_page_init', 'isEnabled', true) && fg('cc_editor_focus_before_editor_on_load')) {
+                if (shouldFocus && view.props.editable && view.props.editable(view.state) && !isEmptyDocument(view.state.doc)) {
+                  focusEditorElement(editorId.current);
+                }
+              }
             }
           } else {
             var _isLivePageWithContent = (__livePage || expValEquals('platform_editor_no_cursor_on_edit_page_init', 'isEnabled', true)) && !isEmptyDocument(view.state.doc) && fg('platform_editor_no_cursor_on_live_doc_init');
@@ -648,7 +659,11 @@ export function ReactEditorView(props) {
     }
   }, [createEditorView, onEditorCreated, eventDispatcher, shouldFocus, __livePage, onEditorDestroyed, handleAnalyticsEvent, mitigateScrollJump]);
   var createEditor = useCallback(function (assistiveLabel, assistiveDescribedBy) {
-    return /*#__PURE__*/React.createElement("div", {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, fg('cc_editor_focus_before_editor_on_load') && /*#__PURE__*/React.createElement("div", {
+      tabIndex: -1,
+      "data-focus-id": editorId.current,
+      "data-testid": "react-editor-view-inital-focus-element"
+    }), /*#__PURE__*/React.createElement("div", {
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
       className: (expValEquals('platform_editor_stable_editorview_classname', 'isEnabled', true) ? 'ProseMirror ' : '') + getUAPrefix(),
       key: "ProseMirror",
@@ -665,7 +680,7 @@ export function ReactEditorView(props) {
       id: EDIT_AREA_ID,
       "aria-describedby": assistiveDescribedBy,
       "data-editor-id": editorId.current
-    });
+    }));
   }, [handleEditorViewRef, props.intl]);
   var previousPreset = usePreviousState(preset);
   useLayoutEffect(function () {
@@ -686,6 +701,11 @@ export function ReactEditorView(props) {
       if (!disabled && shouldFocus && !isLivePageWithContent) {
         focusTimeoutId.current = handleEditorFocus(viewRef.current);
       }
+      if (expValEquals('platform_editor_no_cursor_on_edit_page_init', 'isEnabled', true) && fg('cc_editor_focus_before_editor_on_load')) {
+        if (!disabled && shouldFocus && !isEmptyDocument(viewRef.current.state.doc)) {
+          focusEditorElement(editorId.current);
+        }
+      }
     }
   }, [disabled, shouldFocus, previousDisabledState, __livePage]);
   useFireFullWidthEvent(nextAppearance, dispatchAnalyticsEvent);

package/dist/esm/ui/ContentStyles/date.js CHANGED Viewed

@@ -5,9 +5,9 @@ import { css } from '@emotion/react';
 import { DateSharedCssClassName } from '@atlaskit/editor-common/styles';
 import { akEditorDeleteBorder, akEditorSelectedBorderSize, akEditorSelectedNodeClassName, getSelectionStyles, SelectionStyle } from '@atlaskit/editor-shared-styles';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
-export var dateVanillaStyles = css({
+export var dateNodeStyles = css({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-  "[data-prosemirror-node-view-type='vanilla'][data-prosemirror-node-name='date'] .date-lozenger-container span": {
+  "[data-prosemirror-node-name='date'] .date-lozenger-container span": {
     backgroundColor: "var(--ds-background-neutral, #091E420F)",
     color: "var(--ds-text, #172B4D)",
     borderRadius: "var(--ds-border-radius-100, 4px)",
@@ -19,16 +19,16 @@ export var dateVanillaStyles = css({
     cursor: 'unset'
   },
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-  "[data-prosemirror-node-view-type='vanilla'][data-prosemirror-node-name='date'] .date-lozenger-container span:hover": {
+  "[data-prosemirror-node-name='date'] .date-lozenger-container span:hover": {
     backgroundColor: "var(--ds-background-neutral-hovered, #091E4224)"
   },
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-  "[data-prosemirror-node-view-type='vanilla'][data-prosemirror-node-name='date'] .date-lozenger-container span.date-node-color-red": {
+  "[data-prosemirror-node-name='date'] .date-lozenger-container span.date-node-color-red": {
     backgroundColor: "var(--ds-background-accent-red-subtlest, #FFECEB)",
     color: "var(--ds-text-accent-red, #AE2E24)"
   },
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-  "[data-prosemirror-node-view-type='vanilla'][data-prosemirror-node-name='date'] .date-lozenger-container span.date-node-color-red:hover": {
+  "[data-prosemirror-node-name='date'] .date-lozenger-container span.date-node-color-red:hover": {
     backgroundColor: "var(--ds-background-accent-red-subtler, #FFD5D2)"
   }
 });

package/dist/esm/ui/ContentStyles/index.js CHANGED Viewed

@@ -31,7 +31,7 @@ import { useThemeObserver } from '@atlaskit/tokens';
 import { InlineNodeViewSharedStyles } from '../../nodeviews/getInlineNodeViewProducer.styles';
 import { aiPanelStyles } from './ai-panels';
 import { codeBlockStyles } from './code-block';
-import { dateStyles, dateVanillaStyles } from './date';
+import { dateStyles, dateNodeStyles } from './date';
 import { expandStyles } from './expand';
 import { extensionStyles } from './extension';
 import { layoutStyles } from './layout';
@@ -145,7 +145,7 @@ var akEditorBreakpointForSmallDevice = "1266px";
 // Under editor experiment platform_editor_core_static_emotion
 // If you are making changes to this file, please make sure to update in EditorContentContainer.tsx as well
 var legacyContentStyles = function legacyContentStyles(props) {
-  return css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n\t--ak-editor--default-gutter-padding: ", "px;\n\t/* 52 is from akEditorGutterPaddingDynamic via editor-shared-styles */\n\t--ak-editor--large-gutter-padding: ", "px;\n\t--ak-editor--default-layout-width: ", "px;\n\t--ak-editor--full-width-layout-width: ", "px;\n\t/* calculate editor line length, 100cqw is the editor container width */\n\t--ak-editor--line-length: min(\n\t\tcalc(100cqw - var(--ak-editor--large-gutter-padding) * 2),\n\t\tvar(--ak-editor--default-layout-width)\n\t);\n\t--ak-editor--breakout-wide-layout-width: ", "px;\n\t--ak-editor--breakout-full-page-guttering-padding: calc(\n\t\tvar(--ak-editor--large-gutter-padding) * 2 + var(--ak-editor--default-gutter-padding)\n\t);\n\n\t.fabric-editor--full-width-mode {\n\t\t--ak-editor--line-length: min(\n\t\t\tcalc(100cqw - var(--ak-editor--large-gutter-padding) * 2),\n\t\t\tvar(--ak-editor--full-width-layout-width)\n\t\t);\n\t}\n\n\t.ProseMirror {\n\t\t--ak-editor-max-container-width: calc(100cqw - var(--ak-editor--large-gutter-padding));\n\t}\n\n\t/* We can't allow nodes that are inside other nodes to bleed from the parent container */\n\t.ProseMirror > div[data-prosemirror-node-block] [data-prosemirror-node-block] {\n\t\t--ak-editor-max-container-width: 100%;\n\t}\n\n\t/* container editor-area is defined in platform/packages/editor/editor-core/src/ui/Appearance/FullPage/StyledComponents.ts */\n\t@container editor-area (width >= ", ") {\n\t\t.ProseMirror {\n\t\t\t--ak-editor--breakout-wide-layout-width: ", "px;\n\t\t}\n\t}\n\n\t.ProseMirror {\n\t\toutline: none;\n\t\tfont-size: ", "px;\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t}\n\n\t.ProseMirror-hideselection *::selection {\n\t\tbackground: transparent;\n\t}\n\n\t.ProseMirror-hideselection *::-moz-selection {\n\t\tbackground: transparent;\n\t}\n\n\t/**\n\t * This prosemirror css style: https://github.com/ProseMirror/prosemirror-view/blob/f37ebb29befdbde3cd194fe13fe17b78e743d2f2/style/prosemirror.css#L24\n\t *\n\t * 1. Merge and Release platform_editor_hide_cursor_when_pm_hideselection\n\t * 2. Cleanup duplicated style from platform_editor_advanced_code_blocks\n\t *    https://product-fabric.atlassian.net/browse/ED-26331\n\t */\n\t", "\n\n\t/* This prosemirror css style: https://github.com/ProseMirror/prosemirror-view/blob/f37ebb29befdbde3cd194fe13fe17b78e743d2f2/style/prosemirror.css#L24 */\n\t", "\n\n\t.ProseMirror-selectednode {\n\t\toutline: none;\n\t}\n\n\t.ProseMirror-selectednode:empty {\n\t\toutline: 2px solid ", ";\n\t}\n\n\t.ProseMirror.ProseMirror-focused:has(.ProseMirror-mark-boundary-cursor) {\n\t\tcaret-color: transparent;\n\t}\n\t.ProseMirror:not(.ProseMirror-focused) .ProseMirror-mark-boundary-cursor {\n\t\tdisplay: none;\n\t}\n\n\t", "\n\t", "\n\t", "\n\t", "\n\t", "\n\t", "\n\n  ", "\n\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", ";\n\t", "\n\t", "\n\t", "\n\t", "\n\t", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  /* Switch between the two icons based on the visual refresh feature gate */\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n\t", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n\n  .panelView-content-wrap {\n\t\tbox-sizing: border-box;\n\t}\n\n\t.mediaGroupView-content-wrap ul {\n\t\tpadding: 0;\n\t}\n\n\t/** Needed to override any cleared floats, e.g. image wrapping */\n\n\tdiv.fabric-editor-block-mark[class^='fabric-editor-align'] {\n\t\tclear: none !important;\n\t}\n\n\t.fabric-editor-align-end {\n\t\ttext-align: right;\n\t}\n\n\t.fabric-editor-align-start {\n\t\ttext-align: left;\n\t}\n\n\t.fabric-editor-align-center {\n\t\ttext-align: center;\n\t}\n\n\t/* For FullPage only when inside a table\n\tRelated code all lives inside: packages/editor/editor-core/src/ui/Appearance/FullPage/StyledComponents.ts\n\tIn the \"editorContentAreaContainerStyle\" function */\n\t.fabric-editor--full-width-mode {\n\t\t.pm-table-container {\n\t\t\t.code-block,\n\t\t\t.extension-container,\n\t\t\t.multiBodiedExtension--container {\n\t\t\t\tmax-width: 100%;\n\t\t\t}\n\t\t}\n\t}\n\n\t.pm-table-header-content-wrap :not(.fabric-editor-alignment),\n\t.pm-table-header-content-wrap :not(p, .fabric-editor-block-mark) + div.fabric-editor-block-mark,\n\t.pm-table-cell-content-wrap :not(p, .fabric-editor-block-mark) + div.fabric-editor-block-mark {\n\t\tp:first-of-type {\n\t\t\tmargin-top: 0;\n\t\t}\n\t}\n\t.pm-table-cell-content-wrap .mediaGroupView-content-wrap {\n\t\tclear: both;\n\t}\n\n\t.hyperlink-floating-toolbar,\n\t.", " {\n\t\tpadding: 0;\n\t}\n\n\t/* Legacy Link icon in the Atlaskit package\n     is bigger than the others, new ADS icon does not have this issue\n  */\n\t", "\n"])), akEditorGutterPadding, akEditorGutterPaddingDynamic(), akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth, akEditorCalculatedWideLayoutWidthSmallViewport, akEditorBreakpointForSmallDevice, akEditorCalculatedWideLayoutWidth, editorFontSize({
+  return css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n\t--ak-editor--default-gutter-padding: ", "px;\n\t/* 52 is from akEditorGutterPaddingDynamic via editor-shared-styles */\n\t--ak-editor--large-gutter-padding: ", "px;\n\t--ak-editor--default-layout-width: ", "px;\n\t--ak-editor--full-width-layout-width: ", "px;\n\t/* calculate editor line length, 100cqw is the editor container width */\n\t--ak-editor--line-length: min(\n\t\tcalc(100cqw - var(--ak-editor--large-gutter-padding) * 2),\n\t\tvar(--ak-editor--default-layout-width)\n\t);\n\t--ak-editor--breakout-wide-layout-width: ", "px;\n\t--ak-editor--breakout-full-page-guttering-padding: calc(\n\t\tvar(--ak-editor--large-gutter-padding) * 2 + var(--ak-editor--default-gutter-padding)\n\t);\n\n\t.fabric-editor--full-width-mode {\n\t\t--ak-editor--line-length: min(\n\t\t\tcalc(100cqw - var(--ak-editor--large-gutter-padding) * 2),\n\t\t\tvar(--ak-editor--full-width-layout-width)\n\t\t);\n\t}\n\n\t.ProseMirror {\n\t\t--ak-editor-max-container-width: calc(100cqw - var(--ak-editor--large-gutter-padding));\n\t}\n\n\t/* We can't allow nodes that are inside other nodes to bleed from the parent container */\n\t.ProseMirror > div[data-prosemirror-node-block] [data-prosemirror-node-block] {\n\t\t--ak-editor-max-container-width: 100%;\n\t}\n\n\t/* container editor-area is defined in platform/packages/editor/editor-core/src/ui/Appearance/FullPage/StyledComponents.ts */\n\t@container editor-area (width >= ", ") {\n\t\t.ProseMirror {\n\t\t\t--ak-editor--breakout-wide-layout-width: ", "px;\n\t\t}\n\t}\n\n\t.ProseMirror {\n\t\toutline: none;\n\t\tfont-size: ", "px;\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t}\n\n\t.ProseMirror-hideselection *::selection {\n\t\tbackground: transparent;\n\t}\n\n\t.ProseMirror-hideselection *::-moz-selection {\n\t\tbackground: transparent;\n\t}\n\n\t/**\n\t * This prosemirror css style: https://github.com/ProseMirror/prosemirror-view/blob/f37ebb29befdbde3cd194fe13fe17b78e743d2f2/style/prosemirror.css#L24\n\t *\n\t * 1. Merge and Release platform_editor_hide_cursor_when_pm_hideselection\n\t * 2. Cleanup duplicated style from platform_editor_advanced_code_blocks\n\t *    https://product-fabric.atlassian.net/browse/ED-26331\n\t */\n\t", "\n\n\t/* This prosemirror css style: https://github.com/ProseMirror/prosemirror-view/blob/f37ebb29befdbde3cd194fe13fe17b78e743d2f2/style/prosemirror.css#L24 */\n\t", "\n\n\t.ProseMirror-selectednode {\n\t\toutline: none;\n\t}\n\n\t.ProseMirror-selectednode:empty {\n\t\toutline: 2px solid ", ";\n\t}\n\n\t.ProseMirror.ProseMirror-focused:has(.ProseMirror-mark-boundary-cursor) {\n\t\tcaret-color: transparent;\n\t}\n\t.ProseMirror:not(.ProseMirror-focused) .ProseMirror-mark-boundary-cursor {\n\t\tdisplay: none;\n\t}\n\n\t", "\n\t", "\n\t", "\n\t", "\n\t", "\n\t", "\n\n  ", "\n\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", ";\n\t", "\n\t", "\n\t", "\n\t", "\n\t", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  /* Switch between the two icons based on the visual refresh feature gate */\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n\t", "\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\tRelated code all lives inside: packages/editor/editor-core/src/ui/Appearance/FullPage/StyledComponents.ts\n\tIn the \"editorContentAreaContainerStyle\" function */\n\t.fabric-editor--full-width-mode {\n\t\t.pm-table-container {\n\t\t\t.code-block,\n\t\t\t.extension-container,\n\t\t\t.multiBodiedExtension--container {\n\t\t\t\tmax-width: 100%;\n\t\t\t}\n\t\t}\n\t}\n\n\t.pm-table-header-content-wrap :not(.fabric-editor-alignment),\n\t.pm-table-header-content-wrap :not(p, .fabric-editor-block-mark) + div.fabric-editor-block-mark,\n\t.pm-table-cell-content-wrap :not(p, .fabric-editor-block-mark) + div.fabric-editor-block-mark {\n\t\tp:first-of-type {\n\t\t\tmargin-top: 0;\n\t\t}\n\t}\n\t.pm-table-cell-content-wrap .mediaGroupView-content-wrap {\n\t\tclear: both;\n\t}\n\n\t.hyperlink-floating-toolbar,\n\t.", " {\n\t\tpadding: 0;\n\t}\n\n\t/* Legacy Link icon in the Atlaskit package\n     is bigger than the others, new ADS icon does not have this issue\n  */\n\t", "\n"])), akEditorGutterPadding, akEditorGutterPaddingDynamic(), akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth, akEditorCalculatedWideLayoutWidthSmallViewport, akEditorBreakpointForSmallDevice, akEditorCalculatedWideLayoutWidth, editorFontSize({
     theme: props.theme
   }), whitespaceSharedStyles, paragraphSharedStyles(props.typographyTheme), listsSharedStyles, indentationSharedStyles, shadowSharedStyle, InlineNodeViewSharedStyles, fg('platform_editor_hide_cursor_when_pm_hideselection') ? css(_templateObject0 || (_templateObject0 = _taggedTemplateLiteral(["\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, editorExperiment('platform_editor_advanced_code_blocks', true) ? css(_templateObject1 || (_templateObject1 = _taggedTemplateLiteral(["\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)", fg('platform_editor_fix_floating_toolbar_focus') ? firstFloatingToolbarButtonStyles : null, placeholderTextStyles, fg('platform_editor_system_fake_text_highlight_colour') && placeholderTextStyles_fg_platform_editor_system_fake_text_highlight_colour, placeholderStyles, editorExperiment('platform_editor_controls', 'variant1') ? placeholderOverflowStyles : null, editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_quick_insert_placeholder') ? placeholderWrapStyles : null, codeBlockStyles(), blocktypeStyles(props.typographyTheme), codeMarkSharedStyles(), textColorStyles, backgroundColorStyles(), listsStyles, ruleStyles(), mediaStyles(), layoutStyles(props.viewMode), fg('confluence_team_presence_scroll_to_pointer') ? telepointerStyle : telepointerStyleWithInitialOnly, gapCursorStyles, panelStyles(), mentionsStyles, editorExperiment('platform_editor_vanilla_dom', true, {
     exposure: false
@@ -161,7 +161,7 @@ var legacyContentStyles = function legacyContentStyles(props) {
     exposure: false
   }) && fg('platform-visual-refresh-icons') && vanillaDecisionIconWithVisualRefresh, editorExperiment('platform_editor_vanilla_dom', true, {
     exposure: false
-  }) && !fg('platform-visual-refresh-icons') && vanillaDecisionIconWithoutVisualRefresh, statusStyles, editorExperiment('platform_editor_vanilla_dom', true) ? vanillaStatusStyles() : null, annotationSharedStyles(), smartCardStyles(), fg('platform-linking-visual-refresh-v1') ? getSmartCardSharedStyles() : smartCardSharedStyles, editorExperiment('platform_editor_vanilla_dom', true) ? dateVanillaStyles : null, dateStyles, embedCardStyles(), unsupportedStyles, resizerStyles, pragmaticResizerStyles(), pragmaticStylesLayoutFirstNodeResizeHandleFix(), pragmaticResizerStylesForTooltip(), aiPanelStyles(props.colorMode), firstBlockNodeStylesNew, MediaSharedClassNames.FLOATING_TOOLBAR_COMPONENT, !fg('platform-visual-refresh-icons') ? css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\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);
+  }) && !fg('platform-visual-refresh-icons') && vanillaDecisionIconWithoutVisualRefresh, statusStyles, editorExperiment('platform_editor_vanilla_dom', true) ? vanillaStatusStyles() : null, annotationSharedStyles(), smartCardStyles(), fg('platform-linking-visual-refresh-v1') ? getSmartCardSharedStyles() : smartCardSharedStyles, dateStyles, dateNodeStyles, embedCardStyles(), unsupportedStyles, resizerStyles, pragmaticResizerStyles(), pragmaticStylesLayoutFirstNodeResizeHandleFix(), pragmaticResizerStylesForTooltip(), aiPanelStyles(props.colorMode), firstBlockNodeStylesNew, MediaSharedClassNames.FLOATING_TOOLBAR_COMPONENT, !fg('platform-visual-refresh-icons') ? css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\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);
 };
 export var createEditorContentStyle = function createEditorContentStyle(styles) {
   return /*#__PURE__*/React.forwardRef(function (props, ref) {

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

@@ -256,7 +256,7 @@ var EditorContentContainer = /*#__PURE__*/React.forwardRef(function (props, ref)
     // 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) &&
+    linkingVisualRefreshV1Styles,
     // 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

package/dist/esm/ui/EditorContentContainer/styles/dateStyles.js CHANGED Viewed

@@ -8,7 +8,7 @@ export var DateSharedCssClassName = {
 };
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
-export var dateVanillaStyles = css(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "[data-prosemirror-node-view-type='vanilla'][data-prosemirror-node-name='date'] .".concat(DateSharedCssClassName.DATE_WRAPPER, " span"), {
+export var dateVanillaStyles = css(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "[data-prosemirror-node-name='date'] .".concat(DateSharedCssClassName.DATE_WRAPPER, " span"), {
   backgroundColor: "var(--ds-background-neutral, #091E420F)",
   color: "var(--ds-text, #172B4D)",
   borderRadius: "var(--ds-border-radius-100, 4px)",
@@ -18,12 +18,12 @@ export var dateVanillaStyles = css(_defineProperty(_defineProperty(_defineProper
   transition: 'background 0.3s',
   whiteSpace: 'nowrap',
   cursor: 'unset'
-}), "[data-prosemirror-node-view-type='vanilla'][data-prosemirror-node-name='date'] .".concat(DateSharedCssClassName.DATE_WRAPPER, " span:hover"), {
+}), "[data-prosemirror-node-name='date'] .".concat(DateSharedCssClassName.DATE_WRAPPER, " span:hover"), {
   backgroundColor: "var(--ds-background-neutral-hovered, #091E4224)"
-}), "[data-prosemirror-node-view-type='vanilla'][data-prosemirror-node-name='date'] .".concat(DateSharedCssClassName.DATE_WRAPPER, " span.date-node-color-red"), {
+}), "[data-prosemirror-node-name='date'] .".concat(DateSharedCssClassName.DATE_WRAPPER, " span.date-node-color-red"), {
   backgroundColor: "var(--ds-background-accent-red-subtlest, #FFECEB)",
   color: "var(--ds-text-accent-red, #AE2E24)"
-}), "[data-prosemirror-node-view-type='vanilla'][data-prosemirror-node-name='date'] .".concat(DateSharedCssClassName.DATE_WRAPPER, " span.date-node-color-red:hover"), {
+}), "[data-prosemirror-node-name='date'] .".concat(DateSharedCssClassName.DATE_WRAPPER, " span.date-node-color-red:hover"), {
   backgroundColor: "var(--ds-background-accent-red-subtler, #FFD5D2)"
 }));

package/dist/esm/ui/Toolbar/ToolbarWithSizeDetector.js CHANGED Viewed

@@ -12,11 +12,14 @@ import { css, jsx } from '@emotion/react';
 import { isSSR } from '@atlaskit/editor-common/core-utils';
 import { ToolbarSize } from '@atlaskit/editor-common/types';
 import { akEditorMobileMaxWidth } from '@atlaskit/editor-shared-styles';
+import { componentWithCondition } from '@atlaskit/platform-feature-flags-react';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { WidthObserver } from '@atlaskit/width-detector';
 import { isFullPage } from '../../utils/is-full-page';
 import { useElementWidth } from './hooks';
 import { Toolbar } from './Toolbar';
 import { toolbarSizeToWidth, widthToToolbarSize } from './toolbar-size';
+// Remove when platform_editor_core_static_emotion is cleaned up
 var toolbar = css(_defineProperty({
   width: '100%',
   position: 'relative'
@@ -26,7 +29,20 @@ var toolbar = css(_defineProperty({
   width: 'calc(100% - 30px)',
   margin: "0 ".concat("var(--ds-space-200, 16px)")
 }));
-export var ToolbarWithSizeDetector = function ToolbarWithSizeDetector(props) {
+// Rename to toolbar when platform_editor_core_static_emotion is cleaned up
+var staticToolbar = css({
+  width: '100%',
+  position: 'relative'
+  // The media query below has been commented out as akEditorMobileMaxWidth is 0px  and thus the styles are never applied.
+  // [`@media (max-width: ${akEditorMobileMaxWidth}px)`]: {
+  //   gridColumn: '1 / 2',
+  //   gridRow: 2,
+  //   width: 'calc(100% - 30px)',
+  //   margin: `0 ${token('space.200', '16px')}`,
+  // },
+});
+var DynamicStyleToolbarWithSizeDetector = function DynamicStyleToolbarWithSizeDetector(props) {
   var ref = React.useRef(null);
   var _React$useState = React.useState(undefined),
     _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -61,4 +77,56 @@ export var ToolbarWithSizeDetector = function ToolbarWithSizeDetector(props) {
       ref: ref
     }))
   );
-};
+};
+var StaticStyleToolbarWithSizeDetector = function StaticStyleToolbarWithSizeDetector(props) {
+  var ref = React.useRef(null);
+  var _React$useState3 = React.useState(undefined),
+    _React$useState4 = _slicedToArray(_React$useState3, 2),
+    width = _React$useState4[0],
+    setWidth = _React$useState4[1];
+  var elementWidth = useElementWidth(ref, {
+    skip: typeof width !== 'undefined'
+  });
+  var defaultToolbarSize = isSSR() && isFullPage(props.appearance) ? ToolbarSize.XXL : undefined;
+  var toolbarSize = typeof width === 'undefined' && typeof elementWidth === 'undefined' ? defaultToolbarSize :
+  // Ignored via go/ees005
+  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+  widthToToolbarSize(width || elementWidth, props.appearance);
+  var minWidthValue = useMemo(function () {
+    if (props.hasMinWidth) {
+      var toolbarWidth = isFullPage(props.appearance) && props.twoLineEditorToolbar ? ToolbarSize.S : ToolbarSize.M;
+      return toolbarSizeToWidth(toolbarWidth, props.appearance);
+    } else {
+      return 254;
+    }
+  }, [props.appearance, props.hasMinWidth, props.twoLineEditorToolbar]);
+  return jsx("div", {
+    css: staticToolbar,
+    style: {
+      minWidth: "".concat(minWidthValue, "px")
+    }
+  }, jsx(WidthObserver, {
+    setWidth: setWidth
+  }), props.editorView && toolbarSize ? jsx(Toolbar, {
+    toolbarSize: toolbarSize,
+    items: props.items,
+    editorView: props.editorView,
+    editorActions: props.editorActions,
+    eventDispatcher: props.eventDispatcher,
+    providerFactory: props.providerFactory,
+    appearance: props.appearance,
+    popupsMountPoint: props.popupsMountPoint,
+    popupsBoundariesElement: props.popupsBoundariesElement,
+    popupsScrollableElement: props.popupsScrollableElement,
+    disabled: props.disabled,
+    dispatchAnalyticsEvent: props.dispatchAnalyticsEvent,
+    containerElement: props.containerElement,
+    hasMinWidth: props.hasMinWidth,
+    twoLineEditorToolbar: props.twoLineEditorToolbar
+  }) : jsx("div", {
+    ref: ref
+  }));
+};
+export var ToolbarWithSizeDetector = componentWithCondition(function () {
+  return expValEquals('platform_editor_core_static_emotion_non_central', 'isEnabled', true);
+}, StaticStyleToolbarWithSizeDetector, DynamicStyleToolbarWithSizeDetector);

package/dist/esm/version-wrapper.js CHANGED Viewed

@@ -1,2 +1,2 @@
 export var name = "@atlaskit/editor-core";
-export var version = "208.0.1";
+export var version = "208.1.1";

package/dist/types/create-editor/ReactEditorView/focusEditorElement.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export declare function focusEditorElement(editorId: string): void;

package/dist/types/ui/ContentStyles/date.d.ts CHANGED Viewed

@@ -1,2 +1,2 @@
-export declare const dateVanillaStyles: import("@emotion/react").SerializedStyles;
+export declare const dateNodeStyles: import("@emotion/react").SerializedStyles;
 export declare const dateStyles: import("@emotion/react").SerializedStyles;

package/dist/types/ui/Toolbar/ToolbarWithSizeDetector.d.ts CHANGED Viewed

@@ -1,3 +1,7 @@
-import { jsx } from '@emotion/react';
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import React from 'react';
 import type { ToolbarWithSizeDetectorProps } from './toolbar-types';
-export declare const ToolbarWithSizeDetector: (props: ToolbarWithSizeDetectorProps) => jsx.JSX.Element;
+export declare const ToolbarWithSizeDetector: React.FC<ToolbarWithSizeDetectorProps>;

package/dist/types-ts4.5/create-editor/ReactEditorView/focusEditorElement.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export declare function focusEditorElement(editorId: string): void;

package/dist/types-ts4.5/ui/ContentStyles/date.d.ts CHANGED Viewed

@@ -1,2 +1,2 @@
-export declare const dateVanillaStyles: import("@emotion/react").SerializedStyles;
+export declare const dateNodeStyles: import("@emotion/react").SerializedStyles;
 export declare const dateStyles: import("@emotion/react").SerializedStyles;

package/dist/types-ts4.5/ui/Toolbar/ToolbarWithSizeDetector.d.ts CHANGED Viewed

@@ -1,3 +1,7 @@
-import { jsx } from '@emotion/react';
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import React from 'react';
 import type { ToolbarWithSizeDetectorProps } from './toolbar-types';
-export declare const ToolbarWithSizeDetector: (props: ToolbarWithSizeDetectorProps) => jsx.JSX.Element;
+export declare const ToolbarWithSizeDetector: React.FC<ToolbarWithSizeDetectorProps>;

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-core",
-	"version": "208.1.0",
+	"version": "208.1.2",
 	"description": "A package contains Atlassian editor core functionality",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -105,7 +105,7 @@
 		"@atlaskit/primitives": "^14.9.0",
 		"@atlaskit/renderer": "^119.0.0",
 		"@atlaskit/section-message": "^8.2.0",
-		"@atlaskit/smart-card": "^38.11.0",
+		"@atlaskit/smart-card": "^38.12.0",
 		"@atlaskit/synchrony-test-helpers": "workspace:^",
 		"@atlaskit/toggle": "^15.0.0",
 		"@atlaskit/util-data-test": "^18.0.0",
@@ -552,10 +552,6 @@
 			"type": "boolean",
 			"referenceOnly": true
 		},
-		"platform_editor_controls_patch_7": {
-			"type": "boolean",
-			"referenceOnly": true
-		},
 		"platform_editor_controls_patch_9": {
 			"type": "boolean",
 			"referenceOnly": true
@@ -632,6 +628,9 @@
 		},
 		"platform_editor_system_fake_text_highlight_colour": {
 			"type": "boolean"
+		},
+		"cc_editor_focus_before_editor_on_load": {
+			"type": "boolean"
 		}
 	},
 	"stricter": {