github remirror/remirror @remirror/react@1.0.9

2021-09-07

2021-09-07

⚠️ Important

This release includes a change that could be breaking for controlled editors, however this is being released as a patch, as the fix is a correction to align with documented behaviour.

Uncontrolled editors will not be affected.

When attempting to synchronously run multiple commands in a controlled editor, each command operates on the current state, not the state as applied by the previous command. As a result, we find ourselves in a situation where the last command wins. i.e. the last state update before the controlled editor can apply the new state is the one that will be used.
-- Controlled editors - Potential pitfalls

Controlled vs uncontrolled

As a reminder, controlled editors use a state prop, whereas uncontrolled use an initialState prop

  • Controlled <Remirror state={state}
  • Uncontrolled <Remirror initialState={state}

Breaking usage

If you're using multiple unchained commands in a controlled editor, then only the last command will applied to state.

import { useCallback } from 'react'; 
import { useCommands } from '@remirror/react';

const { toggleBold, toggleItalic } = useCommands();

const handleAction = useCallback(() => {
  toggleBold();
  toggleItalic(); // Only this will be applied in a controlled editor
}, [toggleBold, toggleItalic]);

Instead you should be using a chained command

import { useCallback } from 'react'; 
import { useChainedCommands } from '@remirror/react'; // Note different import

const chain = useChainedCommands();

const handleAction = useCallback(() => {
  chain
    .toggleBold()
    .toggleItalic()
    .run() // A chain needs to be .run() - both commands will be applied
}, [chain]);

Patch Changes

  • Unchained commands should use a new transaction to prevent leaking of previous command steps

  • Updated dependencies []:

    • @remirror/extension-placeholder@1.0.5
    • @remirror/extension-positioner@1.1.3
    • @remirror/extension-react-component@1.0.6
    • @remirror/extension-react-ssr@1.0.5
    • @remirror/extension-react-tables@1.0.9
    • @remirror/preset-react@1.0.5
    • @remirror/react-components@1.0.8
    • @remirror/react-core@1.0.7
    • @remirror/react-hooks@1.0.8
    • @remirror/react-renderer@1.0.6
    • @remirror/react-ssr@1.0.5

Don't miss a new remirror release

NewReleases is sending notifications on new releases.