Merge branch 'master' into fix/putback

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

@@ -1,6 +1,7 @@
 import React, {
   useState, useRef, useImperativeHandle, useCallback, ForwardRefRenderFunction, forwardRef,
   memo,
+  useEffect,
 } from 'react';
 
 import Dropzone from 'react-dropzone';
@@ -60,6 +61,8 @@ const Editor: ForwardRefRenderFunction<IEditorMethods, EditorPropsType> = (props
   const [isUploading, setIsUploading] = useState(false);
   const [isCheatsheetModalShown, setIsCheatsheetModalShown] = useState(false);
 
+  const [navBarItems, setNavBarItems] = useState<JSX.Element[]>([]);
+
   const { t } = useTranslation();
   const { data: editorSettings } = useEditorSettings();
   const { data: defaultIndentSize } = useDefaultIndentSize();
@@ -231,7 +234,7 @@ const Editor: ForwardRefRenderFunction<IEditorMethods, EditorPropsType> = (props
     return (
       <div className="m-0 navbar navbar-default navbar-editor" data-testid="navbar-editor" style={{ minHeight: 'unset' }}>
         <ul className="pl-2 nav nav-navbar">
-          { (editorSubstance()?.getNavbarItems() ?? []).map((item, idx) => {
+          { navBarItems.map((item, idx) => {
             // eslint-disable-next-line react/no-array-index-key
             return <li key={`navbarItem-${idx}`}>{item}</li>;
           }) }
@@ -257,7 +260,18 @@ const Editor: ForwardRefRenderFunction<IEditorMethods, EditorPropsType> = (props
     );
   }, [isCheatsheetModalShown]);
 
-  if (editorSettings == null) {
+  const isReadyToRenderEditor = editorSettings != null;
+  const editorRef = editorSubstance();
+
+  // https://redmine.weseek.co.jp/issues/111731
+  useEffect(() => {
+    if (isReadyToRenderEditor && editorRef != null) {
+      const editorNavBarItems = editorRef.getNavbarItems() ?? [];
+      setNavBarItems(editorNavBarItems);
+    }
+  }, [editorRef, isReadyToRenderEditor]);
+
+  if (!isReadyToRenderEditor) {
     return <></>;
   }