@atlaskit/editor-core 181.0.1 → 182.0.1

package/dist/es2019/plugins/media/ui/ImageBorder/messages.js

@@ -0,0 +1,43 @@
+import { defineMessages } from 'react-intl-next';
+export const messages = defineMessages({
+  borderColor: {
+    id: 'fabric.editor.imageBorderColor',
+    defaultMessage: 'Color',
+    description: 'Change the border color of an image.'
+  },
+  borderSize: {
+    id: 'fabric.editor.imageBorderSize',
+    defaultMessage: 'Size',
+    description: 'Change the border size of an image.'
+  },
+  addBorder: {
+    id: 'fabric.editor.addImageBorder',
+    defaultMessage: 'Add border',
+    description: 'Add a border to an image.'
+  },
+  removeBorder: {
+    id: 'fabric.editor.removeImageBorder',
+    defaultMessage: 'Remove border',
+    description: 'Remove the border of an image.'
+  },
+  borderOptions: {
+    id: 'fabric.editor.imageBorderOptions',
+    defaultMessage: 'Border options',
+    description: 'Display options available for customizing the border of an image.'
+  },
+  borderSizeSubtle: {
+    id: 'fabric.editor.imageBorderSubtle',
+    defaultMessage: 'Subtle',
+    description: 'Name of a border size.'
+  },
+  borderSizeMedium: {
+    id: 'fabric.editor.imageBorderMedium',
+    defaultMessage: 'Medium',
+    description: 'Name of a border size.'
+  },
+  borderSizeBold: {
+    id: 'fabric.editor.imageBorderBold',
+    defaultMessage: 'Bold',
+    description: 'Name of a border size.'
+  }
+});

package/dist/es2019/plugins/media/ui/ImageBorder/styles.js

@@ -0,0 +1,124 @@
+import { css } from '@emotion/react';
+import * as colors from '@atlaskit/theme/colors';
+import { DEFAULT_BORDER_COLOR } from '@atlaskit/editor-common/ui-color';
+import { N20A, N50, N60A, N90, N800, N0 } from '@atlaskit/theme/colors';
+import { gridSize } from '@atlaskit/theme/constants';
+
+// menuItemDimensions and itemSpacing are copied from
+// packages/editor/editor-core/src/plugins/floating-toolbar/ui/DropdownMenu.tsx
+
+export const menuItemDimensions = {
+  width: 175,
+  height: 32
+};
+export const itemSpacing = gridSize() / 2;
+export const contextualMenuArrow = css`
+  display: flex;
+  &::after {
+    content: '›';
+    margin-left: 4px;
+    line-height: 20px;
+    color: ${`var(--ds-icon, ${N90})`};
+  }
+`;
+export const contextualMenuColorIcon = color => css`
+  ${contextualMenuArrow}
+  &::before {
+    content: '';
+    display: block;
+    border: 1px solid ${DEFAULT_BORDER_COLOR};
+    border-radius: ${"var(--ds-radius-100, 3px)"};
+    width: 20px;
+    height: 20px;
+    ${color && `background: ${color}`}
+  }
+`;
+export const contextualSubMenu = index => css`
+  border-radius: ${"var(--ds-radius-100, 3px)"};
+  background: ${"var(--ds-surface-overlay, white)"};
+  box-shadow: ${`var(--ds-shadow-overlay, ${`0 4px 8px -2px ${N60A}, 0 0 1px ${N60A}`})`};
+  display: flex;
+  position: absolute;
+  top: ${index * (menuItemDimensions.height + itemSpacing * 2)}px;
+  left: ${menuItemDimensions.width}px;
+  padding: 8px;
+
+  > div {
+    padding: 0;
+  }
+`;
+export const buttonStyle = selected => css`
+  height: 26px;
+  width: 26px;
+  padding: 0;
+  border-radius: 4px;
+  background-color: ${selected ? `var(--ds-text, ${N800})` : `var(--ds-background-neutral, ${N20A})`};
+  border: 1px solid ${DEFAULT_BORDER_COLOR};
+  cursor: pointer;
+  display: block;
+`;
+
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
+export const buttonWrapperStyle = css`
+  border: 1px solid transparent;
+  margin: 1px;
+  font-size: 0;
+  display: flex;
+  align-items: center;
+  padding: 1px;
+  border-radius: 6px;
+  &:focus-within,
+  &:focus,
+  &:hover {
+    border-color: ${N50} !important;
+  }
+`;
+export const line = (size, selected) => css`
+  position: relative;
+  &:before {
+    content: '';
+    display: block;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 12px;
+    height: ${size}px;
+    background-color: ${selected ? `var(--ds-icon-inverse, ${N0})` : "var(--ds-icon, #44546F)"};
+    border-radius: 90px;
+    transform: translate(-50%, -50%) rotate(135deg);
+  }
+`;
+export const toolbarButtonWrapper = ({
+  enabled,
+  isOpen
+}) => css`
+  display: flex;
+  .image-border-toolbar-btn {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+    padding: 0;
+    & > span {
+      margin: 0;
+    }
+  }
+  .image-border-toolbar-dropdown {
+    padding: 0;
+    & > span {
+      margin: 0;
+    }
+    width: 16px !important;
+    border-top-left-radius: 0 !important;
+    border-bottom-left-radius: 0 !important;
+    margin-left: 1px;
+  }
+
+  &:hover {
+    .image-border-toolbar-btn {
+      ${!enabled && ` background: ${`var(--ds-background-neutral-subtle-hovered, ${colors.N30A})`};`}
+    }
+
+    .image-border-toolbar-dropdown {
+      ${!isOpen && `background: ${`var(--ds-background-neutral-subtle-hovered, ${colors.N30A})`};`}
+    }
+  }
+`;

