@atlaskit/editor-core 181.0.0 → 182.0.0

package/dist/es2019/plugins/toolbar-lists-indentation/index.js

@@ -7,60 +7,64 @@ import { pluginKey as indentationButtonsPluginKey, createPlugin as indentationBu
 const toolbarListsIndentationPlugin = ({
   showIndentationButtons,
   allowHeadingAndParagraphIndentation
-}) => ({
-  name: 'toolbarListsIndentation',
-  pmPlugins() {
-    return [{
-      name: 'indentationButtons',
-      plugin: ({
-        dispatch
-      }) => indentationButtonsPlugin({
-        dispatch,
-        showIndentationButtons,
-        allowHeadingAndParagraphIndentation
-      })
-    }];
-  },
-  primaryToolbarComponent({
-    editorView,
-    popupsMountPoint,
-    popupsBoundariesElement,
-    popupsScrollableElement,
-    toolbarSize,
-    disabled,
-    isToolbarReducedSpacing
-  }) {
-    const isSmall = toolbarSize < ToolbarSize.L;
-    return /*#__PURE__*/React.createElement(WithPluginState, {
-      plugins: {
-        listState: listPluginKey,
-        indentationState: indentationButtonsPluginKey
-      },
-      render: ({
-        listState,
-        indentationState
-      }) => {
-        if (!listState) {
-          return null;
+}, api) => {
+  const featureFlags = (api === null || api === void 0 ? void 0 : api.dependencies.featureFlags.sharedState.currentState()) || {};
+  return {
+    name: 'toolbarListsIndentation',
+    pmPlugins() {
+      return [{
+        name: 'indentationButtons',
+        plugin: ({
+          dispatch
+        }) => indentationButtonsPlugin({
+          dispatch,
+          showIndentationButtons,
+          allowHeadingAndParagraphIndentation
+        })
+      }];
+    },
+    primaryToolbarComponent({
+      editorView,
+      popupsMountPoint,
+      popupsBoundariesElement,
+      popupsScrollableElement,
+      toolbarSize,
+      disabled,
+      isToolbarReducedSpacing
+    }) {
+      const isSmall = toolbarSize < ToolbarSize.L;
+      return /*#__PURE__*/React.createElement(WithPluginState, {
+        plugins: {
+          listState: listPluginKey,
+          indentationState: indentationButtonsPluginKey
+        },
+        render: ({
+          listState,
+          indentationState
+        }) => {
+          if (!listState) {
+            return null;
+          }
+          return /*#__PURE__*/React.createElement(ToolbarListsIndentation, {
+            featureFlags: featureFlags,
+            isSmall: isSmall,
+            isReducedSpacing: isToolbarReducedSpacing,
+            disabled: disabled,
+            editorView: editorView,
+            popupsMountPoint: popupsMountPoint,
+            popupsBoundariesElement: popupsBoundariesElement,
+            popupsScrollableElement: popupsScrollableElement,
+            bulletListActive: listState.bulletListActive,
+            bulletListDisabled: listState.bulletListDisabled,
+            orderedListActive: listState.orderedListActive,
+            orderedListDisabled: listState.orderedListDisabled,
+            showIndentationButtons: !!showIndentationButtons,
+            indentDisabled: indentationState.indentDisabled,
+            outdentDisabled: indentationState.outdentDisabled
+          });
         }
-        return /*#__PURE__*/React.createElement(ToolbarListsIndentation, {
-          isSmall: isSmall,
-          isReducedSpacing: isToolbarReducedSpacing,
-          disabled: disabled,
-          editorView: editorView,
-          popupsMountPoint: popupsMountPoint,
-          popupsBoundariesElement: popupsBoundariesElement,
-          popupsScrollableElement: popupsScrollableElement,
-          bulletListActive: listState.bulletListActive,
-          bulletListDisabled: listState.bulletListDisabled,
-          orderedListActive: listState.orderedListActive,
-          orderedListDisabled: listState.orderedListDisabled,
-          showIndentationButtons: !!showIndentationButtons,
-          indentDisabled: indentationState.indentDisabled,
-          outdentDisabled: indentationState.outdentDisabled
-        });
-      }
-    });
-  }
-});
+      });
+    }
+  };
+};
 export default toolbarListsIndentationPlugin;

