@atlaskit/editor-common 94.20.0 → 94.22.0

package/CHANGELOG.md

@@ -1,5 +1,34 @@
 # @atlaskit/editor-common
 
+## 94.22.0
+
+### Minor Changes
+
+- [#163532](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/163532)
+  [`b80779d45e179`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/b80779d45e179) -
+  moved processRawFragmentValue to editor-common
+- [#165273](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/165273)
+  [`665190aa04bde`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/665190aa04bde) -
+  Fix setting up editorApi with usePreset for react strict mode by adding new apiResolver for
+  preset.
+
+### Patch Changes
+
+- Updated dependencies
+
+## 94.21.0
+
+### Minor Changes
+
+- [#162829](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/162829)
+  [`5bf267e7de21e`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/5bf267e7de21e) -
+  Introduce new usePluginStateEffect which can be used to run effects on plugin state change
+  (similar to useSharedPluginState but without re-renders)
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 94.20.0
 
 ### Minor Changes

package/dist/cjs/hooks/usePluginStateEffect.js

@@ -0,0 +1,142 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.usePluginStateEffect = usePluginStateEffect;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = require("react");
+var _debounce = _interopRequireDefault(require("lodash/debounce"));
+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; }
+/**
+ *
+ * Directly map object values
+ *
+ * @param object The object to transform
+ * @param mapFunction The function to map an old value to new one
+ * @returns Object with the same key but transformed values
+ *
+ */
+function mapValues(object, mapFunction) {
+  return Object.entries(object).reduce(function (acc, _ref) {
+    var _ref2 = (0, _slicedToArray2.default)(_ref, 2),
+      key = _ref2[0],
+      value = _ref2[1];
+    return _objectSpread(_objectSpread({}, acc), {}, (0, _defineProperty2.default)({}, key, mapFunction(value)));
+  }, {});
+}
+
+// When we use the `useSharedPluginState` example: `useSharedPluginState(api, ['width'])`
+// it will re-render every time the component re-renders as the array "['width']" is seen as an update.
+// This hook is used to prevent re-renders due to this.
+function useStaticPlugins(plugins) {
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  return (0, _react.useMemo)(function () {
+    return plugins;
+  }, []);
+}
+/**
+ *
+ * ⚠️⚠️⚠️ This is a debounced hook ⚠️⚠️⚠️
+ * If the plugins you are listening to generate multiple shared states while the user is typing,
+ * your React Component will get only the last one.
+ *
+ * Used to run effects on changes in editor state - similar to `useSharedPluginState` except this
+ * is for reacting to state changes so does not cause re-renders. The effect callback passed will be called
+ * on initialisation and when the state changes (with the latest callback we are provided).
+ *
+ * Example in plugin:
+ *
+ * ```typescript
+ * function ExampleContent({ api }: Props) {
+ *   const pluginStateCallback = useCallback(( { dogState, exampleState } ) => {
+ *       // Use as necessary ie. fire analytics or network requests
+ *       console.log(dogState, exampleState)
+ *   }, [])
+ *   usePluginStateEffect(
+ *     api,
+ *     ['dog', 'example'],
+ *     pluginStateCallback
+ *   )
+ *   return <p>Content</p>
+ * }
+ *
+ * const examplePlugin: NextEditorPlugin<'example', { dependencies: [typeof pluginDog] }> = ({ api }) => {
+ *   return {
+ *     name: 'example',
+ *     contentComponent: () =>
+ *       <ExampleContent
+ *         api={api}
+ *         />
+ *   }
+ * }
+ * ```
+ *
+ * @param injectionApi Plugin injection API from `NextEditorPlugin`
+ * @param plugins Plugin names to get the shared plugin state for
+ * @param effect A callback, the parameter is a corresponding object, the keys are names of the plugin with `State` appended,
+ * the values are the shared state exposed by that plugin. This effect fires when the state changes and runs the most recent callback passed.
+ * If the callback changes the effect is not re-run - it is still recommended however to wrap your effect in `useCallback`,
+ * You can return a function from your effect to call any cleanup activities which will be called on unmount and when `editorApi` changes.
+ */
+function usePluginStateEffect(injectionApi, plugins, effect) {
+  var pluginNames = useStaticPlugins(plugins);
+
+  // Create a memoized object containing the named plugins
+  var namedExternalPlugins = (0, _react.useMemo)(function () {
+    return pluginNames.reduce(function (acc, pluginName) {
+      return _objectSpread(_objectSpread({}, acc), {}, (0, _defineProperty2.default)({}, "".concat(String(pluginName), "State"), injectionApi === null || injectionApi === void 0 ? void 0 : injectionApi[pluginName]));
+    }, {});
+  }, [injectionApi, pluginNames]);
+  usePluginStateEffectInternal(namedExternalPlugins, effect);
+}
+function usePluginStateEffectInternal(externalPlugins, effect) {
+  var refStates = (0, _react.useRef)();
+  var cleanup = (0, _react.useRef)();
+  var latestEffect = (0, _react.useRef)(effect);
+
+  // We should store the latest effect in a reference so it is more intuitive to the user
+  // and we are not causing a memory leak by having references to old state.
+  (0, _react.useEffect)(function () {
+    latestEffect.current = (0, _debounce.default)(effect);
+    return function () {
+      latestEffect.current = undefined;
+    };
+  }, [effect]);
+  (0, _react.useLayoutEffect)(function () {
+    var _latestEffect$current;
+    // Update the reference for this plugin and activate the effect
+    refStates.current = mapValues(externalPlugins, function (value) {
+      return value === null || value === void 0 ? void 0 : value.sharedState.currentState();
+    });
+    cleanup.current = (_latestEffect$current = latestEffect.current) === null || _latestEffect$current === void 0 ? void 0 : _latestEffect$current.call(latestEffect, refStates.current);
+    var unsubs = Object.entries(externalPlugins).map(function (_ref3) {
+      var _ref4 = (0, _slicedToArray2.default)(_ref3, 2),
+        pluginKey = _ref4[0],
+        externalPlugin = _ref4[1];
+      return externalPlugin === null || externalPlugin === void 0 ? void 0 : externalPlugin.sharedState.onChange(function (_ref5) {
+        var nextSharedState = _ref5.nextSharedState,
+          prevSharedState = _ref5.prevSharedState;
+        if (prevSharedState !== nextSharedState && refStates.current) {
+          var _latestEffect$current2;
+          // Update the reference for this plugin and activate the effect
+          refStates.current[pluginKey] = nextSharedState;
+          cleanup.current = (_latestEffect$current2 = latestEffect.current) === null || _latestEffect$current2 === void 0 ? void 0 : _latestEffect$current2.call(latestEffect, refStates.current);
+        }
+      });
+    });
+    return function () {
+      var _cleanup$current;
+      refStates.current = undefined;
+      unsubs.forEach(function (cb) {
+        return cb === null || cb === void 0 ? void 0 : cb();
+      });
+      (_cleanup$current = cleanup.current) === null || _cleanup$current === void 0 || _cleanup$current.call(cleanup);
+    };
+    // Do not re-run if the `effect` changes - this is not expected with `useEffect` or similar hooks
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [externalPlugins]);
+}

package/dist/cjs/monitoring/error.js

@@ -17,7 +17,7 @@ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 var SENTRY_DSN = 'https://0b10c8e02fb44d8796c047b102c9bee8@o55978.ingest.sentry.io/4505129224110080';
 var packageName = 'editor-common'; // Sentry doesn't accept '/' in its releases https://docs.sentry.io/platforms/javascript/configuration/releases/
-var packageVersion = "94.20.0";
+var packageVersion = "94.22.0";
 var sanitiseSentryEvents = function sanitiseSentryEvents(data, _hint) {
   // Remove URL as it has UGC
   // TODO: Sanitise the URL instead of just removing it

package/dist/cjs/preset/builder.js

@@ -11,6 +11,7 @@ var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _eventDispatcher = require("../event-dispatcher");
 /*********************
  *                    *
  * BASE TYPES         *
@@ -500,14 +501,17 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
  * If your code is inside an EditorPlugin you should be using the @see ExtractInjectionAPI.
  */
 var EditorPresetBuilder = exports.EditorPresetBuilder = /*#__PURE__*/function () {
-  /**
-   * Returns the editor API when resolved.
-   * This occurs when the preset is initially built.
-   */
-
   function EditorPresetBuilder() {
     var _this = this;
     (0, _classCallCheck2.default)(this, EditorPresetBuilder);
+    /**
+     * @deprecated Use `apiResolver` instead
+     */
+    /**
+     * Returns the editor API when resolved.
+     * This occurs when the preset is initially built.
+     */
+    (0, _defineProperty2.default)(this, "apiEmitter", function () {});
     (0, _defineProperty2.default)(this, "safeEntry", function (plugin) {
       return Array.isArray(plugin) ? plugin : [plugin, undefined];
     });
@@ -518,6 +522,9 @@ var EditorPresetBuilder = exports.EditorPresetBuilder = /*#__PURE__*/function ()
     this.apiPromise = new Promise(function (r) {
       return _this.resolver = r;
     });
+    this.apiResolver = new APIDispatcher(function (emitter) {
+      return _this.apiEmitter = emitter;
+    });
   }
   (0, _createClass2.default)(EditorPresetBuilder, [{
     key: "add",
@@ -575,6 +582,8 @@ var EditorPresetBuilder = exports.EditorPresetBuilder = /*#__PURE__*/function ()
         // The pluginInjectionAPI API doesn't have information enough to build a proper type for the API.
         // It is returning a generic type but on top of the Proxy system
         // So, we can safely recast it here
+        this.apiEmitter(pluginInjectionAPI.api());
+        // Deprecated approach
         (_this$resolver = this.resolver) === null || _this$resolver === void 0 || _this$resolver.call(this, pluginInjectionAPI.api());
       }
       return this.removeExcludedPlugins(editorPlugins, excludePlugins);
@@ -645,4 +654,58 @@ var EditorPresetBuilder = exports.EditorPresetBuilder = /*#__PURE__*/function ()
     }
   }]);
   return EditorPresetBuilder;
+}();
+/**
+ * WARNING: Internal object
+ *
+ * Dedicated wrapper around EventDispatcher for public API around the editor API.
+ * This only has the public method `on` which is used to listen to updates to the editor API.
+ *
+ * This shouldn't really be used externally - the `editorAPI` should be accessed via `usePreset`.
+ */
+var APIDispatcher = /*#__PURE__*/function () {
+  function APIDispatcher(emitter) {
+    var _this3 = this;
+    (0, _classCallCheck2.default)(this, APIDispatcher);
+    (0, _defineProperty2.default)(this, "eventDispatcher", new _eventDispatcher.EventDispatcher());
+    (0, _defineProperty2.default)(this, "key", 'api-resolved-event');
+    // Need to store the last event created in case we subscribe after the fact
+    (0, _defineProperty2.default)(this, "initialEvent", undefined);
+    this.emitter = emitter;
+    this.emitter(function (v) {
+      _this3.initialEvent = v;
+      _this3.eventDispatcher.emit(_this3.key, v);
+    });
+  }
+
+  /**
+   * Used to observe Editor API events
+   *
+   * @param cb Callback to listen to the editor API.
+   * This will also emit the last event if the stream has already started.
+   * @returns Cleanup function to cleanup the listener
+   */
+  (0, _createClass2.default)(APIDispatcher, [{
+    key: "on",
+    value: function on(cb) {
+      var _this4 = this;
+      if (this.initialEvent !== undefined) {
+        // Keeps timing consistent with old approach - certain products
+        // ie. ai-mate relied on this.
+        Promise.resolve().then(function () {
+          return cb(_this4.initialEvent);
+        });
+      }
+      this.eventDispatcher.on(this.key, cb);
+      return function () {
+        _this4.eventDispatcher.off(_this4.key, cb);
+      };
+    }
+  }, {
+    key: "destroy",
+    value: function destroy() {
+      this.eventDispatcher.destroy();
+    }
+  }]);
+  return APIDispatcher;
 }();

package/dist/cjs/ui/DropList/index.js

@@ -24,7 +24,7 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
  * @jsx jsx
  */ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 var packageName = "@atlaskit/editor-common";
-var packageVersion = "94.20.0";
+var packageVersion = "94.22.0";
 var halfFocusRing = 1;
 var dropOffset = '0, 8';
 var DropList = /*#__PURE__*/function (_Component) {

package/dist/cjs/utils/processRawValue.js

@@ -3,6 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.processRawFragmentValue = processRawFragmentValue;
 exports.processRawValue = processRawValue;
 exports.processRawValueWithoutValidation = processRawValueWithoutValidation;
 var _transforms = require("@atlaskit/adf-utils/transforms");
@@ -241,6 +242,20 @@ function processRawValue(schema, value, providerFactory, sanitizePrivateContent,
     return;
   }
 }
+function processRawFragmentValue(schema, value, providerFactory, sanitizePrivateContent, contentTransformer, dispatchAnalyticsEvent) {
+  if (!value) {
+    return;
+  }
+  var adfEntities = value.map(function (item) {
+    return processRawValue(schema, item, providerFactory, sanitizePrivateContent, contentTransformer, dispatchAnalyticsEvent);
+  }).filter(function (item) {
+    return Boolean(item);
+  });
+  if (adfEntities.length === 0) {
+    return;
+  }
+  return _model.Fragment.from(adfEntities);
+}
 function isProseMirrorSchemaCheckError(error) {
   return error instanceof RangeError && (!!error.message.match(/^Invalid collection of marks for node/) || !!error.message.match(/^Invalid content for node/));
 }

package/dist/es2019/hooks/usePluginStateEffect.js

@@ -0,0 +1,118 @@
+import { useEffect, useLayoutEffect, useMemo, useRef } from 'react';
+import debounce from 'lodash/debounce';
+/**
+ *
+ * Directly map object values
+ *
+ * @param object The object to transform
+ * @param mapFunction The function to map an old value to new one
+ * @returns Object with the same key but transformed values
+ *
+ */
+function mapValues(object, mapFunction) {
+  return Object.entries(object).reduce((acc, [key, value]) => ({
+    ...acc,
+    [key]: mapFunction(value)
+  }), {});
+}
+
+// When we use the `useSharedPluginState` example: `useSharedPluginState(api, ['width'])`
+// it will re-render every time the component re-renders as the array "['width']" is seen as an update.
+// This hook is used to prevent re-renders due to this.
+function useStaticPlugins(plugins) {
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  return useMemo(() => plugins, []);
+}
+/**
+ *
+ * ⚠️⚠️⚠️ This is a debounced hook ⚠️⚠️⚠️
+ * If the plugins you are listening to generate multiple shared states while the user is typing,
+ * your React Component will get only the last one.
+ *
+ * Used to run effects on changes in editor state - similar to `useSharedPluginState` except this
+ * is for reacting to state changes so does not cause re-renders. The effect callback passed will be called
+ * on initialisation and when the state changes (with the latest callback we are provided).
+ *
+ * Example in plugin:
+ *
+ * ```typescript
+ * function ExampleContent({ api }: Props) {
+ *   const pluginStateCallback = useCallback(( { dogState, exampleState } ) => {
+ *       // Use as necessary ie. fire analytics or network requests
+ *       console.log(dogState, exampleState)
+ *   }, [])
+ *   usePluginStateEffect(
+ *     api,
+ *     ['dog', 'example'],
+ *     pluginStateCallback
+ *   )
+ *   return <p>Content</p>
+ * }
+ *
+ * const examplePlugin: NextEditorPlugin<'example', { dependencies: [typeof pluginDog] }> = ({ api }) => {
+ *   return {
+ *     name: 'example',
+ *     contentComponent: () =>
+ *       <ExampleContent
+ *         api={api}
+ *         />
+ *   }
+ * }
+ * ```
+ *
+ * @param injectionApi Plugin injection API from `NextEditorPlugin`
+ * @param plugins Plugin names to get the shared plugin state for
+ * @param effect A callback, the parameter is a corresponding object, the keys are names of the plugin with `State` appended,
+ * the values are the shared state exposed by that plugin. This effect fires when the state changes and runs the most recent callback passed.
+ * If the callback changes the effect is not re-run - it is still recommended however to wrap your effect in `useCallback`,
+ * You can return a function from your effect to call any cleanup activities which will be called on unmount and when `editorApi` changes.
+ */
+export function usePluginStateEffect(injectionApi, plugins, effect) {
+  const pluginNames = useStaticPlugins(plugins);
+
+  // Create a memoized object containing the named plugins
+  const namedExternalPlugins = useMemo(() => pluginNames.reduce((acc, pluginName) => ({
+    ...acc,
+    [`${String(pluginName)}State`]: injectionApi === null || injectionApi === void 0 ? void 0 : injectionApi[pluginName]
+  }), {}), [injectionApi, pluginNames]);
+  usePluginStateEffectInternal(namedExternalPlugins, effect);
+}
+function usePluginStateEffectInternal(externalPlugins, effect) {
+  const refStates = useRef();
+  const cleanup = useRef();
+  const latestEffect = useRef(effect);
+
+  // We should store the latest effect in a reference so it is more intuitive to the user
+  // and we are not causing a memory leak by having references to old state.
+  useEffect(() => {
+    latestEffect.current = debounce(effect);
+    return () => {
+      latestEffect.current = undefined;
+    };
+  }, [effect]);
+  useLayoutEffect(() => {
+    var _latestEffect$current;
+    // Update the reference for this plugin and activate the effect
+    refStates.current = mapValues(externalPlugins, value => value === null || value === void 0 ? void 0 : value.sharedState.currentState());
+    cleanup.current = (_latestEffect$current = latestEffect.current) === null || _latestEffect$current === void 0 ? void 0 : _latestEffect$current.call(latestEffect, refStates.current);
+    const unsubs = Object.entries(externalPlugins).map(([pluginKey, externalPlugin]) => externalPlugin === null || externalPlugin === void 0 ? void 0 : externalPlugin.sharedState.onChange(({
+      nextSharedState,
+      prevSharedState
+    }) => {
+      if (prevSharedState !== nextSharedState && refStates.current) {
+        var _latestEffect$current2;
+        // Update the reference for this plugin and activate the effect
+        refStates.current[pluginKey] = nextSharedState;
+        cleanup.current = (_latestEffect$current2 = latestEffect.current) === null || _latestEffect$current2 === void 0 ? void 0 : _latestEffect$current2.call(latestEffect, refStates.current);
+      }
+    }));
+    return () => {
+      var _cleanup$current;
+      refStates.current = undefined;
+      unsubs.forEach(cb => cb === null || cb === void 0 ? void 0 : cb());
+      (_cleanup$current = cleanup.current) === null || _cleanup$current === void 0 ? void 0 : _cleanup$current.call(cleanup);
+    };
+    // Do not re-run if the `effect` changes - this is not expected with `useEffect` or similar hooks
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [externalPlugins]);
+}

package/dist/es2019/monitoring/error.js

@@ -1,7 +1,7 @@
 import { isFedRamp } from './environment';
 const SENTRY_DSN = 'https://0b10c8e02fb44d8796c047b102c9bee8@o55978.ingest.sentry.io/4505129224110080';
 const packageName = 'editor-common'; // Sentry doesn't accept '/' in its releases https://docs.sentry.io/platforms/javascript/configuration/releases/
-const packageVersion = "94.20.0";
+const packageVersion = "94.22.0";
 const sanitiseSentryEvents = (data, _hint) => {
   // Remove URL as it has UGC
   // TODO: Sanitise the URL instead of just removing it

package/dist/es2019/preset/builder.js

@@ -1,4 +1,6 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import { EventDispatcher } from '../event-dispatcher';
+
 /*********************
  *                    *
  * BASE TYPES         *
@@ -525,15 +527,19 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
  * If your code is inside an EditorPlugin you should be using the @see ExtractInjectionAPI.
  */
 export class EditorPresetBuilder {
-  /**
-   * Returns the editor API when resolved.
-   * This occurs when the preset is initially built.
-   */
-
   constructor(...more) {
+    /**
+     * @deprecated Use `apiResolver` instead
+     */
+    /**
+     * Returns the editor API when resolved.
+     * This occurs when the preset is initially built.
+     */
+    _defineProperty(this, "apiEmitter", () => {});
     _defineProperty(this, "safeEntry", plugin => Array.isArray(plugin) ? plugin : [plugin, undefined]);
     this.data = [...more] || [];
     this.apiPromise = new Promise(r => this.resolver = r);
+    this.apiResolver = new APIDispatcher(emitter => this.apiEmitter = emitter);
   }
   add(nextOrTuple) {
     return new EditorPresetBuilder(
@@ -583,6 +589,8 @@ export class EditorPresetBuilder {
       // The pluginInjectionAPI API doesn't have information enough to build a proper type for the API.
       // It is returning a generic type but on top of the Proxy system
       // So, we can safely recast it here
+      this.apiEmitter(pluginInjectionAPI.api());
+      // Deprecated approach
       (_this$resolver = this.resolver) === null || _this$resolver === void 0 ? void 0 : _this$resolver.call(this, pluginInjectionAPI.api());
     }
     return this.removeExcludedPlugins(editorPlugins, excludePlugins);
@@ -637,4 +645,47 @@ export class EditorPresetBuilder {
     }
     return plugins;
   }
+}
+/**
+ * WARNING: Internal object
+ *
+ * Dedicated wrapper around EventDispatcher for public API around the editor API.
+ * This only has the public method `on` which is used to listen to updates to the editor API.
+ *
+ * This shouldn't really be used externally - the `editorAPI` should be accessed via `usePreset`.
+ */
+class APIDispatcher {
+  constructor(emitter) {
+    _defineProperty(this, "eventDispatcher", new EventDispatcher());
+    _defineProperty(this, "key", 'api-resolved-event');
+    // Need to store the last event created in case we subscribe after the fact
+    _defineProperty(this, "initialEvent", undefined);
+    this.emitter = emitter;
+    this.emitter(v => {
+      this.initialEvent = v;
+      this.eventDispatcher.emit(this.key, v);
+    });
+  }
+
+  /**
+   * Used to observe Editor API events
+   *
+   * @param cb Callback to listen to the editor API.
+   * This will also emit the last event if the stream has already started.
+   * @returns Cleanup function to cleanup the listener
+   */
+  on(cb) {
+    if (this.initialEvent !== undefined) {
+      // Keeps timing consistent with old approach - certain products
+      // ie. ai-mate relied on this.
+      Promise.resolve().then(() => cb(this.initialEvent));
+    }
+    this.eventDispatcher.on(this.key, cb);
+    return () => {
+      this.eventDispatcher.off(this.key, cb);
+    };
+  }
+  destroy() {
+    this.eventDispatcher.destroy();
+  }
 }

package/dist/es2019/ui/DropList/index.js

@@ -13,7 +13,7 @@ import withAnalyticsContext from '@atlaskit/analytics-next/withAnalyticsContext'
 import withAnalyticsEvents from '@atlaskit/analytics-next/withAnalyticsEvents';
 import Layer from '../Layer';
 const packageName = "@atlaskit/editor-common";
-const packageVersion = "94.20.0";
+const packageVersion = "94.22.0";
 const halfFocusRing = 1;
 const dropOffset = '0, 8';
 class DropList extends Component {

package/dist/es2019/utils/processRawValue.js

@@ -1,5 +1,5 @@
 import { transformDedupeMarks, transformIndentationMarks, transformInvalidMediaContent, transformMediaLinkMarks, transformNestedTablesIncomingDocument, transformNodesMissingContent, transformTextLinkCodeMarks } from '@atlaskit/adf-utils/transforms';
-import { Node } from '@atlaskit/editor-prosemirror/model';
+import { Fragment, Node } from '@atlaskit/editor-prosemirror/model';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { ACTION, ACTION_SUBJECT, EVENT_TYPE } from '../analytics';
 import { sanitizeNodeForPrivacy } from './filter/privacy-filter';
@@ -241,6 +241,16 @@ export function processRawValue(schema, value, providerFactory, sanitizePrivateC
     return;
   }
 }
+export function processRawFragmentValue(schema, value, providerFactory, sanitizePrivateContent, contentTransformer, dispatchAnalyticsEvent) {
+  if (!value) {
+    return;
+  }
+  const adfEntities = value.map(item => processRawValue(schema, item, providerFactory, sanitizePrivateContent, contentTransformer, dispatchAnalyticsEvent)).filter(item => Boolean(item));
+  if (adfEntities.length === 0) {
+    return;
+  }
+  return Fragment.from(adfEntities);
+}
 function isProseMirrorSchemaCheckError(error) {
   return error instanceof RangeError && (!!error.message.match(/^Invalid collection of marks for node/) || !!error.message.match(/^Invalid content for node/));
 }

package/dist/esm/hooks/usePluginStateEffect.js

@@ -0,0 +1,135 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+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) { _defineProperty(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; }
+import { useEffect, useLayoutEffect, useMemo, useRef } from 'react';
+import debounce from 'lodash/debounce';
+/**
+ *
+ * Directly map object values
+ *
+ * @param object The object to transform
+ * @param mapFunction The function to map an old value to new one
+ * @returns Object with the same key but transformed values
+ *
+ */
+function mapValues(object, mapFunction) {
+  return Object.entries(object).reduce(function (acc, _ref) {
+    var _ref2 = _slicedToArray(_ref, 2),
+      key = _ref2[0],
+      value = _ref2[1];
+    return _objectSpread(_objectSpread({}, acc), {}, _defineProperty({}, key, mapFunction(value)));
+  }, {});
+}
+
+// When we use the `useSharedPluginState` example: `useSharedPluginState(api, ['width'])`
+// it will re-render every time the component re-renders as the array "['width']" is seen as an update.
+// This hook is used to prevent re-renders due to this.
+function useStaticPlugins(plugins) {
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  return useMemo(function () {
+    return plugins;
+  }, []);
+}
+/**
+ *
+ * ⚠️⚠️⚠️ This is a debounced hook ⚠️⚠️⚠️
+ * If the plugins you are listening to generate multiple shared states while the user is typing,
+ * your React Component will get only the last one.
+ *
+ * Used to run effects on changes in editor state - similar to `useSharedPluginState` except this
+ * is for reacting to state changes so does not cause re-renders. The effect callback passed will be called
+ * on initialisation and when the state changes (with the latest callback we are provided).
+ *
+ * Example in plugin:
+ *
+ * ```typescript
+ * function ExampleContent({ api }: Props) {
+ *   const pluginStateCallback = useCallback(( { dogState, exampleState } ) => {
+ *       // Use as necessary ie. fire analytics or network requests
+ *       console.log(dogState, exampleState)
+ *   }, [])
+ *   usePluginStateEffect(
+ *     api,
+ *     ['dog', 'example'],
+ *     pluginStateCallback
+ *   )
+ *   return <p>Content</p>
+ * }
+ *
+ * const examplePlugin: NextEditorPlugin<'example', { dependencies: [typeof pluginDog] }> = ({ api }) => {
+ *   return {
+ *     name: 'example',
+ *     contentComponent: () =>
+ *       <ExampleContent
+ *         api={api}
+ *         />
+ *   }
+ * }
+ * ```
+ *
+ * @param injectionApi Plugin injection API from `NextEditorPlugin`
+ * @param plugins Plugin names to get the shared plugin state for
+ * @param effect A callback, the parameter is a corresponding object, the keys are names of the plugin with `State` appended,
+ * the values are the shared state exposed by that plugin. This effect fires when the state changes and runs the most recent callback passed.
+ * If the callback changes the effect is not re-run - it is still recommended however to wrap your effect in `useCallback`,
+ * You can return a function from your effect to call any cleanup activities which will be called on unmount and when `editorApi` changes.
+ */
+export function usePluginStateEffect(injectionApi, plugins, effect) {
+  var pluginNames = useStaticPlugins(plugins);
+
+  // Create a memoized object containing the named plugins
+  var namedExternalPlugins = useMemo(function () {
+    return pluginNames.reduce(function (acc, pluginName) {
+      return _objectSpread(_objectSpread({}, acc), {}, _defineProperty({}, "".concat(String(pluginName), "State"), injectionApi === null || injectionApi === void 0 ? void 0 : injectionApi[pluginName]));
+    }, {});
+  }, [injectionApi, pluginNames]);
+  usePluginStateEffectInternal(namedExternalPlugins, effect);
+}
+function usePluginStateEffectInternal(externalPlugins, effect) {
+  var refStates = useRef();
+  var cleanup = useRef();
+  var latestEffect = useRef(effect);
+
+  // We should store the latest effect in a reference so it is more intuitive to the user
+  // and we are not causing a memory leak by having references to old state.
+  useEffect(function () {
+    latestEffect.current = debounce(effect);
+    return function () {
+      latestEffect.current = undefined;
+    };
+  }, [effect]);
+  useLayoutEffect(function () {
+    var _latestEffect$current;
+    // Update the reference for this plugin and activate the effect
+    refStates.current = mapValues(externalPlugins, function (value) {
+      return value === null || value === void 0 ? void 0 : value.sharedState.currentState();
+    });
+    cleanup.current = (_latestEffect$current = latestEffect.current) === null || _latestEffect$current === void 0 ? void 0 : _latestEffect$current.call(latestEffect, refStates.current);
+    var unsubs = Object.entries(externalPlugins).map(function (_ref3) {
+      var _ref4 = _slicedToArray(_ref3, 2),
+        pluginKey = _ref4[0],
+        externalPlugin = _ref4[1];
+      return externalPlugin === null || externalPlugin === void 0 ? void 0 : externalPlugin.sharedState.onChange(function (_ref5) {
+        var nextSharedState = _ref5.nextSharedState,
+          prevSharedState = _ref5.prevSharedState;
+        if (prevSharedState !== nextSharedState && refStates.current) {
+          var _latestEffect$current2;
+          // Update the reference for this plugin and activate the effect
+          refStates.current[pluginKey] = nextSharedState;
+          cleanup.current = (_latestEffect$current2 = latestEffect.current) === null || _latestEffect$current2 === void 0 ? void 0 : _latestEffect$current2.call(latestEffect, refStates.current);
+        }
+      });
+    });
+    return function () {
+      var _cleanup$current;
+      refStates.current = undefined;
+      unsubs.forEach(function (cb) {
+        return cb === null || cb === void 0 ? void 0 : cb();
+      });
+      (_cleanup$current = cleanup.current) === null || _cleanup$current === void 0 || _cleanup$current.call(cleanup);
+    };
+    // Do not re-run if the `effect` changes - this is not expected with `useEffect` or similar hooks
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [externalPlugins]);
+}

package/dist/esm/monitoring/error.js

@@ -7,7 +7,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 import { isFedRamp } from './environment';
 var SENTRY_DSN = 'https://0b10c8e02fb44d8796c047b102c9bee8@o55978.ingest.sentry.io/4505129224110080';
 var packageName = 'editor-common'; // Sentry doesn't accept '/' in its releases https://docs.sentry.io/platforms/javascript/configuration/releases/
-var packageVersion = "94.20.0";
+var packageVersion = "94.22.0";
 var sanitiseSentryEvents = function sanitiseSentryEvents(data, _hint) {
   // Remove URL as it has UGC
   // TODO: Sanitise the URL instead of just removing it

package/dist/esm/preset/builder.js

@@ -4,6 +4,8 @@ import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import { EventDispatcher } from '../event-dispatcher';
+
 /*********************
  *                    *
  * BASE TYPES         *
@@ -530,14 +532,17 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
  * If your code is inside an EditorPlugin you should be using the @see ExtractInjectionAPI.
  */
 export var EditorPresetBuilder = /*#__PURE__*/function () {
-  /**
-   * Returns the editor API when resolved.
-   * This occurs when the preset is initially built.
-   */
-
   function EditorPresetBuilder() {
     var _this = this;
     _classCallCheck(this, EditorPresetBuilder);
+    /**
+     * @deprecated Use `apiResolver` instead
+     */
+    /**
+     * Returns the editor API when resolved.
+     * This occurs when the preset is initially built.
+     */
+    _defineProperty(this, "apiEmitter", function () {});
     _defineProperty(this, "safeEntry", function (plugin) {
       return Array.isArray(plugin) ? plugin : [plugin, undefined];
     });
@@ -548,6 +553,9 @@ export var EditorPresetBuilder = /*#__PURE__*/function () {
     this.apiPromise = new Promise(function (r) {
       return _this.resolver = r;
     });
+    this.apiResolver = new APIDispatcher(function (emitter) {
+      return _this.apiEmitter = emitter;
+    });
   }
   _createClass(EditorPresetBuilder, [{
     key: "add",
@@ -605,6 +613,8 @@ export var EditorPresetBuilder = /*#__PURE__*/function () {
         // The pluginInjectionAPI API doesn't have information enough to build a proper type for the API.
         // It is returning a generic type but on top of the Proxy system
         // So, we can safely recast it here
+        this.apiEmitter(pluginInjectionAPI.api());
+        // Deprecated approach
         (_this$resolver = this.resolver) === null || _this$resolver === void 0 || _this$resolver.call(this, pluginInjectionAPI.api());
       }
       return this.removeExcludedPlugins(editorPlugins, excludePlugins);
@@ -675,4 +685,58 @@ export var EditorPresetBuilder = /*#__PURE__*/function () {
     }
   }]);
   return EditorPresetBuilder;
+}();
+/**
+ * WARNING: Internal object
+ *
+ * Dedicated wrapper around EventDispatcher for public API around the editor API.
+ * This only has the public method `on` which is used to listen to updates to the editor API.
+ *
+ * This shouldn't really be used externally - the `editorAPI` should be accessed via `usePreset`.
+ */
+var APIDispatcher = /*#__PURE__*/function () {
+  function APIDispatcher(emitter) {
+    var _this3 = this;
+    _classCallCheck(this, APIDispatcher);
+    _defineProperty(this, "eventDispatcher", new EventDispatcher());
+    _defineProperty(this, "key", 'api-resolved-event');
+    // Need to store the last event created in case we subscribe after the fact
+    _defineProperty(this, "initialEvent", undefined);
+    this.emitter = emitter;
+    this.emitter(function (v) {
+      _this3.initialEvent = v;
+      _this3.eventDispatcher.emit(_this3.key, v);
+    });
+  }
+
+  /**
+   * Used to observe Editor API events
+   *
+   * @param cb Callback to listen to the editor API.
+   * This will also emit the last event if the stream has already started.
+   * @returns Cleanup function to cleanup the listener
+   */
+  _createClass(APIDispatcher, [{
+    key: "on",
+    value: function on(cb) {
+      var _this4 = this;
+      if (this.initialEvent !== undefined) {
+        // Keeps timing consistent with old approach - certain products
+        // ie. ai-mate relied on this.
+        Promise.resolve().then(function () {
+          return cb(_this4.initialEvent);
+        });
+      }
+      this.eventDispatcher.on(this.key, cb);
+      return function () {
+        _this4.eventDispatcher.off(_this4.key, cb);
+      };
+    }
+  }, {
+    key: "destroy",
+    value: function destroy() {
+      this.eventDispatcher.destroy();
+    }
+  }]);
+  return APIDispatcher;
 }();

package/dist/esm/ui/DropList/index.js

@@ -21,7 +21,7 @@ import withAnalyticsContext from '@atlaskit/analytics-next/withAnalyticsContext'
 import withAnalyticsEvents from '@atlaskit/analytics-next/withAnalyticsEvents';
 import Layer from '../Layer';
 var packageName = "@atlaskit/editor-common";
-var packageVersion = "94.20.0";
+var packageVersion = "94.22.0";
 var halfFocusRing = 1;
 var dropOffset = '0, 8';
 var DropList = /*#__PURE__*/function (_Component) {

package/dist/esm/utils/processRawValue.js

@@ -1,5 +1,5 @@
 import { transformDedupeMarks, transformIndentationMarks, transformInvalidMediaContent, transformMediaLinkMarks, transformNestedTablesIncomingDocument, transformNodesMissingContent, transformTextLinkCodeMarks } from '@atlaskit/adf-utils/transforms';
-import { Node } from '@atlaskit/editor-prosemirror/model';
+import { Fragment, Node } from '@atlaskit/editor-prosemirror/model';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { ACTION, ACTION_SUBJECT, EVENT_TYPE } from '../analytics';
 import { sanitizeNodeForPrivacy } from './filter/privacy-filter';
@@ -234,6 +234,20 @@ export function processRawValue(schema, value, providerFactory, sanitizePrivateC
     return;
   }
 }
+export function processRawFragmentValue(schema, value, providerFactory, sanitizePrivateContent, contentTransformer, dispatchAnalyticsEvent) {
+  if (!value) {
+    return;
+  }
+  var adfEntities = value.map(function (item) {
+    return processRawValue(schema, item, providerFactory, sanitizePrivateContent, contentTransformer, dispatchAnalyticsEvent);
+  }).filter(function (item) {
+    return Boolean(item);
+  });
+  if (adfEntities.length === 0) {
+    return;
+  }
+  return Fragment.from(adfEntities);
+}
 function isProseMirrorSchemaCheckError(error) {
   return error instanceof RangeError && (!!error.message.match(/^Invalid collection of marks for node/) || !!error.message.match(/^Invalid content for node/));
 }

package/dist/types/hooks/usePluginStateEffect.d.ts

@@ -0,0 +1,52 @@
+import type { BasePluginDependenciesAPI, EditorInjectionAPI, ExtractInjectionAPI, NextEditorPlugin } from '../types/next-editor-plugin';
+type NamedPluginStatesFromInjectionAPI<API extends ExtractInjectionAPI<NextEditorPlugin<any, any>>, PluginNames extends string | number | symbol> = Readonly<{
+    [K in PluginNames as `${K extends string ? K : never}State`]: API[K] extends BasePluginDependenciesAPI<any> | undefined ? ReturnType<API[K]['sharedState']['currentState']> : never;
+}>;
+type ExtractPluginNames<API extends EditorInjectionAPI<any, any>> = keyof API;
+type Cleanup = () => void;
+/**
+ *
+ * ⚠️⚠️⚠️ This is a debounced hook ⚠️⚠️⚠️
+ * If the plugins you are listening to generate multiple shared states while the user is typing,
+ * your React Component will get only the last one.
+ *
+ * Used to run effects on changes in editor state - similar to `useSharedPluginState` except this
+ * is for reacting to state changes so does not cause re-renders. The effect callback passed will be called
+ * on initialisation and when the state changes (with the latest callback we are provided).
+ *
+ * Example in plugin:
+ *
+ * ```typescript
+ * function ExampleContent({ api }: Props) {
+ *   const pluginStateCallback = useCallback(( { dogState, exampleState } ) => {
+ *       // Use as necessary ie. fire analytics or network requests
+ *       console.log(dogState, exampleState)
+ *   }, [])
+ *   usePluginStateEffect(
+ *     api,
+ *     ['dog', 'example'],
+ *     pluginStateCallback
+ *   )
+ *   return <p>Content</p>
+ * }
+ *
+ * const examplePlugin: NextEditorPlugin<'example', { dependencies: [typeof pluginDog] }> = ({ api }) => {
+ *   return {
+ *     name: 'example',
+ *     contentComponent: () =>
+ *       <ExampleContent
+ *         api={api}
+ *         />
+ *   }
+ * }
+ * ```
+ *
+ * @param injectionApi Plugin injection API from `NextEditorPlugin`
+ * @param plugins Plugin names to get the shared plugin state for
+ * @param effect A callback, the parameter is a corresponding object, the keys are names of the plugin with `State` appended,
+ * the values are the shared state exposed by that plugin. This effect fires when the state changes and runs the most recent callback passed.
+ * If the callback changes the effect is not re-run - it is still recommended however to wrap your effect in `useCallback`,
+ * You can return a function from your effect to call any cleanup activities which will be called on unmount and when `editorApi` changes.
+ */
+export declare function usePluginStateEffect<API extends EditorInjectionAPI<any, any>, PluginNames extends ExtractPluginNames<API>>(injectionApi: API | null | undefined, plugins: PluginNames[], effect: (states: NamedPluginStatesFromInjectionAPI<API, PluginNames>) => Cleanup | void): void;
+export {};

package/dist/types/preset/builder.d.ts

@@ -1,3 +1,4 @@
+import { type Listener } from '../event-dispatcher';
 import type { CorePlugin, DefaultEditorPlugin, DependencyPlugin, NextEditorPlugin, NextEditorPluginMetadata, OptionalPlugin, PluginDependenciesAPI } from '../types';
 import type { EditorPlugin } from '../types/editor-plugin';
 import type { EditorPluginInjectionAPI } from './plugin-injection-api';
@@ -553,11 +554,16 @@ type BuildProps = {
 export declare class EditorPresetBuilder<PluginNames extends AllPluginNames[] = [], StackPlugins extends AllEditorPresetPluginTypes[] = []> {
     private readonly data;
     /**
-     * Returns the editor API when resolved.
-     * This occurs when the preset is initially built.
+     * @deprecated Use `apiResolver` instead
      */
     apiPromise: Promise<unknown>;
     private resolver;
+    /**
+     * Returns the editor API when resolved.
+     * This occurs when the preset is initially built.
+     */
+    apiResolver: APIDispatcher;
+    private apiEmitter;
     constructor(...more: [...StackPlugins]);
     add<NewPlugin extends PresetPlugin>(nextOrTuple: SafePresetCheck<NewPlugin, StackPlugins>): EditorPresetBuilder<[
         ExtractPluginNameFromAllBuilderPlugins<NewPlugin>,
@@ -580,4 +586,29 @@ export declare class EditorPresetBuilder<PluginNames extends AllPluginNames[] =
     private removeExcludedPlugins;
     private safeEntry;
 }
+type Emitter = (value: unknown) => void;
+/**
+ * WARNING: Internal object
+ *
+ * Dedicated wrapper around EventDispatcher for public API around the editor API.
+ * This only has the public method `on` which is used to listen to updates to the editor API.
+ *
+ * This shouldn't really be used externally - the `editorAPI` should be accessed via `usePreset`.
+ */
+declare class APIDispatcher {
+    private emitter;
+    private eventDispatcher;
+    private key;
+    private initialEvent;
+    constructor(emitter: (emitter: Emitter) => void);
+    /**
+     * Used to observe Editor API events
+     *
+     * @param cb Callback to listen to the editor API.
+     * This will also emit the last event if the stream has already started.
+     * @returns Cleanup function to cleanup the listener
+     */
+    on(cb: Listener<unknown>): () => void;
+    destroy(): void;
+}
 export {};

package/dist/types/utils/processRawValue.d.ts

@@ -1,7 +1,7 @@
-import type { Schema } from '@atlaskit/editor-prosemirror/model';
-import { Node } from '@atlaskit/editor-prosemirror/model';
+import { Fragment, Node, type Schema } from '@atlaskit/editor-prosemirror/model';
 import type { DispatchAnalyticsEvent } from '../analytics';
 import type { ProviderFactory } from '../provider-factory';
 import type { ReplaceRawValue, Transformer } from '../types';
 export declare function processRawValueWithoutValidation(schema: Schema, value?: ReplaceRawValue, dispatchAnalyticsEvent?: DispatchAnalyticsEvent): Node | undefined;
 export declare function processRawValue(schema: Schema, value?: ReplaceRawValue, providerFactory?: ProviderFactory, sanitizePrivateContent?: boolean, contentTransformer?: Transformer<string>, dispatchAnalyticsEvent?: DispatchAnalyticsEvent): Node | undefined;
+export declare function processRawFragmentValue(schema: Schema, value?: ReplaceRawValue[], providerFactory?: ProviderFactory, sanitizePrivateContent?: boolean, contentTransformer?: Transformer<string>, dispatchAnalyticsEvent?: DispatchAnalyticsEvent): Fragment | undefined;

package/dist/types-ts4.5/hooks/usePluginStateEffect.d.ts

@@ -0,0 +1,52 @@
+import type { BasePluginDependenciesAPI, EditorInjectionAPI, ExtractInjectionAPI, NextEditorPlugin } from '../types/next-editor-plugin';
+type NamedPluginStatesFromInjectionAPI<API extends ExtractInjectionAPI<NextEditorPlugin<any, any>>, PluginNames extends string | number | symbol> = Readonly<{
+    [K in PluginNames as `${K extends string ? K : never}State`]: API[K] extends BasePluginDependenciesAPI<any> | undefined ? ReturnType<API[K]['sharedState']['currentState']> : never;
+}>;
+type ExtractPluginNames<API extends EditorInjectionAPI<any, any>> = keyof API;
+type Cleanup = () => void;
+/**
+ *
+ * ⚠️⚠️⚠️ This is a debounced hook ⚠️⚠️⚠️
+ * If the plugins you are listening to generate multiple shared states while the user is typing,
+ * your React Component will get only the last one.
+ *
+ * Used to run effects on changes in editor state - similar to `useSharedPluginState` except this
+ * is for reacting to state changes so does not cause re-renders. The effect callback passed will be called
+ * on initialisation and when the state changes (with the latest callback we are provided).
+ *
+ * Example in plugin:
+ *
+ * ```typescript
+ * function ExampleContent({ api }: Props) {
+ *   const pluginStateCallback = useCallback(( { dogState, exampleState } ) => {
+ *       // Use as necessary ie. fire analytics or network requests
+ *       console.log(dogState, exampleState)
+ *   }, [])
+ *   usePluginStateEffect(
+ *     api,
+ *     ['dog', 'example'],
+ *     pluginStateCallback
+ *   )
+ *   return <p>Content</p>
+ * }
+ *
+ * const examplePlugin: NextEditorPlugin<'example', { dependencies: [typeof pluginDog] }> = ({ api }) => {
+ *   return {
+ *     name: 'example',
+ *     contentComponent: () =>
+ *       <ExampleContent
+ *         api={api}
+ *         />
+ *   }
+ * }
+ * ```
+ *
+ * @param injectionApi Plugin injection API from `NextEditorPlugin`
+ * @param plugins Plugin names to get the shared plugin state for
+ * @param effect A callback, the parameter is a corresponding object, the keys are names of the plugin with `State` appended,
+ * the values are the shared state exposed by that plugin. This effect fires when the state changes and runs the most recent callback passed.
+ * If the callback changes the effect is not re-run - it is still recommended however to wrap your effect in `useCallback`,
+ * You can return a function from your effect to call any cleanup activities which will be called on unmount and when `editorApi` changes.
+ */
+export declare function usePluginStateEffect<API extends EditorInjectionAPI<any, any>, PluginNames extends ExtractPluginNames<API>>(injectionApi: API | null | undefined, plugins: PluginNames[], effect: (states: NamedPluginStatesFromInjectionAPI<API, PluginNames>) => Cleanup | void): void;
+export {};

package/dist/types-ts4.5/preset/builder.d.ts

@@ -1,3 +1,4 @@
+import { type Listener } from '../event-dispatcher';
 import type { CorePlugin, DefaultEditorPlugin, DependencyPlugin, NextEditorPlugin, NextEditorPluginMetadata, OptionalPlugin, PluginDependenciesAPI } from '../types';
 import type { EditorPlugin } from '../types/editor-plugin';
 import type { EditorPluginInjectionAPI } from './plugin-injection-api';
@@ -582,11 +583,16 @@ export declare class EditorPresetBuilder<PluginNames extends AllPluginNames[] =
 ]> {
     private readonly data;
     /**
-     * Returns the editor API when resolved.
-     * This occurs when the preset is initially built.
+     * @deprecated Use `apiResolver` instead
      */
     apiPromise: Promise<unknown>;
     private resolver;
+    /**
+     * Returns the editor API when resolved.
+     * This occurs when the preset is initially built.
+     */
+    apiResolver: APIDispatcher;
+    private apiEmitter;
     constructor(...more: [
         ...StackPlugins
     ]);
@@ -611,4 +617,29 @@ export declare class EditorPresetBuilder<PluginNames extends AllPluginNames[] =
     private removeExcludedPlugins;
     private safeEntry;
 }
+type Emitter = (value: unknown) => void;
+/**
+ * WARNING: Internal object
+ *
+ * Dedicated wrapper around EventDispatcher for public API around the editor API.
+ * This only has the public method `on` which is used to listen to updates to the editor API.
+ *
+ * This shouldn't really be used externally - the `editorAPI` should be accessed via `usePreset`.
+ */
+declare class APIDispatcher {
+    private emitter;
+    private eventDispatcher;
+    private key;
+    private initialEvent;
+    constructor(emitter: (emitter: Emitter) => void);
+    /**
+     * Used to observe Editor API events
+     *
+     * @param cb Callback to listen to the editor API.
+     * This will also emit the last event if the stream has already started.
+     * @returns Cleanup function to cleanup the listener
+     */
+    on(cb: Listener<unknown>): () => void;
+    destroy(): void;
+}
 export {};

package/dist/types-ts4.5/utils/processRawValue.d.ts

@@ -1,7 +1,7 @@
-import type { Schema } from '@atlaskit/editor-prosemirror/model';
-import { Node } from '@atlaskit/editor-prosemirror/model';
+import { Fragment, Node, type Schema } from '@atlaskit/editor-prosemirror/model';
 import type { DispatchAnalyticsEvent } from '../analytics';
 import type { ProviderFactory } from '../provider-factory';
 import type { ReplaceRawValue, Transformer } from '../types';
 export declare function processRawValueWithoutValidation(schema: Schema, value?: ReplaceRawValue, dispatchAnalyticsEvent?: DispatchAnalyticsEvent): Node | undefined;
 export declare function processRawValue(schema: Schema, value?: ReplaceRawValue, providerFactory?: ProviderFactory, sanitizePrivateContent?: boolean, contentTransformer?: Transformer<string>, dispatchAnalyticsEvent?: DispatchAnalyticsEvent): Node | undefined;
+export declare function processRawFragmentValue(schema: Schema, value?: ReplaceRawValue[], providerFactory?: ProviderFactory, sanitizePrivateContent?: boolean, contentTransformer?: Transformer<string>, dispatchAnalyticsEvent?: DispatchAnalyticsEvent): Fragment | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-common",
-	"version": "94.20.0",
+	"version": "94.22.0",
 	"description": "A package that contains common classes and components for editor and renderer",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -104,6 +104,7 @@
 		"./intl-error-boundary": "./src/ui/IntlErrorBoundary/index.tsx",
 		"./code-block": "./src/code-block/index.ts",
 		"./table": "./src/table/index.ts",
+		"./use-plugin-state-effect": "./src/hooks/usePluginStateEffect.ts",
 		"./lazy-node-view": "./src/lazy-node-view/index.ts",
 		"./nesting": "./src/nesting/utilities.ts",
 		"./UNSAFE_do_not_use_editor_context": "./src/ui/EditorContext/index.ts"
@@ -126,33 +127,33 @@
 		"@atlaskit/editor-prosemirror": "6.0.0",
 		"@atlaskit/editor-shared-styles": "^3.2.0",
 		"@atlaskit/editor-tables": "^2.8.0",
-		"@atlaskit/emoji": "^67.9.0",
+		"@atlaskit/emoji": "^67.10.0",
 		"@atlaskit/icon": "^22.24.0",
 		"@atlaskit/icon-object": "^6.7.0",
-		"@atlaskit/link-datasource": "^3.8.0",
+		"@atlaskit/link-datasource": "^3.10.0",
 		"@atlaskit/link-picker": "^1.47.0",
-		"@atlaskit/media-card": "^78.13.0",
+		"@atlaskit/media-card": "^78.14.0",
 		"@atlaskit/media-client": "^28.3.0",
 		"@atlaskit/media-client-react": "^2.3.0",
 		"@atlaskit/media-common": "^11.7.0",
 		"@atlaskit/media-file-preview": "^0.9.0",
 		"@atlaskit/media-picker": "^67.0.0",
 		"@atlaskit/media-ui": "^26.2.0",
-		"@atlaskit/media-viewer": "49.4.0",
-		"@atlaskit/mention": "^23.3.0",
+		"@atlaskit/media-viewer": "49.4.1",
+		"@atlaskit/mention": "^23.4.0",
 		"@atlaskit/menu": "^2.13.0",
 		"@atlaskit/onboarding": "^12.1.0",
 		"@atlaskit/platform-feature-flags": "^0.3.0",
 		"@atlaskit/popper": "^6.3.0",
-		"@atlaskit/primitives": "^13.1.0",
-		"@atlaskit/profilecard": "^20.11.0",
+		"@atlaskit/primitives": "^13.2.0",
+		"@atlaskit/profilecard": "^20.12.0",
 		"@atlaskit/section-message": "^6.6.0",
 		"@atlaskit/smart-card": "^30.2.0",
 		"@atlaskit/smart-user-picker": "^6.11.0",
 		"@atlaskit/spinner": "^16.3.0",
 		"@atlaskit/task-decision": "^17.11.0",
 		"@atlaskit/textfield": "^6.5.0",
-		"@atlaskit/tmp-editor-statsig": "^2.14.0",
+		"@atlaskit/tmp-editor-statsig": "^2.17.0",
 		"@atlaskit/tokens": "^2.2.0",
 		"@atlaskit/tooltip": "^18.9.0",
 		"@atlaskit/width-detector": "^4.3.0",

package/use-plugin-state-effect/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "@atlaskit/editor-common/use-plugin-state-effect",
+  "main": "../dist/cjs/hooks/usePluginStateEffect.js",
+  "module": "../dist/esm/hooks/usePluginStateEffect.js",
+  "module:es2019": "../dist/es2019/hooks/usePluginStateEffect.js",
+  "sideEffects": false,
+  "types": "../dist/types/hooks/usePluginStateEffect.d.ts",
+  "typesVersions": {
+    ">=4.5 <5.4": {
+      "*": [
+        "../dist/types-ts4.5/hooks/usePluginStateEffect.d.ts"
+      ]
+    }
+  }
+}