@atlaskit/editor-core 215.20.0 → 215.20.1

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/editor-core
 
+## 215.20.1
+
+### Patch Changes
+
+- [`63c5e344d169c`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/63c5e344d169c) -
+  Reduce the VC impact of the editor toolbar
+- Updated dependencies
+
 ## 215.20.0
 
 ### Minor Changes

package/afm-cc/tsconfig.json

@@ -5,7 +5,8 @@
 		"target": "es5",
 		"outDir": "../../../../../confluence/tsDist/@atlaskit__editor-core",
 		"rootDir": "../",
-		"composite": true
+		"composite": true,
+		"noCheck": true
 	},
 	"include": [
 		"../src/**/*.ts",

package/afm-jira/tsconfig.json

@@ -5,7 +5,8 @@
 		"target": "es5",
 		"outDir": "../../../../../jira/tsDist/@atlaskit__editor-core/app",
 		"rootDir": "../",
-		"composite": true
+		"composite": true,
+		"noCheck": true
 	},
 	"include": [
 		"../src/**/*.ts",

package/afm-products/tsconfig.json

@@ -5,7 +5,8 @@
 		"target": "es5",
 		"outDir": "../../../../../tsDist/@atlaskit__editor-core/app",
 		"rootDir": "../",
-		"composite": true
+		"composite": true,
+		"noCheck": true
 	},
 	"include": [
 		"../src/**/*.ts",

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

@@ -122,10 +122,6 @@ var tableFullPageEditorStylesNew = (0, _react2.css)({
     width: '100%'
   }
 });
