🪣 🪣 🪣 🪣

packages/app/src/client/app.jsx

@@ -83,7 +83,7 @@ logger.info('unstated containers have been initialized');
  *  value: React Element
  */
 Object.assign(componentMappings, {
-  'grw-sidebar-wrapper': <Sidebar />,
+  'grw-sidebar-wrapper': <Sidebar appContainer={appContainer} />,
 
   'search-page': <SearchPage crowi={appContainer} />,
   'all-in-app-notifications': <InAppNotificationPage />,

packages/app/src/components/Sidebar.tsx

@@ -18,10 +18,15 @@ import SidebarContents from './Sidebar/SidebarContents';
 import { NavigationResizeHexagon } from './Sidebar/NavigationResizeHexagon';
 import StickyStretchableScroller from './StickyStretchableScroller';
 
+import AppContainer from '~/client/services/AppContainer';
+
 const sidebarMinWidth = 240;
 const sidebarMinimizeWidth = 20;
 const sidebarFixedWidthInDrawerMode = 320;
 
+type CommonProps = {
+  appContainer: AppContainer
+}
 
 const GlobalNavigation = () => {
   const { data: isDrawerMode } = useDrawerMode();
@@ -49,7 +54,7 @@ const GlobalNavigation = () => {
   return <SidebarNav onItemSelected={itemSelectedHandler} />;
 };
 
-const SidebarContentsWrapper = () => {
+const SidebarContentsWrapper: FC<CommonProps> = (props: CommonProps) => {
   const [resetKey, setResetKey] = useState(0);
 
   const scrollTargetSelector = '#grw-sidebar-contents-scroll-target';
@@ -73,7 +78,7 @@ const SidebarContentsWrapper = () => {
 
       <div id="grw-sidebar-contents-scroll-target" style={{ minHeight: '100%' }}>
         <div id="grw-sidebar-content-container" onLoad={() => setResetKey(Math.random())}>
-          <SidebarContents />
+          <SidebarContents appContainer={props.appContainer} />
         </div>
       </div>
 
@@ -82,11 +87,7 @@ const SidebarContentsWrapper = () => {
   );
 };
 
-
-type Props = {
-}
-
-const Sidebar: FC<Props> = (props: Props) => {
+const Sidebar: FC<CommonProps> = (props: CommonProps) => {
   const { data: isDrawerMode } = useDrawerMode();
   const { data: isDrawerOpened, mutate: mutateDrawerOpened } = useDrawerOpened();
   const { data: currentProductNavWidth, mutate: mutateProductNavWidth } = useCurrentProductNavWidth();
@@ -313,7 +314,7 @@ const Sidebar: FC<Props> = (props: Props) => {
               >
                 <div className="grw-contextual-navigation-child">
                   <div role="group" className={`grw-contextual-navigation-sub ${showContents ? '' : 'd-none'}`}>
-                    <SidebarContentsWrapper></SidebarContentsWrapper>
+                    <SidebarContentsWrapper appContainer={props.appContainer} />
                   </div>
                 </div>
               </div>

packages/app/src/components/Sidebar/PageTree.tsx

@@ -9,7 +9,13 @@ import {
 import ItemsTree from './PageTree/ItemsTree';
 import PrivateLegacyPages from './PageTree/PrivateLegacyPages';
 
-const PageTree: FC = memo(() => {
+import AppContainer from '~/client/services/AppContainer';
+
+type Props = {
+  appContainer: AppContainer,
+};
+
+const PageTree: FC<Props> = memo((props: Props) => {
   const { t } = useTranslation();
 
   const { data: isGuestUser } = useIsGuestUser();
@@ -67,6 +73,7 @@ const PageTree: FC = memo(() => {
 
       <div className="grw-sidebar-content-body">
         <ItemsTree
+          appContainer={props.appContainer}
           isEnableActions={!isGuestUser}
           targetPath={path}
           targetPathOrId={targetPathOrId}

packages/app/src/components/Sidebar/PageTree/Item.tsx

@@ -22,7 +22,10 @@ import ClosableTextInput, { AlertInfo, AlertType } from '../../Common/ClosableTe
 import { PageItemControl } from '../../Common/Dropdown/PageItemControl';
 import { ItemNode } from './ItemNode';
 
+import AppContainer from '~/client/services/AppContainer';
+
 interface ItemProps {
+  appContainer: AppContainer
   isEnableActions: boolean
   itemNode: ItemNode
   targetPathOrId?: string
@@ -262,11 +265,17 @@ const Item: FC<ItemProps> = (props: ItemProps) => {
     const parentPath = pathUtils.addTrailingSlash(page.path as string);
     const newPagePath = `${parentPath}${inputText}`;
     const isCreatable = pagePathUtils.isCreatablePage(newPagePath);
+    let initialBody = '';
+
+    const isEnabledAttachTitleHeader = props.appContainer.getConfig().isEnabledAttachTitleHeader;
+    if (isEnabledAttachTitleHeader) {
+      initialBody = `# ${newPagePath}`;
+    }
 
     if (isCreatable) {
       const body = {
         path: newPagePath,
-        body: '',
+        body: initialBody,
         grant: page.grant,
         grantUserGroupId: page.grantedGroup,
         createFromPageTree: true,
@@ -404,6 +413,7 @@ const Item: FC<ItemProps> = (props: ItemProps) => {
         isOpen && hasChildren() && currentChildren.map(node => (
           <div key={node.page._id} className="grw-pagetree-item-children">
             <Item
+              appContainer={props.appContainer}
               isEnableActions={isEnableActions}
               itemNode={node}
               isOpen={false}

packages/app/src/components/Sidebar/PageTree/ItemsTree.tsx

@@ -13,6 +13,8 @@ import {
 } from '~/stores/ui';
 import { smoothScrollIntoView } from '~/client/util/smooth-scroll';
 
+import AppContainer from '~/client/services/AppContainer';
+
 /*
  * Utility to generate initial node
  */
@@ -30,7 +32,8 @@ const generateInitialNodeBeforeResponse = (targetAndAncestors: Partial<IPageHasI
   return rootNode;
 };
 
-const generateInitialNodeAfterResponse = (ancestorsChildren: Record<string, Partial<IPageHasId>[]>, rootNode: ItemNode): ItemNode => {
+const generateInitialNodeAfterResponse = (ancestorsChildren: Record<string, Partial<IPageHasId>[]>, rootNode: ItemNode):
+ItemNode => {
   const paths = Object.keys(ancestorsChildren);
 
   let currentNode = rootNode;
@@ -53,6 +56,7 @@ const generateInitialNodeAfterResponse = (ancestorsChildren: Record<string, Part
 };
 
 type ItemsTreeProps = {
+  appContainer: AppContainer
   isEnableActions: boolean
   targetPath: string
   targetPathOrId?: string
@@ -60,6 +64,7 @@ type ItemsTreeProps = {
 }
 
 const renderByInitialNode = (
+    appContainer: AppContainer,
     initialNode: ItemNode,
     isEnableActions: boolean,
     targetPathOrId?: string,
@@ -71,6 +76,7 @@ const renderByInitialNode = (
   return (
     <ul className="grw-pagetree list-group p-3">
       <Item
+        appContainer={appContainer}
         key={initialNode.page.path}
         targetPathOrId={targetPathOrId}
         itemNode={initialNode}
@@ -159,7 +165,9 @@ const ItemsTree: FC<ItemsTreeProps> = (props: ItemsTreeProps) => {
    */
   if (ancestorsChildrenData != null && rootPageData != null) {
     const initialNode = generateInitialNodeAfterResponse(ancestorsChildrenData.ancestorsChildren, new ItemNode(rootPageData.rootPage));
-    return renderByInitialNode(initialNode, isEnableActions, targetPathOrId, onClickDuplicateMenuItem, onClickRenameMenuItem, onClickDeleteMenuItem);
+    return renderByInitialNode(
+      props.appContainer, initialNode, isEnableActions, targetPathOrId, onClickDuplicateMenuItem, onClickRenameMenuItem, onClickDeleteMenuItem,
+    );
   }
 
   /*
@@ -167,7 +175,9 @@ const ItemsTree: FC<ItemsTreeProps> = (props: ItemsTreeProps) => {
    */
   if (targetAndAncestorsData != null) {
     const initialNode = generateInitialNodeBeforeResponse(targetAndAncestorsData.targetAndAncestors);
-    return renderByInitialNode(initialNode, isEnableActions, targetPathOrId, onClickDuplicateMenuItem, onClickRenameMenuItem, onClickDeleteMenuItem);
+    return renderByInitialNode(
+      props.appContainer, initialNode, isEnableActions, targetPathOrId, onClickDuplicateMenuItem, onClickRenameMenuItem, onClickDeleteMenuItem,
+    );
   }
 
   return null;

packages/app/src/components/Sidebar/SidebarContents.tsx

@@ -7,7 +7,10 @@ import CustomSidebar from './CustomSidebar';
 import PageTree from './PageTree';
 import Tag from './Tag';
 
+import AppContainer from '~/client/services/AppContainer';
+
 type Props = {
+  appContainer: AppContainer
 };
 
 const SidebarContents: FC<Props> = (props: Props) => {
@@ -29,7 +32,7 @@ const SidebarContents: FC<Props> = (props: Props) => {
   }
 
   return (
-    <Contents />
+    <Contents appContainer={props.appContainer} />
   );
 
 };