feat: add editor

AirWalk-Digital · May 27, 2024 · cdfb993 · cdfb993
1 parent a5baaa7
commit cdfb993
Show file tree

Hide file tree

Showing 5 changed files with 122 additions and 31 deletions.
diff --git a/src/_components/Layouts/MenuWrapper.tsx b/src/_components/Layouts/MenuWrapper.tsx
@@ -2,12 +2,14 @@
 
 import { Box } from '@mui/material';
 import Container from '@mui/material/Container';
-import React, { Suspense, useState } from 'react';
+import { usePathname, useRouter, useSearchParams } from 'next/navigation';
+import React, { Suspense, useEffect, useState } from 'react';
 
 import TopBar from '@/components/Layouts/TopBar';
 import { HeaderMinimalMenu } from '@/components/Menus';
+import EditorWrapper from '@/features/Mdx/EditorWrapper';
 import { getLogger } from '@/lib/Logger';
-import type { MenuStructure } from '@/lib/Types';
+import type { ContentItem, MenuStructure } from '@/lib/Types';
 
 const logger = getLogger();
 
@@ -16,7 +18,7 @@ const logger = getLogger();
 interface MenuWrapperProps {
   menuStructure?: MenuStructure[];
   menuComponent: string;
-  // initialContext?: keyof typeof siteConfig.content;
+  context: ContentItem;
   loading: boolean;
   children: React.ReactElement<any, string | React.JSXElementConstructor<any>>;
 }
