support nullable editorMode

packages/app/src/components/Page.jsx

@@ -167,6 +167,11 @@ Page.propTypes = {
 
 const PageWrapper = (props) => {
   const { data } = useEditorMode();
+
+  if (data == null) {
+    return null;
+  }
+
   return <Page {...props} editorMode={data} />;
 };
 

packages/app/src/components/Page/TagLabels.jsx

@@ -11,6 +11,7 @@ import EditorContainer from '~/client/services/EditorContainer';
 
 import RenderTagLabels from './RenderTagLabels';
 import TagEditModal from './TagEditModal';
+import { EditorMode } from '~/stores/ui';
 
 class TagLabels extends React.Component {
 
@@ -33,7 +34,7 @@ class TagLabels extends React.Component {
    */
   getTagData() {
     const { editorContainer, pageContainer, editorMode } = this.props;
-    return (editorMode === 'edit') ? editorContainer.state.tags : pageContainer.state.tags;
+    return (editorMode === EditorMode.Editor) ? editorContainer.state.tags : pageContainer.state.tags;
   }
 
   openEditorModal() {
@@ -116,7 +117,7 @@ TagLabels.propTypes = {
   pageContainer: PropTypes.instanceOf(PageContainer).isRequired,
   editorContainer: PropTypes.instanceOf(EditorContainer).isRequired,
 
-  editorMode: PropTypes.string.isRequired,
+  editorMode: PropTypes.string,
 };
 
 export default withTranslation()(TagLabelsWrapper);

packages/app/src/components/PageEditor.jsx

@@ -360,6 +360,11 @@ const PageEditorHOCWrapper = withUnstatedContainers(PageEditor, [AppContainer, P
 const PageEditorWrapper = (props) => {
   const { data: isEditable } = useIsEditable();
   const { data: editorMode } = useEditorMode();
+
+  if (isEditable == null || editorMode || null) {
+    return null;
+  }
+
   return <PageEditorHOCWrapper {...props} isEditable={isEditable} editorMode={editorMode} />;
 };
 
@@ -368,7 +373,7 @@ PageEditor.propTypes = {
   pageContainer: PropTypes.instanceOf(PageContainer).isRequired,
   editorContainer: PropTypes.instanceOf(EditorContainer).isRequired,
 
-  isEditable: PropTypes.bool,
+  isEditable: PropTypes.bool.isRequired,
 
   // TODO: remove this when omitting unstated is completed
   editorMode: PropTypes.string.isRequired,

packages/app/src/components/PageEditorByHackmd.jsx

@@ -424,6 +424,11 @@ const PageEditorByHackmdHOCWrapper = withUnstatedContainers(PageEditorByHackmd,
 
 const PageEditorByHackmdWrapper = (props) => {
   const { data } = useEditorMode();
+
+  if (data == null) {
+    return null;
+  }
+
   return <PageEditorByHackmdHOCWrapper {...props} editorMode={data} />;
 };
 

packages/app/src/components/SavePageControls.jsx

@@ -19,6 +19,7 @@ import GrantSelector from './SavePageControls/GrantSelector';
 
 // TODO: remove this when omitting unstated is completed
 import { useEditorMode } from '~/stores/ui';
+import { useIsEditable } from '~/stores/context';
 
 const logger = loggerFactory('growi:SavePageControls');
 
@@ -114,8 +115,18 @@ class SavePageControls extends React.Component {
 const SavePageControlsHOCWrapper = withUnstatedContainers(SavePageControls, [AppContainer, PageContainer, EditorContainer]);
 
 const SavePageControlsWrapper = (props) => {
-  const { data } = useEditorMode();
-  return <SavePageControlsHOCWrapper {...props} editorMode={data} />;
+  const { data: isEditable } = useIsEditable();
+  const { data: editorMode } = useEditorMode();
+
+  if (isEditable == null || editorMode == null) {
+    return null;
+  }
+
+  if (!isEditable) {
+    return null;
+  }
+
+  return <SavePageControlsHOCWrapper {...props} editorMode={editorMode} />;
 };
 
 SavePageControls.propTypes = {