タブキー有効可

Author: random776

docs/logo.png

@@ -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("");
@@ -30,6 +34,26 @@ export default function App() {
   const inputRef = useRef<HTMLTextAreaElement | null>(null);
   const previewRef = useRef<HTMLDivElement | 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追加・テンプレート部分
 
   const [buttonName, setButtonName] = useState<string[]>([
@@ -273,6 +297,7 @@ export default function App() {
               onScroll={() => handleScrollSync(textAreaRef, previewRef)}
               onChange={(event) => setMarkdown(event.target.value)}
               placeholder="編集画面"
+              onKeyDown={(e) => handleTabArea({ e, ref: textAreaRef })} // ここ
               onFocus={() => setIsTextAreaFocused(true)}
               onBlur={() => setIsTextAreaFocused(false)}
             />
@@ -287,6 +312,7 @@ export default function App() {
             value={inputValue}
             ref={inputRef}
             onChange={handleInputChange}
+            onKeyDown={(e) => handleTabArea({ e, ref: inputRef })} // ここ
             style={{
               position: "absolute",
               top: `${inputPosition.top}px`,

src/App.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/Home.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.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/UserGuide/UserGuide_2.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">