タブキー有効可

src/App.tsx

@@ -13,6 +13,10 @@
 import UploadImage from "./uploadImage";
 
 type positionInfo = null | { top: number; left: number };
+type TabAreaArgs = {
+  e: React.KeyboardEvent<HTMLTextAreaElement>;
+  ref: React.MutableRefObject<HTMLTextAreaElement | null>;
+};
 
 export default function App() {
   const [markdown, setMarkdown] = useState("");
@@ -29,6 +33,29 @@
   const textAreaRef = useRef<HTMLTextAreaElement | null>(null);
   const inputRef = useRef<HTMLTextAreaElement | null>(null);
   const previewRef = useRef<HTMLDivElement | null>(null);
+  const [focusedElement, setFocusedElement] = useState<
+    "input" | "textarea" | "textarea2" | null
+  >(null);
+
+  const handleTabArea = ({ e, ref }: TabAreaArgs) => {
+    if (e.key !== "Tab") return; // Tabキー以外は処理しない
+
+    e.preventDefault(); // デフォルトのタブ挿入動作を止める
+
+    if (!ref.current) return;
+
+    const textarea = ref.current;
+    const cursorPosition = textarea.selectionStart;
+    const cursorLeft = textarea.value.substring(0, cursorPosition);
+    const cursorRight = textarea.value.substring(cursorPosition);
+
+    // タブの代わりに半角スペース3つを挿入
+    const tabSpaces = "   ";
+    textarea.value = cursorLeft + tabSpaces + cursorRight;
+
+    // カーソルを3文字分進める
+    textarea.selectionStart = textarea.selectionEnd = cursorPosition + 3;
+  };
 
   // 2/3追加・テンプレート部分
 
@@ -67,7 +94,7 @@
       let md = replaceExternalSyntax(markdown.replace(/!define[\s\S]*$/m, ""));
       try {
         md = replaceExternalSyntax(md);
       } catch (e: any) {
         md = e.toString();
       }
       MDToHTML(md.replaceAll(opts.prefix, "##").replaceAll(opts.suffix, ""))
@@ -123,15 +150,16 @@
   };
 
   const insertDollarSignsAtCursor = (command: string) => {
-    if (inputRef.current) {
+    console.log(focusedElement);
+    if (focusedElement === "input" && inputRef.current) {
       const input = inputRef.current;
-      console.log(input.selectionStart, input.selectionEnd);
       const start = input.selectionStart ?? 0;
       const end = input.selectionEnd ?? 0;
       const newText = `${inputValue.slice(0, start)}$$ \n ${command} \n $$${inputValue.slice(end)}`;
       setInputValue(newText);
-    } else if (textAreaRef.current) {
-      // textAreaRef.currentがnullでないことを確認
+    }
+
+    if (focusedElement === "textarea" && textAreaRef.current) {
       const textarea = textAreaRef.current;
       const start = textarea.selectionStart;
       const end = textarea.selectionEnd;
@@ -142,6 +170,18 @@
         textarea.focus();
       }, 0);
     }
