feat: add markown editor preview (#29)

package.json

@@ -36,6 +36,7 @@
     "@tauri-apps/plugin-os": "^2.0.0-beta.2",
     "@tauri-apps/plugin-shell": "^2.0.0-beta.2",
     "@uiw/codemirror-themes": "^4.21.24",
+    "@uiw/react-markdown-preview": "^5.1.2",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
     "cmdk": "^1.0.0",
@@ -50,6 +51,7 @@
     "react-hook-form": "^7.52.0",
     "react-intersection-observer": "^9.8.2",
     "react-resizable-panels": "^2.0.13",
+    "rehype-sanitize": "^6.0.0",
     "react-router-dom": "^6.24.0",
     "sonner": "^1.4.32",
     "tailwind-merge": "^2.3.0",

src/components/editor/Editor.tsx

@@ -4,9 +4,6 @@ import { useCM6Editor } from "~/hooks/useCM6Editor";
 import { useAppContext } from "~/store";
 import { type InfiniteQueryData, type Note } from "~/types";
 
-import EditorControls from "./EditorControls";
-import TagInput from "./TagInput";
-
 export const Editor = () => {
   const { currentNote, setCurrentNote, currentTrashedNote } = useAppContext();
 
@@ -45,20 +42,10 @@ export const Editor = () => {
   });
 
   return (
-    <>
-      {(currentNote ?? currentTrashedNote) && (
-        <div className="flex h-full flex-col">
-          <div
-            className="editor-container h-full w-full overflow-y-auto"
-            ref={editorRef}
-          />
-          <div className="flex items-center border-t border-muted">
-            <TagInput />
-            <EditorControls />
-          </div>
-        </div>
-      )}
-    </>
+    <div
+      className="editor-container h-full w-full overflow-y-auto"
+      ref={editorRef}
+    />
   );
 };
 

src/components/editor/EditorControls.tsx

@@ -37,7 +37,7 @@ export default function EditorControls() {
   }
 
   return (
-    <div className="flex gap-y-2 p-2">
+    <div className="flex gap-y-2 py-2 pl-2 pr-5">
       <Button onClick={handleSendNote} variant="outline" size="icon">
         <SendIcon className="h-[1.2rem] w-[1.2rem]" />
       </Button>

src/components/editor/EditorWrapper.tsx

@@ -0,0 +1,47 @@
+import { useState } from "react";
+
+import { Button } from "~/components/ui/button";
+import { useAppContext } from "~/store";
+import { Eye } from "lucide-react";
+
+import Editor from "./Editor";
+import EditorControls from "./EditorControls";
+import Preview from "./Preview";
+import TagInput from "./TagInput";
+
+export const EditorWrapper = () => {
+  const { currentNote, currentTrashedNote } = useAppContext();
+  const [showPreview, setShowPreview] = useState(false);
+
+  return (
+    <>
+      {(currentNote ?? currentTrashedNote) && (
+        <div className="flex h-full flex-col">
+          {!showPreview && <Editor />}
+          {showPreview && <Preview />}
+          <div className="fixed bottom-[3.75rem] right-2.5 p-2">
+            <Button
+              id="editor-preview-btn"
+              name="editor-preview-btn"
+              type="button"
+              variant="ghost"
+              size="icon"
+              onClick={() =>
+                setShowPreview((prevShowPreview) => !prevShowPreview)
+              }
+              className="rounded-full text-muted-foreground"
+            >
+              <Eye className="h-[1.2rem] w-[1.2rem]" />
+            </Button>
+          </div>
+          <div className="flex items-center border-t border-muted">
+            <TagInput />
+            <EditorControls />
+          </div>
+        </div>
+      )}
+    </>
+  );
+};
+
+export default EditorWrapper;

src/components/editor/Preview.tsx

@@ -0,0 +1,23 @@
+import MarkdownPreview from "@uiw/react-markdown-preview";
+import { useAppContext } from "~/store";
+import rehypeSanitize from "rehype-sanitize";
+
+const rehypePlugins = [rehypeSanitize];
+
+export const Preview = () => {
+  const { currentNote, currentTrashedNote } = useAppContext();
+
+  return (
+    <div className="editor-container h-full w-full overflow-y-auto">
+      <div className="h-full w-full">
+        <MarkdownPreview
+          source={currentNote?.content ?? currentTrashedNote?.content ?? ""}
+          className="pb-40 pl-[22px] pr-[18px] pt-4"
+          rehypePlugins={rehypePlugins}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default Preview;

src/components/editor/TagInput.tsx

@@ -25,7 +25,7 @@ export default function TagInput() {
 
       if (noteId === undefined) return;
 
-      if (currentNote?.tags.some(tag => tag.name === tagName)) return;
+      if (currentNote?.tags.some((tag) => tag.name === tagName)) return;
 
       const getTagResponse = await getTag({ name: tagName });
       const existingTag = getTagResponse.data;
@@ -68,7 +68,7 @@ export default function TagInput() {
   };
 
   return (
-    <div className="w-full px-2">
+    <div className="w-full pl-4 pr-2">
       <div className="flex items-center gap-x-2">
         {currentNote?.tags?.map((tag, tagIndex) => {
           return <NoteTag key={tagIndex} tag={tag} />;

src/components/notes/NoteCard.tsx

@@ -38,8 +38,6 @@ export default function NoteCard({ note }: Props) {
     note.tags = currentNoteTags;
     setCurrentNote(note);
 
-    console.log("currentNote", currentNote);
-
     if (activePage === "settings") {
       setActivePage("editor");
     }

src/pages/HomePage.tsx

@@ -1,5 +1,5 @@
 import ContextSidebar from "~/components/context/ContextSidebar";
-import Editor from "~/components/editor/Editor";
+import EditorWrapper from "~/components/editor/EditorWrapper";
 import NoteFeed from "~/components/notes/NoteFeed";
 import NoteFeedHeader from "~/components/notes/NoteFeedHeader";
 import SearchFeed from "~/components/notes/SearchFeed";
@@ -33,7 +33,7 @@ export default function HomePage() {
         <ResizableHandle />
         <ResizablePanel className="border-sky-500" minSize={10}>
           {activePage === "settings" && <Settings />}
-          {activePage === "editor" && <Editor />}
+          {activePage === "editor" && <EditorWrapper />}
         </ResizablePanel>
       </ResizablePanelGroup>
     </div>

src/styles/globals.css

@@ -75,15 +75,15 @@
     @apply bg-background text-foreground;
   }
 
-  .editor-container .cm-scroller {
-    overflow: auto;
-  }
-
   .editor-container .cm-editor {
     width: 100%;
     height: 100%;
   }
 
+  .editor-container .cm-scroller {
+    overflow: auto;
+  }
+
   .editor-container .cm-content {
     padding-right: 1rem;
     padding-left: 1rem;
@@ -92,6 +92,13 @@
   }
 }
 
+.wmde-markdown {
+  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
+    "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !important;
+  @apply !text-foreground;
+  @apply !bg-background;
+}
+
 /* TODO: fix this so that the shadcn scroll area bar can be used */
 
 /* Scrollbar background */