@atlaskit/editor-core/dist/es2019/use-preset.js

A package contains Atlassian editor core functionality

import { useLayoutEffect, useMemo, useState } from 'react';
import { EditorPresetBuilder } from '@atlaskit/editor-common/preset';

// eslint-disable-next-line @typescript-eslint/no-explicit-any

/**
 * Creates a preset.
 *
 * Takes an input function that returns a preset (and memoizes it) depending
 * on the dependency array provided.
 *
 * Returns a pluginInjectionApi in order to apply actions and subscribe to plugin
 * changes outside of the editor.
 *
 * @param createPreset
 * @param dependencies
 * @returns PresetAPI ({ pluginInjectionApi, preset, actionBuilder })
 *
 * Example:
 * ```ts
 * function ExampleEditor() {
 *   const { preset, editorApi } = usePreset((builder) =>
 *     builder.add(plugin1).add(plugin2)
 *   , []);
 *
 *   // Can execute typesafe commands based on plugin1 or 2
 *   const runCommand = () => editorApi.core.actions.execute(
 *     editorApi.plugin1.commands.doSomething()
 *   )
 *   return (
 *     <>
 *       <Editor preset={preset} />
 *       <Button onClick={runCommand}>Run command</Button>
 *     </>
 *   )
 * }
 * ```
 */
export function usePreset(createPreset, dependencies = []) {
  const [editorApi, setAPI] = useState(undefined);
  const preset = useMemo(() => createPreset(new EditorPresetBuilder()),
  // eslint-disable-next-line react-hooks/exhaustive-deps
  dependencies);
  useLayoutEffect(() => {
    return preset.apiResolver.on(api => {
      setAPI(api);
    });
  }, [preset.apiResolver]);
  return {
    editorApi,
    preset
  };
}