@atlaskit/editor-core
Version:
A package contains Atlassian editor core functionality
66 lines (64 loc) • 2.02 kB
JavaScript
;
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");
// 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>
* </>
* )
* }
* ```
*/
function usePreset(createPreset) {
var dependencies = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
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 () {
return preset.apiResolver.on(function (api) {
setAPI(api);
});
}, [preset.apiResolver]);
return {
editorApi: editorApi,
preset: preset
};
}