+
+    if (focusedElement === "textarea2" && inputRef.current) {
+      const input = inputRef.current;
+      const start = input.selectionStart ?? 0;
+      const end = input.selectionEnd ?? 0;
+      const newText = `${fixedInputValue.slice(0, start)}$$ \n ${command} \n $$${fixedInputValue.slice(end)}`;
+      setFixedInputValue(newText);
+      setTimeout(() => {
+        input.selectionStart = input.selectionEnd = start + 3;
+        input.focus();
+      }, 0);
+    }
   };
 
   const saveFile = () => {
@@ -227,6 +267,13 @@
               value={fixedInputValue}
               ref={inputRef}
               onChange={handleFixedInputChange}
+              onFocus={() => {
+                setIsTextAreaFocused(true);
+                setFocusedElement("textarea2");
+              }}
+              onBlur={() => {
+                setIsTextAreaFocused(false);
+              }}
             />
             <button
               onClick={() => {
@@ -273,8 +320,14 @@
               onScroll={() => handleScrollSync(textAreaRef, previewRef)}
               onChange={(event) => setMarkdown(event.target.value)}
               placeholder="編集画面"
-              onFocus={() => setIsTextAreaFocused(true)}
-              onBlur={() => setIsTextAreaFocused(false)}
+              onKeyDown={(e) => handleTabArea({ e, ref: textAreaRef })} // ここ
+              onFocus={() => {
+                setIsTextAreaFocused(true);
+                setFocusedElement("textarea");
+              }}
+              onBlur={() => {
+                setIsTextAreaFocused(false);
+              }}
             />
           </div>
           <br />
@@ -287,13 +340,19 @@
             value={inputValue}
             ref={inputRef}
             onChange={handleInputChange}
+            onKeyDown={(e) => handleTabArea({ e, ref: inputRef })} // ここ
             style={{
               position: "absolute",
               top: `${inputPosition.top}px`,
               left: `${inputPosition.left}px`,
             }}
-            onFocus={() => setIsTextAreaFocused(true)}
-            onBlur={() => setIsTextAreaFocused(false)}
+            onFocus={() => {
+              setIsTextAreaFocused(true);
+              setFocusedElement("input");
+            }}
+            onBlur={() => {
+              setIsTextAreaFocused(false);
+            }}
           />
           <button
             onClick={() => {

src/Home.tsx

@@ -1,16 +1,23 @@
 function Home() {
   return (
-    <div>
-      <h1>Mathdownへようこそ</h1>
-      <ul>
-        <li>
-          <a href="/App">アプリを開く</a>
-        </li>
-        <li>
-          <a href="/UserGuide/1">使い方</a>
-        </li>
-      </ul>
-    </div>
+    <>
+      <div className="App">
+        <a href="/home">
+          <img src="../docs/logo.png" width="12.5%" height="12.5%" />
+        </a>
+      </div>
+      <div>
+        <h1>Mathdownへようこそ</h1>
+        <ul>
+          <li>
+            <a href="/App">アプリを開く</a>
+          </li>
+          <li>
+            <a href="/UserGuide/1">使い方</a>
+          </li>
+        </ul>
+      </div>
+    </>
   );
 }
 

src/UserGuide/UserGuide.tsx

@@ -1,11 +1,18 @@
 function UserGuide() {
   return (
-    <div>
-      <h1>使い方</h1>
-      <p>
-        <a href="/UserGuide/1">{"<"}</a>1/2<a href="/UserGuide/2">{">"}</a>
-      </p>
-    </div>
+    <>
+      <div className="App">
+        <a href="/home">
+          <img src="../docs/logo.png" width="12.5%" height="12.5%" />
+        </a>
+      </div>
+      <div>
+        <h1>使い方</h1>
+        <p>
+          <a href="/UserGuide/1">{"<"}</a>1/2<a href="/UserGuide/2">{">"}</a>
+        </p>
+      </div>
+    </>
   );
 }
 

src/UserGuide/UserGuide_2.tsx

@@ -1,11 +1,18 @@
 function UserGuide_2() {
   return (
-    <div>
-      <h1>使い方</h1>
-      <p>
-        <a href="/UserGuide/1">{"<"}</a>2/2<a href="/UserGuide/1">{">"}</a>
-      </p>
-    </div>
+    <>
+      <div className="App">
+        <a href="/home">
+          <img src="../docs/logo.png" width="12.5%" height="12.5%" />
+        </a>
+      </div>
+      <div>
+        <h1>使い方</h1>
+        <p>
+          <a href="/UserGuide/1">{"<"}</a>2/2<a href="/UserGuide/1">{">"}</a>
+        </p>
+      </div>
+    </>
   );
 }
 

src/extractPDF.tsx

@@ -22,7 +22,7 @@
 import Textarea from "@mui/joy/Textarea";
 
 type optsObject = { prefix: string; suffix: string };
 type pdfType = { numPages: number; getPage: (arg0: number) => any }; // React-pdfで取得されるPDFには、合計ページ数を指す`numPage`属性と、それぞれのページの（文字列などの）情報を含む`getPages`を含む。
 // 使用法
 // const page = await pdf.getPage(5); // 5ページ目の情報取得
 // const textContent = await page.getTextContent(); // getTextContent属性で文字列取得。
@@ -41,7 +41,7 @@
   const [explanation, setExplanation] = useState<string>(""); // ユーザー入力の部分。今は暫定的にテキストエリアを置いている。
 
   const array: number[] = [1, 2, 3, 4, 5, 6, 7, 8];
   const reactArray: any = array.map((index) => {
     // ページ数をどうにか見える化したい。
     return (
       <Page
@@ -77,7 +77,7 @@
 
   // pdfから文字を抜き出す非同期関数
   async function extractTextFromPDF(pdf: pdfType) {
     const resultContent: any[] = [];
     const getPageText = async (pageNum: number) => {
       const page = await pdf.getPage(pageNum);
       const textContent = await page.getTextContent(); // console.log(textContent.items); をしてみると良い。
@@ -111,6 +111,11 @@
 
   return (
     <>
+      <div className="App">
+        <a href="/home">
+          <img src="../docs/logo.png" width="12.5%" height="12.5%" />
+        </a>
+      </div>
       <h2>PDFの解説表示</h2>
       <div className="flex">
         <div className="explanation">