@atlaskit/editor-core 176.0.3 → 177.0.1

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

@@ -15,7 +15,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';
@@ -85,6 +85,16 @@ export var getToolbarConfig = function getToolbarConfig(options) {
   return function (state, intl, providerFactory) {
     var formatMessage = intl.formatMessage;
     var linkState = stateKey.getState(state);
+    /**
+     * Enable focus trap only if feature flag is enabled AND for the new version of the picker
+     */
+
+    var _getFeatureFlags2 = getFeatureFlags(state),
+        lpLinkPicker = _getFeatureFlags2.lpLinkPicker,
+        lpLinkPickerFocusTrap = _getFeatureFlags2.lpLinkPickerFocusTrap,
+        preventPopupOverflow = _getFeatureFlags2.preventPopupOverflow;
+
+    var shouldEnableFocusTrap = lpLinkPicker && lpLinkPickerFocusTrap;
 
     if (linkState && linkState.activeLinkMark) {
       var activeLinkMark = linkState.activeLinkMark;
@@ -189,6 +199,8 @@ export var getToolbarConfig = function getToolbarConfig(options) {
         case 'EDIT_INSERTED':
         case 'INSERT':
           {
+            var _options$linkPicker, _options$linkPicker$p;
+
             var _link;
 
             if (isEditLink(activeLinkMark) && activeLinkMark.node) {
@@ -200,9 +212,12 @@ export 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) ? LINKPICKER_HEIGHT_IN_PX : RECENT_SEARCH_HEIGHT_IN_PX;
             return _objectSpread(_objectSpread({}, hyperLinkToolbar), {}, {
-              height: RECENT_SEARCH_HEIGHT_IN_PX,
+              preventPopupOverflow: preventPopupOverflow,
+              height: popupHeight,
               width: RECENT_SEARCH_WIDTH_IN_PX,
+              focusTrap: shouldEnableFocusTrap,
               items: [{
                 type: 'custom',
                 fallback: [],
@@ -219,6 +234,9 @@ export 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/esm/plugins/hyperlink/ui/EditorLinkPicker/index.js

@@ -1,22 +1,29 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["view"];
+var _excluded = ["view", "onCancel"];
 import React, { useCallback } from 'react';
 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 var EditorLinkPicker = function EditorLinkPicker(_ref) {
   var view = _ref.view,
+      onCancel = _ref.onCancel,
       restProps = _objectWithoutProperties(_ref, _excluded);
 
   var onEscape = useCallback(function () {
     hideLinkToolbar()(view.state, view.dispatch);
     view.dispatch(cardHideLinkToolbar(view.state.tr));
-  }, [view]);
+    onCancel === null || onCancel === void 0 ? void 0 : onCancel();
+  }, [view, onCancel]);
   var onClickAway = useCallback(function () {
     hideLinkToolbar()(view.state, view.dispatch);
-  }, [view]);
+    onCancel === null || onCancel === void 0 ? void 0 : onCancel();
+  }, [view, onCancel]);
   var ref = useEscapeClickaway(onEscape, onClickAway);
   return /*#__PURE__*/React.createElement("div", {
     ref: ref

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

@@ -26,7 +26,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';
@@ -48,9 +47,9 @@ import { browser } from '@atlaskit/editor-common/utils';
 import { transformTimeStamp } from '../../../../ui/LinkSearch/transformTimeStamp';
 import Announcer from '../../../../utils/announcer/announcer';
 export var RECENT_SEARCH_LIST_SIZE = 5;
-var clearText = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  cursor: pointer;\n  padding: 0;\n  margin-right: 8px;\n  color: ", ";\n  background: transparent;\n  border: none;\n"])), token('color.icon.subtle', N90));
-var textInputWrapper = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  ", ";\n  border-top: 1px solid ", ";\n  border-bottom: 1px solid ", ";\n"])), inputWrapper, token('color.border', N30), token('color.border', N30));
-var iconWrapper = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  color: ", ";\n  padding: 4px 8px;\n  width: 18px;\n"])), token('color.icon.subtle', N80));
+var clearText = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  cursor: pointer;\n  padding: 0;\n  margin-right: 8px;\n  color: ", ";\n  background: transparent;\n  border: none;\n"])), "var(--ds-icon-subtle, ".concat(N90, ")"));
+var textInputWrapper = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  ", ";\n  border-top: 1px solid ", ";\n  border-bottom: 1px solid ", ";\n"])), inputWrapper, "var(--ds-border, ".concat(N30, ")"), "var(--ds-border, ".concat(N30, ")"));
+var iconWrapper = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  color: ", ";\n  padding: 4px 8px;\n  width: 18px;\n"])), "var(--ds-icon-subtle, ".concat(N80, ")"));
 export var messages = defineMessages({
   displayText: {
     id: 'fabric.editor.displayText',

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

@@ -53,7 +53,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.createElement(WithProviders, {
         providers: ['activityProvider', 'searchProvider'],
         providerFactory: providerFactory,
@@ -66,25 +67,19 @@ var HyperlinkAddToolbar = /*#__PURE__*/function (_React$PureComponent) {
               hyperlinkPluginState: pluginKey
             },
             render: function render(_ref3) {
-              var _linkPickerOptions$pl;
-
               var hyperlinkPluginState = _ref3.hyperlinkPluginState;
 
               var _getFeatureFlags = 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.createElement(EditorLinkPicker, _extends({
                   view: view
                 }, linkPickerOptions, {
                   url: displayUrl,
                   displayText: displayText,
-                  onSubmit: onSubmitInterface(onSubmit)
+                  onSubmit: onSubmitInterface(onSubmit),
+                  onCancel: onCancel
                 }));
               }
 

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

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

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

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

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

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

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

@@ -27,7 +27,8 @@ export var DropDownButton = /*#__PURE__*/React.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: jsx(DropDownButtonIcon, {
       label: ""
     }),

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

@@ -536,6 +536,7 @@ export var ToolbarInsertBlock = /*#__PURE__*/function (_React$PureComponent) {
       }, buttons.map(function (btn) {
         return jsx(ToolbarButton, {
           item: btn,
+          testId: String(btn.content),
           ref: btn.value.name === 'emoji' ? _this2.handleEmojiButtonRef : noop,
           key: btn.value.name,
           spacing: isReducedSpacing ? 'none' : 'default',
@@ -545,6 +546,7 @@ export 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
         });
       }), jsx("span", {

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

@@ -22,6 +22,7 @@ import QuoteIcon from '@atlaskit/icon/glyph/quote';
 import { shortcutStyle } from '../../../../ui/styles';
 import { tooltip, addLink, toggleTable } from '../../../../keymaps';
 import { shallowEquals } from './shallow-equals';
+import { getAriaKeyshortcuts } from '@atlaskit/editor-common/keymaps';
 
 var from = function from(init) {
   return {
@@ -36,8 +37,9 @@ var from = function from(init) {
     elemAfter: init.shortcut ? jsx("div", {
       css: 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
   };
@@ -54,7 +56,8 @@ export var action = mem(function (init) {
     disabled: init.disabled,
     name: 'action',
     shortcut: '[]',
-    Icon: TaskIcon
+    Icon: TaskIcon,
+    'aria-keyshortcuts': '[ ] Space'
   });
 });
 export var link = mem(function (init) {
@@ -65,7 +68,8 @@ export var link = mem(function (init) {
     name: 'link',
     shortcut: tooltip(addLink),
     Icon: LinkIcon,
-    'aria-haspopup': init['aria-haspopup']
+    'aria-haspopup': init['aria-haspopup'],
+    'aria-keyshortcuts': getAriaKeyshortcuts(addLink)
   });
 });
 export var media = mem(function (init) {
@@ -94,7 +98,8 @@ export var mention = mem(function (init) {
     name: 'mention',
     Icon: MentionIcon,
     shortcut: '@',
-    'aria-haspopup': init['aria-haspopup']
+    'aria-haspopup': init['aria-haspopup'],
+    'aria-keyshortcuts': 'Shift+2 Space'
   });
 });
 export var emoji = mem(function (init) {
@@ -105,7 +110,8 @@ export var emoji = mem(function (init) {
     name: 'emoji',
     Icon: EmojiIcon,
     shortcut: ':',
-    'aria-haspopup': init['aria-haspopup']
+    'aria-haspopup': init['aria-haspopup'],
+    'aria-keyshortcuts': 'Shift+;'
   });
 });
 export var table = mem(function (init) {
@@ -115,7 +121,8 @@ export var table = mem(function (init) {
     disabled: init.disabled,
     name: 'table',
     Icon: TableIcon,
-    shortcut: tooltip(toggleTable)
+    shortcut: tooltip(toggleTable),
+    'aria-keyshortcuts': getAriaKeyshortcuts(toggleTable)
   });
 });
 export var layout = mem(function (init) {
@@ -134,7 +141,8 @@ export var codeblock = mem(function (init) {
     disabled: init.disabled,
     name: 'codeblock',
     Icon: CodeIcon,
-    shortcut: init.shortcut
+    shortcut: init.shortcut,
+    'aria-keyshortcuts': getAriaKeyshortcuts(init.shortcut)
   });
 });
 export var panel = mem(function (init) {
@@ -144,7 +152,8 @@ export var panel = mem(function (init) {
     disabled: init.disabled,
     name: 'panel',
     Icon: InfoIcon,
-    shortcut: init.shortcut
+    shortcut: init.shortcut,
+    'aria-keyshortcuts': getAriaKeyshortcuts(init.shortcut)
   });
 });
 export var blockquote = mem(function (init) {
@@ -154,7 +163,8 @@ export var blockquote = mem(function (init) {
     disabled: init.disabled,
     name: 'blockquote',
     Icon: QuoteIcon,
-    shortcut: init.shortcut
+    shortcut: init.shortcut,
+    'aria-keyshortcuts': 'Shift+. Space'
   });
 });
 export var decision = mem(function (init) {
@@ -164,7 +174,8 @@ export var decision = mem(function (init) {
     disabled: init.disabled,
     name: 'decision',
     Icon: DecisionIcon,
-    shortcut: '<>'
+    shortcut: '<>',
+    'aria-keyshortcuts': 'Shift+, Shift+. Space'
   });
 });
 export var horizontalrule = mem(function (init) {
@@ -174,7 +185,8 @@ export var horizontalrule = mem(function (init) {
     disabled: init.disabled,
     name: 'horizontalrule',
     Icon: HorizontalRuleIcon,
-    shortcut: '---'
+    shortcut: '---',
+    'aria-keyshortcuts': '- - -'
   });
 });
 export var expand = mem(function (init) {
@@ -193,7 +205,8 @@ export var date = mem(function (init) {
     disabled: init.disabled,
     name: 'date',
     Icon: DateIcon,
-    shortcut: '//'
+    shortcut: '//',
+    'aria-keyshortcuts': '/ / Enter'
   });
 });
 export var placeholder = mem(function (init) {

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

@@ -8,9 +8,8 @@ import { JiraIcon } from '@atlaskit/logo/jira-icon';
 import { borderRadius } from '@atlaskit/theme/constants';
 import { N30, N50 } from '@atlaskit/theme/colors';
 import { relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
-import { token } from '@atlaskit/tokens';
-var wrapperNode = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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"])), token('color.background.neutral', N30), token('color.border', N50), borderRadius(), relativeFontSizeToBase16(13), token('color.background.selected', N50));
-var jiraChildNode = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: inline-block;\n  color: ", ";\n  line-height: 24px;\n  vertical-align: top;\n\n  &::before {\n    color: ", ";\n    content: 'JIRA | ';\n  }\n"])), token('color.text.subtlest', '#707070'), token('color.text', 'black'));
+var wrapperNode = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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(N30, ")"), "var(--ds-border, ".concat(N50, ")"), borderRadius(), relativeFontSizeToBase16(13), "var(--ds-background-selected, ".concat(N50, ")"));
+var jiraChildNode = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\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 = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\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"])));
 export default function JIRAIssueNode(props) {
   var issueKey = props.node.attrs.issueKey;

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

@@ -7,8 +7,7 @@ import { gridSize } from '@atlaskit/theme/constants';
 import { N40A, N50A } from '@atlaskit/theme/colors';
 import { columnLayoutSharedStyle, LAYOUT_SECTION_MARGIN, LAYOUT_COLUMN_PADDING } from '@atlaskit/editor-common/styles';
 import { gridMediumMaxWidth, akEditorDeleteBackground, akEditorDeleteBorder, akEditorSelectedBorderSize, akLayoutGutterOffset, akEditorSwoopCubicBezier, SelectionStyle, getSelectionStyles, akEditorSelectedNodeClassName } from '@atlaskit/editor-shared-styles';
-import { token } from '@atlaskit/tokens';
 import { TableCssClassName } from '@atlaskit/editor-plugin-table/types';
 import { tableMarginFullWidthMode } from '@atlaskit/editor-plugin-table/ui/consts';
 export { LAYOUT_COLUMN_PADDING, LAYOUT_SECTION_MARGIN };
-export var layoutStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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"])), columnLayoutSharedStyle, gridSize() - 1, akLayoutGutterOffset, akEditorSwoopCubicBezier, akEditorSelectedBorderSize, token('color.border', N40A), LAYOUT_COLUMN_PADDING, LAYOUT_SECTION_MARGIN, gridMediumMaxWidth, token('color.border', N50A), token('color.background.danger', akEditorDeleteBackground), token('color.border.danger', akEditorDeleteBorder), akEditorSelectedNodeClassName, getSelectionStyles([SelectionStyle.Border, SelectionStyle.Blanket]), TableCssClassName.TABLE_CONTAINER, tableMarginFullWidthMode);
+export var layoutStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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"])), columnLayoutSharedStyle, gridSize() - 1, akLayoutGutterOffset, akEditorSwoopCubicBezier, akEditorSelectedBorderSize, "var(--ds-border, ".concat(N40A, ")"), LAYOUT_COLUMN_PADDING, LAYOUT_SECTION_MARGIN, gridMediumMaxWidth, "var(--ds-border, ".concat(N50A, ")"), "var(--ds-background-danger, ".concat(akEditorDeleteBackground, ")"), "var(--ds-border-danger, ".concat(akEditorDeleteBorder, ")"), akEditorSelectedNodeClassName, getSelectionStyles([SelectionStyle.Border, SelectionStyle.Blanket]), TableCssClassName.TABLE_CONTAINER, tableMarginFullWidthMode);

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

@@ -72,6 +72,7 @@ export var buildToolbar = function buildToolbar(state, intl, pos, _allowBreakout
       id: 'editor.layout.delete',
       type: 'button',
       appearance: 'danger',
+      focusEditoronEnter: true,
       icon: RemoveIcon,
       testId: commonMessages.remove.id,
       title: intl.formatMessage(commonMessages.remove),

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

@@ -1,11 +1,19 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+
+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) { _defineProperty(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; }
+
 import { Selection, TextSelection, NodeSelection } from 'prosemirror-state';
 import { NodeRange, Slice, Fragment } from 'prosemirror-model';
 import { liftTarget, ReplaceAroundStep, ReplaceStep } from 'prosemirror-transform';
+import { getOrderFromOrderedListNode } from '@atlaskit/editor-common/utils';
 import { isListNode, isListItemNode, joinSiblingLists, JoinDirection } from '../utils/node';
 import { findFirstParentListItemNode, findRootParentListNode } from '../utils/find';
 import { normalizeListItemsSelection, createListNodeRange } from '../utils/selection';
 import { GapCursorSelection } from '../../selection/gap-cursor-selection';
-export var outdentListItemsSelected = function outdentListItemsSelected(tr) {
+import { getFeatureFlags } from '../../feature-flags-context';
+export var outdentListItemsSelected = function outdentListItemsSelected(tr, state) {
   var originalSelection = tr.selection;
   var normalizedSelection = normalizeListItemsSelection({
     selection: tr.selection,
@@ -45,7 +53,8 @@ export 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;
@@ -190,7 +199,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);
@@ -215,7 +225,23 @@ var extractListItemsRangeFromList = function extractListItemsRangeFromList(_ref3
     }
   }
 
-  var nextListFragment = listItemContent.append(Fragment.from(list.copy(Fragment.empty)));
+  var nextList = list.copy(Fragment.empty);
+  var featureFlags = 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 = getOrderFromOrderedListNode(list);
+
+    if (list.type.name === 'orderedList') {
+      nextList.attrs = _objectSpread(_objectSpread({}, nextList.attrs), {}, {
+        order: range.endIndex - 1 + order
+      });
+    }
+  }
+
+  var nextListFragment = listItemContent.append(Fragment.from(nextList));
 
   if (isTheEntireList) {
     var slice = new Slice(listItemContent, 0, 0);

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

@@ -30,7 +30,7 @@ export function outdentList() {
     closeHistory(state.tr);
     var actionSubjectId = isBulletList(parentListNode.node) ? ACTION_SUBJECT_ID.FORMAT_LIST_BULLET : ACTION_SUBJECT_ID.FORMAT_LIST_NUMBER;
     var customTr = state.tr;
-    outdentListAction(customTr);
+    outdentListAction(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/esm/plugins/list/index.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { orderedList, bulletList, listItem } from '@atlaskit/adf-schema';
+import { orderedList, orderedListWithOrder, bulletList, listItem } from '@atlaskit/adf-schema';
 import { createPlugin } from './pm-plugins/main';
 import inputRulePlugin from './pm-plugins/input-rules';
 import keymapPlugin from './pm-plugins/keymap';
@@ -8,7 +8,11 @@ import { addAnalytics, ACTION, EVENT_TYPE, INPUT_METHOD, ACTION_SUBJECT, ACTION_
 import { tooltip, toggleBulletList, toggleOrderedList } from '../../keymaps';
 import { IconList, IconListNumber } from '../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() {
@@ -17,7 +21,7 @@ var listPlugin = function listPlugin() {
         node: bulletList
       }, {
         name: 'orderedList',
-        node: orderedList
+        node: options !== null && options !== void 0 && options.restartNumberedLists ? orderedListWithOrder : orderedList
       }, {
         name: 'listItem',
         node: listItem

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

@@ -2,7 +2,8 @@ import { ruleWithAnalytics, createWrappingJoinRule } from '../../../../utils/inp
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '../../../analytics';
 export function createRuleForListType(_ref) {
   var listType = _ref.listType,
-      expression = _ref.expression;
+      expression = _ref.expression,
+      featureFlags = _ref.featureFlags;
   var isBulletList = listType.name === 'bulletList';
   var actionSubjectId = isBulletList ? ACTION_SUBJECT_ID.FORMAT_LIST_BULLET : ACTION_SUBJECT_ID.FORMAT_LIST_NUMBER;
   var analyticsPayload = {
@@ -19,10 +20,20 @@ export 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 = createWrappingJoinRule({
     match: expression,
     nodeType: listType,
-    getAttrs: {},
+    getAttrs: getAttrs,
     joinPredicate: shouldJoinNextNodeWhen
   });
   return ruleWithAnalytics(analyticsPayload)(inputRule);

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

@@ -16,10 +16,13 @@ export default 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(createRuleForListType({
-      expression: /^(1)[\.\)] $/,
-      listType: orderedList
+      expression: expression,
+      listType: orderedList,
+      featureFlags: featureFlags
     }));
   }
 

package/dist/esm/plugins/list/pm-plugins/main.js

@@ -13,7 +13,9 @@ import { isListNode } from '../utils/node';
 import { pluginFactory } from '../../../utils/plugin-state-factory';
 import { setGapCursorSelection } from '../../../utils';
 import { Side } from '../../selection/gap-cursor-selection';
-import { listPaddingLeftMarkerSpace, CodeBlockSharedCssClassName } from '@atlaskit/editor-common/styles';
+import { listItemCounterPadding, CodeBlockSharedCssClassName, getOrderedListInlineStyles } from '@atlaskit/editor-common/styles';
+import { getItemCounterDigitsSize } from '@atlaskit/editor-common/utils';
+import { getFeatureFlags } from '../../feature-flags-context';
 var listPluginKey = new PluginKey('listPlugin');
 export var pluginKey = listPluginKey;
 var initialState = {
@@ -23,8 +25,9 @@ var initialState = {
   orderedListDisabled: false,
   decorationSet: DecorationSet.empty
 };
-export var getDecorations = function getDecorations(doc) {
-  var decorations = []; // this stack keeps track of each (nested) list to calculate the indentation level
+export var getDecorations = function getDecorations(doc, state) {
+  var decorations = [];
+  var featureFlags = getFeatureFlags(state); // this stack keeps track of each (nested) list to calculate the indentation level
 
   var processedListsStack = [];
   doc.nodesBetween(0, doc.content.size, function (node, currentNodeStartPos) {
@@ -55,19 +58,36 @@ export var getDecorations = function getDecorations(doc) {
         'data-indent-level': "".concat(depth)
       }));
 
-      if (node.childCount >= 100) {
-        decorations.push(Decoration.node(from, to, {
-          'data-child-count': '100+'
-        }));
+      if (featureFlags !== null && featureFlags !== void 0 && featureFlags.restartNumberedLists) {
+        var _node$attrs;
+
+        // If a numbered list has item counters numbering >= 100, we'll need to add special
+        // spacing to account for the extra digit chars
+        var digitsSize = getItemCounterDigitsSize({
+          itemsCount: node === null || node === void 0 ? void 0 : node.childCount,
+          order: node === null || node === void 0 ? void 0 : (_node$attrs = node.attrs) === null || _node$attrs === void 0 ? void 0 : _node$attrs.order
+        });
+
+        if (digitsSize) {
+          decorations.push(Decoration.node(from, to, {
+            style: getOrderedListInlineStyles(digitsSize, 'string')
+          }));
+        }
+      } else {
+        if (node.childCount >= 100) {
+          decorations.push(Decoration.node(from, to, {
+            'data-child-count': '100+'
+          }));
+        }
       }
     }
   });
   return DecorationSet.empty.add(doc, decorations);
 };
 
-var handleDocChanged = function handleDocChanged(tr, pluginState) {
+var handleDocChanged = function handleDocChanged(tr, pluginState, editorState) {
   var nextPluginState = handleSelectionChanged(tr, pluginState);
-  var decorationSet = getDecorations(tr.doc);
+  var decorationSet = getDecorations(tr.doc, editorState);
   return _objectSpread(_objectSpread({}, nextPluginState), {}, {
     decorationSet: decorationSet
   });
@@ -112,7 +132,7 @@ var _pluginFactory = pluginFactory(listPluginKey, reducer(), {
 
 var createInitialState = function createInitialState(state) {
   return _objectSpread(_objectSpread({}, initialState), {}, {
-    decorationSet: getDecorations(state.doc)
+    decorationSet: getDecorations(state.doc, state)
   });
 };
 
@@ -142,7 +162,7 @@ export var createPlugin = function createPlugin(eventDispatch) {
             var _document, _document$elementFrom;
 
             var bufferPx = 50;
-            var isCodeBlockNextToListMarker = Boolean((_document = document) === null || _document === void 0 ? void 0 : (_document$elementFrom = _document.elementFromPoint(event.clientX + (listPaddingLeftMarkerSpace + bufferPx), event.clientY)) === null || _document$elementFrom === void 0 ? void 0 : _document$elementFrom.closest(".".concat(CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER)));
+            var isCodeBlockNextToListMarker = Boolean((_document = document) === null || _document === void 0 ? void 0 : (_document$elementFrom = _document.elementFromPoint(event.clientX + (listItemCounterPadding + bufferPx), event.clientY)) === null || _document$elementFrom === void 0 ? void 0 : _document$elementFrom.closest(".".concat(CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER)));
 
             if (isCodeBlockNextToListMarker) {
               // +1 needed to put cursor inside li