@atlaskit/editor-common 107.17.0 → 107.18.1

package/CHANGELOG.md

@@ -1,5 +1,30 @@
 # @atlaskit/editor-common
 
+## 107.18.1
+
+### Patch Changes
+
+- [#197573](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/197573)
+  [`066bb4840be19`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/066bb4840be19) -
+  [ENGHEALTH-32415] resolve aria issues with element browser
+- Updated dependencies
+
+## 107.18.0
+
+### Minor Changes
+
+- [#197019](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/197019)
+  [`96717455eea97`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/96717455eea97) -
+  Create a new toolbar export from editor-common, add useEditorToolbar and EditorToolbarProvider
+  react context components to pass editorView to children toolbar components.
+
+  Add `@atlaskit/editor-plugin-toolbar`, `@atlaskit/editor-toolbar` and
+  `@atlaskit/editor-toolbar-model` as depedencies.
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 107.17.0
 
 ### Minor Changes

package/dist/cjs/element-browser/components/ElementList/ElementList.js

@@ -20,6 +20,7 @@ var _shortcut = require("@atlaskit/editor-shared-styles/shortcut");
 var _menu = require("@atlaskit/menu");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _compiled = require("@atlaskit/primitives/compiled");
+var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 var _analytics = require("../../../analytics");
 var _quickInsert = require("../../../quick-insert");
@@ -231,7 +232,8 @@ var ElementListSingleColumn = function ElementListSingleColumn(props) {
         selected: selectedItemIndex === index,
         focus: focusedItemIndex === index,
         setFocusedItemIndex: setFocusedItemIndex,
-        onInsertItem: onInsertItem
+        onInsertItem: onInsertItem,
+        role: (0, _expValEquals.expValEquals)('platform_editor_august_a11y', 'isEnabled', true) ? 'option' : undefined
       })));
     };
   },
