@atlaskit/editor-common 96.4.0 → 96.5.0

package/dist/esm/with-plugin-state/index.js

@@ -1,14 +1,13 @@
-import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _extends from "@babel/runtime/helpers/extends";
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
-import _inherits from "@babel/runtime/helpers/inherits";
 import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
+import _inherits from "@babel/runtime/helpers/inherits";
 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; }
-function _createSuper(t) { var r = _isNativeReflectConstruct(); return function () { var e, o = _getPrototypeOf(t); if (r) { var s = _getPrototypeOf(this).constructor; e = Reflect.construct(o, arguments, s); } else e = o.apply(this, arguments); return _possibleConstructorReturn(this, e); }; }
+function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 import React from 'react';
 import PropTypes from 'prop-types';
@@ -62,13 +61,12 @@ var DEFAULT_SLOW_THRESHOLD = 4;
  *
  */
 var WithPluginState = /*#__PURE__*/function (_React$Component) {
-  _inherits(WithPluginState, _React$Component);
-  var _super = _createSuper(WithPluginState);
   function WithPluginState(props) {
     _classCallCheck(this, WithPluginState);
-    return _super.call(this, props);
+    return _callSuper(this, WithPluginState, [props]);
   }
-  _createClass(WithPluginState, [{
+  _inherits(WithPluginState, _React$Component);
+  return _createClass(WithPluginState, [{
     key: "render",
     value: function render() {
       if (fg('platform_editor_react18_phase2_v2')) {
@@ -77,7 +75,6 @@ var WithPluginState = /*#__PURE__*/function (_React$Component) {
       return /*#__PURE__*/React.createElement(WithPluginStateOld, this.props);
     }
   }]);
-  return WithPluginState;
 }(React.Component);
 function WithPluginStateNew(props) {
   var context = React.useContext(EditorContext);
@@ -86,18 +83,16 @@ function WithPluginStateNew(props) {
   }));
 }
 export var WithPluginStateInner = /*#__PURE__*/function (_React$Component2) {
-  _inherits(WithPluginStateInner, _React$Component2);
-  var _super2 = _createSuper(WithPluginStateInner);
   function WithPluginStateInner(props) {
     var _this;
     _classCallCheck(this, WithPluginStateInner);
-    _this = _super2.call(this, props);
-    _defineProperty(_assertThisInitialized(_this), "listeners", {});
-    _defineProperty(_assertThisInitialized(_this), "debounce", null);
-    _defineProperty(_assertThisInitialized(_this), "notAppliedState", {});
-    _defineProperty(_assertThisInitialized(_this), "isSubscribed", false);
-    _defineProperty(_assertThisInitialized(_this), "callsCount", 0);
-    _defineProperty(_assertThisInitialized(_this), "handlePluginStateChange", function (propName, pluginName, performanceOptions, skipEqualityCheck) {
+    _this = _callSuper(this, WithPluginStateInner, [props]);
+    _defineProperty(_this, "listeners", {});
+    _defineProperty(_this, "debounce", null);
+    _defineProperty(_this, "notAppliedState", {});
+    _defineProperty(_this, "isSubscribed", false);
+    _defineProperty(_this, "callsCount", 0);
+    _defineProperty(_this, "handlePluginStateChange", function (propName, pluginName, performanceOptions, skipEqualityCheck) {
       return function (pluginState) {
         // skipEqualityCheck is being used for old plugins since they are mutating plugin state instead of creating a new one
         if (_this.state[propName] !== pluginState || skipEqualityCheck) {
@@ -112,7 +107,7 @@ export var WithPluginStateInner = /*#__PURE__*/function (_React$Component2) {
     /**
      * Debounces setState calls in order to reduce number of re-renders caused by several plugin state changes.
      */
-    _defineProperty(_assertThisInitialized(_this), "updateState", function (_ref) {
+    _defineProperty(_this, "updateState", function (_ref) {
       var stateSubset = _ref.stateSubset,
         pluginName = _ref.pluginName,
         performanceOptions = _ref.performanceOptions;
@@ -148,7 +143,7 @@ export var WithPluginStateInner = /*#__PURE__*/function (_React$Component2) {
         _this.notAppliedState = {};
       });
     });
-    _defineProperty(_assertThisInitialized(_this), "dispatchAnalyticsEvent", function (payload) {
+    _defineProperty(_this, "dispatchAnalyticsEvent", function (payload) {
       var eventDispatcher = _this.getEventDispatcher();
       if (eventDispatcher) {
         var dispatch = createDispatch(eventDispatcher);
@@ -160,7 +155,8 @@ export var WithPluginStateInner = /*#__PURE__*/function (_React$Component2) {
     _this.state = _this.getPluginsStates(_this.props.plugins, _this.getEditorView(props));
     return _this;
   }
-  _createClass(WithPluginStateInner, [{
+  _inherits(WithPluginStateInner, _React$Component2);
+  return _createClass(WithPluginStateInner, [{
     key: "getEditorView",
     value: function getEditorView(maybeProps) {
       var props = maybeProps || this.props;
@@ -310,22 +306,19 @@ export var WithPluginStateInner = /*#__PURE__*/function (_React$Component2) {
       return render(this.state);
     }
   }]);
-  return WithPluginStateInner;
 }(React.Component);
 _defineProperty(WithPluginStateInner, "displayName", 'WithPluginState');
 export var WithPluginStateOld = /*#__PURE__*/function (_React$Component3) {
-  _inherits(WithPluginStateOld, _React$Component3);
-  var _super3 = _createSuper(WithPluginStateOld);
   function WithPluginStateOld(props, context) {
     var _this6;
     _classCallCheck(this, WithPluginStateOld);
-    _this6 = _super3.call(this, props, context);
-    _defineProperty(_assertThisInitialized(_this6), "listeners", {});
-    _defineProperty(_assertThisInitialized(_this6), "debounce", null);
-    _defineProperty(_assertThisInitialized(_this6), "notAppliedState", {});
-    _defineProperty(_assertThisInitialized(_this6), "isSubscribed", false);
-    _defineProperty(_assertThisInitialized(_this6), "callsCount", 0);
-    _defineProperty(_assertThisInitialized(_this6), "handlePluginStateChange", function (propName, pluginName, performanceOptions, skipEqualityCheck) {
+    _this6 = _callSuper(this, WithPluginStateOld, [props, context]);
+    _defineProperty(_this6, "listeners", {});
+    _defineProperty(_this6, "debounce", null);
+    _defineProperty(_this6, "notAppliedState", {});
+    _defineProperty(_this6, "isSubscribed", false);
+    _defineProperty(_this6, "callsCount", 0);
+    _defineProperty(_this6, "handlePluginStateChange", function (propName, pluginName, performanceOptions, skipEqualityCheck) {
       return function (pluginState) {
         // skipEqualityCheck is being used for old plugins since they are mutating plugin state instead of creating a new one
         if (_this6.state[propName] !== pluginState || skipEqualityCheck) {
@@ -340,7 +333,7 @@ export var WithPluginStateOld = /*#__PURE__*/function (_React$Component3) {
     /**
      * Debounces setState calls in order to reduce number of re-renders caused by several plugin state changes.
      */
-    _defineProperty(_assertThisInitialized(_this6), "updateState", function (_ref2) {
+    _defineProperty(_this6, "updateState", function (_ref2) {
       var stateSubset = _ref2.stateSubset,
         pluginName = _ref2.pluginName,
         performanceOptions = _ref2.performanceOptions;
@@ -376,7 +369,7 @@ export var WithPluginStateOld = /*#__PURE__*/function (_React$Component3) {
         _this6.notAppliedState = {};
       });
     });
-    _defineProperty(_assertThisInitialized(_this6), "dispatchAnalyticsEvent", function (payload) {
+    _defineProperty(_this6, "dispatchAnalyticsEvent", function (payload) {
       var eventDispatcher = _this6.getEventDispatcher();
       if (eventDispatcher) {
         var dispatch = createDispatch(eventDispatcher);
@@ -385,13 +378,14 @@ export var WithPluginStateOld = /*#__PURE__*/function (_React$Component3) {
         });
       }
     });
-    _defineProperty(_assertThisInitialized(_this6), "onContextUpdate", function () {
+    _defineProperty(_this6, "onContextUpdate", function () {
       _this6.subscribe(_this6.props);
     });
     _this6.state = _this6.getPluginsStates(_this6.props.plugins, _this6.getEditorView(props, context));
     return _this6;
   }
-  _createClass(WithPluginStateOld, [{
+  _inherits(WithPluginStateOld, _React$Component3);
+  return _createClass(WithPluginStateOld, [{
     key: "getEditorView",
     value: function getEditorView(maybeProps, maybeContext) {
       var props = maybeProps || this.props;
@@ -536,7 +530,6 @@ export var WithPluginStateOld = /*#__PURE__*/function (_React$Component3) {
       return render(this.state);
     }
   }]);
-  return WithPluginStateOld;
 }(React.Component);
 _defineProperty(WithPluginStateOld, "displayName", 'WithPluginState');
 _defineProperty(WithPluginStateOld, "contextTypes", {

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

@@ -1,9 +1,12 @@
 import type { BasePluginDependenciesAPI, EditorInjectionAPI, ExtractInjectionAPI, ExtractPluginSharedState, NextEditorPlugin, NextEditorPluginMetadata } from '../types/next-editor-plugin';
-type NamedPluginStatesFromInjectionAPI<API extends ExtractInjectionAPI<NextEditorPlugin<any, any>>, PluginNames extends string | number | symbol> = Readonly<{
+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;
 }>;
-type ExtractPluginNames<API extends EditorInjectionAPI<any, any>> = keyof API;
+export type ExtractPluginNames<API extends EditorInjectionAPI<any, any>> = keyof API;
 /**
+ *
+ * NOTE: Generally you may want to use `usePluginStateSelector` over this which behaves similarly
+ * but selects a slice of the state which is more performant.
  *
  * ⚠️⚠️⚠️ This is a debounced hook ⚠️⚠️⚠️
  * If the plugins you are listening to generate multiple shared states while the user is typing,
@@ -65,4 +68,3 @@ type ExtractPluginNames<API extends EditorInjectionAPI<any, any>> = keyof API;
  * the values are the shared state exposed by that plugin.
  */
 export declare function useSharedPluginState<API extends EditorInjectionAPI<any, any>, PluginNames extends ExtractPluginNames<API>>(injectionApi: API | null | undefined, plugins: PluginNames[]): NamedPluginStatesFromInjectionAPI<API, PluginNames>;
-export {};

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

@@ -0,0 +1 @@
+export { useSharedPluginStateSelector } from './useSharedPluginStateSelector';

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

@@ -0,0 +1,74 @@
+import type { EditorInjectionAPI } from '../../types/next-editor-plugin';
+type ExtractPluginNames<API extends EditorInjectionAPI<any, any>> = keyof API extends string ? keyof API : never;
+/**
+ * This is designed to iterate through an object to get the path of its result
+ * based on separation via "."
+ *
+ * Example:
+ * ```typescript
+ * type Test = { deepObject: { value: number } };
+ * // Type should be `"deepObject" | "deepObject.value"`
+ * type Result = NestedKeys<Test>;
+ * ```
+ */
+type NestedKeys<T> = {
+    [K in keyof T]: T[K] extends object ? T[K] extends any[] ? K extends string ? K : never : T[K] extends object ? K extends string ? K | `${K}.${NestedKeys<T[K]>}` : never : never : K extends string ? K : never;
+}[keyof T];
+/**
+ * This is designed to iterate through a path of an object to get the type of its result
+ * based on separation via "."
+ *
+ * Example:
+ * ```typescript
+ * type Test = { deepObject: { value: number } }
+ * // Type should be `number`
+ * type Result = Path<Test, 'deepObject.value'>
+ * ```
+ */
+type Path<T, K extends string> = K extends `${infer Key}.${infer Rest}` ? Key extends keyof T ? Path<T[Key], Rest> : never : K extends keyof T ? T[K] : never;
+/**
+ *
+ * ⚠️⚠️⚠️ 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.
+ * It will recursively retrieve a slice of the state using a "." to separate
+ * parts of the state.
+ *
+ * Example:
+ *
+ * ```typescript
+ * 	const pluginA: NextEditorPlugin<
+        'pluginA',
+        {
+            sharedState: { deepObj: { value: number | undefined } };
+        }
+    >
+ * ```
+ * You can use `const value = useSharedPluginStateSelector(api, 'pluginA.deepObj.value')` to retrieve the value
+ *
+ * Example in plugin:
+ *
+ * ```typescript
+ * function ExampleContent({ api }: Props) {
+ *   const title = useSharedPluginStateSelector(api, 'dog.title')
+ *   return <p>{ title } { exampleState.description }</p>
+ * }
+ *
+ * const examplePlugin: NextEditorPlugin<'example', { dependencies: [typeof pluginDog] }> = ({ api }) => {
+ *   return {
+ *     name: 'example',
+ *     contentComponent: () => <ExampleContent api={api} />
+ *   }
+ * }
+ * ```
+ *
+ * NOTE: If you pass an invalid path, `undefined` will be returned
+ *
+ * @param api
+ * @param plugin
+ * @returns
+ */
+export declare function useSharedPluginStateSelector<API extends EditorInjectionAPI<any, any>, PluginName extends ExtractPluginNames<API>, SharedState extends ReturnType<Exclude<API[PluginName], null | undefined>['sharedState']['currentState']>, Key extends NestedKeys<Exclude<SharedState, null | undefined>>, Result extends Path<Exclude<SharedState, null | undefined>, Key>>(api: API | undefined | null, plugin: `${PluginName}.${Key}`): Result | undefined;
+export {};

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

@@ -1,9 +1,12 @@
 import type { BasePluginDependenciesAPI, EditorInjectionAPI, ExtractInjectionAPI, ExtractPluginSharedState, NextEditorPlugin, NextEditorPluginMetadata } from '../types/next-editor-plugin';
-type NamedPluginStatesFromInjectionAPI<API extends ExtractInjectionAPI<NextEditorPlugin<any, any>>, PluginNames extends string | number | symbol> = Readonly<{
+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;
 }>;
-type ExtractPluginNames<API extends EditorInjectionAPI<any, any>> = keyof API;
+export type ExtractPluginNames<API extends EditorInjectionAPI<any, any>> = keyof API;
 /**
+ *
+ * NOTE: Generally you may want to use `usePluginStateSelector` over this which behaves similarly
+ * but selects a slice of the state which is more performant.
  *
  * ⚠️⚠️⚠️ This is a debounced hook ⚠️⚠️⚠️
  * If the plugins you are listening to generate multiple shared states while the user is typing,
@@ -65,4 +68,3 @@ type ExtractPluginNames<API extends EditorInjectionAPI<any, any>> = keyof API;
  * the values are the shared state exposed by that plugin.
  */
 export declare function useSharedPluginState<API extends EditorInjectionAPI<any, any>, PluginNames extends ExtractPluginNames<API>>(injectionApi: API | null | undefined, plugins: PluginNames[]): NamedPluginStatesFromInjectionAPI<API, PluginNames>;
-export {};

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

@@ -0,0 +1 @@
+export { useSharedPluginStateSelector } from './useSharedPluginStateSelector';

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

@@ -0,0 +1,74 @@
+import type { EditorInjectionAPI } from '../../types/next-editor-plugin';
+type ExtractPluginNames<API extends EditorInjectionAPI<any, any>> = keyof API extends string ? keyof API : never;
+/**
+ * This is designed to iterate through an object to get the path of its result
+ * based on separation via "."
+ *
+ * Example:
+ * ```typescript
+ * type Test = { deepObject: { value: number } };
+ * // Type should be `"deepObject" | "deepObject.value"`
+ * type Result = NestedKeys<Test>;
+ * ```
+ */
+type NestedKeys<T> = {
+    [K in keyof T]: T[K] extends object ? T[K] extends any[] ? K extends string ? K : never : T[K] extends object ? K extends string ? K | `${K}.${NestedKeys<T[K]>}` : never : never : K extends string ? K : never;
+}[keyof T];
+/**
+ * This is designed to iterate through a path of an object to get the type of its result
+ * based on separation via "."
+ *
+ * Example:
+ * ```typescript
+ * type Test = { deepObject: { value: number } }
+ * // Type should be `number`
+ * type Result = Path<Test, 'deepObject.value'>
+ * ```
+ */
+type Path<T, K extends string> = K extends `${infer Key}.${infer Rest}` ? Key extends keyof T ? Path<T[Key], Rest> : never : K extends keyof T ? T[K] : never;
+/**
+ *
+ * ⚠️⚠️⚠️ 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.
+ * It will recursively retrieve a slice of the state using a "." to separate
+ * parts of the state.
+ *
+ * Example:
+ *
+ * ```typescript
+ * 	const pluginA: NextEditorPlugin<
+        'pluginA',
+        {
+            sharedState: { deepObj: { value: number | undefined } };
+        }
+    >
+ * ```
+ * You can use `const value = useSharedPluginStateSelector(api, 'pluginA.deepObj.value')` to retrieve the value
+ *
+ * Example in plugin:
+ *
+ * ```typescript
+ * function ExampleContent({ api }: Props) {
+ *   const title = useSharedPluginStateSelector(api, 'dog.title')
+ *   return <p>{ title } { exampleState.description }</p>
+ * }
+ *
+ * const examplePlugin: NextEditorPlugin<'example', { dependencies: [typeof pluginDog] }> = ({ api }) => {
+ *   return {
+ *     name: 'example',
+ *     contentComponent: () => <ExampleContent api={api} />
+ *   }
+ * }
+ * ```
+ *
+ * NOTE: If you pass an invalid path, `undefined` will be returned
+ *
+ * @param api
+ * @param plugin
+ * @returns
+ */
+export declare function useSharedPluginStateSelector<API extends EditorInjectionAPI<any, any>, PluginName extends ExtractPluginNames<API>, SharedState extends ReturnType<Exclude<API[PluginName], null | undefined>['sharedState']['currentState']>, Key extends NestedKeys<Exclude<SharedState, null | undefined>>, Result extends Path<Exclude<SharedState, null | undefined>, Key>>(api: API | undefined | null, plugin: `${PluginName}.${Key}`): Result | undefined;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-common",
-	"version": "96.4.0",
+	"version": "96.5.0",
 	"description": "A package that contains common classes and components for editor and renderer",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -105,6 +105,7 @@
 		"./code-block": "./src/code-block/index.ts",
 		"./table": "./src/table/index.ts",
 		"./use-plugin-state-effect": "./src/hooks/usePluginStateEffect.ts",
+		"./use-shared-plugin-state-selector": "./src/hooks/useSharedPluginStateSelector/index.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"
@@ -139,7 +140,7 @@
 		"@atlaskit/media-file-preview": "^0.9.0",
 		"@atlaskit/media-picker": "^67.0.0",
 		"@atlaskit/media-ui": "^27.0.0",
-		"@atlaskit/media-viewer": "49.4.4",
+		"@atlaskit/media-viewer": "49.4.5",
 		"@atlaskit/mention": "^23.4.0",
 		"@atlaskit/menu": "^2.13.0",
 		"@atlaskit/onboarding": "^12.2.0",
@@ -153,7 +154,7 @@
 		"@atlaskit/spinner": "^16.3.0",
 		"@atlaskit/task-decision": "^17.11.0",
 		"@atlaskit/textfield": "^6.7.0",
-		"@atlaskit/tmp-editor-statsig": "^2.25.0",
+		"@atlaskit/tmp-editor-statsig": "^2.26.0",
 		"@atlaskit/tokens": "^2.4.0",
 		"@atlaskit/tooltip": "^19.0.0",
 		"@atlaskit/width-detector": "^4.3.0",

package/use-shared-plugin-state-selector/package.json

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