@atlaskit/editor-core 180.1.0 → 181.0.1

package/dist/es2019/utils/index.js

@@ -1,23 +1,17 @@
 import { toggleMark } from 'prosemirror-commands';
-import { Fragment, Slice } from 'prosemirror-model';
 import { NodeSelection, TextSelection } from 'prosemirror-state';
-import { findWrapping, liftTarget } from 'prosemirror-transform';
 import { JSONTransformer } from '@atlaskit/editor-json-transformer';
 import { FakeTextCursorSelection } from '../plugins/fake-text-cursor/cursor';
 import { hasParentNodeOfType } from 'prosemirror-utils';
 import { isNodeEmpty } from './document';
 import { atTheBeginningOfDoc, atTheEndOfDoc } from './prosemirror/position';
+import { isMediaNode } from '@atlaskit/editor-common/utils';
 export { insideTable } from '@atlaskit/editor-common/core-utils';
 export { isEmptyParagraph, hasVisibleContent, isNodeEmpty, isEmptyDocument, processRawValue, getStepRange, findFarthestParentNode, isSelectionEndOfParagraph, nodesBetweenChanged, getNodesCount } from './document';
-export { cascadeCommands, getEditorValueWithMedia } from './action';
-export { isMarkAllowedInRange, isMarkExcluded, removeBlockMarks, sanitiseSelectionMarksForWrapping, sanitiseMarksInSelection } from './mark';
-export { isParagraph, isText, isLinkMark, validateNodes } from './nodes';
-export { normaliseNestedLayout, setNodeSelection, setAllSelection, setGapCursorSelection, setCellSelection, setTextSelection, isValidPosition } from './selection';
-export { containsClassName } from './dom';
+export { sanitiseMarksInSelection } from './mark';
+export { isParagraph, isText, isLinkMark } from './nodes';
+export { normaliseNestedLayout, setNodeSelection, setGapCursorSelection, setTextSelection } from './selection';
 export { default as measurements } from './performance/measure-enum';
-function validateNode(_node) {
-  return false;
-}
 function isMarkTypeCompatibleWithMark(markType, mark) {
   return !mark.type.excludes(markType) && !markType.excludes(mark.type);
 }
