feat: mod+enter shortcut for adding cards

h16nning · Feb 10, 2024 · 825e0c2 · 825e0c2
1 parent e8a2011
commit 825e0c2
Show file tree

Hide file tree

Showing 8 changed files with 82 additions and 42 deletions.
diff --git a/src/components/editcard/CardEditor/CardEditor.tsx b/src/components/editcard/CardEditor/CardEditor.tsx
@@ -1,6 +1,12 @@
 import classes from "./CardEditor.module.css";
 import React from "react";
-import { BubbleMenu, Editor, EditorOptions, useEditor } from "@tiptap/react";
+import {
+  BubbleMenu,
+  Editor,
+  EditorOptions,
+  Extension,
+  useEditor,
+} from "@tiptap/react";
 import StarterKit from "@tiptap/starter-kit";
 import Highlight from "@tiptap/extension-highlight";
 import Underline from "@tiptap/extension-underline";
@@ -13,6 +19,8 @@ import { Color } from "@tiptap/extension-color";
 import { TextStyle } from "@tiptap/extension-text-style";
 import { CardEditorControls } from "./CardEditorControls";
 import { useSettings } from "../../../logic/Settings";
+import { Box } from "@mantine/core";
+import { CustomHardBreak } from "./tiptap/CustomHardBreak";
 
 interface CardEditorProps {
   editor: Editor | null;
@@ -24,11 +32,26 @@ export function useCardEditor(props: {
   content: string;
   onUpdate?: EditorOptions["onUpdate"];
   extensions?: any[];
+  finish?: Function;
 }) {
   return useEditor(
     {
       extensions: [
-        StarterKit,
+        Extension.create({
+          name: "addcard",
+          addKeyboardShortcuts() {
+            return {
+              "Mod-Enter": () => {
+                props.finish && props.finish();
+                return false;
+              },
+            };
+          },
+        }),
+        StarterKit.configure({
+          hardBreak: false,
+        }),
+        CustomHardBreak,
         Underline,
         Link,
         Superscript,
@@ -66,9 +89,11 @@ function CardEditor({ editor, controls, className }: CardEditorProps) {
       {areSettingsReady && (
         <>
           {editor && settings.useToolbar && (
-            <RichTextEditor.Toolbar className={classes.toolbar}>
-              <CardEditorControls controls={controls} editor={editor} />
-            </RichTextEditor.Toolbar>
+            <div tabIndex={-1}>
+              <RichTextEditor.Toolbar className={classes.toolbar}>
+                <CardEditorControls controls={controls} editor={editor} />
+              </RichTextEditor.Toolbar>
+            </div>
           )}
           {editor && settings.useBubbleMenu && (
             <BubbleMenu editor={editor}>

diff --git a/src/components/editcard/CardEditor/CardEditorControls.tsx b/src/components/editcard/CardEditor/CardEditorControls.tsx
@@ -17,8 +17,8 @@ export function CardEditorControls({
 }: CardEditorControlsProps) {
   const [settings] = useSettings();
   return (
-    <Box className={classes.controlsWrapper}>
-      <RichTextEditor.ControlsGroup>
+    <Box className={classes.controlsWrapper} tabIndex={-1}>
+      <RichTextEditor.ControlsGroup tabIndex={-1}>
         <RichTextEditor.Bold tabIndex={-1} />
         <RichTextEditor.Italic tabIndex={-1} />
         <RichTextEditor.Underline tabIndex={-1} />
@@ -41,7 +41,7 @@ export function CardEditorControls({
         <RichTextEditor.ClearFormatting tabIndex={-1} />
       </RichTextEditor.ControlsGroup>
 
-      <RichTextEditor.ControlsGroup>
+      <RichTextEditor.ControlsGroup tabIndex={-1}>
         {settings.showListOptionInEditor && (
           <>
             <RichTextEditor.BulletList tabIndex={-1} />
@@ -53,14 +53,16 @@ export function CardEditorControls({
       </RichTextEditor.ControlsGroup>
 
       {settings.showLinkOptionInEditor && (
-        <RichTextEditor.ControlsGroup>
+        <RichTextEditor.ControlsGroup tabIndex={-1}>
           <RichTextEditor.Link tabIndex={-1} />
           <RichTextEditor.Unlink tabIndex={-1} />
         </RichTextEditor.ControlsGroup>
       )}
-      <RichTextEditor.ControlsGroup>{controls}</RichTextEditor.ControlsGroup>
+      <RichTextEditor.ControlsGroup tabIndex={-1}>
+        {controls}
+      </RichTextEditor.ControlsGroup>
 
-      <RichTextEditor.ControlsGroup>
+      <RichTextEditor.ControlsGroup tabIndex={-1}>
         <EditorOptionsMenu />
       </RichTextEditor.ControlsGroup>
     </Box>

diff --git a/src/components/editcard/CardEditor/NormalCardEditor.tsx b/src/components/editcard/CardEditor/NormalCardEditor.tsx
@@ -1,5 +1,5 @@
 import classes from "./NormalCardEditor.module.css";
-import React, { useCallback } from "react";
+import React, { useCallback, useEffect } from "react";
 import { Stack, Text, useMantineTheme } from "@mantine/core";
 import CardEditor, { useCardEditor } from "./CardEditor";
 import { EditMode } from "../../../logic/CardTypeManager";
@@ -22,7 +22,7 @@ interface NormalCardEditorProps {
   mode: EditMode;
 }
 
-async function finish(
+async function finishCard(
   mode: EditMode,
   clear: Function,
   deck: Deck,
@@ -35,7 +35,6 @@ async function finish(
     if (mode === "edit") {
       //SAVE
       try {
-        console.log(cardInstance.id);
         const numberOfUpdatedRecords = await updateCard(
           cardInstance.id,
           cardInstance
@@ -81,25 +80,31 @@ function createCardInstance(
 }
 
 function NormalCardEditor({ card, deck, mode }: NormalCardEditorProps) {
-  const theme = useMantineTheme();
+  const [requestedFinish, setRequestedFinish] = React.useState(false);
 
-  useHotkeys([
-    [
-      "mod+Enter",
-      () => finish(mode, clear, deck, card, frontEditor, backEditor),
-    ],
-  ]);
+  const frontEditor = useCardEditor({
+    content: card?.content.front ?? "",
+    finish: () => setRequestedFinish(true),
+  });
 
-  const frontEditor = useCardEditor({ content: card?.content.front ?? "" });
-
-  const backEditor = useCardEditor({ content: card?.content.back ?? "" });
+  const backEditor = useCardEditor({
+    content: card?.content.back ?? "",
+    finish: () => setRequestedFinish(true),
+  });
 
   const clear = useCallback(() => {
     frontEditor?.commands.setContent("");
     backEditor?.commands.setContent("");
     frontEditor?.commands.focus();
   }, [frontEditor, backEditor]);
 
+  useEffect(() => {
+    if (requestedFinish) {
+      finishCard(mode, clear, deck, card, frontEditor, backEditor);
+      setRequestedFinish(false);
+    }
+  }, [requestedFinish, mode, clear, deck, card, frontEditor, backEditor]);
+
   return (
     <Stack gap="2rem">
       <Stack gap={0}>
@@ -118,10 +123,7 @@ function NormalCardEditor({ card, deck, mode }: NormalCardEditorProps) {
         </Text>
         <CardEditor editor={backEditor} key="back" />
       </Stack>
-      <CardEditorFooter
-        finish={() => finish(mode, clear, deck, card, frontEditor, backEditor)}
-        mode={mode}
-      />
+      <CardEditorFooter finish={() => setRequestedFinish(true)} mode={mode} />
     </Stack>
   );
 }

diff --git a/src/components/editcard/CardEditor/tiptap/CustomHardBreak.ts b/src/components/editcard/CardEditor/tiptap/CustomHardBreak.ts
@@ -0,0 +1,11 @@
+import HardBreak from "@tiptap/extension-hard-break";
+
+export const CustomHardBreak = HardBreak.extend({
+  addKeyboardShortcuts() {
+    return {
+      "Shift-Enter": () => {
+        return this.editor.commands.setHardBreak();
+      },
+    };
+  },
+});
diff --git a/src/components/editcard/CardEditorFooter.tsx b/src/components/editcard/CardEditorFooter.tsx
@@ -2,6 +2,7 @@ import React from "react";
 import { Button, Group } from "@mantine/core";
 import { EditMode } from "../../logic/CardTypeManager";
 import { IconDeviceFloppy, IconPlus } from "@tabler/icons-react";
+import { useHotkeys } from "@mantine/hooks";
 
 interface CardEditorFooterProps {
   mode: EditMode;

diff --git a/src/components/learning/FinishedLearningView/FinishedLearningView.tsx b/src/components/learning/FinishedLearningView/FinishedLearningView.tsx
@@ -39,9 +39,11 @@ function FinishedLearningView({
 
   const accuracy = useRepetitionAccuracy(ratingsList);
 
-  useHotkeys([["Space", () => navigate("/home")]]);
-  useHotkeys([["Enter", () => navigate("/home")]]);
-  useHotkeys([["d", () => navigate(`/deck/${deckId}`)]]);
+  useHotkeys([
+    ["Space", () => navigate("/home")],
+    ["Enter", () => navigate("/home")],
+    ["d", () => navigate(`/deck/${deckId}`)],
+  ]);
 
   return (
     <Center>

diff --git a/src/logic/CardScheduler.ts b/src/logic/CardScheduler.ts
@@ -14,7 +14,6 @@ export function useGlobalScheduler() {
     scheduler.p.request_retention = requestRetention;
     scheduler.p.w = w;
   }, [maximumInterval, requestRetention, w]);
-  console.log(scheduler);
   return scheduler;
 }
 

diff --git a/src/style/StyleProvider.ts b/src/style/StyleProvider.ts
@@ -4,30 +4,28 @@ import {
   Badge,
   Breadcrumbs,
   Button,
+  CSSVariablesResolver,
   Menu,
   Modal,
   NavLink,
   Popover,
   Select,
-  Text,
   Tabs,
-  createTheme,
-  CSSVariablesResolver,
+  Text,
   Title,
+  Tooltip,
+  createTheme,
 } from "@mantine/core";
-import { RichTextEditor } from "@mantine/tiptap";
 import actionIcon from "./ActionIcon.module.css";
 import appShell from "./AppShell.module.css";
 import badge from "./Badge.module.css";
 import breadcrumbs from "./Breadcrumbs.module.css";
 import button from "./Button.module.css";
-import input from "./Input.module.css";
-import modal from "./Modal.module.css";
 import menu from "./Menu.module.css";
-import navbar from "./Navbar.module.css";
+import modal from "./Modal.module.css";
 import navLink from "./NavLink.module.css";
+import navbar from "./Navbar.module.css";
 import popover from "./Popover.module.css";
-import richTextEditor from "./RichTextEditor.module.css";
 import select from "./Select.module.css";
 import tabs from "./Tabs.module.css";
 
@@ -171,13 +169,13 @@ export const presetTheme = createTheme({
         pt: "sm",
       },
     }),
-    Tooltip: {
+    Tooltip: Tooltip.extend({
       styles: () => ({
         tooltip: {
           userSelect: "none",
         },
       }),
-    },
+    }),
     InputWrapper: {
       styles: () => ({
         label: {