@atlaskit/editor-core 219.7.2 → 219.7.4

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # @atlaskit/editor-core
 
+## 219.7.4
+
+### Patch Changes
+
+- [`ab1c30e0721ef`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/ab1c30e0721ef) -
+  Migrate extensionStyles.ts to Compiled CSS
+
+## 219.7.3
+
+### Patch Changes
+
+- [`911ea1f065d0f`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/911ea1f065d0f) -
+  [EDITOR-6965] Rebuild the schema in `ReactEditorView.reconfigureState` when toggling presets under
+  the `cc-markdown-mode` experiment, so each preset declares its honest schema (rather than sharing
+  the schema from first mount via `state.reconfigure`). Skips the existing plugin-availability
+  filter (which would evaluate against the OLD schema and drop e.g. `extensionPlugin` on a
+  markdown→rich toggle), and re-seeds `collabInitialised: true` on the new state because the
+  Confluence NCS provider does not implement `getInitPayload` (so the rebind path in
+  `editor-plugin-collab-edit/initialize.ts` is skipped). Also makes
+  `extensionProviderToQuickInsertProvider.getItems` schema-aware so the `/` menu does not surface
+  extension items when the live schema cannot accept them.
+
 ## 219.7.2
 
 ### Patch Changes

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

@@ -28,6 +28,7 @@ var _processRawValue = require("@atlaskit/editor-common/process-raw-value");
 var _uiReact = require("@atlaskit/editor-common/ui-react");
 var _analytics2 = require("@atlaskit/editor-common/utils/analytics");
 var _document = require("@atlaskit/editor-common/utils/document");
+var _model = require("@atlaskit/editor-prosemirror/model");
 var _state2 = require("@atlaskit/editor-prosemirror/state");
 var _view = require("@atlaskit/editor-prosemirror/view");
 var _editorSsrRenderer = require("@atlaskit/editor-ssr-renderer");
@@ -57,14 +58,45 @@ var _handleEditorFocus = require("./ReactEditorView/handleEditorFocus");
 var _useDispatchTransaction = require("./ReactEditorView/useDispatchTransaction");
 var _useFireFullWidthEvent = require("./ReactEditorView/useFireFullWidthEvent");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t.return || t.return(); } finally { if (u) throw o; } } }; }
 function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
-function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } // eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; } // eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
 var EDIT_AREA_ID = 'ak-editor-textarea';
 var SSR_TRACE_SEGMENT_NAME = 'reactEditorView';
 var bootStartTime = (0, _isPerformanceApiAvailable.isPerformanceAPIAvailable)() ? performance.now() : undefined;
