Transcript tool persistance + better font

package-lock.json

@@ -7,6 +7,7 @@
       "name": "accords-library.com",
       "hasInstallScript": true,
       "dependencies": {
+        "@fontsource/noto-serif-jp": "^4.5.12",
         "@fontsource/opendyslexic": "^4.5.4",
         "@fontsource/share-tech-mono": "^4.5.9",
         "@fontsource/vollkorn": "^4.5.14",
@@ -1547,6 +1548,11 @@
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
       }
     },
+    "node_modules/@fontsource/noto-serif-jp": {
+      "version": "4.5.12",
+      "resolved": "https://registry.npmjs.org/@fontsource/noto-serif-jp/-/noto-serif-jp-4.5.12.tgz",
+      "integrity": "sha512-ojRh30udBocUjV5+wxhAd5t7V1AWsgyyDf5BhKvHyx5DCZ7oxDyIGxYv6fjVDzTyXKsek543FGP2+D5rIoCQjw=="
+    },
     "node_modules/@fontsource/opendyslexic": {
       "version": "4.5.4",
       "resolved": "https://registry.npmjs.org/@fontsource/opendyslexic/-/opendyslexic-4.5.4.tgz",
@@ -12045,6 +12051,11 @@
       "integrity": "sha512-kf9RB0Fg7NZfap83B3QOqOGg9QmD9yBudqQXzzOtn3i4y7ZUXe5ONeW34Gwi+TxhH4mvj72R1Zc300KUMa9Bng==",
       "dev": true
     },
+    "@fontsource/noto-serif-jp": {
+      "version": "4.5.12",
+      "resolved": "https://registry.npmjs.org/@fontsource/noto-serif-jp/-/noto-serif-jp-4.5.12.tgz",
+      "integrity": "sha512-ojRh30udBocUjV5+wxhAd5t7V1AWsgyyDf5BhKvHyx5DCZ7oxDyIGxYv6fjVDzTyXKsek543FGP2+D5rIoCQjw=="
+    },
     "@fontsource/opendyslexic": {
       "version": "4.5.4",
       "resolved": "https://registry.npmjs.org/@fontsource/opendyslexic/-/opendyslexic-4.5.4.tgz",

package.json

@@ -20,6 +20,7 @@
     "upgrade": "ncu --interactive --format group"
   },
   "dependencies": {
+    "@fontsource/noto-serif-jp": "^4.5.12",
     "@fontsource/opendyslexic": "^4.5.4",
     "@fontsource/share-tech-mono": "^4.5.9",
     "@fontsource/vollkorn": "^4.5.14",

src/pages/dev/transcript.tsx

@@ -1,5 +1,7 @@
+import "@fontsource/noto-serif-jp";
 import { GetStaticProps } from "next";
 import { useCallback, useRef, useState } from "react";
+import { atomWithStorage } from "jotai/utils";
 import { AppLayout, AppLayoutRequired } from "components/AppLayout";
 import { Button } from "components/Inputs/Button";
 import { ButtonGroup } from "components/Inputs/ButtonGroup";
@@ -7,12 +9,17 @@ import { ContentPanel, ContentPanelWidthSizes } from "components/Containers/Cont
 import { ToolTip } from "components/ToolTip";
 import { getOpenGraph } from "helpers/openGraph";
 import { getFormat } from "helpers/i18n";
+import { atomPairing, useAtomPair } from "helpers/atoms";
 
 /*
  *                                         ╭─────────────╮
  * ────────────────────────────────────────╯  CONSTANTS  ╰──────────────────────────────────────────
  */
 
+const textAtom = atomPairing(atomWithStorage("transcriptText", ""));
+const fontSizeAtom = atomPairing(atomWithStorage("transcriptFontSize", 1));
+const textOffset = atomPairing(atomWithStorage("transcriptTextOffset", 0));
+
 const SIZE_MULTIPLIER = 1000;
 
 /*
@@ -39,9 +46,9 @@ const swapChar = (char: string, swaps: string[]): string => {
 };
 
 const Transcript = (props: Props): JSX.Element => {
-  const [text, setText] = useState("");
+  const [text, setText] = useAtomPair(textAtom);
-  const [fontSize, setFontSize] = useState(1);
+  const [fontSize, setFontSize] = useAtomPair(fontSizeAtom);
-  const [xOffset, setXOffset] = useState(0);
+  const [xOffset, setXOffset] = useAtomPair(textOffset);
   const [lineIndex, setLineIndex] = useState(0);
 
   const textAreaRef = useRef<HTMLTextAreaElement>(null);
@@ -50,7 +57,7 @@ const Transcript = (props: Props): JSX.Element => {
     if (textAreaRef.current) {
       setText(textAreaRef.current.value);
     }
-  }, []);
+  }, [setText]);
 
   const updateLineIndex = useCallback(() => {
     if (textAreaRef.current) {
@@ -369,10 +376,11 @@ const Transcript = (props: Props): JSX.Element => {
           onKeyUp={updateLineIndex}
           title="Input textarea"
           className="whitespace-pre"
+          value={text}
         />
 
         <p
-          className="h-[80vh] whitespace-nowrap font-[initial] font-bold
+          className="h-[80vh] whitespace-nowrap font-bold [font-family:Noto_Serif_JP]
           [transform-origin:top_right] [writing-mode:vertical-rl]"
           style={{
             transform: `scale(${fontSize}) translateX(${fontSize * xOffset}px)`,