@atlaskit/editor-core 210.1.3 → 210.1.4

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @atlaskit/editor-core
 
+## 210.1.4
+
+### Patch Changes
+
+- [`286abb4d35eba`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/286abb4d35eba) -
+  [ux] [ED-28960] Finish full page primary toolbar migration
+
+  - Align with design update (separator, gap, height, icon size)
+  - Add keyboard shortcut to focus toolbar and arrow key navigation
+  - Address accessibility
+
+- Updated dependencies
+
 ## 210.1.3
 
 ### Patch Changes

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

@@ -9,6 +9,7 @@ exports.FullPageEditor = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
 var _react2 = require("@emotion/react");
+var _reactIntlNext = require("react-intl-next");
 var _browser = require("@atlaskit/editor-common/browser");
 var _hooks = require("@atlaskit/editor-common/hooks");
 var _ui = require("@atlaskit/editor-common/ui");
@@ -171,12 +172,16 @@ var FullPageEditor = exports.FullPageEditor = function FullPageEditor(props) {
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
       '--ak-editor-fullpage-toolbar-height': (0, _editorSharedStyles.FULL_PAGE_EDITOR_TOOLBAR_HEIGHT)()
     }
-  }, !isEditorToolbarHidden && ((0, _expValEquals.expValEquals)('platform_editor_toolbar_aifc', 'isEnabled', true) ? (0, _react2.jsx)(_FullPageToolbarNext.FullPageToolbarNext, {
+  }, !isEditorToolbarHidden && ((0, _expValEquals.expValEquals)('platform_editor_toolbar_aifc', 'isEnabled', true) ? (0, _react2.jsx)(_reactIntlNext.IntlProvider, {
+    locale: "en"
+  }, (0, _react2.jsx)(_FullPageToolbarNext.FullPageToolbarNext, {
     toolbarDockingPosition: toolbarDockingPosition !== null && toolbarDockingPosition !== void 0 ? toolbarDockingPosition : toolbarDocking,
     beforeIcon: props.primaryToolbarIconBefore,
     editorAPI: editorAPI,
-    editorView: props.editorView
-  }) : (0, _react2.jsx)(_FullPageToolbar.FullPageToolbar, {
+    editorView: props.editorView,
+    popupsMountPoint: props.popupsMountPoint,
+    showKeyline: showKeyline
+  })) : (0, _react2.jsx)(_FullPageToolbar.FullPageToolbar, {
     appearance: props.appearance,
     editorAPI: editorAPI,
     beforeIcon: props.primaryToolbarIconBefore,

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

@@ -10,8 +10,8 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 var _react = _interopRequireWildcard(require("react"));
 var _react2 = require("@emotion/react");
 var _reactIntlNext = require("react-intl-next");
+var _contextPanel = require("@atlaskit/editor-common/context-panel");
 var _messages = require("@atlaskit/editor-common/messages");
-var _ui = require("@atlaskit/editor-common/ui");
 var _uiMenu = require("@atlaskit/editor-common/ui-menu");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _ToolbarPortal = require("../../Toolbar/ToolbarPortal");
@@ -124,7 +124,7 @@ var EditorToolbar = exports.EditorToolbar = /*#__PURE__*/_react.default.memo(fun
     event.stopPropagation();
   }, [props.editorView]);
   var handleEscape = (0, _experiments.editorExperiment)('platform_editor_toolbar_rerender_optimization_exp', true) ? handleEscapeMemoized : handleEscapeRaw;
-  return (0, _react2.jsx)(_ui.ContextPanelConsumer, null, function (_ref2) {
+  return (0, _react2.jsx)(_contextPanel.ContextPanelConsumer, null, function (_ref2) {
     var contextPanelWidth = _ref2.width;
     return (0, _react2.jsx)(_uiMenu.ToolbarArrowKeyNavigationProvider, {
       editorView: props.editorView,

package/dist/cjs/ui/Appearance/FullPage/FullPageToolbarNext.compiled.css

@@ -1,4 +1,7 @@
 
-._n7zl7r9e{border-bottom:var(--ds-border-width,1px) solid var(--ds-border,#091e4224)}._19pkpxbi{margin-top:var(--ds-space-200,1pc)}
+._18zrutpp{padding-inline:var(--ds-space-150,9pt)}
+._1rjc12x7{padding-block:var(--ds-space-075,6px)}
+._n7zl7r9e{border-bottom:var(--ds-border-width,1px) solid var(--ds-border,#091e4224)}._16qs9g9j{box-shadow:var(--ds-shadow-overflow,0 0 8px #091e4228,0 0 1px #091e421e)}
+._19pkpxbi{margin-top:var(--ds-space-200,1pc)}
 ._2hwxpxbi{margin-right:var(--ds-space-200,1pc)}
 ._otyrpxbi{margin-bottom:var(--ds-space-200,1pc)}

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

@@ -1,51 +1,47 @@
 /* FullPageToolbarNext.tsx generated by @compiled/babel-plugin v0.36.1 */
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.FullPageToolbarNext = void 0;
 require("./FullPageToolbarNext.compiled.css");
 var _runtime = require("@compiled/react/runtime");
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
+var _reactIntlNext = require("react-intl-next");
+var _contextPanel = require("@atlaskit/editor-common/context-panel");
 var _toolbar = require("@atlaskit/editor-common/toolbar");
+var _uiMenu = require("@atlaskit/editor-common/ui-menu");
+var _expValEqualsNoExposure = require("@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure");
 var _toolbar2 = require("../../../utils/toolbar");
 var _Toolbar = require("../../Toolbar/Toolbar");
 var _ToolbarPortal = require("../../Toolbar/ToolbarPortal");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 var styles = {
   mainToolbarIconBefore: "_19pkpxbi _2hwxpxbi _otyrpxbi",
-  mainToolbarWrapper: "_n7zl7r9e"
+  mainToolbarWrapper: "_1rjc12x7 _18zrutpp _n7zl7r9e",
+  mainToolbarWithKeyline: "_16qs9g9j"
 };
 var MainToolbarWrapper = function MainToolbarWrapper(_ref) {
   var children = _ref.children,
-    testId = _ref.testId;
+    testId = _ref.testId,
+    showKeyline = _ref.showKeyline;
   return /*#__PURE__*/_react.default.createElement("div", {
     "data-testid": testId,
-    className: (0, _runtime.ax)([styles.mainToolbarWrapper])
+    className: (0, _runtime.ax)([styles.mainToolbarWrapper, showKeyline && styles.mainToolbarWithKeyline])
   }, children);
 };
-
-/**
- * TODO: ED-28732 - This component is a work in progress, re-writing `FullPageToolbar` and is not yet complete.
- *
- * [ ] Add support for custom toolbar + splitting into two lines
- *
- * [ ] Add support for toolbar keyboard shortcuts
- *
- * [ ] Add support for toolbar analytics
- *
- * [ ] Add support for toolbar accessibility
- *
- * [ ] Add support for toolbar localization
- */
 var FullPageToolbarNext = exports.FullPageToolbarNext = function FullPageToolbarNext(_ref2) {
   var _editorAPI$toolbar, _useToolbarPortal;
   var editorAPI = _ref2.editorAPI,
     beforeIcon = _ref2.beforeIcon,
     toolbarDockingPosition = _ref2.toolbarDockingPosition,
-    editorView = _ref2.editorView;
+    editorView = _ref2.editorView,
+    popupsMountPoint = _ref2.popupsMountPoint,
+    showKeyline = _ref2.showKeyline;
   var components = editorAPI === null || editorAPI === void 0 || (_editorAPI$toolbar = editorAPI.toolbar) === null || _editorAPI$toolbar === void 0 ? void 0 : _editorAPI$toolbar.actions.getComponents();
+  var intl = (0, _reactIntlNext.useIntl)();
   var toolbar = components === null || components === void 0 ? void 0 : components.find(function (component) {
     return component.key === _toolbar.TOOLBARS.PRIMARY_TOOLBAR;
   });
@@ -56,14 +52,49 @@ var FullPageToolbarNext = exports.FullPageToolbarNext = function FullPageToolbar
       Portal: _react.default.Fragment
     },
     ToolbarPortal = _ref3.Portal;
-  return /*#__PURE__*/_react.default.createElement(ToolbarPortal, null, /*#__PURE__*/_react.default.createElement(MainToolbarWrapper, {
-    testId: "full-page-primary-toolbar"
-  }, beforeIcon && /*#__PURE__*/_react.default.createElement("div", {
-    className: (0, _runtime.ax)([styles.mainToolbarIconBefore])
-  }, beforeIcon), toolbarDockingPosition !== 'none' && components && (0, _toolbar2.isToolbar)(toolbar) && /*#__PURE__*/_react.default.createElement(_Toolbar.ToolbarNext, {
-    toolbar: toolbar,
-    components: components,
-    editorView: editorView,
-    editorAPI: editorAPI
-  })));
+  var hasToolbarPortal = ToolbarPortal !== _react.default.Fragment;
+  var mountPoint = hasToolbarPortal ? undefined : popupsMountPoint;
+  var isShortcutToFocusToolbarRaw = function isShortcutToFocusToolbarRaw(event) {
+    //Alt + F9 to reach first element in this main toolbar
+    return event.altKey && event.key === 'F9';
+  };
+  var isShortcutToFocusToolbarMemoized = (0, _react.useCallback)(isShortcutToFocusToolbarRaw, []);
+  var isShortcutToFocusToolbar = (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_toolbar_rerender_optimization_exp', 'isEnabled', true) ? isShortcutToFocusToolbarMemoized : isShortcutToFocusToolbarRaw;
+  var handleEscapeRaw = function handleEscapeRaw(event) {
+    if (!(editorView !== null && editorView !== void 0 && editorView.hasFocus())) {
+      editorView === null || editorView === void 0 || editorView.focus();
+    }
+    event.preventDefault();
+    event.stopPropagation();
+  };
+  var handleEscapeMemoized = (0, _react.useCallback)(function (event) {
+    if (!(editorView !== null && editorView !== void 0 && editorView.hasFocus())) {
+      editorView === null || editorView === void 0 || editorView.focus();
+    }
+    event.preventDefault();
+    event.stopPropagation();
+  }, [editorView]);
+  var handleEscape = (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_toolbar_rerender_optimization_exp', 'isEnabled', true) ? handleEscapeMemoized : handleEscapeRaw;
+  return /*#__PURE__*/_react.default.createElement(_contextPanel.ContextPanelConsumer, null, function (_ref4) {
+    var ContextPanelWidth = _ref4.width;
+    return /*#__PURE__*/_react.default.createElement(_uiMenu.ToolbarArrowKeyNavigationProvider, {
+      editorView: editorView,
+      childComponentSelector: "[data-testid='ak-editor-main-toolbar']",
+      isShortcutToFocusToolbar: isShortcutToFocusToolbar,
+      handleEscape: handleEscape,
+      intl: intl
+    }, /*#__PURE__*/_react.default.createElement(ToolbarPortal, null, /*#__PURE__*/_react.default.createElement(MainToolbarWrapper, {
+      testId: "ak-editor-main-toolbar",
+      showKeyline: showKeyline || ContextPanelWidth > 0
+    }, beforeIcon && /*#__PURE__*/_react.default.createElement("div", {
+      className: (0, _runtime.ax)([styles.mainToolbarIconBefore])
+    }, beforeIcon), toolbarDockingPosition !== 'none' && components && (0, _toolbar2.isToolbar)(toolbar) && /*#__PURE__*/_react.default.createElement(_Toolbar.ToolbarNext, {
+      toolbar: toolbar,
+      components: components,
+      editorView: editorView,
+      editorAPI: editorAPI,
+      popupsMountPoint: mountPoint,
+      editorAppearance: "full-page"
+    }))));
+  });
 };

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

@@ -17,9 +17,9 @@ var _react = _interopRequireDefault(require("react"));
 var _react2 = require("@emotion/react");
 var _reactIntlNext = require("react-intl-next");
 var _Transition = _interopRequireDefault(require("react-transition-group/Transition"));
+var _contextPanel = require("@atlaskit/editor-common/context-panel");
 var _hooks = require("@atlaskit/editor-common/hooks");
 var _messages = require("@atlaskit/editor-common/messages");
-var _ui = require("@atlaskit/editor-common/ui");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
@@ -145,7 +145,7 @@ var SwappableContentAreaInner = /*#__PURE__*/function (_React$PureComponent) {
         width: "".concat(this.props.customWidth, "px"),
         overflowX: 'hidden'
       });
-      return (0, _react2.jsx)(_ui.ContextPanelConsumer, null, function (_ref) {
+      return (0, _react2.jsx)(_contextPanel.ContextPanelConsumer, null, function (_ref) {
         var _this2$props$intl;
         var broadcastWidth = _ref.broadcastWidth;
         var contextPanelWidth = visible ? width : 0;

package/dist/cjs/ui/Toolbar/Toolbar.js

@@ -45,14 +45,18 @@ var ToolbarNext = exports.ToolbarNext = function ToolbarNext(_ref) {
   var toolbar = _ref.toolbar,
     components = _ref.components,
     editorView = _ref.editorView,
-    editorAPI = _ref.editorAPI;
+    editorAPI = _ref.editorAPI,
+    popupsMountPoint = _ref.popupsMountPoint,
+    editorAppearance = _ref.editorAppearance;
   var connectivityStateMode = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(editorAPI, 'connectivity.mode');
   var isOffline = connectivityStateMode === 'offline';
   return /*#__PURE__*/_react.default.createElement(_toolbar.EditorToolbarProvider, {
-    editorView: editorView !== null && editorView !== void 0 ? editorView : null
+    editorView: editorView !== null && editorView !== void 0 ? editorView : null,
+    editorAppearance: editorAppearance
   }, /*#__PURE__*/_react.default.createElement(_toolbar.EditorToolbarUIProvider, {
     api: editorAPI,
-    isDisabled: isOffline
+    isDisabled: isOffline,
+    popupsMountPoint: popupsMountPoint
   }, /*#__PURE__*/_react.default.createElement(_editorToolbarModel.ToolbarModelRenderer, {
     toolbar: toolbar,
     components: components,

package/dist/cjs/version-wrapper.js

@@ -5,4 +5,4 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.version = exports.name = void 0;
 var name = exports.name = "@atlaskit/editor-core";
-var version = exports.version = "210.1.2";
+var version = exports.version = "210.1.3";

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

@@ -6,6 +6,7 @@ import React, { useEffect, useMemo, useRef, useState } from 'react';
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
+import { IntlProvider } from 'react-intl-next';
 import { browser } from '@atlaskit/editor-common/browser';
 import { sharedPluginStateHookMigratorFactory, useSharedPluginState, useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
 import { ContextPanelWidthProvider } from '@atlaskit/editor-common/ui';
@@ -158,12 +159,16 @@ export const FullPageEditor = props => {
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
       '--ak-editor-fullpage-toolbar-height': FULL_PAGE_EDITOR_TOOLBAR_HEIGHT()
     }
-  }, !isEditorToolbarHidden && (expValEquals('platform_editor_toolbar_aifc', 'isEnabled', true) ? jsx(FullPageToolbarNext, {
+  }, !isEditorToolbarHidden && (expValEquals('platform_editor_toolbar_aifc', 'isEnabled', true) ? jsx(IntlProvider, {
+    locale: "en"
+  }, jsx(FullPageToolbarNext, {
     toolbarDockingPosition: toolbarDockingPosition !== null && toolbarDockingPosition !== void 0 ? toolbarDockingPosition : toolbarDocking,
     beforeIcon: props.primaryToolbarIconBefore,
     editorAPI: editorAPI,
-    editorView: props.editorView
-  }) : jsx(FullPageToolbar, {
+    editorView: props.editorView,
+    popupsMountPoint: props.popupsMountPoint,
+    showKeyline: showKeyline
+  })) : jsx(FullPageToolbar, {
     appearance: props.appearance,
     editorAPI: editorAPI,
     beforeIcon: props.primaryToolbarIconBefore,

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

@@ -8,8 +8,8 @@ import React, { useEffect, useCallback, useState } from 'react';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
 import { injectIntl } from 'react-intl-next';
+import { ContextPanelConsumer } from '@atlaskit/editor-common/context-panel';
 import { fullPageMessages as messages } from '@atlaskit/editor-common/messages';
-import { ContextPanelConsumer } from '@atlaskit/editor-common/ui';
 import { ToolbarArrowKeyNavigationProvider } from '@atlaskit/editor-common/ui-menu';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { ToolbarPortalMountPoint, useToolbarPortal } from '../../Toolbar/ToolbarPortal';

package/dist/es2019/ui/Appearance/FullPage/FullPageToolbarNext.compiled.css

@@ -1,4 +1,7 @@
 
-._n7zl7r9e{border-bottom:var(--ds-border-width,1px) solid var(--ds-border,#091e4224)}._19pkpxbi{margin-top:var(--ds-space-200,1pc)}
+._18zrutpp{padding-inline:var(--ds-space-150,9pt)}
+._1rjc12x7{padding-block:var(--ds-space-075,6px)}
+._n7zl7r9e{border-bottom:var(--ds-border-width,1px) solid var(--ds-border,#091e4224)}._16qs9g9j{box-shadow:var(--ds-shadow-overflow,0 0 8px #091e4228,0 0 1px #091e421e)}
+._19pkpxbi{margin-top:var(--ds-space-200,1pc)}
 ._2hwxpxbi{margin-right:var(--ds-space-200,1pc)}
 ._otyrpxbi{margin-bottom:var(--ds-space-200,1pc)}

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

@@ -1,46 +1,41 @@
 /* FullPageToolbarNext.tsx generated by @compiled/babel-plugin v0.36.1 */
 import "./FullPageToolbarNext.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
-import React from 'react';
+import React, { useCallback } from 'react';
+import { useIntl } from 'react-intl-next';
+import { ContextPanelConsumer } from '@atlaskit/editor-common/context-panel';
 import { TOOLBARS } from '@atlaskit/editor-common/toolbar';
+import { ToolbarArrowKeyNavigationProvider } from '@atlaskit/editor-common/ui-menu';
+import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
 import { isToolbar } from '../../../utils/toolbar';
 import { ToolbarNext } from '../../Toolbar/Toolbar';
 import { useToolbarPortal } from '../../Toolbar/ToolbarPortal';
 const styles = {
   mainToolbarIconBefore: "_19pkpxbi _2hwxpxbi _otyrpxbi",
-  mainToolbarWrapper: "_n7zl7r9e"
+  mainToolbarWrapper: "_1rjc12x7 _18zrutpp _n7zl7r9e",
+  mainToolbarWithKeyline: "_16qs9g9j"
 };
 const MainToolbarWrapper = ({
   children,
-  testId
+  testId,
+  showKeyline
 }) => {
   return /*#__PURE__*/React.createElement("div", {
     "data-testid": testId,
-    className: ax([styles.mainToolbarWrapper])
+    className: ax([styles.mainToolbarWrapper, showKeyline && styles.mainToolbarWithKeyline])
   }, children);
 };
-
-/**
- * TODO: ED-28732 - This component is a work in progress, re-writing `FullPageToolbar` and is not yet complete.
- *
- * [ ] Add support for custom toolbar + splitting into two lines
- *
- * [ ] Add support for toolbar keyboard shortcuts
- *
- * [ ] Add support for toolbar analytics
- *
- * [ ] Add support for toolbar accessibility
- *
- * [ ] Add support for toolbar localization
- */
 export const FullPageToolbarNext = ({
   editorAPI,
   beforeIcon,
   toolbarDockingPosition,
-  editorView
+  editorView,
+  popupsMountPoint,
+  showKeyline
 }) => {
   var _editorAPI$toolbar, _useToolbarPortal;
   const components = editorAPI === null || editorAPI === void 0 ? void 0 : (_editorAPI$toolbar = editorAPI.toolbar) === null || _editorAPI$toolbar === void 0 ? void 0 : _editorAPI$toolbar.actions.getComponents();
+  const intl = useIntl();
   const toolbar = components === null || components === void 0 ? void 0 : components.find(component => component.key === TOOLBARS.PRIMARY_TOOLBAR);
 
   // When a toolbar portal context is provided, render the  toolbar inside a portal.
@@ -50,14 +45,48 @@ export const FullPageToolbarNext = ({
   } = (_useToolbarPortal = useToolbarPortal()) !== null && _useToolbarPortal !== void 0 ? _useToolbarPortal : {
     Portal: React.Fragment
   };
-  return /*#__PURE__*/React.createElement(ToolbarPortal, null, /*#__PURE__*/React.createElement(MainToolbarWrapper, {
-    testId: "full-page-primary-toolbar"
+  const hasToolbarPortal = ToolbarPortal !== React.Fragment;
+  const mountPoint = hasToolbarPortal ? undefined : popupsMountPoint;
+  const isShortcutToFocusToolbarRaw = event => {
+    //Alt + F9 to reach first element in this main toolbar
+    return event.altKey && event.key === 'F9';
+  };
+  const isShortcutToFocusToolbarMemoized = useCallback(isShortcutToFocusToolbarRaw, []);
+  const isShortcutToFocusToolbar = expValEqualsNoExposure('platform_editor_toolbar_rerender_optimization_exp', 'isEnabled', true) ? isShortcutToFocusToolbarMemoized : isShortcutToFocusToolbarRaw;
+  const handleEscapeRaw = event => {
+    if (!(editorView !== null && editorView !== void 0 && editorView.hasFocus())) {
+      editorView === null || editorView === void 0 ? void 0 : editorView.focus();
+    }
+    event.preventDefault();
+    event.stopPropagation();
+  };
+  const handleEscapeMemoized = useCallback(event => {
+    if (!(editorView !== null && editorView !== void 0 && editorView.hasFocus())) {
+      editorView === null || editorView === void 0 ? void 0 : editorView.focus();
+    }
+    event.preventDefault();
+    event.stopPropagation();
+  }, [editorView]);
+  const handleEscape = expValEqualsNoExposure('platform_editor_toolbar_rerender_optimization_exp', 'isEnabled', true) ? handleEscapeMemoized : handleEscapeRaw;
+  return /*#__PURE__*/React.createElement(ContextPanelConsumer, null, ({
+    width: ContextPanelWidth
+  }) => /*#__PURE__*/React.createElement(ToolbarArrowKeyNavigationProvider, {
+    editorView: editorView,
+    childComponentSelector: "[data-testid='ak-editor-main-toolbar']",
+    isShortcutToFocusToolbar: isShortcutToFocusToolbar,
+    handleEscape: handleEscape,
+    intl: intl
+  }, /*#__PURE__*/React.createElement(ToolbarPortal, null, /*#__PURE__*/React.createElement(MainToolbarWrapper, {
+    testId: "ak-editor-main-toolbar",
+    showKeyline: showKeyline || ContextPanelWidth > 0
   }, beforeIcon && /*#__PURE__*/React.createElement("div", {
     className: ax([styles.mainToolbarIconBefore])
   }, beforeIcon), toolbarDockingPosition !== 'none' && components && isToolbar(toolbar) && /*#__PURE__*/React.createElement(ToolbarNext, {
     toolbar: toolbar,
     components: components,
     editorView: editorView,
-    editorAPI: editorAPI
-  })));
+    editorAPI: editorAPI,
+    popupsMountPoint: mountPoint,
+    editorAppearance: "full-page"
+  })))));
 };

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

@@ -10,9 +10,9 @@ import React from 'react';
 import { css, jsx } from '@emotion/react';
 import { injectIntl } from 'react-intl-next';
 import Transition from 'react-transition-group/Transition';
+import { ContextPanelConsumer } from '@atlaskit/editor-common/context-panel';
 import { sharedPluginStateHookMigratorFactory, useSharedPluginState, useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
 import { contextPanelMessages } from '@atlaskit/editor-common/messages';
-import { ContextPanelConsumer } from '@atlaskit/editor-common/ui';
 import { akEditorContextPanelWidth, akEditorSwoopCubicBezier } from '@atlaskit/editor-shared-styles';
 import { fg } from '@atlaskit/platform-feature-flags';
 const ANIM_SPEED_MS = 500;

package/dist/es2019/ui/Toolbar/Toolbar.js

@@ -39,15 +39,19 @@ export const ToolbarNext = ({
   toolbar,
   components,
   editorView,
-  editorAPI
+  editorAPI,
+  popupsMountPoint,
+  editorAppearance
 }) => {
   const connectivityStateMode = useSharedPluginStateSelector(editorAPI, 'connectivity.mode');
   const isOffline = connectivityStateMode === 'offline';
   return /*#__PURE__*/React.createElement(EditorToolbarProvider, {
-    editorView: editorView !== null && editorView !== void 0 ? editorView : null
+    editorView: editorView !== null && editorView !== void 0 ? editorView : null,
+    editorAppearance: editorAppearance
   }, /*#__PURE__*/React.createElement(EditorToolbarUIProvider, {
     api: editorAPI,
-    isDisabled: isOffline
+    isDisabled: isOffline,
+    popupsMountPoint: popupsMountPoint
   }, /*#__PURE__*/React.createElement(ToolbarModelRenderer, {
     toolbar: toolbar,
     components: components,

package/dist/es2019/version-wrapper.js

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

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

@@ -7,6 +7,7 @@ import React, { useEffect, useMemo, useRef, useState } from 'react';
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
+import { IntlProvider } from 'react-intl-next';
 import { browser } from '@atlaskit/editor-common/browser';
 import { sharedPluginStateHookMigratorFactory, useSharedPluginState, useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
 import { ContextPanelWidthProvider } from '@atlaskit/editor-common/ui';
@@ -161,12 +162,16 @@ export var FullPageEditor = function FullPageEditor(props) {
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
       '--ak-editor-fullpage-toolbar-height': FULL_PAGE_EDITOR_TOOLBAR_HEIGHT()
     }
-  }, !isEditorToolbarHidden && (expValEquals('platform_editor_toolbar_aifc', 'isEnabled', true) ? jsx(FullPageToolbarNext, {
+  }, !isEditorToolbarHidden && (expValEquals('platform_editor_toolbar_aifc', 'isEnabled', true) ? jsx(IntlProvider, {
+    locale: "en"
+  }, jsx(FullPageToolbarNext, {
     toolbarDockingPosition: toolbarDockingPosition !== null && toolbarDockingPosition !== void 0 ? toolbarDockingPosition : toolbarDocking,
     beforeIcon: props.primaryToolbarIconBefore,
     editorAPI: editorAPI,
-    editorView: props.editorView
-  }) : jsx(FullPageToolbar, {
+    editorView: props.editorView,
+    popupsMountPoint: props.popupsMountPoint,
+    showKeyline: showKeyline
+  })) : jsx(FullPageToolbar, {
     appearance: props.appearance,
     editorAPI: editorAPI,
     beforeIcon: props.primaryToolbarIconBefore,

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

@@ -9,8 +9,8 @@ import React, { useEffect, useCallback, useState } from 'react';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
 import { injectIntl } from 'react-intl-next';
+import { ContextPanelConsumer } from '@atlaskit/editor-common/context-panel';
 import { fullPageMessages as messages } from '@atlaskit/editor-common/messages';
-import { ContextPanelConsumer } from '@atlaskit/editor-common/ui';
 import { ToolbarArrowKeyNavigationProvider } from '@atlaskit/editor-common/ui-menu';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { ToolbarPortalMountPoint, useToolbarPortal } from '../../Toolbar/ToolbarPortal';

package/dist/esm/ui/Appearance/FullPage/FullPageToolbarNext.compiled.css

@@ -1,4 +1,7 @@
 
-._n7zl7r9e{border-bottom:var(--ds-border-width,1px) solid var(--ds-border,#091e4224)}._19pkpxbi{margin-top:var(--ds-space-200,1pc)}
+._18zrutpp{padding-inline:var(--ds-space-150,9pt)}
+._1rjc12x7{padding-block:var(--ds-space-075,6px)}
+._n7zl7r9e{border-bottom:var(--ds-border-width,1px) solid var(--ds-border,#091e4224)}._16qs9g9j{box-shadow:var(--ds-shadow-overflow,0 0 8px #091e4228,0 0 1px #091e421e)}
+._19pkpxbi{margin-top:var(--ds-space-200,1pc)}
 ._2hwxpxbi{margin-right:var(--ds-space-200,1pc)}
 ._otyrpxbi{margin-bottom:var(--ds-space-200,1pc)}

package/dist/esm/ui/Appearance/FullPage/FullPageToolbarNext.js

@@ -1,44 +1,39 @@
 /* FullPageToolbarNext.tsx generated by @compiled/babel-plugin v0.36.1 */
 import "./FullPageToolbarNext.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
-import React from 'react';
+import React, { useCallback } from 'react';
+import { useIntl } from 'react-intl-next';
+import { ContextPanelConsumer } from '@atlaskit/editor-common/context-panel';
 import { TOOLBARS } from '@atlaskit/editor-common/toolbar';
+import { ToolbarArrowKeyNavigationProvider } from '@atlaskit/editor-common/ui-menu';
+import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
 import { isToolbar } from '../../../utils/toolbar';
 import { ToolbarNext } from '../../Toolbar/Toolbar';
 import { useToolbarPortal } from '../../Toolbar/ToolbarPortal';
 var styles = {
   mainToolbarIconBefore: "_19pkpxbi _2hwxpxbi _otyrpxbi",
-  mainToolbarWrapper: "_n7zl7r9e"
+  mainToolbarWrapper: "_1rjc12x7 _18zrutpp _n7zl7r9e",
+  mainToolbarWithKeyline: "_16qs9g9j"
 };
 var MainToolbarWrapper = function MainToolbarWrapper(_ref) {
   var children = _ref.children,
-    testId = _ref.testId;
+    testId = _ref.testId,
+    showKeyline = _ref.showKeyline;
   return /*#__PURE__*/React.createElement("div", {
     "data-testid": testId,
-    className: ax([styles.mainToolbarWrapper])
+    className: ax([styles.mainToolbarWrapper, showKeyline && styles.mainToolbarWithKeyline])
   }, children);
 };
-
-/**
- * TODO: ED-28732 - This component is a work in progress, re-writing `FullPageToolbar` and is not yet complete.
- *
- * [ ] Add support for custom toolbar + splitting into two lines
- *
- * [ ] Add support for toolbar keyboard shortcuts
- *
- * [ ] Add support for toolbar analytics
- *
- * [ ] Add support for toolbar accessibility
- *
- * [ ] Add support for toolbar localization
- */
 export var FullPageToolbarNext = function FullPageToolbarNext(_ref2) {
   var _editorAPI$toolbar, _useToolbarPortal;
   var editorAPI = _ref2.editorAPI,
     beforeIcon = _ref2.beforeIcon,
     toolbarDockingPosition = _ref2.toolbarDockingPosition,
-    editorView = _ref2.editorView;
+    editorView = _ref2.editorView,
+    popupsMountPoint = _ref2.popupsMountPoint,
+    showKeyline = _ref2.showKeyline;
   var components = editorAPI === null || editorAPI === void 0 || (_editorAPI$toolbar = editorAPI.toolbar) === null || _editorAPI$toolbar === void 0 ? void 0 : _editorAPI$toolbar.actions.getComponents();
+  var intl = useIntl();
   var toolbar = components === null || components === void 0 ? void 0 : components.find(function (component) {
     return component.key === TOOLBARS.PRIMARY_TOOLBAR;
   });
@@ -49,14 +44,49 @@ export var FullPageToolbarNext = function FullPageToolbarNext(_ref2) {
       Portal: React.Fragment
     },
     ToolbarPortal = _ref3.Portal;
-  return /*#__PURE__*/React.createElement(ToolbarPortal, null, /*#__PURE__*/React.createElement(MainToolbarWrapper, {
-    testId: "full-page-primary-toolbar"
-  }, beforeIcon && /*#__PURE__*/React.createElement("div", {
-    className: ax([styles.mainToolbarIconBefore])
-  }, beforeIcon), toolbarDockingPosition !== 'none' && components && isToolbar(toolbar) && /*#__PURE__*/React.createElement(ToolbarNext, {
-    toolbar: toolbar,
-    components: components,
-    editorView: editorView,
-    editorAPI: editorAPI
-  })));
+  var hasToolbarPortal = ToolbarPortal !== React.Fragment;
+  var mountPoint = hasToolbarPortal ? undefined : popupsMountPoint;
+  var isShortcutToFocusToolbarRaw = function isShortcutToFocusToolbarRaw(event) {
+    //Alt + F9 to reach first element in this main toolbar
+    return event.altKey && event.key === 'F9';
+  };
+  var isShortcutToFocusToolbarMemoized = useCallback(isShortcutToFocusToolbarRaw, []);
+  var isShortcutToFocusToolbar = expValEqualsNoExposure('platform_editor_toolbar_rerender_optimization_exp', 'isEnabled', true) ? isShortcutToFocusToolbarMemoized : isShortcutToFocusToolbarRaw;
+  var handleEscapeRaw = function handleEscapeRaw(event) {
+    if (!(editorView !== null && editorView !== void 0 && editorView.hasFocus())) {
+      editorView === null || editorView === void 0 || editorView.focus();
+    }
+    event.preventDefault();
+    event.stopPropagation();
+  };
+  var handleEscapeMemoized = useCallback(function (event) {
+    if (!(editorView !== null && editorView !== void 0 && editorView.hasFocus())) {
+      editorView === null || editorView === void 0 || editorView.focus();
+    }
+    event.preventDefault();
+    event.stopPropagation();
+  }, [editorView]);
+  var handleEscape = expValEqualsNoExposure('platform_editor_toolbar_rerender_optimization_exp', 'isEnabled', true) ? handleEscapeMemoized : handleEscapeRaw;
+  return /*#__PURE__*/React.createElement(ContextPanelConsumer, null, function (_ref4) {
+    var ContextPanelWidth = _ref4.width;
+    return /*#__PURE__*/React.createElement(ToolbarArrowKeyNavigationProvider, {
+      editorView: editorView,
+      childComponentSelector: "[data-testid='ak-editor-main-toolbar']",
+      isShortcutToFocusToolbar: isShortcutToFocusToolbar,
+      handleEscape: handleEscape,
+      intl: intl
+    }, /*#__PURE__*/React.createElement(ToolbarPortal, null, /*#__PURE__*/React.createElement(MainToolbarWrapper, {
+      testId: "ak-editor-main-toolbar",
+      showKeyline: showKeyline || ContextPanelWidth > 0
+    }, beforeIcon && /*#__PURE__*/React.createElement("div", {
+      className: ax([styles.mainToolbarIconBefore])
+    }, beforeIcon), toolbarDockingPosition !== 'none' && components && isToolbar(toolbar) && /*#__PURE__*/React.createElement(ToolbarNext, {
+      toolbar: toolbar,
+      components: components,
+      editorView: editorView,
+      editorAPI: editorAPI,
+      popupsMountPoint: mountPoint,
+      editorAppearance: "full-page"
+    }))));
+  });
 };

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

@@ -19,9 +19,9 @@ import React from 'react';
 import { css, jsx } from '@emotion/react';
 import { injectIntl } from 'react-intl-next';
 import Transition from 'react-transition-group/Transition';
+import { ContextPanelConsumer } from '@atlaskit/editor-common/context-panel';
 import { sharedPluginStateHookMigratorFactory, useSharedPluginState, useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
 import { contextPanelMessages } from '@atlaskit/editor-common/messages';
-import { ContextPanelConsumer } from '@atlaskit/editor-common/ui';
 import { akEditorContextPanelWidth, akEditorSwoopCubicBezier } from '@atlaskit/editor-shared-styles';
 import { fg } from '@atlaskit/platform-feature-flags';
 var ANIM_SPEED_MS = 500;

package/dist/esm/ui/Toolbar/Toolbar.js

@@ -39,14 +39,18 @@ export var ToolbarNext = function ToolbarNext(_ref) {
   var toolbar = _ref.toolbar,
     components = _ref.components,
     editorView = _ref.editorView,
-    editorAPI = _ref.editorAPI;
+    editorAPI = _ref.editorAPI,
+    popupsMountPoint = _ref.popupsMountPoint,
+    editorAppearance = _ref.editorAppearance;
   var connectivityStateMode = useSharedPluginStateSelector(editorAPI, 'connectivity.mode');
   var isOffline = connectivityStateMode === 'offline';
   return /*#__PURE__*/React.createElement(EditorToolbarProvider, {
-    editorView: editorView !== null && editorView !== void 0 ? editorView : null
+    editorView: editorView !== null && editorView !== void 0 ? editorView : null,
+    editorAppearance: editorAppearance
   }, /*#__PURE__*/React.createElement(EditorToolbarUIProvider, {
     api: editorAPI,
-    isDisabled: isOffline
+    isDisabled: isOffline,
+    popupsMountPoint: popupsMountPoint
   }, /*#__PURE__*/React.createElement(ToolbarModelRenderer, {
     toolbar: toolbar,
     components: components,

package/dist/esm/version-wrapper.js

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

package/dist/types/ui/Appearance/FullPage/FullPageToolbarNext.d.ts

@@ -11,19 +11,8 @@ type FullPageToolbarNextProps = {
     editorAPI?: PublicPluginAPI<[ToolbarPlugin]>;
     toolbarDockingPosition?: 'top' | 'none';
     editorView?: EditorView;
+    popupsMountPoint?: HTMLElement;
+    showKeyline: boolean;
 };
-/**
- * TODO: ED-28732 - This component is a work in progress, re-writing `FullPageToolbar` and is not yet complete.
- *
- * [ ] Add support for custom toolbar + splitting into two lines
- *
- * [ ] Add support for toolbar keyboard shortcuts
- *
- * [ ] Add support for toolbar analytics
- *
- * [ ] Add support for toolbar accessibility
- *
- * [ ] Add support for toolbar localization
- */
-export declare const FullPageToolbarNext: ({ editorAPI, beforeIcon, toolbarDockingPosition, editorView, }: FullPageToolbarNextProps) => JSX.Element;
+export declare const FullPageToolbarNext: ({ editorAPI, beforeIcon, toolbarDockingPosition, editorView, popupsMountPoint, showKeyline, }: FullPageToolbarNextProps) => JSX.Element;
 export {};

package/dist/types/ui/Toolbar/Toolbar.d.ts

@@ -1,7 +1,9 @@
 import React from 'react';
+import type { EditorToolbarContextType } from '@atlaskit/editor-common/toolbar';
 import type { PublicPluginAPI } from '@atlaskit/editor-common/types';
 import type { ToolbarPlugin } from '@atlaskit/editor-plugins/toolbar';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
+import { type ToolbarUIContextType } from '@atlaskit/editor-toolbar';
 import type { RegisterComponent, RegisterToolbar } from '@atlaskit/editor-toolbar-model';
 import type { ToolbarProps } from './toolbar-types';
 /**
@@ -10,7 +12,7 @@ import type { ToolbarProps } from './toolbar-types';
  * If making changes to this component please ensure to also update `<ToolbarNext />`.
  */
 export declare const Toolbar: (props: ToolbarProps) => JSX.Element;
-type NewToolbarProps = {
+type NewToolbarProps = Pick<ToolbarUIContextType, 'popupsMountPoint'> & Pick<EditorToolbarContextType, 'editorAppearance'> & {
     toolbar: RegisterToolbar;
     components: RegisterComponent[];
     editorView?: EditorView;
@@ -22,5 +24,5 @@ type NewToolbarProps = {
  *
  * The majority of components UI should use `@atlaskit/editor-toolbar` components.
  */
-export declare const ToolbarNext: ({ toolbar, components, editorView, editorAPI }: NewToolbarProps) => React.JSX.Element;
+export declare const ToolbarNext: ({ toolbar, components, editorView, editorAPI, popupsMountPoint, editorAppearance, }: NewToolbarProps) => React.JSX.Element;
 export {};

package/dist/types-ts4.5/ui/Appearance/FullPage/FullPageToolbarNext.d.ts

@@ -13,19 +13,8 @@ type FullPageToolbarNextProps = {
     ]>;
     toolbarDockingPosition?: 'top' | 'none';
     editorView?: EditorView;
+    popupsMountPoint?: HTMLElement;
+    showKeyline: boolean;
 };
-/**
- * TODO: ED-28732 - This component is a work in progress, re-writing `FullPageToolbar` and is not yet complete.
- *
- * [ ] Add support for custom toolbar + splitting into two lines
- *
- * [ ] Add support for toolbar keyboard shortcuts
- *
- * [ ] Add support for toolbar analytics
- *
- * [ ] Add support for toolbar accessibility
- *
- * [ ] Add support for toolbar localization
- */
-export declare const FullPageToolbarNext: ({ editorAPI, beforeIcon, toolbarDockingPosition, editorView, }: FullPageToolbarNextProps) => JSX.Element;
+export declare const FullPageToolbarNext: ({ editorAPI, beforeIcon, toolbarDockingPosition, editorView, popupsMountPoint, showKeyline, }: FullPageToolbarNextProps) => JSX.Element;
 export {};

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

@@ -1,7 +1,9 @@
 import React from 'react';
+import type { EditorToolbarContextType } from '@atlaskit/editor-common/toolbar';
 import type { PublicPluginAPI } from '@atlaskit/editor-common/types';
 import type { ToolbarPlugin } from '@atlaskit/editor-plugins/toolbar';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
+import { type ToolbarUIContextType } from '@atlaskit/editor-toolbar';
 import type { RegisterComponent, RegisterToolbar } from '@atlaskit/editor-toolbar-model';
 import type { ToolbarProps } from './toolbar-types';
 /**
@@ -10,7 +12,7 @@ import type { ToolbarProps } from './toolbar-types';
  * If making changes to this component please ensure to also update `<ToolbarNext />`.
  */
 export declare const Toolbar: (props: ToolbarProps) => JSX.Element;
-type NewToolbarProps = {
+type NewToolbarProps = Pick<ToolbarUIContextType, 'popupsMountPoint'> & Pick<EditorToolbarContextType, 'editorAppearance'> & {
     toolbar: RegisterToolbar;
     components: RegisterComponent[];
     editorView?: EditorView;
@@ -24,5 +26,5 @@ type NewToolbarProps = {
  *
  * The majority of components UI should use `@atlaskit/editor-toolbar` components.
  */
-export declare const ToolbarNext: ({ toolbar, components, editorView, editorAPI }: NewToolbarProps) => React.JSX.Element;
+export declare const ToolbarNext: ({ toolbar, components, editorView, editorAPI, popupsMountPoint, editorAppearance, }: NewToolbarProps) => React.JSX.Element;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-core",
-	"version": "210.1.3",
+	"version": "210.1.4",
 	"description": "A package contains Atlassian editor core functionality",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -80,7 +80,7 @@
 		"uuid": "^3.1.0"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^107.27.0",
+		"@atlaskit/editor-common": "^107.28.0",
 		"@atlaskit/link-provider": "^3.7.0",
 		"@atlaskit/media-core": "^37.0.0",
 		"react": "^18.2.0",