backup to swap

thomasgauvin · Jan 21, 2024 · 81ad53a · 81ad53a
1 parent a81150c
commit 81ad53a
Show file tree

Hide file tree

Showing 10 changed files with 66 additions and 28 deletions.
diff --git a/sample-markdown-folder/folder/subfolder/test5.md b/sample-markdown-folder/folder/subfolder/test5.md
@@ -1,3 +1,3 @@
 hello this is a test
 
-# test 5
+# test 5test
diff --git a/sample-markdown-folder/folder/test3.md b/sample-markdown-folder/folder/test3.md
@@ -1,3 +1,3 @@
-hello this is a test
+hello this is a **test**
 
-# test 3this is a test another
+# This is a test
diff --git a/sample-markdown-folder/test2.md b/sample-markdown-folder/test2.md
@@ -8,4 +8,4 @@ this is a new test
 
 ## this is another test asdf
 
-sadfasd
+sadfasdojasljfsad
diff --git a/src/components/FileSystemAdapters/FileSystem/Folder.tsx b/src/components/FileSystemAdapters/FileSystem/Folder.tsx
@@ -1,6 +1,6 @@
 import { useState } from "react";
 import DirectoryNode from "../../../models/DirectoryNode";
-import { ChevronRight } from "lucide-react";
+import { ChevronDown, ChevronRight, ChevronUp } from "lucide-react";
 
 export function Folder({
   node,
@@ -18,31 +18,41 @@ export function Folder({
     <div key={node.name}>
       {depth === 0 ? null : (
         <div
-          className="p-2 hover:bg-zinc-200 rounded"
+          className="p-1 hover:bg-zinc-200/70 rounded flex"
           onClick={() => {
             setExpanded(!expanded);
           }}
         >
-          <ChevronRight />
-          <h3 className="text-sm font-semibold">{node.name}</h3>
+          {expanded ? (
+            <ChevronDown className="h-5 w-5 cursor-pointer hover:bg-zinc-300 rounded" />
+          ) : (
+            <ChevronRight className="h-5 w-5 cursor-pointer hover:bg-zinc-300 rounded" />
+          )}
+          <div className="pl-0.5 text-sm">{node.name}</div>
         </div>
       )}
-      <div className={`ml-4 ${expanded ? "block" : "hidden"}`}>
+      <div
+        className={`${depth === 0 ? "" : "ml-4"} ${
+          expanded ? "block" : "hidden"
+        }`}
+      >
         {node.children.map((child) => (
           <div key={child.name}>
             {child.children.length === 0 ? ( // Render file
               <div
                 className={`ml-${(depth + 1) * 20} cursor-pointer
                 text-sm
-                  p-2 hover:bg-zinc-200 rounded ${
+                  p-1 hover:bg-zinc-200/70 rounded ${
                     child.unsavedChanges ? "italic" : ""
                   }`}
                 onClick={() => {
                   handleFileSelect(child);
                 }}
               >
-                {child.name}
-                {child.unsavedChanges ? "*" : ""}
+                <div className="pl-1">
+                  {child.name}
+                  {child.unsavedChanges ? "*" : ""}
+                </div>
               </div>
             ) : (
               <Folder

diff --git a/src/components/FileSystemAdapters/FileSystem/LocalFileSystem.tsx b/src/components/FileSystemAdapters/FileSystem/LocalFileSystem.tsx
@@ -99,13 +99,13 @@ export const LocalFileSystem = ({
   };
 
   return (
-    <div>
+    <div className="min-w-16 bg-zinc-50">
       {selectedDirectory && (
         <div className="divide-y font-semibold text-base">
           <div className="text-sm p-2 text-slate-500">
             {selectedDirectory.name}
           </div>
-          <div className="font-normal">
+          <div className="font-normal p-1">
             <Folder
               node={selectedDirectory}
               depth={0}
@@ -114,7 +114,9 @@ export const LocalFileSystem = ({
           </div>
         </div>
       )}
-      <button onClick={handleDirectorySelect}>Select Directory</button>
+      {!selectedDirectory && (
+        <button onClick={handleDirectorySelect}>Select Directory</button>
+      )}
     </div>
   );
 };
diff --git a/src/components/MarkdownEditor/FileEditor.tsx b/src/components/MarkdownEditor/FileEditor.tsx
@@ -0,0 +1,15 @@
+import DirectoryNode from "../../models/DirectoryNode";
+import { RemirrorComponent } from "./RemirrorComponent";
+
+export const FileEditor: React.FC = ({
+  selectedFile,
+}: {
+  selectedFile: DirectoryNode | null;
+}) => {
+  return (
+    <div className="flex-1">
+      <TextField.Input size="3" placeholder="Search the docs…" />
+      <RemirrorComponent selectedFile={selectedFile} />
+    </div>
+  );
+};
diff --git a/src/components/MarkdownEditor/RemirrorComponent.tsx b/src/components/MarkdownEditor/RemirrorComponent.tsx
@@ -42,8 +42,8 @@ export const RemirrorComponent: React.FC = ({
   };
 
   return (
-    <div style={{ padding: 16 }}>
-      <div>
+    <div className="ml-4 flex flex-col">
+      <div className="flex flex-row justify-end m-1">
         <button
           className={` bg-blue-500 text-white px-2 py-1 rounded hover:bg-blue-600 focus:outline-none focus:ring focus:border-blue-300`}
           onClick={() => {
@@ -53,12 +53,14 @@ export const RemirrorComponent: React.FC = ({
           Save
         </button>
       </div>
-      <RemirrorMarkdownEditor
-        key={selectedFile?.getFullPath()}
-        initialContent={selectedFile?.fileContent}
-        hooks={hooks}
-        persistMarkdown={handleMarkdownChange}
-      ></RemirrorMarkdownEditor>
+      <div className="flex-1 overflow-y-scroll">
+        <RemirrorMarkdownEditor
+          key={selectedFile?.getFullPath()}
+          initialContent={selectedFile?.fileContent}
+          hooks={hooks}
+          persistMarkdown={handleMarkdownChange}
+        ></RemirrorMarkdownEditor>
+      </div>
     </div>
   );
 };
diff --git a/src/components/MarkdownEditor/RemirrorMarkdownEditor.tsx b/src/components/MarkdownEditor/RemirrorMarkdownEditor.tsx
@@ -39,6 +39,7 @@ import type { CreateEditorStateProps, Extension } from "remirror";
 import type { RemirrorProps, UseThemeProps } from "@remirror/react";
 import { Menu as CustomMenu } from "./RemirrorMenu";
 import { OnChangeMarkdown } from "./OnChangeMarkdown";
+import "./index.css";
 
 interface ReactEditorProps
   extends Pick<CreateEditorStateProps, "stringHandler">,
@@ -92,8 +93,13 @@ export const RemirrorMarkdownEditor: FC<
   });
 
   return (
-    <Remirror manager={manager} autoFocus {...rest}>
-      <MarkdownToolbar />
+    <Remirror
+      manager={manager}
+      autoFocus
+      {...rest}
+      classNames={["overflow-hidden"]}
+    >
+      {/* <MarkdownToolbar /> */}
       <EditorComponent />
       <OnChangeMarkdown
         persistMarkdown={(markdown) => {

diff --git a/src/components/MarkdownEditor/index.css b/src/components/MarkdownEditor/index.css
@@ -0,0 +1,3 @@
+.remirror-editor.ProseMirror.overflow-hidden {
+  overflow: hidden;
+}
diff --git a/src/pages/Editor.tsx b/src/pages/Editor.tsx
@@ -1,6 +1,6 @@
 import { useState } from "react";
 import { LocalFileSystem } from "../components/FileSystemAdapters/FileSystem/LocalFileSystem";
-import { RemirrorComponent } from "../components/MarkdownEditor/RemirrorComponent";
+import { FileEditor } from "../components/MarkdownEditor/FileEditor";
 import DirectoryNode from "../models/DirectoryNode";
 
 export const EditorPage: React.FC = () => {
@@ -11,7 +11,7 @@ export const EditorPage: React.FC = () => {
   );
 
   return (
-    <div className="EditorPage">
+    <div className="EditorPage flex h-dvh w-vw overflow-hidden">
       <LocalFileSystem
         selectedFile={selectedFile}
         setSelectedFile={setSelectedFile}
@@ -20,7 +20,7 @@ export const EditorPage: React.FC = () => {
         selectedFileContent={selectedFileContent}
         setSelectedFileContent={setSelectedFileContent}
       />
-      <RemirrorComponent selectedFile={selectedFile} />
+      <FileEditor selectedFile={selectedFile} />
     </div>
   );
 };
Original file line number	Diff line number	Diff line change
Expand Up		@@ -8,4 +8,4 @@ this is a new test

		## this is another test asdf

		sadfasd
		sadfasdojasljfsad