migrate buttons to useEditorState selectors

ThieryMichel · ThieryMichel · commit bb149cd589c0 · 2026-03-24T11:49:28.000+01:00
diff --git a/packages/ra-input-rich-text/src/RichTextInput.tsx b/packages/ra-input-rich-text/src/RichTextInput.tsx
@@ -7,7 +7,7 @@ import Highlight from '@tiptap/extension-highlight';
 import Image from '@tiptap/extension-image';
 import Link from '@tiptap/extension-link';
 import TextAlign from '@tiptap/extension-text-align';
-import TextStyle from '@tiptap/extension-text-style';
+import { TextStyle } from '@tiptap/extension-text-style';
 import Underline from '@tiptap/extension-underline';
 import { Editor, EditorContent, EditorOptions, useEditor } from '@tiptap/react';
 import StarterKit from '@tiptap/starter-kit';
@@ -120,8 +120,9 @@ export const RichTextInput = (props: RichTextInputProps) => {
 
         const { from, to } = editor.state.selection;
 
-        editor.commands.setContent(field.value, false, {
-            preserveWhitespace: true,
+        editor.commands.setContent(field.value, {
+            emitUpdate: false,
+            parseOptions: { preserveWhitespace: true },
         });
         editor.commands.setTextSelection({ from, to });
     }, [editor, field.value]);
diff --git a/packages/ra-input-rich-text/src/buttons/AlignmentButtons.tsx b/packages/ra-input-rich-text/src/buttons/AlignmentButtons.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
-import { MouseEvent, useEffect, useState } from 'react';
+import { MouseEvent } from 'react';
 
-import { Editor } from '@tiptap/react';
+import { Editor, useEditorState } from '@tiptap/react';
 import {
     ToggleButton,
     ToggleButtonGroup,
@@ -18,38 +18,23 @@ import { useTiptapEditor } from '../useTiptapEditor';
 export const AlignmentButtons = (props: ToggleButtonGroupProps) => {
     const editor = useTiptapEditor();
     const translate = useTranslate();
-    const [value, setValue] = useState<string>('left');
+
+    const value = useEditorState({
+        editor,
+        selector: ({ editor }) => {
+            if (!editor) return 'left';
+            return (
+                AlignmentValues.find(v => editor.isActive({ textAlign: v })) ??
+                'left'
+            );
+        },
+    });
 
     const leftLabel = translate('ra.tiptap.align_left', { _: 'Align left' });
     const rightLabel = translate('ra.tiptap.align_right', { _: 'Align right' });
     const centerLabel = translate('ra.tiptap.align_center', { _: 'Center' });
     const justifyLabel = translate('ra.tiptap.align_justify', { _: 'Justify' });
 
-    useEffect(() => {
-        const handleUpdate = () => {
-            setValue(currentValue =>
-                AlignmentValues.reduce((acc, value) => {
-                    if (editor && editor.isActive({ textAlign: value })) {
-                        return value;
-                    }
-                    return acc;
-                }, currentValue)
-            );
-        };
-
-        if (editor) {
-            editor.on('update', handleUpdate);
-            editor.on('selectionUpdate', handleUpdate);
-        }
-
-        return () => {
-            if (editor) {
-                editor.off('update', handleUpdate);
-                editor.off('selectionUpdate', handleUpdate);
-            }
-        };
-    }, [editor]);
-
     const handleChange = (
         event: MouseEvent<HTMLElement>,
         newFormat: string
diff --git a/packages/ra-input-rich-text/src/buttons/FormatButtons.tsx b/packages/ra-input-rich-text/src/buttons/FormatButtons.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
-import { MouseEvent, useEffect, useState } from 'react';
+import { MouseEvent } from 'react';
 
-import { Editor } from '@tiptap/react';
+import { Editor, useEditorState } from '@tiptap/react';
 import {
     ToggleButton,
     ToggleButtonGroup,
@@ -18,7 +18,12 @@ import { useTiptapEditor } from '../useTiptapEditor';
 export const FormatButtons = (props: ToggleButtonGroupProps) => {
     const editor = useTiptapEditor();
     const translate = useTranslate();
-    const [values, setValues] = useState<string[]>([]);
+
+    const values = useEditorState({
+        editor,
+        selector: ({ editor }) =>
+            editor ? FormatValues.filter(value => editor.isActive(value)) : [],
+    });
 
     const boldLabel = translate('ra.tiptap.bold', {
         _: 'Bold',
@@ -40,31 +45,6 @@ export const FormatButtons = (props: ToggleButtonGroupProps) => {
         _: 'Code',
     });
 
-    useEffect(() => {
-        const handleUpdate = () => {
-            setValues(() =>
-                FormatValues.reduce((acc, value) => {
-                    if (editor && editor.isActive(value)) {
-                        acc.push(value);
-                    }
-                    return acc;
-                }, [])
-            );
-        };
-
-        if (editor) {
-            editor.on('update', handleUpdate);
-            editor.on('selectionUpdate', handleUpdate);
-        }
-
-        return () => {
-            if (editor) {
-                editor.off('update', handleUpdate);
-                editor.off('selectionUpdate', handleUpdate);
-            }
-        };
-    }, [editor]);
-
     const handleChange = (
         event: MouseEvent<HTMLElement>,
         newFormats: string[]
diff --git a/packages/ra-input-rich-text/src/buttons/LevelSelect.tsx b/packages/ra-input-rich-text/src/buttons/LevelSelect.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
 import {
     List,
     ListItem,
@@ -10,6 +10,7 @@ import {
 } from '@mui/material';
 import { styled } from '@mui/material/styles';
 import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
+import { useEditorState } from '@tiptap/react';
 import { useTranslate } from 'ra-core';
 import clsx from 'clsx';
 import { useTiptapEditor } from '../useTiptapEditor';
@@ -21,7 +22,23 @@ export const LevelSelect = (props: LevelSelectProps) => {
         null
     );
     const { size } = props;
-    const [selectedOption, setSelectedOption] = useState(options[0]);
+
+    const selectedOption = useEditorState({
+        editor,
+        selector: ({ editor }) => {
+            if (!editor) return options[0];
+            return (
+                options.find(option => {
+                    if (option.value === 'paragraph') {
+                        return editor.isActive('paragraph');
+                    }
+                    return editor.isActive('heading', {
+                        level: (option as HeadingLevelOption).level,
+                    });
+                }) ?? options[0]
+            );
+        },
+    });
 
     const handleMenuItemClick = (
         event: React.MouseEvent<HTMLLIElement, MouseEvent>,
@@ -50,44 +67,6 @@ export const LevelSelect = (props: LevelSelectProps) => {
         setAnchorElement(null);
     };
 
-    useEffect(() => {
-        const handleUpdate = () => {
-            setSelectedOption(currentOption =>
-                options.reduce((acc, option) => {
-                    if (editor) {
-                        if (
-                            option.value === 'paragraph' &&
-                            editor.isActive('paragraph')
-                        ) {
-                            return option;
-                        }
-
-                        if (
-                            editor.isActive('heading', {
-                                level: (option as HeadingLevelOption).level,
-                            })
-                        ) {
-                            return option;
-                        }
-                    }
-                    return acc;
-                }, currentOption)
-            );
-        };
-
-        if (editor) {
-            editor.on('update', handleUpdate);
-            editor.on('selectionUpdate', handleUpdate);
-        }
-
-        return () => {
-            if (editor) {
-                editor.off('update', handleUpdate);
-                editor.off('selectionUpdate', handleUpdate);
-            }
-        };
-    }, [editor]);
-
     return (
         <Root>
             <List
diff --git a/packages/ra-input-rich-text/src/buttons/LinkButtons.tsx b/packages/ra-input-rich-text/src/buttons/LinkButtons.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { ToggleButton, ToggleButtonProps } from '@mui/material';
 import InsertLink from '@mui/icons-material/InsertLink';
+import { useEditorState } from '@tiptap/react';
 
 import { useTranslate } from 'ra-core';
 import { useTiptapEditor } from '../useTiptapEditor';
@@ -11,6 +12,11 @@ export const LinkButtons = (props: Omit<ToggleButtonProps, 'value'>) => {
     const translate = useTranslate();
     const currentTextSelection = useEditorSelection();
 
+    const isActive = useEditorState({
+        editor,
+        selector: ({ editor }) => (editor ? editor.isActive('link') : false),
+    });
+
     const label = translate('ra.tiptap.link', {
         _: 'Add a link',
     });
@@ -38,7 +44,7 @@ export const LinkButtons = (props: Omit<ToggleButtonProps, 'value'>) => {
             disabled={!editor?.isEditable || !currentTextSelection}
             value="link"
             onClick={handleClick}
-            selected={editor && editor.isActive('link')}
+            selected={isActive}
         >
             <InsertLink fontSize="inherit" />
         </ToggleButton>
diff --git a/packages/ra-input-rich-text/src/buttons/ListButtons.tsx b/packages/ra-input-rich-text/src/buttons/ListButtons.tsx
@@ -1,8 +1,8 @@
 import * as React from 'react';
-import { MouseEvent, useEffect, useState } from 'react';
+import { MouseEvent } from 'react';
 
 import { findParentNode } from '@tiptap/core';
-import { Editor } from '@tiptap/react';
+import { Editor, useEditorState } from '@tiptap/react';
 import {
     ToggleButton,
     ToggleButtonGroup,
@@ -25,7 +25,11 @@ export const ListButtons = (props: ToggleButtonGroupProps) => {
         _: 'Numbered list',
     });
 
-    const [value, setValue] = useState<string>();
+    const value = useEditorState({
+        editor,
+        selector: ({ editor }) =>
+            editor ? getInnermostListType(editor) : undefined,
+    });
 
     const handleChange = (
         event: MouseEvent<HTMLElement>,
@@ -45,24 +49,6 @@ export const ListButtons = (props: ToggleButtonGroupProps) => {
         }
     };
 
-    useEffect(() => {
-        const handleUpdate = () => {
-            setValue(editor ? getInnermostListType(editor) : undefined);
-        };
-
-        if (editor) {
-            editor.on('update', handleUpdate);
-            editor.on('selectionUpdate', handleUpdate);
-        }
-
-        return () => {
-            if (editor) {
-                editor.off('update', handleUpdate);
-                editor.off('selectionUpdate', handleUpdate);
-            }
-        };
-    }, [editor]);
-
     return (
         <ToggleButtonGroup
             {...props}
diff --git a/packages/ra-input-rich-text/src/buttons/QuoteButtons.tsx b/packages/ra-input-rich-text/src/buttons/QuoteButtons.tsx
@@ -1,37 +1,24 @@
 import * as React from 'react';
-import { useEffect, useState } from 'react';
 import { ToggleButton, ToggleButtonProps } from '@mui/material';
 import FormatQuote from '@mui/icons-material/FormatQuote';
+import { useEditorState } from '@tiptap/react';
 import { useTranslate } from 'ra-core';
 import { useTiptapEditor } from '../useTiptapEditor';
 
 export const QuoteButtons = (props: Omit<ToggleButtonProps, 'value'>) => {
     const editor = useTiptapEditor();
     const translate = useTranslate();
-    const [isActive, setIsActive] = useState(false);
+
+    const isActive = useEditorState({
+        editor,
+        selector: ({ editor }) =>
+            editor ? editor.isActive('blockquote') : false,
+    });
 
     const label = translate('ra.tiptap.blockquote', {
         _: 'Blockquote',
     });
 
-    useEffect(() => {
-        const handleUpdate = () => {
-            setIsActive(editor && editor.isActive('blockquote'));
-        };
-
-        if (editor) {
-            editor.on('update', handleUpdate);
-            editor.on('selectionUpdate', handleUpdate);
-        }
-
-        return () => {
-            if (editor) {
-                editor.off('update', handleUpdate);
-                editor.off('selectionUpdate', handleUpdate);
-            }
-        };
-    }, [editor]);
-
     return (
         <ToggleButton
             aria-label={label}
diff --git a/packages/ra-input-rich-text/src/buttons/useEditorSelection.ts b/packages/ra-input-rich-text/src/buttons/useEditorSelection.ts
@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useEditorState } from '@tiptap/react';
 import { useTiptapEditor } from '../useTiptapEditor';
 
 /**
@@ -8,37 +8,14 @@ import { useTiptapEditor } from '../useTiptapEditor';
 export const useEditorSelection = () => {
     const editor = useTiptapEditor();
 
-    const [selection, setSelection] = useState<string | null>(
-        editor
-            ? editor.state.doc.textBetween(
-                  editor.state.selection.from,
-                  editor.state.selection.to
-              )
-            : null
-    );
-
-    useEffect(() => {
-        const handleSelectionChange = () => {
-            setSelection(
-                editor
-                    ? editor.state.doc.textBetween(
-                          editor.state.selection.from,
-                          editor.state.selection.to
-                      )
-                    : null
-            );
-        };
-
-        if (editor) {
-            editor.on('selectionUpdate', handleSelectionChange);
-        }
-
-        return () => {
-            if (editor) {
-                editor.off('selectionUpdate', handleSelectionChange);
-            }
-        };
-    }, [editor]);
-
-    return selection;
+    return useEditorState({
+        editor,
+        selector: ({ editor }) =>
+            editor
+                ? editor.state.doc.textBetween(
+                      editor.state.selection.from,
+                      editor.state.selection.to
+                  )
+                : null,
+    });
 };