-var scrollGutter = (0, _react2.css)({
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-  display: 'none'
-});
 var editorContentAreaContainerNestedDndStyle = (0, _react2.css)({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
   '.fabric-editor--full-width-mode': {
@@ -217,13 +213,14 @@ var contentAreaHeightNoToolbar = (0, _react2.css)({
 var CONTENT_AREA_TEST_ID = exports.CONTENT_AREA_TEST_ID = 'ak-editor-fp-content-area';
 var EDITOR_CONTAINER = exports.EDITOR_CONTAINER = 'ak-editor-container';
 var Content = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
-  var _contentAreaRef$curre;
+  var _props$editorAPI, _contentAreaRef$curre, _allowScrollGutter$gu;
   var theme = (0, _react2.useTheme)();
   var fullWidthMode = props.appearance === 'full-width';
   var maxWidthMode = props.appearance === 'max';
   var scrollContainerRef = (0, _react.useRef)(null);
   var contentAreaRef = (0, _react.useRef)(null);
   var containerRef = (0, _react.useRef)(null);
+  var allowScrollGutter = (_props$editorAPI = props.editorAPI) === null || _props$editorAPI === void 0 || (_props$editorAPI = _props$editorAPI.base) === null || _props$editorAPI === void 0 || (_props$editorAPI = _props$editorAPI.sharedState.currentState()) === null || _props$editorAPI === void 0 ? void 0 : _props$editorAPI.allowScrollGutter;
   (0, _react.useImperativeHandle)(ref, function () {
     return {
       get scrollContainer() {
@@ -304,9 +301,11 @@ var Content = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     containerElement: scrollContainerRef.current,
     dispatchAnalyticsEvent: props.dispatchAnalyticsEvent,
     wrapperElement: props.wrapperElement
-  }), props.editorDOMElement, !!props.customContentComponents && 'after' in props.customContentComponents ? (0, _contentComponentWrapper.contentComponentClickWrapper)(props.customContentComponents.after) : null, (0, _expVal.expVal)('platform_editor_hydratable_ui', 'isEnabled', false) && (0, _react2.jsx)("div", {
+  }), props.editorDOMElement, !!props.customContentComponents && 'after' in props.customContentComponents ? (0, _contentComponentWrapper.contentComponentClickWrapper)(props.customContentComponents.after) : null, (0, _expVal.expVal)('platform_editor_scroll_gutter_fix', 'isEnabled', false) && allowScrollGutter && (0, _react2.jsx)("div", {
     id: "editor-scroll-gutter",
-    css: scrollGutter,
+    style: {
+      paddingBottom: "".concat((_allowScrollGutter$gu = allowScrollGutter.gutterSize) !== null && _allowScrollGutter$gu !== void 0 ? _allowScrollGutter$gu : '120', "px")
+    },
     "data-vc": "scroll-gutter"
   })))))), (0, _react2.jsx)("div", {
     css: _StyledComponents.sidebarArea

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

@@ -6,10 +6,12 @@
 ._19pkpxbi{margin-top:var(--ds-space-200,1pc)}
 ._1bahesu3{justify-content:flex-end}
 ._1e0c1txw{display:flex}
+._1f38ptqj{container-name:toolbar-container}
 ._1pby16oo{z-index:510}
 ._1ul91ns9{min-width:-moz-fit-content;min-width:fit-content}
 ._2hwxpxbi{margin-right:var(--ds-space-200,1pc)}
 ._4cvr1h6o{align-items:center}
 ._4t3izwfg{height:2pc}
+._7cca15wb{container-type:inline-size}
 ._kqswh2mm{position:relative}
 ._otyrpxbi{margin-bottom:var(--ds-space-200,1pc)}

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

@@ -29,6 +29,7 @@ var styles = {
   mainToolbarWithKeyline: "_16qs1nax",
   customToolbarWrapperStyle: "_4cvr1h6o _1e0c1txw",
   firstChildWrapperOneLine: "_1e0c1txw _16jlkb7n",
+  firstChildWrapperContainerContext: "_7cca15wb _1f38ptqj",
   secondChildWrapperOneLine: "_1e0c1txw _1ul91ns9 _4cvr1h6o",
   beforePrimaryToolbarComponents: "_1e0c1txw _16jlkb7n _1bahesu3 _4cvr1h6o"
 };
@@ -45,7 +46,7 @@ var FirstChildWrapper = function FirstChildWrapper(_ref2) {
   var children = _ref2.children;
   return /*#__PURE__*/_react.default.createElement("div", {
     "data-testid": "main-toolbar-first-child-wrapper",
-    className: (0, _runtime.ax)([styles.firstChildWrapperOneLine])
+    className: (0, _runtime.ax)([styles.firstChildWrapperOneLine, (0, _expValEquals.expValEquals)('platform_editor_reduce_toolbar_vc_impact', 'isEnabled', true) && styles.firstChildWrapperContainerContext])
   }, children);
 };
 var SecondChildWrapper = function SecondChildWrapper(_ref3) {

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

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

@@ -113,10 +113,6 @@ const tableFullPageEditorStylesNew = css({
     width: '100%'
   }
 });
-const scrollGutter = css({
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-  display: 'none'
-});
 const editorContentAreaContainerNestedDndStyle = css({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
   '.fabric-editor--full-width-mode': {
@@ -211,13 +207,14 @@ const contentAreaHeightNoToolbar = css({
 export const CONTENT_AREA_TEST_ID = 'ak-editor-fp-content-area';
 export const EDITOR_CONTAINER = 'ak-editor-container';
 const Content = /*#__PURE__*/React.forwardRef((props, ref) => {
-  var _contentAreaRef$curre;
+  var _props$editorAPI, _props$editorAPI$base, _props$editorAPI$base2, _contentAreaRef$curre, _allowScrollGutter$gu;
   const theme = useTheme();
   const fullWidthMode = props.appearance === 'full-width';
   const maxWidthMode = props.appearance === 'max';
   const scrollContainerRef = useRef(null);
   const contentAreaRef = useRef(null);
   const containerRef = useRef(null);
+  const allowScrollGutter = (_props$editorAPI = props.editorAPI) === null || _props$editorAPI === void 0 ? void 0 : (_props$editorAPI$base = _props$editorAPI.base) === null || _props$editorAPI$base === void 0 ? void 0 : (_props$editorAPI$base2 = _props$editorAPI$base.sharedState.currentState()) === null || _props$editorAPI$base2 === void 0 ? void 0 : _props$editorAPI$base2.allowScrollGutter;
   useImperativeHandle(ref, () => ({
     get scrollContainer() {
       return scrollContainerRef.current;
@@ -298,9 +295,11 @@ const Content = /*#__PURE__*/React.forwardRef((props, ref) => {
     containerElement: scrollContainerRef.current,
     dispatchAnalyticsEvent: props.dispatchAnalyticsEvent,
     wrapperElement: props.wrapperElement
-  }), props.editorDOMElement, !!props.customContentComponents && 'after' in props.customContentComponents ? contentComponentClickWrapper(props.customContentComponents.after) : null, expVal('platform_editor_hydratable_ui', 'isEnabled', false) && jsx("div", {
+  }), props.editorDOMElement, !!props.customContentComponents && 'after' in props.customContentComponents ? contentComponentClickWrapper(props.customContentComponents.after) : null, expVal('platform_editor_scroll_gutter_fix', 'isEnabled', false) && allowScrollGutter && jsx("div", {
     id: "editor-scroll-gutter",
-    css: scrollGutter,
+    style: {
+      paddingBottom: `${(_allowScrollGutter$gu = allowScrollGutter.gutterSize) !== null && _allowScrollGutter$gu !== void 0 ? _allowScrollGutter$gu : '120'}px`
+    },
     "data-vc": "scroll-gutter"
   })))))), jsx("div", {
     css: sidebarArea

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

@@ -6,10 +6,12 @@
 ._19pkpxbi{margin-top:var(--ds-space-200,1pc)}
 ._1bahesu3{justify-content:flex-end}
 ._1e0c1txw{display:flex}
+._1f38ptqj{container-name:toolbar-container}
 ._1pby16oo{z-index:510}
 ._1ul91ns9{min-width:-moz-fit-content;min-width:fit-content}
 ._2hwxpxbi{margin-right:var(--ds-space-200,1pc)}
 ._4cvr1h6o{align-items:center}
 ._4t3izwfg{height:2pc}
+._7cca15wb{container-type:inline-size}
 ._kqswh2mm{position:relative}
 ._otyrpxbi{margin-bottom:var(--ds-space-200,1pc)}

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

@@ -21,6 +21,7 @@ const styles = {
   mainToolbarWithKeyline: "_16qs1nax",
   customToolbarWrapperStyle: "_4cvr1h6o _1e0c1txw",
   firstChildWrapperOneLine: "_1e0c1txw _16jlkb7n",
+  firstChildWrapperContainerContext: "_7cca15wb _1f38ptqj",
   secondChildWrapperOneLine: "_1e0c1txw _1ul91ns9 _4cvr1h6o",
   beforePrimaryToolbarComponents: "_1e0c1txw _16jlkb7n _1bahesu3 _4cvr1h6o"
 };
@@ -39,7 +40,7 @@ const FirstChildWrapper = ({
 }) => {
   return /*#__PURE__*/React.createElement("div", {
     "data-testid": "main-toolbar-first-child-wrapper",
-    className: ax([styles.firstChildWrapperOneLine])
+    className: ax([styles.firstChildWrapperOneLine, expValEquals('platform_editor_reduce_toolbar_vc_impact', 'isEnabled', true) && styles.firstChildWrapperContainerContext])
   }, children);
 };
 const SecondChildWrapper = ({

package/dist/es2019/version-wrapper.js

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

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

@@ -112,10 +112,6 @@ var tableFullPageEditorStylesNew = css({
     width: '100%'
   }
 });
-var scrollGutter = css({
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-  display: 'none'
-});
 var editorContentAreaContainerNestedDndStyle = css({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
   '.fabric-editor--full-width-mode': {
@@ -207,13 +203,14 @@ var contentAreaHeightNoToolbar = css({
 export var CONTENT_AREA_TEST_ID = 'ak-editor-fp-content-area';
 export var EDITOR_CONTAINER = 'ak-editor-container';
 var Content = /*#__PURE__*/React.forwardRef(function (props, ref) {
-  var _contentAreaRef$curre;
+  var _props$editorAPI, _contentAreaRef$curre, _allowScrollGutter$gu;
   var theme = useTheme();
   var fullWidthMode = props.appearance === 'full-width';
   var maxWidthMode = props.appearance === 'max';
   var scrollContainerRef = useRef(null);
   var contentAreaRef = useRef(null);
   var containerRef = useRef(null);
+  var allowScrollGutter = (_props$editorAPI = props.editorAPI) === null || _props$editorAPI === void 0 || (_props$editorAPI = _props$editorAPI.base) === null || _props$editorAPI === void 0 || (_props$editorAPI = _props$editorAPI.sharedState.currentState()) === null || _props$editorAPI === void 0 ? void 0 : _props$editorAPI.allowScrollGutter;
   useImperativeHandle(ref, function () {
     return {
       get scrollContainer() {
@@ -294,9 +291,11 @@ var Content = /*#__PURE__*/React.forwardRef(function (props, ref) {
     containerElement: scrollContainerRef.current,
     dispatchAnalyticsEvent: props.dispatchAnalyticsEvent,
     wrapperElement: props.wrapperElement
-  }), props.editorDOMElement, !!props.customContentComponents && 'after' in props.customContentComponents ? contentComponentClickWrapper(props.customContentComponents.after) : null, expVal('platform_editor_hydratable_ui', 'isEnabled', false) && jsx("div", {
+  }), props.editorDOMElement, !!props.customContentComponents && 'after' in props.customContentComponents ? contentComponentClickWrapper(props.customContentComponents.after) : null, expVal('platform_editor_scroll_gutter_fix', 'isEnabled', false) && allowScrollGutter && jsx("div", {
     id: "editor-scroll-gutter",
-    css: scrollGutter,
+    style: {
+      paddingBottom: "".concat((_allowScrollGutter$gu = allowScrollGutter.gutterSize) !== null && _allowScrollGutter$gu !== void 0 ? _allowScrollGutter$gu : '120', "px")
+    },
     "data-vc": "scroll-gutter"
   })))))), jsx("div", {
     css: sidebarArea

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

@@ -6,10 +6,12 @@
 ._19pkpxbi{margin-top:var(--ds-space-200,1pc)}
 ._1bahesu3{justify-content:flex-end}
 ._1e0c1txw{display:flex}
+._1f38ptqj{container-name:toolbar-container}
 ._1pby16oo{z-index:510}
 ._1ul91ns9{min-width:-moz-fit-content;min-width:fit-content}
 ._2hwxpxbi{margin-right:var(--ds-space-200,1pc)}
 ._4cvr1h6o{align-items:center}
 ._4t3izwfg{height:2pc}
+._7cca15wb{container-type:inline-size}
 ._kqswh2mm{position:relative}
 ._otyrpxbi{margin-bottom:var(--ds-space-200,1pc)}

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

@@ -21,6 +21,7 @@ var styles = {
   mainToolbarWithKeyline: "_16qs1nax",
   customToolbarWrapperStyle: "_4cvr1h6o _1e0c1txw",
   firstChildWrapperOneLine: "_1e0c1txw _16jlkb7n",
+  firstChildWrapperContainerContext: "_7cca15wb _1f38ptqj",
   secondChildWrapperOneLine: "_1e0c1txw _1ul91ns9 _4cvr1h6o",
   beforePrimaryToolbarComponents: "_1e0c1txw _16jlkb7n _1bahesu3 _4cvr1h6o"
 };
@@ -37,7 +38,7 @@ var FirstChildWrapper = function FirstChildWrapper(_ref2) {
   var children = _ref2.children;
   return /*#__PURE__*/React.createElement("div", {
     "data-testid": "main-toolbar-first-child-wrapper",
-    className: ax([styles.firstChildWrapperOneLine])
+    className: ax([styles.firstChildWrapperOneLine, expValEquals('platform_editor_reduce_toolbar_vc_impact', 'isEnabled', true) && styles.firstChildWrapperContainerContext])
   }, children);
 };
 var SecondChildWrapper = function SecondChildWrapper(_ref3) {

package/dist/esm/version-wrapper.js

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

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

@@ -9,6 +9,7 @@ import type { DispatchAnalyticsEvent } from '@atlaskit/editor-common/analytics';
 import type { EventDispatcher } from '@atlaskit/editor-common/event-dispatcher';
 import type { ProviderFactory } from '@atlaskit/editor-common/provider-factory';
 import type { EditorAppearance, EditorContentMode, FeatureFlags, OptionalPlugin, PublicPluginAPI, ReactHookFactory, UIComponentFactory } from '@atlaskit/editor-common/types';
+import { type BasePlugin } from '@atlaskit/editor-plugins/base';
 import { type ContextPanelPlugin } from '@atlaskit/editor-plugins/context-panel';
 import { type ViewMode } from '@atlaskit/editor-plugins/editor-viewmode';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
@@ -24,7 +25,7 @@ interface FullPageEditorContentAreaProps {
     disabled: boolean | undefined;
     dispatchAnalyticsEvent: DispatchAnalyticsEvent | undefined;
     editorActions: EditorActions | undefined;
-    editorAPI: PublicPluginAPI<[OptionalPlugin<ContextPanelPlugin>]> | undefined;
+    editorAPI: PublicPluginAPI<[OptionalPlugin<ContextPanelPlugin>, BasePlugin]> | undefined;
     editorDOMElement: ReactElement;
     editorView: EditorView;
     eventDispatcher: EventDispatcher | undefined;

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

@@ -9,6 +9,7 @@ import type { DispatchAnalyticsEvent } from '@atlaskit/editor-common/analytics';
 import type { EventDispatcher } from '@atlaskit/editor-common/event-dispatcher';
 import type { ProviderFactory } from '@atlaskit/editor-common/provider-factory';
 import type { EditorAppearance, EditorContentMode, FeatureFlags, OptionalPlugin, PublicPluginAPI, ReactHookFactory, UIComponentFactory } from '@atlaskit/editor-common/types';
+import { type BasePlugin } from '@atlaskit/editor-plugins/base';
 import { type ContextPanelPlugin } from '@atlaskit/editor-plugins/context-panel';
 import { type ViewMode } from '@atlaskit/editor-plugins/editor-viewmode';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
@@ -25,7 +26,8 @@ interface FullPageEditorContentAreaProps {
     dispatchAnalyticsEvent: DispatchAnalyticsEvent | undefined;
     editorActions: EditorActions | undefined;
     editorAPI: PublicPluginAPI<[
-        OptionalPlugin<ContextPanelPlugin>
+        OptionalPlugin<ContextPanelPlugin>,
+        BasePlugin
     ]> | undefined;
     editorDOMElement: ReactElement;
     editorView: EditorView;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-core",
-	"version": "215.20.0",
+	"version": "215.20.1",
 	"description": "A package contains Atlassian editor core functionality",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -65,7 +65,7 @@
 		"@atlaskit/platform-feature-flags-react": "^0.4.0",
 		"@atlaskit/react-ufo": "^4.15.0",
 		"@atlaskit/task-decision": "^19.2.0",
-		"@atlaskit/tmp-editor-statsig": "^15.2.0",
+		"@atlaskit/tmp-editor-statsig": "^15.6.0",
 		"@atlaskit/tokens": "^8.4.0",
 		"@atlaskit/tooltip": "^20.11.0",
 		"@atlaskit/width-detector": "^5.0.0",
@@ -94,7 +94,7 @@
 		"@af/visual-regression": "workspace:^",
 		"@atlaskit/adf-utils": "^19.26.0",
 		"@atlaskit/analytics-listeners": "^9.1.0",
-		"@atlaskit/collab-provider": "^14.1.0",
+		"@atlaskit/collab-provider": "^14.2.0",
 		"@atlaskit/editor-plugin-annotation": "^6.3.0",
 		"@atlaskit/editor-plugin-card": "^11.5.0",
 		"@atlaskit/editor-plugin-list": "^8.2.0",