Merge pull request #7585 from marmelab/fix-richtextinput-link-button

slax57 · web-flow · commit 3f158cbc5488 · 2022-04-25T15:08:27.000+02:00
Ensure All RichTextInput Buttons Update Correctly
diff --git a/packages/ra-input-rich-text/src/buttons/AlignmentButtons.tsx b/packages/ra-input-rich-text/src/buttons/AlignmentButtons.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { MouseEvent } from 'react';
+import { MouseEvent, useEffect, useState } from 'react';
 
 import { Editor } from '@tiptap/react';
 import {
@@ -18,25 +18,46 @@ import { useTiptapEditor } from '../useTiptapEditor';
 export const AlignmentButtons = (props: ToggleButtonGroupProps) => {
     const editor = useTiptapEditor();
     const translate = useTranslate();
+    const [value, setValue] = useState<string>('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
     ) => {
-        AlignmentActions[newFormat](editor);
-    };
-
-    const value = AlignmentValues.reduce((acc, value) => {
-        if (editor && editor.isActive({ textAlign: value })) {
-            return value;
+        if (AlignmentActions[newFormat]) {
+            AlignmentActions[newFormat](editor);
         }
-        return acc;
-    }, '');
+    };
 
     return (
         <ToggleButtonGroup
diff --git a/packages/ra-input-rich-text/src/buttons/FormatButtons.tsx b/packages/ra-input-rich-text/src/buttons/FormatButtons.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { MouseEvent } from 'react';
+import { MouseEvent, useEffect, useState } from 'react';
 
 import { Editor } from '@tiptap/react';
 import {
@@ -18,6 +18,7 @@ import { useTiptapEditor } from '../useTiptapEditor';
 export const FormatButtons = (props: ToggleButtonGroupProps) => {
     const editor = useTiptapEditor();
     const translate = useTranslate();
+    const [values, setValues] = useState<string[]>([]);
 
     const boldLabel = translate('ra.tiptap.bold', {
         _: 'Bold',
@@ -39,6 +40,31 @@ 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[]
@@ -59,58 +85,38 @@ export const FormatButtons = (props: ToggleButtonGroupProps) => {
         });
     };
 
-    const value = FormatValues.reduce((acc, value) => {
-        if (editor && editor.isActive(value)) {
-            acc.push(value);
-        }
-        return acc;
-    }, []);
-
     return (
         <ToggleButtonGroup
             {...props}
             disabled={!editor?.isEditable}
             onChange={handleChange}
-            value={value}
+            value={values}
         >
-            <ToggleButton
-                value="bold"
-                aria-label={boldLabel}
-                title={boldLabel}
-                selected={editor && editor.isActive('bold')}
-            >
+            <ToggleButton value="bold" aria-label={boldLabel} title={boldLabel}>
                 <FormatBold fontSize="inherit" />
             </ToggleButton>
             <ToggleButton
                 value="italic"
                 aria-label={italicLabel}
                 title={italicLabel}
-                selected={editor && editor.isActive('italic')}
             >
                 <FormatItalic fontSize="inherit" />
             </ToggleButton>
             <ToggleButton
                 value="underline"
                 aria-label={underlineLabel}
                 title={underlineLabel}
-                selected={editor && editor.isActive('underline')}
             >
                 <FormatUnderlined fontSize="inherit" />
             </ToggleButton>
             <ToggleButton
                 value="strike"
                 aria-label={strikeLabel}
                 title={strikeLabel}
-                selected={editor && editor.isActive('strike')}
             >
                 <FormatStrikethrough fontSize="inherit" />
             </ToggleButton>
-            <ToggleButton
-                value="code"
-                aria-label={codeLabel}
-                title={codeLabel}
-                selected={editor && editor.isActive('code')}
-            >
+            <ToggleButton value="code" aria-label={codeLabel} title={codeLabel}>
                 <Code fontSize="inherit" />
             </ToggleButton>
         </ToggleButtonGroup>
diff --git a/packages/ra-input-rich-text/src/buttons/LevelSelect.tsx b/packages/ra-input-rich-text/src/buttons/LevelSelect.tsx
@@ -1,9 +1,8 @@
 import * as React from 'react';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { List, ListItem, ListItemText, Menu, MenuItem } from '@mui/material';
 import { styled, alpha } from '@mui/material/styles';
 import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
-import { Editor } from '@tiptap/react';
 import { useTranslate } from 'ra-core';
 import clsx from 'clsx';
 import { useTiptapEditor } from '../useTiptapEditor';
@@ -15,6 +14,7 @@ export const LevelSelect = (props: LevelSelectProps) => {
         null
     );
     const { size } = props;
+    const [selectedOption, setSelectedOption] = useState(options[0]);
 
     const handleMenuItemClick = (
         event: React.MouseEvent<HTMLLIElement, MouseEvent>,
@@ -43,8 +43,43 @@ export const LevelSelect = (props: LevelSelectProps) => {
         setAnchorElement(null);
     };
 
-    const selectedOption =
-        options.find(option => isSelectedOption(editor, option)) || options[0];
+    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>
@@ -160,18 +195,6 @@ const options: Array<LevelOption | HeadingLevelOption> = [
     },
 ];
 
-const isSelectedOption = (editor: Editor, option: LevelOption): boolean => {
-    if (!editor) {
-        return false;
-    }
-
-    if (option.value === 'paragraph') {
-        return editor.isActive('paragraph');
-    }
-
-    return editor.isActive('heading', { level: option.level });
-};
-
 const PREFIX = 'RaRichTextInputLevelSelect';
 const classes = {
     list: `${PREFIX}-list`,
diff --git a/packages/ra-input-rich-text/src/buttons/LinkButtons.tsx b/packages/ra-input-rich-text/src/buttons/LinkButtons.tsx
@@ -4,16 +4,12 @@ import InsertLink from '@mui/icons-material/InsertLink';
 
 import { useTranslate } from 'ra-core';
 import { useTiptapEditor } from '../useTiptapEditor';
+import { useEditorSelection } from './useEditorSelection';
 
 export const LinkButtons = (props: Omit<ToggleButtonProps, 'value'>) => {
     const editor = useTiptapEditor();
     const translate = useTranslate();
-    const disabled = editor
-        ? editor.state.doc.textBetween(
-              editor.state.selection.from,
-              editor.state.selection.to
-          ).length === 0
-        : false;
+    const currentTextSelection = useEditorSelection();
 
     const label = translate('ra.tiptap.link', {
         _: 'Add a link',
@@ -39,7 +35,7 @@ export const LinkButtons = (props: Omit<ToggleButtonProps, 'value'>) => {
             aria-label={label}
             title={label}
             {...props}
-            disabled={!editor?.isEditable || disabled}
+            disabled={!editor?.isEditable || !currentTextSelection}
             value="link"
             onClick={handleClick}
             selected={editor && editor.isActive('link')}
diff --git a/packages/ra-input-rich-text/src/buttons/ListButtons.tsx b/packages/ra-input-rich-text/src/buttons/ListButtons.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { MouseEvent } from 'react';
+import { MouseEvent, useEffect, useState } from 'react';
 
 import { Editor } from '@tiptap/react';
 import {
@@ -24,6 +24,8 @@ export const ListButtons = (props: ToggleButtonGroupProps) => {
         _: 'Numbered list',
     });
 
+    const [value, setValue] = useState<string>();
+
     const handleChange = (
         event: MouseEvent<HTMLElement>,
         newFormat: string
@@ -40,12 +42,30 @@ export const ListButtons = (props: ToggleButtonGroupProps) => {
         });
     };
 
-    const value = ListValues.reduce((acc, value) => {
-        if (editor && editor.isActive(value)) {
-            return value;
+    useEffect(() => {
+        const handleUpdate = () => {
+            setValue(() =>
+                ListValues.reduce((acc, value) => {
+                    if (editor && editor.isActive(value)) {
+                        return value;
+                    }
+                    return acc;
+                }, undefined)
+            );
+        };
+
+        if (editor) {
+            editor.on('update', handleUpdate);
+            editor.on('selectionUpdate', handleUpdate);
         }
-        return acc;
-    }, '');
+
+        return () => {
+            if (editor) {
+                editor.off('update', handleUpdate);
+                editor.off('selectionUpdate', handleUpdate);
+            }
+        };
+    }, [editor]);
 
     return (
         <ToggleButtonGroup
diff --git a/packages/ra-input-rich-text/src/buttons/QuoteButtons.tsx b/packages/ra-input-rich-text/src/buttons/QuoteButtons.tsx
@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { useEffect, useState } from 'react';
 import { ToggleButton, ToggleButtonProps } from '@mui/material';
 import FormatQuote from '@mui/icons-material/FormatQuote';
 import { useTranslate } from 'ra-core';
@@ -7,19 +8,38 @@ import { useTiptapEditor } from '../useTiptapEditor';
 export const QuoteButtons = (props: Omit<ToggleButtonProps, 'value'>) => {
     const editor = useTiptapEditor();
     const translate = useTranslate();
+    const [isActive, setIsActive] = useState(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}
             title={label}
             {...props}
             disabled={!editor?.isEditable}
             onClick={() => editor.chain().focus().toggleBlockquote().run()}
-            selected={editor && editor.isActive('blockquote')}
+            selected={isActive}
             value="quote"
         >
             <FormatQuote fontSize="inherit" />
diff --git a/packages/ra-input-rich-text/src/buttons/index.ts b/packages/ra-input-rich-text/src/buttons/index.ts
@@ -5,3 +5,4 @@ export * from './LinkButtons';
 export * from './QuoteButtons';
 export * from './ClearButtons';
 export * from './LevelSelect';
+export * from './useEditorSelection';
diff --git a/packages/ra-input-rich-text/src/buttons/useEditorSelection.ts b/packages/ra-input-rich-text/src/buttons/useEditorSelection.ts
diff --git a/packages/ra-input-rich-text/src/useTiptapEditor.ts b/packages/ra-input-rich-text/src/useTiptapEditor.ts
