Markdown to be displayed in the editor is created on the client side

packages/app/src/components/PageEditor.tsx

@@ -4,7 +4,9 @@ import React, {
 
 import EventEmitter from 'events';
 
-import { envUtils, IPageHasId, PageGrant } from '@growi/core';
+import {
+  envUtils, IPageHasId, PageGrant, pathUtils,
+} from '@growi/core';
 import detectIndent from 'detect-indent';
 import { useTranslation } from 'next-i18next';
 import { useRouter } from 'next/router';
@@ -16,7 +18,7 @@ import { apiGet, apiPostForm } from '~/client/util/apiv1-client';
 import { getOptionsToSave } from '~/client/util/editor';
 import { IEditorMethods } from '~/interfaces/editor-methods';
 import {
-  useCurrentPathname, useCurrentPageId,
+  useCurrentPathname, useCurrentPageId, useIsEnabledAttachTitleHeader, useTemplateBodyData,
   useIsEditable, useIsIndentSizeForced, useIsUploadableFile, useIsUploadableImage, useEditingMarkdown, useIsNotFound,
 } from '~/stores/context';
 import {
@@ -62,6 +64,8 @@ const PageEditor = React.memo((): JSX.Element => {
   const { data: grantData, mutate: mutateGrant } = useSelectedGrant();
   const { data: pageTags } = usePageTagsForEditors(pageId);
   const { data: editingMarkdown } = useEditingMarkdown();
+  const { data: isEnabledAttachTitleHeader } = useIsEnabledAttachTitleHeader();
+  const { data: templateBodyData } = useTemplateBodyData();
   const { data: isEditable } = useIsEditable();
   const { data: editorMode, mutate: mutateEditorMode } = useEditorMode();
   const { data: isMobile } = useIsMobile();
@@ -77,14 +81,28 @@ const PageEditor = React.memo((): JSX.Element => {
   const { data: rendererOptions } = usePreviewOptions();
 
   const currentRevisionId = currentPage?.revision?._id;
-  const initialValue = editingMarkdown ?? '';
+
+  const initialValue = useMemo(() => {
+    if (!isNotFound) {
+      return editingMarkdown ?? '';
+    }
+
+    let initialValue = '';
+    if (isEnabledAttachTitleHeader && currentPathname != null) {
+      initialValue += `${pathUtils.attachTitleHeader(currentPathname)}\n`;
+    }
+    if (templateBodyData != null) {
+      initialValue += `${templateBodyData}\n`;
+    }
+    return initialValue;
+
+  }, [isNotFound, currentPathname, editingMarkdown, isEnabledAttachTitleHeader, templateBodyData]);
 
   const markdownToSave = useRef<string>(initialValue);
   const [markdownToPreview, setMarkdownToPreview] = useState<string>(initialValue);
 
   const slackChannels = useMemo(() => (slackChannelsData ? slackChannelsData.toString() : ''), [slackChannelsData]);
 
-
   const editorRef = useRef<IEditorMethods>(null);
   const previewRef = useRef<HTMLDivElement>(null);
 

packages/app/src/pages/[[...path]].page.tsx

@@ -57,14 +57,14 @@ import DisplaySwitcher from '../components/Page/DisplaySwitcher';
 // import PageStatusAlert from '../client/js/components/PageStatusAlert';
 import {
   useCurrentUser,
-  useIsLatestRevision, useCurrentRevisionId, useRevisionBody,
+  useIsLatestRevision, useCurrentRevisionId,
   useIsForbidden, useIsNotFound, useIsSharedUser,
   useIsEnabledStaleNotification, useIsIdenticalPath,
   useIsSearchServiceConfigured, useIsSearchServiceReachable, useDisableLinkSharing,
   useDrawioUri, useHackmdUri, useDefaultIndentSize, useIsIndentSizeForced,
   useIsAclEnabled, useIsSearchPage, useTemplateTagData, useTemplateBodyData, useIsEnabledAttachTitleHeader,
   useCsrfToken, useIsSearchScopeChildrenAsDefault, useCurrentPageId, useCurrentPathname,
-  useIsSlackConfigured, useRendererConfig,
+  useIsSlackConfigured, useRendererConfig, useEditingMarkdown,
   useEditorConfig, useIsAllReplyShown, useIsUploadableFile, useIsUploadableImage, useCustomizedLogoSrc, useIsContainerFluid,
 } from '../stores/context';
 
@@ -255,7 +255,7 @@ const GrowiPage: NextPage<Props> = (props: Props) => {
 
   const { data: currentPage } = useSWRxCurrentPage(undefined, pageWithMeta?.data ?? null); // store initial data
 
-  useRevisionBody(pageWithMeta?.data.revision?.body);
+  useEditingMarkdown(pageWithMeta?.data.revision?.body);
 
   const { data: grantData } = useSWRxIsGrantNormalized(pageId);
   const { mutate: mutateSelectedGrant } = useSelectedGrant();
@@ -471,7 +471,7 @@ async function injectRoutingInformation(context: GetServerSidePropsContext, prop
     // TBD
   }
   else if (page == null) {
-    props.isNotFound = true
+    props.isNotFound = true;
     props.isNotCreatablePage = !isCreatablePage(currentPathname);
     // check the page is forbidden or just does not exist.
     const count = isPermalink ? await Page.count({ _id: pageId }) : await Page.count({ path: currentPathname });

packages/app/src/stores/context.tsx

@@ -1,4 +1,4 @@
-import { IUser, pathUtils } from '@growi/core';
+import { IUser } from '@growi/core';
 import { Key, SWRResponse } from 'swr';
 import useSWRImmutable from 'swr/immutable';
 
@@ -186,8 +186,8 @@ export const useIsBlinkedHeaderAtBoot = (initialData?: boolean): SWRResponse<boo
   return useContextSWR('isBlinkedAtBoot', initialData, { fallbackData: false });
 };
 
-export const useRevisionBody = (initialData?: string): SWRResponse<string, Error> => {
-  return useContextSWR('revisionBody', initialData);
+export const useEditingMarkdown = (initialData?: string): SWRResponse<string, Error> => {
+  return useContextSWR('editingMarkdown', initialData);
 };
 
 export const useIsUploadableImage = (initialData?: boolean): SWRResponse<boolean, Error> => {
@@ -252,32 +252,3 @@ export const useIsEditable = (): SWRResponse<boolean, Error> => {
     },
   );
 };
-
-export const useEditingMarkdown = (): SWRResponse<string, Error> => {
-  const { data: isNotFound } = useIsNotFound();
-  const { data: isEnabledAttachTitleHeader } = useIsEnabledAttachTitleHeader();
-  const { data: currentPathname } = useCurrentPathname();
-  const { data: revisionBody } = useRevisionBody();
-  const { data: templateBodyData } = useTemplateBodyData();
-
-  const shoudFetch = !(isNotFound && templateBodyData == null && !isEnabledAttachTitleHeader);
-  const key = shoudFetch ? [isNotFound, isEnabledAttachTitleHeader, currentPathname, revisionBody, templateBodyData] : null;
-
-  return useSWRImmutable(
-    key,
-    (isNotFound: boolean, isEnabledAttachTitleHeader: boolean, currentPathname: string, revisionBody: string, templateBodyData: string) => {
-      if (!isNotFound) {
-        return revisionBody ?? '';
-      }
-
-      let initialEditingMarkdown = '';
-      if (isEnabledAttachTitleHeader) {
-        initialEditingMarkdown += `${pathUtils.attachTitleHeader(currentPathname)}\n`;
-      }
-      if (templateBodyData != null) {
-        initialEditingMarkdown += `${templateBodyData}\n`;
-      }
-      return initialEditingMarkdown;
-    },
-  );
-};