@atlaskit/editor-common 94.20.0 → 94.21.0

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @atlaskit/editor-common
 
+## 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.21.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/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.21.0";
 var halfFocusRing = 1;
 var dropOffset = '0, 8';
 var DropList = /*#__PURE__*/function (_Component) {

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.21.0";
 const sanitiseSentryEvents = (data, _hint) => {
   // Remove URL as it has UGC
   // TODO: Sanitise the URL instead of just removing it

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.21.0";
 const halfFocusRing = 1;
 const dropOffset = '0, 8';
 class DropList extends Component {

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.21.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/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.21.0";
 var halfFocusRing = 1;
 var dropOffset = '0, 8';
 var DropList = /*#__PURE__*/function (_Component) {

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-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/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-common",
-	"version": "94.20.0",
+	"version": "94.21.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"
@@ -129,30 +130,30 @@
 		"@atlaskit/emoji": "^67.9.0",
 		"@atlaskit/icon": "^22.24.0",
 		"@atlaskit/icon-object": "^6.7.0",
-		"@atlaskit/link-datasource": "^3.8.0",
+		"@atlaskit/link-datasource": "^3.9.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/media-viewer": "49.4.1",
 		"@atlaskit/mention": "^23.3.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.15.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"
+      ]
+    }
+  }
+}