remirror/remirror @remirror/react@1.0.9

on GitHub

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