@atlaskit/editor-common 107.6.1 → 107.7.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/editor-common
 
+## 107.7.0
+
+### Minor Changes
+
+- [#182161](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/182161)
+  [`dcf2f7bd931a8`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/dcf2f7bd931a8) -
+  feat: add useSharedStateWithSelector to editor-common
+
+### Patch Changes
+
+- [#181781](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/181781)
+  [`e0060cc2c2eb7`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/e0060cc2c2eb7) -
+  ED-28417 Offline Editing: Update the type ahead error to clear on new requests, and make error
+  more generic.
+- Updated dependencies
+
 ## 107.6.1
 
 ### Patch Changes

package/dist/cjs/hooks/index.js

@@ -28,7 +28,14 @@ Object.defineProperty(exports, "useSharedPluginState", {
     return _useSharedPluginState.useSharedPluginState;
   }
 });
+Object.defineProperty(exports, "useSharedPluginStateWithSelector", {
+  enumerable: true,
+  get: function get() {
+    return _useSharedPluginStateWithSelector.useSharedPluginStateWithSelector;
+  }
+});
 var _usePreviousState = _interopRequireDefault(require("./usePreviousState"));
 var _useConstructor = _interopRequireDefault(require("./useConstructor"));
 var _useSharedPluginState = require("./useSharedPluginState");
-var _sharedPluginStateHookMigratorFactory = require("./sharedPluginStateHookMigratorFactory");
+var _sharedPluginStateHookMigratorFactory = require("./sharedPluginStateHookMigratorFactory");
+var _useSharedPluginStateWithSelector = require("./useSharedPluginStateWithSelector");

package/dist/cjs/hooks/useSharedPluginStateWithSelector.js

@@ -0,0 +1,171 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useSharedPluginStateWithSelector = useSharedPluginStateWithSelector;
+var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
+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; }
+// Ignored via go/ees005
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+
+/**
+ *
+ * Directly map object values
+ *
+ * @private
+ * @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 `useSharedPluginStateWithSelector` example: `useSharedPluginStateWithSelector(api, ['width'], selector)`
+// 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 return the current plugin state of input dependencies.
+ *
+ * @example
+ * Example in plugin:
+ *
+ * ```typescript
+ * function selector(states: NamedPluginStatesFromInjectionAPI<API, ['dog']>) {
+ *  return {
+ *   title: states.dogState?.title,
+ *  }
+ * }
+ *
+ * function ExampleContent({ api }: Props) {
+ *   const { title } = useSharedPluginStateWithSelector(
+ *     api,
+ *     ['dog'],
+ *     selector
+ *   )
+ *   return <p>{ title }</p>
+ * }
+ *
+ * ```
+ *
+ * @param injectionApi Plugin injection API from `NextEditorPlugin`
+ * @param plugins Plugin names to get the shared plugin state for
+ * @param selector A function that takes the shared states of the plugins and returns a subset of a plugin state.
+ * @returns A corresponding object, the keys are names of the plugin with `State` appended,
+ * the values are the shared state exposed by that plugin.
+ */
+function useSharedPluginStateWithSelector(injectionApi, plugins, selector) {
+  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]);
+  return useSharedPluginStateInternal(namedExternalPlugins, selector);
+}
+function useSharedPluginStateInternal(externalPlugins, selector) {
+  var refStates = (0, _react.useRef)(mapValues(externalPlugins, function (value) {
+    return value === null || value === void 0 ? void 0 : value.sharedState.currentState();
+  }));
+  var _useState = (0, _react.useState)(function () {
+      return selector(refStates.current);
+    }),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    pluginStates = _useState2[0],
+    setPluginState = _useState2[1];
+  var mounted = (0, _react.useRef)(false);
+  (0, _react.useLayoutEffect)(function () {
+    var debouncedPluginStateUpdate = (0, _debounce.default)(function () {
+      setPluginState(function (currentPluginStates) {
+        // This is to avoid changing behaviour of the hook when selector is not provided.
+        var nextStates = selector(_objectSpread({}, refStates.current));
+        if (shallowEqual(nextStates, currentPluginStates)) {
+          return currentPluginStates;
+        }
+        return nextStates;
+      });
+    });
+
+    // If we re-render this hook due to a change in the external
+    // plugins we need to push a state update to ensure we have
+    // the most current state.
+    if (mounted.current) {
+      refStates.current = mapValues(externalPlugins, function (value) {
+        return value === null || value === void 0 ? void 0 : value.sharedState.currentState();
+      });
+      debouncedPluginStateUpdate();
+    }
+    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) {
+          return;
+        }
+        refStates.current[pluginKey] = nextSharedState;
+        debouncedPluginStateUpdate();
+      });
+    });
+    mounted.current = true;
+    return function () {
+      refStates.current = {};
+      unsubs.forEach(function (cb) {
+        return cb === null || cb === void 0 ? void 0 : cb();
+      });
+    };
+    // Do not re-render due to state changes, we only need to check this when
+    // setting up the initial subscription.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [externalPlugins, selector]);
+  return pluginStates;
+}
+function shallowEqual(objA, objB) {
+  if (objA === objB) {
+    return true;
+  }
+  if ((0, _typeof2.default)(objA) !== 'object' || objA === null || (0, _typeof2.default)(objB) !== 'object' || objB === null) {
+    return false;
+  }
+  var keysA = Object.keys(objA);
+  var keysB = Object.keys(objB);
+  if (keysA.length !== keysB.length) {
+    return false;
+  }
+  for (var _i = 0, _keysA = keysA; _i < _keysA.length; _i++) {
+    var key = _keysA[_i];
+    if (objA[key] !== objB[key]) {
+      return false;
+    }
+  }
+  return true;
+}

