Просмотр исходного кода

fix PageEditor re-rendering problem

Yuki Takei 6 месяцев назад
Родитель
Сommit
7cd014cb81

+ 8 - 7
apps/app/src/client/components/PageEditor/PageEditor.tsx

@@ -45,7 +45,7 @@ import {
   useEditorMode, EditorMode, useEditingMarkdown, useSelectedGrant,
   useWaitingSaveProcessingActions, useSetReservedNextCaretLine, useReservedNextCaretLineValue,
 } from '~/states/ui/editor';
-import { useEditingClientsActions } from '~/states/ui/editor/editing-clients';
+import { useSetEditingClients } from '~/states/ui/editor/editing-clients';
 import { useNextThemes } from '~/stores-universal/use-next-themes';
 import { useEditorSettings } from '~/stores/editor';
 import {
@@ -116,7 +116,7 @@ export const PageEditorSubstance = (props: Props): JSX.Element => {
   const { data: editorSettings } = useEditorSettings();
   const { mutate: mutateIsGrantNormalized } = useSWRxCurrentGrantData(currentPage?._id);
   const user = useCurrentUser();
-  const { mutate: mutateEditingUsers } = useEditingClientsActions();
+  const setEditingClients = useSetEditingClients();
   const onConflict = useConflictResolver();
   const reservedNextCaretLine = useReservedNextCaretLineValue();
   const setReservedNextCaretLine = useSetReservedNextCaretLine();
@@ -276,12 +276,13 @@ export const PageEditorSubstance = (props: Props): JSX.Element => {
     });
   }, [codeMirrorEditor, pageId]);
 
+  const onChangeHandler = useCallback((value: string) => {
+    setMarkdownPreviewWithDebounce(value);
+  }, [setMarkdownPreviewWithDebounce]);
 
   const cmProps = useMemo(() => ({
-    onChange: (value: string) => {
-      setMarkdownPreviewWithDebounce(value);
-    },
-  }), [setMarkdownPreviewWithDebounce]);
+    onChange: onChangeHandler,
+  }), [onChangeHandler]);
 
 
   // set handler to save and return to View
@@ -385,7 +386,7 @@ export const PageEditorSubstance = (props: Props): JSX.Element => {
           user={user ?? undefined}
           pageId={pageId ?? undefined}
           editorSettings={editorSettings}
-          onEditorsUpdated={mutateEditingUsers}
+          onEditorsUpdated={setEditingClients}
           cmProps={cmProps}
         />
       </div>

+ 0 - 13
apps/app/src/states/ui/editor/editing-clients.ts

@@ -13,16 +13,3 @@ export const useEditingClients = (): EditingClient[] => {
 export const useSetEditingClients = () => {
   return useSetAtom(editingClientsAtom);
 };
-
-// Actions hook for mutate compatibility
-export const useEditingClientsActions = () => {
-  const setEditingClients = useSetAtom(editingClientsAtom);
-
-  const mutate = (newClients?: EditingClient[]) => {
-    if (newClients !== undefined) {
-      setEditingClients(newClients);
-    }
-  };
-
-  return { mutate };
-};