package/dist/es2019/plugins/toolbar-lists-indentation/ui/Toolbar.js

@@ -38,7 +38,8 @@ export function Toolbar(props) {
   const isOutdentButtonFocused = document.activeElement === outdentButtonRef.current;
   const handleOnItemActivated = buttonName => event => onItemActivated({
     editorView: props.editorView,
-    buttonName
+    buttonName,
+    featureFlags: props.featureFlags
   });
   useEffect(() => {
     if (isIndentButtonFocused && indentDisabled && outdentButtonRef.current) {

package/dist/es2019/plugins/toolbar-lists-indentation/ui/ToolbarDropdown.js

@@ -50,7 +50,8 @@ export function ToolbarDropdown(props) {
     setIsDropdownOpen(!shouldCloseMenu);
     return onItemActivated({
       editorView: props.editorView,
-      buttonName: item.value.name
+      buttonName: item.value.name,
+      featureFlags: props.featureFlags
     });
   };
   return jsx("span", {

package/dist/es2019/plugins/toolbar-lists-indentation/ui/index.js

@@ -17,7 +17,8 @@ export default function ToolbarListsIndentation(props) {
     popupsBoundariesElement,
     popupsScrollableElement,
     indentDisabled,
-    outdentDisabled
+    outdentDisabled,
+    featureFlags
   } = props;
   if (isSmall) {
     return jsx(ToolbarDropdown, {
@@ -34,7 +35,8 @@ export default function ToolbarListsIndentation(props) {
       indentDisabled: indentDisabled,
       outdentDisabled: outdentDisabled,
       disabled: disabled,
-      onItemActivated: onItemActivated
+      onItemActivated: onItemActivated,
+      featureFlags: featureFlags
     });
   }
   return jsx(Toolbar, {
@@ -48,6 +50,7 @@ export default function ToolbarListsIndentation(props) {
     indentDisabled: indentDisabled,
     outdentDisabled: outdentDisabled,
     disabled: disabled,
-    onItemActivated: onItemActivated
+    onItemActivated: onItemActivated,
+    featureFlags: featureFlags
   });
 }

package/dist/es2019/plugins/toolbar-lists-indentation/ui/onItemActivated.js

@@ -5,7 +5,8 @@ import { INPUT_METHOD } from '../../analytics';
 import { pluginKey as indentationButtonsPluginKey } from '../pm-plugins/indentation-buttons';
 export function onItemActivated({
   buttonName,
-  editorView
+  editorView,
+  featureFlags
 }) {
   switch (buttonName) {
     case 'bullet_list':
@@ -35,7 +36,7 @@ export function onItemActivated({
           outdentParagraphOrHeading(INPUT_METHOD.TOOLBAR)(editorView.state, editorView.dispatch);
         }
         if (node === 'list') {
-          outdentList(INPUT_METHOD.TOOLBAR)(editorView.state, editorView.dispatch);
+          outdentList(INPUT_METHOD.TOOLBAR, featureFlags)(editorView.state, editorView.dispatch);
         }
         if (node === 'taskList') {
           outdentTaskList(INPUT_METHOD.TOOLBAR)(editorView.state, editorView.dispatch);

package/dist/es2019/plugins/type-ahead/index.js

@@ -111,6 +111,8 @@ const TypeAheadMenu = /*#__PURE__*/React.memo(({
  *
  */
 const typeAheadPlugin = options => {
+  var _options$useBetterTyp;
+  const useBetterTypeaheadNavigation = (_options$useBetterTyp = options === null || options === void 0 ? void 0 : options.useBetterTypeaheadNavigation) !== null && _options$useBetterTyp !== void 0 ? _options$useBetterTyp : true;
   const fireAnalyticsCallback = fireAnalyticsEvent(options === null || options === void 0 ? void 0 : options.createAnalyticsEvent);
   const popupMountRef = {
     current: null
@@ -136,7 +138,8 @@ const typeAheadPlugin = options => {
           popupMountRef,
           reactDispatch: dispatch,
           typeAheadHandlers: typeAhead,
-          createAnalyticsEvent: options === null || options === void 0 ? void 0 : options.createAnalyticsEvent
+          createAnalyticsEvent: options === null || options === void 0 ? void 0 : options.createAnalyticsEvent,
+          useBetterTypeaheadNavigation
         })
       }, {
         name: 'typeAheadInsertItem',

package/dist/es2019/plugins/type-ahead/pm-plugins/decorations.js

@@ -15,7 +15,8 @@ import { closeTypeAhead } from '../transforms/close-type-ahead';
 export const factoryDecorations = ({
   intl,
   popupMountRef,
-  createAnalyticsEvent
+  createAnalyticsEvent,
+  useBetterTypeaheadNavigation
 }) => {
   const createDecorations = (tr, {
     triggerHandler,
@@ -93,7 +94,8 @@ export const factoryDecorations = ({
         popupsBoundariesElement: (_popupMountRef$curren2 = popupMountRef.current) === null || _popupMountRef$curren2 === void 0 ? void 0 : _popupMountRef$curren2.popupsBoundariesElement,
         popupsScrollableElement: (_popupMountRef$curren3 = popupMountRef.current) === null || _popupMountRef$curren3 === void 0 ? void 0 : _popupMountRef$curren3.popupsScrollableElement,
         onUndoRedo: onUndoRedo,
-        reopenQuery: reopenQuery
+        reopenQuery: reopenQuery,
+        useBetterTypeaheadNavigation: useBetterTypeaheadNavigation
       })), typeaheadComponent);
       shouldFocusCursorInsideQuery = false;
       return typeaheadComponent;

package/dist/es2019/plugins/type-ahead/pm-plugins/main.js

@@ -23,7 +23,8 @@ export function createPlugin({
   popupMountRef,
   createAnalyticsEvent,
   typeAheadHandlers,
-  getIntl
+  getIntl,
+  useBetterTypeaheadNavigation
 }) {
   const intl = getIntl();
   const {
@@ -32,7 +33,8 @@ export function createPlugin({
   } = factoryDecorations({
     intl,
     popupMountRef,
-    createAnalyticsEvent: createAnalyticsEvent
+    createAnalyticsEvent: createAnalyticsEvent,
+    useBetterTypeaheadNavigation
   });
   const reducer = createReducer({
     createDecorations,

package/dist/es2019/plugins/type-ahead/ui/InputQuery.js

@@ -65,7 +65,8 @@ export const InputQuery = /*#__PURE__*/React.memo(({
   onQueryFocus,
   onUndoRedo,
   editorView,
-  items
+  items,
+  useBetterTypeaheadNavigation
 }) => {
   const ref = useRef(document.createElement('span'));
   const inputRef = useRef(null);
@@ -134,6 +135,19 @@ export const InputQuery = /*#__PURE__*/React.memo(({
         // Some suggested the other workaround maybe listen on`keypress` instead of `keydown`
         if (!event.isComposing || event.which !== 229 && event.keyCode !== 229) {
           if (selectedIndex === -1) {
+            if (useBetterTypeaheadNavigation) {
+              /**
+               * TODO DTR-1401: (also see ED-17200) There are two options
+               * here, either
+               * - set the index directly to 1 in WrapperTypeAhead.tsx's
+               *   `insertSelectedItem` at the cost of breaking some of the a11y
+               *   focus changes,
+               * - or do this jank at the cost of some small analytics noise.
+               *
+               * The focus behaviour still needs cleanup
+               */
+              selectPreviousItem();
+            }
             selectNextItem();
           }
           onItemSelect(event.shiftKey ? SelectItemMode.SHIFT_ENTER : SelectItemMode.ENTER);
@@ -141,18 +155,41 @@ export const InputQuery = /*#__PURE__*/React.memo(({
         break;
       case 'Tab':
         if (selectedIndex === -1) {
+          if (useBetterTypeaheadNavigation) {
+            /**
+             * TODO DTR-1401: (also see ED-17200) There are two options
+             * here, either
+             * - set the index directly to 1 in WrapperTypeAhead.tsx's
+             *   `insertSelectedItem` at the cost of breaking some of the a11y
+             *   focus changes,
+             * - or do this jank at the cost of some small analytics noise.
+             *
+             */
+            selectPreviousItem();
+          }
           selectNextItem();
         }
+        // TODO DTR-1401: why is this calling select item when hitting tab? fix this in DTR-1401
         onItemSelect(SelectItemMode.TAB);
         break;
       case 'ArrowDown':
-        if (selectedIndex === -1) {
+        if (useBetterTypeaheadNavigation) {
           selectNextItem();
+        } else {
+          // TODO DTR-1401: why were we preventing selection?
+          if (selectedIndex === -1) {
+            selectNextItem();
+          }
         }
         break;
       case 'ArrowUp':
-        if (selectedIndex === -1) {
+        if (useBetterTypeaheadNavigation) {
           selectPreviousItem();
+        } else {
+          // TODO DTR-1401: why were we preventing selection?
+          if (selectedIndex === -1) {
+            selectPreviousItem();
+          }
         }
         break;
     }
@@ -165,7 +202,7 @@ export const InputQuery = /*#__PURE__*/React.memo(({
       event.preventDefault();
       return false;
     }
-  }, [onUndoRedo, onItemSelect, selectNextItem, selectPreviousItem, cancel, cleanedInputContent, editorView.state]);
+  }, [useBetterTypeaheadNavigation, onUndoRedo, onItemSelect, selectNextItem, selectPreviousItem, cancel, cleanedInputContent, editorView.state]);
   const onClick = useCallback(event => {
     var _inputRef$current;
     event.stopPropagation();

package/dist/es2019/plugins/type-ahead/ui/TypeAheadList.js

@@ -166,6 +166,8 @@ const TypeAheadListComponent = /*#__PURE__*/React.memo(({
             selectPreviousItem();
             event.preventDefault();
             break;
+
+          // TODO DTR-1401: why is this calling item click when hitting tab? fix this in DTR-1401
           case 'Tab':
             //Tab key quick inserts the selected item.
             onItemClick(SelectItemMode.TAB, selectedIndex);

package/dist/es2019/plugins/type-ahead/ui/WrapperTypeAhead.js

@@ -18,7 +18,8 @@ export const WrapperTypeAhead = /*#__PURE__*/React.memo(({
   inputMethod,
   getDecorationPosition,
   reopenQuery,
-  onUndoRedo
+  onUndoRedo,
+  useBetterTypeaheadNavigation
 }) => {
   const [closed, setClosed] = useState(false);
   const [query, setQuery] = useState(reopenQuery || '');
@@ -31,12 +32,14 @@ export const WrapperTypeAhead = /*#__PURE__*/React.memo(({
   const [onItemInsert, onTextInsert] = useItemInsert(triggerHandler, editorView, items);
   const selectNextItem = useMemo(() => moveSelectedIndex({
     editorView,
-    direction: 'next'
-  }), [editorView]);
+    direction: 'next',
+    useBetterTypeaheadNavigation
+  }), [editorView, useBetterTypeaheadNavigation]);
   const selectPreviousItem = useMemo(() => moveSelectedIndex({
     editorView,
-    direction: 'previous'
-  }), [editorView]);
+    direction: 'previous',
+    useBetterTypeaheadNavigation
+  }), [editorView, useBetterTypeaheadNavigation]);
   const cancel = useCallback(({
     setSelectionAt,
     addPrefixTrigger,
@@ -92,6 +95,7 @@ export const WrapperTypeAhead = /*#__PURE__*/React.memo(({
     return null;
   }
   return /*#__PURE__*/React.createElement(InputQuery, {
+    useBetterTypeaheadNavigation: useBetterTypeaheadNavigation,
     triggerQueryPrefix: triggerHandler.trigger,
     onQueryChange: setQuery,
     onItemSelect: insertSelectedItem,

package/dist/es2019/plugins/type-ahead/utils.js

@@ -52,7 +52,8 @@ export const findHandlerByTrigger = ({
 };
 export const moveSelectedIndex = ({
   editorView,
-  direction
+  direction,
+  useBetterTypeaheadNavigation
 }) => () => {
   const typeAheadState = getPluginState(editorView.state);
   if (!typeAheadState) {
@@ -66,7 +67,26 @@ export const moveSelectedIndex = ({
   let nextIndex;
   if (direction === 'next') {
     stats.increaseArrowDown();
-    nextIndex = selectedIndex >= items.length - 1 ? 0 : selectedIndex + 1;
+    if (useBetterTypeaheadNavigation) {
+      /**
+       * See: https://product-fabric.atlassian.net/browse/ED-17200
+       * `selectedIndex` is forced to -1 now to not immediately focus the typeahead
+       * and only do so when there is explicit logic to focus into the typeahead
+       * options.
+       *
+       * This check for "set index to 1 when -1"
+       * - is a temporary workaround to get back the previous behaviour without
+       *    entirely reverting the a11y improvements
+       *
+       */
+      if (selectedIndex === -1 && items.length > 1) {
+        nextIndex = 1;
+      } else {
+        nextIndex = selectedIndex >= items.length - 1 ? 0 : selectedIndex + 1;
+      }
+    } else {
+      nextIndex = selectedIndex >= items.length - 1 ? 0 : selectedIndex + 1;
+    }
   } else {
     stats.increaseArrowUp();
     nextIndex = selectedIndex <= 0 ? items.length - 1 : selectedIndex - 1;

package/dist/es2019/test-utils.js

@@ -52,7 +52,9 @@ function lightProcessPluginsList(editorPlugins) {
 export const createPMSchemaAndPlugins = (inputPreset = new EditorPresetBuilder()) => pluginFactoryParams => {
   let editorPlugins = [];
   const preset = inputPreset.has(basePlugin) ? inputPreset : inputPreset.add(basePlugin);
-  editorPlugins = preset.build();
+  editorPlugins = preset.build({
+    pluginInjectionAPI: pluginFactoryParams.pluginInjectionAPI
+  });
   const editorConfig = lightProcessPluginsList(editorPlugins);
   const schema = createSchema(editorConfig);
   const plugins = editorConfig.plugins.sort(sortByOrder('plugins')).map(({

package/dist/es2019/ui/Appearance/FullPage/FullPageToolbar.js

@@ -42,14 +42,16 @@ export const EditorToolbar = /*#__PURE__*/React.memo(props => {
     eventDispatcher: props.eventDispatcher,
     inviteToEditComponent: (_props$collabEdit = props.collabEdit) === null || _props$collabEdit === void 0 ? void 0 : _props$collabEdit.inviteToEditComponent,
     inviteToEditHandler: (_props$collabEdit2 = props.collabEdit) === null || _props$collabEdit2 === void 0 ? void 0 : _props$collabEdit2.inviteToEditHandler,
-    isInviteToEditButtonSelected: (_props$collabEdit3 = props.collabEdit) === null || _props$collabEdit3 === void 0 ? void 0 : _props$collabEdit3.isInviteToEditButtonSelected
+    isInviteToEditButtonSelected: (_props$collabEdit3 = props.collabEdit) === null || _props$collabEdit3 === void 0 ? void 0 : _props$collabEdit3.isInviteToEditButtonSelected,
+    featureFlags: props.featureFlags || {}
   }), (_props$featureFlags5 = props.featureFlags) !== null && _props$featureFlags5 !== void 0 && _props$featureFlags5.findReplace && (_props$featureFlags6 = props.featureFlags) !== null && _props$featureFlags6 !== void 0 && _props$featureFlags6.twoLineEditorToolbar ? jsx(FindReplaceToolbarButtonWithState, {
     popupsBoundariesElement: props.popupsBoundariesElement,
     popupsMountPoint: props.popupsMountPoint,
     popupsScrollableElement: props.popupsScrollableElement,
     editorView: props.editorView,
     containerElement: props.containerElement,
-    dispatchAnalyticsEvent: props.dispatchAnalyticsEvent
+    dispatchAnalyticsEvent: props.dispatchAnalyticsEvent,
+    featureFlags: props.featureFlags
   }) : null, !!props.customPrimaryToolbarComponents && 'after' in props.customPrimaryToolbarComponents ? props.customPrimaryToolbarComponents.after : props.customPrimaryToolbarComponents);
   useEffect(() => {
     var _props$featureFlags7;

package/dist/es2019/ui/styles.js

@@ -16,6 +16,7 @@ export const separatorStyles = css`
   height: 24px;
   display: inline-block;
   margin: 0 8px;
+  user-select: none;
 `;
 export const wrapperStyle = css`
   display: flex;

package/dist/es2019/utils/input-rules.js

@@ -5,8 +5,6 @@ import { createInputRulePlugin } from '@atlaskit/prosemirror-input-rules';
 import { addAnalytics } from '../plugins/analytics';
 import { JOIN_SCENARIOS_WHEN_TYPING_TO_INSERT_LIST } from '@atlaskit/editor-common/analytics';
 import { closeHistory } from 'prosemirror-history';
-import { findParentNodeOfTypeClosestToPos } from 'prosemirror-utils';
-import { getFeatureFlags } from '../plugins/feature-flags-context';
 export const ruleWithAnalytics = getPayload => {
   return originalRule => {
     const onHandlerApply = (state, tr, matchResult) => {
@@ -98,21 +96,6 @@ export const createWrappingJoinRule = ({
       tr.setNodeMarkup(parentNodePosMapped, parentNode.type, parentNode.attrs, allowedMarks);
     }
     tr.wrap(range, wrapping);
-    const featureFlags = getFeatureFlags(state);
-    if (featureFlags !== null && featureFlags !== void 0 && featureFlags.restartNumberedLists && nodeType === state.schema.nodes.orderedList) {
-      // if an orderedList node would be inserted by the input rule match, and
-      // that orderedList node is being added directly before another orderedList
-      // node, then join those nodes
-      const $end = tr.doc.resolve(tr.mapping.map(end));
-      const node = findParentNodeOfTypeClosestToPos($end, nodeType);
-      if (node) {
-        const nodeEnd = node.pos + node.node.nodeSize;
-        const after = tr.doc.resolve(nodeEnd).nodeAfter;
-        if (after && after.type === nodeType && canJoin(tr.doc, nodeEnd) && (!joinPredicate || joinPredicate(match, after, JOIN_SCENARIOS_WHEN_TYPING_TO_INSERT_LIST.JOINED_TO_LIST_BELOW))) {
-          tr.join(nodeEnd);
-        }
-      }
-    }
     const before = tr.doc.resolve(fixedStart - 1).nodeBefore;
     if (before && before.type === nodeType && canJoin(tr.doc, fixedStart - 1) && (!joinPredicate || joinPredicate(match, before, JOIN_SCENARIOS_WHEN_TYPING_TO_INSERT_LIST.JOINED_TO_LIST_ABOVE))) {
       tr.join(fixedStart - 1);

package/dist/es2019/utils/insert.js

@@ -1,10 +1,11 @@
-import { isNodeSelection, canInsert, hasParentNodeOfType, safeInsert as pmSafeInsert } from 'prosemirror-utils';
-import { Node, Fragment } from 'prosemirror-model';
-import { NodeSelection, Selection } from 'prosemirror-state';
+import { isNodeSelection, canInsert, safeInsert as pmSafeInsert, hasParentNodeOfType, findParentNodeOfType } from 'prosemirror-utils';
+import { Node, Fragment, Slice } from 'prosemirror-model';
+import { NodeSelection, Selection, TextSelection } from 'prosemirror-state';
 import { ReplaceStep, ReplaceAroundStep } from 'prosemirror-transform';
 import { isEmptyParagraph } from './document';
 import { GapCursorSelection, Side } from '../plugins/selection/gap-cursor-selection';
 import { normaliseNestedLayout } from './selection';
+import { isListItemNode } from '../plugins/list/utils/node';
 export let LookDirection;
 (function (LookDirection) {
   LookDirection["Before"] = "before";
@@ -18,6 +19,22 @@ const nodeIsInsideAList = tr => {
   } = tr.doc.type.schema;
   return hasParentNodeOfType([nodes.orderedList, nodes.bulletList])(tr.selection);
 };
+const selectionIsInsideAPanel = tr => {
+  const {
+    nodes
+  } = tr.doc.type.schema;
+  return hasParentNodeOfType(nodes.panel)(tr.selection);
+};
+const selectionIsInNestedList = tr => {
+  const {
+    nodes
+  } = tr.doc.type.schema;
+  const parentListNode = findParentNodeOfType([nodes.orderedList, nodes.bulletList])(tr.selection);
+  if (!parentListNode) {
+    return false;
+  }
+  return isListItemNode(tr.doc.resolve(parentListNode.pos).parent);
+};
 const insertBeforeOrAfter = (tr, lookDirection, $parentPos, $proposedPosition, content) => {
   /**
    * This block caters for the first item in a parent with the cursor being at the very start
@@ -46,9 +63,7 @@ export const safeInsert = (content, position) => tr => {
     nodes
   } = tr.doc.type.schema;
   const whitelist = [nodes.rule, nodes.mediaSingle];
-
-  // fallback if the node to insert is not in the whitelist, or if the insertion should happen within a list.
-  if (content instanceof Fragment || !whitelist.includes(content.type) || nodeIsInsideAList(tr)) {
+  if (content instanceof Fragment || !whitelist.includes(content.type)) {
     return null;
   }
 
@@ -82,14 +97,29 @@ export const safeInsert = (content, position) => tr => {
   }
   const grandParentNodeType = (_tr$selection$$from$n = tr.selection.$from.node(-1)) === null || _tr$selection$$from$n === void 0 ? void 0 : _tr$selection$$from$n.type;
   const parentNodeType = tr.selection.$from.parent.type;
-  if (!lookDirection && !shouldSplitSelectedNodeOnNodeInsertion({
+
+  // if there is no direction, and cannot split for this particular node
+  const noDirectionAndShouldNotSplit = !lookDirection && !shouldSplitSelectedNodeOnNodeInsertion({
     parentNodeType,
     grandParentNodeType,
     content
-  })) {
+  });
+  const ruleNodeInANestedListNode = content.type === nodes.rule && selectionIsInNestedList(tr);
+  const nonRuleNodeInListNode = !(content.type === nodes.rule) && nodeIsInsideAList(tr);
+  if (ruleNodeInANestedListNode || noDirectionAndShouldNotSplit && nonRuleNodeInListNode || noDirectionAndShouldNotSplit && !nodeIsInsideAList(tr)) {
     // node to be inserted is an invalid child of selection so insert below selected node
     return pmSafeInsert(content, tr.selection.from)(tr);
   }
+
+  // if node is a rule and that is a flat list splitting and not at the end of a list
+  const {
+    from,
+    to
+  } = tr.selection;
+  const ruleTypeInAList = content.type === nodes.rule && nodeIsInsideAList(tr);
+  if (ruleTypeInAList && !($insertPos.pos === insertPosEnd)) {
+    return tr.replaceRange(from, to, new Slice(Fragment.from(nodes.rule.createChecked()), 0, 0));
+  }
   if (!lookDirection) {
     // fallback to consumer for now
     return null;
@@ -111,7 +141,14 @@ export const safeInsert = (content, position) => tr => {
 
     // If we can't insert, and we think we should split, we fallback to consumer for now
     if (shouldSplit(parentNode.type, tr.doc.type.schema.nodes)) {
-      return finaliseInsert(insertBeforeOrAfter(tr, lookDirection, $parentPos, $proposedPosition, content), content.nodeSize);
+      const nextTr = finaliseInsert(insertBeforeOrAfter(tr, lookDirection, $parentPos, $proposedPosition, content), content.nodeSize);
+
+      // Move selection to the closest text node, otherwise it defaults to the whatever the lookDirection is set to above
+      if ([nodes.orderedList, nodes.bulletList].includes(parentNode.type) && nextTr) {
+        return nextTr.setSelection(TextSelection.between(nextTr.selection.$from, nextTr.selection.$from));
+      } else {
+        return nextTr;
+      }
     }
 
     // Can not insert into current parent, step up one parent
@@ -155,7 +192,21 @@ export const insertSelectedItem = (maybeNode, opts = {}) => (state, tr, start) =
      *
      */
   } else if (node.isBlock) {
-    tr = pmSafeInsert(normaliseNestedLayout(state, node), undefined, true)(tr);
+    /**
+     *
+     * Rule has unique insertion behaviour
+     * so using this safeInsert function in order to handle specific cases in flat list vs nested list
+     * instead of a generic pmSafeInsert (i.e appending at the end)
+     *
+     */
+
+    const selectionInsideAPanel = selectionIsInsideAPanel(tr);
+    if (node.type.name === 'rule' && !selectionInsideAPanel) {
+      var _safeInsert;
+      tr = (_safeInsert = safeInsert(node, tr.selection.from)(tr)) !== null && _safeInsert !== void 0 ? _safeInsert : tr;
+    } else {
+      tr = pmSafeInsert(normaliseNestedLayout(state, node), undefined, true)(tr);
+    }
 
     /**
      *

package/dist/es2019/version-wrapper.js

@@ -1,5 +1,5 @@
 export const name = "@atlaskit/editor-core";
-export const version = "181.0.0";
+export const version = "182.0.0";
 export const nextMajorVersion = () => {
   return [Number(version.split('.')[0]) + 1, 0, 0].join('.');
 };

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/editor-core",
-	"version": "181.0.0",
+	"version": "182.0.0",
 	"sideEffects": false
 }

package/dist/esm/create-editor/create-plugins-list.js

@@ -34,16 +34,21 @@ export function getScrollGutterOptions(props) {
   return undefined;
 }
 export function getDefaultPresetOptionsFromEditorProps(props, createAnalyticsEvent) {
-  var _props$performanceTra, _props$linking, _props$performanceTra2, _props$textFormatting, _props$linking2;
+  var _props$performanceTra, _props$linking, _ref, _props$featureFlags$u, _props$featureFlags, _props$featureFlags2, _props$performanceTra2, _props$textFormatting, _props$linking2;
   var appearance = props.appearance;
   var isMobile = appearance === 'mobile';
   var inputTracking = (_props$performanceTra = props.performanceTracking) === null || _props$performanceTra === void 0 ? void 0 : _props$performanceTra.inputTracking;
   var cardOptions = ((_props$linking = props.linking) === null || _props$linking === void 0 ? void 0 : _props$linking.smartLinks) || props.smartLinks || props.UNSAFE_cards;
+
+  // duplicated logic from `feature-flags-from-props.ts` due to presets not being finalised
+  var pseudoNormalisedUseBetterTypeaheadNavigation = (_ref = (_props$featureFlags$u = (_props$featureFlags = props.featureFlags) === null || _props$featureFlags === void 0 ? void 0 : _props$featureFlags['use-better-typeahead-navigation']) !== null && _props$featureFlags$u !== void 0 ? _props$featureFlags$u : (_props$featureFlags2 = props.featureFlags) === null || _props$featureFlags2 === void 0 ? void 0 : _props$featureFlags2.useBetterTypeaheadNavigation) !== null && _ref !== void 0 ? _ref : null;
+  var useBetterTypeaheadNavigation = Boolean(typeof pseudoNormalisedUseBetterTypeaheadNavigation === 'boolean' ? !!pseudoNormalisedUseBetterTypeaheadNavigation : true);
   return _objectSpread(_objectSpread({}, props), {}, {
     createAnalyticsEvent: createAnalyticsEvent,
     typeAhead: {
       createAnalyticsEvent: createAnalyticsEvent,
-      isMobile: isMobile
+      isMobile: isMobile,
+      useBetterTypeaheadNavigation: useBetterTypeaheadNavigation
     },
     featureFlags: createFeatureFlagsFromProps(props),
     paste: {