@atlaskit/editor-core 176.0.3 → 177.0.1

package/dist/es2019/plugins/floating-toolbar/ui/Toolbar.js

@@ -10,7 +10,7 @@ import { themed } from '@atlaskit/theme/components';
 import { borderRadius, gridSize } from '@atlaskit/theme/constants';
 import { DN70 } from '@atlaskit/theme/colors';
 import { getFeatureFlags } from '../../feature-flags-context';
-import { compareArrays, getFirstFocusableElement, getLastFocusableElement, getFocusableElements, shallowEqual } from '../utils';
+import { compareArrays, getFirstFocusableElement, shallowEqual } from '../utils';
 import { showConfirmDialog } from '../pm-plugins/toolbar-data/commands';
 import Button from './Button';
 import Dropdown from './Dropdown';
@@ -23,9 +23,9 @@ import { EmojiPickerButton } from './EmojiPickerButton';
 import Announcer from '../../../utils/announcer/announcer';
 import { injectIntl } from 'react-intl-next';
 import messages from './messages';
-import { token } from '@atlaskit/tokens';
 import { decorationStateKey, ACTIONS } from '../../base/pm-plugins/decoration';
 import ScrollButtons from './ScrollButtons';
+import { ToolbarArrowKeyNavigationProvider } from '../../../ui/ToolbarArrowKeyNavigationProvider';
 const akGridSize = gridSize();
 const ToolbarItems = /*#__PURE__*/React.memo(({
   items,
@@ -53,6 +53,10 @@ const ToolbarItems = /*#__PURE__*/React.memo(({
             dispatchCommand(showConfirmDialog(idx));
           } else {
             dispatchCommand(item.onClick);
+
+            if (item.focusEditoronEnter && !(editorView !== null && editorView !== void 0 && editorView.hasFocus())) {
+              editorView === null || editorView === void 0 ? void 0 : editorView.focus();
+            }
           }
         };
 
@@ -114,6 +118,8 @@ const ToolbarItems = /*#__PURE__*/React.memo(({
           scrollableElement: popupsScrollableElement,
           dropdownWidth: item.dropdownWidth,
           showSelected: item.showSelected,
+          buttonTestId: item.testId,
+          editorView: editorView,
           setDisableParentScroll: scrollable ? setDisableScroll : undefined
         });
 
@@ -204,11 +210,11 @@ const ToolbarItems = /*#__PURE__*/React.memo(({
 
 const toolbarContainer = (theme, scrollable, hasSelect, firstElementIsSelect) => css`
   background-color: ${themed({
-  light: token('elevation.surface.overlay', 'white'),
-  dark: token('elevation.surface.overlay', DN70)
+  light: "var(--ds-surface-overlay, white)",
+  dark: `var(--ds-surface-overlay, ${DN70})`
 })(theme)};
   border-radius: ${borderRadius()}px;
-  box-shadow: ${token('elevation.shadow.overlay', `0 0 1px rgba(9, 30, 66, 0.31), 0 4px 8px -2px rgba(9, 30, 66, 0.25)`)};
+  box-shadow: ${`var(--ds-shadow-overlay, ${`0 0 1px rgba(9, 30, 66, 0.31), 0 4px 8px -2px rgba(9, 30, 66, 0.25)`})`};
   display: flex;
   line-height: 1;
   box-sizing: border-box;
@@ -333,54 +339,23 @@ class Toolbar extends Component {
       }
     });
 
-    _defineProperty(this, "handleKeyDown", event => {
+    _defineProperty(this, "shouldHandleArrowKeys", () => {
       var _this$props$items;
 
-      //To prevent the keydown handing of arrow keys for 'hyper link floating toolbar'
-      if ((_this$props$items = this.props.items) !== null && _this$props$items !== void 0 && _this$props$items.find(item => item.type === 'custom' && item.disableArrowNavigation)) {
-        return;
-      }
+      //To prevent the keydown handling of arrow keys for custom toolbar items with 'disableArrowNavigation' prop enabled,
+      //Usually the button which has menus or popups
+      return !((_this$props$items = this.props.items) !== null && _this$props$items !== void 0 && _this$props$items.find(item => item.type === 'custom' && item.disableArrowNavigation));
+    });
 
-      if (event.key === 'Escape') {
+    _defineProperty(this, "handleEscape", event => {
+      //If any dropdown is open inside the floating toolbar 'Esc' key should not
+      //focus the editorview. The event cannot be stopped as dropdown is not childnode of floating toolbar
+      if (!document.querySelector('[data-role="droplistContent"]')) {
         var _this$props$editorVie;
 
-        this.currentSelectedItemIndex = 0;
         (_this$props$editorVie = this.props.editorView) === null || _this$props$editorVie === void 0 ? void 0 : _this$props$editorVie.focus();
         event.preventDefault();
         event.stopPropagation();
-      } else {
-        var _this$toolbarContaine2, _this$toolbarContaine3, _this$toolbarContaine4;
-
-        //To trap the focus inside the toolbar using left and right arrow keys
-        const focusableElements = getFocusableElements((_this$toolbarContaine2 = this.toolbarContainerRef) === null || _this$toolbarContaine2 === void 0 ? void 0 : _this$toolbarContaine2.current);
-        const firstFocsuableElement = getFirstFocusableElement((_this$toolbarContaine3 = this.toolbarContainerRef) === null || _this$toolbarContaine3 === void 0 ? void 0 : _this$toolbarContaine3.current);
-        const lastFocsuableElement = getLastFocusableElement((_this$toolbarContaine4 = this.toolbarContainerRef) === null || _this$toolbarContaine4 === void 0 ? void 0 : _this$toolbarContaine4.current);
-
-        if (!focusableElements || focusableElements.length === 0) {
-          return;
-        }
-
-        if (event.key === 'ArrowRight') {
-          if (this.currentSelectedItemIndex === focusableElements.length - 1) {
-            firstFocsuableElement === null || firstFocsuableElement === void 0 ? void 0 : firstFocsuableElement.focus();
-            this.currentSelectedItemIndex = 0;
-          } else {
-            var _focusableElements;
-
-            (_focusableElements = focusableElements[this.currentSelectedItemIndex + 1]) === null || _focusableElements === void 0 ? void 0 : _focusableElements.focus();
-            this.currentSelectedItemIndex++;
-          }
-        } else if (event.key === 'ArrowLeft') {
-          if (this.currentSelectedItemIndex === 0) {
-            lastFocsuableElement === null || lastFocsuableElement === void 0 ? void 0 : lastFocsuableElement.focus();
-            this.currentSelectedItemIndex = focusableElements.length - 1;
-          } else {
-            var _focusableElements2;
-
-            (_focusableElements2 = focusableElements[this.currentSelectedItemIndex - 1]) === null || _focusableElements2 === void 0 ? void 0 : _focusableElements2.focus();
-            this.currentSelectedItemIndex--;
-          }
-        }
       }
     });
 
@@ -391,7 +366,6 @@ class Toolbar extends Component {
       scrollDisabled: false,
       mounted: false
     };
-    this.currentSelectedItemIndex = 0;
   } // remove any decorations added by toolbar buttons i.e danger and selected styling
   // this prevents https://product-fabric.atlassian.net/browse/ED-10207
 
@@ -474,15 +448,20 @@ class Toolbar extends Component {
 
     const firstElementIsSelect = items[0].type === 'select';
     const hasSelect = items.find(item => item.type === 'select' && item.selectType === 'list');
-    return jsx(React.Fragment, null, jsx("div", {
+    return jsx(React.Fragment, null, jsx(ToolbarArrowKeyNavigationProvider, {
+      editorView: this.props.editorView,
+      handleEscape: this.handleEscape,
+      disableArrowKeyNavigation: !this.shouldHandleArrowKeys(),
+      childComponentSelector: "[data-testid='editor-floating-toolbar']"
+    }, jsx("div", {
       ref: this.toolbarContainerRef,
       css: theme => [toolbarContainer({
         theme
       }, scrollable, hasSelect !== undefined, firstElementIsSelect)],
       "aria-label": intl.formatMessage(messages.floatingToolbarAriaLabel),
       role: "toolbar",
-      className: className,
-      onKeyDown: this.handleKeyDown
+      "data-testid": "editor-floating-toolbar",
+      className: className
     }, jsx(Announcer, {
       text: intl.formatMessage(messages.floatingToolbarAnnouncer),
       delay: 250
@@ -500,7 +479,7 @@ class Toolbar extends Component {
       disabled: this.state.scrollDisabled
     })), jsx("div", {
       ref: this.mountRef
-    }));
+    })));
   }
 
 }

package/dist/es2019/plugins/floating-toolbar/ui/messages.js

@@ -15,24 +15,34 @@ export default defineMessages({
     defaultMessage: 'Cancel',
     description: 'Cancel button for floating toolbar confirmation modal.'
   },
+  confirmModalListUnit: {
+    id: 'fabric.editor.floatingToolbar.confirmModalConnectedUnit',
+    defaultMessage: '{name}{amount, plural, =0 {} one { (+1 connected element)} other { (+# connected elements)}}',
+    description: 'Text displayed in confirmation modal which highlights the nodes and the amount of connected nodes that will be deleted'
+  },
+  confirmDeleteLinkedModalMessage: {
+    id: 'fabric.editor.extension.confirmDeleteLinkedModalMessage',
+    defaultMessage: 'Deleting {nodeName} will break anything connected to it.',
+    description: 'Message for confirm modal when deleting a extension linked to an data consumer.'
+  },
   floatingToolbarAriaLabel: {
     id: 'fabric.editor.floatingToolbar.floatingToolbarAriaLabel',
     defaultMessage: 'Floating Toolbar',
-    description: `a floating toolbar's aria label`
+    description: "a floating toolbar's aria label"
   },
   floatingToolbarAnnouncer: {
     id: 'fabric.editor.floatingToolbar.floatingToolbarAnnouncer',
     defaultMessage: 'Floating toolbar controls have been opened',
-    description: `message that will be announced to screenreaders that the floating toolbar is opened`
+    description: 'message that will be announced to screenreaders that the floating toolbar is opened'
   },
   floatingToolbarScrollLeft: {
     id: 'fabric.editor.floatingToolbar.scrollLeft',
     defaultMessage: 'Scroll left',
-    description: `Button to scroll left when the toolbar is in the overflow state`
+    description: 'Button to scroll left when the toolbar is in the overflow state'
   },
   floatingToolbarScrollRight: {
     id: 'fabric.editor.floatingToolbar.scrollRight',
     defaultMessage: 'Scroll right',
-    description: `Button to scroll right when the toolbar is in the overflow state`
+    description: 'Button to scroll right when the toolbar is in the overflow state'
   }
 });

package/dist/es2019/plugins/floating-toolbar/ui/styles.js

@@ -1,6 +1,5 @@
 import * as colors from '@atlaskit/theme/colors';
 import { hexToRgba } from '@atlaskit/adf-schema';
-import { token } from '@atlaskit/tokens';
 const background = {
   danger: {
     default: {
@@ -8,28 +7,28 @@ const background = {
       dark: 'inherit'
     },
     hover: {
-      light: token('color.background.neutral.subtle.hovered', colors.N30A),
-      dark: token('color.background.neutral.subtle.hovered', colors.N30A)
+      light: `var(--ds-background-neutral-subtle-hovered, ${colors.N30A})`,
+      dark: `var(--ds-background-neutral-subtle-hovered, ${colors.N30A})`
     },
     active: {
-      light: token('color.background.neutral.pressed', `${hexToRgba(colors.B75, 0.6)}`),
-      dark: token('color.background.neutral.pressed', `${hexToRgba(colors.B75, 0.6)}`)
+      light: `var(--ds-background-neutral-pressed, ${`${hexToRgba(colors.B75, 0.6)}`})`,
+      dark: `var(--ds-background-neutral-pressed, ${`${hexToRgba(colors.B75, 0.6)}`})`
     }
   }
 };
 const color = {
   danger: {
     default: {
-      light: token('color.icon', colors.N400),
-      dark: token('color.icon', colors.DN400)
+      light: `var(--ds-icon, ${colors.N400})`,
+      dark: `var(--ds-icon, ${colors.DN400})`
     },
     hover: {
-      light: token('color.icon.danger', colors.R400),
-      dark: token('color.icon.danger', colors.R400)
+      light: `var(--ds-icon-danger, ${colors.R400})`,
+      dark: `var(--ds-icon-danger, ${colors.R400})`
     },
     active: {
-      light: token('color.icon.danger', colors.R400),
-      dark: token('color.icon.danger', colors.R400)
+      light: `var(--ds-icon-danger, ${colors.R400})`,
+      dark: `var(--ds-icon-danger, ${colors.R400})`
     }
   }
 };

package/dist/es2019/plugins/floating-toolbar/utils.js

@@ -61,27 +61,14 @@ export function findNode(parent, predicate) {
   });
   return matchedNode;
 }
-export function getFirstFocusableElement(rootNode) {
-  if (!rootNode) {
-    return;
-  }
-
-  const focusableModalElements = rootNode.querySelectorAll('a[href], button:not([disabled]), textarea, input, select') || [];
-  return focusableModalElements[0];
-}
 export function getFocusableElements(rootNode) {
   if (!rootNode) {
-    return;
+    return [];
   }
 
   const focusableModalElements = rootNode.querySelectorAll('a[href], button:not([disabled]), textarea, input, select') || [];
-  return focusableModalElements;
+  return Array.from(focusableModalElements) || [];
 }
-export function getLastFocusableElement(rootNode) {
-  if (!rootNode) {
-    return;
-  }
-
-  const focusableModalElements = rootNode.querySelectorAll('a[href], button:not([disabled]), textarea, input, select') || [];
-  return focusableModalElements[focusableModalElements.length - 1];
+export function getFirstFocusableElement(rootNode) {
+  return getFocusableElements(rootNode)[0];
 }

package/dist/es2019/plugins/grid/styles.js

@@ -1,7 +1,6 @@
 import { css } from '@emotion/react';
 import { N30A, B200 } from '@atlaskit/theme/colors';
 import { akEditorGridLineZIndex } from '@atlaskit/editor-shared-styles';
-import { token } from '@atlaskit/tokens';
 export const GRID_GUTTER = 12;
 export const gridStyles = css`
   .gridParent {
@@ -21,7 +20,7 @@ export const gridStyles = css`
 
   // TODO: https://product-fabric.atlassian.net/browse/DSP-4352
   .gridLine {
-    border-left: 1px solid ${token('color.border', N30A)};
+    border-left: 1px solid ${`var(--ds-border, ${N30A})`};
     display: inline-block;
     box-sizing: border-box;
     height: 100%;
@@ -32,6 +31,6 @@ export const gridStyles = css`
   }
 
   .highlight {
-    border-left: 1px solid ${token('color.border.focused', B200)};
+    border-left: 1px solid ${`var(--ds-border-focused, ${B200})`};
   }
 `;

package/dist/es2019/plugins/help-dialog/index.js

@@ -41,7 +41,7 @@ export function createPlugin(dispatch, imageEnabled) {
   });
 }
 
-const helpDialog = legacyImageUploadProvider => ({
+const helpDialog = (imageUploadProviderExists = false) => ({
   name: 'helpDialog',
 
   pmPlugins() {
@@ -49,7 +49,7 @@ const helpDialog = legacyImageUploadProvider => ({
       name: 'helpDialog',
       plugin: ({
         dispatch
-      }) => createPlugin(dispatch, !!legacyImageUploadProvider)
+      }) => createPlugin(dispatch, imageUploadProviderExists)
     }, {
       name: 'helpDialogKeymap',
       plugin: () => keymapPlugin()

package/dist/es2019/plugins/help-dialog/ui/styles.js

@@ -2,7 +2,6 @@ import { css } from '@emotion/react';
 import { borderRadius } from '@atlaskit/theme/constants';
 import * as colors from '@atlaskit/theme/colors';
 import { akEditorUnitZIndex, relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
-import { token } from '@atlaskit/tokens';
 import { N400 } from '@atlaskit/theme/colors';
 export const header = css`
   z-index: ${akEditorUnitZIndex};
@@ -13,15 +12,15 @@ export const header = css`
   justify-content: space-between;
   align-items: center;
   box-shadow: 'none';
-  color: ${token('color.text', colors.N400)};
-  background-color: ${token('color.background.neutral.subtle', colors.N0)};
+  color: ${`var(--ds-text, ${colors.N400})`};
+  background-color: ${`var(--ds-background-neutral-subtle, ${colors.N0})`};
   border-radius: ${borderRadius()}px;
 `;
 export const footer = css`
   z-index: ${akEditorUnitZIndex};
   font-size: ${relativeFontSizeToBase16(14)};
   line-height: 20px;
-  color: ${token('color.text.subtlest', colors.N300)};
+  color: ${`var(--ds-text-subtlest, ${colors.N300})`};
   padding: 24px;
   text-align: right;
   box-shadow: 'none';
@@ -31,11 +30,11 @@ export const contentWrapper = css`
   border-bottom-right-radius: ${borderRadius()}px;
   overflow: auto;
   position: relative;
-  color: ${token('color.text.subtle', colors.N400)};
-  background-color: ${token('color.background.neutral.subtle', colors.N0)};
+  color: ${`var(--ds-text-subtle, ${colors.N400})`};
+  background-color: ${`var(--ds-background-neutral-subtle, ${colors.N0})`};
 `;
 export const line = css`
-  background: ${token('color.background.neutral.subtle', '#fff')};
+  background: ${"var(--ds-background-neutral-subtle, #fff)"};
   content: '';
   display: block;
   height: 2px;
@@ -68,7 +67,7 @@ export const dialogHeader = {
   '&': {
     fontSize: relativeFontSizeToBase16(24),
     fontWeight: 400,
-    color: token('color.text.subtle', N400),
+    color: `var(--ds-text-subtle, ${N400})`,
     letterSpacing: 'normal',
     lineHeight: 1.42857142857143
   }
@@ -77,13 +76,13 @@ export const title = {
   '&': {
     fontSize: relativeFontSizeToBase16(18),
     fontWeight: 400,
-    color: token('color.text.subtle', N400),
+    color: `var(--ds-text-subtle, ${N400})`,
     letterSpacing: 'normal',
     lineHeight: 1.42857142857143
   }
 };
 export const codeSm = css`
-  background-color: ${token('color.background.neutral', colors.N20)};
+  background-color: ${`var(--ds-background-neutral, ${colors.N20})`};
   border-radius: ${borderRadius()}px;
   width: 24px;
   display: inline-block;
@@ -92,7 +91,7 @@ export const codeSm = css`
   text-align: center;
 `;
 export const codeMd = css`
-  background-color: ${token('color.background.neutral', colors.N20)};
+  background-color: ${`var(--ds-background-neutral, ${colors.N20})`};
   border-radius: ${borderRadius()}px;
   display: inline-block;
   height: 24px;
@@ -101,7 +100,7 @@ export const codeMd = css`
   text-align: center;
 `;
 export const codeLg = css`
-  background-color: ${token('color.background.neutral', colors.N20)};
+  background-color: ${`var(--ds-background-neutral, ${colors.N20})`};
   border-radius: ${borderRadius()}px;
   display: inline-block;
   height: 24px;

package/dist/es2019/plugins/hyperlink/Toolbar.js

@@ -8,7 +8,7 @@ import OpenIcon from '@atlaskit/icon/glyph/shortcut';
 import { normalizeUrl } from './utils';
 import { linkToolbarMessages as linkToolbarCommonMessages, linkMessages } from '../../messages';
 import { isSafeUrl } from '@atlaskit/adf-schema';
-import { RECENT_SEARCH_HEIGHT_IN_PX, RECENT_SEARCH_WIDTH_IN_PX } from '../../ui/LinkSearch/ToolbarComponents';
+import { LINKPICKER_HEIGHT_IN_PX, RECENT_SEARCH_HEIGHT_IN_PX, RECENT_SEARCH_WIDTH_IN_PX } from '../../ui/LinkSearch/ToolbarComponents';
 import { HyperlinkToolbarAppearance } from './HyperlinkToolbarAppearance';
 import { addAnalytics, ACTION_SUBJECT_ID } from '../analytics';
 import { buildVisitedLinkPayload, buildOpenedSettingsPayload } from '../../utils/linking-utils';
@@ -73,6 +73,16 @@ export const getToolbarConfig = options => (state, intl, providerFactory) => {
     formatMessage
   } = intl;
   const linkState = stateKey.getState(state);
+  /**
+   * Enable focus trap only if feature flag is enabled AND for the new version of the picker
+   */
+
+  const {
+    lpLinkPicker,
+    lpLinkPickerFocusTrap,
+    preventPopupOverflow
+  } = getFeatureFlags(state);
+  const shouldEnableFocusTrap = lpLinkPicker && lpLinkPickerFocusTrap;
 
   if (linkState && linkState.activeLinkMark) {
     const {
@@ -177,6 +187,8 @@ export const getToolbarConfig = options => (state, intl, providerFactory) => {
       case 'EDIT_INSERTED':
       case 'INSERT':
         {
+          var _options$linkPicker, _options$linkPicker$p;
+
           let link;
 
           if (isEditLink(activeLinkMark) && activeLinkMark.node) {
@@ -185,9 +197,12 @@ export const getToolbarConfig = options => (state, intl, providerFactory) => {
           }
 
           const displayText = isEditLink(activeLinkMark) ? getLinkText(activeLinkMark, state) : linkState.activeText;
+          const popupHeight = lpLinkPicker && Boolean(options === null || options === void 0 ? void 0 : (_options$linkPicker = options.linkPicker) === null || _options$linkPicker === void 0 ? void 0 : (_options$linkPicker$p = _options$linkPicker.plugins) === null || _options$linkPicker$p === void 0 ? void 0 : _options$linkPicker$p.length) ? LINKPICKER_HEIGHT_IN_PX : RECENT_SEARCH_HEIGHT_IN_PX;
           return { ...hyperLinkToolbar,
-            height: RECENT_SEARCH_HEIGHT_IN_PX,
+            preventPopupOverflow,
+            height: popupHeight,
             width: RECENT_SEARCH_WIDTH_IN_PX,
+            focusTrap: shouldEnableFocusTrap,
             items: [{
               type: 'custom',
               fallback: [],
@@ -204,6 +219,7 @@ export const getToolbarConfig = options => (state, intl, providerFactory) => {
                   displayUrl: link,
                   displayText: displayText || '',
                   providerFactory: providerFactory,
+                  onCancel: () => view.focus(),
                   onSubmit: (href, title = '', displayText, inputMethod) => {
                     var _options$cardOptions;
 

package/dist/es2019/plugins/hyperlink/ui/EditorLinkPicker/index.js

@@ -4,17 +4,24 @@ import { LinkPicker } from '@atlaskit/link-picker';
 import { hideLinkToolbar as cardHideLinkToolbar } from '../../../card/pm-plugins/actions';
 import { hideLinkToolbar } from '../../commands';
 import { useEscapeClickaway } from './useEscapeClickaway';
+/**
+ * Returns a type that matches T but where keys (K) are now optional
+ */
+
 export const EditorLinkPicker = ({
   view,
+  onCancel,
   ...restProps
 }) => {
   const onEscape = useCallback(() => {
     hideLinkToolbar()(view.state, view.dispatch);
     view.dispatch(cardHideLinkToolbar(view.state.tr));
-  }, [view]);
+    onCancel === null || onCancel === void 0 ? void 0 : onCancel();
+  }, [view, onCancel]);
   const onClickAway = useCallback(() => {
     hideLinkToolbar()(view.state, view.dispatch);
-  }, [view]);
+    onCancel === null || onCancel === void 0 ? void 0 : onCancel();
+  }, [view, onCancel]);
   const ref = useEscapeClickaway(onEscape, onClickAway);
   return /*#__PURE__*/React.createElement("div", {
     ref: ref

package/dist/es2019/plugins/hyperlink/ui/HyperlinkAddToolbar/HyperlinkAddToolbar.js

@@ -8,7 +8,6 @@ import CrossCircleIcon from '@atlaskit/icon/glyph/cross-circle';
 import EditorAlignLeftIcon from '@atlaskit/icon/glyph/editor/align-left';
 import LinkIcon from '@atlaskit/icon/glyph/link';
 import { N90, N80, N30 } from '@atlaskit/theme/colors';
-import { token } from '@atlaskit/tokens';
 import Page16Icon from '@atlaskit/icon-object/glyph/page/16';
 import Tooltip from '@atlaskit/tooltip';
 import { PureComponent } from 'react';
@@ -34,17 +33,17 @@ const clearText = css`
   cursor: pointer;
   padding: 0;
   margin-right: 8px;
-  color: ${token('color.icon.subtle', N90)};
+  color: ${`var(--ds-icon-subtle, ${N90})`};
   background: transparent;
   border: none;
 `;
 const textInputWrapper = css`
   ${inputWrapper};
-  border-top: 1px solid ${token('color.border', N30)};
-  border-bottom: 1px solid ${token('color.border', N30)};
+  border-top: 1px solid ${`var(--ds-border, ${N30})`};
+  border-bottom: 1px solid ${`var(--ds-border, ${N30})`};
 `;
 const iconWrapper = css`
-  color: ${token('color.icon.subtle', N80)};
+  color: ${`var(--ds-icon-subtle, ${N80})`};
   padding: 4px 8px;
   width: 18px;
 `;

package/dist/es2019/plugins/hyperlink/ui/HyperlinkAddToolbar/index.js

@@ -29,7 +29,8 @@ export default class HyperlinkAddToolbar extends React.PureComponent {
       displayText,
       displayUrl,
       providerFactory,
-      view
+      view,
+      onCancel
     } = this.props;
     return /*#__PURE__*/React.createElement(WithProviders, {
       providers: ['activityProvider', 'searchProvider'],
@@ -45,23 +46,18 @@ export default class HyperlinkAddToolbar extends React.PureComponent {
         render: ({
           hyperlinkPluginState
         }) => {
-          var _linkPickerOptions$pl;
-
           const {
             lpLinkPicker
           } = getFeatureFlags(view.state);
-          /**
-           * If activityProvider or searchProvider are present then only enable if there are plugins supplied to
-           * faciliate providing link search capabilities
-           */
 
-          if (lpLinkPicker && (!activityProvider && !searchProvider || Boolean(linkPickerOptions === null || linkPickerOptions === void 0 ? void 0 : (_linkPickerOptions$pl = linkPickerOptions.plugins) === null || _linkPickerOptions$pl === void 0 ? void 0 : _linkPickerOptions$pl.length))) {
+          if (lpLinkPicker) {
             return /*#__PURE__*/React.createElement(EditorLinkPicker, _extends({
               view: view
             }, linkPickerOptions, {
               url: displayUrl,
               displayText: displayText,
-              onSubmit: onSubmitInterface(onSubmit)
+              onSubmit: onSubmitInterface(onSubmit),
+              onCancel: onCancel
             }));
           }
 

package/dist/es2019/plugins/insert-block/ui/ToolbarInsertBlock/block-insert-element-browser.js

@@ -24,6 +24,7 @@ export const BlockInsertElementBrowser = props => {
     disabled: props.disabled,
     onClick: props.onClick,
     spacing: props.spacing,
-    label: props.label
+    label: props.label,
+    "aria-keyshortcuts": "/"
   }));
 };

package/dist/es2019/plugins/insert-block/ui/ToolbarInsertBlock/block-insert-menu-legacy.js

@@ -28,6 +28,7 @@ export const BlockInsertMenuLegacy = props => {
     disabled: props.disabled,
     onClick: props.onClick,
     spacing: props.spacing,
-    label: props.label
+    label: props.label,
+    "aria-keyshortcuts": "/"
   }));
 };

package/dist/es2019/plugins/insert-block/ui/ToolbarInsertBlock/block-insert-menu.js

@@ -16,7 +16,8 @@ export const BlockInsertMenu = props => {
       disabled: props.disabled,
       onClick: props.onClick,
       spacing: props.spacing,
-      label: props.label
+      label: props.label,
+      "aria-keyshortcuts": "/"
     }));
   }
 

package/dist/es2019/plugins/insert-block/ui/ToolbarInsertBlock/dropdown-button.js

@@ -24,7 +24,8 @@ export const DropDownButton = /*#__PURE__*/React.memo(props => jsx(ToolbarButton
   spacing: props.spacing,
   "aria-expanded": props['aria-expanded'],
   "aria-haspopup": props['aria-haspopup'],
-  "aria-label": props.label,
+  "aria-keyshortcuts": props['aria-keyshortcuts'],
+  "aria-label": `${props.label} /`,
   iconBefore: jsx(DropDownButtonIcon, {
     label: ""
   }),

package/dist/es2019/plugins/insert-block/ui/ToolbarInsertBlock/index.js

@@ -547,6 +547,7 @@ export class ToolbarInsertBlock extends React.PureComponent {
       css: buttonGroupStyle
     }, buttons.map(btn => jsx(ToolbarButton, {
       item: btn,
+      testId: String(btn.content),
       ref: btn.value.name === 'emoji' ? this.handleEmojiButtonRef : noop,
       key: btn.value.name,
       spacing: isReducedSpacing ? 'none' : 'default',
@@ -556,6 +557,7 @@ export class ToolbarInsertBlock extends React.PureComponent {
       title: btn.title,
       "aria-label": btn['aria-label'],
       "aria-haspopup": btn['aria-haspopup'],
+      "aria-keyshortcuts": btn['aria-keyshortcuts'],
       onItemClick: this.insertToolbarMenuItem
     })), jsx("span", {
       css: wrapperStyle