feat: working button for inserting cloze

src/components/editcard/CardEditor/CardEditor.tsx

@@ -1,6 +1,6 @@
 import classes from "./CardEditor.module.css";
 import React from "react";
-import { Editor, useEditor } from "@tiptap/react";
+import { Editor, EditorEvents, useEditor } from "@tiptap/react";
 import StarterKit from "@tiptap/starter-kit";
 import Highlight from "@tiptap/extension-highlight";
 import Underline from "@tiptap/extension-underline";
@@ -22,7 +22,11 @@ interface CardEditorProps {
   controls?: React.ReactNode;
 }
 
-export function useCardEditor(content: string, ...extensions: any[]) {
+export function useCardEditor(props: {
+  content: string;
+  onUpdate?: (props: EditorEvents["update"]) => void;
+  extensions?: any[];
+}) {
   return useEditor(
     {
       extensions: [
@@ -38,11 +42,12 @@ export function useCardEditor(content: string, ...extensions: any[]) {
         Image.configure({
           allowBase64: true,
         }),
-        ...(extensions ?? []),
+        ...(props.extensions ?? []),
       ],
-      content: content,
+      content: props.content,
+      onUpdate: props.onUpdate,
     },
-    [content]
+    [props.content]
   );
 }
 
@@ -107,7 +112,9 @@ function CardEditor({ editor, controls, className }: CardEditorProps) {
               <RichTextEditor.Unlink tabIndex={-1} />
             </RichTextEditor.ControlsGroup>
           )}
-          {controls}
+          <RichTextEditor.ControlsGroup>
+            {controls}
+          </RichTextEditor.ControlsGroup>
         </Box>
 
         <RichTextEditor.ControlsGroup>

src/components/editcard/CardEditor/ClozeCardEditor.tsx

@@ -9,8 +9,8 @@ import classes from "./ClozeCardEditor.module.css";
 
 import { Button, Stack, useMantineTheme } from "@mantine/core";
 import { Mark } from "@tiptap/core";
-import { Editor, mergeAttributes } from "@tiptap/react";
-import { useCallback, useState } from "react";
+import { Editor, EditorEvents, mergeAttributes } from "@tiptap/react";
+import { useCallback, useEffect, useMemo, useState } from "react";
 import CardEditorFooter from "../CardEditorFooter";
 import {
   addFailed,
@@ -74,11 +74,30 @@ export default function ClozeCardEditor({
 }: ClozeCardEditorProps) {
   useHotkeys([["mod+Enter", () => {}]]);
   //fix sometime
-  const editor = useCardEditor(
-    useSharedValue(card?.content.textReferenceId ?? "")?.value ?? "",
-    Gap
+  const editor = useCardEditor({
+    content: useSharedValue(card?.content.textReferenceId ?? "")?.value ?? "",
+    extensions: [Gap],
+    onUpdate: ({ editor }: EditorEvents["update"]) => {
+      if (editor?.getHTML().valueOf() !== editorContent.valueOf()) {
+        setEditorContent(editor?.getHTML() ?? "");
+      }
+    },
+  });
+
+  const [editorContent, setEditorContent] = useState<string>(
+    editor?.getHTML() ?? ""
   );
 
+  const smallestAvailableOcclusionNumber = useMemo(() => {
+    const occlusionNumberSet = getOcclusionNumberSet(editorContent);
+    console.log(occlusionNumberSet);
+    for (let i = 1; i < 100; i++) {
+      if (!occlusionNumberSet.includes(i)) {
+        return i;
+      }
+    }
+  }, [editorContent]);
+
   const clear = useCallback(() => {
     editor?.commands.setContent("");
     editor?.commands.focus();
@@ -90,20 +109,28 @@ export default function ClozeCardEditor({
         editor={editor}
         className={classes}
         controls={
-          //not used right now, use ui control or remove later
           <RichTextEditor.Control
             tabIndex={-1}
             onClick={() => {
-              editor?.commands.toggleMark("gap", { group: Math.random() });
-              console.log(editor?.getHTML());
+              if (editor?.state.selection.from !== editor?.state.selection.to) {
+                const occludedText = `{{c${smallestAvailableOcclusionNumber}::${window.getSelection()}}}`;
+                editor?.commands.insertContent(occludedText);
+              } else {
+                editor?.commands.insertContent(
+                  `{{c${smallestAvailableOcclusionNumber}::}}`
+                );
+                editor?.commands.setTextSelection(
+                  editor?.state.selection.to - 2
+                );
+              }
             }}
           >
             <IconBracketsContain />
           </RichTextEditor.Control>
         }
       />
       <CardEditorFooter
-        finish={() => finish(mode, clear, deck, card, editor)}
+        finish={() => finish(mode, clear, deck, card, editorContent)}
         mode={mode}
       />
     </Stack>
@@ -115,15 +142,15 @@ function finish(
   clear: Function,
   deck: Deck,
   card: Card<CardType.Cloze> | null,
-  editor: Editor | null
+  editorContent: string
 ) {
   if (mode === "edit") {
     //ISSUE newly introduced cards through edit are not recognized
     try {
       if (card) {
         ClozeCardUtils.update(
           {
-            text: editor?.getHTML() ?? "",
+            text: editorContent,
           },
           card
         );
@@ -133,12 +160,10 @@ function finish(
       saveFailed();
     }
   } else {
-    const occlusionNumberSet: number[] = getOcclusionNumberSet(
-      editor?.getHTML() ?? ""
-    );
+    const occlusionNumberSet: number[] = getOcclusionNumberSet(editorContent);
     try {
       createClozeCardSet({
-        text: editor?.getHTML() ?? "",
+        text: editorContent,
         occlusionNumberSet,
       }).then((cards) => newCards(cards, deck));
       clear();
@@ -150,12 +175,15 @@ function finish(
 }
 
 function getOcclusionNumberSet(text: string) {
-  const regex = /\{\{c\d::((?!\{\{|}}).)*\}\}/g;
+  const regex = /\{\{c(\d+)::((?!\{\{|}}).)*\}\}/g;
   const matches = text.match(regex);
-  const cardDigits = new Set<number>();
+  const cardNumbers = new Set<number>();
   matches?.forEach((match) => {
-    const digit = parseInt(match[3]);
-    cardDigits.add(digit);
+    const numberMatch = match.match(/c(\d+)::/);
+    if (numberMatch && numberMatch[1]) {
+      const number = parseInt(numberMatch[1]);
+      cardNumbers.add(number);
+    }
   });
-  return Array.from(cardDigits);
+  return Array.from(cardNumbers);
 }

src/components/editcard/CardEditor/DoubleSidedCardEditor.tsx

@@ -76,13 +76,13 @@ function DoubleSidedCardEditor({
     ["mod+Enter", () => finish(mode, clear, deck, card, editor1, editor2)],
   ]);
 
-  const editor1 = useCardEditor(
-    useSharedValue(card?.content.frontReferenceId ?? "")?.value ?? ""
-  );
+  const editor1 = useCardEditor({
+    content: useSharedValue(card?.content.frontReferenceId ?? "")?.value ?? "",
+  });
 
-  const editor2 = useCardEditor(
-    useSharedValue(card?.content.backReferenceId ?? "")?.value ?? ""
-  );
+  const editor2 = useCardEditor({
+    content: useSharedValue(card?.content.backReferenceId ?? "")?.value ?? "",
+  });
 
   const clear = useCallback(() => {
     editor1?.commands.setContent("");

src/components/editcard/CardEditor/NormalCardEditor.tsx

@@ -90,9 +90,9 @@ function NormalCardEditor({ card, deck, mode }: NormalCardEditorProps) {
     ],
   ]);
 
-  const frontEditor = useCardEditor(card?.content.front ?? "");
+  const frontEditor = useCardEditor({ content: card?.content.front ?? "" });
 
-  const backEditor = useCardEditor(card?.content.back ?? "");
+  const backEditor = useCardEditor({ content: card?.content.back ?? "" });
 
   const clear = useCallback(() => {
     frontEditor?.commands.setContent("");