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
-
Remove react dependency from wysiwyg-preset: An earlier commit upgraded the tables from simple to fancy tables. As a side effect, this had introduced a dependency from wysiwyg to the react-part of remirror. This change removes this dependency again.
-
Updated dependencies []:
- @remirror/core@1.1.1
- @remirror/dom@1.0.6
- @remirror/extension-annotation@1.0.6
- @remirror/extension-bidi@1.0.4
- @remirror/extension-blockquote@1.0.5
- @remirror/extension-bold@1.0.4
- @remirror/extension-callout@1.0.5
- @remirror/extension-code@1.0.4
- @remirror/extension-code-block@1.0.6
- @remirror/extension-codemirror5@1.0.4
- @remirror/extension-collaboration@1.0.4
- @remirror/extension-columns@1.0.4
- @remirror/extension-diff@1.0.4
- @remirror/extension-doc@1.0.5
- @remirror/extension-drop-cursor@1.0.4
- @remirror/extension-embed@1.1.4
- @remirror/extension-emoji@1.0.5
- @remirror/extension-epic-mode@1.0.4
- @remirror/extension-events@1.0.4
- @remirror/extension-font-family@1.0.4
- @remirror/extension-font-size@1.0.4
- @remirror/extension-gap-cursor@1.0.4
- @remirror/extension-hard-break@1.0.4
- @remirror/extension-heading@1.0.4
- @remirror/extension-history@1.0.4
- @remirror/extension-horizontal-rule@1.0.4
- @remirror/extension-image@1.0.7
- @remirror/extension-italic@1.0.4
- @remirror/extension-link@1.0.4
- @remirror/extension-list@1.0.11
- @remirror/extension-markdown@1.0.4
- @remirror/extension-mention@1.0.4
- @remirror/extension-mention-atom@1.0.5
- @remirror/extension-node-formatting@1.0.7
- @remirror/extension-paragraph@1.0.4
- @remirror/extension-placeholder@1.0.5
- @remirror/extension-positioner@1.1.3
- @remirror/extension-search@1.0.4
- @remirror/extension-strike@1.0.4
- @remirror/extension-sub@1.0.4
- @remirror/extension-sup@1.0.4
- @remirror/extension-tables@1.0.5
- @remirror/extension-text@1.0.4
- @remirror/extension-text-case@1.0.4
- @remirror/extension-text-color@1.0.5
- @remirror/extension-text-highlight@1.0.5
- @remirror/extension-trailing-node@1.0.4
- @remirror/extension-underline@1.0.4
- @remirror/extension-whitespace@1.0.4
- @remirror/extension-yjs@1.0.6
- @remirror/preset-core@1.0.6
- @remirror/preset-formatting@1.0.7
- @remirror/preset-wysiwyg@1.1.0