@atlaskit/editor-core 209.7.0 → 209.8.1

package/CHANGELOG.md

@@ -1,5 +1,30 @@
 # @atlaskit/editor-core
 
+## 209.8.1
+
+### Patch Changes
+
+- [#199957](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/199957)
+  [`5c4cd82cd1ea3`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/5c4cd82cd1ea3) -
+  Add unpinned version of menu item and hook up, add UiToolbarContext to primary toolbar components
+- Updated dependencies
+
+## 209.8.0
+
+### Minor Changes
+
+- [#199487](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/199487)
+  [`54098ba4cc83c`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/54098ba4cc83c) -
+  Add support to render primary toolbar for both full page editor and comment editor using new
+  toolbar components. Includes rewrites of full page toolbar which removes JS width calculation
+
+### Patch Changes
+
+- [#199353](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/199353)
+  [`f2d4ca35574b8`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/f2d4ca35574b8) -
+  Internal changes to how border radius values are applied. No visual change.
+- Updated dependencies
+
 ## 209.7.0
 
 ### Minor Changes

package/afm-cc/tsconfig.json

@@ -57,6 +57,12 @@
 		{
 			"path": "../../editor-shared-styles/afm-cc/tsconfig.json"
 		},
+		{
+			"path": "../../editor-toolbar/afm-cc/tsconfig.json"
+		},
+		{
+			"path": "../../editor-toolbar-model/afm-cc/tsconfig.json"
+		},
 		{
 			"path": "../../../elements/emoji/afm-cc/tsconfig.json"
 		},

package/afm-dev-agents/tsconfig.json

@@ -57,6 +57,12 @@
 		{
 			"path": "../../editor-shared-styles/afm-dev-agents/tsconfig.json"
 		},
+		{
+			"path": "../../editor-toolbar/afm-dev-agents/tsconfig.json"
+		},
+		{
+			"path": "../../editor-toolbar-model/afm-dev-agents/tsconfig.json"
+		},
 		{
 			"path": "../../../elements/emoji/afm-dev-agents/tsconfig.json"
 		},

package/afm-jira/tsconfig.json

@@ -57,6 +57,12 @@
 		{
 			"path": "../../editor-shared-styles/afm-jira/tsconfig.json"
 		},
+		{
+			"path": "../../editor-toolbar/afm-jira/tsconfig.json"
+		},
+		{
+			"path": "../../editor-toolbar-model/afm-jira/tsconfig.json"
+		},
 		{
 			"path": "../../../elements/emoji/afm-jira/tsconfig.json"
 		},

package/afm-passionfruit/tsconfig.json

@@ -0,0 +1,115 @@
+{
+	"extends": "../../../../tsconfig.entry-points.passionfruit.json",
+	"compilerOptions": {
+		"declaration": true,
+		"target": "es5",
+		"outDir": "../../../../../passionfruit/tsDist/@atlaskit__editor-core/app",
+		"rootDir": "../",
+		"composite": true
+	},
+	"include": [
+		"../src/**/*.ts",
+		"../src/**/*.tsx"
+	],
+	"exclude": [
+		"../src/**/__tests__/*",
+		"../src/**/*.test.*",
+		"../src/**/test.*",
+		"../src/stories/*",
+		"../src/**/examples.*",
+		"../src/**/examples/*",
+		"../src/**/examples/**/*",
+		"../src/**/*.stories.*",
+		"../src/**/stories/*",
+		"../src/**/stories/**/*"
+	],
+	"references": [
+		{
+			"path": "../../activity-provider/afm-passionfruit/tsconfig.json"
+		},
+		{
+			"path": "../../../analytics/analytics-namespaced-context/afm-passionfruit/tsconfig.json"
+		},
+		{
+			"path": "../../../analytics/analytics-next/afm-passionfruit/tsconfig.json"
+		},
+		{
+			"path": "../../../design-system/button/afm-passionfruit/tsconfig.json"
+		},
+		{
+			"path": "../../../design-system/css/afm-passionfruit/tsconfig.json"
+		},
+		{
+			"path": "../../editor-json-transformer/afm-passionfruit/tsconfig.json"
+		},
+		{
+			"path": "../../editor-performance-metrics/afm-passionfruit/tsconfig.json"
+		},
+		{
+			"path": "../../editor-plugin-quick-insert/afm-passionfruit/tsconfig.json"
+		},
+		{
+			"path": "../../editor-plugin-user-preferences/afm-passionfruit/tsconfig.json"
+		},
+		{
+			"path": "../../editor-plugins/afm-passionfruit/tsconfig.json"
+		},
+		{
+			"path": "../../editor-shared-styles/afm-passionfruit/tsconfig.json"
+		},
+		{
+			"path": "../../editor-toolbar/afm-passionfruit/tsconfig.json"
+		},
+		{
+			"path": "../../editor-toolbar-model/afm-passionfruit/tsconfig.json"
+		},
+		{
+			"path": "../../../elements/emoji/afm-passionfruit/tsconfig.json"
+		},
+		{
+			"path": "../../../design-system/icon/afm-passionfruit/tsconfig.json"
+		},
+		{
+			"path": "../../../design-system/link/afm-passionfruit/tsconfig.json"
+		},
+		{
+			"path": "../../../media/media-card/afm-passionfruit/tsconfig.json"
+		},
+		{
+			"path": "../../../elements/mention/afm-passionfruit/tsconfig.json"
+		},
+		{
+			"path": "../../../platform/feature-flags/afm-passionfruit/tsconfig.json"
+		},
+		{
+			"path": "../../../platform/feature-flags-react/afm-passionfruit/tsconfig.json"
+		},
+		{
+			"path": "../../../react-ufo/atlaskit/afm-passionfruit/tsconfig.json"
+		},
+		{
+			"path": "../../../elements/task-decision/afm-passionfruit/tsconfig.json"
+		},
+		{
+			"path": "../../tmp-editor-statsig/afm-passionfruit/tsconfig.json"
+		},
+		{
+			"path": "../../../design-system/tokens/afm-passionfruit/tsconfig.json"
+		},
+		{
+			"path": "../../../design-system/tooltip/afm-passionfruit/tsconfig.json"
+		},
+		{
+			"path": "../../../design-system/width-detector/afm-passionfruit/tsconfig.json"
+		},
+		{
+			"path": "../../editor-common/afm-passionfruit/tsconfig.json"
+		},
+		{
+			"path": "../../../linking-platform/link-provider/afm-passionfruit/tsconfig.json"
+		},
+		{
+			"path": "../../../media/media-core/afm-passionfruit/tsconfig.json"
+		}
+	]
+}

package/afm-post-office/tsconfig.json

@@ -57,6 +57,12 @@
 		{
 			"path": "../../editor-shared-styles/afm-post-office/tsconfig.json"
 		},
+		{
+			"path": "../../editor-toolbar/afm-post-office/tsconfig.json"
+		},
+		{
+			"path": "../../editor-toolbar-model/afm-post-office/tsconfig.json"
+		},
 		{
 			"path": "../../../elements/emoji/afm-post-office/tsconfig.json"
 		},

package/afm-rovo-extension/tsconfig.json

@@ -57,6 +57,12 @@
 		{
 			"path": "../../editor-shared-styles/afm-rovo-extension/tsconfig.json"
 		},
+		{
+			"path": "../../editor-toolbar/afm-rovo-extension/tsconfig.json"
+		},
+		{
+			"path": "../../editor-toolbar-model/afm-rovo-extension/tsconfig.json"
+		},
 		{
 			"path": "../../../elements/emoji/afm-rovo-extension/tsconfig.json"
 		},

package/afm-townsquare/tsconfig.json

@@ -57,6 +57,12 @@
 		{
 			"path": "../../editor-shared-styles/afm-townsquare/tsconfig.json"
 		},
+		{
+			"path": "../../editor-toolbar/afm-townsquare/tsconfig.json"
+		},
+		{
+			"path": "../../editor-toolbar-model/afm-townsquare/tsconfig.json"
+		},
 		{
 			"path": "../../../elements/emoji/afm-townsquare/tsconfig.json"
 		},

package/afm-volt/tsconfig.json

@@ -15,7 +15,13 @@
 		"../src/**/__tests__/*",
 		"../src/**/*.test.*",
 		"../src/**/test.*",
-		"../src/stories/*"
+		"../src/stories/*",
+		"../src/**/examples.*",
+		"../src/**/examples/*",
+		"../src/**/examples/**/*",
+		"../src/**/*.stories.*",
+		"../src/**/stories/*",
+		"../src/**/stories/**/*"
 	],
 	"references": [
 		{
@@ -33,9 +39,6 @@
 		{
 			"path": "../../../design-system/css/afm-volt/tsconfig.json"
 		},
-		{
-			"path": "../../editor-common/afm-volt/tsconfig.json"
-		},
 		{
 			"path": "../../editor-json-transformer/afm-volt/tsconfig.json"
 		},
@@ -93,6 +96,9 @@
 		{
 			"path": "../../../design-system/width-detector/afm-volt/tsconfig.json"
 		},
+		{
+			"path": "../../editor-common/afm-volt/tsconfig.json"
+		},
 		{
 			"path": "../../../linking-platform/link-provider/afm-volt/tsconfig.json"
 		},

package/dist/cjs/index.js

@@ -34,6 +34,12 @@ Object.defineProperty(exports, "EditorContext", {
     return _EditorContext.default;
   }
 });
+Object.defineProperty(exports, "ReactEditorView", {
+  enumerable: true,
+  get: function get() {
+    return _ReactEditorView.ReactEditorView;
+  }
+});
 Object.defineProperty(exports, "ToolbarHelp", {
   enumerable: true,
   get: function get() {
@@ -70,6 +76,12 @@ Object.defineProperty(exports, "createFeatureFlagsFromProps", {
     return _featureFlagsFromProps.createFeatureFlagsFromProps;
   }
 });
+Object.defineProperty(exports, "getDefaultPresetOptionsFromEditorProps", {
+  enumerable: true,
+  get: function get() {
+    return _createPluginsList.getDefaultPresetOptionsFromEditorProps;
+  }
+});
 Object.defineProperty(exports, "getNodesCount", {
   enumerable: true,
   get: function get() {
@@ -113,4 +125,6 @@ var _getNodesCount = require("./utils/getNodesCount");
 var _measureEnum = _interopRequireDefault(require("./utils/performance/measure-enum"));
 var _featureFlagsFromProps = require("./utils/feature-flags-from-props");
 var _actions = _interopRequireDefault(require("./actions"));
-var _ContentStyles = require("./ui/ContentStyles");
+var _ContentStyles = require("./ui/ContentStyles");
+var _createPluginsList = require("./create-editor/create-plugins-list");
+var _ReactEditorView = require("./create-editor/ReactEditorView");

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

@@ -34,6 +34,7 @@ var _PluginSlot = _interopRequireDefault(require("../../PluginSlot"));
 var _getPrimaryToolbarComponents = require("../../Toolbar/getPrimaryToolbarComponents");
 var _ToolbarWithSizeDetector = require("../../Toolbar/ToolbarWithSizeDetector");
 var _WithFlash = _interopRequireDefault(require("../../WithFlash"));
+var _CommentToolbar = require("./CommentToolbar");
 var _Toolbar = require("./Toolbar");
 var _templateObject;
 /**
@@ -226,6 +227,10 @@ var CommentEditorWithIntl = exports.CommentEditorWithIntl = function CommentEdit
   if (Array.isArray(primaryToolbarState === null || primaryToolbarState === void 0 ? void 0 : primaryToolbarState.components) && Array.isArray(primaryToolbarComponents)) {
     primaryToolbarComponents = primaryToolbarState.components.concat(primaryToolbarComponents);
   }
+  var customToolbarSlot = (0, _react2.jsx)("div", {
+    css: (0, _expValEquals.expValEquals)('platform_editor_core_static_emotion_non_central', 'isEnabled', true) ? [mainToolbarCustomComponentsSlotStyleNew, isTwoLineToolbarEnabled && mainToolbarCustomComponentsSlotStyleTwoLineToolbarNew] : /* eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766 */
+    mainToolbarCustomComponentsSlotStyle(isTwoLineToolbarEnabled)
+  }, customPrimaryToolbarComponents);
   return (0, _react2.jsx)(_WithFlash.default, {
     animate: maxContentSizeReached
   }, (0, _react2.jsx)(_ui.WidthProvider, null, (0, _react2.jsx)("div", {
@@ -242,7 +247,10 @@ var CommentEditorWithIntl = exports.CommentEditorWithIntl = function CommentEdit
   }, (0, _react2.jsx)(_Toolbar.MainToolbar, {
     useStickyToolbar: useStickyToolbar,
     twoLineEditorToolbar: isTwoLineToolbarEnabled
-  }, (0, _react2.jsx)(_uiMenu.ToolbarArrowKeyNavigationProvider, {
+  }, (0, _expValEquals.expValEquals)('platform_editor_toolbar_aifc', 'isEnabled', true) ? (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)(_CommentToolbar.CommentToolbar, {
+    editorAPI: editorAPI,
+    editorView: editorView
+  }), customToolbarSlot) : (0, _react2.jsx)(_uiMenu.ToolbarArrowKeyNavigationProvider, {
     editorView: editorView,
     childComponentSelector: "[data-testid='ak-editor-main-toolbar']",
     isShortcutToFocusToolbar: isShortcutToFocusToolbar,
@@ -273,10 +281,7 @@ var CommentEditorWithIntl = exports.CommentEditorWithIntl = function CommentEdit
     dispatchAnalyticsEvent: dispatchAnalyticsEvent,
     containerElement: containerElement.current,
     twoLineEditorToolbar: isTwoLineToolbarEnabled
-  }), (0, _react2.jsx)("div", {
-    css: (0, _expValEquals.expValEquals)('platform_editor_core_static_emotion_non_central', 'isEnabled', true) ? [mainToolbarCustomComponentsSlotStyleNew, isTwoLineToolbarEnabled && mainToolbarCustomComponentsSlotStyleTwoLineToolbarNew] : /* eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766 */
-    mainToolbarCustomComponentsSlotStyle(isTwoLineToolbarEnabled)
-  }, customPrimaryToolbarComponents))), (0, _react2.jsx)(_ClickAreaBlock.default, {
+  }), customToolbarSlot)), (0, _react2.jsx)(_ClickAreaBlock.default, {
     editorView: editorView,
     editorDisabled: disabled
   }, (0, _react2.jsx)(_ui.WidthConsumer, null, function (_ref) {

package/dist/cjs/ui/Appearance/Comment/CommentToolbar.js

@@ -0,0 +1,32 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CommentToolbar = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _toolbar = require("@atlaskit/editor-common/toolbar");
+var _toolbar2 = require("../../../utils/toolbar");
+var _Toolbar = require("../../Toolbar/Toolbar");
+/**
+ * Primary toolbar driven by components registered by `editor-plugin-toolbar`, introduced in `platform_editor_toolbar_aifc`.
+ */
+var CommentToolbar = exports.CommentToolbar = function CommentToolbar(_ref) {
+  var _editorAPI$toolbar;
+  var editorAPI = _ref.editorAPI,
+    editorView = _ref.editorView;
+  var components = editorAPI === null || editorAPI === void 0 || (_editorAPI$toolbar = editorAPI.toolbar) === null || _editorAPI$toolbar === void 0 ? void 0 : _editorAPI$toolbar.actions.getComponents();
+  var toolbar = components === null || components === void 0 ? void 0 : components.find(function (component) {
+    return component.key === _toolbar.TOOLBARS.PRIMARY_TOOLBAR;
+  });
+  if (!components || !(0, _toolbar2.isToolbar)(toolbar)) {
+    return null;
+  }
+  return /*#__PURE__*/_react.default.createElement(_Toolbar.ToolbarNext, {
+    toolbar: toolbar,
+    components: components,
+    editorView: editorView,
+    editorAPI: editorAPI
+  });
+};

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

@@ -15,10 +15,12 @@ var _ui = require("@atlaskit/editor-common/ui");
 var _useSharedPluginStateSelector = require("@atlaskit/editor-common/use-shared-plugin-state-selector");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _getPrimaryToolbarComponents = require("../../Toolbar/getPrimaryToolbarComponents");
 var _FullPageContentArea = require("./FullPageContentArea");
 var _FullPageToolbar = require("./FullPageToolbar");
+var _FullPageToolbarNext = require("./FullPageToolbarNext");
 var _getEditorViewModeSync = require("./getEditorViewModeSync");
 var _StyledComponents = require("./StyledComponents");
 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); }
@@ -169,7 +171,12 @@ 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, _react2.jsx)(_FullPageToolbar.FullPageToolbar, {
+  }, !isEditorToolbarHidden && ((0, _expValEquals.expValEquals)('platform_editor_toolbar_aifc', 'isEnabled', true) ? (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, {
     appearance: props.appearance,
     editorAPI: editorAPI,
     beforeIcon: props.primaryToolbarIconBefore,
@@ -196,7 +203,7 @@ var FullPageEditor = exports.FullPageEditor = function FullPageEditor(props) {
     providerFactory: props.providerFactory,
     showKeyline: showKeyline,
     featureFlags: props.featureFlags
-  }), (0, _react2.jsx)(_FullPageContentArea.FullPageContentArea, {
+  })), (0, _react2.jsx)(_FullPageContentArea.FullPageContentArea, {
     editorAPI: editorAPI,
     ref: scrollContentContainerRef,
     appearance: props.appearance,

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

@@ -0,0 +1,4 @@
+
+._n7zl7r9e{border-bottom:var(--ds-border-width,1px) solid var(--ds-border,#091e4224)}._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

@@ -0,0 +1,69 @@
+/* FullPageToolbarNext.tsx generated by @compiled/babel-plugin v0.36.1 */
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+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 _toolbar = require("@atlaskit/editor-common/toolbar");
+var _toolbar2 = require("../../../utils/toolbar");
+var _Toolbar = require("../../Toolbar/Toolbar");
+var _ToolbarPortal = require("../../Toolbar/ToolbarPortal");
+var styles = {
+  mainToolbarIconBefore: "_19pkpxbi _2hwxpxbi _otyrpxbi",
+  mainToolbarWrapper: "_n7zl7r9e"
+};
+var MainToolbarWrapper = function MainToolbarWrapper(_ref) {
+  var children = _ref.children,
+    testId = _ref.testId;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    "data-testid": testId,
+    className: (0, _runtime.ax)([styles.mainToolbarWrapper])
+  }, 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;
+  var components = editorAPI === null || editorAPI === void 0 || (_editorAPI$toolbar = editorAPI.toolbar) === null || _editorAPI$toolbar === void 0 ? void 0 : _editorAPI$toolbar.actions.getComponents();
+  var toolbar = components === null || components === void 0 ? void 0 : components.find(function (component) {
+    return component.key === _toolbar.TOOLBARS.PRIMARY_TOOLBAR;
+  });
+
+  // When a toolbar portal context is provided, render the  toolbar inside a portal.
+  // Otherwise fall back to a fragment just to avoid forking rendering logic.
+  var _ref3 = (_useToolbarPortal = (0, _ToolbarPortal.useToolbarPortal)()) !== null && _useToolbarPortal !== void 0 ? _useToolbarPortal : {
+      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
+  })));
+};

package/dist/cjs/ui/ContentStyles/status.js

@@ -120,7 +120,8 @@ var baseStatusStyles = (0, _react.css)({
     maxWidth: '100%',
     paddingInline: "var(--ds-space-050, 4px)",
     display: 'inline-flex',
-    borderRadius: '3px',
+    // eslint-disable-next-line @atlaskit/design-system/no-unsafe-design-token-usage
+    borderRadius: "var(--ds-border-radius-100, 3px)",
     blockSize: 'min-content',
     position: 'static',
     overflow: 'hidden',

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

@@ -11,7 +11,8 @@ var _react = require("@emotion/react");
 var findReplaceStyles = exports.findReplaceStyles = (0, _react.css)({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
   '.search-match': {
-    borderRadius: '3px',
+    // eslint-disable-next-line @atlaskit/design-system/no-unsafe-design-token-usage
+    borderRadius: "var(--ds-border-radius-100, 3px)",
     backgroundColor: "var(--ds-background-accent-teal-subtlest, #E7F9FF)",
     boxShadow: "var(--ds-shadow-raised, 0 1px 1px 0 rgba(9, 30, 66, 0.25), 0 0 1px 0 rgba(9, 30, 66, 0.31))".concat(", inset 0 0 0 1px ", "var(--ds-border-input, #8590A2)")
   },

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

@@ -52,7 +52,8 @@ var statusStyles = exports.statusStyles = (0, _react.css)({
     maxWidth: '100%',
     paddingInline: "var(--ds-space-050, 4px)",
     display: 'inline-flex',
-    borderRadius: '3px',
+    // eslint-disable-next-line @atlaskit/design-system/no-unsafe-design-token-usage
+    borderRadius: "var(--ds-border-radius-100, 3px)",
     blockSize: 'min-content',
     position: 'static',
     overflow: 'hidden',

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

@@ -4,10 +4,18 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Toolbar = void 0;
+exports.ToolbarNext = exports.Toolbar = void 0;
 var _react = _interopRequireDefault(require("react"));
+var _toolbar = require("@atlaskit/editor-common/toolbar");
 var _types = require("@atlaskit/editor-common/types");
+var _editorToolbar = require("@atlaskit/editor-toolbar");
+var _editorToolbarModel = require("@atlaskit/editor-toolbar-model");
 var _ToolbarInner = require("./ToolbarInner");
+/**
+ * *Warning:* With `platform_editor_toolbar_aifc` enabled this component is no longer used and is replaced with `<ToolbarNext />`.
+ *
+ * If making changes to this component please ensure to also update `<ToolbarNext />`.
+ */
 var Toolbar = exports.Toolbar = function Toolbar(props) {
   return /*#__PURE__*/_react.default.createElement(_ToolbarInner.ToolbarInner, {
     items: props.items,
@@ -25,4 +33,29 @@ var Toolbar = exports.Toolbar = function Toolbar(props) {
     isToolbarReducedSpacing: props.toolbarSize < _types.ToolbarSize.XXL,
     containerElement: props.containerElement
   });
+};
+/**
+ * Renders a primary toolbar, driven by components registed by `editor-plugin-toolbar`. `ToolbarModelRenderer` will just
+ * render the toolbar structure, the design is driven per component registered including the toolbar itself.
+ *
+ * The majority of components UI should use `@atlaskit/editor-toolbar` components.
+ */
+var ToolbarNext = exports.ToolbarNext = function ToolbarNext(_ref) {
+  var toolbar = _ref.toolbar,
+    components = _ref.components,
+    editorView = _ref.editorView,
+    editorAPI = _ref.editorAPI;
+  return /*#__PURE__*/_react.default.createElement(_toolbar.EditorToolbarProvider, {
+    editorView: editorView !== null && editorView !== void 0 ? editorView : null
+  }, /*#__PURE__*/_react.default.createElement(_toolbar.EditorToolbarUIProvider, {
+    api: editorAPI
+  }, /*#__PURE__*/_react.default.createElement(_editorToolbarModel.ToolbarModelRenderer, {
+    toolbar: toolbar,
+    components: components,
+    fallbacks: {
+      group: _editorToolbar.ToolbarButtonGroup,
+      section: _editorToolbar.ToolbarSection,
+      menuSection: _editorToolbar.ToolbarDropdownItemSection
+    }
+  })));
 };

package/dist/cjs/utils/toolbar.js

@@ -0,0 +1,9 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.isToolbar = void 0;
+var isToolbar = exports.isToolbar = function isToolbar(component) {
+  return (component === null || component === void 0 ? void 0 : component.type) === 'toolbar';
+};

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

package/dist/es2019/index.js

@@ -36,4 +36,6 @@ export { getNodesCount } from './utils/getNodesCount';
 export { default as measurements } from './utils/performance/measure-enum';
 export { createFeatureFlagsFromProps } from './utils/feature-flags-from-props';
 export { default as EditorActions } from './actions';
-export { createEditorContentStyle } from './ui/ContentStyles';
+export { createEditorContentStyle } from './ui/ContentStyles';
+export { getDefaultPresetOptionsFromEditorProps } from './create-editor/create-plugins-list';
+export { ReactEditorView } from './create-editor/ReactEditorView';

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

@@ -31,6 +31,7 @@ import PluginSlot from '../../PluginSlot';
 import { getPrimaryToolbarComponents } from '../../Toolbar/getPrimaryToolbarComponents';
 import { ToolbarWithSizeDetector as Toolbar } from '../../Toolbar/ToolbarWithSizeDetector';
 import WithFlash from '../../WithFlash';
+import { CommentToolbar } from './CommentToolbar';
 import { MainToolbar } from './Toolbar';
 const CommentEditorMargin = 14;
 const MAXIMUM_TWO_LINE_TOOLBAR_BREAKPOINT = 490;
@@ -228,6 +229,10 @@ export const CommentEditorWithIntl = props => {
   if (Array.isArray(primaryToolbarState === null || primaryToolbarState === void 0 ? void 0 : primaryToolbarState.components) && Array.isArray(primaryToolbarComponents)) {
     primaryToolbarComponents = primaryToolbarState.components.concat(primaryToolbarComponents);
   }
+  const customToolbarSlot = jsx("div", {
+    css: expValEquals('platform_editor_core_static_emotion_non_central', 'isEnabled', true) ? [mainToolbarCustomComponentsSlotStyleNew, isTwoLineToolbarEnabled && mainToolbarCustomComponentsSlotStyleTwoLineToolbarNew] : /* eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766 */
+    mainToolbarCustomComponentsSlotStyle(isTwoLineToolbarEnabled)
+  }, customPrimaryToolbarComponents);
   return jsx(WithFlash, {
     animate: maxContentSizeReached
   }, jsx(WidthProvider, null, jsx("div", {
@@ -244,7 +249,10 @@ export const CommentEditorWithIntl = props => {
   }, jsx(MainToolbar, {
     useStickyToolbar: useStickyToolbar,
     twoLineEditorToolbar: isTwoLineToolbarEnabled
-  }, jsx(ToolbarArrowKeyNavigationProvider, {
+  }, expValEquals('platform_editor_toolbar_aifc', 'isEnabled', true) ? jsx(React.Fragment, null, jsx(CommentToolbar, {
+    editorAPI: editorAPI,
+    editorView: editorView
+  }), customToolbarSlot) : jsx(ToolbarArrowKeyNavigationProvider, {
     editorView: editorView,
     childComponentSelector: "[data-testid='ak-editor-main-toolbar']",
     isShortcutToFocusToolbar: isShortcutToFocusToolbar,
@@ -275,10 +283,7 @@ export const CommentEditorWithIntl = props => {
     dispatchAnalyticsEvent: dispatchAnalyticsEvent,
     containerElement: containerElement.current,
     twoLineEditorToolbar: isTwoLineToolbarEnabled
-  }), jsx("div", {
-    css: expValEquals('platform_editor_core_static_emotion_non_central', 'isEnabled', true) ? [mainToolbarCustomComponentsSlotStyleNew, isTwoLineToolbarEnabled && mainToolbarCustomComponentsSlotStyleTwoLineToolbarNew] : /* eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766 */
-    mainToolbarCustomComponentsSlotStyle(isTwoLineToolbarEnabled)
-  }, customPrimaryToolbarComponents))), jsx(ClickAreaBlock, {
+  }), customToolbarSlot)), jsx(ClickAreaBlock, {
     editorView: editorView,
     editorDisabled: disabled
   }, jsx(WidthConsumer, null, ({