@@ -361,7 +363,8 @@ function ElementItem(_ref6) {
     index = _ref6.index,
     onInsertItem = _ref6.onInsertItem,
     focus = _ref6.focus,
-    setFocusedItemIndex = _ref6.setFocusedItemIndex;
+    setFocusedItemIndex = _ref6.setFocusedItemIndex,
+    role = _ref6.role;
   var ref = (0, _useFocus.default)(focus);
 
   /**
@@ -406,11 +409,13 @@ function ElementItem(_ref6) {
       title: title
     }),
     isSelected: selected,
-    "aria-describedby": title,
+    "aria-describedby": (0, _expValEquals.expValEquals)('platform_editor_august_a11y', 'isEnabled', true) ? undefined : title,
+    "aria-label": (0, _expValEquals.expValEquals)('platform_editor_august_a11y', 'isEnabled', true) ? title : undefined,
     ref: ref,
     testId: "element-item-".concat(index),
     id: "searched-item-".concat(index),
-    isDisabled: isDisabled
+    isDisabled: isDisabled,
+    role: role
   }, (0, _react2.jsx)(ItemContent
   // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
   , {

package/dist/cjs/element-browser/components/StatelessElementBrowser.js

@@ -14,6 +14,7 @@ var _reactIntlNext = require("react-intl-next");
 var _withAnalyticsContext = _interopRequireDefault(require("@atlaskit/analytics-next/withAnalyticsContext"));
 var _withAnalyticsEvents = _interopRequireDefault(require("@atlaskit/analytics-next/withAnalyticsEvents"));
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _analytics = require("../../analytics");
 var _getEditorUgcToken = _interopRequireDefault(require("../../ugc-tokens/get-editor-ugc-token"));
 var _ViewMore = require("../components/ViewMore");
@@ -323,7 +324,8 @@ function MobileBrowser(_ref) {
       onClick: setFocusOnSearch,
       searchTerm: searchTerm,
       items: items,
-      selectedItemIndex: selectedItemIndex
+      selectedItemIndex: selectedItemIndex,
+      ariaControlsId: (0, _expValEquals.expValEquals)('platform_editor_august_a11y', 'isEnabled', true) ? _constants.ELEMENT_BROWSER_LIST_ID : undefined
     }), showCategories && (0, _react2.jsx)("nav", {
       css: mobileCategoryListWrapper,
       tabIndex: -1
@@ -336,7 +338,8 @@ function MobileBrowser(_ref) {
       setFocusedItemIndex: setFocusedItemIndex,
       setFocusOnSearch: setFocusOnSearch
     }))), (0, _react2.jsx)("div", {
-      css: mobileMainContent
+      css: mobileMainContent,
+      id: (0, _expValEquals.expValEquals)('platform_editor_august_a11y', 'isEnabled', true) ? _constants.ELEMENT_BROWSER_LIST_ID : undefined
     }, (0, _react2.jsx)(_ElementList.default, {
       items: items,
       mode: mode,

package/dist/cjs/element-browser/constants.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.SIDEBAR_WIDTH = exports.SIDEBAR_HEADING_WRAPPER_HEIGHT = exports.SIDEBAR_HEADING_PADDING_LEFT = exports.SEARCH_ITEM_HEIGHT_WIDTH = exports.SCROLLBAR_WIDTH = exports.INLINE_SIDEBAR_HEIGHT = exports.GRID_SIZE = exports.FLEX_ITEMS_CONTAINER_BREAKPOINT_NUMBERS = exports.ELEMENT_LIST_PADDING = exports.ELEMENT_ITEM_PADDING = exports.ELEMENT_ITEM_HEIGHT = exports.ELEMENT_BROWSER_ID = exports.DEVICE_BREAKPOINT_NUMBERS = void 0;
+exports.SIDEBAR_WIDTH = exports.SIDEBAR_HEADING_WRAPPER_HEIGHT = exports.SIDEBAR_HEADING_PADDING_LEFT = exports.SEARCH_ITEM_HEIGHT_WIDTH = exports.SCROLLBAR_WIDTH = exports.INLINE_SIDEBAR_HEIGHT = exports.GRID_SIZE = exports.FLEX_ITEMS_CONTAINER_BREAKPOINT_NUMBERS = exports.ELEMENT_LIST_PADDING = exports.ELEMENT_ITEM_PADDING = exports.ELEMENT_ITEM_HEIGHT = exports.ELEMENT_BROWSER_LIST_ID = exports.ELEMENT_BROWSER_ID = exports.DEVICE_BREAKPOINT_NUMBERS = void 0;
 var GRID_SIZE = exports.GRID_SIZE = 8;
 var DEVICE_BREAKPOINT_NUMBERS = exports.DEVICE_BREAKPOINT_NUMBERS = {
   small: GRID_SIZE * 40,
@@ -24,4 +24,5 @@ var SCROLLBAR_WIDTH = exports.SCROLLBAR_WIDTH = 15;
 var ELEMENT_LIST_PADDING = exports.ELEMENT_LIST_PADDING = 2;
 var ELEMENT_ITEM_HEIGHT = exports.ELEMENT_ITEM_HEIGHT = 60;
 var ELEMENT_ITEM_PADDING = exports.ELEMENT_ITEM_PADDING = 10;
-var ELEMENT_BROWSER_ID = exports.ELEMENT_BROWSER_ID = 'editor-element-browser';
+var ELEMENT_BROWSER_ID = exports.ELEMENT_BROWSER_ID = 'editor-element-browser';
+var ELEMENT_BROWSER_LIST_ID = exports.ELEMENT_BROWSER_LIST_ID = 'editor-element-browser-list';

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

package/dist/cjs/toolbar/context.js

@@ -0,0 +1,32 @@
+"use strict";
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useEditorToolbar = exports.EditorToolbarProvider = void 0;
+var _react = _interopRequireWildcard(require("react"));
+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 EditorToolbarContext = /*#__PURE__*/(0, _react.createContext)({
+  editorView: null
+});
+
+/**
+ * Access editor specific config and state within a toolbar component
+ */
+var useEditorToolbar = exports.useEditorToolbar = function useEditorToolbar() {
+  var context = (0, _react.useContext)(EditorToolbarContext);
+  if (!context) {
+    throw new Error('useEditorToolbar must be used within EditorToolbarContext');
+  }
+  return context;
+};
+var EditorToolbarProvider = exports.EditorToolbarProvider = function EditorToolbarProvider(_ref) {
+  var children = _ref.children,
+    editorView = _ref.editorView;
+  return /*#__PURE__*/_react.default.createElement(EditorToolbarContext.Provider, {
+    value: {
+      editorView: editorView
+    }
+  }, children);
+};

package/dist/cjs/toolbar/index.js

@@ -3,28 +3,184 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+Object.defineProperty(exports, "AI_SECTION", {
+  enumerable: true,
+  get: function get() {
+    return _keys.AI_SECTION;
+  }
+});
 Object.defineProperty(exports, "AI_SECTION_RANK", {
   enumerable: true,
   get: function get() {
     return _rank.AI_SECTION_RANK;
   }
 });
+Object.defineProperty(exports, "APPS_SECTION", {
+  enumerable: true,
+  get: function get() {
+    return _keys.APPS_SECTION;
+  }
+});
+Object.defineProperty(exports, "BOLD_MENU_ITEM", {
+  enumerable: true,
+  get: function get() {
+    return _keys.BOLD_MENU_ITEM;
+  }
+});
+Object.defineProperty(exports, "CHANGE_TONE_MENU_RANK", {
+  enumerable: true,
+  get: function get() {
+    return _rank.CHANGE_TONE_MENU_RANK;
+  }
+});
+Object.defineProperty(exports, "CHANGE_TONE_MENU_SECTION", {
+  enumerable: true,
+  get: function get() {
+    return _keys.CHANGE_TONE_MENU_SECTION;
+  }
+});
+Object.defineProperty(exports, "CHANGE_TONE_MENU_SECTION_RANK", {
+  enumerable: true,
+  get: function get() {
+    return _rank.CHANGE_TONE_MENU_SECTION_RANK;
+  }
+});
+Object.defineProperty(exports, "CHANGE_TONE_NESTED_MENU", {
+  enumerable: true,
+  get: function get() {
+    return _keys.CHANGE_TONE_NESTED_MENU;
+  }
+});
+Object.defineProperty(exports, "CLEAR_FORMARTTING_MENU_SECTION", {
+  enumerable: true,
+  get: function get() {
+    return _keys.CLEAR_FORMARTTING_MENU_SECTION;
+  }
+});
+Object.defineProperty(exports, "CLEAR_FORMARTTING_MENU_SECTION_RANK", {
+  enumerable: true,
+  get: function get() {
+    return _rank.CLEAR_FORMARTTING_MENU_SECTION_RANK;
+  }
+});
+Object.defineProperty(exports, "CLEAR_FORMATTING_MENU_ITEM", {
+  enumerable: true,
+  get: function get() {
+    return _keys.CLEAR_FORMATTING_MENU_ITEM;
+  }
+});
+Object.defineProperty(exports, "CODE_MENU_ITEM", {
+  enumerable: true,
+  get: function get() {
+    return _keys.CODE_MENU_ITEM;
+  }
+});
+Object.defineProperty(exports, "COLLAB_SECTION", {
+  enumerable: true,
+  get: function get() {
+    return _keys.COLLAB_SECTION;
+  }
+});
+Object.defineProperty(exports, "COLLAB_SECTION_RANK", {
+  enumerable: true,
+  get: function get() {
+    return _rank.COLLAB_SECTION_RANK;
+  }
+});
+Object.defineProperty(exports, "COMMENT_GROUP", {
+  enumerable: true,
+  get: function get() {
+    return _keys.COMMENT_GROUP;
+  }
+});
+Object.defineProperty(exports, "COMMENT_GROUP_RANK", {
+  enumerable: true,
+  get: function get() {
+    return _rank.COMMENT_GROUP_RANK;
+  }
+});
+Object.defineProperty(exports, "COMMENT_HERO_BUTTON", {
+  enumerable: true,
+  get: function get() {
+    return _keys.COMMENT_HERO_BUTTON;
+  }
+});
+Object.defineProperty(exports, "EditorToolbarProvider", {
+  enumerable: true,
+  get: function get() {
+    return _context.EditorToolbarProvider;
+  }
+});
+Object.defineProperty(exports, "IMPROVE_WRITING_BUTTON", {
+  enumerable: true,
+  get: function get() {
+    return _keys.IMPROVE_WRITING_BUTTON;
+  }
+});
+Object.defineProperty(exports, "IMPROVE_WRITING_GROUP", {
+  enumerable: true,
+  get: function get() {
+    return _keys.IMPROVE_WRITING_GROUP;
+  }
+});
 Object.defineProperty(exports, "IMPROVE_WRITING_GROUP_RANK", {
   enumerable: true,
   get: function get() {
     return _rank.IMPROVE_WRITING_GROUP_RANK;
   }
 });
-Object.defineProperty(exports, "ROVO_CHANGE_TONE_MENU_RANK", {
+Object.defineProperty(exports, "ITALIC_MENU_ITEM", {
+  enumerable: true,
+  get: function get() {
+    return _keys.ITALIC_MENU_ITEM;
+  }
+});
+Object.defineProperty(exports, "LINKING_SECTION", {
+  enumerable: true,
+  get: function get() {
+    return _keys.LINKING_SECTION;
+  }
+});
+Object.defineProperty(exports, "MAKE_LONGER_MENU_ITEM", {
+  enumerable: true,
+  get: function get() {
+    return _keys.MAKE_LONGER_MENU_ITEM;
+  }
+});
+Object.defineProperty(exports, "MAKE_SHORTER_MENU_ITEM", {
+  enumerable: true,
+  get: function get() {
+    return _keys.MAKE_SHORTER_MENU_ITEM;
+  }
+});
+Object.defineProperty(exports, "MORE_CASUAL_MENU_ITEM", {
+  enumerable: true,
+  get: function get() {
+    return _keys.MORE_CASUAL_MENU_ITEM;
+  }
+});
+Object.defineProperty(exports, "MORE_EMPATHETIC_MENU_ITEM", {
   enumerable: true,
   get: function get() {
-    return _rank.ROVO_CHANGE_TONE_MENU_RANK;
+    return _keys.MORE_EMPATHETIC_MENU_ITEM;
   }
 });
-Object.defineProperty(exports, "ROVO_CHANGE_TONE_MENU_SECTION_RANK", {
+Object.defineProperty(exports, "MORE_PROFESSIONAL_MENU_ITEM", {
   enumerable: true,
   get: function get() {
-    return _rank.ROVO_CHANGE_TONE_MENU_SECTION_RANK;
+    return _keys.MORE_PROFESSIONAL_MENU_ITEM;
+  }
+});
+Object.defineProperty(exports, "OVERFLOW_SECTION", {
+  enumerable: true,
+  get: function get() {
+    return _keys.OVERFLOW_SECTION;
+  }
+});
+Object.defineProperty(exports, "ROVO_GROUP", {
+  enumerable: true,
+  get: function get() {
+    return _keys.ROVO_GROUP;
   }
 });
 Object.defineProperty(exports, "ROVO_GROUP_RANK", {
@@ -33,22 +189,124 @@ Object.defineProperty(exports, "ROVO_GROUP_RANK", {
     return _rank.ROVO_GROUP_RANK;
   }
 });
+Object.defineProperty(exports, "ROVO_HERO_BUTTON", {
+  enumerable: true,
+  get: function get() {
+    return _keys.ROVO_HERO_BUTTON;
+  }
+});
+Object.defineProperty(exports, "ROVO_MENU", {
+  enumerable: true,
+  get: function get() {
+    return _keys.ROVO_MENU;
+  }
+});
 Object.defineProperty(exports, "ROVO_MENU_RANK", {
   enumerable: true,
   get: function get() {
     return _rank.ROVO_MENU_RANK;
   }
 });
-Object.defineProperty(exports, "ROVO_MENU_SECTION_RANK", {
+Object.defineProperty(exports, "ROVO_PROMPT_MENU_SECTION", {
+  enumerable: true,
+  get: function get() {
+    return _keys.ROVO_PROMPT_MENU_SECTION;
+  }
+});
+Object.defineProperty(exports, "ROVO_PROMPT_MENU_SECTION_RANK", {
+  enumerable: true,
+  get: function get() {
+    return _rank.ROVO_PROMPT_MENU_SECTION_RANK;
+  }
+});
+Object.defineProperty(exports, "SPELLING_AND_GRAMMAR_MENU_ITEM", {
+  enumerable: true,
+  get: function get() {
+    return _keys.SPELLING_AND_GRAMMAR_MENU_ITEM;
+  }
+});
+Object.defineProperty(exports, "STRIKE_MENU_ITEM", {
+  enumerable: true,
+  get: function get() {
+    return _keys.STRIKE_MENU_ITEM;
+  }
+});
+Object.defineProperty(exports, "SUBSCRIPT_MENU_ITEM", {
+  enumerable: true,
+  get: function get() {
+    return _keys.SUBSCRIPT_MENU_ITEM;
+  }
+});
+Object.defineProperty(exports, "SUMMARIZE_MENU_ITEM", {
+  enumerable: true,
+  get: function get() {
+    return _keys.SUMMARIZE_MENU_ITEM;
+  }
+});
+Object.defineProperty(exports, "SUPERSCRIPT_MENU_ITEM", {
+  enumerable: true,
+  get: function get() {
+    return _keys.SUPERSCRIPT_MENU_ITEM;
+  }
+});
+Object.defineProperty(exports, "TEXT_FORMATTING_GROUP", {
+  enumerable: true,
+  get: function get() {
+    return _keys.TEXT_FORMATTING_GROUP;
+  }
+});
+Object.defineProperty(exports, "TEXT_FORMATTING_HERO_BUTTON", {
   enumerable: true,
   get: function get() {
-    return _rank.ROVO_MENU_SECTION_RANK;
+    return _keys.TEXT_FORMATTING_HERO_BUTTON;
   }
 });
-Object.defineProperty(exports, "ROVO_TRANSLATE_MENU_RANK", {
+Object.defineProperty(exports, "TEXT_FORMATTING_MENU", {
   enumerable: true,
   get: function get() {
-    return _rank.ROVO_TRANSLATE_MENU_RANK;
+    return _keys.TEXT_FORMATTING_MENU;
+  }
+});
+Object.defineProperty(exports, "TEXT_FORMATTING_MENU_SECTION", {
+  enumerable: true,
+  get: function get() {
+    return _keys.TEXT_FORMATTING_MENU_SECTION;
+  }
+});
+Object.defineProperty(exports, "TEXT_FORMATTING_MENU_SECTION_RANK", {
+  enumerable: true,
+  get: function get() {
+    return _rank.TEXT_FORMATTING_MENU_SECTION_RANK;
+  }
+});
+Object.defineProperty(exports, "TEXT_FORMAT_GROUP_RANK", {
+  enumerable: true,
+  get: function get() {
+    return _rank.TEXT_FORMAT_GROUP_RANK;
+  }
+});
+Object.defineProperty(exports, "TEXT_FORMAT_MENU_RANK", {
+  enumerable: true,
+  get: function get() {
+    return _rank.TEXT_FORMAT_MENU_RANK;
+  }
+});
+Object.defineProperty(exports, "TEXT_SECTION", {
+  enumerable: true,
+  get: function get() {
+    return _keys.TEXT_SECTION;
+  }
+});
+Object.defineProperty(exports, "TEXT_SECTION_RANK", {
+  enumerable: true,
+  get: function get() {
+    return _rank.TEXT_SECTION_RANK;
+  }
+});
+Object.defineProperty(exports, "TOOLBARS", {
+  enumerable: true,
+  get: function get() {
+    return _keys.TOOLBARS;
   }
 });
 Object.defineProperty(exports, "TOOLBAR_RANK", {
@@ -57,4 +315,36 @@ Object.defineProperty(exports, "TOOLBAR_RANK", {
     return _rank.TOOLBAR_RANK;
   }
 });
-var _rank = require("./rank");
+Object.defineProperty(exports, "TRANSLATE_MENU_RANK", {
+  enumerable: true,
+  get: function get() {
+    return _rank.TRANSLATE_MENU_RANK;
+  }
+});
+Object.defineProperty(exports, "TRANSLATE_MENU_SECTION", {
+  enumerable: true,
+  get: function get() {
+    return _keys.TRANSLATE_MENU_SECTION;
+  }
+});
+Object.defineProperty(exports, "TRANSLATE_NESTED_MENU", {
+  enumerable: true,
+  get: function get() {
+    return _keys.TRANSLATE_NESTED_MENU;
+  }
+});
+Object.defineProperty(exports, "UNDERLINE_MENU_ITEM", {
+  enumerable: true,
+  get: function get() {
+    return _keys.UNDERLINE_MENU_ITEM;
+  }
+});
+Object.defineProperty(exports, "useEditorToolbar", {
+  enumerable: true,
+  get: function get() {
+    return _context.useEditorToolbar;
+  }
+});
+var _rank = require("./rank");
+var _keys = require("./keys");
+var _context = require("./context");