Merge pull request #11 from ut-code/load-markdown

Load markdown

Author: random776

src/App.tsx

@@ -4,16 +4,19 @@ import parse, { Element, HTMLReactParserOptions } from "html-react-parser";
 // import rehypeKatex from "rehype-katex";
 // import remarkMath from "remark-math";
 import Tippy from "@tippyjs/react";
-import markdownLink from "/hoge.md?url";
+// import markdownLink from "/hoge.md?url";
 import { ExtractDefinitions } from "./MDToDefinitions";
 import { MDToHTML } from "./MDToHTML";
 import { replaceExternalSyntax } from "./external-syntax";
 import { ExtractPDF } from "./extractPDF";
 import pdfFile from "/chibutsu_nyumon.pdf";
 import Textarea from "@mui/joy/Textarea";
+import { Button } from "@mui/material";
 
 import "katex/dist/katex.min.css";
 import "tippy.js/dist/tippy.css";
+import UploadMarkdown from "./uploadMarkdown";
+import UploadImage from "./uploadImage";
 
 type positionInfo = null | { top: number; left: number };
 
@@ -28,29 +31,33 @@ export default function App() {
 
   // ドラッグして直接参照できる機能の部分
   const [inputPosition, setInputPosition] = useState<positionInfo>(null); // ドラッグされた位置
-  // const [selectedText, setSelectedText] = useState(""); // ドラッグされた文章 // ...unused
   const [inputValue, setInputValue] = useState("");
-  const [textAreaValue, setTextAreaValue] = useState("");
   const [isTextAreaFocused, setIsTextAreaFocused] = useState(false);
+  const [visualize, setVisualize] = useState(true); // テキストエリアを表示にするか非表示にするか
+  const [fileContent, setFileContent] = useState<string>("");
+  const [imageData, setImageData] = useState<string>("");
 
   // get markdown
+  // useEffect(() => {
+  // fetch(markdownLink)
+  // .then((res) => res.text())
+  // .then((t) => setMarkdown(t))
+  // .catch((err) => console.error("Error fetching Hoge.md:", err));
+  // }, []);
+
+  useEffect(() => {
+    setMarkdown(fileContent);
+  }, [fileContent]);
+
   useEffect(() => {
-    fetch(markdownLink)
-      .then((res) => res.text())
-      .then((t) => setMarkdown(t))
-      .catch((err) => console.error("Error fetching Hoge.md:", err));
-  }, []);
+    localStorage.setItem("item", markdown);
+  }, [markdown]); // markdownの内容が変わるたびにlocalStorageに保存。
 
   // use markdown (separation is necessary because it's async)
