-
{selectedDirectory && (
-
-
Selected Directory: {selectedDirectory.name}
-
- {entries.map((entry, index) => (
- - {entry}
- ))}
-
+
+
+ {selectedDirectory.name}
+
+
+
+
)}
+
);
};
diff --git a/src/components/MarkdownEditor/RemirrorComponent.tsx b/src/components/MarkdownEditor/RemirrorComponent.tsx
index 27051ed..fc984a4 100644
--- a/src/components/MarkdownEditor/RemirrorComponent.tsx
+++ b/src/components/MarkdownEditor/RemirrorComponent.tsx
@@ -1,8 +1,9 @@
-import { useCallback, useState, useEffect } from "react";
+import { useCallback, useState, useEffect, useReducer } from "react";
import { OnChangeJSON, Remirror, useHelpers, useKeymap } from "@remirror/react";
import { EditorComponent } from "@remirror/react";
import { Menu } from "./RemirrorMenu";
import { RemirrorMarkdownEditor } from "./RemirrorMarkdownEditor";
+import DirectoryNode from "../../models/DirectoryNode";
// Hooks can be added to the context without the need for creating custom components
const hooks = [
@@ -10,7 +11,7 @@ const hooks = [
const { getJSON, getMarkdown } = useHelpers();
const handleSaveShortcut = useCallback(
- ({ state }) => {
+ ({ state }: any) => {
console.log(`Save to backend: ${JSON.stringify(getJSON(state))}`);
return true; // Prevents any further key handlers from being run.
@@ -23,68 +24,41 @@ const hooks = [
},
];
-export const RemirrorComponent: React.FC = () => {
- const [markdownContent, setMarkdownContent] = useState(basicContent);
-
+export const RemirrorComponent: React.FC = ({
+ selectedFile,
+}: {
+ selectedFile: DirectoryNode | null;
+}) => {
useEffect(() => {
- console.log(`Markdown content: ${markdownContent}`);
- }, [markdownContent]);
+ console.log(`Markdown content: ${selectedFile?.fileContent}`);
+ }, [selectedFile?.fileContent]);
+
+ if (!selectedFile?.fileContent) {
+ return
Empty file
;
+ }
+
+ const handleMarkdownChange = (markdown: string) => {
+ selectedFile?.updateFileContent(markdown);
+ };
return (
+
+
+
setMarkdownContent(markdown)}
+ persistMarkdown={handleMarkdownChange}
>
);
};
-
-const basicContent = `
-**Markdown** content is the _best_
-
-
-
-# Heading 1
-
-
-
-## Heading 2
-
-
-
-### Heading 3
-
-
-
-#### Heading 4
-
-
-
-##### Heading 5
-
-
-
-###### Heading 6
-
-
-
-> Blockquote
-
-\`\`\`ts
-const a = 'asdf';
-\`\`\`
-
-playtime is just beginning
-
-## List support
-
-- an unordered
- - list is a thing
- - of beauty
-
-1. As is
-2. An ordered
-3. List
-`;
diff --git a/src/index.css b/src/index.css
index 6119ad9..6e569a5 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,3 +1,7 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
:root {
font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
line-height: 1.5;
@@ -22,14 +26,6 @@ a:hover {
color: #535bf2;
}
-body {
- margin: 0;
- display: flex;
- place-items: center;
- min-width: 320px;
- min-height: 100vh;
-}
-
h1 {
font-size: 3.2em;
line-height: 1.1;
diff --git a/src/main.tsx b/src/main.tsx
index 3d7150d..911a1f2 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -1,10 +1,18 @@
-import React from 'react'
-import ReactDOM from 'react-dom/client'
-import App from './App.tsx'
-import './index.css'
+import React from "react";
+import ReactDOM from "react-dom/client";
+import "./index.css";
+import { createBrowserRouter, RouterProvider } from "react-router-dom";
+import { EditorPage } from "./pages/Editor";
-ReactDOM.createRoot(document.getElementById('root')!).render(
+const router = createBrowserRouter([
+ {
+ path: "/",
+ element:
,
+ },
+]);
+
+ReactDOM.createRoot(document.getElementById("root")!).render(
-
- ,
-)
+
+
+);
diff --git a/src/models/DirectoryNode.ts b/src/models/DirectoryNode.ts
new file mode 100644
index 0000000..e316972
--- /dev/null
+++ b/src/models/DirectoryNode.ts
@@ -0,0 +1,91 @@
+class DirectoryNode {
+ name: string;
+ isExpanded: boolean;
+ children: DirectoryNode[];
+ fileContent?: string; // Store file content here when loaded
+ unsavedChanges: boolean; // Indicator for unsaved changes
+
+ fileHandle?: FileSystemFileHandle;
+ directoryHandle?: FileSystemDirectoryHandle;
+ parent?: DirectoryNode;
+ fullPath?: string;
+
+ constructor(
+ name: string,
+ isExpanded: boolean = false,
+ children: DirectoryNode[] = [],
+ fileHandle?: FileSystemFileHandle,
+ directoryHandle?: FileSystemDirectoryHandle,
+ parent?: DirectoryNode,
+ fullPath?: string
+ ) {
+ this.name = name;
+ this.isExpanded = isExpanded;
+ this.children = children;
+ this.fileHandle = fileHandle;
+ this.directoryHandle = directoryHandle;
+ this.parent = parent;
+ this.fullPath = fullPath;
+ this.fileContent = "";
+ this.unsavedChanges = false;
+ }
+
+ getFullPath(): string {
+ if (this.parent) {
+ console.log("in this parent");
+ const parentPath = this.parent.getFullPath();
+ return `${parentPath}/${this.name}`;
+ }
+
+ if (this.directoryHandle) {
+ console.log("in direcotry handler");
+ return this.directoryHandle.name;
+ }
+
+ if (this.fileHandle) {
+ console.log("in file handler");
+ return `${this.name}`;
+ }
+
+ return this.name;
+ }
+
+ async loadFileContent(): Promise
{
+ this.getFullPath();
+
+ if (!this.fileContent) {
+ if (this.fileHandle) {
+ try {
+ const file = await this.fileHandle.getFile();
+ const content = await file.text();
+ this.fileContent = content;
+ return content;
+ } catch (error) {
+ console.error("Error reading file content:", error);
+ return null;
+ }
+ } else {
+ return null;
+ }
+ } else {
+ return null;
+ }
+ }
+
+ updateFileContent(content: string): void {
+ console.log("in update file content", content);
+ this.fileContent = content;
+ this.unsavedChanges = true; // Set the indicator for unsaved changes
+ }
+
+ async saveFileContent(): Promise {
+ if (this.fileHandle) {
+ const writable = await this.fileHandle.createWritable();
+ await writable.write(this.fileContent || "");
+ await writable.close();
+ this.unsavedChanges = false; // Reset the indicator after saving
+ }
+ }
+}
+
+export default DirectoryNode;
diff --git a/src/pages/Editor.tsx b/src/pages/Editor.tsx
new file mode 100644
index 0000000..e1739d0
--- /dev/null
+++ b/src/pages/Editor.tsx
@@ -0,0 +1,26 @@
+import { useState } from "react";
+import { LocalFileSystem } from "../components/FileSystemAdapters/FileSystem/LocalFileSystem";
+import { RemirrorComponent } from "../components/MarkdownEditor/RemirrorComponent";
+import DirectoryNode from "../models/DirectoryNode";
+
+export const EditorPage: React.FC = () => {
+ const [selectedFile, setSelectedFile] = useState(null); // [selectedFile, setSelectedFile
+ const [selectedFileName, setSelectedFileName] = useState(null);
+ const [selectedFileContent, setSelectedFileContent] = useState(
+ null
+ );
+
+ return (
+
+
+
+
+ );
+};
diff --git a/tailwind.config.js b/tailwind.config.js
new file mode 100644
index 0000000..614c86b
--- /dev/null
+++ b/tailwind.config.js
@@ -0,0 +1,8 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+ content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
+ theme: {
+ extend: {},
+ },
+ plugins: [],
+};