@atlaskit/editor-core 219.5.0 → 219.6.0

package/CHANGELOG.md

@@ -1,5 +1,32 @@
 # @atlaskit/editor-core
 
+## 219.6.0
+
+### Minor Changes
+
+- [`80e6f41ddfce4`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/80e6f41ddfce4) -
+  Reconcile editor plugin set on reconfigureState across preset switches: drop plugins whose schema
+  nodes/marks aren't in the current schema, and evict plugins from the injection API that aren't
+  part of the new preset. Behind feature gate `platform_editor_reconfigure_filter_plugins`.
+
+  Adds the `NamedReactHookFactory` type to `@atlaskit/editor-common/types` and annotates each
+  plugin's `usePluginHook` with its plugin name in `processPluginsList` so `MountPluginHooks` can
+  key React fibers stably per plugin. The shape of `EditorConfig.pluginHooks` is unchanged
+  (`ReactHookFactory[]`); the annotation is a non-breaking additive property on the function value
+  that falls back to the array index when absent.
+
+### Patch Changes
+
+- Updated dependencies
+
+## 219.5.1
+
+### Patch Changes
+
+- [`8db6f0336d199`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/8db6f0336d199) -
+  Cleans up experiment platform_editor_toolbar_two_stage_hydration
+- Updated dependencies
+
 ## 219.5.0
 
 ### Minor Changes

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

@@ -49,6 +49,7 @@ var _consts = require("./consts");
 var _createEditor = require("./create-editor");
 var _createPluginsList = _interopRequireDefault(require("./create-plugins-list"));
 var _createSchema = require("./create-schema");
+var _filterPluginsForReconfigure = require("./filter-plugins-for-reconfigure");
 var _messages = require("./messages");
 var _focusEditorElement = require("./ReactEditorView/focusEditorElement");
 var _getUAPrefix = require("./ReactEditorView/getUAPrefix");
