Fix <RichTextInput> crash when the editor is recreated

packages/ra-input-rich-text/src/RichTextInput.spec.tsx

@@ -1,7 +1,8 @@
 import * as React from 'react';
 import expect from 'expect';
-import { render, waitFor } from '@testing-library/react';
-import { Basic } from './RichTextInput.stories';
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { Basic, EditorRecreation } from './RichTextInput.stories';
 
 describe('<RichTextInput />', () => {
     it('should update its content when fields value changes and add a trailing break to it', async () => {
@@ -23,4 +24,22 @@ describe('<RichTextInput />', () => {
             );
         });
     });
+
+    it('should update its content when the editor is recreated while the field value changes', async () => {
+        const { container } = render(<EditorRecreation />);
+
+        await waitFor(() => {
+            expect(container.querySelector('.ProseMirror')?.innerHTML).toEqual(
+                '<p>This post is a draft, you can edit it.</p>'
+            );
+        });
+
+        await userEvent.click(screen.getByText('Switch post'));
+
+        await waitFor(() => {
+            expect(container.querySelector('.ProseMirror')?.innerHTML).toEqual(
+                '<p>This post is published, it is read-only.</p>'
+            );
+        });
+    });
 });

packages/ra-input-rich-text/src/RichTextInput.stories.tsx

@@ -17,7 +17,7 @@ import {
     Toolbar as RAToolbar,
     SaveButton,
 } from 'ra-ui-materialui';
-import { useWatch } from 'react-hook-form';
+import { useFormContext, useWatch } from 'react-hook-form';
 import fakeRestDataProvider from 'ra-data-fakerest';
 import { Routes, Route } from 'react-router-dom';
 import Mention from '@tiptap/extension-mention';
@@ -112,6 +112,65 @@ export const ReadOnly = (props: Partial<SimpleFormProps>) => (
     </AdminContext>
 );
 
+const postsToSwitch = [
+    { body: '<p>This post is a draft, you can edit it.</p>', readOnly: false },
+    { body: '<p>This post is published, it is read-only.</p>', readOnly: true },
+];
+
+const SwitchPostButton = ({
+    postIndex,
+    onSwitch,
+}: {
+    postIndex: number;
+    onSwitch: (index: number) => void;
+}) => {
+    const { setValue } = useFormContext();
+    return (
+        <Button
+            onClick={() => {
+                const nextIndex = (postIndex + 1) % postsToSwitch.length;
+                setValue('body', postsToSwitch[nextIndex].body);
+                onSwitch(nextIndex);
+            }}
+        >
+            Switch post
+        </Button>
+    );
+};
+
+/**
+ * Changing the value and the readOnly prop at the same time recreates the editor
+ * while the content sync effect still references the previous (destroyed) one.
+ * Clicking on "Switch post" used to throw
+ * "Cannot read properties of null (reading 'commands')".
+ */
+export const EditorRecreation = (props: Partial<SimpleFormProps>) => {
+    const [postIndex, setPostIndex] = React.useState(0);
+    return (
+        <AdminContext i18nProvider={i18nProvider}>
+            <ResourceContextProvider value="posts">
+                <Card>
+                    <SimpleForm
+                        defaultValues={{ body: postsToSwitch[0].body }}
+                        onSubmit={() => {}}
+                        {...props}
+                    >
+                        <SwitchPostButton
+                            postIndex={postIndex}
+                            onSwitch={setPostIndex}
+                        />
+                        <RichTextInput
+                            source="body"
+                            readOnly={postsToSwitch[postIndex].readOnly}
+                        />
+                        <FormInspector />
+                    </SimpleForm>
+                </Card>
+            </ResourceContextProvider>
+        </AdminContext>
+    );
+};
+
 export const Small = (props: Partial<SimpleFormProps>) => (
     <AdminContext i18nProvider={i18nProvider}>
         <ResourceContextProvider value="posts">

packages/ra-input-rich-text/src/RichTextInput.tsx

@@ -114,7 +114,12 @@ export const RichTextInput = (props: RichTextInputProps) => {
     const { error, invalid, isTouched } = fieldState;
 
     useEffect(() => {
-        if (!editor) return;
+        // Tiptap v3's Editor.destroy() sets commandManager to null, and the
+        // `commands` getter dereferences it. When the editor is recreated (e.g.
+        // readOnly/disabled/editorOptions/id change), this passive effect can run
+        // against the just-destroyed instance, throwing "Cannot read properties of
+        // null (reading 'commands')". Bail out on destroyed editors as well.
+        if (!editor || editor.isDestroyed) return;
 
         const { from, to } = editor.state.selection;