Fixed reader bug and updated deps

.vscode/settings.json

@@ -0,0 +1,4 @@
+{
+  "css.lint.unknownAtRules": "ignore",
+  "editor.rulers": [100]
+}

package.json

@@ -19,61 +19,61 @@
   "dependencies": {
     "@fontsource/opendyslexic": "^4.5.4",
     "@fontsource/share-tech-mono": "^4.5.9",
-    "@fontsource/vollkorn": "^4.5.12",
+    "@fontsource/vollkorn": "^4.5.14",
-    "@fontsource/zen-maru-gothic": "^4.5.15",
+    "@fontsource/zen-maru-gothic": "^4.5.16",
     "@tippyjs/react": "^4.2.6",
     "autoprefixer": "^10.4.13",
     "cuid": "^2.1.8",
-    "isomorphic-dompurify": "^0.25.0",
+    "isomorphic-dompurify": "^0.26.0",
-    "jotai": "^1.12.1",
+    "jotai": "^1.13.1",
     "markdown-to-jsx": "^7.1.8",
-    "marked": "^4.2.5",
+    "marked": "^4.2.12",
     "material-symbols": "^0.4.2",
     "meilisearch": "^0.30.0",
-    "next": "^13.1.1",
+    "next": "^13.1.5",
-    "nodemailer": "^6.8.0",
+    "nodemailer": "^6.9.0",
     "rc-slider": "^10.1.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-hotkeys-hook": "^3.4.7",
     "react-swipeable": "^7.0.0",
-    "react-zoom-pan-pinch": "^2.1.3",
+    "react-zoom-pan-pinch": "^2.2.1",
     "string-natural-compare": "^3.0.1",
     "throttle-debounce": "^5.0.0",
     "tippy.js": "^6.3.7",
     "turndown": "^7.1.1",
-    "ua-parser-js": "^1.0.32",
+    "ua-parser-js": "^1.0.33",
     "usehooks-ts": "^2.9.1",
     "zod": "^3.20.2"
   },
   "devDependencies": {
-    "@digitak/esrun": "^3.2.15",
+    "@digitak/esrun": "^3.2.18",
-    "@graphql-codegen/cli": "^2.16.3",
+    "@graphql-codegen/cli": "^2.16.4",
     "@graphql-codegen/typescript": "2.8.7",
     "@graphql-codegen/typescript-graphql-request": "^4.5.8",
     "@graphql-codegen/typescript-operations": "^2.5.12",
     "@types/marked": "^4.0.8",
     "@types/node": "18.11.18",
     "@types/nodemailer": "^6.4.7",
-    "@types/react": "^18.0.26",
+    "@types/react": "^18.0.27",
     "@types/react-dom": "^18.0.10",
     "@types/string-natural-compare": "^3.0.2",
     "@types/throttle-debounce": "^5.0.0",
     "@types/turndown": "^5.0.1",
     "@types/ua-parser-js": "^0.7.36",
-    "@typescript-eslint/eslint-plugin": "^5.48.0",
+    "@typescript-eslint/eslint-plugin": "^5.49.0",
-    "@typescript-eslint/parser": "^5.48.0",
+    "@typescript-eslint/parser": "^5.49.0",
     "dotenv": "^16.0.3",
-    "eslint": "^8.31.0",
+    "eslint": "^8.32.0",
-    "eslint-config-next": "13.1.1",
+    "eslint-config-next": "13.1.5",
-    "eslint-plugin-import": "^2.26.0",
+    "eslint-plugin-import": "^2.27.5",
     "graphql": "^16.6.0",
     "graphql-request": "^5.1.0",
-    "next-sitemap": "^3.1.44",
+    "next-sitemap": "^3.1.47",
-    "prettier": "^2.8.1",
+    "prettier": "^2.8.3",
-    "prettier-plugin-tailwindcss": "^0.2.1",
+    "prettier-plugin-tailwindcss": "^0.2.2",
     "tailwindcss": "^3.2.4",
-    "ts-unused-exports": "^9.0.1",
+    "ts-unused-exports": "^9.0.2",
     "typescript": "^4.9.4"
   },
   "overrides": {

src/contexts/settings.ts

@@ -1,5 +1,5 @@
 import { useRouter } from "next/router";
-import { useLayoutEffect, useEffect } from "react";
+import { useEffect } from "react";
 import { atom } from "jotai";
 import { atomWithStorage } from "jotai/utils";
 import { atomPairing, useAtomGetter, useAtomPair } from "helpers/atoms";
@@ -39,14 +39,14 @@ export const useSettings = (): void => {
   const [isDarkMode, setDarkMode] = useAtomPair(darkModeAtom);
   const themeMode = useAtomGetter(themeModeAtom);
 
-  useLayoutEffect(() => {
+  useEffect(() => {
     const html = document.getElementsByTagName("html")[0];
     if (isDefined(html)) {
       html.style.fontSize = `${fontSize * 100}%`;
     }
   }, [fontSize]);
 
-  useLayoutEffect(() => {
+  useEffect(() => {
     const next = document.getElementById("__next");
     if (isDefined(next)) {
       if (isDyslexic) {
@@ -66,7 +66,7 @@ export const useSettings = (): void => {
     setDarkMode(themeMode === ThemeMode.Auto ? prefersDarkMode : themeMode === ThemeMode.Dark);
   }, [prefersDarkMode, setDarkMode, themeMode]);
 
-  useLayoutEffect(() => {
+  useEffect(() => {
     const next = document.getElementById("__next");
     if (isDefined(next)) {
       if (isDarkMode) {

src/contexts/webkitFixes.ts

@@ -1,11 +1,11 @@
-import { useLayoutEffect } from "react";
+import { useEffect } from "react";
 import { isDefined } from "helpers/asserts";
 import { useIsWebkit } from "hooks/useIsWebkit";
 
 export const useWebkitFixes = (): void => {
   const isWebkit = useIsWebkit();
 
-  useLayoutEffect(() => {
+  useEffect(() => {
     const next = document.getElementById("__next");
     if (isDefined(next)) {
       if (isWebkit) {

src/helpers/asserts.ts

@@ -51,11 +51,11 @@ export const filterDefined = <T>(t: T[] | null | undefined): NonNullable<T>[] =>
 export const filterHasAttributes = <T, P extends PathDot<T>>(
   t: T[] | null | undefined,
   paths: readonly P[]
-): SelectiveNonNullable<T, typeof paths[number]>[] =>
+): SelectiveNonNullable<T, (typeof paths)[number]>[] =>
   isDefined(t)
     ? (t.filter((item) => hasAttributes(item, paths)) as unknown as SelectiveNonNullable<
         T,
-        typeof paths[number]
+        (typeof paths)[number]
       >[])
     : [];
 

src/pages/dev/showcase/design-system.tsx

@@ -357,11 +357,11 @@ const DesignSystem = (props: Props): JSX.Element => {
         <h3 className="-mt-6 mb-2 text-xl">Text area</h3>
 
         <WithLabel label="Empty">
-          <textarea value="" name="test" title="aria" />
+          <textarea value="" name="test" title="aria" readOnly />
         </WithLabel>
 
         <WithLabel label="Placeholder">
-          <textarea value="" placeholder="Placeholder..." />
+          <textarea value="" placeholder="Placeholder..." readOnly />
         </WithLabel>
 
         <WithLabel label="Filled">
@@ -373,6 +373,7 @@ const DesignSystem = (props: Props): JSX.Element => {
           Itaque atque architecto maiores qui et optio.
           Et consequatur dolorem omnis cupiditate."
             placeholder="Placeholder..."
+            readOnly
           />
         </WithLabel>
 
@@ -386,6 +387,7 @@ const DesignSystem = (props: Props): JSX.Element => {
           Itaque atque architecto maiores qui et optio.
           Et consequatur dolorem omnis cupiditate."
             placeholder="Placeholder..."
+            readOnly
           />
         </WithLabel>
 
@@ -399,6 +401,7 @@ const DesignSystem = (props: Props): JSX.Element => {
           Et consequatur dolorem omnis cupiditate."
             placeholder="Placeholder..."
             disabled
+            readOnly
           />
         </WithLabel>
 

src/pages/library/[slug]/reader.tsx

@@ -66,7 +66,7 @@ const SIDEPAGES_PAGE_WIDTH = 0.02;
 
 const queryParamSchema = z.object({
   query: z.coerce.string().optional(),
-  page: z.coerce.number().positive().optional(),
+  page: z.coerce.number().optional(),
 });
 
 /*