@@ -26,55 +28,104 @@ logger.info('Loading MenuWrapper');
 export default function MenuWrapper({
   menuStructure,
   menuComponent,
-  // initialContext,
+  context,
   loading,
   children,
 }: MenuWrapperProps): React.ReactElement {
   const navDrawerWidth = menuStructure ? 300 : 0;
   const topBarHeight = 65;
+  const searchParams = useSearchParams();
+  // const isEditing = Boolean(searchParams.get('edit'));
+  // logger.debug({ isEditing });
+
   const [menuOpen, setMenuOpen] = useState(true);
+  const [isEditing, setIsEditing] = useState(false);
 
   const handleOnNavButtonClick = () => setMenuOpen((prevState) => !prevState);
+  const router = useRouter();
+  const pathname = usePathname();
 
   const MenuComponent =
     menuComponent === 'HeaderMinimalMenu'
       ? HeaderMinimalMenu
       : HeaderMinimalMenu;
 
+  const handleEdit = () => {
+    // const isEditing = Boolean(searchParams.get('edit'));
+    const params = new URLSearchParams(searchParams);
+    if (isEditing) {
+      params.delete('edit');
+      setMenuOpen(true);
+      setIsEditing(false);
+      router.push(
+        pathname + (params.toString() ? `?${params.toString()}` : ''),
+      );
+    } else {
+      params.set('edit', 'true');
+      setMenuOpen(false);
+      setIsEditing(true);
+      router.push(
+        pathname + (params.toString() ? `?${params.toString()}` : ''),
+      );
+    }
+  };
+
+  useEffect(() => {
+    const editParam = searchParams.get('edit');
+    if (editParam === 'true') {
+      setIsEditing(true);
+      setMenuOpen(false);
+    } else {
+      setIsEditing(false);
+    }
+  }, [searchParams]);
+
   return (
     <>
       <TopBar
         onNavButtonClick={handleOnNavButtonClick}
-        navOpen={menuOpen}
+        navOpen={isEditing ? false : menuOpen}
         menu
         logo
         edit
+        handleEdit={() => handleEdit()}
         // topBarHeight={topBarHeight}
       />
-      {menuStructure && (
+
+      {menuStructure && menuOpen && (
         <MenuComponent
           menu={menuStructure}
           open={menuOpen}
           top={topBarHeight}
           drawerWidth={navDrawerWidth}
         />
       )}
-
-      <div
-        style={{
-          marginTop: topBarHeight,
-          paddingLeft: !menuOpen || loading ? 0 : navDrawerWidth,
-        }}
-      >
-        <Box sx={{ px: '2%' }}>
-          <Container sx={{ maxHeight: '100vh', pt: '2%' }}>
-            <Suspense fallback={<p>Loading...</p>}>
-              {children && children}
-            </Suspense>
-            {/* probably should fix this to display a 404 or something if nothing is nested */}
-          </Container>
-        </Box>
-      </div>
+      <Suspense fallback={<p>Loading...</p>}>
+        {isEditing && (
+          <div
+            style={{
+              marginTop: topBarHeight,
+              paddingLeft: !menuOpen || loading ? 0 : navDrawerWidth,
+            }}
+          >
+            <EditorWrapper context={context} />
+          </div>
+        )}
+        {!isEditing && (
+          <div
+            style={{
+              marginTop: topBarHeight,
+              paddingLeft: !menuOpen || loading ? 0 : navDrawerWidth,
+            }}
+          >
+            <Box sx={{ px: '2%' }}>
+              <Container sx={{ maxHeight: '100vh', pt: '2%' }}>
+                {children && children}
+              </Container>
+            </Box>
+          </div>
+        )}
+      </Suspense>
     </>
   );
 }
diff --git a/src/_components/Layouts/TopBar.stories.js b/src/_components/Layouts/TopBar.stories.js
@@ -1,4 +1,5 @@
 import TopBar from '@/components/Layouts/TopBar';
+import { fn } from '@storybook/test';
 
 // More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
 export default {
@@ -15,6 +16,9 @@ export default {
     color: { control: 'color' },
     edit: { control: 'boolean' },
   },
+  args: {
+    handleEdit: fn(),
+  },
 };
 
 // More on writing stories with args: https://storybook.js.org/docs/writing-stories/args

diff --git a/src/_components/Layouts/TopBar.tsx b/src/_components/Layouts/TopBar.tsx
@@ -40,7 +40,7 @@ export interface ComponentProps {
   edit?: boolean;
   // handlePrint?: () => void;
   // handlePresentation?: () => void;
-  handleMore?: () => void;
+  handleEdit?: () => void;
 }
 
 export default function TopBar({
@@ -52,7 +52,7 @@ export default function TopBar({
   edit,
   // handlePrint,
   // handlePresentation,
-  handleMore,
+  handleEdit,
 }: ComponentProps): React.ReactElement {
   // Function body
 
@@ -72,11 +72,11 @@ export default function TopBar({
     setActiveMenu('');
   };
 
-  const handleMoreClick = () => {
-    if (typeof handleMore === 'function') {
-      handleMore();
+  const handleEditClick = () => {
+    if (typeof handleEdit === 'function') {
+      handleEdit();
     } else {
-      // console.error('TopBar: Error: handleMore is not a function');
+      // console.error('TopBar: Error: handleEdit is not a function');
     }
   };
 
@@ -217,7 +217,7 @@ export default function TopBar({
         {edit && (
           <Button
             size="large"
-            onClick={() => handleMoreClick()}
+            onClick={() => handleEditClick()}
             color="inherit"
             startIcon={<AutoAwesomeIcon />}
           >

diff --git a/src/_features/Mdx/EditorWrapper.tsx b/src/_features/Mdx/EditorWrapper.tsx
@@ -0,0 +1,34 @@
+'use client';
+
+import { type MDXEditorMethods } from '@mdxeditor/editor';
+import { Box } from '@mui/material';
+import Container from '@mui/material/Container';
+import React, { useRef } from 'react';
+
+import { Editor } from '@/components/Editor';
+import type { ContentItem } from '@/lib/Types';
+
+interface EditorWrapperProps {
+  context: ContentItem;
+}
+
+export default function EditorWrapper({ context }: EditorWrapperProps) {
+  const editorRef = useRef<MDXEditorMethods | null>(null);
+
+  return (
+    <Box sx={{ px: '2%' }}>
+      <Container sx={{ maxHeight: '100vh', pt: '2%' }}>
+        <Editor
+          context={context}
+          editorRef={editorRef}
+          editorSaveHandler={() => Promise.resolve('')}
+          enabled
+          imagePreviewHandler={() => Promise.resolve('')}
+          imageUploadHandler={() => Promise.resolve('')}
+          markdown="# test"
+          top={0}
+        />
+      </Container>
+    </Box>
+  );
+}
diff --git a/src/app/docs/[[...path]]/page.tsx b/src/app/docs/[[...path]]/page.tsx
@@ -57,7 +57,8 @@ export default async function Page({
               // title={`${siteConfig.title} | ${contentConfig?.path?.charAt(0).toUpperCase()}${contentConfig?.path?.slice(1)}`}
               menuComponent='HeaderMinimalMenu'
               menuStructure={menuStructure}
-              loading={loading}>
+              loading={loading}
+              context={contentConfig}>
               { contentConfig ? <IndexTiles initialContext={{ ...contentConfig, source: '' }} /> : <></> }
               </MenuWrapper>
               </main>
@@ -107,7 +108,8 @@ export default async function Page({
                       // title={`${siteConfig.title} | ${contentConfig?.path?.charAt(0).toUpperCase()}${contentConfig?.path?.slice(1)}`}
                       menuComponent='HeaderMinimalMenu'
                       menuStructure={menuStructure}
-                      loading={loading}>
+                      loading={loading}
+                        context={contentConfig}>
                 <ContentViewer pageContent={pageContentText} contributors={pageContent.contributors} context={ contentConfig } loading={loading} />
                 </MenuWrapper>
               </main>