@atlaskit/editor-core 176.0.3 → 177.0.1

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

@@ -19,21 +19,19 @@ var colors = _interopRequireWildcard(require("@atlaskit/theme/colors"));
 
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 
-var _tokens = require("@atlaskit/tokens");
-
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-var header = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  z-index: ", ";\n  min-height: 24px;\n  padding: 20px 40px;\n  font-size: ", ";\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  box-shadow: 'none';\n  color: ", ";\n  background-color: ", ";\n  border-radius: ", "px;\n"])), _editorSharedStyles.akEditorUnitZIndex, (0, _editorSharedStyles.relativeFontSizeToBase16)(24), (0, _tokens.token)('color.text', colors.N400), (0, _tokens.token)('color.background.neutral.subtle', colors.N0), (0, _constants.borderRadius)());
+var header = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  z-index: ", ";\n  min-height: 24px;\n  padding: 20px 40px;\n  font-size: ", ";\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  box-shadow: 'none';\n  color: ", ";\n  background-color: ", ";\n  border-radius: ", "px;\n"])), _editorSharedStyles.akEditorUnitZIndex, (0, _editorSharedStyles.relativeFontSizeToBase16)(24), "var(--ds-text, ".concat(colors.N400, ")"), "var(--ds-background-neutral-subtle, ".concat(colors.N0, ")"), (0, _constants.borderRadius)());
 exports.header = header;
-var footer = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  z-index: ", ";\n  font-size: ", ";\n  line-height: 20px;\n  color: ", ";\n  padding: 24px;\n  text-align: right;\n  box-shadow: 'none';\n"])), _editorSharedStyles.akEditorUnitZIndex, (0, _editorSharedStyles.relativeFontSizeToBase16)(14), (0, _tokens.token)('color.text.subtlest', colors.N300));
+var footer = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  z-index: ", ";\n  font-size: ", ";\n  line-height: 20px;\n  color: ", ";\n  padding: 24px;\n  text-align: right;\n  box-shadow: 'none';\n"])), _editorSharedStyles.akEditorUnitZIndex, (0, _editorSharedStyles.relativeFontSizeToBase16)(14), "var(--ds-text-subtlest, ".concat(colors.N300, ")"));
 exports.footer = footer;
