@atlaskit/editor-core 161.0.0 → 163.0.0

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

@@ -17,7 +17,9 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
+/** @jsx jsx */
 import React from 'react';
+import { jsx } from '@emotion/react';
 import { isSafeUrl } from '@atlaskit/adf-schema';
 import CrossCircleIcon from '@atlaskit/icon/glyph/cross-circle';
 import EditorAlignLeftIcon from '@atlaskit/icon/glyph/editor/align-left';
@@ -40,7 +42,7 @@ import debounce from 'lodash/debounce';
 import { mapContentTypeToIcon, sha1, wordCount } from './utils';
 import { hideLinkToolbar } from '../../commands';
 import { hideLinkToolbar as cardHideLinkToolbar } from '../../../card/pm-plugins/actions';
-import { ScreenReaderText } from '../../styles';
+import { visuallyHiddenStyles } from '../../styles';
 import { browser } from '@atlaskit/editor-common/utils';
 import { transformTimeStamp } from '../../../../ui/LinkSearch/transformTimeStamp';
 import Announcer from '../../../../utils/announcer/announcer';
@@ -80,7 +82,7 @@ export var messages = defineMessages({
     description: 'aria label for a link'
   }
 });
-var defaultIcon = /*#__PURE__*/React.createElement(Page16Icon, {
+var defaultIcon = jsx(Page16Icon, {
   label: 'page'
 });
 
@@ -932,24 +934,25 @@ export var HyperlinkLinkAddToolbar = /*#__PURE__*/function (_PureComponent) {
       // for details: https://a11y-internal.atlassian.net/browse/AK-740
 
       var screenReaderText = browser.safari && this.getScreenReaderText();
-      return /*#__PURE__*/React.createElement("div", {
+      return jsx("div", {
         className: "recent-list"
-      }, /*#__PURE__*/React.createElement(Container, {
+      }, jsx(Container, {
         provider: !!activityProvider,
         innerRef: this.wrapperRef
-      }, /*#__PURE__*/React.createElement(UrlInputWrapper, null, /*#__PURE__*/React.createElement(IconWrapper, null, /*#__PURE__*/React.createElement(Tooltip, {
+      }, jsx(UrlInputWrapper, null, jsx(IconWrapper, null, jsx(Tooltip, {
         content: formatLinkAddressText
-      }, /*#__PURE__*/React.createElement(LinkIcon, {
+      }, jsx(LinkIcon, {
         label: formatLinkAddressText
-      }))), screenReaderText && /*#__PURE__*/React.createElement(Announcer, {
+      }))), screenReaderText && jsx(Announcer, {
         ariaLive: "assertive",
         text: screenReaderText,
         ariaRelevant: "additions",
         delay: 250
-      }), /*#__PURE__*/React.createElement(ScreenReaderText, {
+      }), jsx("div", {
+        css: visuallyHiddenStyles,
         "aria-hidden": "true",
         id: screenReaderDescriptionId
-      }, formatMessage(messages.searchLinkAriaDescription)), /*#__PURE__*/React.createElement(PanelTextInput, {
+      }, formatMessage(messages.searchLinkAriaDescription)), jsx(PanelTextInput, {
         role: "combobox",
         ariaExpanded: true,
         ariaActiveDescendant: ariaActiveDescendant,
@@ -969,17 +972,17 @@ export var HyperlinkLinkAddToolbar = /*#__PURE__*/function (_PureComponent) {
         onCancel: this.handleCancel,
         defaultValue: displayUrl,
         onKeyDown: this.handleKeyDown
-      }), displayUrl && /*#__PURE__*/React.createElement(Tooltip, {
+      }), displayUrl && jsx(Tooltip, {
         content: formatClearLinkText
-      }, /*#__PURE__*/React.createElement(ClearText, {
+      }, jsx(ClearText, {
         onClick: this.handleClearText
-      }, /*#__PURE__*/React.createElement(CrossCircleIcon, {
+      }, jsx(CrossCircleIcon, {
         label: formatClearLinkText
-      })))), /*#__PURE__*/React.createElement(TextInputWrapper, null, /*#__PURE__*/React.createElement(IconWrapper, null, /*#__PURE__*/React.createElement(Tooltip, {
+      })))), jsx(TextInputWrapper, null, jsx(IconWrapper, null, jsx(Tooltip, {
         content: formatDisplayText
-      }, /*#__PURE__*/React.createElement(EditorAlignLeftIcon, {
+      }, jsx(EditorAlignLeftIcon, {
         label: formatDisplayText
-      }))), /*#__PURE__*/React.createElement(PanelTextInput, {
+      }))), jsx(PanelTextInput, {
         ref: function ref(ele) {
           return _this2.displayTextInputContainer = ele;
         },
@@ -991,20 +994,21 @@ export var HyperlinkLinkAddToolbar = /*#__PURE__*/function (_PureComponent) {
         defaultValue: displayText,
         onSubmit: this.handleSubmit,
         onKeyDown: this.handleKeyDown
-      }), displayText && /*#__PURE__*/React.createElement(Tooltip, {
+      }), displayText && jsx(Tooltip, {
         content: formatMessage(messages.clearText)
-      }, /*#__PURE__*/React.createElement(ClearText, {
+      }, jsx(ClearText, {
         onClick: this.handleClearDisplayText,
         onKeyDown: this.handleClearTextKeyDown
-      }, /*#__PURE__*/React.createElement(CrossCircleIcon, {
+      }, jsx(CrossCircleIcon, {
         label: formatMessage(messages.clearText)
-      })))), /*#__PURE__*/React.createElement(ScreenReaderText, {
+      })))), jsx("div", {
+        css: visuallyHiddenStyles,
         "aria-live": "polite",
         "aria-atomic": "true",
         id: "fabric.editor.hyperlink.suggested.results"
       }, displayUrl && formatMessage(messages.searchLinkResults, {
         count: items.length
-      })), /*#__PURE__*/React.createElement(LinkSearchList, {
+      })), jsx(LinkSearchList, {
         ariaControls: "fabric.editor.hyperlink.suggested.results",
         id: linkSearchListId,
         role: "listbox",

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

@@ -2,18 +2,25 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 
 var _templateObject, _templateObject2, _templateObject3;
 
-import React from 'react';
-import styled from 'styled-components';
+/** @jsx jsx */
+import { css, jsx } from '@emotion/react';
 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';
-var WrapperNode = styled.span(_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"])), N30, N50, borderRadius(), relativeFontSizeToBase16(13), N50);
-var JiraChildNode = styled.span(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: inline-block;\n  color: #707070;\n  line-height: 24px;\n  vertical-align: top;\n\n  &::before {\n    color: black;\n    content: 'JIRA | ';\n  }\n"])));
-var SvgChildNode = styled.span(_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"])));
+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"])), N30, N50, borderRadius(), relativeFontSizeToBase16(13), N50);
+var jiraChildNode = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: inline-block;\n  color: #707070;\n  line-height: 24px;\n  vertical-align: top;\n\n  &::before {\n    color: black;\n    content: 'JIRA | ';\n  }\n"])));
+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;
-  return /*#__PURE__*/React.createElement(WrapperNode, null, /*#__PURE__*/React.createElement(SvgChildNode, null, /*#__PURE__*/React.createElement(JiraIcon, {
+  return jsx("span", {
+    css: wrapperNode,
+    "data-testid": "jira-issue-node"
+  }, jsx("span", {
+    css: svgChildNode
+  }, jsx(JiraIcon, {
     size: "small"
-  })), /*#__PURE__*/React.createElement(JiraChildNode, null, issueKey));
+  })), jsx("span", {
+    css: jiraChildNode
+  }, issueKey));
 }

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

@@ -2,7 +2,7 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 
 var _templateObject;
 
-import { css } from 'styled-components';
+import { css } from '@emotion/react';
 import { gridSize } from '@atlaskit/theme/constants';
 import { N40A, N50A } from '@atlaskit/theme/colors';
 import { columnLayoutSharedStyle } from '@atlaskit/editor-common/styles';
@@ -11,4 +11,4 @@ import { TableCssClassName } from '../table/types';
 import { tableMarginFullWidthMode } from '../table/ui/consts';
 export var LAYOUT_SECTION_MARGIN = gridSize();
 export var LAYOUT_COLUMN_PADDING = gridSize() * 1.5;
-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        border-radius: 4px;\n        padding: ", "px;\n        box-sizing: border-box;\n\n        > div {\n          > *:first-child {\n            margin-top: 0;\n          }\n\n          > .ProseMirror-gapcursor.-right:first-child + * {\n            margin-top: 0;\n          }\n\n          > .ProseMirror-gapcursor:first-child + span + * {\n            margin-top: 0;\n          }\n\n          > .mediaSingleView-content-wrap:first-child .rich-media-item {\n            margin-top: 0;\n          }\n\n          > .ProseMirror-gapcursor.-right:first-child\n            + .mediaSingleView-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            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      /* 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, N40A, LAYOUT_COLUMN_PADDING, LAYOUT_SECTION_MARGIN, gridMediumMaxWidth, N50A, akEditorDeleteBackground, 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        border-radius: 4px;\n        padding: ", "px;\n        box-sizing: border-box;\n\n        > div {\n          > *:first-child {\n            margin-top: 0;\n          }\n\n          > .ProseMirror-gapcursor.-right:first-child + * {\n            margin-top: 0;\n          }\n\n          > .ProseMirror-gapcursor:first-child + span + * {\n            margin-top: 0;\n          }\n\n          .rich-media-item {\n            margin-top: 0;\n          }\n\n          > .mediaSingleView-content-wrap:first-child .rich-media-item {\n            margin-top: 0;\n          }\n\n          > .ProseMirror-gapcursor.-right:first-child\n            + .mediaSingleView-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            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      /* 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, N40A, LAYOUT_COLUMN_PADDING, LAYOUT_SECTION_MARGIN, gridMediumMaxWidth, N50A, akEditorDeleteBackground, akEditorDeleteBorder, akEditorSelectedNodeClassName, getSelectionStyles([SelectionStyle.Border, SelectionStyle.Blanket]), TableCssClassName.TABLE_CONTAINER, tableMarginFullWidthMode);

package/dist/esm/plugins/list/actions/wrap-and-join-lists.js

@@ -0,0 +1,168 @@
+import { Fragment, Slice, NodeRange } from 'prosemirror-model';
+import { ReplaceAroundStep, findWrapping, canSplit, canJoin } from 'prosemirror-transform';
+/**
+ * Wraps the selection in a list with the given type. If this results in
+ * two adjacent lists of the same type, those will be joined together.
+ */
+
+export function wrapInListAndJoin(nodeType, tr) {
+  wrapInList(nodeType)(tr);
+  autoJoin(tr, function (before, after) {
+    return before.type === after.type && before.type === nodeType;
+  });
+}
+/**
+ * Wraps the selection in a list with the given type and attributes.
+ *
+ * Adapted from https://github.com/ProseMirror/prosemirror-schema-list/blob/master/src/schema-list.js#L64-L89
+ */
+
+export function wrapInList(listType, attrs) {
+  return function (tr) {
+    var _tr$selection = tr.selection,
+        $from = _tr$selection.$from,
+        $to = _tr$selection.$to;
+    var range = $from.blockRange($to);
+    var doJoin = false;
+    var outerRange = range;
+
+    if (!range) {
+      return false;
+    } // This is at the top of an existing list item
+
+
+    if (range.depth >= 2 && // @ts-ignore - missing type for compatibleContent
+    $from.node(range.depth - 1).type.compatibleContent(listType) && range.startIndex === 0) {
+      // Don't do anything if this is the top of the list
+      if ($from.index(range.depth - 1) === 0) {
+        return false;
+      }
+
+      var $insert = tr.doc.resolve(range.start - 2);
+      outerRange = new NodeRange($insert, $insert, range.depth);
+
+      if (range.endIndex < range.parent.childCount) {
+        range = new NodeRange($from, tr.doc.resolve($to.end(range.depth)), range.depth);
+      }
+
+      doJoin = true;
+    }
+
+    var wrap = findWrapping(outerRange, listType, attrs, range);
+
+    if (!wrap) {
+      return false;
+    }
+
+    tr = doWrapInList(tr, range, wrap, doJoin, listType);
+    return true;
+  };
+}
+/**
+ * Internal function used by wrapInList
+ *
+ * Adapted from https://github.com/ProseMirror/prosemirror-schema-list/blob/master/src/schema-list.js#L91-L112
+ */
+
+function doWrapInList(tr, range, wrappers, joinBefore, listType) {
+  var content = Fragment.empty;
+
+  for (var i = wrappers.length - 1; i >= 0; i--) {
+    content = Fragment.from(wrappers[i].type.create(wrappers[i].attrs, content));
+  }
+
+  tr.step(new ReplaceAroundStep(range.start - (joinBefore ? 2 : 0), range.end, range.start, range.end, new Slice(content, 0, 0), wrappers.length, true));
+  var found = 0;
+
+  for (var _i = 0; _i < wrappers.length; _i++) {
+    if (wrappers[_i].type === listType) {
+      found = _i + 1;
+    }
+  }
+
+  var splitDepth = wrappers.length - found;
+  var splitPos = range.start + wrappers.length - (joinBefore ? 2 : 0);
+  var parent = range.parent;
+
+  for (var _i2 = range.startIndex, e = range.endIndex, first = true; _i2 < e; _i2++, first = false) {
+    if (!first && canSplit(tr.doc, splitPos, splitDepth)) {
+      tr.split(splitPos, splitDepth);
+      splitPos += 2 * splitDepth;
+    }
+
+    splitPos += parent.child(_i2).nodeSize;
+  }
+
+  return tr;
+}
+/**
+ * Checks whether two adjacent nodes can be joined. If so, the document
+ * will be updated to join those nodes. If not, the original transaction
+ * remains untouched.
+ *
+ * Nodes are considered joinable if the `isJoinable` predicate returns true.
+ *
+ * Adapted from https://github.com/ProseMirror/prosemirror-commands/blob/master/src/commands.js#L597-L610
+ */
+
+
+export function autoJoin(tr, isJoinable) {
+  if (!tr.isGeneric) {
+    return;
+  }
+
+  var ranges = [];
+
+  for (var i = 0; i < tr.mapping.maps.length; i++) {
+    var map = tr.mapping.maps[i];
+
+    for (var j = 0; j < ranges.length; j++) {
+      ranges[j] = map.map(ranges[j]);
+    }
+
+    map.forEach(function (_s, _e, from, to) {
+      return ranges.push(from, to);
+    });
+  } // Figure out which joinable points exist inside those ranges,
+  // by checking all node boundaries in their parent nodes.
+
+
+  var joinable = [];
+
+  for (var _i3 = 0; _i3 < ranges.length; _i3 += 2) {
+    var from = ranges[_i3];
+    var to = ranges[_i3 + 1];
+    var $from = tr.doc.resolve(from);
+    var depth = $from.sharedDepth(to);
+    var parent = $from.node(depth);
+
+    for (var index = $from.indexAfter(depth), pos = $from.after(depth + 1); pos <= to; ++index) {
+      var _after = parent.maybeChild(index);
+
+      if (!_after) {
+        break;
+      }
+
+      if (index && joinable.indexOf(pos) === -1) {
+        var _before = parent.child(index - 1);
+
+        if (_before.type === _after.type && isJoinable(_before, _after)) {
+          joinable.push(pos);
+        }
+      }
+
+      pos += _after.nodeSize;
+    }
+  } // Join the joinable points
+
+
+  joinable.sort(function (a, b) {
+    return a - b;
+  });
+
+  for (var _i4 = joinable.length - 1; _i4 >= 0; _i4--) {
+    if (canJoin(tr.doc, joinable[_i4])) {
+      tr.join(joinable[_i4]);
+    }
+  }
+}

package/dist/esm/plugins/list/commands/index.js

@@ -5,9 +5,8 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 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 { Fragment, Slice } from 'prosemirror-model';
-import { ReplaceAroundStep } from 'prosemirror-transform';
+import { TextSelection } from 'prosemirror-state';
 import * as baseCommand from 'prosemirror-commands';
-import * as baseListCommand from 'prosemirror-schema-list';
 import { hasParentNodeOfType, findPositionOfNodeBefore } from 'prosemirror-utils';
 import { hasVisibleContent, isNodeEmpty } from '../../../utils/document';
 import { findCutBefore, isEmptySelectionAtStart, isFirstChildOfParent, filter } from '../../../utils/commands';
@@ -20,8 +19,10 @@ import { getCommonListAnalyticsAttributes } from '../utils/analytics';
 import { listBackspace } from './listBackspace';
 import { joinListItemForward } from './join-list-item-forward';
 import { convertListType } from '../actions/conversions';
+import { wrapInListAndJoin } from '../actions/wrap-and-join-lists';
 import { outdentList } from './outdent-list';
 import { indentList } from './indent-list';
+import { moveTargetIntoList } from '../utils/replace-content';
 export { outdentList, indentList };
 export var enterKeyCommand = function enterKeyCommand(state, dispatch) {
   var selection = state.selection;
@@ -89,8 +90,8 @@ function untoggleSelectedList(tr) {
 
 export function toggleList(inputMethod, listType) {
   return function (state, dispatch) {
-    var customTr = state.tr;
-    var listInsideSelection = selectionContainsList(customTr);
+    var tr = state.tr;
+    var listInsideSelection = selectionContainsList(tr);
     var listNodeType = state.schema.nodes[listType];
     var actionSubjectId = listType === 'bulletList' ? ACTION_SUBJECT_ID.FORMAT_LIST_BULLET : ACTION_SUBJECT_ID.FORMAT_LIST_NUMBER;
 
@@ -101,9 +102,9 @@ export function toggleList(inputMethod, listType) {
       var transformedFrom = listInsideSelection.type.name === 'bulletList' ? ACTION_SUBJECT_ID.FORMAT_LIST_BULLET : ACTION_SUBJECT_ID.FORMAT_LIST_NUMBER;
 
       if ((fromNode === null || fromNode === void 0 ? void 0 : fromNode.type.name) === listType && (toNode === null || toNode === void 0 ? void 0 : toNode.type.name) === listType) {
-        var tr = state.tr;
-        untoggleSelectedList(tr);
-        addAnalytics(state, tr, {
+        var _tr2 = state.tr;
+        untoggleSelectedList(_tr2);
+        addAnalytics(state, _tr2, {
           action: ACTION.CONVERTED,
           actionSubject: ACTION_SUBJECT.LIST,
           actionSubjectId: ACTION_SUBJECT_ID.TEXT,
@@ -115,17 +116,17 @@ export function toggleList(inputMethod, listType) {
         });
 
         if (dispatch) {
-          dispatch(tr);
+          dispatch(_tr2);
         }
 
         return true;
       }
 
       convertListType({
-        tr: customTr,
+        tr: tr,
         nextListNodeType: listNodeType
       });
-      addAnalytics(state, customTr, {
+      addAnalytics(state, tr, {
         action: ACTION.CONVERTED,
         actionSubject: ACTION_SUBJECT.LIST,
         actionSubjectId: actionSubjectId,
@@ -136,17 +137,11 @@ export function toggleList(inputMethod, listType) {
         })
       });
     } else {
-      var replaceCurrentTr = function replaceCurrentTr(tr) {
-        customTr = tr;
-      }; // NOTE: replaceCurrentTr is supplied here instead of the usual dispatch function
-      // to 'mutate' the transaction without actually dispatching (as it is more performant
-      // if we only dispatch once at the end). This means customTr should not be modified
-      // until after wrapInList, since any changes made to it will be discarded when it
-      // gets replaced with the transaction generated by wrapInList.
-
-
-      wrapInList(listNodeType)(state, replaceCurrentTr);
-      addAnalytics(state, customTr, {
+      // Need to have this before wrapInList so the wrapping is done with valid content
+      // For example, if trying to convert centre or right aligned paragraphs to lists
+      sanitiseMarksInSelection(tr, listNodeType);
+      wrapInListAndJoin(listNodeType, tr);
+      addAnalytics(state, tr, {
         action: ACTION.INSERTED,
         actionSubject: ACTION_SUBJECT.LIST,
         actionSubjectId: actionSubjectId,
@@ -155,18 +150,16 @@ export function toggleList(inputMethod, listType) {
           inputMethod: inputMethod
         }
       });
-    } // if document wasn't changed, that means setNodeMarkup step didn't work, so
-    // return false from the command to indicate that the editing action failed
+    } // If document wasn't changed, return false from the command to indicate that the
+    // editing action failed
 
 
-    if (!customTr.docChanged) {
+    if (!tr.docChanged) {
       return false;
     }
 
-    sanitiseMarksInSelection(customTr, listNodeType);
-
     if (dispatch) {
-      dispatch(customTr);
+      dispatch(tr);
     }
 
     return true;
@@ -180,11 +173,6 @@ export function toggleOrderedList(view) {
   var inputMethod = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : INPUT_METHOD.TOOLBAR;
   return toggleList(inputMethod, 'orderedList')(view.state, view.dispatch);
 }
-export function wrapInList(nodeType) {
-  return baseCommand.autoJoin(baseListCommand.wrapInList(nodeType), function (before, after) {
-    return before.type === after.type && before.type === nodeType;
-  });
-}
 /**
  * Implementation taken and modified for our needs from PM
  * @param itemType Node
@@ -315,8 +303,20 @@ var joinToPreviousListItem = function joinToPreviousListItem(state, dispatch) {
         var list = $cut.nodeBefore.copy($cut.nodeBefore.content.append(Fragment.from(listItem.createChecked({}, $cut.nodeAfter))));
         tr.replaceWith(nodeBeforePos, $from.pos + $cut.nodeAfter.nodeSize, list);
       } else {
-        // take the text content of the paragraph and insert after the paragraph up until before the the cut
-        tr = state.tr.step(new ReplaceAroundStep($lastNode.pos, $cut.pos + $cut.nodeAfter.nodeSize, $cut.pos + 1, $cut.pos + $cut.nodeAfter.nodeSize - 1, state.tr.doc.slice($lastNode.pos, $cut.pos), 0, true));
+        var step = moveTargetIntoList({
+          insertPosition: $lastNode.pos,
+          $target: $cut
+        }); // ED-13966: check if the step will cause an ProseMirror error
+        // if there's an error don't apply the step as it will might lead into a data loss.
+        // It doesn't play well with media being a leaf node.
+
+        var stepResult = state.tr.maybeStep(step);
+
+        if (stepResult.failed) {
+          return false;
+        } else {
+          tr = state.tr.step(step);
+        }
       } // find out if there's now another list following and join them
       // as in, [list, p, list] => [list with p, list], and we want [joined list]
 
@@ -328,6 +328,12 @@ var joinToPreviousListItem = function joinToPreviousListItem(state, dispatch) {
       }
 
       if (dispatch) {
+        var _tr$doc$resolve$nodeB;
+
+        if (!((_tr$doc$resolve$nodeB = tr.doc.resolve($lastNode.pos).nodeBefore) !== null && _tr$doc$resolve$nodeB !== void 0 && _tr$doc$resolve$nodeB.isBlock) || tr.doc.resolve($lastNode.pos).nodeBefore === null) {
+          tr = tr.setSelection(TextSelection.near(tr.doc.resolve(tr.mapping.map($cut.pos)), -1));
+        }
+
         dispatch(tr.scrollIntoView());
       }
 

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

@@ -51,6 +51,12 @@ export var getDecorations = function getDecorations(doc) {
       decorations.push(Decoration.node(from, to, {
         'data-indent-level': "".concat(depth)
       }));
+
+      if (node.childCount >= 100) {
+        decorations.push(Decoration.node(from, to, {
+          'data-child-count': '100+'
+        }));
+      }
     }
   });
   return DecorationSet.empty.add(doc, decorations);

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

@@ -2,5 +2,5 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 
 var _templateObject;
 
-import { css } from 'styled-components';
+import { css } from '@emotion/react';
 export var listsStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .ProseMirror li {\n    position: relative;\n\n    > p:not(:first-child) {\n      margin: 4px 0 0 0;\n    }\n  }\n"])));

package/dist/esm/plugins/list/utils/node.js

@@ -106,10 +106,11 @@ export var joinSiblingLists = function joinSiblingLists(_ref) {
 
   for (var i = joins.length - 1; i >= 0; i--) {
     var listNode = tr.doc.nodeAt(joins[i]);
+    var listName = listNode === null || listNode === void 0 ? void 0 : listNode.type.name;
 
-    if (listNode) {
-      var amount = result[listNode.type.name] || 0;
-      result[listNode.type.name] = amount + 1;
+    if (listName && (listName === 'orderedList' || listName === 'bulletList')) {
+      var amount = result[listName] || 0;
+      result[listName] = amount + 1;
     }
 
     tr.join(joins[i]);

package/dist/esm/plugins/list/utils/replace-content.js

@@ -0,0 +1,21 @@
+import { ReplaceAroundStep, ReplaceStep } from 'prosemirror-transform';
+export var moveTargetIntoList = function moveTargetIntoList(_ref) {
+  var _$target$nodeAfter;
+
+  var insertPosition = _ref.insertPosition,
+      $target = _ref.$target;
+  // take the text content of the paragraph and insert after the paragraph up until before the the cut
+  var from = insertPosition;
+  var to = $target.pos + (((_$target$nodeAfter = $target.nodeAfter) === null || _$target$nodeAfter === void 0 ? void 0 : _$target$nodeAfter.nodeSize) || 0); //$cut.pos + $cut.nodeAfter.nodeSize;
+
+  var gapFrom = $target.posAtIndex(0, $target.depth + 1); // start pos of the child
+
+  var gapTo = $target.doc.resolve(gapFrom).end(); // end pos of the paragraph
+
+  if (gapTo - gapFrom === 0) {
+    return new ReplaceStep(from, to, $target.doc.slice(insertPosition, $target.pos));
+  }
+
+  var step = new ReplaceAroundStep(from, to, gapFrom, gapTo, $target.doc.slice(insertPosition, $target.pos), 0, true);
+  return step;
+};