package/dist/cjs/monitoring/error.js

@@ -16,7 +16,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 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); }
 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 = "107.6.0";
+var packageVersion = "107.6.1";
 var sanitiseSentryEvents = function sanitiseSentryEvents(data, _hint) {
   // Remove URL as it has UGC
   // Ignored via go/ees007

package/dist/cjs/type-ahead/messages.js

@@ -81,15 +81,15 @@ var typeAheadListMessages = exports.typeAheadListMessages = (0, _reactIntlNext.d
     defaultMessage: 'Text shortcut',
     description: 'Text shortcut'
   },
-  offlineErrorFallbackHeading: {
-    id: 'fabric.editor.offlineErrorFallbackHeading',
+  typeAheadErrorFallbackHeading: {
+    id: 'fabric.editor.typeAheadErrorFallbackHeading',
     defaultMessage: 'Something went wrong!',
-    description: 'heading for offline error fallback when mentions are not available'
+    description: 'Error message heading shown when typeahead items fail to load'
   },
-  offlineErrorFallbackDesc: {
-    id: 'fabric.editor.offlineErrorFallbackDescription',
-    defaultMessage: 'Try reloading the page.',
-    description: 'description for offline error fallback when mentions are not available'
+  typeAheadErrorFallbackDesc: {
+    id: 'fabric.editor.typeAheadErrorFallbackDescription',
+    defaultMessage: 'Please try again.',
+    description: 'Error message description shown when typeahead items fail to load'
   },
   viewAllInserts: {
     id: 'fablric.editor.viewAllInserts',

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

@@ -23,7 +23,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 = "107.6.0";
+var packageVersion = "107.6.1";
 var halfFocusRing = 1;
 var dropOffset = '0, 8';
 // Ignored via go/ees005

package/dist/es2019/hooks/index.js

@@ -4,4 +4,5 @@
 export { default as usePreviousState } from './usePreviousState';
 export { default as useConstructor } from './useConstructor';
 export { useSharedPluginState } from './useSharedPluginState';
-export { sharedPluginStateHookMigratorFactory } from './sharedPluginStateHookMigratorFactory';
+export { sharedPluginStateHookMigratorFactory } from './sharedPluginStateHookMigratorFactory';
+export { useSharedPluginStateWithSelector } from './useSharedPluginStateWithSelector';

package/dist/es2019/hooks/useSharedPluginStateWithSelector.js

@@ -0,0 +1,143 @@
+import { useLayoutEffect, useMemo, useRef, useState } from 'react';
+import debounce from 'lodash/debounce';
+
+// Ignored via go/ees005
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+
+/**
+ *
+ * Directly map object values
+ *
+ * @private
+ * @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 `useSharedPluginStateWithSelector` example: `useSharedPluginStateWithSelector(api, ['width'], selector)`
+// 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 return the current plugin state of input dependencies.
+ *
+ * @example
+ * Example in plugin:
+ *
+ * ```typescript
+ * function selector(states: NamedPluginStatesFromInjectionAPI<API, ['dog']>) {
+ *  return {
+ *   title: states.dogState?.title,
+ *  }
+ * }
+ *
+ * function ExampleContent({ api }: Props) {
+ *   const { title } = useSharedPluginStateWithSelector(
+ *     api,
+ *     ['dog'],
+ *     selector
+ *   )
+ *   return <p>{ title }</p>
+ * }
+ *
+ * ```
+ *
+ * @param injectionApi Plugin injection API from `NextEditorPlugin`
+ * @param plugins Plugin names to get the shared plugin state for
+ * @param selector A function that takes the shared states of the plugins and returns a subset of a plugin state.
+ * @returns A corresponding object, the keys are names of the plugin with `State` appended,
+ * the values are the shared state exposed by that plugin.
+ */
+export function useSharedPluginStateWithSelector(injectionApi, plugins, selector) {
+  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]);
+  return useSharedPluginStateInternal(namedExternalPlugins, selector);
+}
+function useSharedPluginStateInternal(externalPlugins, selector) {
+  const refStates = useRef(mapValues(externalPlugins, value => value === null || value === void 0 ? void 0 : value.sharedState.currentState()));
+  const [pluginStates, setPluginState] = useState(() => selector(refStates.current));
+  const mounted = useRef(false);
+  useLayoutEffect(() => {
+    const debouncedPluginStateUpdate = debounce(() => {
+      setPluginState(currentPluginStates => {
+        // This is to avoid changing behaviour of the hook when selector is not provided.
+        const nextStates = selector({
+          ...refStates.current
+        });
+        if (shallowEqual(nextStates, currentPluginStates)) {
+          return currentPluginStates;
+        }
+        return nextStates;
+      });
+    });
+
+    // If we re-render this hook due to a change in the external
+    // plugins we need to push a state update to ensure we have
+    // the most current state.
+    if (mounted.current) {
+      refStates.current = mapValues(externalPlugins, value => value === null || value === void 0 ? void 0 : value.sharedState.currentState());
+      debouncedPluginStateUpdate();
+    }
+    const unsubs = Object.entries(externalPlugins).map(([pluginKey, externalPlugin]) => {
+      return externalPlugin === null || externalPlugin === void 0 ? void 0 : externalPlugin.sharedState.onChange(({
+        nextSharedState,
+        prevSharedState
+      }) => {
+        if (prevSharedState === nextSharedState) {
+          return;
+        }
+        refStates.current[pluginKey] = nextSharedState;
+        debouncedPluginStateUpdate();
+      });
+    });
+    mounted.current = true;
+    return () => {
+      refStates.current = {};
+      unsubs.forEach(cb => cb === null || cb === void 0 ? void 0 : cb());
+    };
+    // Do not re-render due to state changes, we only need to check this when
+    // setting up the initial subscription.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [externalPlugins, selector]);
+  return pluginStates;
+}
+function shallowEqual(objA, objB) {
+  if (objA === objB) {
+    return true;
+  }
+  if (typeof objA !== 'object' || objA === null || typeof objB !== 'object' || objB === null) {
+    return false;
+  }
+  const keysA = Object.keys(objA);
+  const keysB = Object.keys(objB);
+  if (keysA.length !== keysB.length) {
+    return false;
+  }
+  for (const key of keysA) {
+    if (objA[key] !== objB[key]) {
+      return false;
+    }
+  }
+  return true;
+}

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 = "107.6.0";
+const packageVersion = "107.6.1";
 const sanitiseSentryEvents = (data, _hint) => {
   // Remove URL as it has UGC
   // Ignored via go/ees007

package/dist/es2019/type-ahead/messages.js

@@ -75,15 +75,15 @@ export const typeAheadListMessages = defineMessages({
     defaultMessage: 'Text shortcut',
     description: 'Text shortcut'
   },
-  offlineErrorFallbackHeading: {
-    id: 'fabric.editor.offlineErrorFallbackHeading',
+  typeAheadErrorFallbackHeading: {
+    id: 'fabric.editor.typeAheadErrorFallbackHeading',
     defaultMessage: 'Something went wrong!',
-    description: 'heading for offline error fallback when mentions are not available'
+    description: 'Error message heading shown when typeahead items fail to load'
   },
-  offlineErrorFallbackDesc: {
-    id: 'fabric.editor.offlineErrorFallbackDescription',
-    defaultMessage: 'Try reloading the page.',
-    description: 'description for offline error fallback when mentions are not available'
+  typeAheadErrorFallbackDesc: {
+    id: 'fabric.editor.typeAheadErrorFallbackDescription',
+    defaultMessage: 'Please try again.',
+    description: 'Error message description shown when typeahead items fail to load'
   },
   viewAllInserts: {
     id: 'fablric.editor.viewAllInserts',

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 = "107.6.0";
+const packageVersion = "107.6.1";
 const halfFocusRing = 1;
 const dropOffset = '0, 8';
 // Ignored via go/ees005

package/dist/esm/hooks/index.js

@@ -4,4 +4,5 @@
 export { default as usePreviousState } from './usePreviousState';
 export { default as useConstructor } from './useConstructor';
 export { useSharedPluginState } from './useSharedPluginState';
-export { sharedPluginStateHookMigratorFactory } from './sharedPluginStateHookMigratorFactory';
+export { sharedPluginStateHookMigratorFactory } from './sharedPluginStateHookMigratorFactory';
+export { useSharedPluginStateWithSelector } from './useSharedPluginStateWithSelector';

package/dist/esm/hooks/useSharedPluginStateWithSelector.js

@@ -0,0 +1,165 @@
+import _typeof from "@babel/runtime/helpers/typeof";
+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 { useLayoutEffect, useMemo, useRef, useState } from 'react';
+import debounce from 'lodash/debounce';
+
+// Ignored via go/ees005
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+
+/**
+ *
+ * Directly map object values
+ *
+ * @private
+ * @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 `useSharedPluginStateWithSelector` example: `useSharedPluginStateWithSelector(api, ['width'], selector)`
+// 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 return the current plugin state of input dependencies.
+ *
+ * @example
+ * Example in plugin:
+ *
+ * ```typescript
+ * function selector(states: NamedPluginStatesFromInjectionAPI<API, ['dog']>) {
+ *  return {
+ *   title: states.dogState?.title,
+ *  }
+ * }
+ *
+ * function ExampleContent({ api }: Props) {
+ *   const { title } = useSharedPluginStateWithSelector(
+ *     api,
+ *     ['dog'],
+ *     selector
+ *   )
+ *   return <p>{ title }</p>
+ * }
+ *
+ * ```
+ *
+ * @param injectionApi Plugin injection API from `NextEditorPlugin`
+ * @param plugins Plugin names to get the shared plugin state for
+ * @param selector A function that takes the shared states of the plugins and returns a subset of a plugin state.
+ * @returns A corresponding object, the keys are names of the plugin with `State` appended,
+ * the values are the shared state exposed by that plugin.
+ */
+export function useSharedPluginStateWithSelector(injectionApi, plugins, selector) {
+  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]);
+  return useSharedPluginStateInternal(namedExternalPlugins, selector);
+}
+function useSharedPluginStateInternal(externalPlugins, selector) {
+  var refStates = useRef(mapValues(externalPlugins, function (value) {
+    return value === null || value === void 0 ? void 0 : value.sharedState.currentState();
+  }));
+  var _useState = useState(function () {
+      return selector(refStates.current);
+    }),
+    _useState2 = _slicedToArray(_useState, 2),
+    pluginStates = _useState2[0],
+    setPluginState = _useState2[1];
+  var mounted = useRef(false);
+  useLayoutEffect(function () {
+    var debouncedPluginStateUpdate = debounce(function () {
+      setPluginState(function (currentPluginStates) {
+        // This is to avoid changing behaviour of the hook when selector is not provided.
+        var nextStates = selector(_objectSpread({}, refStates.current));
+        if (shallowEqual(nextStates, currentPluginStates)) {
+          return currentPluginStates;
+        }
+        return nextStates;
+      });
+    });
+
+    // If we re-render this hook due to a change in the external
+    // plugins we need to push a state update to ensure we have
+    // the most current state.
+    if (mounted.current) {
+      refStates.current = mapValues(externalPlugins, function (value) {
+        return value === null || value === void 0 ? void 0 : value.sharedState.currentState();
+      });
+      debouncedPluginStateUpdate();
+    }
+    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) {
+          return;
+        }
+        refStates.current[pluginKey] = nextSharedState;
+        debouncedPluginStateUpdate();
+      });
+    });
+    mounted.current = true;
+    return function () {
+      refStates.current = {};
+      unsubs.forEach(function (cb) {
+        return cb === null || cb === void 0 ? void 0 : cb();
+      });
+    };
+    // Do not re-render due to state changes, we only need to check this when
+    // setting up the initial subscription.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [externalPlugins, selector]);
+  return pluginStates;
+}
+function shallowEqual(objA, objB) {
+  if (objA === objB) {
+    return true;
+  }
+  if (_typeof(objA) !== 'object' || objA === null || _typeof(objB) !== 'object' || objB === null) {
+    return false;
+  }
+  var keysA = Object.keys(objA);
+  var keysB = Object.keys(objB);
+  if (keysA.length !== keysB.length) {
+    return false;
+  }
+  for (var _i = 0, _keysA = keysA; _i < _keysA.length; _i++) {
+    var key = _keysA[_i];
+    if (objA[key] !== objB[key]) {
+      return false;
+    }
+  }
+  return true;
+}

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 = "107.6.0";
+var packageVersion = "107.6.1";
 var sanitiseSentryEvents = function sanitiseSentryEvents(data, _hint) {
   // Remove URL as it has UGC
   // Ignored via go/ees007

package/dist/esm/type-ahead/messages.js

@@ -75,15 +75,15 @@ export var typeAheadListMessages = defineMessages({
     defaultMessage: 'Text shortcut',
     description: 'Text shortcut'
   },
-  offlineErrorFallbackHeading: {
-    id: 'fabric.editor.offlineErrorFallbackHeading',
+  typeAheadErrorFallbackHeading: {
+    id: 'fabric.editor.typeAheadErrorFallbackHeading',
     defaultMessage: 'Something went wrong!',
-    description: 'heading for offline error fallback when mentions are not available'
+    description: 'Error message heading shown when typeahead items fail to load'
   },
-  offlineErrorFallbackDesc: {
-    id: 'fabric.editor.offlineErrorFallbackDescription',
-    defaultMessage: 'Try reloading the page.',
-    description: 'description for offline error fallback when mentions are not available'
+  typeAheadErrorFallbackDesc: {
+    id: 'fabric.editor.typeAheadErrorFallbackDescription',
+    defaultMessage: 'Please try again.',
+    description: 'Error message description shown when typeahead items fail to load'
   },
   viewAllInserts: {
     id: 'fablric.editor.viewAllInserts',

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

@@ -20,7 +20,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 = "107.6.0";
+var packageVersion = "107.6.1";
 var halfFocusRing = 1;
 var dropOffset = '0, 8';
 // Ignored via go/ees005

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

@@ -2,3 +2,4 @@ export { default as usePreviousState } from './usePreviousState';
 export { default as useConstructor } from './useConstructor';
 export { useSharedPluginState } from './useSharedPluginState';
 export { sharedPluginStateHookMigratorFactory } from './sharedPluginStateHookMigratorFactory';
+export { useSharedPluginStateWithSelector, type NamedPluginStatesFromInjectionAPI, } from './useSharedPluginStateWithSelector';

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

@@ -0,0 +1,41 @@
+import type { BasePluginDependenciesAPI, EditorInjectionAPI, ExtractInjectionAPI, ExtractPluginSharedState, NextEditorPlugin, NextEditorPluginMetadata } from '../types/next-editor-plugin';
+export 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 ? Exclude<API[K], undefined> extends BasePluginDependenciesAPI<infer Metadata> ? Metadata extends NextEditorPluginMetadata ? ExtractPluginSharedState<Metadata> | undefined : never : never : never;
+}>;
+export type ExtractPluginNames<API extends EditorInjectionAPI<any, any>> = keyof API;
+/**
+ *
+ * ⚠️⚠️⚠️ 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 return the current plugin state of input dependencies.
+ *
+ * @example
+ * Example in plugin:
+ *
+ * ```typescript
+ * function selector(states: NamedPluginStatesFromInjectionAPI<API, ['dog']>) {
+ *  return {
+ *   title: states.dogState?.title,
+ *  }
+ * }
+ *
+ * function ExampleContent({ api }: Props) {
+ *   const { title } = useSharedPluginStateWithSelector(
+ *     api,
+ *     ['dog'],
+ *     selector
+ *   )
+ *   return <p>{ title }</p>
+ * }
+ *
+ * ```
+ *
+ * @param injectionApi Plugin injection API from `NextEditorPlugin`
+ * @param plugins Plugin names to get the shared plugin state for
+ * @param selector A function that takes the shared states of the plugins and returns a subset of a plugin state.
+ * @returns A corresponding object, the keys are names of the plugin with `State` appended,
+ * the values are the shared state exposed by that plugin.
+ */
+export declare function useSharedPluginStateWithSelector<API extends EditorInjectionAPI<any, any>, PluginNames extends ExtractPluginNames<API>, PluginStates extends NamedPluginStatesFromInjectionAPI<API, PluginNames>, SelectorResult>(injectionApi: API | null | undefined, plugins: PluginNames[], selector: (states: PluginStates) => SelectorResult): SelectorResult;

package/dist/types/type-ahead/messages.d.ts

@@ -74,12 +74,12 @@ export declare const typeAheadListMessages: {
         defaultMessage: string;
         description: string;
     };
-    offlineErrorFallbackHeading: {
+    typeAheadErrorFallbackHeading: {
         id: string;
         defaultMessage: string;
         description: string;
     };
-    offlineErrorFallbackDesc: {
+    typeAheadErrorFallbackDesc: {
         id: string;
         defaultMessage: string;
         description: string;

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

@@ -2,3 +2,4 @@ export { default as usePreviousState } from './usePreviousState';
 export { default as useConstructor } from './useConstructor';
 export { useSharedPluginState } from './useSharedPluginState';
 export { sharedPluginStateHookMigratorFactory } from './sharedPluginStateHookMigratorFactory';
+export { useSharedPluginStateWithSelector, type NamedPluginStatesFromInjectionAPI, } from './useSharedPluginStateWithSelector';

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

@@ -0,0 +1,41 @@
+import type { BasePluginDependenciesAPI, EditorInjectionAPI, ExtractInjectionAPI, ExtractPluginSharedState, NextEditorPlugin, NextEditorPluginMetadata } from '../types/next-editor-plugin';
+export 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 ? Exclude<API[K], undefined> extends BasePluginDependenciesAPI<infer Metadata> ? Metadata extends NextEditorPluginMetadata ? ExtractPluginSharedState<Metadata> | undefined : never : never : never;
+}>;
+export type ExtractPluginNames<API extends EditorInjectionAPI<any, any>> = keyof API;
+/**
+ *
+ * ⚠️⚠️⚠️ 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 return the current plugin state of input dependencies.
+ *
+ * @example
+ * Example in plugin:
+ *
+ * ```typescript
+ * function selector(states: NamedPluginStatesFromInjectionAPI<API, ['dog']>) {
+ *  return {
+ *   title: states.dogState?.title,
+ *  }
+ * }
+ *
+ * function ExampleContent({ api }: Props) {
+ *   const { title } = useSharedPluginStateWithSelector(
+ *     api,
+ *     ['dog'],
+ *     selector
+ *   )
+ *   return <p>{ title }</p>
+ * }
+ *
+ * ```
+ *
+ * @param injectionApi Plugin injection API from `NextEditorPlugin`
+ * @param plugins Plugin names to get the shared plugin state for
+ * @param selector A function that takes the shared states of the plugins and returns a subset of a plugin state.
+ * @returns A corresponding object, the keys are names of the plugin with `State` appended,
+ * the values are the shared state exposed by that plugin.
+ */
+export declare function useSharedPluginStateWithSelector<API extends EditorInjectionAPI<any, any>, PluginNames extends ExtractPluginNames<API>, PluginStates extends NamedPluginStatesFromInjectionAPI<API, PluginNames>, SelectorResult>(injectionApi: API | null | undefined, plugins: PluginNames[], selector: (states: PluginStates) => SelectorResult): SelectorResult;

package/dist/types-ts4.5/type-ahead/messages.d.ts

@@ -74,12 +74,12 @@ export declare const typeAheadListMessages: {
         defaultMessage: string;
         description: string;
     };
-    offlineErrorFallbackHeading: {
+    typeAheadErrorFallbackHeading: {
         id: string;
         defaultMessage: string;
         description: string;
     };
-    offlineErrorFallbackDesc: {
+    typeAheadErrorFallbackDesc: {
         id: string;
         defaultMessage: string;
         description: string;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-common",
-	"version": "107.6.1",
+	"version": "107.7.0",
 	"description": "A package that contains common classes and components for editor and renderer",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -169,7 +169,7 @@
 		"@atlaskit/task-decision": "^19.2.0",
 		"@atlaskit/textfield": "^8.0.0",
 		"@atlaskit/theme": "^18.0.0",
-		"@atlaskit/tmp-editor-statsig": "^8.7.0",
+		"@atlaskit/tmp-editor-statsig": "^8.8.0",
 		"@atlaskit/tokens": "^5.4.0",
 		"@atlaskit/tooltip": "^20.3.0",
 		"@atlaskit/width-detector": "^5.0.0",