Feat/readme

package.json

@@ -65,12 +65,16 @@
     "react-cropper": "^2.3.3",
     "react-dom": "^18.2.0",
     "react-icons": "^5.2.1",
+    "react-katex": "^3.0.1",
     "react-live": "^4.1.5",
     "react-pdf": "^7.7.3",
     "react-router-dom": "6.22.3",
     "react-shepherd": "^4.3.0",
     "react-sizeme": "^3.0.2",
     "recharts": "2.12.3",
+    "rehype-katex": "^7.0.0",
+    "rehype-raw": "^7.0.0",
+    "remark-math": "^6.0.0",
     "simple-base-converter": "^1.0.19",
     "tauri-plugin-store-api": "https://github.com/tauri-apps/tauri-plugin-store",
     "terser": "^5.30.0",
@@ -96,6 +100,7 @@
     "@types/react": "^18.2.73",
     "@types/react-color": "^3.0.12",
     "@types/react-dom": "^18.2.23",
+    "@types/react-katex": "^3.0.4",
     "@types/tinycolor2": "^1.4.6",
     "@types/uuid": "^9.0.8",
     "@typescript-eslint/eslint-plugin": "^7.4.0",
@@ -121,4 +126,4 @@
     "vite": "^5.2.7",
     "vite-tsconfig-paths": "^5.0.1"
   }
-}
+}

src/App.tsx

@@ -50,6 +50,7 @@ const RegexTester = loadable(() => import("./Features/regex/RegexTester"));
 const TextDiff = loadable(() => import("./Features/text/TextDiff"));
 const TextUtils = loadable(() => import("./Features/text/TextUtils"));
 const Markdown = loadable(() => import("./Features/markdown/Markdown"));
+const Readme = loadable(() => import("./Features/markdown/Readme"));
 const YamlJson = loadable(() => import("./Features/json-yaml/Yaml"));
 const Pastebin = loadable(() => import("./Features/pastebin/Pastebin"));
 const Repl = loadable(() => import("./Features/repl/Repl"));
