do not render PageEditor if not editable

packages/app/src/components/PageEditor.jsx

@@ -17,6 +17,7 @@ import EditorContainer from '~/client/services/EditorContainer';
 
 // TODO: remove this when omitting unstated is completed
 import { useEditorMode } from '~/stores/ui';
+import { useIsEditable } from '~/stores/context';
 
 const logger = loggerFactory('growi:PageEditor');
 
@@ -309,6 +310,10 @@ class PageEditor extends React.Component {
   }
 
   render() {
+    if (!this.props.isEditable) {
+      return null;
+    }
+
     const config = this.props.appContainer.getConfig();
     const noCdn = envUtils.toBoolean(config.env.NO_CDN);
     const emojiStrategy = this.props.appContainer.getEmojiStrategy();
@@ -353,8 +358,9 @@ class PageEditor extends React.Component {
 const PageEditorHOCWrapper = withUnstatedContainers(PageEditor, [AppContainer, PageContainer, EditorContainer]);
 
 const PageEditorWrapper = (props) => {
-  const { data } = useEditorMode();
-  return <PageEditorHOCWrapper {...props} editorMode={data} />;
+  const { data: isEditable } = useIsEditable();
+  const { data: editorMode } = useEditorMode();
+  return <PageEditorHOCWrapper {...props} isEditable={isEditable} editorMode={editorMode} />;
 };
 
 PageEditor.propTypes = {
@@ -362,6 +368,8 @@ PageEditor.propTypes = {
   pageContainer: PropTypes.instanceOf(PageContainer).isRequired,
   editorContainer: PropTypes.instanceOf(EditorContainer).isRequired,
 
+  isEditable: PropTypes.bool,
+
   // TODO: remove this when omitting unstated is completed
   editorMode: PropTypes.string.isRequired,
 };