@atlaskit/editor-common 106.3.1 → 106.3.2

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @atlaskit/editor-common
 
+## 106.3.2
+
+### Patch Changes
+
+- [#166424](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/166424)
+  [`5bfa5b37065b1`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/5bfa5b37065b1) -
+  [ED-27807] Fix a bug where first button in the floating toolbar is shown with focus ring when
+  pressing Option+F10
+- [#167027](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/167027)
+  [`44639aaa2f7ae`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/44639aaa2f7ae) -
+  ED-28191 add new description text for resizing shortcut now it applies to more elements behind
+  platform_editor_breakout_resizing experiment
+- Updated dependencies
+
 ## 106.3.1
 
 ### Patch Changes

package/dist/cjs/messages/help-dialog.js

@@ -71,11 +71,21 @@ var helpDialogMessages = exports.helpDialogMessages = (0, _reactIntlNext.defineM
     defaultMessage: 'Increase table or media size',
     description: 'The text is shown as an shortcut description in help dialog modal, when the user uses the described shortcut, he is able to increase the width of the selected element. Optimal characters less than 21.'
   },
+  increaseElementSize: {
+    id: 'fabric.editor.increaseElementSize',
+    defaultMessage: 'Increase element size',
+    description: 'The text is shown as an shortcut description in help dialog modal, when the user uses the described shortcut, he is able to increase the width of the selected element. Optimal characters less than 21.'
+  },
   decreaseSize: {
     id: 'fabric.editor.decreaseSize',
     defaultMessage: 'Decrease table or media size',
     description: 'The text is shown as an shortcut description in help dialog modal, when the user uses the described shortcut, he is able to decrease the width of the selected element. Optimal characters less than 21.'
   },
+  decreaseElementSize: {
+    id: 'fabric.editor.decreaseElementSize',
+    defaultMessage: 'Decrease element size',
+    description: 'The text is shown as an shortcut description in help dialog modal, when the user uses the described shortcut, he is able to decrease the width of the selected element. Optimal characters less than 21.'
+  },
   openCellOptions: {
     id: 'fabric.editor.openCellOptions',
     defaultMessage: 'Open cell options',

package/dist/cjs/monitoring/error.js

@@ -16,7 +16,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 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 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 = "106.3.1";
+var packageVersion = "106.3.2";
 var sanitiseSentryEvents = function sanitiseSentryEvents(data, _hint) {
   // Remove URL as it has UGC
   // Ignored via go/ees007

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

@@ -23,7 +23,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 = "106.3.1";
+var packageVersion = "106.3.2";
 var halfFocusRing = 1;
 var dropOffset = '0, 8';
 // Ignored via go/ees005

package/dist/cjs/ui-menu/ToolbarArrowKeyNavigationProvider/index.js

@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.ToolbarArrowKeyNavigationProvider = exports.KeyDownHandlerContext = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _react2 = require("@emotion/react");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _elementBrowser = require("../../element-browser");
 var _messages = require("../../messages");
@@ -213,10 +214,18 @@ var ToolbarArrowKeyNavigationProvider = exports.ToolbarArrowKeyNavigationProvide
       // Ignored via go/ees005
       // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
       if (isShortcutToFocusToolbar(event)) {
-        var _filteredFocusableEle7, _filteredFocusableEle8;
+        var _filteredFocusableEle7, _filteredFocusableEle8, _filteredFocusableEle9;
         var filteredFocusableElements = getFilteredFocusableElements(wrapperRef === null || wrapperRef === void 0 ? void 0 : wrapperRef.current);
         (_filteredFocusableEle7 = filteredFocusableElements[0]) === null || _filteredFocusableEle7 === void 0 || _filteredFocusableEle7.focus();
-        (_filteredFocusableEle8 = filteredFocusableElements[0]) === null || _filteredFocusableEle8 === void 0 || _filteredFocusableEle8.scrollIntoView({
+
+        // Button component from DS removes focus ring when :focus:not(:focus-visible) is true
+        // Since here we programmatically focus the first button in the toolbar (as suppose to keyboard navigation), browser does not always force focus-visible to true
+        // which is why the first button in the toolbar is not shown with focus ring
+        // The workaround is add a new classname so we add back focus ring when the button is focused
+        if (((_filteredFocusableEle8 = filteredFocusableElements[0]) === null || _filteredFocusableEle8 === void 0 ? void 0 : _filteredFocusableEle8.tagName) === 'BUTTON' && (0, _platformFeatureFlags.fg)('platform_editor_fix_floating_toolbar_focus')) {
+          filteredFocusableElements[0].classList.add('first-floating-toolbar-button');
+        }
+        (_filteredFocusableEle9 = filteredFocusableElements[0]) === null || _filteredFocusableEle9 === void 0 || _filteredFocusableEle9.scrollIntoView({
           behavior: 'smooth',
           block: 'center',
           inline: 'nearest'

package/dist/es2019/messages/help-dialog.js

@@ -65,11 +65,21 @@ export const helpDialogMessages = defineMessages({
     defaultMessage: 'Increase table or media size',
     description: 'The text is shown as an shortcut description in help dialog modal, when the user uses the described shortcut, he is able to increase the width of the selected element. Optimal characters less than 21.'
   },
+  increaseElementSize: {
+    id: 'fabric.editor.increaseElementSize',
+    defaultMessage: 'Increase element size',
+    description: 'The text is shown as an shortcut description in help dialog modal, when the user uses the described shortcut, he is able to increase the width of the selected element. Optimal characters less than 21.'
+  },
   decreaseSize: {
     id: 'fabric.editor.decreaseSize',
     defaultMessage: 'Decrease table or media size',
     description: 'The text is shown as an shortcut description in help dialog modal, when the user uses the described shortcut, he is able to decrease the width of the selected element. Optimal characters less than 21.'
   },
+  decreaseElementSize: {
+    id: 'fabric.editor.decreaseElementSize',
+    defaultMessage: 'Decrease element size',
+    description: 'The text is shown as an shortcut description in help dialog modal, when the user uses the described shortcut, he is able to decrease the width of the selected element. Optimal characters less than 21.'
+  },
   openCellOptions: {
     id: 'fabric.editor.openCellOptions',
     defaultMessage: 'Open cell options',

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 = "106.3.1";
+const packageVersion = "106.3.2";
 const sanitiseSentryEvents = (data, _hint) => {
   // Remove URL as it has UGC
   // Ignored via go/ees007

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 = "106.3.1";
+const packageVersion = "106.3.2";
 const halfFocusRing = 1;
 const dropOffset = '0, 8';
 // Ignored via go/ees005

package/dist/es2019/ui-menu/ToolbarArrowKeyNavigationProvider/index.js

@@ -7,6 +7,7 @@ import React, { useCallback, useLayoutEffect, useMemo, useRef } from 'react';
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { ELEMENT_BROWSER_ID } from '../../element-browser';
 import { fullPageMessages } from '../../messages';
@@ -205,10 +206,18 @@ export const ToolbarArrowKeyNavigationProvider = ({
       // Ignored via go/ees005
       // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
       if (isShortcutToFocusToolbar(event)) {
-        var _filteredFocusableEle7, _filteredFocusableEle8;
+        var _filteredFocusableEle7, _filteredFocusableEle8, _filteredFocusableEle9;
         const filteredFocusableElements = getFilteredFocusableElements(wrapperRef === null || wrapperRef === void 0 ? void 0 : wrapperRef.current);
         (_filteredFocusableEle7 = filteredFocusableElements[0]) === null || _filteredFocusableEle7 === void 0 ? void 0 : _filteredFocusableEle7.focus();
-        (_filteredFocusableEle8 = filteredFocusableElements[0]) === null || _filteredFocusableEle8 === void 0 ? void 0 : _filteredFocusableEle8.scrollIntoView({
+
+        // Button component from DS removes focus ring when :focus:not(:focus-visible) is true
+        // Since here we programmatically focus the first button in the toolbar (as suppose to keyboard navigation), browser does not always force focus-visible to true
+        // which is why the first button in the toolbar is not shown with focus ring
+        // The workaround is add a new classname so we add back focus ring when the button is focused
+        if (((_filteredFocusableEle8 = filteredFocusableElements[0]) === null || _filteredFocusableEle8 === void 0 ? void 0 : _filteredFocusableEle8.tagName) === 'BUTTON' && fg('platform_editor_fix_floating_toolbar_focus')) {
+          filteredFocusableElements[0].classList.add('first-floating-toolbar-button');
+        }
+        (_filteredFocusableEle9 = filteredFocusableElements[0]) === null || _filteredFocusableEle9 === void 0 ? void 0 : _filteredFocusableEle9.scrollIntoView({
           behavior: 'smooth',
           block: 'center',
           inline: 'nearest'

package/dist/esm/messages/help-dialog.js

@@ -65,11 +65,21 @@ export var helpDialogMessages = defineMessages({
     defaultMessage: 'Increase table or media size',
     description: 'The text is shown as an shortcut description in help dialog modal, when the user uses the described shortcut, he is able to increase the width of the selected element. Optimal characters less than 21.'
   },
+  increaseElementSize: {
+    id: 'fabric.editor.increaseElementSize',
+    defaultMessage: 'Increase element size',
+    description: 'The text is shown as an shortcut description in help dialog modal, when the user uses the described shortcut, he is able to increase the width of the selected element. Optimal characters less than 21.'
+  },
   decreaseSize: {
     id: 'fabric.editor.decreaseSize',
     defaultMessage: 'Decrease table or media size',
     description: 'The text is shown as an shortcut description in help dialog modal, when the user uses the described shortcut, he is able to decrease the width of the selected element. Optimal characters less than 21.'
   },
+  decreaseElementSize: {
+    id: 'fabric.editor.decreaseElementSize',
+    defaultMessage: 'Decrease element size',
+    description: 'The text is shown as an shortcut description in help dialog modal, when the user uses the described shortcut, he is able to decrease the width of the selected element. Optimal characters less than 21.'
+  },
   openCellOptions: {
     id: 'fabric.editor.openCellOptions',
     defaultMessage: 'Open cell options',

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 = "106.3.1";
+var packageVersion = "106.3.2";
 var sanitiseSentryEvents = function sanitiseSentryEvents(data, _hint) {
   // Remove URL as it has UGC
   // Ignored via go/ees007

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

@@ -20,7 +20,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 = "106.3.1";
+var packageVersion = "106.3.2";
 var halfFocusRing = 1;
 var dropOffset = '0, 8';
 // Ignored via go/ees005

package/dist/esm/ui-menu/ToolbarArrowKeyNavigationProvider/index.js

@@ -7,6 +7,7 @@ import React, { useCallback, useLayoutEffect, useMemo, useRef } from 'react';
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { ELEMENT_BROWSER_ID } from '../../element-browser';
 import { fullPageMessages } from '../../messages';
@@ -205,10 +206,18 @@ export var ToolbarArrowKeyNavigationProvider = function ToolbarArrowKeyNavigatio
       // Ignored via go/ees005
       // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
       if (isShortcutToFocusToolbar(event)) {
-        var _filteredFocusableEle7, _filteredFocusableEle8;
+        var _filteredFocusableEle7, _filteredFocusableEle8, _filteredFocusableEle9;
         var filteredFocusableElements = getFilteredFocusableElements(wrapperRef === null || wrapperRef === void 0 ? void 0 : wrapperRef.current);
         (_filteredFocusableEle7 = filteredFocusableElements[0]) === null || _filteredFocusableEle7 === void 0 || _filteredFocusableEle7.focus();
-        (_filteredFocusableEle8 = filteredFocusableElements[0]) === null || _filteredFocusableEle8 === void 0 || _filteredFocusableEle8.scrollIntoView({
+
+        // Button component from DS removes focus ring when :focus:not(:focus-visible) is true
+        // Since here we programmatically focus the first button in the toolbar (as suppose to keyboard navigation), browser does not always force focus-visible to true
+        // which is why the first button in the toolbar is not shown with focus ring
+        // The workaround is add a new classname so we add back focus ring when the button is focused
+        if (((_filteredFocusableEle8 = filteredFocusableElements[0]) === null || _filteredFocusableEle8 === void 0 ? void 0 : _filteredFocusableEle8.tagName) === 'BUTTON' && fg('platform_editor_fix_floating_toolbar_focus')) {
+          filteredFocusableElements[0].classList.add('first-floating-toolbar-button');
+        }
+        (_filteredFocusableEle9 = filteredFocusableElements[0]) === null || _filteredFocusableEle9 === void 0 || _filteredFocusableEle9.scrollIntoView({
           behavior: 'smooth',
           block: 'center',
           inline: 'nearest'

package/dist/types/messages/help-dialog.d.ts

@@ -64,11 +64,21 @@ export declare const helpDialogMessages: {
         defaultMessage: string;
         description: string;
     };
+    increaseElementSize: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
     decreaseSize: {
         id: string;
         defaultMessage: string;
         description: string;
     };
+    decreaseElementSize: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
     openCellOptions: {
         id: string;
         defaultMessage: string;

package/dist/types-ts4.5/messages/help-dialog.d.ts

@@ -64,11 +64,21 @@ export declare const helpDialogMessages: {
         defaultMessage: string;
         description: string;
     };
+    increaseElementSize: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
     decreaseSize: {
         id: string;
         defaultMessage: string;
         description: string;
     };
+    decreaseElementSize: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
     openCellOptions: {
         id: string;
         defaultMessage: string;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-common",
-	"version": "106.3.1",
+	"version": "106.3.2",
 	"description": "A package that contains common classes and components for editor and renderer",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -170,7 +170,7 @@
 		"@atlaskit/textfield": "^8.0.0",
 		"@atlaskit/theme": "^18.0.0",
 		"@atlaskit/tmp-editor-statsig": "^5.13.0",
-		"@atlaskit/tokens": "^5.0.0",
+		"@atlaskit/tokens": "^5.1.0",
 		"@atlaskit/tooltip": "^20.3.0",
 		"@atlaskit/width-detector": "^5.0.0",
 		"@babel/runtime": "^7.0.0",
@@ -399,6 +399,9 @@
 		},
 		"interactable_in_editor_inputs": {
 			"type": "boolean"
+		},
+		"platform_editor_fix_floating_toolbar_focus": {
+			"type": "boolean"
 		}
 	}
 }