fix(web): create custom hook for useRef logic (#666)

# Summary

This PR removes duplicated `useRef` logic inside `EnrichedTextInput` by
extracting it into a custom `useStableRef` hook.

## Test Plan
Run the example web app and verify that all enriched editor
functionalities work properly.

## Screenshots / Videos

n/a

## Compatibility

| OS      | Implemented |
| ------- | :---------: |
| iOS     |    ❌     |
| Android |    ❌     |
| Web     |    ✅     |

## Checklist

- [X] E2E tests are passing
- [ ] Required E2E tests have been added (if applicable)

Author: kacperzolkiewski

src/web/EnrichedTextInput.tsx

@@ -76,6 +76,7 @@ import { StripMarksOnImagePlugin } from './pmPlugins/StripMarksOnImagePlugin';
 import { ShortcutPlugin } from './pmPlugins/ShortcutPlugin';
 import { returnKeyTypeToEnterKeyHint } from './returnKeyTypeToEnterKeyHint';
 import { AutolinkPlugin } from './pmPlugins/AutolinkPlugin';
+import { useStableRef } from './useStableRef';
 
 function runFocused(
   editor: Editor,
@@ -126,56 +127,26 @@ export const EnrichedTextInput = ({
     () => mergeWithDefaultHtmlStyle(htmlStyle),
     [htmlStyle]
   );
-
-  const htmlStyleRef = useRef(resolvedHtmlStyle);
-  useEffect(() => {
-    htmlStyleRef.current = resolvedHtmlStyle;
-  }, [resolvedHtmlStyle]);
-
-  const onPasteImagesRef = useRef(onPasteImages);
-  useEffect(() => {
-    onPasteImagesRef.current = onPasteImages;
-  }, [onPasteImages]);
-
-  const mentionIndicatorsRef = useRef(mentionIndicators);
-  useEffect(() => {
-    mentionIndicatorsRef.current = mentionIndicators;
-  }, [mentionIndicators]);
-
-  const mentionCallbacksRef = useRef({
-    onStartMention,
-    onChangeMention,
-    onEndMention,
-    onMentionDetected,
-  });
-  useEffect(() => {
-    mentionCallbacksRef.current = {
+  const mentionCallbacks = useMemo(
+    () => ({
       onStartMention,
       onChangeMention,
       onEndMention,
       onMentionDetected,
-    };
-  }, [onStartMention, onChangeMention, onEndMention, onMentionDetected]);
-
-  const submitBehaviorRef = useRef(submitBehavior);
-  const onSubmitEditingRef = useRef(onSubmitEditing);
-  const onKeyPressRef = useRef(onKeyPress);
-  const editorInstanceRef = useRef<Editor | null>(null);
+    }),
+    [onStartMention, onChangeMention, onEndMention, onMentionDetected]
+  );
 
-  useEffect(() => {
-    submitBehaviorRef.current = submitBehavior;
-  }, [submitBehavior]);
-  useEffect(() => {
-    onSubmitEditingRef.current = onSubmitEditing;
-  }, [onSubmitEditing]);
-  useEffect(() => {
-    onKeyPressRef.current = onKeyPress;
-  }, [onKeyPress]);
+  const htmlStyleRef = useStableRef(resolvedHtmlStyle);
+  const onPasteImagesRef = useStableRef(onPasteImages);
+  const mentionIndicatorsRef = useStableRef(mentionIndicators);
+  const submitBehaviorRef = useStableRef(submitBehavior);
+  const onSubmitEditingRef = useStableRef(onSubmitEditing);
+  const onKeyPressRef = useStableRef(onKeyPress);
+  const useHtmlNormalizerRef = useStableRef(useHtmlNormalizer);
+  const mentionCallbacksRef = useStableRef(mentionCallbacks);
 
-  const useHtmlNormalizerRef = useRef(useHtmlNormalizer);
-  useEffect(() => {
-    useHtmlNormalizerRef.current = useHtmlNormalizer;
-  }, [useHtmlNormalizer]);
+  const editorInstanceRef = useRef<Editor | null>(null);
 
   const handleKeyDown = (doc: Node, event: KeyboardEvent): boolean => {
     onKeyPressRef.current?.(adaptWebToNativeEvent(event, { key: event.key }));
@@ -252,7 +223,7 @@ export const EnrichedTextInput = ({
         showOnlyWhenEditable: true,
       }),
     ],
-    [placeholder]
+    [placeholder, htmlStyleRef, mentionIndicatorsRef]
   );
 
   const editor = useEditor(
@@ -324,7 +295,7 @@ export const EnrichedTextInput = ({
   useEffect(() => {
     if (!editor) return;
     return subscribeMentionEvents(editor, () => mentionCallbacksRef.current);
-  }, [editor]);
+  }, [editor, mentionCallbacksRef]);
 
   useOnChangeHtml(editor, onChangeHtml);
   useOnChangeText(editor, onChangeText);
@@ -388,7 +359,7 @@ export const EnrichedTextInput = ({
       setNativeProps: () => {},
       setTextAlignment: () => {},
     }),
-    [editor]
+    [editor, mentionIndicatorsRef, useHtmlNormalizerRef]
   );
 
   const editorStyle: CSSProperties = useMemo(

src/web/useStableRef.ts

@@ -0,0 +1,12 @@
+import { useEffect, useRef, type RefObject } from 'react';
+
+//TODO: When upgrading to React 19.2 migrate to useEffectEvent instead
+export const useStableRef = <T>(value: T): RefObject<T> => {
+  const ref = useRef<T>(value);
+
+  useEffect(() => {
+    ref.current = value;
+  }, [value]);
+
+  return ref;
+};