switch textarea to codemirror

.npmrc

@@ -0,0 +1 @@
+@jsr:registry=https://npm.jsr.io

package.json

@@ -15,14 +15,15 @@
   "license": "MIT",
   "dependencies": {
     "@fontsource-variable/m-plus-2": "^5.1.0",
-    "@l4ph/web-novel-parser": "npm:@jsr/l4ph__web-novel-parser",
+    "@l4ph/web-novel-parser": "npm:@jsr/l4ph__web-novel-parser@0.1.1",
     "@macfja/svelte-persistent-store": "^2.4.1",
     "@tauri-apps/api": "^2.0.0-rc.4",
     "@tauri-apps/plugin-fs": "^2.0.0-rc.2",
     "bits-ui": "^0.21.13",
     "clsx": "^2.1.1",
     "lucide-svelte": "^0.441.0",
     "mode-watcher": "^0.4.1",
+    "svelte-codemirror-editor": "^1.4.1",
     "svelte-file-dropzone": "^2.0.8",
     "svelte-sonner": "^0.3.28",
     "tailwind-merge": "^2.5.2",

src/app.css

@@ -70,4 +70,19 @@
     /* Chrome, Safari 対応 */
     display: none;
   }
+}
+
+@layer utilities {
+  .kbd-key {
+    display: inline-block;
+    margin: 0 0.2em;
+    padding: 0.4em 0.6em; 
+    background-color: #e0e0e0;
+    border-bottom: 3px solid #b4b4b4;
+    border-radius: 3px;
+    vertical-align: middle;
+    font-size: 0.9em;
+    line-height: 1.1;
+    box-shadow: 0 1px 2px rgba(0,0,0,.1); 
+  }
 }

src/routes/+layout.svelte

@@ -3,8 +3,13 @@
   import { Toaster } from "$lib/components/ui/sonner";
   import '@fontsource-variable/m-plus-2';
   import { ModeWatcher } from "mode-watcher";
+  import { page } from "$app/stores";
 </script>
 
+<svelte:head>
+  <meta property="og:image" content="{$page.url.origin}/og-image.jpg" />
+</svelte:head>
+
 <Toaster />
 <ModeWatcher />
 <slot />

src/routes/+layout.ts

@@ -1,5 +1,5 @@
 // Tauri doesn't have a Node.js server to do proper SSR
 // so we will use adapter-static to prerender the app (SSG)
 // See: https://v2.tauri.app/start/frontend/sveltekit/ for more info
-export const prerender = true;
+export const prerender = false;
 export const ssr = false;

src/routes/+page.svelte

@@ -8,12 +8,25 @@
   import Button from "@/components/ui/button/button.svelte";
   import { persist, type PersistentStore, createLocalStorage } from "@macfja/svelte-persistent-store"
   import { writable } from "svelte/store"
+  import CodeMirror from "svelte-codemirror-editor"
+  import ScrollArea from "@/components/ui/scroll-area/scroll-area.svelte";
+  import ScrollAreaScrollbar from "@/components/ui/scroll-area/scroll-area-scrollbar.svelte";
+  import { readTextFile } from "./utils/file-render";
+  import { FilePen } from 'lucide-svelte';
+  import { FilePlus2 } from 'lucide-svelte';
 
   let inputText:PersistentStore<string> = persist(writable(""), createLocalStorage(), "inputText")
   let preview: string = "";
   let textarea: Textarea;
   let open:boolean = true;
+  let fileInput: HTMLInputElement;
 
+  function handleFileChange(event: Event) {
+    readTextFile(event, (text: string) => {
+      inputText.set(text);
+    });
+  }
+  
   $: preview = parseNarouNovel($inputText);
 </script>
 
@@ -36,27 +49,38 @@
         <Dialog.Header>
           <Dialog.Title>"書く"にフォーカスする。</Dialog.Title>
           <Dialog.Description>
-            Tawriは、軽量な小説向けのエディタです。
+            <p>Tawriは、軽量な小説向けのエディタです。</p>
+            <p><kbd class="kbd-key">Ctrl</kbd> + <kbd class="kbd-key">i</kbd>でルビ / <kbd class="kbd-key">Ctrl</kbd> + <kbd class="kbd-key">b</kbd>で傍点が入力できます。</p>
           </Dialog.Description>
         </Dialog.Header>
-        <Button on:click={() => open = false}>新しく始める</Button>
-        <Button>ファイルを開く</Button>
+        <Button on:click={() => open = false}><FilePlus2 class="mr-2" />新しく書く</Button>
+        <Button on:click={() => fileInput.click()}>
+          <FilePen class="mr-2" />
+          ファイルを開く
+          <input type="file" accept=".txt" class="hidden" bind:this={fileInput} on:change={handleFileChange} />
+        </Button>
       </Dialog.Content>
     </Dialog.Root>
   {/if}
   <div class="flex h-full bg-background">
     <div class="w-1/2 p-4 flex flex-col">
-      <Textarea
-          bind:value={$inputText}
-          bind:this={textarea}
-          class="w-full h-full resize-none"
-      />
+      <ScrollArea>
+        <CodeMirror
+          bind:value={$inputText} 
+          styles={{
+            "&": {
+              width: "100%",
+              height: "100%",
+              resize: "none"
+            }
+          }}
+          nodebounce
+        />
+      </ScrollArea>
     </div>
     <div class="border-border border-r"></div>
     <div class="w-1/2 p-4 overflow-auto hidden-scrollbar">
-      <div class="prose dark:prose-invert">
-        {@html preview}
-      </div>
+      {@html preview}
     </div>
   </div>
 </main>

src/routes/utils/file-render.ts

@@ -0,0 +1,14 @@
+export function readTextFile(event: Event, callback: (text: string) => void): void {
+    const target = event.target as HTMLInputElement;
+    const file = target.files?.[0];
+
+    if (file) {
+      const reader = new FileReader();
+      reader.onload = (e) => {
+        const text = e.target?.result as string;
+        callback(text);
+      };
+      reader.readAsText(file);
+    }
+  }
+

src/routes/utils/insert-emphasis-to-textarea.ts

@@ -1,4 +1,8 @@
 import { toast } from "svelte-sonner";
 
 export function insertEmphasisToTextarea() {
+    toast(`
+        "小説家になろう"には、傍点用の記法はありません。
+        ルビ記法を使用してください。
+        `)
 }

vite.config.js

@@ -7,6 +7,7 @@ const host = process.env.TAURI_DEV_HOST;
 
 // https://vitejs.dev/config/
 export default defineConfig(async () => ({
+  exclude: ["svelte-codemirror-editor", "codemirror"],
   plugins: [sveltekit()],
 
   // Vite options tailored for Tauri development and only applied in `tauri dev` or `tauri build`