Merge pull request #1027 from matrix-org/langleyd/web_fix_double_init

Stop the composer being re-initialised when customSuggestionPatterns change

platforms/web/lib/useComposerModel.test.tsx

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import { RefObject } from 'react';
+import { act, RefObject } from 'react';
 import { renderHook, waitFor } from '@testing-library/react';
 
 import * as mockRustModel from '../generated/wysiwyg';
@@ -116,4 +116,45 @@ describe('useComposerModel', () => {
         ).toHaveBeenCalledTimes(1);
         expect(mockRustModel.new_composer_model).toHaveBeenCalledTimes(1);
     });
+
+    it("Doesn't double intialize the model if customSuggestionPatterns are set", async () => {
+        const useProps: {
+            editorRef: RefObject<HTMLElement | null>;
+            initialContent?: string;
+            customSuggestionPatterns?: Array<string>;
+        } = {
+            editorRef: mockComposerRef,
+            initialContent: '',
+            customSuggestionPatterns: undefined,
+        };
+
+        const { result, rerender } = renderHook(
+            (props: {
+                editorRef: RefObject<HTMLElement | null>;
+                initialContent?: string;
+                customSuggestionPatterns?: Array<string>;
+            }) =>
+                useComposerModel(
+                    props.editorRef,
+                    props.initialContent,
+                    props.customSuggestionPatterns,
+                ),
+            { initialProps: useProps },
+        );
+
+        // wait for the composerModel to be created
+        await waitFor(() => {
+            expect(result.current.composerModel).not.toBeNull();
+        });
+
+        await act(() => {
+            useProps.customSuggestionPatterns = ['test'];
+            rerender(useProps);
+        });
+
+        expect(mockRustModel.new_composer_model).toHaveBeenCalledTimes(1);
+        expect(
+            mockRustModel.new_composer_model_from_html,
+        ).not.toHaveBeenCalled();
+    });
 });

platforms/web/lib/useComposerModel.ts

@@ -98,16 +98,19 @@ export function useComposerModel(
             } else {
                 contentModel = new_composer_model();
             }
-            if (customSuggestionPatterns) {
-                contentModel.set_custom_suggestion_patterns(
-                    customSuggestionPatterns,
-                );
-            }
             setComposerModel(contentModel);
         },
-        [setComposerModel, editorRef, customSuggestionPatterns],
+        [setComposerModel, editorRef],
     );
 
+    useEffect(() => {
+        if (composerModel && customSuggestionPatterns) {
+            composerModel.set_custom_suggestion_patterns(
+                customSuggestionPatterns,
+            );
+        }
+    }, [composerModel, customSuggestionPatterns]);
+
     useEffect(() => {
         if (editorRef.current) {
             initModel(initialContent);