@berlysia/vertical-writing-slide-system 0.0.18 → 0.0.19

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@berlysia/vertical-writing-slide-system",
-  "version": "0.0.18",
+  "version": "0.0.19",
   "type": "module",
   "bin": {
     "vertical-slides": "./cli.js"

package/src/App.tsx

@@ -1,13 +1,38 @@
-import { useState, useRef, useEffect } from "react";
+import { useState, useRef, useEffect, useCallback } from "react";
 import slidesContent from "virtual:slides.js";
 
 function App() {
-  const [writingMode, setWritingMode] = useState("vertical-rl");
+  const [writingMode, setWritingMode] = useState(() => {
+    const saved = sessionStorage.getItem("slide-writing-mode");
+    return saved ?? "vertical-rl";
+  });
   const isVertical = writingMode !== "horizontal-tb";
   const slidesRef = useRef<HTMLDivElement>(null);
 
-  const [fontSize, setFontSize] = useState(42);
-  const [withAbsoluteFontSize, setWithAbsoluteFontSize] = useState(false);
+  const [fontSize, setFontSize] = useState(() => {
+    const saved = sessionStorage.getItem("slide-font-size");
+    return saved ? Number(saved) : 42;
+  });
+  const [withAbsoluteFontSize, setWithAbsoluteFontSize] = useState(() => {
+    const saved = sessionStorage.getItem("slide-with-absolute-font-size");
+    return saved === "true";
+  });
+
+  // 状態変更時にsessionStorageに保存
+  useEffect(() => {
+    sessionStorage.setItem("slide-writing-mode", writingMode);
+  }, [writingMode]);
+
+  useEffect(() => {
+    sessionStorage.setItem("slide-font-size", fontSize.toString());
+  }, [fontSize]);
+
+  useEffect(() => {
+    sessionStorage.setItem(
+      "slide-with-absolute-font-size",
+      withAbsoluteFontSize.toString(),
+    );
+  }, [withAbsoluteFontSize]);
 
   // ロード時にハッシュが入ってたらそのページにスクロール
   useEffect(() => {
@@ -44,7 +69,7 @@ function App() {
     };
   }, []);
 
-  function gotoNextSlide(forward = true) {
+  const gotoNextSlide = useCallback((forward = true) => {
     const currentHash = location.hash;
     const currentIndex = parseInt(currentHash.replace("#page-", ""));
     const nextIndex = forward ? currentIndex + 1 : currentIndex - 1;
@@ -52,7 +77,7 @@ function App() {
       return;
     }
     location.hash = `#page-${nextIndex}`;
-  }
+  }, []);
 
   // keydownイベントでページ送り
   useEffect(() => {

package/src/index.css

@@ -40,7 +40,7 @@ code {
   .wrapper {
     width: 100%;
     height: 100%;
-    padding: 1.2em 1.2em;
+    padding: 1.2rem 1.2rem;
 
     position: relative;
 
@@ -60,20 +60,20 @@ code {
   }
 
   h1 {
-    font-size: 1.4em;
+    font-size: 1.4rem;
     font-weight: bold;
     margin: 0;
-    margin-block-end: 0.2em;
+    margin-block-end: 0.2rem;
   }
   ul,
   ol {
     list-style-position: outside;
     margin: 0;
-    margin-block-end: 1em;
+    margin-block-end: 1rem;
   }
   ul ul,
   ol ol {
-    margin-block-end: 1em;
+    margin-block-end: 1rem;
   }
   ul ul ul,
   ol ol ol {
@@ -81,7 +81,7 @@ code {
   }
   p {
     margin: 0;
-    margin-block-end: 0.5em;
+    margin-block-end: 0.5rem;
   }
 
   .wm-toggle {