add preview shortcut

chibat · Nov 2, 2023 · c56c942 · c56c942
1 parent 3a6f523
commit c56c942
Show file tree

Hide file tree

Showing 3 changed files with 63 additions and 8 deletions.
diff --git a/islands/PostEdit.tsx b/islands/PostEdit.tsx
@@ -21,6 +21,7 @@ export default function Edit(props: { post: Post }) {
   }
 
   async function displayPreview() {
+    text.value = textarea.current.value;
     sanitizedHtml.value = await trpc.md2html.query({
       source: text.value,
     });
@@ -31,6 +32,12 @@ export default function Edit(props: { post: Post }) {
     (hljs as any).highlightAll();
   });
 
+  useEffect(() => {
+    if (textarea.current) {
+      textarea.current.focus();
+    }
+  }, textarea.current);
+
   useEffect(() => {
     if (!preview.value) {
       Mousetrap(textarea.current).bind(
@@ -40,6 +47,21 @@ export default function Edit(props: { post: Post }) {
           save();
         },
       );
+      Mousetrap(textarea.current).bind(
+        "mod+p",
+        () => {
+          displayPreview();
+          return false;
+        },
+      );
+    } else {
+      Mousetrap.bind(
+        "mod+p",
+        () => {
+          displayEdit();
+          return false;
+        },
+      );
     }
   }, [preview.value]);
 

diff --git a/islands/PostNew.tsx b/islands/PostNew.tsx
@@ -13,9 +13,28 @@ export default function Post() {
   const sanitizedHtml = useSignal("");
   const textarea = createRef();
 
+  function displayEdit() {
+    preview.value = false;
+  }
+
+  async function displayPreview() {
+    text.value = textarea.current.value;
+    sanitizedHtml.value = await trpc.md2html.query({
+      source: text.value,
+    });
+    preview.value = true;
+  }
+
   useEffect(() => {
     (hljs as any).highlightAll();
   });
+
+  useEffect(() => {
+    if (textarea.current) {
+      textarea.current.focus();
+    }
+  }, textarea.current);
+
   useEffect(() => {
     if (!preview.value) {
       Mousetrap(textarea.current).bind(
@@ -25,6 +44,21 @@ export default function Post() {
           post();
         },
       );
+      Mousetrap(textarea.current).bind(
+        "mod+p",
+        () => {
+          displayPreview();
+          return false;
+        },
+      );
+    } else {
+      Mousetrap.bind(
+        "mod+p",
+        () => {
+          displayEdit();
+          return false;
+        },
+      );
     }
   }, [preview.value]);
 
@@ -50,7 +84,7 @@ export default function Post() {
               <a
                 class={!preview.value ? "nav-link active" : "nav-link"}
                 style={{ cursor: "pointer" }}
-                onClick={() => preview.value = false}
+                onClick={displayEdit}
               >
                 Edit
               </a>
@@ -59,12 +93,7 @@ export default function Post() {
               <a
                 class={preview.value ? "nav-link active" : "nav-link"}
                 style={{ cursor: "pointer" }}
-                onClick={async () => {
-                  sanitizedHtml.value = await trpc.md2html.query({
-                    source: text.value,
-                  });
-                  preview.value = true;
-                }}
+                onClick={displayPreview}
               >
                 Preview
               </a>

diff --git a/routes/help.tsx b/routes/help.tsx
@@ -105,7 +105,11 @@ export default defineRoute(async (req, _ctx) => {
               </tr>
               <tr>
                 <td>Send/Save Post</td>
-                <td>CTRL+Enter</td>
+                <td>(CTRL|⌘)+Enter</td>
+              </tr>
+              <tr>
+                <td>Switch between Preview and Edit</td>
+                <td>(CTRL|⌘)+p</td>
               </tr>
             </tbody>
           </table>