@@ -26,24 +20,13 @@ function isMarkTypeAllowedInNode(markType, state) {
 }
 export function canMoveUp(state) {
   const {
-    selection,
-    doc
+    selection
   } = state;
-
   /**
-   * If there's a media element on the selection,
-   * add text blocks with arrow navigation.
-   * Also, the selection could be media | mediaGroup.
+   * If there's a media element on the selection it will use a gap cursor to move
    */
-  if (selection instanceof NodeSelection) {
-    if (selection.node.type.name === 'media') {
-      /** Weird way of checking if the previous element is a paragraph */
-      const mediaAncestorNode = doc.nodeAt(selection.anchor - 3);
-      return !!(mediaAncestorNode && mediaAncestorNode.type.name === 'paragraph');
-    } else if (selection.node.type.name === 'mediaGroup') {
-      const mediaGroupAncestorNode = selection.$anchor.nodeBefore;
-      return !!(mediaGroupAncestorNode && mediaGroupAncestorNode.type.name === 'paragraph');
-    }
+  if (selection instanceof NodeSelection && isMediaNode(selection.node)) {
+    return true;
   }
   if (selection instanceof TextSelection) {
     if (!selection.empty) {
@@ -54,22 +37,14 @@ export function canMoveUp(state) {
 }
 export function canMoveDown(state) {
   const {
-    selection,
-    doc
+    selection
   } = state;
 
   /**
-   * If there's a media element on the selection,
-   * add text blocks with arrow navigation.
-   * Also, the selection could be media | mediaGroup.
+   * If there's a media element on the selection it will use a gap cursor to move
    */
-  if (selection instanceof NodeSelection) {
-    if (selection.node.type.name === 'media') {
-      const nodeAfter = doc.nodeAt(selection.$head.after());
-      return !!(nodeAfter && nodeAfter.type.name === 'paragraph');
-    } else if (selection.node.type.name === 'mediaGroup') {
-      return !(selection.$head.parentOffset === selection.$anchor.parent.content.size);
-    }
+  if (selection instanceof NodeSelection && isMediaNode(selection.node)) {
+    return true;
   }
   if (selection instanceof TextSelection) {
     if (!selection.empty) {
@@ -130,17 +105,6 @@ export function isMarkTypeAllowedInCurrentSelection(markType, state) {
     return allowedInActiveMarks;
   });
 }
-export function createSliceWithContent(content, state) {
-  return new Slice(Fragment.from(state.schema.text(content)), 0, 0);
-}
-
-/**
- * Determines if content inside a selection can be joined with the next block.
- * We need this check since the built-in method for "joinDown" will join a orderedList with bulletList.
- */
-export function canJoinDown(selection, doc, nodeType) {
-  return checkNodeDown(selection, doc, node => node.type === nodeType);
-}
 export function checkNodeDown(selection, doc, filter) {
   const ancestorDepth = findAncestorPosition(doc, selection.$to).depth;
 
@@ -152,64 +116,10 @@ export function checkNodeDown(selection, doc, filter) {
   return res.nodeAfter ? filter(res.nodeAfter) : false;
 }
 
-/**
- * Determines if content inside a selection can be joined with the previous block.
- * We need this check since the built-in method for "joinUp" will join a orderedList with bulletList.
- */
-export function canJoinUp(selection, doc, nodeType) {
-  const res = doc.resolve(selection.$from.before(findAncestorPosition(doc, selection.$from).depth));
-  return res.nodeBefore && res.nodeBefore.type === nodeType;
-}
-
-/**
- * Finds all "selection-groups" within a range. A selection group is based on ancestors.
- *
- * Example:
- * Given the following document and selection ({<} = start of selection and {>} = end)
- *  doc
- *    blockquote
- *      ul
- *        li
- *        li{<}
- *        li
- *     p
- *     p{>}
- *
- * The output will be two selection-groups. One within the ul and one with the two paragraphs.
- */
-export function getGroupsInRange(doc, $from, $to, isNodeValid = validateNode) {
-  const groups = Array();
-  const commonAncestor = hasCommonAncestor(doc, $from, $to);
-  const fromAncestor = findAncestorPosition(doc, $from);
-  if (commonAncestor || fromAncestor.depth === 1 && isNodeValid($from.node(1))) {
-    groups.push({
-      $from,
-      $to
-    });
-  } else {
-    let current = $from;
-    while (current.pos < $to.pos) {
-      let ancestorPos = findAncestorPosition(doc, current);
-      while (ancestorPos.depth > 1) {
-        ancestorPos = findAncestorPosition(doc, ancestorPos);
-      }
-      const endPos = doc.resolve(Math.min(
-      // should not be smaller then start position in case of an empty paragraph for example.
-      Math.max(ancestorPos.start(ancestorPos.depth), ancestorPos.end(ancestorPos.depth) - 3), $to.pos));
-      groups.push({
-        $from: current,
-        $to: endPos
-      });
-      current = doc.resolve(Math.min(endPos.after(1) + 1, doc.nodeSize - 2));
-    }
-  }
-  return groups;
-}
-
 /**
  * Traverse the document until an "ancestor" is found. Any nestable block can be an ancestor.
  */
-export function findAncestorPosition(doc, pos) {
+function findAncestorPosition(doc, pos) {
   const nestableBlocks = ['blockquote', 'bulletList', 'orderedList'];
   if (pos.depth === 1) {
     return pos;
@@ -225,102 +135,6 @@ export function findAncestorPosition(doc, pos) {
   }
   return newPos;
 }
-
-/**
- * Determine if two positions have a common ancestor.
- */
-export function hasCommonAncestor(doc, $from, $to) {
-  let current;
-  let target;
-  if ($from.depth > $to.depth) {
-    current = findAncestorPosition(doc, $from);
-    target = findAncestorPosition(doc, $to);
-  } else {
-    current = findAncestorPosition(doc, $to);
-    target = findAncestorPosition(doc, $from);
-  }
-  while (current.depth > target.depth && current.depth > 1) {
-    current = findAncestorPosition(doc, current);
-  }
-  return current.node(current.depth) === target.node(target.depth);
-}
-
-/**
- * Takes a selection $from and $to and lift all text nodes from their parents to document-level
- */
-export function liftSelection(tr, doc, $from, $to) {
-  let startPos = $from.start($from.depth);
-  let endPos = $to.end($to.depth);
-  const target = Math.max(0, findAncestorPosition(doc, $from).depth - 1);
-  tr.doc.nodesBetween(startPos, endPos, (node, pos) => {
-    if (node.isText ||
-    // Text node
-    node.isTextblock && !node.textContent // Empty paragraph
-    ) {
-      const res = tr.doc.resolve(tr.mapping.map(pos));
-      const sel = new NodeSelection(res);
-      const range = sel.$from.blockRange(sel.$to);
-      if (liftTarget(range) !== undefined) {
-        tr.lift(range, target);
-      }
-    }
-  });
-  startPos = tr.mapping.map(startPos);
-  endPos = tr.mapping.map(endPos);
-  endPos = tr.doc.resolve(endPos).end(tr.doc.resolve(endPos).depth); // We want to select the entire node
-
-  tr.setSelection(new TextSelection(tr.doc.resolve(startPos), tr.doc.resolve(endPos)));
-  return {
-    tr: tr,
-    $from: tr.doc.resolve(startPos),
-    $to: tr.doc.resolve(endPos)
-  };
-}
-
-/**
- * Lift nodes in block to one level above.
- */
-export function liftSiblingNodes(view) {
-  const {
-    tr
-  } = view.state;
-  const {
-    $from,
-    $to
-  } = view.state.selection;
-  const blockStart = tr.doc.resolve($from.start($from.depth - 1));
-  const blockEnd = tr.doc.resolve($to.end($to.depth - 1));
-  const range = blockStart.blockRange(blockEnd);
-  view.dispatch(tr.lift(range, blockStart.depth - 1));
-}
-
-/**
- * Lift sibling nodes to document-level and select them.
- */
-export function liftAndSelectSiblingNodes(view) {
-  const {
-    tr
-  } = view.state;
-  const {
-    $from,
-    $to
-  } = view.state.selection;
-  const blockStart = tr.doc.resolve($from.start($from.depth - 1));
-  const blockEnd = tr.doc.resolve($to.end($to.depth - 1));
-  // TODO: [ts30] handle void and null properly
-  const range = blockStart.blockRange(blockEnd);
-  tr.setSelection(new TextSelection(blockStart, blockEnd));
-  tr.lift(range, blockStart.depth - 1);
-  return tr;
-}
-export function wrapIn(nodeType, tr, $from, $to) {
-  const range = $from.blockRange($to);
-  const wrapping = range && findWrapping(range, nodeType);
-  if (wrapping) {
-    tr = tr.wrap(range, wrapping).scrollIntoView();
-  }
-  return tr;
-}
 const transformer = new JSONTransformer();
 export function toJSON(node) {
   return transformer.encode(node);

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

@@ -22,20 +22,6 @@ export const ruleWithAnalytics = getPayload => {
     };
   };
 };
-export const ruleWithTransform = transform => {
-  return originalRule => {
-    const onHandlerApply = (state, tr, matchResult) => {
-      transform(state, tr);
-      if (originalRule.onHandlerApply) {
-        originalRule.onHandlerApply(state, tr, matchResult);
-      }
-    };
-    return {
-      ...originalRule,
-      onHandlerApply
-    };
-  };
-};
 export const createRule = (match, handler) => {
   return {
     match,

package/dist/es2019/version-wrapper.js

@@ -1,5 +1,5 @@
 export const name = "@atlaskit/editor-core";
-export const version = "180.1.0";
+export const version = "181.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": "180.1.0",
+	"version": "181.0.1",
 	"sideEffects": false
 }

package/dist/esm/actions/index.js

@@ -4,18 +4,17 @@ import _createClass from "@babel/runtime/helpers/createClass";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _regeneratorRuntime from "@babel/runtime/regenerator";
 import { Node } from 'prosemirror-model';
-import { TextSelection, NodeSelection } from 'prosemirror-state';
-import { findParentNode } from 'prosemirror-utils';
-import { toJSON } from '../utils';
-import { processRawValue, isEmptyDocument, processRawFragmentValue } from '../utils/document';
-import { getEditorValueWithMedia, __temporaryFixForConfigPanel as _temporaryFixForConfigPanel } from '../utils/action';
-import { createDispatch } from '../event-dispatcher';
-import { safeInsert } from 'prosemirror-utils';
 import { analyticsEventKey } from '@atlaskit/editor-common/utils';
+import { NodeSelection, TextSelection } from 'prosemirror-state';
+import { findParentNode, safeInsert } from 'prosemirror-utils';
+import { createDispatch } from '../event-dispatcher';
+import { getCollabProvider } from '../plugins/collab-edit/native-collab-provider-plugin';
 import { findNodePosWithLocalId } from '../plugins/extension/utils';
 import { getFeatureFlags } from '../plugins/feature-flags-context/get-feature-flags';
-import { getCollabProvider } from '../plugins/collab-edit/native-collab-provider-plugin';
+import { toJSON } from '../utils';
+import { getEditorValueWithMedia, __temporaryFixForConfigPanel as _temporaryFixForConfigPanel } from '../utils/action';
 import deprecationWarnings from '../utils/deprecation-warnings';
+import { isEmptyDocument, processRawFragmentValue, processRawValue } from '../utils/document';
 import { findNodePosByFragmentLocalIds } from '../utils/nodes-by-localIds';
 var EditorActions = /*#__PURE__*/function () {
   function EditorActions() {
@@ -143,7 +142,22 @@ var EditorActions = /*#__PURE__*/function () {
       if (!this.editorView || this.editorView.hasFocus()) {
         return false;
       }
-      this.editorView.focus();
+
+      // If we focus on componentDidMount the editor can crash due to a prosemirror error.
+      // This is fixed in prosemirror-view@1.23.7
+      // See: https:github.com/ProseMirror/prosemirror-view/commit/735b88107d1cbe7575a188edb85f05c22fb56e35
+      //
+      // We don't want this error to crash the editor in the case we can't
+      // focus correctly.
+      // Revert workaround in: https://product-fabric.atlassian.net/browse/ED-17172
+      try {
+        this.editorView.focus();
+      } catch (err) {
+        if (process.env.NODE_ENV !== 'production') {
+          // eslint-disable-next-line no-console
+          console.error('EditorView focus failed with an error', err);
+        }
+      }
       this.editorView.dispatch(this.editorView.state.tr.scrollIntoView());
       return true;
     }

package/dist/esm/analytics-api/attach-payload-into-transaction.js

@@ -14,7 +14,7 @@ export var attachPayloadIntoTransaction = function attachPayloadIntoTransaction(
   tr.step(new AnalyticsStep([{
     payload: payload,
     channel: channel
-  }], actionsToIgnore, tr.selection.$from.pos) // We need to create the step based on a position, this prevent split history for relative changes.
+  }], actionsToIgnore, editorState.selection.$from.pos) // We need to create the step based on a position, this prevent split history for relative changes.
   );
 
   // When you add a new step all the storedMarks are removed it

package/dist/esm/create-editor/ReactEditorView.js

@@ -3,11 +3,9 @@ import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _inherits from "@babel/runtime/helpers/inherits";
 import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 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; } }
 import { ReactEditorView as BaseReactEditorView } from './ReactEditorViewInternal';
-import getEditorPlugins from '../utils/get-editor-plugins';
 import { injectIntl } from 'react-intl-next';
 export var ReactEditorView = /*#__PURE__*/function (_BaseReactEditorView) {
   _inherits(ReactEditorView, _BaseReactEditorView);
@@ -18,7 +16,4 @@ export var ReactEditorView = /*#__PURE__*/function (_BaseReactEditorView) {
   }
   return _createClass(ReactEditorView);
 }(BaseReactEditorView);
-_defineProperty(ReactEditorView, "defaultProps", {
-  getEditorPlugins: getEditorPlugins
-});
 export default injectIntl(ReactEditorView);

package/dist/esm/create-editor/ReactEditorViewInternal.js

@@ -40,8 +40,7 @@ import { EVENT_NAME_DISPATCH_TRANSACTION, EVENT_NAME_STATE_APPLY, EVENT_NAME_UPD
 import { PROSEMIRROR_RENDERED_NORMAL_SEVERITY_THRESHOLD, PROSEMIRROR_RENDERED_DEGRADED_SEVERITY_THRESHOLD, DEFAULT_SAMPLING_RATE_VALID_TRANSACTIONS } from './consts';
 import { getContextIdentifier } from '../plugins/base/pm-plugins/context-identifier';
 import ReactEditorViewContext from './ReactEditorViewContext';
-import { createInsertNodeAPI } from '../insert-api/api';
-import { createEditorAnalyticsAPI } from '../analytics-api/api';
+import { EditorPluginInjectionAPI } from '@atlaskit/editor-common/preset';
 function handleEditorFocus(view) {
   if (view.hasFocus()) {
     return;
@@ -50,31 +49,13 @@ function handleEditorFocus(view) {
     view.focus();
   }, 0);
 }
-var EMPTY = [];
-export function shouldReconfigureState(props, nextProps) {
-  var _props$dangerouslyApp, _props$dangerouslyApp2, _nextProps$dangerousl, _nextProps$dangerousl2;
-  var prevPlugins = (_props$dangerouslyApp = (_props$dangerouslyApp2 = props.dangerouslyAppendPlugins) === null || _props$dangerouslyApp2 === void 0 ? void 0 : _props$dangerouslyApp2.__plugins) !== null && _props$dangerouslyApp !== void 0 ? _props$dangerouslyApp : EMPTY;
-  var nextPlugins = (_nextProps$dangerousl = (_nextProps$dangerousl2 = nextProps.dangerouslyAppendPlugins) === null || _nextProps$dangerousl2 === void 0 ? void 0 : _nextProps$dangerousl2.__plugins) !== null && _nextProps$dangerousl !== void 0 ? _nextProps$dangerousl : EMPTY;
-  if (nextPlugins.length !== prevPlugins.length || prevPlugins.some(function (p) {
-    return nextPlugins.some(function (n) {
-      return n.name === p.name && n !== p;
-    });
-  })) {
-    return true;
-  }
-  var mobileProperties = props.appearance === 'mobile' ? ['featureFlags', 'quickInsert'] : [];
-  var properties = ['appearance', 'persistScrollGutter', 'allowUndoRedoButtons', 'placeholder', 'sanitizePrivateContent'].concat(mobileProperties);
-  return properties.reduce(function (acc, curr) {
-    return acc || props[curr] !== nextProps[curr];
-  }, false);
-}
 export var ReactEditorView = /*#__PURE__*/function (_React$Component) {
   _inherits(ReactEditorView, _React$Component);
   var _super = _createSuper(ReactEditorView);
-  function ReactEditorView(_props, context) {
+  function ReactEditorView(props, context) {
     var _this;
     _classCallCheck(this, ReactEditorView);
-    _this = _super.call(this, _props, context);
+    _this = _super.call(this, props, context);
     _defineProperty(_assertThisInitialized(_this), "editorRef", /*#__PURE__*/React.createRef());
     _defineProperty(_assertThisInitialized(_this), "canDispatchTransactions", true);
     _defineProperty(_assertThisInitialized(_this), "onPluginObservation", function (report, editorState) {
@@ -88,6 +69,10 @@ export var ReactEditorView = /*#__PURE__*/function (_React$Component) {
         }
       });
     });
+    _defineProperty(_assertThisInitialized(_this), "getEditorState", function () {
+      var _this$view;
+      return (_this$view = _this.view) === null || _this$view === void 0 ? void 0 : _this$view.state;
+    });
     _defineProperty(_assertThisInitialized(_this), "formatFullWidthAppearance", function (appearance) {
       if (appearance === 'full-width') {
         return FULL_WIDTH_MODE.FULL_WIDTH;
@@ -135,48 +120,6 @@ export var ReactEditorView = /*#__PURE__*/function (_React$Component) {
         sel.removeAllRanges();
       }
     });
-    _defineProperty(_assertThisInitialized(_this), "reconfigureState", function (props) {
-      if (!_this.view) {
-        return;
-      }
-
-      // We cannot currently guarentee when all the portals will have re-rendered during a reconfigure
-      // so we blur here to stop ProseMirror from trying to apply selection to detached nodes or
-      // nodes that haven't been re-rendered to the document yet.
-      _this.blur();
-      var editorPlugins = _this.getPlugins(props.editorProps, _this.props.editorProps, _this.props.createAnalyticsEvent);
-      _this.config = processPluginsList(editorPlugins);
-      var state = _this.editorState;
-      var plugins = createPMPlugins({
-        schema: state.schema,
-        dispatch: _this.dispatch,
-        errorReporter: _this.errorReporter,
-        editorConfig: _this.config,
-        eventDispatcher: _this.eventDispatcher,
-        providerFactory: props.providerFactory,
-        portalProviderAPI: props.portalProviderAPI,
-        reactContext: function reactContext() {
-          return _this.context;
-        },
-        dispatchAnalyticsEvent: _this.dispatchAnalyticsEvent,
-        performanceTracking: props.editorProps.performanceTracking,
-        transactionTracker: _this.transactionTracker,
-        featureFlags: createFeatureFlagsFromProps(props.editorProps),
-        getIntl: function getIntl() {
-          return _this.props.intl;
-        }
-      });
-      var newState = state.reconfigure({
-        plugins: plugins
-      });
-
-      // need to update the state first so when the view builds the nodeviews it is
-      // using the latest plugins
-      _this.view.updateState(newState);
-      return _this.view.update(_objectSpread(_objectSpread({}, _this.view.props), {}, {
-        state: newState
-      }));
-    });
     _defineProperty(_assertThisInitialized(_this), "handleAnalyticsEvent", function (payload) {
       if (!_this.props.allowAnalyticsGASV3) {
         return;
@@ -207,7 +150,7 @@ export var ReactEditorView = /*#__PURE__*/function (_React$Component) {
           return _this.editorState;
         }
       } else {
-        _this.config = processPluginsList(_this.getPlugins(options.props.editorProps, undefined, options.props.createAnalyticsEvent));
+        _this.config = processPluginsList(_this.getPlugins(options.props.preset));
         schema = createSchema(_this.config);
       }
       var contentTransformerProvider = options.props.editorProps.contentTransformerProvider;
@@ -322,6 +265,10 @@ export var ReactEditorView = /*#__PURE__*/function (_React$Component) {
           var _this$experienceStore3;
           (_this$experienceStore3 = _this.experienceStore) === null || _this$experienceStore3 === void 0 ? void 0 : _this$experienceStore3.mark(EditorExperience.interaction, 'viewUpdateState', startTime + duration);
         });
+        _this.pluginInjectionAPI.onEditorViewUpdated({
+          newEditorState: editorState,
+          oldEditorState: oldEditorState
+        });
         startMeasure(EVENT_NAME_VIEW_STATE_UPDATED);
         _this.onEditorViewStateUpdated({
           originalTransaction: transaction,
@@ -449,6 +396,10 @@ export var ReactEditorView = /*#__PURE__*/function (_React$Component) {
       _this.view = new EditorView({
         mount: node
       }, _this.getDirectEditorProps());
+      _this.pluginInjectionAPI.onEditorViewUpdated({
+        newEditorState: _this.view.state,
+        oldEditorState: undefined
+      });
     });
     _defineProperty(_assertThisInitialized(_this), "handleEditorViewRef", function (node) {
       if (!_this.view && node) {
@@ -531,9 +482,12 @@ export var ReactEditorView = /*#__PURE__*/function (_React$Component) {
       "aria-label": _this.props.intl.formatMessage(editorMessages.editorAssistiveLabel),
       role: "textbox"
     }));
+    _this.pluginInjectionAPI = new EditorPluginInjectionAPI({
+      getEditorState: _this.getEditorState
+    });
     _this.eventDispatcher = new EventDispatcher();
     _this.dispatch = createDispatch(_this.eventDispatcher);
-    _this.errorReporter = createErrorReporter(_props.editorProps.errorReporterHandler);
+    _this.errorReporter = createErrorReporter(props.editorProps.errorReporterHandler);
     _this.transactionTracker = new TransactionTracker();
     _this.pluginPerformanceObserver = new PluginPerformanceObserver(function (report) {
       return _this.onPluginObservation(report, _this.editorState);
@@ -561,11 +515,11 @@ export var ReactEditorView = /*#__PURE__*/function (_React$Component) {
     _this.eventDispatcher.on(analyticsEventKey, _this.handleAnalyticsEvent);
     _this.eventDispatcher.on('resetEditorState', _this.resetEditorState);
     _this.editorState = _this.createEditorState({
-      props: _props,
+      props: props,
       context: context,
-      doc: _props.editorProps.defaultValue,
+      doc: props.editorProps.defaultValue,
       // ED-4759: Don't set selection at end for full-page editor - should be at start.
-      selectionAtStart: isFullPage(_props.editorProps.appearance)
+      selectionAtStart: isFullPage(props.editorProps.appearance)
     });
     _this.dispatchAnalyticsEvent({
       action: ACTION.STARTED,
@@ -625,7 +579,7 @@ export var ReactEditorView = /*#__PURE__*/function (_React$Component) {
       }
       var appearance = this.props.editorProps.appearance;
       var nextAppearance = nextProps.editorProps.appearance;
-      if (shouldReconfigureState(this.props.editorProps, nextProps.editorProps)) {
+      if (this.props.preset !== nextProps.preset) {
         this.reconfigureState(nextProps);
       }
       if (nextAppearance !== appearance) {
@@ -645,6 +599,51 @@ export var ReactEditorView = /*#__PURE__*/function (_React$Component) {
         this.pluginPerformanceObserver.disconnect();
       }
     }
+  }, {
+    key: "reconfigureState",
+    value: function reconfigureState(props) {
+      var _this2 = this;
+      if (!this.view) {
+        return;
+      }
+
+      // We cannot currently guarentee when all the portals will have re-rendered during a reconfigure
+      // so we blur here to stop ProseMirror from trying to apply selection to detached nodes or
+      // nodes that haven't been re-rendered to the document yet.
+      this.blur();
+      var editorPlugins = this.getPlugins(props.preset);
+      this.config = processPluginsList(editorPlugins);
+      var state = this.editorState;
+      var plugins = createPMPlugins({
+        schema: state.schema,
+        dispatch: this.dispatch,
+        errorReporter: this.errorReporter,
+        editorConfig: this.config,
+        eventDispatcher: this.eventDispatcher,
+        providerFactory: props.providerFactory,
+        portalProviderAPI: props.portalProviderAPI,
+        reactContext: function reactContext() {
+          return _this2.context;
+        },
+        dispatchAnalyticsEvent: this.dispatchAnalyticsEvent,
+        performanceTracking: props.editorProps.performanceTracking,
+        transactionTracker: this.transactionTracker,
+        featureFlags: createFeatureFlagsFromProps(props.editorProps),
+        getIntl: function getIntl() {
+          return _this2.props.intl;
+        }
+      });
+      var newState = state.reconfigure({
+        plugins: plugins
+      });
+
+      // need to update the state first so when the view builds the nodeviews it is
+      // using the latest plugins
+      this.view.updateState(newState);
+      return this.view.update(_objectSpread(_objectSpread({}, this.view.props), {}, {
+        state: newState
+      }));
+    }
   }, {
     key: "componentDidMount",
     value: function componentDidMount() {
@@ -693,39 +692,11 @@ export var ReactEditorView = /*#__PURE__*/function (_React$Component) {
     key: "getPlugins",
     value:
     // Helper to allow tests to inject plugins directly
-    function getPlugins(editorProps, prevEditorProps, createAnalyticsEvent) {
-      var _this2 = this,
-        _this$props$getEditor,
-        _this$props$getEditor2,
-        _this$props;
-      var insertNodeAPI = createInsertNodeAPI({
-        getEditorView: function getEditorView() {
-          return _this2.view;
-        },
-        getEditorPlugins: function getEditorPlugins() {
-          return _this2.editorPlugins;
-        }
+    function getPlugins(preset) {
+      var plugins = preset.build({
+        pluginInjectionAPI: this.pluginInjectionAPI
       });
-      var editorAnalyticsAPI = createEditorAnalyticsAPI({
-        getEditorView: function getEditorView() {
-          return _this2.view;
-        },
-        getCreateUIAnalyticsEvent: function getCreateUIAnalyticsEvent() {
-          return createAnalyticsEvent;
-        }
-      });
-      var getPluginsProps = {
-        props: editorProps,
-        prevAppearance: prevEditorProps === null || prevEditorProps === void 0 ? void 0 : prevEditorProps.appearance,
-        createAnalyticsEvent: createAnalyticsEvent,
-        insertNodeAPI: insertNodeAPI,
-        editorAnalyticsAPI: editorAnalyticsAPI
-      };
-      if (this.props.getEditorPlugins === undefined) {
-        // eslint-disable-next-line no-console
-        console.error('getEditorPlugins is undefined in ReactEditorViewInternal - no editor plugins will be added.');
-      }
-      this.editorPlugins = (_this$props$getEditor = (_this$props$getEditor2 = (_this$props = this.props).getEditorPlugins) === null || _this$props$getEditor2 === void 0 ? void 0 : _this$props$getEditor2.call(_this$props, getPluginsProps)) !== null && _this$props$getEditor !== void 0 ? _this$props$getEditor : [];
+      this.editorPlugins = plugins;
       return this.editorPlugins;
     }
   }, {