Skip to main content

useHelpers

const allHelpers = useHelpers();
const allHelpersWithUpdate = useHelpers(true);

Parameters​

update (Optional)

A boolean indicating whether this hook should trigger a component render when the editor state changes.

Default false.

Return value​

An object containing all the helpers available in the editor.

Description​

This hooks exposes all the helpers from your chosen extensions (and those built in by default).

For instance getJSON is provided by a built-in extension and always available. However getMarkdown would require the MarkdownExtension to be present.

Helpers allow you to read editor state.

Usage​

By convention, when using this hook, you deconstruct the helpers needed for your use case.

const { getJSON } = useHelpers();

Each helper can be called as a function, passing the arguments as required.

const { getJSON } = useHelpers();

const onSave = useCallback(
  ({ state }) => {
    saveToBackend(getJSON(state));

    // Prevents any further key handlers from being run.
    return true;
  },
  [getJSON],
);

useKeymap('Mod-s', onSave);

By passing true to useHelpers you can ensure your component uses the latest editor state. Be aware this has performance implications, e.g. triggering a React render on every key press.

const { getJSON } = useHelpers(true);

return (
  <pre>
    <code>{JSON.stringify(getJSON(), null, 2)}</code>
  </pre>
);