merge v1.1.1-dev

tk04 · Apr 2, 2024 · c3a6090 · c3a6090
1 parent 635e6b4
commit c3a6090
Show file tree

Hide file tree

Showing 8 changed files with 57 additions and 72 deletions.
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "Marker",
   "type": "module",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "scripts": {
     "dev": "vite --port 3000",
     "build": "tsc && vite build",

diff --git a/src-tauri/Cargo.toml b/src-tauri/Cargo.toml
@@ -1,6 +1,6 @@
 [package]
 name = "marker"
-version = "1.1.0"
+version = "1.1.1"
 description = "A Secure Visual Markdown Editor"
 authors = ["tk"]
 license = ""

diff --git a/src-tauri/tauri.conf.json b/src-tauri/tauri.conf.json
@@ -8,7 +8,7 @@
   },
   "package": {
     "productName": "Marker",
-    "version": "1.1.0"
+    "version": "1.1.1"
   },
   "tauri": {
     "allowlist": {

diff --git a/src/components/Editor/Editor.tsx b/src/components/Editor/Editor.tsx
@@ -35,14 +35,11 @@ const Editor: React.FC<props> = ({
   collapse,
 }) => {
   const [metadata, setMetadata] = useState(fileMetadata);
-  const [saving, setSaving] = useState(false);
   const [toc, setToc] = useState<TOC>([]);
-  const [error, setError] = useState(false);
   const [updateContent, setUpdateContent] = useState(0);
   const editor = useTextEditor({
     content,
     onUpdate,
-    onCreate: updateTOC,
     folderPath: file.path,
   });
 
@@ -52,10 +49,13 @@ const Editor: React.FC<props> = ({
   async function saveFile() {
     let mdContent = "---\n" + yaml.stringify(metadata) + "---\n";
     mdContent += htmlToMarkdown(editor?.getHTML() || "");
-    await writeTextFile(file.path, mdContent).catch(() => setError(true));
+    await writeTextFile(file.path, mdContent).catch(() =>
+      alert(
+        "An error occurred when trying to save this file. Try again later.",
+      ),
+    );
 
     updateTOC();
-    setSaving(false);
     setUpdateContent(0);
   }
   function updateTOC(initEditor?: EditorType) {
@@ -73,8 +73,8 @@ const Editor: React.FC<props> = ({
             node.attrs.level < prevLevel
               ? node.attrs.level
               : node.attrs.level == prevLevel
-              ? lastVal
-              : lastVal + 1;
+                ? lastVal
+                : lastVal + 1;
         } else {
           currLvl = 1;
         }
@@ -85,18 +85,31 @@ const Editor: React.FC<props> = ({
     setToc(headings);
   }
   useEffect(() => {
-    setSaving(false);
     if (updateContent) {
-      setSaving(true);
-      const timeout = setTimeout(saveFile, 800);
+      const timeout = setTimeout(saveFile, 200);
       return () => {
         clearTimeout(timeout);
       };
     }
-  }, [updateContent, metadata]);
+  }, [updateContent]);
+
   useEffect(() => {
-    editor?.commands.focus();
-  }, [editor]);
+    if (!editor) return;
+    editor?.commands.setContent(content);
+    editor?.setOptions({
+      editorProps: {
+        attributes: {
+          folderPath: file.path,
+        },
+      },
+    });
+
+    updateTOC();
+    setMetadata(fileMetadata);
+    editor?.commands.focus("start");
+    document.querySelector(".editor")?.scroll({ top: 0 });
+  }, [content]);
+
   if (!editor) return;
 
   return (
@@ -108,26 +121,11 @@ const Editor: React.FC<props> = ({
         {editor.storage.characterCount.words()} words
       </p>
       <div
-        className={`duration-75 transition-all h-fit pb-2 flex items-center justify-between px-5 z-20 pt-[7px] ${
-          collapse ? (isMacOS() ? "ml-[130px]" : "ml-[55px]") : "ml-[210px]"
-        }`}
+        className={`duration-75 transition-all h-fit pb-2 flex items-center justify-between px-5 z-20 pt-[7px] ${collapse ? (isMacOS() ? "ml-[130px]" : "ml-[55px]") : "ml-[210px]"
+          }`}
       >
         <div className="flex items-center gap-5">
           <div className="flex items-center gap-2 text-neutral-400 text-sm">
-            <div
-              className={`w-2 h-2 ${
-                error
-                  ? "bg-red-500"
-                  : !saving
-                  ? "bg-green-500"
-                  : "bg-orange-400"
-              } rounded-full`}
-            ></div>
-            <p className="inter">
-              Draft -{" "}
-              {error ? "An error occurred" : saving ? "saving..." : "saved"}
-            </p>
-            <p>-</p>
             <p>{file.path.replace(projectPath + "/", "")}</p>
           </div>
         </div>
@@ -145,9 +143,8 @@ const Editor: React.FC<props> = ({
         <TableOfContents toc={toc} />
       </div>
       <div
-        className={`editor transition-all duration-50 h-full overflow-auto ${
-          !collapse ? "ml-[200px] px-5 lg:px-0 lg:ml-0" : "ml-0"
-        } transition-all duration-75`}
+        className={`editor transition-all duration-50 h-full overflow-auto ${!collapse ? "ml-[200px] px-5 lg:px-0 lg:ml-0" : "ml-0"
+          } transition-all duration-75`}
       >
         <div className={`flex flex-col pt-20 h-full`}>
           <div className="text-editor grow justify-center flex flex-col max-w-[580px] lg:pl-20 xl:pl-0 lg:max-w-[736px] m-auto w-full">
@@ -177,26 +174,27 @@ const MainEditor = ({
   projectPath: string;
   collapse: boolean;
 }) => {
-  const [content, setContent] = useState<null | string>(null);
+  const [content, setContent] = useState<string>("");
   const [metadata, setMetadata] = useState<{ [key: string]: any }>({});
 
   async function getContent() {
-    setContent(null);
+    setContent("");
     let data = await readTextFile(file.path);
     const linesIdx = data.indexOf("---", 2);
     if (data.startsWith("---") && linesIdx != -1) {
       const metadataText = data.slice(3, linesIdx);
       const parsed = yaml.parse(metadataText);
       setMetadata(parsed);
       data = data.slice(data.indexOf("---", 2) + 4);
+    } else {
+      setMetadata({});
     }
     const parsedHTML = await markdownToHtml(data);
     setContent(parsedHTML);
   }
   useEffect(() => {
     getContent();
   }, [file.path]);
-  if (content == null) return;
   return (
     <Editor
       projectPath={projectPath}

diff --git a/src/components/Editor/NodeViews/Image/Image.tsx b/src/components/Editor/NodeViews/Image/Image.tsx
@@ -11,13 +11,23 @@ import type props from "../types";
 import getImgUrl from "@/utils/getImgUrl";
 
 var imageExtensions = ["jpg", "jpeg", "png", "gif", "bmp", "webp", "heif"];
-const ImageView: React.FC<props> = ({ node, selected, updateAttributes }) => {
+const ImageView: React.FC<props> = ({
+  editor,
+  node,
+  selected,
+  updateAttributes,
+}) => {
   const ref = useRef<HTMLDivElement>(null);
+  const [src, setSrc] = useState<string>(node.attrs?.src);
   const [open, setOpen] = useState(false);
   const [isImg, setIsImage] = useState(true);
   async function updateAssetSrc() {
-    const src = await getImgUrl(node.attrs.folderPath, node.attrs.src);
-    updateAttributes({ src, imgPath: node.attrs.src });
+    const src = await getImgUrl(
+      //@ts-ignore - folderPath will always be set
+      editor.options.editorProps.attributes.folderPath,
+      node.attrs.src,
+    );
+    setSrc(src);
   }
   useEffect(() => {
     if (
@@ -47,10 +57,10 @@ const ImageView: React.FC<props> = ({ node, selected, updateAttributes }) => {
         )}px] ${selected && "outline outline-[3px] outline-[#7bf]"}`}
       >
         {isImg ? (
-          <img src={node.attrs.src} />
+          <img src={src} />
         ) : (
           <video className="video" controls>
-            <source src={node.attrs.src} />
+            <source src={src} />
           </video>
         )}
         {selected && isImg && (

diff --git a/src/components/Editor/Titles.tsx b/src/components/Editor/Titles.tsx
@@ -42,7 +42,7 @@ const Titles: React.FC<props> = ({ metadata, setMetadata, onUpdate }) => {
         className="outline-none text-5xl font-semibold resize-none mt-10 w-full block"
         rows={1}
         placeholder="Enter title..."
-        defaultValue={metadata?.title}
+        value={metadata?.title || ""}
         onChange={(e) => {
           setMetadata((p) => ({ ...p, title: e.target.value }));
           onUpdate();
@@ -53,7 +53,7 @@ const Titles: React.FC<props> = ({ metadata, setMetadata, onUpdate }) => {
         className="text-md text-gray-700/70 outline-none resize-none w-full block mt-2"
         rows={1}
         placeholder="Enter subtitle..."
-        defaultValue={metadata?.subtitle}
+        value={metadata?.subtitle || ""}
         onChange={(e) => {
           setMetadata((p) => ({ ...p, subtitle: e.target.value }));
           onUpdate();

diff --git a/src/components/Project/App.tsx b/src/components/Project/App.tsx
@@ -150,7 +150,6 @@ const App: React.FC<props> = ({ project }) => {
         {currFile && (
           <Editor
             file={currFile}
-            key={currFile.path}
             projectPath={project?.dir || ""}
             collapse={collapse}
           />

diff --git a/src/hooks/useEditor.ts b/src/hooks/useEditor.ts
@@ -19,19 +19,18 @@ import Placeholder from "@tiptap/extension-placeholder";
 import ImageView from "@/components/Editor/NodeViews/Image/Image";
 import CodeBlockLowlight from "@/components/Editor/extensions/CodeBlockLowlight";
 import { RichTextLink } from "@/components/Editor/extensions/link-text";
-import { Editor } from "@tiptap/core";
 
 interface props {
   content: string;
-  onUpdate?: () => void;
-  onCreate?: (editor?: Editor) => void;
+  onUpdate: () => void;
   folderPath: string;
 }
-const useTextEditor = ({ content, onUpdate, onCreate, folderPath }: props) => {
+const useTextEditor = ({ content, onUpdate, folderPath }: props) => {
   const editor = useEditor({
     editorProps: {
       attributes: {
         class: `prose h-full`,
+        folderPath,
       },
     },
     extensions: [
@@ -48,24 +47,8 @@ const useTextEditor = ({ content, onUpdate, onCreate, folderPath }: props) => {
             folderPath: {
               default: folderPath,
             },
-            imgPath: {
-              default: null,
-              parseHTML: (element) => {
-                return element.getAttribute("src");
-              },
-            },
           };
         },
-        renderHTML({ HTMLAttributes }) {
-          let { imgPath, ...props } = HTMLAttributes;
-          return [
-            "img",
-            {
-              ...props,
-              src: imgPath,
-            },
-          ];
-        },
         addInputRules() {
           return [
             {
@@ -91,8 +74,6 @@ const useTextEditor = ({ content, onUpdate, onCreate, folderPath }: props) => {
                     tr.mapping.map(end),
                   );
                 }
-
-                tr.scrollIntoView();
               },
             },
           ];
@@ -164,9 +145,6 @@ const useTextEditor = ({ content, onUpdate, onCreate, folderPath }: props) => {
     ],
     content,
     onUpdate,
-    onCreate({ editor }) {
-      if (onCreate) onCreate(editor);
-    },
   });
 
   return editor;