Merge pull request #12 from chibat/shortcut-key-post

shortcut-key post
chibat · Sep 23, 2023 · 537cd51 · 537cd51
2 parents fcfb686 + e24b8ba
commit 537cd51
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 12 deletions.
diff --git a/deno.json b/deno.json
@@ -3,7 +3,7 @@
   "tasks": {
     "win": "deno run --watch=static/,routes/ --allow-env --allow-read --allow-write=.,$LOCALAPPDATA/Temp --allow-run=$(where deno),$LOCALAPPDATA/Cache/esbuild/bin/esbuild-windows-64@0.14.51 --allow-net=:8000,deno.land,esm.sh,accounts.google.com,www.googleapis.com,cdn.jsdelivr.net,$PGHOST dev.ts",
     "arm": "deno run --watch=static/,routes/ --allow-env --allow-read --allow-write=.,/tmp --allow-run=$(which deno),$HOME/.cache/esbuild/bin/esbuild-linux-arm64@0.14.51 --allow-net=:8000,deno.land,esm.sh,accounts.google.com,www.googleapis.com,cdn.jsdelivr.net,$PGHOST dev.ts",
-    "linux": "deno run --watch=static/,routes/ --allow-env --allow-read --allow-write=.,$HOME/.cache/fresh --allow-run=$(which deno),$HOME/.cache/esbuild/bin/@esbuild-linux-x64@0.18.11 --allow-net=:8000,deno.land,dl.deno.land,esm.sh,accounts.google.com,www.googleapis.com,cdn.jsdelivr.net,$PGHOST dev.ts",
+    "linux": "deno run --watch=static/,routes/ --allow-env --allow-read --allow-write=.,$HOME/.cache/fresh,$HOME/.cache/esbuild --allow-run=$(which deno),$HOME/.cache/esbuild/bin/@esbuild-linux-x64@0.18.11 --allow-net=:8000,deno.land,dl.deno.land,esm.sh,accounts.google.com,www.googleapis.com,cdn.jsdelivr.net,$PGHOST,registry.npmjs.org dev.ts",
     "update": "deno run -A -r https://fresh.deno.dev/update .",
     "build": "deno run --allow-env --allow-read --allow-write=.,$HOME/.cache/fresh,$HOME/.cache/esbuild --allow-run=$(which deno),$HOME/.cache/esbuild/bin/@esbuild-linux-x64@0.18.11 --allow-net=deno.land,dl.deno.land,esm.sh,cdn.jsdelivr.net,registry.npmjs.org dev.ts build",
     "preview": "deno run -A main.ts"
@@ -48,4 +48,4 @@
       "_fresh"
     ]
   }
-}
+}
diff --git a/islands/PostEdit.tsx b/islands/PostEdit.tsx
@@ -1,33 +1,46 @@
-import { useSignal } from "@preact/signals";
+import { effect, useSignal } from "@preact/signals";
 import * as hljs from "highlightjs";
 import { useEffect, useState } from "preact/hooks";
 import { Post } from "~/server/db.ts";
 import { trpc } from "~/client/trpc.ts";
+import Mousetrap from "mousetrap";
 
 export default function Edit(props: { post: Post }) {
   const postId = props.post.id;
 
-  const [flag, setFlag] = useState<boolean>(true);
+  const preview = useSignal(false);
   const text = useSignal(props.post.source);
   const draft = useSignal(props.post.draft);
   const sanitizedHtml = useSignal("");
   const [loading, setLoading] = useState<boolean>(false);
 
   function displayEdit() {
-    setFlag(true);
+    preview.value = false;
   }
 
   async function displayPreview() {
     sanitizedHtml.value = await trpc.md2html.query({
       source: text.value,
     });
-    setFlag(false);
+    preview.value = true;
   }
 
   useEffect(() => {
     (hljs as any).highlightAll();
   });
 
+  useEffect(() => {
+    if (!preview.value) {
+      Mousetrap(document.querySelector("textarea") as Element).bind(
+        "mod+enter",
+        () => {
+          text.value = (document.getElementById("textarea") as HTMLTextAreaElement).value
+          save();
+        },
+      );
+    }
+  }, [preview.value]);
+
   async function save() {
     setLoading(true);
     await trpc.updatePost.mutate({
@@ -49,24 +62,25 @@ export default function Edit(props: { post: Post }) {
           <ul class="nav nav-tabs">
             <li class="nav-item">
               <a
-                class={flag ? "nav-link active" : "nav-link"}
+                class={!preview.value ? "nav-link active" : "nav-link"}
                 onClick={displayEdit}
               >
                 Edit
               </a>
             </li>
             <li class="nav-item">
               <a
-                class={!flag ? "nav-link active" : "nav-link"}
+                class={preview.value ? "nav-link active" : "nav-link"}
                 onClick={displayPreview}
               >
                 Preview
               </a>
             </li>
           </ul>
-          {flag &&
+          {!preview.value &&
             (
               <textarea
+                id="textarea"
                 class="form-control mt-3"
                 style={{ height: "500px" }}
                 maxLength={10000}
@@ -76,7 +90,7 @@ export default function Edit(props: { post: Post }) {
               >
               </textarea>
             )}
-          {!flag &&
+          {preview.value &&
             (
               <span
                 class="post"

diff --git a/islands/PostNew.tsx b/islands/PostNew.tsx
@@ -1,5 +1,6 @@
 import { useSignal } from "@preact/signals";
 import * as hljs from "highlightjs";
+import Mousetrap from "mousetrap";
 import { useEffect } from "preact/hooks";
 import { trpc } from "~/client/trpc.ts";
 
@@ -13,6 +14,17 @@ export default function Post() {
   useEffect(() => {
     (hljs as any).highlightAll();
   });
+  useEffect(() => {
+    if (!preview.value) {
+      Mousetrap(document.querySelector("textarea") as Element).bind(
+        "mod+enter",
+        () => {
+          text.value = (document.getElementById("textarea") as HTMLTextAreaElement).value
+          post();
+        },
+      );
+    }
+  }, [preview.value]);
 
   async function post() {
     loading.value = true;
@@ -59,6 +71,7 @@ export default function Post() {
           {!preview.value &&
             (
               <textarea
+                id="textarea"
                 class="form-control mt-3"
                 style={{ height: "500px" }}
                 maxLength={10000}
@@ -87,11 +100,17 @@ export default function Post() {
             type="checkbox"
             checked={draft.value}
             id="flexCheckDefault"
-            onChange={e => {
+            onChange={(e) => {
               draft.value = !draft.value;
             }}
           />
-          <label class="form-check-label" for="flexCheckDefault" style={{ marginRight: '10px' }}>Draft</label>
+          <label
+            class="form-check-label"
+            for="flexCheckDefault"
+            style={{ marginRight: "10px" }}
+          >
+            Draft
+          </label>
           <button
             class="btn btn-primary"
             onClick={post}