-  useEffect(() => void insideUseEffect(), [markdown + textAreaValue]);
+  useEffect(() => void insideUseEffect(), [markdown]);
   async function insideUseEffect() {
     // prepare dictionary
-    let d = ExtractDefinitions(
-      markdown + textAreaValue,
-      opts.prefix,
-      opts.suffix,
-    );
-    console.log(markdown + textAreaValue);
+    let d = ExtractDefinitions(markdown, opts.prefix, opts.suffix);
     const newd = new Map<string, string>();
     const promises: Promise<Map<string, string>>[] = [];
     d.forEach((v, k) => {
@@ -64,7 +71,7 @@ export default function App() {
     // prepare HTML
     var md;
     try {
-      md = replaceExternalSyntax(markdown);
+      md = replaceExternalSyntax(markdown.replace(/!define[\s\S]*$/m, "")); // !define以下をすべて取り去る。
     } catch (e: any) {
       md = e.toString();
     }
@@ -111,6 +118,10 @@ export default function App() {
     // console.log(inputValue) 入力された内容がここに入る。
   };
 
+  const handleImageChange = (content: string) => {
+    setImageData(content);
+  };
+
   const handleTextAreaFocus = () => {
     setIsTextAreaFocused(true);
   };
@@ -119,12 +130,76 @@ export default function App() {
     setIsTextAreaFocused(false);
   };
 
+  // テキストファイルを保存する
+  const saveFile = () => {
+    const blob = new Blob([markdown], {
+      type: ".md, text/markdown",
+    });
+    const link = document.createElement("a");
+    link.href = URL.createObjectURL(blob);
+    link.download = localStorage.getItem("filename") ?? "hoge.md"; // localStorage上に保存したファイル名を使う。
+    link.click();
+  };
+
   return (
     <>
-      <ConvertMarkdown dictionary={dict} html={html} opts={opts} />
+      <div className="save_container">
+        <div className="upload_save">
+          <UploadMarkdown onFileContentChange={setFileContent} />
+          <Button variant="text" onClick={saveFile}>
+            保存
+          </Button>
+        </div>
+        <div className="upload_save">
+          <UploadImage onImageChange={handleImageChange} />
+        </div>
+      </div>
+      {visualize == false && (
+        <>
+          <div className="upload_save">
+            <Button
+              variant="text"
+              onClick={() => {
+                setVisualize(true);
+              }}
+            >
+              編集画面の表示
+            </Button>
+          </div>
+          <div className="wrapper_false">
+            <ConvertMarkdown dictionary={dict} html={html} opts={opts} />
+          </div>
+        </>
+      )}
+      <div>{imageData}</div>
+      {visualize == true && (
+        <>
+          <div className="upload_save">
+            <Button
+              variant="text"
+              onClick={() => {
+                setVisualize(false);
+              }}
+            >
+              編集画面の非表示
+            </Button>
+          </div>
+          <div className="wrapper_true">
+            <div className="convert_markdown">
+              <ConvertMarkdown dictionary={dict} html={html} opts={opts} />
+            </div>
+            <textarea
+              value={markdown}
+              onChange={(event) => {
+                setMarkdown(event.target.value);
+              }}
+              placeholder="編集画面"
+            />
+          </div>
+        </>
+      )}
       <ExtractPDF pdfName={pdfFile} opts={opts} />
       {/* ドラッグして参照する部分 */}
-      <Textarea value={textAreaValue} placeholder="結果" minRows={10} />
       {inputPosition && (
         <>
           <Textarea
@@ -140,9 +215,7 @@ export default function App() {
           />
           <button
             onClick={() =>
-              setTextAreaValue(
-                (textAreaValue) => textAreaValue + "\n" + inputValue,
-              )
+              setMarkdown((markdown) => markdown + "\n" + inputValue + "\n")
             }
             style={{
               position: "absolute",
@@ -160,6 +233,7 @@ export default function App() {
 
 // this uses given dictionary as the source to extract definition from,
 // and given html to render the main note.
+
 function ConvertMarkdown({
   dictionary,
   html,
@@ -170,14 +244,16 @@ function ConvertMarkdown({
 }) {
   let parsing = html.split("\n");
 
-  // this is O(n**2). reduce the order if you can.
+  dictionary = new Map(
+    [...dictionary.entries()].sort((a, b) => a[0].length - b[0].length),
+  ); // Sort dictionary entries by word length to avoid overlapping replacements
+
+  // Replace words with tooltip-enabled spans
   dictionary.forEach((_def: string, word: string) => {
     let idx = 0;
     for (const line of parsing) {
-      // remove popup of the definition itself, because it looks ugly
-      // I hard-coded the assumption that a definition will turn into h2. if you got any better way to do this, do that.
+      // Skip lines that are part of the definition to avoid replacing inside the definition itself
       if (!line.includes(`<h2>${word}</h2>`)) {
-        // make sure ${word} is the first attribute of class; otherwise the word replacement below will fail.
         parsing[idx] = line.replaceAll(
           word,
           `<span class="${word} underline">${word}</span>`,
@@ -186,37 +262,52 @@ function ConvertMarkdown({
       idx++;
     }
   });
+
   let parsedHtml = parsing.join("\n");
 
   const options: HTMLReactParserOptions = {
     replace(domNode) {
       if (!(domNode instanceof Element)) {
         return domNode;
       }
-      // domNode の最初の class 属性を取り出す。 (indexError でなく undefined になるため、[0] は安全)
+
+      const tagName = domNode.tagName;
+
+      // Handle images
+      if (tagName === "img") {
+        const src = domNode.attribs?.src;
+        const alt = domNode.attribs?.alt;
+        return (
+          <img src={src} alt={alt || "image"} style={{ maxWidth: "100%" }} />
+        );
+      }
+
       const word: string | undefined = domNode.attribs?.class?.split(" ")[0];
-      // HTML 的には多分動くが、気持ち悪いので最初の class 属性 = word を排除
       const newClass: string = domNode.attribs?.class
         ?.split(" ")
         .slice(0)
         .join(" ");
-      // 与えられたノードが Element であり、その class 属性が undefined または空文字列でなく、 dictionary 内のいずれかの単語と一致するかどうかを確認
+
+      // Handle words that should show tooltips
       if (
         domNode instanceof Element &&
         domNode.attribs?.class &&
         dictionary.has(word)
       ) {
         return (
-          // dictionary.get(word) is an html and therefore must not be used directly
-          <Tippy content={parse(dictionary.get(word) || "")}>
+          <Tippy
+            content={parse(dictionary.get(word) || "")}
+            className="markdown_tippy"
+          >
             <span className={newClass}>{word}</span>
           </Tippy>
         );
       }
-      // 条件を満たさない場合は、元のノードをそのまま返す
-      return domNode;
+
+      return domNode; // Return the domNode unchanged if no special handling is needed
     },
   };
 
-  return <>{parse(parsedHtml, options)}</>; // パースされた HTML を返す
+return <>{parse(parsedHtml, options)}</>; // パースされた HTML を返す
+
 }

src/index.css

@@ -14,6 +14,10 @@
   -webkit-text-size-adjust: 100%;
 }
 
+#root {
+  width: 100%;
+}
+
 a {
   font-weight: 500;
   color: #646cff;
@@ -91,3 +95,55 @@ button:focus-visible {
   border-bottom: 1.5px dotted rgb(0, 144, 19);
   display: inline-block;
 }
+
+.wrapper_true {
+  display: flex;
+  width: 100%;
+}
+
+.wrapper_true div {
+  width: 47%;
+  margin: 0.5%;
+  padding: 1%;
+  height: 660px;
+  border: 1px solid black;
+  border-radius: 3px;
+  overflow: scroll;
+}
+
+.wrapper_true textarea {
+  width: 47%;
+  height: 660px;
+  margin: 0.5%;
+  padding: 1%;
+  font-family: inherit;
+}
+
+.wrapper_false {
+  margin: 0.5%;
+  padding: 1%;
+  height: 660px;
+  border: 1px solid black;
+  border-radius: 3px;
+  overflow: scroll;
+}
+
+.upload_save {
+  display: inline;
+  border: 1px solid black;
+  border-radius: 3px;
+  margin: 10px;
+  padding: 10px;
+}
+
+.save_container {
+  display: flex;
+}
+
+.convert_markdown img {
+  max-width: 100%;
+}
+
+.markdown_tippy img {
+  max-width: 320px;
+}