@@ -362,6 +363,10 @@ function ReactEditorView(props) {
   var _useState = (0, _react.useState)(0),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     bumpConfigVersion = _useState2[1];
+
+  // Preset reference last processed by the schema/API reconciliation below.
+  // Used to skip that work when reconfigure is called with the same preset.
+  var lastFilteredPresetRef = (0, _react.useRef)(null);
   var reconfigureState = (0, _react.useCallback)(function (props) {
     if (!viewRef.current) {
       return;
@@ -371,7 +376,47 @@ function ReactEditorView(props) {
     // 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.
     blur();
+
+    // Snapshot plugin names registered before createPluginsList runs, so
+    // we can tell which plugins are newly added by the new preset vs.
+    // which ones already coexisted with the current schema.
+    var previousPluginNames = new Set(pluginInjectionAPI.current.getRegisteredPluginNames());
     var editorPlugins = (0, _createPluginsList.default)(props.preset, 'allowBlockType' in props.editorProps ? props.editorProps : {}, pluginInjectionAPI.current);
+
+    // `state.reconfigure` keeps the original schema, so switching presets
+    // can leave the editor inconsistent in two ways:
+    //   1. The new preset may add plugins that reference schema nodes or
+    //      marks the original schema doesn't have.
+    //   2. Plugins registered by a previous preset can linger in the
+    //      injection API even when the new preset doesn't re-register
+    //      them, so listeners still fire against a state that no longer
+    //      has their pmPlugin.
+    if (lastFilteredPresetRef.current !== props.preset && (0, _platformFeatureFlags.fg)('platform_editor_reconfigure_filter_plugins')) {
+      var _filterPluginsForReco = (0, _filterPluginsForReconfigure.filterPluginsForReconfigure)(editorPlugins, viewRef.current.state.schema, previousPluginNames),
+        kept = _filterPluginsForReco.kept,
+        dropped = _filterPluginsForReco.dropped;
+      editorPlugins = kept;
+
+      // Reconcile the injection API with the post-filter plugin set.
+      // This evicts both the plugins we just dropped above (re-registered
+      // by createPluginsList but no longer in editorPlugins) AND any
+      // plugin from a previous preset that the new preset doesn't
+      // re-register.
+      var keptPluginNames = new Set(editorPlugins.map(function (p) {
+        return p === null || p === void 0 ? void 0 : p.name;
+      }).filter(function (n) {
+        return Boolean(n);
+      }));
+      var evictedFromApi = pluginInjectionAPI.current.retainPlugins(keptPluginNames);
+      if (dropped.length > 0 || evictedFromApi.length > 0) {
+        // eslint-disable-next-line no-console
+        console.warn('[reconfigureState] Cleanup summary:', {
+          dropped: dropped,
+          evictedFromApi: evictedFromApi
+        });
+      }
+      lastFilteredPresetRef.current = props.preset;
+    }
     config.current = (0, _createEditor.processPluginsList)(editorPlugins);
     if ((0, _expValEquals.expValEquals)('platform_editor_appearance_shared_state', 'isEnabled', true)) {
       var _config$current$pmPlu2;

package/dist/cjs/create-editor/create-editor.js

@@ -72,7 +72,12 @@ function processPluginsList(plugins) {
       acc.contentComponents.push(plugin.contentComponent);
     }
     if (plugin.usePluginHook) {
-      acc.pluginHooks.push(plugin.usePluginHook);
+      // Wrap with .bind(null) so we can annotate the function with the
+      // plugin name without mutating the plugin's original hook reference.
+      // MountPluginHooks reads `pluginName` to derive a stable React key.
+      var named = plugin.usePluginHook.bind(null);
+      named.pluginName = plugin.name;
+      acc.pluginHooks.push(named);
     }
     if (plugin.primaryToolbarComponent) {
       acc.primaryToolbarComponents.push(plugin.primaryToolbarComponent);

package/dist/cjs/create-editor/filter-plugins-for-reconfigure.js

@@ -0,0 +1,49 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.filterPluginsForReconfigure = filterPluginsForReconfigure;
+/**
+ * Used by `reconfigureState` to drop plugins from a freshly-built preset that
+ * declare schema nodes/marks the current schema doesn't have. Plugins already
+ * present before this reconfigure are kept untouched: they have demonstrably
+ * coexisted with the schema (e.g. tests that mock a stripped-down schema), so
+ * removing them now would be a regression.
+ */
+function filterPluginsForReconfigure(editorPlugins, schema, previousPluginNames) {
+  var availableNodeNames = new Set(Object.keys(schema.nodes));
+  var availableMarkNames = new Set(Object.keys(schema.marks));
+  var dropped = [];
+  var kept = editorPlugins.filter(function (plugin) {
+    if (!plugin) {
+      return false;
+    }
+    if (previousPluginNames.has(plugin.name)) {
+      return true;
+    }
+    var missingNodes = plugin.nodes ? plugin.nodes().map(function (n) {
+      return n.name;
+    }).filter(function (n) {
+      return !availableNodeNames.has(n);
+    }) : [];
+    var missingMarks = plugin.marks ? plugin.marks().map(function (m) {
+      return m.name;
+    }).filter(function (m) {
+      return !availableMarkNames.has(m);
+    }) : [];
+    if (missingNodes.length > 0 || missingMarks.length > 0) {
+      dropped.push({
+        name: plugin.name,
+        missingNodes: missingNodes,
+        missingMarks: missingMarks
+      });
+      return false;
+    }
+    return true;
+  });
+  return {
+    kept: kept,
+    dropped: dropped
+  };
+}

package/dist/cjs/test-utils.js

@@ -56,7 +56,9 @@ function lightProcessPluginsList(editorPlugins) {
       acc.contentComponents.push(editorPlugin.contentComponent);
     }
     if (editorPlugin.usePluginHook) {
-      acc.pluginHooks.push(editorPlugin.usePluginHook);
+      var named = editorPlugin.usePluginHook.bind(null);
+      named.pluginName = editorPlugin.name;
+      acc.pluginHooks.push(named);
     }
     if (editorPlugin.onEditorViewStateUpdated) {
       acc.onEditorViewStateUpdatedCallbacks.push(editorPlugin.onEditorViewStateUpdated);

package/dist/cjs/ui/Appearance/FullPage/FullPageToolbarNext.js

@@ -61,17 +61,6 @@ var SecondChildWrapper = function SecondChildWrapper(_ref3) {
     className: (0, _runtime.ax)([styles.secondChildWrapperOneLine])
   }, children);
 };
-
-/**
- * Placeholder component that reserves the toolbar's space during hydration
- * to prevent layout shift when the actual toolbar renders.
- */
-var ToolbarPlaceholder = function ToolbarPlaceholder() {
-  return /*#__PURE__*/_react.default.createElement("div", {
-    "data-testid": "ak-editor-main-toolbar-placeholder",
-    className: (0, _runtime.ax)([styles.toolbarPlaceholder])
-  });
-};
 var shouldShowToolbarContainer = function shouldShowToolbarContainer(toolbar, customPrimaryToolbarComponents) {
   return !!toolbar || !!customPrimaryToolbarComponents;
 };
@@ -125,41 +114,9 @@ var FullPageToolbarNext = exports.FullPageToolbarNext = function FullPageToolbar
   if (!shouldShowToolbarContainer(toolbar, customPrimaryToolbarComponents)) {
     return /*#__PURE__*/_react.default.createElement(ToolbarPortal, null, null);
   }
-  if ((0, _expValEquals.expValEquals)('platform_editor_toolbar_two_stage_hydration', 'isEnabled', true)) {
-    return /*#__PURE__*/_react.default.createElement(_contextPanel.ContextPanelConsumer, null, function (_ref6) {
-      var ContextPanelWidth = _ref6.width;
-      return /*#__PURE__*/_react.default.createElement(_uiMenu.ToolbarArrowKeyNavigationProvider, {
-        editorView: editorView,
-        childComponentSelector: "[data-testid='ak-editor-main-toolbar']",
-        isShortcutToFocusToolbar: isShortcutToFocusToolbar,
-        handleEscape: handleEscape,
-        intl: intl
-      }, /*#__PURE__*/_react.default.createElement(ToolbarPortal, null, /*#__PURE__*/_react.default.createElement(MainToolbarWrapper, {
-        testId: "ak-editor-main-toolbar",
-        showKeyline: showKeyline || ContextPanelWidth > 0
-      }, beforeIcon && /*#__PURE__*/_react.default.createElement("div", {
-        className: (0, _runtime.ax)([styles.mainToolbarIconBefore, styles.mainToolbarIconBeforeNew])
-      }, beforeIcon), /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(FirstChildWrapper, null, /*#__PURE__*/_react.default.createElement(_ExcludeFromHydration.default, null, primaryToolbarDockingConfigEnabled && components && (0, _toolbar2.isToolbar)(toolbar) && editorView && !(0, _coreUtils.isSSR)() && /*#__PURE__*/_react.default.createElement(_Toolbar.ToolbarNext, {
-        toolbar: toolbar,
-        components: components,
-        editorView: editorView,
-        editorAPI: editorAPI,
-        popupsMountPoint: mountPoint,
-        editorAppearance: "full-page",
-        isDisabled: disabled
-      }))), /*#__PURE__*/_react.default.createElement(SecondChildWrapper, null, /*#__PURE__*/_react.default.createElement("div", {
-        className: (0, _runtime.ax)([styles.customToolbarWrapperStyle])
-      }, !!customPrimaryToolbarComponents && 'before' in customPrimaryToolbarComponents && /*#__PURE__*/_react.default.createElement("div", {
-        "data-testid": 'before-primary-toolbar-components-plugin',
-        className: (0, _runtime.ax)([styles.beforePrimaryToolbarComponents])
-      }, customPrimaryToolbarComponents.before), !!customPrimaryToolbarComponents && 'after' in customPrimaryToolbarComponents ? customPrimaryToolbarComponents.after : customPrimaryToolbarComponents)), /*#__PURE__*/_react.default.createElement(_ToolbarPortal.ToolbarPortalMountPoint, null)))));
-    });
-  }
-  return /*#__PURE__*/_react.default.createElement(_contextPanel.ContextPanelConsumer, null, function (_ref7) {
-    var ContextPanelWidth = _ref7.width;
-    return /*#__PURE__*/_react.default.createElement(_ExcludeFromHydration.default, {
-      fallback: /*#__PURE__*/_react.default.createElement(ToolbarPlaceholder, null)
-    }, /*#__PURE__*/_react.default.createElement(_uiMenu.ToolbarArrowKeyNavigationProvider, {
+  return /*#__PURE__*/_react.default.createElement(_contextPanel.ContextPanelConsumer, null, function (_ref6) {
+    var ContextPanelWidth = _ref6.width;
+    return /*#__PURE__*/_react.default.createElement(_uiMenu.ToolbarArrowKeyNavigationProvider, {
       editorView: editorView,
       childComponentSelector: "[data-testid='ak-editor-main-toolbar']",
       isShortcutToFocusToolbar: isShortcutToFocusToolbar,
@@ -170,7 +127,7 @@ var FullPageToolbarNext = exports.FullPageToolbarNext = function FullPageToolbar
       showKeyline: showKeyline || ContextPanelWidth > 0
     }, beforeIcon && /*#__PURE__*/_react.default.createElement("div", {
       className: (0, _runtime.ax)([styles.mainToolbarIconBefore, styles.mainToolbarIconBeforeNew])
-    }, beforeIcon), /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(FirstChildWrapper, null, primaryToolbarDockingConfigEnabled && components && (0, _toolbar2.isToolbar)(toolbar) && editorView && !(0, _coreUtils.isSSR)() && /*#__PURE__*/_react.default.createElement(_Toolbar.ToolbarNext, {
+    }, beforeIcon), /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(FirstChildWrapper, null, /*#__PURE__*/_react.default.createElement(_ExcludeFromHydration.default, null, primaryToolbarDockingConfigEnabled && components && (0, _toolbar2.isToolbar)(toolbar) && editorView && !(0, _coreUtils.isSSR)() && /*#__PURE__*/_react.default.createElement(_Toolbar.ToolbarNext, {
       toolbar: toolbar,
       components: components,
       editorView: editorView,
@@ -178,11 +135,11 @@ var FullPageToolbarNext = exports.FullPageToolbarNext = function FullPageToolbar
       popupsMountPoint: mountPoint,
       editorAppearance: "full-page",
       isDisabled: disabled
-    })), /*#__PURE__*/_react.default.createElement(SecondChildWrapper, null, /*#__PURE__*/_react.default.createElement("div", {
+    }))), /*#__PURE__*/_react.default.createElement(SecondChildWrapper, null, /*#__PURE__*/_react.default.createElement("div", {
       className: (0, _runtime.ax)([styles.customToolbarWrapperStyle])
     }, !!customPrimaryToolbarComponents && 'before' in customPrimaryToolbarComponents && /*#__PURE__*/_react.default.createElement("div", {
       "data-testid": 'before-primary-toolbar-components-plugin',
       className: (0, _runtime.ax)([styles.beforePrimaryToolbarComponents])
-    }, customPrimaryToolbarComponents.before), !!customPrimaryToolbarComponents && 'after' in customPrimaryToolbarComponents ? customPrimaryToolbarComponents.after : customPrimaryToolbarComponents)), /*#__PURE__*/_react.default.createElement(_ToolbarPortal.ToolbarPortalMountPoint, null))))));
+    }, customPrimaryToolbarComponents.before), !!customPrimaryToolbarComponents && 'after' in customPrimaryToolbarComponents ? customPrimaryToolbarComponents.after : customPrimaryToolbarComponents)), /*#__PURE__*/_react.default.createElement(_ToolbarPortal.ToolbarPortalMountPoint, null)))));
   });
 };