@atlaskit/editor-common 96.3.1 → 96.3.2

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @atlaskit/editor-common
 
+## 96.3.2
+
+### Patch Changes
+
+- [#175424](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/175424)
+  [`a58e3d02b1639`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/a58e3d02b1639) -
+  [ux] Fixes position of the Selection/floating toolbar to avoid horizontal scroll when text is
+  selected close to the right side of the viewport.
+- Updated dependencies
+
 ## 96.3.1
 
 ### Patch Changes

package/dist/cjs/monitoring/error.js

@@ -17,7 +17,7 @@ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 var SENTRY_DSN = 'https://0b10c8e02fb44d8796c047b102c9bee8@o55978.ingest.sentry.io/4505129224110080';
 var packageName = 'editor-common'; // Sentry doesn't accept '/' in its releases https://docs.sentry.io/platforms/javascript/configuration/releases/
-var packageVersion = "96.3.1";
+var packageVersion = "96.3.2";
 var sanitiseSentryEvents = function sanitiseSentryEvents(data, _hint) {
   // Remove URL as it has UGC
   // TODO: Sanitise the URL instead of just removing it

package/dist/cjs/resizer/BreakoutResizer.js

@@ -74,7 +74,8 @@ var BreakoutResizer = exports.BreakoutResizer = function BreakoutResizer(_ref) {
     disabled = _ref.disabled,
     getEditorWidth = _ref.getEditorWidth,
     parentRef = _ref.parentRef,
-    editorAnalyticsApi = _ref.editorAnalyticsApi;
+    editorAnalyticsApi = _ref.editorAnalyticsApi,
+    displayGapCursor = _ref.displayGapCursor;
   var _useState = (0, _react.useState)({
       minWidth: undefined,
       maxWidth: undefined,
@@ -110,6 +111,7 @@ var BreakoutResizer = exports.BreakoutResizer = function BreakoutResizer(_ref) {
     var widthState = getEditorWidth();
     var dispatch = editorView.dispatch,
       state = editorView.state;
+    displayGapCursor(false);
     if (widthState !== undefined && widthState.lineLength !== undefined && widthState.width !== undefined) {
       newMinWidth = Math.min(widthState.lineLength, _editorSharedStyles.akEditorDefaultLayoutWidth);
       newMaxWidth = Math.min(widthState.width - (0, _editorSharedStyles.akEditorGutterPaddingDynamic)() * 2 - _editorSharedStyles.akEditorGutterPadding, _editorSharedStyles.akEditorFullWidthLayoutWidth);
@@ -120,7 +122,7 @@ var BreakoutResizer = exports.BreakoutResizer = function BreakoutResizer(_ref) {
       maxWidth: newMaxWidth
     });
     dispatch(state.tr.setMeta('is-resizer-resizing', true));
-  }, [getEditorWidth, editorView]);
+  }, [getEditorWidth, editorView, displayGapCursor]);
   var handleResizeStop = (0, _react.useCallback)(function (originalState, delta) {
     var newWidth = originalState.width + delta.width;
     var pos = getPos();
@@ -150,13 +152,14 @@ var BreakoutResizer = exports.BreakoutResizer = function BreakoutResizer(_ref) {
       editorAnalyticsApi === null || editorAnalyticsApi === void 0 || editorAnalyticsApi.attachAnalyticsEvent(breakoutResizePayload)(newTr);
     }
     newTr.setMeta('is-resizer-resizing', false).setMeta('scrollIntoView', false);
+    displayGapCursor(true);
     dispatch(newTr);
     setResizingState({
       isResizing: false,
       minWidth: undefined,
       maxWidth: undefined
     });
-  }, [editorView, getPos, editorAnalyticsApi]);
+  }, [getPos, editorView, displayGapCursor, editorAnalyticsApi]);
   if (disabled) {
     return /*#__PURE__*/_react.default.createElement("div", {
       "data-testid": "breakout-resizer-editor-view-wrapper",

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

@@ -24,7 +24,7 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
  * @jsx jsx
  */ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 var packageName = "@atlaskit/editor-common";
-var packageVersion = "96.3.1";
+var packageVersion = "96.3.2";
 var halfFocusRing = 1;
 var dropOffset = '0, 8';
 var DropList = /*#__PURE__*/function (_Component) {

package/dist/cjs/utils/calculate-toolbar-position.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.calculateToolbarPositionTrackHead = exports.calculateToolbarPositionAboveSelection = void 0;
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 /*
   Calculates the position of the floating toolbar relative to the selection.
   This is a re-implementation which closely matches the behaviour on Confluence renderer.
@@ -127,10 +128,18 @@ var calculateToolbarPositionTrackHead = exports.calculateToolbarPositionTrackHea
       top = _getCoordsBelowSelect2.top;
       left = _getCoordsBelowSelect2.left;
     }
+    var leftCoord = Math.max(0, left - wrapperBounds.left);
+    if ((0, _platformFeatureFlags.fg)('platform_editor_selection_toolbar_scroll_fix')) {
+      if (leftCoord + toolbarRect.width > wrapperBounds.width) {
+        var scrollbarWidth = 20;
+        leftCoord = Math.max(0, wrapperBounds.width - (toolbarRect.width + scrollbarWidth));
+      }
+    }
+
     // remap positions from browser document to wrapperBounds
     return {
       top: top - wrapperBounds.top + scrollWrapper.scrollTop,
-      left: Math.max(0, left - wrapperBounds.left)
+      left: leftCoord
     };
   };
 };

package/dist/es2019/monitoring/error.js

@@ -1,7 +1,7 @@
 import { isFedRamp } from './environment';
 const SENTRY_DSN = 'https://0b10c8e02fb44d8796c047b102c9bee8@o55978.ingest.sentry.io/4505129224110080';
 const packageName = 'editor-common'; // Sentry doesn't accept '/' in its releases https://docs.sentry.io/platforms/javascript/configuration/releases/
-const packageVersion = "96.3.1";
+const packageVersion = "96.3.2";
 const sanitiseSentryEvents = (data, _hint) => {
   // Remove URL as it has UGC
   // TODO: Sanitise the URL instead of just removing it

package/dist/es2019/resizer/BreakoutResizer.js

@@ -63,7 +63,8 @@ const BreakoutResizer = ({
   disabled,
   getEditorWidth,
   parentRef,
-  editorAnalyticsApi
+  editorAnalyticsApi,
+  displayGapCursor
 }) => {
   const [{
     minWidth,
@@ -101,6 +102,7 @@ const BreakoutResizer = ({
       dispatch,
       state
     } = editorView;
+    displayGapCursor(false);
     if (widthState !== undefined && widthState.lineLength !== undefined && widthState.width !== undefined) {
       newMinWidth = Math.min(widthState.lineLength, akEditorDefaultLayoutWidth);
       newMaxWidth = Math.min(widthState.width - akEditorGutterPaddingDynamic() * 2 - akEditorGutterPadding, akEditorFullWidthLayoutWidth);
@@ -111,7 +113,7 @@ const BreakoutResizer = ({
       maxWidth: newMaxWidth
     });
     dispatch(state.tr.setMeta('is-resizer-resizing', true));
-  }, [getEditorWidth, editorView]);
+  }, [getEditorWidth, editorView, displayGapCursor]);
   const handleResizeStop = useCallback((originalState, delta) => {
     const newWidth = originalState.width + delta.width;
     const pos = getPos();
@@ -145,13 +147,14 @@ const BreakoutResizer = ({
       editorAnalyticsApi === null || editorAnalyticsApi === void 0 ? void 0 : editorAnalyticsApi.attachAnalyticsEvent(breakoutResizePayload)(newTr);
     }
     newTr.setMeta('is-resizer-resizing', false).setMeta('scrollIntoView', false);
+    displayGapCursor(true);
     dispatch(newTr);
     setResizingState({
       isResizing: false,
       minWidth: undefined,
       maxWidth: undefined
     });
-  }, [editorView, getPos, editorAnalyticsApi]);
+  }, [getPos, editorView, displayGapCursor, editorAnalyticsApi]);
   if (disabled) {
     return /*#__PURE__*/React.createElement("div", {
       "data-testid": "breakout-resizer-editor-view-wrapper",

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

@@ -13,7 +13,7 @@ import withAnalyticsContext from '@atlaskit/analytics-next/withAnalyticsContext'
 import withAnalyticsEvents from '@atlaskit/analytics-next/withAnalyticsEvents';
 import Layer from '../Layer';
 const packageName = "@atlaskit/editor-common";
-const packageVersion = "96.3.1";
+const packageVersion = "96.3.2";
 const halfFocusRing = 1;
 const dropOffset = '0, 8';
 class DropList extends Component {

package/dist/es2019/utils/calculate-toolbar-position.js

@@ -1,3 +1,4 @@
+import { fg } from '@atlaskit/platform-feature-flags';
 /*
   Calculates the position of the floating toolbar relative to the selection.
   This is a re-implementation which closely matches the behaviour on Confluence renderer.
@@ -122,10 +123,18 @@ export const calculateToolbarPositionTrackHead = toolbarTitle => (editorView, ne
       left
     } = getCoordsBelowSelection(bottomCoords, toolbarRect));
   }
+  let leftCoord = Math.max(0, left - wrapperBounds.left);
+  if (fg('platform_editor_selection_toolbar_scroll_fix')) {
+    if (leftCoord + toolbarRect.width > wrapperBounds.width) {
+      const scrollbarWidth = 20;
+      leftCoord = Math.max(0, wrapperBounds.width - (toolbarRect.width + scrollbarWidth));
+    }
+  }
+
   // remap positions from browser document to wrapperBounds
   return {
     top: top - wrapperBounds.top + scrollWrapper.scrollTop,
-    left: Math.max(0, left - wrapperBounds.left)
+    left: leftCoord
   };
 };
 

package/dist/esm/monitoring/error.js

@@ -7,7 +7,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 import { isFedRamp } from './environment';
 var SENTRY_DSN = 'https://0b10c8e02fb44d8796c047b102c9bee8@o55978.ingest.sentry.io/4505129224110080';
 var packageName = 'editor-common'; // Sentry doesn't accept '/' in its releases https://docs.sentry.io/platforms/javascript/configuration/releases/
-var packageVersion = "96.3.1";
+var packageVersion = "96.3.2";
 var sanitiseSentryEvents = function sanitiseSentryEvents(data, _hint) {
   // Remove URL as it has UGC
   // TODO: Sanitise the URL instead of just removing it

package/dist/esm/resizer/BreakoutResizer.js

@@ -64,7 +64,8 @@ var BreakoutResizer = function BreakoutResizer(_ref) {
     disabled = _ref.disabled,
     getEditorWidth = _ref.getEditorWidth,
     parentRef = _ref.parentRef,
-    editorAnalyticsApi = _ref.editorAnalyticsApi;
+    editorAnalyticsApi = _ref.editorAnalyticsApi,
+    displayGapCursor = _ref.displayGapCursor;
   var _useState = useState({
       minWidth: undefined,
       maxWidth: undefined,
@@ -100,6 +101,7 @@ var BreakoutResizer = function BreakoutResizer(_ref) {
     var widthState = getEditorWidth();
     var dispatch = editorView.dispatch,
       state = editorView.state;
+    displayGapCursor(false);
     if (widthState !== undefined && widthState.lineLength !== undefined && widthState.width !== undefined) {
       newMinWidth = Math.min(widthState.lineLength, akEditorDefaultLayoutWidth);
       newMaxWidth = Math.min(widthState.width - akEditorGutterPaddingDynamic() * 2 - akEditorGutterPadding, akEditorFullWidthLayoutWidth);
@@ -110,7 +112,7 @@ var BreakoutResizer = function BreakoutResizer(_ref) {
       maxWidth: newMaxWidth
     });
     dispatch(state.tr.setMeta('is-resizer-resizing', true));
-  }, [getEditorWidth, editorView]);
+  }, [getEditorWidth, editorView, displayGapCursor]);
   var handleResizeStop = useCallback(function (originalState, delta) {
     var newWidth = originalState.width + delta.width;
     var pos = getPos();
@@ -140,13 +142,14 @@ var BreakoutResizer = function BreakoutResizer(_ref) {
       editorAnalyticsApi === null || editorAnalyticsApi === void 0 || editorAnalyticsApi.attachAnalyticsEvent(breakoutResizePayload)(newTr);
     }
     newTr.setMeta('is-resizer-resizing', false).setMeta('scrollIntoView', false);
+    displayGapCursor(true);
     dispatch(newTr);
     setResizingState({
       isResizing: false,
       minWidth: undefined,
       maxWidth: undefined
     });
-  }, [editorView, getPos, editorAnalyticsApi]);
+  }, [getPos, editorView, displayGapCursor, editorAnalyticsApi]);
   if (disabled) {
     return /*#__PURE__*/React.createElement("div", {
       "data-testid": "breakout-resizer-editor-view-wrapper",

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

@@ -21,7 +21,7 @@ import withAnalyticsContext from '@atlaskit/analytics-next/withAnalyticsContext'
 import withAnalyticsEvents from '@atlaskit/analytics-next/withAnalyticsEvents';
 import Layer from '../Layer';
 var packageName = "@atlaskit/editor-common";
-var packageVersion = "96.3.1";
+var packageVersion = "96.3.2";
 var halfFocusRing = 1;
 var dropOffset = '0, 8';
 var DropList = /*#__PURE__*/function (_Component) {

package/dist/esm/utils/calculate-toolbar-position.js

@@ -1,3 +1,4 @@
+import { fg } from '@atlaskit/platform-feature-flags';
 /*
   Calculates the position of the floating toolbar relative to the selection.
   This is a re-implementation which closely matches the behaviour on Confluence renderer.
@@ -121,10 +122,18 @@ export var calculateToolbarPositionTrackHead = function calculateToolbarPosition
       top = _getCoordsBelowSelect2.top;
       left = _getCoordsBelowSelect2.left;
     }
+    var leftCoord = Math.max(0, left - wrapperBounds.left);
+    if (fg('platform_editor_selection_toolbar_scroll_fix')) {
+      if (leftCoord + toolbarRect.width > wrapperBounds.width) {
+        var scrollbarWidth = 20;
+        leftCoord = Math.max(0, wrapperBounds.width - (toolbarRect.width + scrollbarWidth));
+      }
+    }
+
     // remap positions from browser document to wrapperBounds
     return {
       top: top - wrapperBounds.top + scrollWrapper.scrollTop,
-      left: Math.max(0, left - wrapperBounds.left)
+      left: leftCoord
     };
   };
 };

package/dist/types/resizer/BreakoutResizer.d.ts

@@ -13,7 +13,7 @@ export declare const ignoreResizerMutations: (mutation: MutationRecord | {
  *
  * use experiment platform_editor_advanced_layouts
  */
-declare const BreakoutResizer: ({ editorView, nodeType, getPos, getRef, disabled, getEditorWidth, parentRef, editorAnalyticsApi, }: {
+declare const BreakoutResizer: ({ editorView, nodeType, getPos, getRef, disabled, getEditorWidth, parentRef, editorAnalyticsApi, displayGapCursor, }: {
     editorView: EditorView;
     nodeType: BreakoutSupportedNodes;
     getPos: getPosHandlerNode;
@@ -22,5 +22,6 @@ declare const BreakoutResizer: ({ editorView, nodeType, getPos, getRef, disabled
     getEditorWidth: () => EditorContainerWidth | undefined;
     parentRef?: HTMLElement | undefined;
     editorAnalyticsApi?: EditorAnalyticsAPI | undefined;
+    displayGapCursor: (toggle: boolean) => boolean;
 }) => JSX.Element;
 export { BreakoutResizer };

package/dist/types-ts4.5/resizer/BreakoutResizer.d.ts

@@ -13,7 +13,7 @@ export declare const ignoreResizerMutations: (mutation: MutationRecord | {
  *
  * use experiment platform_editor_advanced_layouts
  */
-declare const BreakoutResizer: ({ editorView, nodeType, getPos, getRef, disabled, getEditorWidth, parentRef, editorAnalyticsApi, }: {
+declare const BreakoutResizer: ({ editorView, nodeType, getPos, getRef, disabled, getEditorWidth, parentRef, editorAnalyticsApi, displayGapCursor, }: {
     editorView: EditorView;
     nodeType: BreakoutSupportedNodes;
     getPos: getPosHandlerNode;
@@ -22,5 +22,6 @@ declare const BreakoutResizer: ({ editorView, nodeType, getPos, getRef, disabled
     getEditorWidth: () => EditorContainerWidth | undefined;
     parentRef?: HTMLElement | undefined;
     editorAnalyticsApi?: EditorAnalyticsAPI | undefined;
+    displayGapCursor: (toggle: boolean) => boolean;
 }) => JSX.Element;
 export { BreakoutResizer };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-common",
-	"version": "96.3.1",
+	"version": "96.3.2",
 	"description": "A package that contains common classes and components for editor and renderer",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -142,7 +142,7 @@
 		"@atlaskit/media-viewer": "49.4.4",
 		"@atlaskit/mention": "^23.4.0",
 		"@atlaskit/menu": "^2.13.0",
-		"@atlaskit/onboarding": "^12.1.0",
+		"@atlaskit/onboarding": "^12.2.0",
 		"@atlaskit/platform-feature-flags": "^0.3.0",
 		"@atlaskit/popper": "^6.3.0",
 		"@atlaskit/primitives": "^13.3.0",
@@ -299,6 +299,9 @@
 		},
 		"platform_editor_nested_tables_renderer_styles": {
 			"type": "boolean"
+		},
+		"platform_editor_selection_toolbar_scroll_fix": {
+			"type": "boolean"
 		}
 	}
 }