Merge pull request #7912 from weseek/fix/126575

fix: Unsaved comments remain in the editor when transitioning to a new page

apps/app/src/components/PageComment/CommentEditor.tsx

@@ -2,6 +2,7 @@ import React, {
   useCallback, useState, useRef, useEffect,
 } from 'react';
 
+import { useRouter } from 'next/router';
 import { UserPicture } from '@growi/ui/dist/components/User/UserPicture';
 import dynamic from 'next/dynamic';
 import {
@@ -85,6 +86,20 @@ export const CommentEditor = (props: CommentEditorProps): JSX.Element => {
 
   const editorRef = useRef<IEditorMethods>(null);
 
+  const router = useRouter();
+
+  // UnControlled CodeMirror value is not reset on page transition, so explicitly set the value to the initial value
+  const onRouterChangeComplete = useCallback(() => {
+    editorRef.current?.setValue('');
+  }, []);
+
+  useEffect(() => {
+    router.events.on('routeChangeComplete', onRouterChangeComplete);
+    return () => {
+      router.events.off('routeChangeComplete', onRouterChangeComplete);
+    };
+  }, [onRouterChangeComplete, router.events]);
+
   const handleSelect = useCallback((activeTab: string) => {
     setActiveTab(activeTab);
   }, []);

apps/app/test/cypress/e2e/20-basic-features/20-basic-features--access-to-page.cy.ts

@@ -11,21 +11,6 @@ function openEditor() {
   cy.get('.CodeMirror').should('be.visible');
 }
 
-function appendTextToEditorUntilContains(inputText: string) {
-  const lines: string[] = [];
-  cy.waitUntil(() => {
-    // do
-    cy.get('.CodeMirror textarea').type(inputText, { force: true });
-    // until
-    return cy.get('.CodeMirror-line')
-      .each(($item) => {
-        lines.push($item.text());
-      }).then(() => {
-        return lines.join('\n').endsWith(inputText);
-      });
-  });
-}
-
 context('Access to page', () => {
   const ssPrefix = 'access-to-page-';
 
@@ -107,7 +92,7 @@ context('Access to page', () => {
     openEditor();
 
     // check edited contents after save
-    appendTextToEditorUntilContains(body1);
+    cy.appendTextToEditorUntilContains(body1);
     cy.get('.page-editor-preview-body').should('contain.text', body1);
     cy.getByTestid('page-editor').should('be.visible');
     cy.getByTestid('save-page-btn').click();
@@ -124,7 +109,7 @@ context('Access to page', () => {
     openEditor();
 
     // check editing contents with shortcut key
-    appendTextToEditorUntilContains(body2);
+    cy.appendTextToEditorUntilContains(body2);
     cy.get('.page-editor-preview-body').should('contain.text', body1+body2);
     cy.get('.CodeMirror').click().type(savePageShortcutKey);
     cy.get('.CodeMirror-code').should('contain.text', body1+body2);
@@ -295,7 +280,7 @@ context('Access to Template Editing Mode', () => {
       cy.screenshot(`${ssPrefix}-open-template-page-for-children-in-editor-mode`);
     });
 
-    appendTextToEditorUntilContains(templateBody1);
+    cy.appendTextToEditorUntilContains(templateBody1);
     cy.get('.page-editor-preview-body').should('contain.text', templateBody1);
     cy.getByTestid('page-editor').should('be.visible');
     cy.getByTestid('save-page-btn').click();
@@ -329,7 +314,7 @@ context('Access to Template Editing Mode', () => {
       cy.screenshot(`${ssPrefix}-open-template-page-for-descendants-in-editor-mode`);
     })
 
-    appendTextToEditorUntilContains(templateBody2);
+    cy.appendTextToEditorUntilContains(templateBody2);
     cy.get('.page-editor-preview-body').should('contain.text', templateBody2);
     cy.getByTestid('page-editor').should('be.visible');
     cy.getByTestid('save-page-btn').click();

apps/app/test/cypress/e2e/20-basic-features/20-basic-features--comments.cy.ts

@@ -103,12 +103,7 @@ context('Comment', () => {
       return cy.get('.comment-write').then($elem => $elem.is(':visible'));
     });
 
-    cy.waitUntil(() => {
-      // do
-      cy.get('.CodeMirror').type(username);
-      // wait until
-      return cy.get('.CodeMirror-hints').then($elem => $elem.is(':visible'));
-    });
+    cy.appendTextToEditorUntilContains(username);
 
     cy.get('#comments-container').within(() => { cy.screenshot(`${ssPrefix}4-mention-username-found`) });
     // Click on mentioned username
@@ -129,12 +124,7 @@ context('Comment', () => {
       return cy.get('.comment-write').then($elem => $elem.is(':visible'));
     });
 
-    cy.waitUntil(() => {
-      // do
-      cy.get('.CodeMirror').type(username);
-      // wait until
-      return cy.get('.CodeMirror-hints').then($elem => $elem.is(':visible'));
-    });
+    cy.appendTextToEditorUntilContains(username);
 
     cy.get('#comments-container').within(() => { cy.screenshot(`${ssPrefix}6-mention-username-not-found`) });
     // Click on username not found hint

apps/app/test/cypress/support/commands.ts

@@ -101,3 +101,18 @@ Cypress.Commands.add('collapseSidebar', (isCollapsed: boolean, waitUntilSaving =
   });
 
 });
+
+Cypress.Commands.add('appendTextToEditorUntilContains', (inputText: string) => {
+  const lines: string[] = [];
+  cy.waitUntil(() => {
+    // do
+    cy.get('.CodeMirror textarea').type(inputText, { force: true });
+    // until
+    return cy.get('.CodeMirror-line')
+      .each(($item) => {
+        lines.push($item.text());
+      }).then(() => {
+        return lines.join('\n').endsWith(inputText);
+      });
+  });
+});

apps/app/test/cypress/support/index.ts

@@ -40,6 +40,7 @@ declare global {
        collapseSidebar(isCollapsed: boolean, waitUntilSaving?: boolean): Chainable<void>,
        waitUntilSkeletonDisappear(): Chainable<void>,
        waitUntilSpinnerDisappear(): Chainable<void>,
+       appendTextToEditorUntilContains(inputText: string): Chainable<void>
     }
   }
 }