impl LinkEditorModeHashChange

packages/app/src/components/Common/GrowiLink.tsx

@@ -1,16 +0,0 @@
-import Link, { LinkProps } from 'next/link';
-
-// import { useEditorMode, determineEditorModeByHash } from '~/stores/ui';
-
-export const Growilink = (props: LinkProps): JSX.Element => {
-  // const { mutate } = useEditorMode();
-
-  // // TODO: see href and change editor mode
-  // const url = new URL(props.href.toString(), 'http://example.com');
-  // const hash = url.hash;
-  // if (hash === '#view') {
-
-  // }
-
-  return <Link {...props} />;
-};

packages/app/src/components/Common/LinkEditorModeHashChange.tsx

@@ -0,0 +1,19 @@
+import { FC, useEffect } from 'react';
+
+import Link, { LinkProps } from 'next/link';
+
+import { isEditorModeHash } from '~/stores/ui';
+
+export const LinkEditorModeHashChange: FC<LinkProps> = (props: LinkProps) => {
+
+  const url = new URL(props.href.toString(), 'http://example.com');
+  const hash = url.hash;
+
+  useEffect(() => {
+    if (isEditorModeHash(hash) && window.location.hash !== hash) {
+      window.location.hash = hash;
+    }
+  }, [hash]);
+
+  return <Link {...props} />;
+};

packages/app/src/components/PagePathHierarchicalLink.tsx

@@ -5,6 +5,8 @@ import urljoin from 'url-join';
 
 import LinkedPagePath from '../models/linked-page-path';
 
+import { LinkEditorModeHashChange } from './Common/LinkEditorModeHashChange';
+
 
 type PagePathHierarchicalLinkProps = {
   linkedPagePath: LinkedPagePath,
@@ -49,12 +51,12 @@ const PagePathHierarchicalLink = memo((props: PagePathHierarchicalLinkProps): JS
       : (
         <RootElm>
           <span className="path-segment">
-            <Link href="/" prefetch={false}>
+            <LinkEditorModeHashChange href="/" prefetch={false}>
               <a >
                 <i className="icon-home"></i>
                 <span className="separator">/</span>
               </a>
-            </Link>
+            </LinkEditorModeHashChange>
           </span>
         </RootElm>
       );