@atlaskit/editor-core 161.0.0 → 162.0.0

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

@@ -251,6 +251,7 @@ var createPlugin = function createPlugin(dispatch, providerFactory, extensionHan
   var useLongPressSelection = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : false;
   var options = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : {};
   var state = createPluginState(dispatch, {
+    shouldRefreshEditButton: false,
     showEditButton: false,
     showContextPanel: false
   });
@@ -274,25 +275,45 @@ var createPlugin = function createPlugin(dispatch, providerFactory, extensionHan
               element = _getPluginState.element,
               localId = _getPluginState.localId,
               extensionProvider = _getPluginState.extensionProvider,
-              showContextPanel = _getPluginState.showContextPanel; // This fetches the selected extension node, either by keyboard selection or click for all types of extensions
+              showContextPanel = _getPluginState.showContextPanel,
+              shouldRefreshEditButton = _getPluginState.shouldRefreshEditButton;
 
+          if (!shouldRefreshEditButton) {
+            return false;
+          } // This fetches the selected extension node, either by keyboard selection or click for all types of extensions
 
-          var selectedExtension = getSelectedExtension(state, true);
+
+          var selectedExtension = getSelectedExtension(state, true); // If our selection isn't on an extension node, clear some state and hide the config panel
 
           if (!selectedExtension) {
             if (showContextPanel) {
               clearEditingContext(state, dispatch);
             }
 
+            updateState({
+              shouldRefreshEditButton: false,
+              localId: undefined,
+              element: undefined,
+              showEditButton: false,
+              updateExtension: undefined
+            })(state, dispatch);
             return;
-          }
+          } // By this point we're certain we've selected an extension node.
+          // But we need to determine if the selection has changed to another
+          // extension node or remained on the same node.
+
 
           var node = selectedExtension.node;
           var newElement = getSelectedDomElement(state.schema, domAtPos, selectedExtension); // New node is selection
 
-          if (node.attrs.localId ? localId !== node.attrs.localId : // This is the current assumption and it's wrong but we are keeping it
+          var hasSelectedNodeChanged = node.attrs.localId ? localId !== node.attrs.localId : // This is the current assumption and it's wrong but we are keeping it
           // as fallback in case we need to turn off `allowLocalIdGeneration`
-          element !== newElement) {
+          element !== newElement;
+          var nextState = {
+            shouldRefreshEditButton: false
+          };
+
+          if (hasSelectedNodeChanged) {
             if (showContextPanel) {
               clearEditingContext(state, dispatch);
             }
@@ -303,20 +324,20 @@ var createPlugin = function createPlugin(dispatch, providerFactory, extensionHan
             var showEditButton = shouldShowEditButton(extensionHandler, extensionProvider);
             var updateExtension = getUpdateExtensionPromise(view, extensionHandler, extensionProvider).catch(function () {// do nothing;
             });
-            updateState({
+            Object.assign(nextState, {
               localId: node.attrs.localId,
-              showContextPanel: false,
               element: newElement,
               showEditButton: showEditButton,
               updateExtension: updateExtension
-            })(state, dispatch);
+            });
           } // New DOM element doesn't necessarily mean it's a new Node
           else if (element !== newElement) {
-            updateState({
+            Object.assign(nextState, {
               element: newElement
-            })(state, dispatch);
+            });
           }
 
+          updateState(nextState)(state, dispatch);
           return true;
         },
         destroy: function destroy() {
@@ -333,7 +354,9 @@ var createPlugin = function createPlugin(dispatch, providerFactory, extensionHan
         inlineExtension: ExtensionNodeView(portalProviderAPI, eventDispatcher, providerFactory, extensionHandlers, extensionNodeViewOptions)
       },
       handleClickOn: createSelectionClickHandler(['extension', 'bodiedExtension'], function (target) {
-        return !target.closest('.extension-content');
+        // Clicked on anything around the extension content
+        // or specifically on the content border of a bodied extension
+        return !target.closest('.extension-content') || target.classList.contains('extension-content');
       }, {
         useLongPressSelection: useLongPressSelection
       })

package/dist/esm/plugins/extension/utils.js

@@ -1,15 +1,32 @@
+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 { findParentNodeOfType, findSelectedNodeOfType, findDomRefAtPos } from 'prosemirror-utils';
 import { closestElement } from '../../utils/dom';
 import { findNodePosByLocalIds } from '../../utils/nodes-by-localIds';
+
+var getSelectedExtensionByTransaction = function getSelectedExtensionByTransaction(transaction) {
+  var searchParent = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
+  return _getSelectedExtension(transaction.doc.type.schema, transaction.selection, searchParent);
+};
+
 export var getSelectedExtension = function getSelectedExtension(state) {
   var searchParent = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
-  var _state$schema$nodes = state.schema.nodes,
-      inlineExtension = _state$schema$nodes.inlineExtension,
-      extension = _state$schema$nodes.extension,
-      bodiedExtension = _state$schema$nodes.bodiedExtension;
+  return _getSelectedExtension(state.schema, state.selection, searchParent);
+};
+
+var _getSelectedExtension = function _getSelectedExtension(schema, selection, searchParent) {
+  var _schema$nodes = schema.nodes,
+      inlineExtension = _schema$nodes.inlineExtension,
+      extension = _schema$nodes.extension,
+      bodiedExtension = _schema$nodes.bodiedExtension;
   var nodeTypes = [extension, bodiedExtension, inlineExtension];
-  return findSelectedNodeOfType(nodeTypes)(state.selection) || searchParent && findParentNodeOfType(nodeTypes)(state.selection) || undefined;
+  return findSelectedNodeOfType(nodeTypes)(selection) || searchParent && findParentNodeOfType(nodeTypes)(selection) || undefined;
 };
+
 export var findExtensionWithLocalId = function findExtensionWithLocalId(state, localId) {
   var selectedExtension = getSelectedExtension(state, true);
 
@@ -21,10 +38,10 @@ export var findExtensionWithLocalId = function findExtensionWithLocalId(state, l
     return selectedExtension;
   }
 
-  var _state$schema$nodes2 = state.schema.nodes,
-      inlineExtension = _state$schema$nodes2.inlineExtension,
-      extension = _state$schema$nodes2.extension,
-      bodiedExtension = _state$schema$nodes2.bodiedExtension;
+  var _state$schema$nodes = state.schema.nodes,
+      inlineExtension = _state$schema$nodes.inlineExtension,
+      extension = _state$schema$nodes.extension,
+      bodiedExtension = _state$schema$nodes.bodiedExtension;
   var nodeTypes = [extension, bodiedExtension, inlineExtension];
   var matched;
   state.doc.descendants(function (node, pos) {
@@ -64,4 +81,29 @@ export var getNodeTypesReferenced = function getNodeTypesReferenced(ids, state)
 export var findNodePosWithLocalId = function findNodePosWithLocalId(state, localId) {
   var nodes = findNodePosByLocalIds(state, [localId]);
   return nodes.length >= 1 ? nodes[0] : undefined;
+};
+export var onSelectionChanged = function onSelectionChanged(tr, state) {
+  var selectedExtension = getSelectedExtensionByTransaction(tr, true);
+  var hasUnselectedExtension = !!state.element && !selectedExtension;
+  /*
+   * We use this to indicate to our plugin that the selection has changed.
+   *
+   * - ignore if shouldRefreshEditButton already set
+   * - restrict to scenarios when an extension is
+   * - a) actually selected
+   * - b) or un-selected (not accounting for selection extensionA -> extensionB)
+   *
+   * The rest of the logic will be handled in Extension main plugin view update().
+   *
+   * Known issue: typing inside of a bodiedExtension will trigger state changes each keystroke
+   * as the toolbar always being open while it is focused.
+   */
+
+  if (!state.shouldRefreshEditButton && (selectedExtension || hasUnselectedExtension)) {
+    return _objectSpread(_objectSpread({}, state), {}, {
+      shouldRefreshEditButton: true
+    });
+  }
+
+  return state;
 };

package/dist/esm/plugins/find-replace/ui/Find.js

@@ -12,7 +12,7 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 
 /** @jsx jsx */
 import React from 'react';
-import { jsx } from '@emotion/core';
+import { jsx } from '@emotion/react';
 import { defineMessages, injectIntl } from 'react-intl-next';
 import EditorCloseIcon from '@atlaskit/icon/glyph/editor/close';
 import ChevronDownIcon from '@atlaskit/icon/glyph/hipchat/chevron-down';

package/dist/esm/plugins/find-replace/ui/FindReplace.js

@@ -12,7 +12,7 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 
 /** @jsx jsx */
 import React from 'react';
-import { jsx } from '@emotion/core';
+import { jsx } from '@emotion/react';
 import Find from './Find';
 import Replace from './Replace';
 import { ruleStyles, wrapperStyles } from './styles';

package/dist/esm/plugins/find-replace/ui/Replace.js

@@ -12,7 +12,7 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 
 /** @jsx jsx */
 import React from 'react';
-import { jsx } from '@emotion/core';
+import { jsx } from '@emotion/react';
 import Button from '@atlaskit/button/standard-button';
 import { defineMessages, injectIntl } from 'react-intl-next';
 import Textfield from '@atlaskit/textfield';

package/dist/esm/plugins/find-replace/ui/styles.js

@@ -1,5 +1,9 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+
+var _templateObject;
+
 /** @jsx jsx */
-import { css } from '@emotion/core';
+import { css } from '@emotion/react';
 import { N60, N30A } from '@atlaskit/theme/colors';
 import { relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
 export var replaceSectionButtonStyles = css({
@@ -20,15 +24,7 @@ export var wrapperStyles = css({
     margin: '0px 4px'
   }
 });
-export var sectionWrapperStyles = css({
-  display: 'flex',
-  alignItems: 'column',
-  '> *': {
-    display: 'inline-flex',
-    height: '32px',
-    flex: '0 0 auto'
-  }
-});
+export var sectionWrapperStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n\n  & > * {\n    display: inline-flex;\n    height: 32px;\n    flex: 0 0 auto;\n  }\n\n  & > [data-ds--text-field--container] {\n    display: flex;\n    flex: 1 1 auto;\n  }\n"])));
 export var countStyles = css({
   color: "".concat(N60),
   fontSize: "".concat(relativeFontSizeToBase16(12)),

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,7 @@ 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 * 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 +18,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 +89,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 +101,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 +115,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 +136,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 +149,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 +172,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 +302,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]
 

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;
+};

package/dist/esm/plugins/media/nodeviews/mediaNodeUpdater.js

@@ -178,7 +178,7 @@ export var MediaNodeUpdater = /*#__PURE__*/function () {
 
             case 2:
               contextIdentifierProvider = _context3.sent;
-              return _context3.abrupt("return", contextIdentifierProvider && contextIdentifierProvider.objectId);
+              return _context3.abrupt("return", (contextIdentifierProvider === null || contextIdentifierProvider === void 0 ? void 0 : contextIdentifierProvider.objectId) || null);
 
             case 4:
             case "end":
@@ -266,10 +266,10 @@ export var MediaNodeUpdater = /*#__PURE__*/function () {
       var attrs = _this.getAttrs();
 
       if (!attrs || attrs.type !== 'file') {
-        return undefined;
+        return null;
       }
 
-      return attrs.__contextId;
+      return attrs.__contextId || null;
     });
 
     _defineProperty(this, "updateDimensions", function (dimensions) {

package/dist/esm/plugins/media/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 { mediaSingleSharedStyle, richMediaClassName } from '@atlaskit/editor-common/styles';
 import { akEditorDeleteBorder, akEditorDeleteBackground, akEditorSelectedBorderBoldSize, akEditorMediaResizeHandlerPaddingWide, akEditorMediaResizeHandlerPadding, akEditorSelectedNodeClassName, akEditorDeleteIconColor } from '@atlaskit/editor-shared-styles';
 import { N60, B200 } from '@atlaskit/theme/colors';

package/dist/esm/plugins/media/utils/media-single.js

@@ -252,4 +252,15 @@ export var calcMediaPxWidth = function calcMediaPxWidth(opts) {
 
 var calcPctWidth = function calcPctWidth(containerWidth, pctWidth, origWidth, origHeight) {
   return pctWidth && origWidth && origHeight && Math.ceil(calcPxFromPct(pctWidth / 100, containerWidth.lineLength || containerWidth.width));
-};
+};
+
+export function isCaptionNode(editorView) {
+  var $from = editorView.state.selection.$from;
+  var immediateWrapperParentNode = editorView.state.doc.nodeAt($from.before(Math.max($from.depth, 1)));
+
+  if (immediateWrapperParentNode && immediateWrapperParentNode.type.name === 'caption') {
+    return true;
+  }
+
+  return false;
+}