remove WrappedEditor

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

@@ -3,7 +3,6 @@ import React, {
 } from 'react';
 
 import { UserPicture } from '@growi/ui';
-import dynamic from 'next/dynamic';
 import {
   Button, TabContent, TabPane,
 } from 'reactstrap';
@@ -21,6 +20,7 @@ import { useSWRxSlackChannels, useIsSlackEnabled } from '~/stores/editor';
 
 import { CustomNavTab } from '../CustomNavigation/CustomNav';
 import NotAvailableForGuest from '../NotAvailableForGuest';
+import Editor from '../PageEditor/Editor';
 import { SlackNotification } from '../SlackNotification';
 
 import { CommentPreview } from './CommentPreview';
@@ -28,9 +28,6 @@ import { CommentPreview } from './CommentPreview';
 import styles from './CommentEditor.module.scss';
 
 
-const Editor = dynamic(() => import('../PageEditor/WrappedEditor'), { ssr: false });
-
-
 const navTabMapping = {
   comment_editor: {
     Icon: () => <i className="icon-settings" />,
@@ -259,7 +256,7 @@ export const CommentEditor = (props: CommentEditorProps): JSX.Element => {
           <TabContent activeTab={activeTab}>
             <TabPane tabId="comment_editor">
               <Editor
-                editorRef={editorRef}
+                ref={editorRef}
                 value={comment}
                 isUploadable={isUploadable}
                 isUploadableFile={isUploadableFile}

packages/app/src/components/PageEditor.tsx

@@ -6,7 +6,6 @@ import EventEmitter from 'events';
 
 import { envUtils, PageGrant } from '@growi/core';
 import detectIndent from 'detect-indent';
-import dynamic from 'next/dynamic';
 import { throttle, debounce } from 'throttle-debounce';
 
 import { saveOrUpdate } from '~/client/services/page-operation';
@@ -30,11 +29,9 @@ import loggerFactory from '~/utils/logger';
 
 
 // import { ConflictDiffModal } from './PageEditor/ConflictDiffModal';
+import Editor from './PageEditor/Editor';
 import Preview from './PageEditor/Preview';
 import scrollSyncHelper from './PageEditor/ScrollSyncHelper';
-// import Editor from './PageEditor/WrappedEditor';
-
-const Editor = dynamic(() => import('./PageEditor/WrappedEditor'), { ssr: false });
 
 
 const logger = loggerFactory('growi:PageEditor');
@@ -395,7 +392,7 @@ const PageEditor = React.memo((): JSX.Element => {
     <div className="d-flex flex-wrap">
       <div className="page-editor-editor-container flex-grow-1 flex-basis-0 mw-0">
         <Editor
-          editorRef={editorRef}
+          ref={editorRef}
           value={initialValue}
           isUploadable={isUploadable}
           isUploadableFile={isUploadableFile}

packages/app/src/components/PageEditor/WrappedEditor.tsx

@@ -1,18 +0,0 @@
-// workaround to use ref with dynamically imported components
-// see: https://github.com/vercel/next.js/issues/4957#issuecomment-783482041
-
-import React, { Ref } from 'react';
-
-import { IEditorMethods } from '~/interfaces/editor-methods';
-
-import Editor, { EditorPropsType } from './Editor';
-
-type Props = EditorPropsType & {
-  editorRef: Ref<IEditorMethods>,
-}
-
-const WrappedEditor = (props: Props): JSX.Element => {
-  return <Editor {...props} ref={props.editorRef} />;
-};
-
-export default WrappedEditor;