@atlaskit/editor-core 193.16.0 → 193.17.0

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @atlaskit/editor-core
 
+## 193.17.0
+
+### Minor Changes
+
+-   [#98727](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/98727)
+    [`057b3d93e3d4`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/057b3d93e3d4) -
+    The `usePreset` hook from editor-core previously required the EditorContext in order to have a
+    valid editorApi as a return value (otherwise it is undefined). This is confusing to developers
+    so this improvement allows the API value to be resolved without EditorContext - simplifying what
+    is required to setup the editor.
+
+### Patch Changes
+
+-   Updated dependencies
+
 ## 193.16.0
 
 ### Minor Changes

package/dist/cjs/composable-editor/editor-internal.js

@@ -43,17 +43,12 @@ var EditorInternal = exports.EditorInternal = /*#__PURE__*/(0, _react.memo)(func
     onEditorDestroyed = _ref.onEditorDestroyed,
     preset = _ref.preset;
   var Component = (0, _createEditor.getUiComponent)(props.appearance);
-  var _setInternalEditorApi = (0, _context.useSetPresetContext)();
   var setEditorApi = (0, _react.useCallback)(function (api) {
-    if (_setInternalEditorApi) {
-      _setInternalEditorApi(api);
-    }
-
     // This is an workaround to unblock Editor Lego Decoupling project, if you have questions ping us #cc-editor-lego
     // We may clean up this code when EditorActions deprecation process starts
     // @ts-expect-error 2339: Property '__EDITOR_INTERNALS_DO_NOT_USE__API' does not exist on type 'EditorActions<any>'.
     editorActions.__EDITOR_INTERNALS_DO_NOT_USE__API = api;
-  }, [_setInternalEditorApi, editorActions]);
+  }, [editorActions]);
   var overriddenEditorProps = _objectSpread(_objectSpread({}, props), {}, {
     onSave: props.onSave ? handleSave : undefined,
     // noop all analytic events, even if a handler is still passed.

package/dist/cjs/use-preset.js

@@ -1,12 +1,13 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.usePreset = usePreset;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = require("react");
 var _preset = require("@atlaskit/editor-common/preset");
-var _context = require("./presets/context");
 /**
  * Creates a preset.
  *
@@ -23,8 +24,8 @@ var _context = require("./presets/context");
  * Example:
  * ```ts
  * function ExampleEditor() {
- *   const { preset, editorApi } = usePreset(() =>
- *     new EditorPresetBuilder().add(plugin1).add(plugin2)
+ *   const { preset, editorApi } = usePreset((builder) =>
+ *     builder.add(plugin1).add(plugin2)
  *   , []);
  *
  *   // Can execute typesafe commands based on plugin1 or 2
@@ -42,12 +43,20 @@ var _context = require("./presets/context");
  */
 function usePreset(createPreset) {
   var dependencies = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
-  var editorApi = (0, _context.usePresetContext)();
+  var _useState = (0, _react.useState)(undefined),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    editorApi = _useState2[0],
+    setAPI = _useState2[1];
   var preset = (0, _react.useMemo)(function () {
     return createPreset(new _preset.EditorPresetBuilder());
   },
   // eslint-disable-next-line react-hooks/exhaustive-deps
   dependencies);
+  (0, _react.useLayoutEffect)(function () {
+    preset.apiPromise.then(function (api) {
+      setAPI(api);
+    });
+  }, [preset.apiPromise]);
   return {
     editorApi: editorApi,
     preset: preset

package/dist/cjs/version-wrapper.js

@@ -5,4 +5,4 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.version = exports.name = void 0;
 var name = exports.name = "@atlaskit/editor-core";
-var version = exports.version = "193.16.0";
+var version = exports.version = "193.17.0";

package/dist/es2019/composable-editor/editor-internal.js

@@ -34,17 +34,12 @@ export const EditorInternal = /*#__PURE__*/memo(({
 }) => {
   var _props$performanceTra, _props$performanceTra2, _props$performanceTra3, _props$performanceTra4;
   const Component = getUiComponent(props.appearance);
-  const _setInternalEditorApi = useSetPresetContext();
   const setEditorApi = useCallback(api => {
-    if (_setInternalEditorApi) {
-      _setInternalEditorApi(api);
-    }
-
     // This is an workaround to unblock Editor Lego Decoupling project, if you have questions ping us #cc-editor-lego
     // We may clean up this code when EditorActions deprecation process starts
     // @ts-expect-error 2339: Property '__EDITOR_INTERNALS_DO_NOT_USE__API' does not exist on type 'EditorActions<any>'.
     editorActions.__EDITOR_INTERNALS_DO_NOT_USE__API = api;
-  }, [_setInternalEditorApi, editorActions]);
+  }, [editorActions]);
   const overriddenEditorProps = {
     ...props,
     onSave: props.onSave ? handleSave : undefined,

package/dist/es2019/use-preset.js

@@ -1,6 +1,5 @@
-import { useMemo } from 'react';
+import { useLayoutEffect, useMemo, useState } from 'react';
 import { EditorPresetBuilder } from '@atlaskit/editor-common/preset';
-import { usePresetContext } from './presets/context';
 /**
  * Creates a preset.
  *
@@ -17,8 +16,8 @@ import { usePresetContext } from './presets/context';
  * Example:
  * ```ts
  * function ExampleEditor() {
- *   const { preset, editorApi } = usePreset(() =>
- *     new EditorPresetBuilder().add(plugin1).add(plugin2)
+ *   const { preset, editorApi } = usePreset((builder) =>
+ *     builder.add(plugin1).add(plugin2)
  *   , []);
  *
  *   // Can execute typesafe commands based on plugin1 or 2
@@ -35,10 +34,15 @@ import { usePresetContext } from './presets/context';
  * ```
  */
 export function usePreset(createPreset, dependencies = []) {
-  const editorApi = usePresetContext();
+  const [editorApi, setAPI] = useState(undefined);
   const preset = useMemo(() => createPreset(new EditorPresetBuilder()),
   // eslint-disable-next-line react-hooks/exhaustive-deps
   dependencies);
+  useLayoutEffect(() => {
+    preset.apiPromise.then(api => {
+      setAPI(api);
+    });
+  }, [preset.apiPromise]);
   return {
     editorApi,
     preset

package/dist/es2019/version-wrapper.js

@@ -1,2 +1,2 @@
 export const name = "@atlaskit/editor-core";
-export const version = "193.16.0";
+export const version = "193.17.0";

package/dist/esm/composable-editor/editor-internal.js

@@ -37,17 +37,12 @@ export var EditorInternal = /*#__PURE__*/memo(function (_ref) {
     onEditorDestroyed = _ref.onEditorDestroyed,
     preset = _ref.preset;
   var Component = getUiComponent(props.appearance);
-  var _setInternalEditorApi = useSetPresetContext();
   var setEditorApi = useCallback(function (api) {
-    if (_setInternalEditorApi) {
-      _setInternalEditorApi(api);
-    }
-
     // This is an workaround to unblock Editor Lego Decoupling project, if you have questions ping us #cc-editor-lego
     // We may clean up this code when EditorActions deprecation process starts
     // @ts-expect-error 2339: Property '__EDITOR_INTERNALS_DO_NOT_USE__API' does not exist on type 'EditorActions<any>'.
     editorActions.__EDITOR_INTERNALS_DO_NOT_USE__API = api;
-  }, [_setInternalEditorApi, editorActions]);
+  }, [editorActions]);
   var overriddenEditorProps = _objectSpread(_objectSpread({}, props), {}, {
     onSave: props.onSave ? handleSave : undefined,
     // noop all analytic events, even if a handler is still passed.

package/dist/esm/use-preset.js

@@ -1,6 +1,6 @@
-import { useMemo } from 'react';
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import { useLayoutEffect, useMemo, useState } from 'react';
 import { EditorPresetBuilder } from '@atlaskit/editor-common/preset';
-import { usePresetContext } from './presets/context';
 /**
  * Creates a preset.
  *
@@ -17,8 +17,8 @@ import { usePresetContext } from './presets/context';
  * Example:
  * ```ts
  * function ExampleEditor() {
- *   const { preset, editorApi } = usePreset(() =>
- *     new EditorPresetBuilder().add(plugin1).add(plugin2)
+ *   const { preset, editorApi } = usePreset((builder) =>
+ *     builder.add(plugin1).add(plugin2)
  *   , []);
  *
  *   // Can execute typesafe commands based on plugin1 or 2
@@ -36,12 +36,20 @@ import { usePresetContext } from './presets/context';
  */
 export function usePreset(createPreset) {
   var dependencies = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
-  var editorApi = usePresetContext();
+  var _useState = useState(undefined),
+    _useState2 = _slicedToArray(_useState, 2),
+    editorApi = _useState2[0],
+    setAPI = _useState2[1];
   var preset = useMemo(function () {
     return createPreset(new EditorPresetBuilder());
   },
   // eslint-disable-next-line react-hooks/exhaustive-deps
   dependencies);
+  useLayoutEffect(function () {
+    preset.apiPromise.then(function (api) {
+      setAPI(api);
+    });
+  }, [preset.apiPromise]);
   return {
     editorApi: editorApi,
     preset: preset

package/dist/esm/version-wrapper.js

@@ -1,2 +1,2 @@
 export var name = "@atlaskit/editor-core";
-export var version = "193.16.0";
+export var version = "193.17.0";

package/dist/types/create-editor/ReactEditorView.d.ts

@@ -22,7 +22,9 @@ import type { EditorAppearance, EditorConfig, EditorPlugin, EditorProps, EditorR
 import type { EditorNextProps } from '../types/editor-props';
 import { TransactionTracker } from '../utils/performance/track-transactions';
 export interface EditorViewProps {
-    editorProps: EditorProps | EditorNextProps;
+    editorProps: (EditorProps | EditorNextProps) & {
+        preset?: EditorNextProps['preset'];
+    };
     createAnalyticsEvent?: CreateUIAnalyticsEvent;
     providerFactory: ProviderFactory;
     portalProviderAPI: LegacyPortalProviderAPI | PortalProviderAPI;

package/dist/types/use-preset.d.ts

@@ -21,8 +21,8 @@ interface PresetAPI<PluginNames extends string[] = [], StackPlugins extends AllE
  * Example:
  * ```ts
  * function ExampleEditor() {
- *   const { preset, editorApi } = usePreset(() =>
- *     new EditorPresetBuilder().add(plugin1).add(plugin2)
+ *   const { preset, editorApi } = usePreset((builder) =>
+ *     builder.add(plugin1).add(plugin2)
  *   , []);
  *
  *   // Can execute typesafe commands based on plugin1 or 2

package/dist/types-ts4.5/create-editor/ReactEditorView.d.ts

@@ -22,7 +22,9 @@ import type { EditorAppearance, EditorConfig, EditorPlugin, EditorProps, EditorR
 import type { EditorNextProps } from '../types/editor-props';
 import { TransactionTracker } from '../utils/performance/track-transactions';
 export interface EditorViewProps {
-    editorProps: EditorProps | EditorNextProps;
+    editorProps: (EditorProps | EditorNextProps) & {
+        preset?: EditorNextProps['preset'];
+    };
     createAnalyticsEvent?: CreateUIAnalyticsEvent;
     providerFactory: ProviderFactory;
     portalProviderAPI: LegacyPortalProviderAPI | PortalProviderAPI;

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

@@ -23,8 +23,8 @@ interface PresetAPI<PluginNames extends string[] = [
  * Example:
  * ```ts
  * function ExampleEditor() {
- *   const { preset, editorApi } = usePreset(() =>
- *     new EditorPresetBuilder().add(plugin1).add(plugin2)
+ *   const { preset, editorApi } = usePreset((builder) =>
+ *     builder.add(plugin1).add(plugin2)
  *   , []);
  *
  *   // Can execute typesafe commands based on plugin1 or 2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-core",
-  "version": "193.16.0",
+  "version": "193.17.0",
   "description": "A package contains Atlassian editor core functionality",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -45,7 +45,7 @@
     "@atlaskit/analytics-next": "^9.3.0",
     "@atlaskit/analytics-next-stable-react-context": "1.0.1",
     "@atlaskit/button": "^17.14.0",
-    "@atlaskit/editor-common": "^79.5.0",
+    "@atlaskit/editor-common": "^79.6.0",
     "@atlaskit/editor-json-transformer": "^8.12.0",
     "@atlaskit/editor-plugins": "^2.5.0",
     "@atlaskit/editor-prosemirror": "4.0.1",