-var contentWrapper = (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  padding: 20px 44px;\n  border-bottom-right-radius: ", "px;\n  overflow: auto;\n  position: relative;\n  color: ", ";\n  background-color: ", ";\n"])), (0, _constants.borderRadius)(), (0, _tokens.token)('color.text.subtle', colors.N400), (0, _tokens.token)('color.background.neutral.subtle', colors.N0));
+var contentWrapper = (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  padding: 20px 44px;\n  border-bottom-right-radius: ", "px;\n  overflow: auto;\n  position: relative;\n  color: ", ";\n  background-color: ", ";\n"])), (0, _constants.borderRadius)(), "var(--ds-text-subtle, ".concat(colors.N400, ")"), "var(--ds-background-neutral-subtle, ".concat(colors.N0, ")"));
 exports.contentWrapper = contentWrapper;
-var line = (0, _react.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  background: ", ";\n  content: '';\n  display: block;\n  height: 2px;\n  left: 0;\n  position: absolute;\n  top: 0;\n  right: 0;\n  width: 100%;\n  min-width: 604px;\n"])), (0, _tokens.token)('color.background.neutral.subtle', '#fff'));
+var line = (0, _react.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  background: ", ";\n  content: '';\n  display: block;\n  height: 2px;\n  left: 0;\n  position: absolute;\n  top: 0;\n  right: 0;\n  width: 100%;\n  min-width: 604px;\n"])), "var(--ds-background-neutral-subtle, #fff)");
 exports.line = line;
 var content = (0, _react.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  min-width: 524px;\n  width: 100%;\n  position: relative;\n  display: flex;\n  justify-content: space-between;\n"])));
 exports.content = content;
@@ -50,7 +48,7 @@ var dialogHeader = {
   '&': {
     fontSize: (0, _editorSharedStyles.relativeFontSizeToBase16)(24),
     fontWeight: 400,
-    color: (0, _tokens.token)('color.text.subtle', colors.N400),
+    color: "var(--ds-text-subtle, ".concat(colors.N400, ")"),
     letterSpacing: 'normal',
     lineHeight: 1.42857142857143
   }
@@ -60,15 +58,15 @@ var title = {
   '&': {
     fontSize: (0, _editorSharedStyles.relativeFontSizeToBase16)(18),
     fontWeight: 400,
-    color: (0, _tokens.token)('color.text.subtle', colors.N400),
+    color: "var(--ds-text-subtle, ".concat(colors.N400, ")"),
     letterSpacing: 'normal',
     lineHeight: 1.42857142857143
   }
 };
 exports.title = title;
-var codeSm = (0, _react.css)(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  background-color: ", ";\n  border-radius: ", "px;\n  width: 24px;\n  display: inline-block;\n  height: 24px;\n  line-height: 24px;\n  text-align: center;\n"])), (0, _tokens.token)('color.background.neutral', colors.N20), (0, _constants.borderRadius)());
+var codeSm = (0, _react.css)(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  background-color: ", ";\n  border-radius: ", "px;\n  width: 24px;\n  display: inline-block;\n  height: 24px;\n  line-height: 24px;\n  text-align: center;\n"])), "var(--ds-background-neutral, ".concat(colors.N20, ")"), (0, _constants.borderRadius)());
 exports.codeSm = codeSm;
-var codeMd = (0, _react.css)(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n  background-color: ", ";\n  border-radius: ", "px;\n  display: inline-block;\n  height: 24px;\n  line-height: 24px;\n  width: 50px;\n  text-align: center;\n"])), (0, _tokens.token)('color.background.neutral', colors.N20), (0, _constants.borderRadius)());
+var codeMd = (0, _react.css)(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n  background-color: ", ";\n  border-radius: ", "px;\n  display: inline-block;\n  height: 24px;\n  line-height: 24px;\n  width: 50px;\n  text-align: center;\n"])), "var(--ds-background-neutral, ".concat(colors.N20, ")"), (0, _constants.borderRadius)());
 exports.codeMd = codeMd;
-var codeLg = (0, _react.css)(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n  background-color: ", ";\n  border-radius: ", "px;\n  display: inline-block;\n  height: 24px;\n  line-height: 24px;\n  padding: 0 10px;\n  text-align: center;\n"])), (0, _tokens.token)('color.background.neutral', colors.N20), (0, _constants.borderRadius)());
+var codeLg = (0, _react.css)(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n  background-color: ", ";\n  border-radius: ", "px;\n  display: inline-block;\n  height: 24px;\n  line-height: 24px;\n  padding: 0 10px;\n  text-align: center;\n"])), "var(--ds-background-neutral, ".concat(colors.N20, ")"), (0, _constants.borderRadius)());
 exports.codeLg = codeLg;

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

@@ -110,6 +110,17 @@ var getToolbarConfig = function getToolbarConfig(options) {
     var formatMessage = intl.formatMessage;
 
     var linkState = _main.stateKey.getState(state);
+    /**
+     * Enable focus trap only if feature flag is enabled AND for the new version of the picker
+     */
+
+
+    var _getFeatureFlags2 = (0, _featureFlagsContext.getFeatureFlags)(state),
+        lpLinkPicker = _getFeatureFlags2.lpLinkPicker,
+        lpLinkPickerFocusTrap = _getFeatureFlags2.lpLinkPickerFocusTrap,
+        preventPopupOverflow = _getFeatureFlags2.preventPopupOverflow;
+
+    var shouldEnableFocusTrap = lpLinkPicker && lpLinkPickerFocusTrap;
 
     if (linkState && linkState.activeLinkMark) {
       var activeLinkMark = linkState.activeLinkMark;
@@ -214,6 +225,8 @@ var getToolbarConfig = function getToolbarConfig(options) {
         case 'EDIT_INSERTED':
         case 'INSERT':
           {
+            var _options$linkPicker, _options$linkPicker$p;
+
             var _link;
 
             if (isEditLink(activeLinkMark) && activeLinkMark.node) {
@@ -225,9 +238,12 @@ var getToolbarConfig = function getToolbarConfig(options) {
             }
 
             var displayText = isEditLink(activeLinkMark) ? getLinkText(activeLinkMark, state) : linkState.activeText;
+            var 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) ? _ToolbarComponents.LINKPICKER_HEIGHT_IN_PX : _ToolbarComponents.RECENT_SEARCH_HEIGHT_IN_PX;
             return _objectSpread(_objectSpread({}, hyperLinkToolbar), {}, {
-              height: _ToolbarComponents.RECENT_SEARCH_HEIGHT_IN_PX,
+              preventPopupOverflow: preventPopupOverflow,
+              height: popupHeight,
               width: _ToolbarComponents.RECENT_SEARCH_WIDTH_IN_PX,
+              focusTrap: shouldEnableFocusTrap,
               items: [{
                 type: 'custom',
                 fallback: [],
@@ -244,6 +260,9 @@ var getToolbarConfig = function getToolbarConfig(options) {
                     displayUrl: _link,
                     displayText: displayText || '',
                     providerFactory: providerFactory,
+                    onCancel: function onCancel() {
+                      return view.focus();
+                    },
                     onSubmit: function onSubmit(href) {
                       var _options$cardOptions;
 

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

@@ -23,7 +23,7 @@ var _commands = require("../../commands");
 
 var _useEscapeClickaway = require("./useEscapeClickaway");
 
-var _excluded = ["view"];
+var _excluded = ["view", "onCancel"];
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -31,14 +31,17 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 var EditorLinkPicker = function EditorLinkPicker(_ref) {
   var view = _ref.view,
+      onCancel = _ref.onCancel,
       restProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var onEscape = (0, _react.useCallback)(function () {
     (0, _commands.hideLinkToolbar)()(view.state, view.dispatch);
     view.dispatch((0, _actions.hideLinkToolbar)(view.state.tr));
-  }, [view]);
+    onCancel === null || onCancel === void 0 ? void 0 : onCancel();
+  }, [view, onCancel]);
   var onClickAway = (0, _react.useCallback)(function () {
     (0, _commands.hideLinkToolbar)()(view.state, view.dispatch);
-  }, [view]);
+    onCancel === null || onCancel === void 0 ? void 0 : onCancel();
+  }, [view, onCancel]);
   var ref = (0, _useEscapeClickaway.useEscapeClickaway)(onEscape, onClickAway);
   return /*#__PURE__*/_react.default.createElement("div", {
     ref: ref

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

@@ -47,8 +47,6 @@ var _link = _interopRequireDefault(require("@atlaskit/icon/glyph/link"));
 
 var _colors = require("@atlaskit/theme/colors");
 
-var _tokens = require("@atlaskit/tokens");
-
 var _ = _interopRequireDefault(require("@atlaskit/icon-object/glyph/page/16"));
 
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
@@ -99,9 +97,9 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 
 var RECENT_SEARCH_LIST_SIZE = 5;
 exports.RECENT_SEARCH_LIST_SIZE = RECENT_SEARCH_LIST_SIZE;
-var clearText = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  cursor: pointer;\n  padding: 0;\n  margin-right: 8px;\n  color: ", ";\n  background: transparent;\n  border: none;\n"])), (0, _tokens.token)('color.icon.subtle', _colors.N90));
-var textInputWrapper = (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  ", ";\n  border-top: 1px solid ", ";\n  border-bottom: 1px solid ", ";\n"])), _ToolbarComponents.inputWrapper, (0, _tokens.token)('color.border', _colors.N30), (0, _tokens.token)('color.border', _colors.N30));
-var iconWrapper = (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n  padding: 4px 8px;\n  width: 18px;\n"])), (0, _tokens.token)('color.icon.subtle', _colors.N80));
+var clearText = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  cursor: pointer;\n  padding: 0;\n  margin-right: 8px;\n  color: ", ";\n  background: transparent;\n  border: none;\n"])), "var(--ds-icon-subtle, ".concat(_colors.N90, ")"));
+var textInputWrapper = (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  ", ";\n  border-top: 1px solid ", ";\n  border-bottom: 1px solid ", ";\n"])), _ToolbarComponents.inputWrapper, "var(--ds-border, ".concat(_colors.N30, ")"), "var(--ds-border, ".concat(_colors.N30, ")"));
+var iconWrapper = (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n  padding: 4px 8px;\n  width: 18px;\n"])), "var(--ds-icon-subtle, ".concat(_colors.N80, ")"));
 var messages = (0, _reactIntlNext.defineMessages)({
   displayText: {
     id: 'fabric.editor.displayText',

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

@@ -73,7 +73,8 @@ var HyperlinkAddToolbar = /*#__PURE__*/function (_React$PureComponent) {
           displayText = _this$props.displayText,
           displayUrl = _this$props.displayUrl,
           providerFactory = _this$props.providerFactory,
-          view = _this$props.view;
+          view = _this$props.view,
+          onCancel = _this$props.onCancel;
       return /*#__PURE__*/_react.default.createElement(_providerFactory.WithProviders, {
         providers: ['activityProvider', 'searchProvider'],
         providerFactory: providerFactory,
@@ -86,25 +87,19 @@ var HyperlinkAddToolbar = /*#__PURE__*/function (_React$PureComponent) {
               hyperlinkPluginState: _main.stateKey
             },
             render: function render(_ref3) {
-              var _linkPickerOptions$pl;
-
               var hyperlinkPluginState = _ref3.hyperlinkPluginState;
 
               var _getFeatureFlags = (0, _featureFlagsContext.getFeatureFlags)(view.state),
                   lpLinkPicker = _getFeatureFlags.lpLinkPicker;
-              /**
-               * 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.default.createElement(_EditorLinkPicker.EditorLinkPicker, (0, _extends2.default)({
                   view: view
                 }, linkPickerOptions, {
                   url: displayUrl,
                   displayText: displayText,
-                  onSubmit: onSubmitInterface(onSubmit)
+                  onSubmit: onSubmitInterface(onSubmit),
+                  onCancel: onCancel
                 }));
               }
 

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

@@ -37,7 +37,8 @@ var BlockInsertElementBrowser = function BlockInsertElementBrowser(props) {
     disabled: props.disabled,
     onClick: props.onClick,
     spacing: props.spacing,
-    label: props.label
+    label: props.label,
+    "aria-keyshortcuts": "/"
   }));
 };
 

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

@@ -43,7 +43,8 @@ var BlockInsertMenuLegacy = function BlockInsertMenuLegacy(props) {
     disabled: props.disabled,
     onClick: props.onClick,
     spacing: props.spacing,
-    label: props.label
+    label: props.label,
+    "aria-keyshortcuts": "/"
   }));
 };
 

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

@@ -29,7 +29,8 @@ var BlockInsertMenu = function BlockInsertMenu(props) {
       disabled: props.disabled,
       onClick: props.onClick,
       spacing: props.spacing,
-      label: props.label
+      label: props.label,
+      "aria-keyshortcuts": "/"
     }));
   }
 

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

@@ -45,7 +45,8 @@ var DropDownButton = /*#__PURE__*/_react.default.memo(function (props) {
     spacing: props.spacing,
     "aria-expanded": props['aria-expanded'],
     "aria-haspopup": props['aria-haspopup'],
-    "aria-label": props.label,
+    "aria-keyshortcuts": props['aria-keyshortcuts'],
+    "aria-label": "".concat(props.label, " /"),
     iconBefore: (0, _react2.jsx)(DropDownButtonIcon, {
       label: ""
     }),

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

@@ -547,6 +547,7 @@ var ToolbarInsertBlock = /*#__PURE__*/function (_React$PureComponent) {
       }, buttons.map(function (btn) {
         return (0, _react2.jsx)(_ToolbarButton.default, {
           item: btn,
+          testId: String(btn.content),
           ref: btn.value.name === 'emoji' ? _this2.handleEmojiButtonRef : noop,
           key: btn.value.name,
           spacing: isReducedSpacing ? 'none' : 'default',
@@ -556,6 +557,7 @@ var ToolbarInsertBlock = /*#__PURE__*/function (_React$PureComponent) {
           title: btn.title,
           "aria-label": btn['aria-label'],
           "aria-haspopup": btn['aria-haspopup'],
+          "aria-keyshortcuts": btn['aria-keyshortcuts'],
           onItemClick: _this2.insertToolbarMenuItem
         });
       }), (0, _react2.jsx)("span", {

package/dist/cjs/plugins/insert-block/ui/ToolbarInsertBlock/item.js

@@ -53,6 +53,8 @@ var _keymaps = require("../../../../keymaps");
 
 var _shallowEquals = require("./shallow-equals");
 
+var _keymaps2 = require("@atlaskit/editor-common/keymaps");
+
 /** @jsx jsx */
 var from = function from(init) {
   return {
@@ -67,8 +69,9 @@ var from = function from(init) {
     elemAfter: init.shortcut ? (0, _react2.jsx)("div", {
       css: _styles.shortcutStyle
     }, init.shortcut) : undefined,
-    'aria-label': init.content,
+    'aria-label': init.shortcut ? init.content + ' ' + init.shortcut : init.content,
     'aria-haspopup': init['aria-haspopup'],
+    'aria-keyshortcuts': init['aria-keyshortcuts'],
     shortcut: init.shortcut,
     isDisabled: init.disabled
   };
@@ -85,7 +88,8 @@ var action = mem(function (init) {
     disabled: init.disabled,
     name: 'action',
     shortcut: '[]',
-    Icon: _task.default
+    Icon: _task.default,
+    'aria-keyshortcuts': '[ ] Space'
   });
 });
 exports.action = action;
@@ -97,7 +101,8 @@ var link = mem(function (init) {
     name: 'link',
     shortcut: (0, _keymaps.tooltip)(_keymaps.addLink),
     Icon: _link.default,
-    'aria-haspopup': init['aria-haspopup']
+    'aria-haspopup': init['aria-haspopup'],
+    'aria-keyshortcuts': (0, _keymaps2.getAriaKeyshortcuts)(_keymaps.addLink)
   });
 });
 exports.link = link;
@@ -129,7 +134,8 @@ var mention = mem(function (init) {
     name: 'mention',
     Icon: _mention.default,
     shortcut: '@',
-    'aria-haspopup': init['aria-haspopup']
+    'aria-haspopup': init['aria-haspopup'],
+    'aria-keyshortcuts': 'Shift+2 Space'
   });
 });
 exports.mention = mention;
@@ -141,7 +147,8 @@ var emoji = mem(function (init) {
     name: 'emoji',
     Icon: _emoji.default,
     shortcut: ':',
-    'aria-haspopup': init['aria-haspopup']
+    'aria-haspopup': init['aria-haspopup'],
+    'aria-keyshortcuts': 'Shift+;'
   });
 });
 exports.emoji = emoji;
@@ -152,7 +159,8 @@ var table = mem(function (init) {
     disabled: init.disabled,
     name: 'table',
     Icon: _table.default,
-    shortcut: (0, _keymaps.tooltip)(_keymaps.toggleTable)
+    shortcut: (0, _keymaps.tooltip)(_keymaps.toggleTable),
+    'aria-keyshortcuts': (0, _keymaps2.getAriaKeyshortcuts)(_keymaps.toggleTable)
   });
 });
 exports.table = table;
@@ -173,7 +181,8 @@ var codeblock = mem(function (init) {
     disabled: init.disabled,
     name: 'codeblock',
     Icon: _code.default,
-    shortcut: init.shortcut
+    shortcut: init.shortcut,
+    'aria-keyshortcuts': (0, _keymaps2.getAriaKeyshortcuts)(init.shortcut)
   });
 });
 exports.codeblock = codeblock;
@@ -184,7 +193,8 @@ var panel = mem(function (init) {
     disabled: init.disabled,
     name: 'panel',
     Icon: _info.default,
-    shortcut: init.shortcut
+    shortcut: init.shortcut,
+    'aria-keyshortcuts': (0, _keymaps2.getAriaKeyshortcuts)(init.shortcut)
   });
 });
 exports.panel = panel;
@@ -195,7 +205,8 @@ var blockquote = mem(function (init) {
     disabled: init.disabled,
     name: 'blockquote',
     Icon: _quote.default,
-    shortcut: init.shortcut
+    shortcut: init.shortcut,
+    'aria-keyshortcuts': 'Shift+. Space'
   });
 });
 exports.blockquote = blockquote;
@@ -206,7 +217,8 @@ var decision = mem(function (init) {
     disabled: init.disabled,
     name: 'decision',
     Icon: _decision.default,
-    shortcut: '<>'
+    shortcut: '<>',
+    'aria-keyshortcuts': 'Shift+, Shift+. Space'
   });
 });
 exports.decision = decision;
@@ -217,7 +229,8 @@ var horizontalrule = mem(function (init) {
     disabled: init.disabled,
     name: 'horizontalrule',
     Icon: _horizontalRule.default,
-    shortcut: '---'
+    shortcut: '---',
+    'aria-keyshortcuts': '- - -'
   });
 });
 exports.horizontalrule = horizontalrule;
@@ -238,7 +251,8 @@ var date = mem(function (init) {
     disabled: init.disabled,
     name: 'date',
     Icon: _date.default,
-    shortcut: '//'
+    shortcut: '//',
+    'aria-keyshortcuts': '/ / Enter'
   });
 });
 exports.date = date;

package/dist/cjs/plugins/jira-issue/nodeviews/jira-issue.js

@@ -19,12 +19,10 @@ var _colors = require("@atlaskit/theme/colors");
 
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 
-var _tokens = require("@atlaskit/tokens");
-
 var _templateObject, _templateObject2, _templateObject3;
 
-var wrapperNode = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  align-items: center;\n  background: ", ";\n  border: 1px solid ", ";\n  border-radius: ", "px;\n  box-sizing: border-box;\n  cursor: default;\n  display: inline-flex;\n  font-size: ", ";\n  margin: 0 2px;\n  min-height: 24px;\n  padding: 0 4px;\n  user-select: none;\n  vertical-align: middle;\n  white-space: nowrap;\n\n  .ProseMirror-selectednode & {\n    background: ", ";\n    outline: none;\n  }\n"])), (0, _tokens.token)('color.background.neutral', _colors.N30), (0, _tokens.token)('color.border', _colors.N50), (0, _constants.borderRadius)(), (0, _editorSharedStyles.relativeFontSizeToBase16)(13), (0, _tokens.token)('color.background.selected', _colors.N50));
-var jiraChildNode = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  display: inline-block;\n  color: ", ";\n  line-height: 24px;\n  vertical-align: top;\n\n  &::before {\n    color: ", ";\n    content: 'JIRA | ';\n  }\n"])), (0, _tokens.token)('color.text.subtlest', '#707070'), (0, _tokens.token)('color.text', 'black'));
+var wrapperNode = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  align-items: center;\n  background: ", ";\n  border: 1px solid ", ";\n  border-radius: ", "px;\n  box-sizing: border-box;\n  cursor: default;\n  display: inline-flex;\n  font-size: ", ";\n  margin: 0 2px;\n  min-height: 24px;\n  padding: 0 4px;\n  user-select: none;\n  vertical-align: middle;\n  white-space: nowrap;\n\n  .ProseMirror-selectednode & {\n    background: ", ";\n    outline: none;\n  }\n"])), "var(--ds-background-neutral, ".concat(_colors.N30, ")"), "var(--ds-border, ".concat(_colors.N50, ")"), (0, _constants.borderRadius)(), (0, _editorSharedStyles.relativeFontSizeToBase16)(13), "var(--ds-background-selected, ".concat(_colors.N50, ")"));
+var jiraChildNode = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  display: inline-block;\n  color: ", ";\n  line-height: 24px;\n  vertical-align: top;\n\n  &::before {\n    color: ", ";\n    content: 'JIRA | ';\n  }\n"])), "var(--ds-text-subtlest, #707070)", "var(--ds-text, black)");
 var svgChildNode = (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  display: inline-block;\n  height: 24px;\n  vertical-align: top;\n  width: 24px;\n\n  & > div {\n    height: 24px;\n    width: 24px;\n  }\n"])));
 
 function JIRAIssueNode(props) {

package/dist/cjs/plugins/layout/styles.js

@@ -31,13 +31,11 @@ var _styles = require("@atlaskit/editor-common/styles");
 
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 
-var _tokens = require("@atlaskit/tokens");
-
 var _types = require("@atlaskit/editor-plugin-table/types");
 
 var _consts = require("@atlaskit/editor-plugin-table/ui/consts");
 
 var _templateObject;
 
-var layoutStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .ProseMirror {\n    ", " [data-layout-section] {\n      margin: ", "px -", "px 0;\n      transition: border-color 0.3s ", ";\n      cursor: pointer;\n\n      /* Inner cursor located 26px from left */\n      [data-layout-column] {\n        flex: 1;\n        min-width: 0;\n        border: ", "px solid\n          ", ";\n        border-radius: 4px;\n        padding: ", "px;\n        box-sizing: border-box;\n\n        > div {\n          > :not(style):first-child,\n          > style:first-child + * {\n            margin-top: 0;\n          }\n\n          > .ProseMirror-gapcursor:first-child + *,\n          > style:first-child + .ProseMirror-gapcursor + * {\n            margin-top: 0;\n          }\n\n          > .ProseMirror-gapcursor:first-child + span + *,\n          > style:first-child + .ProseMirror-gapcursor:first-child + span + * {\n            margin-top: 0;\n          }\n\n          > .embedCardView-content-wrap:first-of-type .rich-media-item {\n            margin-top: 0;\n          }\n\n          > .mediaSingleView-content-wrap:first-of-type .rich-media-item {\n            margin-top: 0;\n          }\n\n          > .ProseMirror-gapcursor.-right:first-child\n            + .mediaSingleView-content-wrap\n            .rich-media-item,\n          > style:first-child\n            + .ProseMirror-gapcursor.-right\n            + .mediaSingleView-content-wrap\n            .rich-media-item,\n          > .ProseMirror-gapcursor.-right:first-of-type\n            + .embedCardView-content-wrap\n            .rich-media-item {\n            margin-top: 0;\n          }\n\n          > .ProseMirror-gapcursor:first-child\n            + span\n            + .mediaSingleView-content-wrap\n            .rich-media-item,\n          > style:first-child\n            + .ProseMirror-gapcursor\n            + span\n            + .mediaSingleView-content-wrap\n            .rich-media-item {\n            margin-top: 0;\n          }\n\n          /* Prevent first DecisionWrapper's margin-top: 8px from shifting decisions down\n             and shrinking layout's node selectable area (leniency margin) */\n          > [data-node-type='decisionList'] {\n            li:first-of-type [data-decision-wrapper] {\n              margin-top: 0;\n            }\n          }\n        }\n\n        /* Make the 'content' fill the entire height of the layout column to allow click\n           handler of layout section nodeview to target only data-layout-column */\n        [data-layout-content] {\n          height: 100%;\n          cursor: text;\n        }\n      }\n\n      [data-layout-column] + [data-layout-column] {\n        margin-left: ", "px;\n      }\n\n      @media screen and (max-width: ", "px) {\n        [data-layout-column] + [data-layout-column] {\n          margin-left: 0;\n        }\n      }\n\n      // TODO: Remove the border styles below once design tokens have been enabled and fallbacks are no longer triggered.\n      // This is because the default state already uses the same token and, as such, the hover style won't change anything.\n      // https://product-fabric.atlassian.net/browse/DSP-4441\n      /* Shows the border when cursor is inside a layout */\n      &.selected [data-layout-column],\n      &:hover [data-layout-column] {\n        border-color: ", ";\n      }\n\n      &.selected.danger > [data-layout-column] {\n        background-color: ", ";\n        border-color: ", ";\n      }\n\n      &.", ":not(.danger) {\n        [data-layout-column] {\n          ", "\n        }\n      }\n    }\n  }\n\n  .fabric-editor--full-width-mode .ProseMirror {\n    [data-layout-section] {\n      .", " {\n        margin: 0 ", "px;\n      }\n    }\n  }\n"])), _styles.columnLayoutSharedStyle, (0, _constants.gridSize)() - 1, _editorSharedStyles.akLayoutGutterOffset, _editorSharedStyles.akEditorSwoopCubicBezier, _editorSharedStyles.akEditorSelectedBorderSize, (0, _tokens.token)('color.border', _colors.N40A), _styles.LAYOUT_COLUMN_PADDING, _styles.LAYOUT_SECTION_MARGIN, _editorSharedStyles.gridMediumMaxWidth, (0, _tokens.token)('color.border', _colors.N50A), (0, _tokens.token)('color.background.danger', _editorSharedStyles.akEditorDeleteBackground), (0, _tokens.token)('color.border.danger', _editorSharedStyles.akEditorDeleteBorder), _editorSharedStyles.akEditorSelectedNodeClassName, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.Border, _editorSharedStyles.SelectionStyle.Blanket]), _types.TableCssClassName.TABLE_CONTAINER, _consts.tableMarginFullWidthMode);
+var layoutStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .ProseMirror {\n    ", " [data-layout-section] {\n      margin: ", "px -", "px 0;\n      transition: border-color 0.3s ", ";\n      cursor: pointer;\n\n      /* Inner cursor located 26px from left */\n      [data-layout-column] {\n        flex: 1;\n        min-width: 0;\n        border: ", "px solid\n          ", ";\n        border-radius: 4px;\n        padding: ", "px;\n        box-sizing: border-box;\n\n        > div {\n          > :not(style):first-child,\n          > style:first-child + * {\n            margin-top: 0;\n          }\n\n          > .ProseMirror-gapcursor:first-child + *,\n          > style:first-child + .ProseMirror-gapcursor + * {\n            margin-top: 0;\n          }\n\n          > .ProseMirror-gapcursor:first-child + span + *,\n          > style:first-child + .ProseMirror-gapcursor:first-child + span + * {\n            margin-top: 0;\n          }\n\n          > .embedCardView-content-wrap:first-of-type .rich-media-item {\n            margin-top: 0;\n          }\n\n          > .mediaSingleView-content-wrap:first-of-type .rich-media-item {\n            margin-top: 0;\n          }\n\n          > .ProseMirror-gapcursor.-right:first-child\n            + .mediaSingleView-content-wrap\n            .rich-media-item,\n          > style:first-child\n            + .ProseMirror-gapcursor.-right\n            + .mediaSingleView-content-wrap\n            .rich-media-item,\n          > .ProseMirror-gapcursor.-right:first-of-type\n            + .embedCardView-content-wrap\n            .rich-media-item {\n            margin-top: 0;\n          }\n\n          > .ProseMirror-gapcursor:first-child\n            + span\n            + .mediaSingleView-content-wrap\n            .rich-media-item,\n          > style:first-child\n            + .ProseMirror-gapcursor\n            + span\n            + .mediaSingleView-content-wrap\n            .rich-media-item {\n            margin-top: 0;\n          }\n\n          /* Prevent first DecisionWrapper's margin-top: 8px from shifting decisions down\n             and shrinking layout's node selectable area (leniency margin) */\n          > [data-node-type='decisionList'] {\n            li:first-of-type [data-decision-wrapper] {\n              margin-top: 0;\n            }\n          }\n        }\n\n        /* Make the 'content' fill the entire height of the layout column to allow click\n           handler of layout section nodeview to target only data-layout-column */\n        [data-layout-content] {\n          height: 100%;\n          cursor: text;\n        }\n      }\n\n      [data-layout-column] + [data-layout-column] {\n        margin-left: ", "px;\n      }\n\n      @media screen and (max-width: ", "px) {\n        [data-layout-column] + [data-layout-column] {\n          margin-left: 0;\n        }\n      }\n\n      // TODO: Remove the border styles below once design tokens have been enabled and fallbacks are no longer triggered.\n      // This is because the default state already uses the same token and, as such, the hover style won't change anything.\n      // https://product-fabric.atlassian.net/browse/DSP-4441\n      /* Shows the border when cursor is inside a layout */\n      &.selected [data-layout-column],\n      &:hover [data-layout-column] {\n        border-color: ", ";\n      }\n\n      &.selected.danger > [data-layout-column] {\n        background-color: ", ";\n        border-color: ", ";\n      }\n\n      &.", ":not(.danger) {\n        [data-layout-column] {\n          ", "\n        }\n      }\n    }\n  }\n\n  .fabric-editor--full-width-mode .ProseMirror {\n    [data-layout-section] {\n      .", " {\n        margin: 0 ", "px;\n      }\n    }\n  }\n"])), _styles.columnLayoutSharedStyle, (0, _constants.gridSize)() - 1, _editorSharedStyles.akLayoutGutterOffset, _editorSharedStyles.akEditorSwoopCubicBezier, _editorSharedStyles.akEditorSelectedBorderSize, "var(--ds-border, ".concat(_colors.N40A, ")"), _styles.LAYOUT_COLUMN_PADDING, _styles.LAYOUT_SECTION_MARGIN, _editorSharedStyles.gridMediumMaxWidth, "var(--ds-border, ".concat(_colors.N50A, ")"), "var(--ds-background-danger, ".concat(_editorSharedStyles.akEditorDeleteBackground, ")"), "var(--ds-border-danger, ".concat(_editorSharedStyles.akEditorDeleteBorder, ")"), _editorSharedStyles.akEditorSelectedNodeClassName, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.Border, _editorSharedStyles.SelectionStyle.Blanket]), _types.TableCssClassName.TABLE_CONTAINER, _consts.tableMarginFullWidthMode);
 exports.layoutStyles = layoutStyles;

package/dist/cjs/plugins/layout/toolbar.js

@@ -96,6 +96,7 @@ var buildToolbar = function buildToolbar(state, intl, pos, _allowBreakout, addSi
       id: 'editor.layout.delete',
       type: 'button',
       appearance: 'danger',
+      focusEditoronEnter: true,
       icon: _remove.default,
       testId: _messages.default.remove.id,
       title: intl.formatMessage(_messages.default.remove),

package/dist/cjs/plugins/list/actions/outdent-list-items-selected.js

@@ -1,16 +1,22 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.outdentListItemsSelected = void 0;
 
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
 var _prosemirrorState = require("prosemirror-state");
 
 var _prosemirrorModel = require("prosemirror-model");
 
 var _prosemirrorTransform = require("prosemirror-transform");
 
+var _utils = require("@atlaskit/editor-common/utils");
+
 var _node = require("../utils/node");
 
 var _find = require("../utils/find");
@@ -19,7 +25,13 @@ var _selection = require("../utils/selection");
 
 var _gapCursorSelection = require("../../selection/gap-cursor-selection");
 
-var outdentListItemsSelected = function outdentListItemsSelected(tr) {
+var _featureFlagsContext = require("../../feature-flags-context");
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+var outdentListItemsSelected = function outdentListItemsSelected(tr, state) {
   var originalSelection = tr.selection;
   var normalizedSelection = (0, _selection.normalizeListItemsSelection)({
     selection: tr.selection,
@@ -59,7 +71,8 @@ var outdentListItemsSelected = function outdentListItemsSelected(tr) {
     } else {
       extractListItemsRangeFromList({
         tr: tr,
-        range: mappedRange
+        range: mappedRange,
+        state: state
       });
       hasNormalizedToPositionLiftedOut = hasNormalizedToPositionLiftedOut || oldTo >= range.from && oldTo < range.to;
       hasNormalizedFromPositionLiftedOut = hasNormalizedFromPositionLiftedOut || oldFrom >= range.from && oldFrom < range.to;
@@ -206,7 +219,8 @@ var outdentRangeToParentList = function outdentRangeToParentList(_ref2) {
 
 var extractListItemsRangeFromList = function extractListItemsRangeFromList(_ref3) {
   var tr = _ref3.tr,
-      range = _ref3.range;
+      range = _ref3.range,
+      state = _ref3.state;
   var list = range.parent;
   var $start = tr.doc.resolve(range.start);
   var listStart = $start.start(range.depth);
@@ -231,7 +245,23 @@ var extractListItemsRangeFromList = function extractListItemsRangeFromList(_ref3
     }
   }
 
-  var nextListFragment = listItemContent.append(_prosemirrorModel.Fragment.from(list.copy(_prosemirrorModel.Fragment.empty)));
+  var nextList = list.copy(_prosemirrorModel.Fragment.empty);
+  var featureFlags = (0, _featureFlagsContext.getFeatureFlags)(state);
+
+  if (featureFlags !== null && featureFlags !== void 0 && featureFlags.restartNumberedLists) {
+    // if splitting a numbered list, keep the splitted item
+    // counter as the start of the next (second half) list (instead
+    // of reverting back to 1 as a starting number)
+    var order = (0, _utils.getOrderFromOrderedListNode)(list);
+
+    if (list.type.name === 'orderedList') {
+      nextList.attrs = _objectSpread(_objectSpread({}, nextList.attrs), {}, {
+        order: range.endIndex - 1 + order
+      });
+    }
+  }
+
+  var nextListFragment = listItemContent.append(_prosemirrorModel.Fragment.from(nextList));
 
   if (isTheEntireList) {
     var slice = new _prosemirrorModel.Slice(listItemContent, 0, 0);

package/dist/cjs/plugins/list/commands/outdent-list.js

@@ -46,7 +46,7 @@ function outdentList() {
     (0, _prosemirrorHistory.closeHistory)(state.tr);
     var actionSubjectId = (0, _node.isBulletList)(parentListNode.node) ? _analytics.ACTION_SUBJECT_ID.FORMAT_LIST_BULLET : _analytics.ACTION_SUBJECT_ID.FORMAT_LIST_NUMBER;
     var customTr = state.tr;
-    (0, _outdentListItemsSelected.outdentListItemsSelected)(customTr);
+    (0, _outdentListItemsSelected.outdentListItemsSelected)(customTr, state);
 
     if (!customTr || !customTr.docChanged) {
       // Even though this is a non-operation, we don't want to send this event to the browser. Because if we return false, the browser will move the focus to another place

package/dist/cjs/plugins/list/index.js

@@ -25,7 +25,11 @@ var _keymaps = require("../../keymaps");
 
 var _assets = require("../quick-insert/assets");
 
-var listPlugin = function listPlugin() {
+/*
+  Toolbar buttons to bullet and ordered list can be found in
+  packages/editor/editor-core/src/plugins/toolbar-lists-indentation/ui/Toolbar.tsx
+ */
+var listPlugin = function listPlugin(options) {
   return {
     name: 'list',
     nodes: function nodes() {
@@ -34,7 +38,7 @@ var listPlugin = function listPlugin() {
         node: _adfSchema.bulletList
       }, {
         name: 'orderedList',
-        node: _adfSchema.orderedList
+        node: options !== null && options !== void 0 && options.restartNumberedLists ? _adfSchema.orderedListWithOrder : _adfSchema.orderedList
       }, {
         name: 'listItem',
         node: _adfSchema.listItem

package/dist/cjs/plugins/list/pm-plugins/input-rules/create-list-input-rule.js

@@ -11,7 +11,8 @@ var _analytics = require("../../../analytics");
 
 function createRuleForListType(_ref) {
   var listType = _ref.listType,
-      expression = _ref.expression;
+      expression = _ref.expression,
+      featureFlags = _ref.featureFlags;
   var isBulletList = listType.name === 'bulletList';
   var actionSubjectId = isBulletList ? _analytics.ACTION_SUBJECT_ID.FORMAT_LIST_BULLET : _analytics.ACTION_SUBJECT_ID.FORMAT_LIST_NUMBER;
   var analyticsPayload = {
@@ -28,10 +29,20 @@ function createRuleForListType(_ref) {
     return node.type === listType;
   };
 
+  var getAttrs = {};
+
+  if (featureFlags !== null && featureFlags !== void 0 && featureFlags.restartNumberedLists) {
+    getAttrs = function getAttrs(matchResult) {
+      return {
+        order: Number(matchResult[1])
+      };
+    };
+  }
+
   var inputRule = (0, _inputRules.createWrappingJoinRule)({
     match: expression,
     nodeType: listType,
-    getAttrs: {},
+    getAttrs: getAttrs,
     joinPredicate: shouldJoinNextNodeWhen
   });
   return (0, _inputRules.ruleWithAnalytics)(analyticsPayload)(inputRule);

package/dist/cjs/plugins/list/pm-plugins/input-rules/index.js

@@ -25,10 +25,13 @@ function inputRulePlugin(schema, featureFlags) {
     }));
   }
 
+  var expression = featureFlags !== null && featureFlags !== void 0 && featureFlags.restartNumberedLists ? /((^[1-9]{1}[0-9]{0,2})|^(0))[\.\)] $/ : /^(1)[\.\)] $/;
+
   if (orderedList) {
     rules.push((0, _createListInputRule.createRuleForListType)({
-      expression: /^(1)[\.\)] $/,
-      listType: orderedList
+      expression: expression,
+      listType: orderedList,
+      featureFlags: featureFlags
     }));
   }