package/dist/es2019/plugins/media/utils/current-media-node.js

@@ -1,5 +1,5 @@
 import { NodeSelection } from 'prosemirror-state';
-export const currentMediaNode = editorState => {
+export const currentMediaNodeWithPos = editorState => {
   const {
     doc,
     selection,
@@ -8,9 +8,28 @@ export const currentMediaNode = editorState => {
   if (!doc || !selection || !(selection instanceof NodeSelection) || selection.node.type !== schema.nodes.mediaSingle) {
     return;
   }
-  const node = doc.nodeAt(selection.$anchor.pos + 1);
+  const pos = selection.$anchor.pos + 1;
+  const node = doc.nodeAt(pos);
   if (!node || node.type !== schema.nodes.media) {
     return;
   }
-  return node;
+  return {
+    node,
+    pos
+  };
+};
+export const currentMediaNode = editorState => {
+  var _currentMediaNodeWith;
+  return (_currentMediaNodeWith = currentMediaNodeWithPos(editorState)) === null || _currentMediaNodeWith === void 0 ? void 0 : _currentMediaNodeWith.node;
+};
+export const currentMediaNodeBorderMark = editorState => {
+  const node = currentMediaNode(editorState);
+  if (!node) {
+    return;
+  }
+  const borderMark = node.marks.find(m => m.type.name === 'border');
+  if (!borderMark) {
+    return;
+  }
+  return borderMark.attrs;
 };

package/dist/es2019/plugins/paste/util/index.js

@@ -4,6 +4,7 @@ import { ACTION_SUBJECT, addAnalytics, EVENT_TYPE, INPUT_METHOD, TABLE_ACTION }
 import { TextSelection, NodeSelection } from 'prosemirror-state';
 import { findParentNodeOfType } from 'prosemirror-utils';
 import { getSelectedTableInfo, isTableSelected } from '@atlaskit/editor-tables/utils';
+import { sortByOrderWithTypeName } from '../../../create-editor/sort-by-order';
 export function isPastedFromWord(html) {
   return !!html && html.indexOf('urn:schemas-microsoft-com:office:word') >= 0;
 }
@@ -93,6 +94,7 @@ export function applyTextMarksToSlice(schema, marks) {
         // add marks to a slice if they're allowed in parent node
         // and exclude link marks
         ...parent.type.allowedMarks(marks).filter(mark => mark.type !== linkMark)];
+        node.marks.sort(sortByOrderWithTypeName('marks'));
         return false;
       }
       return true;

package/dist/es2019/plugins/rank.js

@@ -21,7 +21,7 @@ export default {
   // Inline marks
   'link', 'em', 'strong', 'textColor', 'strike', 'subsup', 'underline', 'code', 'typeAheadQuery',
   // Block marks
-  'alignment', 'breakout', 'indentation', 'annotation', 'dataConsumer',
+  'alignment', 'breakout', 'indentation', 'annotation', 'dataConsumer', 'border',
   // Unsupported mark
   'unsupportedMark', 'unsupportedNodeAttribute']
 };

package/dist/es2019/plugins/rule/pm-plugins/input-rule.js

@@ -2,6 +2,7 @@ import { Fragment, Slice } from 'prosemirror-model';
 import { createRule, createPlugin } from '../../../utils/input-rules';
 import { leafNodeReplacementCharacter } from '@atlaskit/prosemirror-input-rules';
 import { safeInsert } from '../../../utils/insert';
+import { hasParentNodeOfType } from 'prosemirror-utils';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, addAnalytics, EVENT_TYPE, INPUT_METHOD } from '../../analytics';
 import { getFeatureFlags } from '../../feature-flags-context';
 export const createHorizontalRule = (state, start, end, inputMethod) => {
@@ -38,6 +39,12 @@ export const createHorizontalRule = (state, start, end, inputMethod) => {
   });
 };
 const createHorizontalRuleAutoformat = (state, start, end) => {
+  const {
+    listItem
+  } = state.schema.nodes;
+  if (hasParentNodeOfType(listItem)(state.selection)) {
+    return null;
+  }
   return createHorizontalRule(state, start, end, INPUT_METHOD.FORMATTING);
 };
 export function inputRulePlugin(schema, featureFlags) {

package/dist/es2019/plugins/text-formatting/ui/Toolbar/hooks/clear-formatting-icon.js

@@ -34,7 +34,8 @@ export const useClearIcon = ({
         name: 'clearFormatting'
       },
       isActive: false,
-      isDisabled: !formattingIsPresent
+      isDisabled: !formattingIsPresent,
+      'aria-label': clearFormattingKeymap ? tooltip(clearFormattingKeymap, String(clearFormattingLabel)) : String(clearFormattingLabel)
     };
   }, [clearFormattingLabel, isPluginAvailable, formattingIsPresent]);
 };

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/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.1";
+export const version = "182.0.1";
 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.1",
+	"version": "182.0.1",
 	"sideEffects": false
 }