タブキー有効可

src/App.tsx

@@ -13,6 +13,10 @@ import UploadMarkdown from "./uploadMarkdown";
 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 @@ export default function App() {
   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追加・テンプレート部分
 
@@ -123,15 +150,16 @@ export default function App() {
   };
 
   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 @@ export default function App() {
         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 @@ export default function App() {
               value={fixedInputValue}
               ref={inputRef}
               onChange={handleFixedInputChange}
+              onFocus={() => {
+                setIsTextAreaFocused(true);
+                setFocusedElement("textarea2");
+              }}
+              onBlur={() => {
+                setIsTextAreaFocused(false);
+              }}
             />
             <button
               onClick={() => {
@@ -273,8 +320,14 @@ export default function App() {
               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 @@ export default function App() {
             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

@@ -111,6 +111,11 @@ export function ExtractPDF({
 
   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">