@@ -236,6 +237,7 @@ function App() {
               <Route path="/diff" element={<TextDiff />}></Route>
               <Route path="/text" element={<TextUtils />}></Route>
               <Route path="/markdown" element={<Markdown />}></Route>
+              <Route path="/readme" element={<Readme />}></Route>
               <Route path="/yamljson" element={<YamlJson />}></Route>
               <Route path="/pastebin" element={<Pastebin />}></Route>
               <Route path="/repl" element={<Repl />}></Route>

src/Features/markdown/Editor.tsx

@@ -0,0 +1,64 @@
+// @ts-nocheck
+import "./markdown.css";
+
+import { Box, Group } from "@mantine/core";
+import MarkdownPreview from "@uiw/react-markdown-preview";
+import { Monaco } from "@/Components/MonacoWrapper";
+
+import rehypeKatex from "rehype-katex";
+import rehypeRaw from "rehype-raw";
+import remarkMath from "remark-math";
+
+import "katex/dist/katex.min.css";
+
+const MarkdownEditor = ({
+  file,
+  previewFile,
+  setFile,
+  showPreview = true,
+  showEditor = true,
+}: {
+  file: string;
+  previewFile?: string;
+  setFile: (file: string) => void;
+  showPreview?: boolean;
+  showEditor?: boolean;
+}) => {
+  return (
+    <Group style={{ width: "100%", height: "95%" }} grow gap={10}>
+      {showEditor ? (
+        <Box style={{ width: showPreview ? "50%" : "100%", height: "100%" }}>
+          <Monaco
+            setValue={(e) => setFile(e || "")}
+            value={file}
+            language="markdown"
+            onEditorMounted={(editor) => {
+              // eslint-disable-next-line
+              editor.getContribution(
+                "editor.linkDetector"
+              ).openerService._defaultExternalOpener.openExternal = () => {};
+            }}
+          />
+        </Box>
+      ) : null}
+      {showPreview ? (
+        <Box style={{ width: showEditor ? "50%" : "100%", height: "100%" }}>
+          <MarkdownPreview
+            source={previewFile ?? file}
+            style={{ padding: "15px", height: "100%", overflow: "scroll" }}
+            remarkPlugins={[remarkMath]}
+            rehypePlugins={[rehypeKatex, rehypeRaw]}
+            rehypeRewrite={(node) => {
+              if (node.tagName === "a") {
+                node.properties.target = "_blank";
+                node.properties.rel = "noopener noreferrer";
+              }
+            }}
+          />
+        </Box>
+      ) : null}
+    </Group>
+  );
+};
+
+export default MarkdownEditor;

src/Features/markdown/Markdown.tsx

@@ -1,42 +1,19 @@
-// @ts-nocheck
-import "./markdown.css";
-
-import { Box, Button, Group, Stack } from "@mantine/core";
-import MarkdownPreview from "@uiw/react-markdown-preview";
+import { Button, Group, Stack } from "@mantine/core";
+import { demoMdFile } from "@/Features/markdown/constants";
 import { useState } from "react";
-
-import { Monaco } from "@/Components/MonacoWrapper";
-import { openFileAndGetData, saveDataToFile } from "@/utils/functions";
+import { useFile } from "@/hooks";
+import MarkdownEditor from "@/Features/markdown/Editor";
 
 const Markdown = () => {
-  const [source, setSource] = useState(`
-# Markdown
-- Supports every markdown feature + GitHub Flavored Markdown  
-- Refer [GFM](https://github.github.com/gfm/)
-- Supports footnotes
-- ⛳️ Emoji support
-
-\`\`\`js
-const codeblock = () => {
-    // Code with syntax highlighting 
-}
-\`\`\`
-`);
-
-  const openFile = async () => {
-    const data = await openFileAndGetData(
-      "Open Markdown File",
-      [{ name: "Markdown", extensions: ["md"] }],
-      "text"
-    );
-    setSource(data);
-  };
-
-  const saveFile = async () => {
-    saveDataToFile(source, "Save Markdown File", [
-      { name: "Markdown", extensions: ["md"] },
-    ]);
-  };
+  const [preview, setPreview] = useState(true);
+  const {
+    file: source,
+    setFile: setSource,
+    openFile,
+    saveFile,
+  } = useFile({
+    initialFile: demoMdFile,
+  });
 
   return (
     <Stack
@@ -47,34 +24,11 @@ const codeblock = () => {
       <Group>
         <Button onClick={openFile}>Open md file</Button>
         <Button onClick={saveFile}>Save md file</Button>
+        <Button onClick={() => setPreview((p) => !p)}>
+          {preview ? "Hide" : "Show"} preview
+        </Button>
       </Group>
-      <Group style={{ width: "100%", height: "100%" }} grow gap={10}>
-        <Box style={{ width: "50%", height: "100%" }}>
-          <Monaco
-            setValue={(e) => setSource(e || "")}
-            value={source}
-            language="markdown"
-            onEditorMounted={(editor) => {
-              // eslint-disable-next-line
-              editor.getContribution(
-                "editor.linkDetector"
-              ).openerService._defaultExternalOpener.openExternal = () => {};
-            }}
-          />
-        </Box>
-        <Box style={{ width: "50%", height: "100%" }}>
-          <MarkdownPreview
-            source={source}
-            style={{ padding: "15px", height: "100%", overflow: "scroll" }}
-            rehypeRewrite={(node) => {
-              if (node.tagName === "a") {
-                node.properties.target = "_blank";
-                node.properties.rel = "noopener noreferrer";
-              }
-            }}
-          />
-        </Box>
-      </Group>
+      <MarkdownEditor file={source} setFile={setSource} showPreview={preview} />
     </Stack>
   );
 };