+// `markdown↔rich` toggles drop different node/mark sets, so the unique
+// name set is enough to detect when a destructive rebuild is needed.
+function sameNames(a, b) {
+  var setA = new Set(a);
+  var setB = new Set(b);
+  if (setA.size !== setB.size) {
+    return false;
+  }
+  var _iterator = _createForOfIteratorHelper(setA),
+    _step;
+  try {
+    for (_iterator.s(); !(_step = _iterator.n()).done;) {
+      var name = _step.value;
+      if (!setB.has(name)) {
+        return false;
+      }
+    }
+  } catch (err) {
+    _iterator.e(err);
+  } finally {
+    _iterator.f();
+  }
+  return true;
+}
+function schemaShapeChanged(current, next) {
+  return !sameNames(Object.keys(current.nodes), next.nodes.map(function (n) {
+    return n.name;
+  })) || !sameNames(Object.keys(current.marks), next.marks.map(function (m) {
+    return m.name;
+  }));
+}
 function ReactEditorView(props) {
   var _pluginInjectionAPI$c, _media, _linking, _document$querySelect, _props$render, _props$render2;
   // Should be always the first statement in the component
@@ -364,9 +396,10 @@ function ReactEditorView(props) {
     _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);
+  // Preset reference last processed by reconfigureState. Used to skip the
+  // destructive work (plugin filter, schema rebuild) when reconfigure is
+  // called with the same preset.
+  var lastProcessedPresetRef = (0, _react.useRef)(null);
   var reconfigureState = (0, _react.useCallback)(function (props) {
     if (!viewRef.current) {
       return;
@@ -383,6 +416,35 @@ function ReactEditorView(props) {
     var previousPluginNames = new Set(pluginInjectionAPI.current.getRegisteredPluginNames());
     var editorPlugins = (0, _createPluginsList.default)(props.preset, 'allowBlockType' in props.editorProps ? props.editorProps : {}, pluginInjectionAPI.current);
 
+    // Capture once, before either downstream block updates the ref —
+    // both the filter and the schema rebuild are destructive and only
+    // want to run when the preset has actually changed.
+    var presetChanged = lastProcessedPresetRef.current !== props.preset;
+
+    // Build a candidate config from the *unfiltered* plugin list so we can
+    // decide whether the schema rebuild path will run. Both the rebuild
+    // decision and the drop-filter decision below depend on this answer,
+    // so it has to be computed up-front.
+    var buildConfig = function buildConfig(plugins) {
+      var c = (0, _createEditor.processPluginsList)(plugins);
+      if ((0, _expValEquals.expValEquals)('platform_editor_appearance_shared_state', 'isEnabled', true)) {
+        var _c$pmPlugins;
+        (_c$pmPlugins = c.pmPlugins).push.apply(_c$pmPlugins, (0, _toConsumableArray2.default)(pluginInjectionAPI.current.getInternalPMPlugins()));
+      }
+      return c;
+    };
+    var nextConfig = buildConfig(editorPlugins);
+
+    // `state.reconfigure` preserves the original schema, so a preset
+    // toggle that should change schema (markdown↔rich) needs a fresh
+    // `EditorState`. Resets all plugin state including undo history.
+    //
+    // Compare schema *shape* (node + mark name sets) rather than preset
+    // identity: consumers commonly recreate the preset object on every
+    // parent re-render, and a destructive rebuild on a no-op identity
+    // change tears down all plugin state (e.g. unmounts the AI palette).
+    var shouldRebuildSchema = presetChanged && schemaShapeChanged(viewRef.current.state.schema, nextConfig) && (0, _expValEqualsNoExposure.expValEqualsNoExposure)('cc-markdown-mode', 'isEnabled', true);
+
     // `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
@@ -391,17 +453,26 @@ function ReactEditorView(props) {
     //      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.
+    //
+    // When the schema is being rebuilt below, the new schema is built
+    // from the *unfiltered* plugin list — so dropping plugins whose
+    // nodes/marks the OLD schema lacks would wrongly remove the very
+    // plugins the rebuild is meant to admit. Skip the drop step in that
+    // case (purpose 1) but always reconcile the injection API
+    // (purpose 2). When NOT rebuilding, run both — even under the
+    // `cc-markdown-mode` experiment, otherwise no-op preset identity
+    // changes would silently leave a broken plugin/schema mismatch.
+    if (presetChanged && (0, _platformFeatureFlags.fg)('platform_editor_reconfigure_filter_plugins')) {
+      var dropped = [];
+      if (!shouldRebuildSchema) {
+        var _result = (0, _filterPluginsForReconfigure.filterPluginsForReconfigure)(editorPlugins, viewRef.current.state.schema, previousPluginNames);
+        if (_result.dropped.length > 0) {
+          editorPlugins = _result.kept;
+          // Plugin list changed — rebuild candidate config to match.
+          nextConfig = buildConfig(editorPlugins);
+        }
+        dropped = _result.dropped;
+      }
       var keptPluginNames = new Set(editorPlugins.map(function (p) {
         return p === null || p === void 0 ? void 0 : p.name;
       }).filter(function (n) {
@@ -415,33 +486,77 @@ function ReactEditorView(props) {
           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;
-      (_config$current$pmPlu2 = config.current.pmPlugins).push.apply(_config$current$pmPlu2, (0, _toConsumableArray2.default)(pluginInjectionAPI.current.getInternalPMPlugins()));
     }
+    config.current = nextConfig;
     var state = viewRef.current.state;
-    var plugins = (0, _createEditor.createPMPlugins)({
-      schema: state.schema,
-      dispatch: dispatch,
-      errorReporter: errorReporter,
-      editorConfig: config.current,
-      eventDispatcher: eventDispatcher,
-      providerFactory: props.providerFactory,
-      portalProviderAPI: props.portalProviderAPI,
-      nodeViewPortalProviderAPI: props.nodeViewPortalProviderAPI,
-      dispatchAnalyticsEvent: dispatchAnalyticsEvent,
-      featureFlags: featureFlags,
-      getIntl: function getIntl() {
-        return props.intl;
-      },
-      onEditorStateUpdated: pluginInjectionAPI.current.onEditorViewUpdated
-    });
-    var newState = state.reconfigure({
-      plugins: plugins
-    });
+    var newState;
+    if (shouldRebuildSchema) {
+      var newSchema = (0, _createSchema.createSchema)(config.current);
+      var newDoc;
+      try {
+        newDoc = _model.Node.fromJSON(newSchema, state.doc.toJSON());
+      } catch (e) {
+        // eslint-disable-next-line no-console
+        console.error('[reconfigureState] Failed to migrate doc to new schema; resetting to empty doc', e);
+        var empty = newSchema.topNodeType.createAndFill();
+        if (!empty) {
+          throw new Error('reconfigureState: doc migration failed and new schema cannot create an empty top node');
+        }
+        newDoc = empty;
+      }
+      var newSelection;
+      try {
+        newSelection = _state2.Selection.fromJSON(newDoc, state.selection.toJSON());
+      } catch (_unused) {
+        // Old selection's positions / node types may not map onto the new schema.
+        newSelection = _state2.Selection.atStart(newDoc);
+      }
+      var plugins = (0, _createEditor.createPMPlugins)({
+        schema: newSchema,
+        dispatch: dispatch,
+        errorReporter: errorReporter,
+        editorConfig: config.current,
+        eventDispatcher: eventDispatcher,
+        providerFactory: props.providerFactory,
+        portalProviderAPI: props.portalProviderAPI,
+        nodeViewPortalProviderAPI: props.nodeViewPortalProviderAPI,
+        dispatchAnalyticsEvent: dispatchAnalyticsEvent,
+        featureFlags: featureFlags,
+        getIntl: function getIntl() {
+          return props.intl;
+        },
+        onEditorStateUpdated: pluginInjectionAPI.current.onEditorViewUpdated
+      });
+      newState = _state2.EditorState.create({
+        schema: newSchema,
+        doc: newDoc,
+        selection: newSelection,
+        plugins: plugins
+      });
+    } else {
+      var _plugins = (0, _createEditor.createPMPlugins)({
+        schema: state.schema,
+        dispatch: dispatch,
+        errorReporter: errorReporter,
+        editorConfig: config.current,
+        eventDispatcher: eventDispatcher,
+        providerFactory: props.providerFactory,
+        portalProviderAPI: props.portalProviderAPI,
+        nodeViewPortalProviderAPI: props.nodeViewPortalProviderAPI,
+        dispatchAnalyticsEvent: dispatchAnalyticsEvent,
+        featureFlags: featureFlags,
+        getIntl: function getIntl() {
+          return props.intl;
+        },
+        onEditorStateUpdated: pluginInjectionAPI.current.onEditorViewUpdated
+      });
+      newState = state.reconfigure({
+        plugins: _plugins
+      });
+    }
+    if (presetChanged) {
+      lastProcessedPresetRef.current = props.preset;
+    }
 
     // need to update the state first so when the view builds the nodeviews it is
     // using the latest plugins
@@ -450,9 +565,32 @@ function ReactEditorView(props) {
       state: newState
     }));
 
+    // The new collab-edit plugin instance starts with `isReady=false`.
+    // The rebind path in editor-plugin-collab-edit's initialize.ts is
+    // gated on `provider.getInitPayload`, which the Confluence NCS
+    // provider does not implement, so the placeholder spinner would
+    // never clear. Re-seeding here is safe: the prior state must have
+    // had `isReady=true` for the user to have triggered the toggle.
+    //
+    // Must run AFTER `view.update({ state: newState })`: that call resets
+    // the view's state to the captured `newState` reference, so a
+    // dispatch placed before it would advance `view.state` to a value
+    // that `update` then silently overwrites — discarding the meta and
+    // leaving `isReady=false`.
+    if (shouldRebuildSchema) {
+      // `state.collabEditPlugin$` is the property PM derives from the
+      // collab plugin's PluginKey; cast through `unknown` to read it.
+      var collabState = viewRef.current.state.collabEditPlugin$;
+      if (collabState && collabState.isReady !== true) {
+        viewRef.current.dispatch(viewRef.current.state.tr.setMeta('collabInitialised', true));
+      }
+    }
+
     // EDITOR-6702: gated until we have a broader gate; reconfigure is a
     // low-level path so use NoExposure.
     if ((0, _expValEqualsNoExposure.expValEqualsNoExposure)('cc-markdown-mode', 'isEnabled', true)) {
+      // Force a render so PluginSlot picks up the new preset's content
+      // components against the new state.
       bumpConfigVersion(function (v) {
         return v + 1;
       });
@@ -695,19 +833,19 @@ function ReactEditorView(props) {
     return function () {
       if (scrollElement.current) {
         // eslint-disable-next-line react-hooks/exhaustive-deps
-        var _iterator = _createForOfIteratorHelper(possibleListeners.current),
-          _step;
+        var _iterator2 = _createForOfIteratorHelper(possibleListeners.current),
+          _step2;
         try {
-          for (_iterator.s(); !(_step = _iterator.n()).done;) {
+          for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
             var _scrollElement$curren;
-            var possibleListener = _step.value;
+            var possibleListener = _step2.value;
             // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
             (_scrollElement$curren = scrollElement.current) === null || _scrollElement$curren === void 0 || _scrollElement$curren.removeEventListener.apply(_scrollElement$curren, (0, _toConsumableArray2.default)(possibleListener));
           }
         } catch (err) {
-          _iterator.e(err);
+          _iterator2.e(err);
         } finally {
-          _iterator.f();
+          _iterator2.f();
         }
       }
       scrollElement.current = null;
@@ -719,19 +857,19 @@ function ReactEditorView(props) {
       scrollElement.current = document.querySelector('[data-editor-scroll-container]');
       var cleanupListeners = function cleanupListeners() {
         // eslint-disable-next-line react-hooks/exhaustive-deps
-        var _iterator2 = _createForOfIteratorHelper(possibleListeners.current),
-          _step2;
+        var _iterator3 = _createForOfIteratorHelper(possibleListeners.current),
+          _step3;
         try {
-          for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+          for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
             var _scrollElement$curren2;
-            var possibleListener = _step2.value;
+            var possibleListener = _step3.value;
             // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
             (_scrollElement$curren2 = scrollElement.current) === null || _scrollElement$curren2 === void 0 || _scrollElement$curren2.removeEventListener.apply(_scrollElement$curren2, (0, _toConsumableArray2.default)(possibleListener));
           }
         } catch (err) {
-          _iterator2.e(err);
+          _iterator3.e(err);
         } finally {
-          _iterator2.f();
+          _iterator3.f();
         }
       };
       if (scrollElement.current) {