diff --git a/src/components/editcard/CardEditor/ClozeCardEditor.tsx b/src/components/editcard/CardEditor/ClozeCardEditor.tsx
index b74dd4e..74e8732 100644
--- a/src/components/editcard/CardEditor/ClozeCardEditor.tsx
+++ b/src/components/editcard/CardEditor/ClozeCardEditor.tsx
@@ -8,16 +8,7 @@ import CardEditor, { useCardEditor } from "./CardEditor";
 import classes from "./ClozeCardEditor.module.css";
 
 import { Stack } from "@mantine/core";
-import { Mark } from "@tiptap/core";
-import { mergeAttributes } from "@tiptap/react";
 import { useCallback, useEffect, useMemo, useState } from "react";
-import CardEditorFooter from "../CardEditorFooter";
-import {
-  addFailed,
-  saveFailed,
-  successfullyAdded,
-  successfullySaved,
-} from "../../custom/Notification/Notification";
 import {
   ClozeCardUtils,
   createClozeCardSet,
@@ -27,42 +18,13 @@ import {
   getSharedValue,
   useSharedValue,
 } from "../../../logic/sharedvalue";
-
-//not used right now, use ui control or remove later
-const Gap = Mark.create({
-  name: "gap",
-  inline: true,
-  exitable: true,
-  group: "inline",
-  selectable: true,
-  defaultTag: "span",
-  addAttributes() {
-    return {
-      group: 0,
-    };
-  },
-  parseHTML() {
-    return [{ tag: "span.gap" }];
-  },
-  renderHTML({ HTMLAttributes }) {
-    const elem = document.createElement("span");
-    const content = document.createElement("div");
-    content.innerHTML = "Test: " + HTMLAttributes.group;
-    content.className = "inline-menu";
-    elem.appendChild(content);
-
-    Object.entries(mergeAttributes(HTMLAttributes, { class: "gap" })).forEach(
-      ([attr, val]) => elem.setAttribute(attr, val)
-    );
-
-    elem.addEventListener("click", () => {
-      elem.classList.toggle("clicked");
-    });
-
-    return elem;
-    //return ['span', mergeAttributes(HTMLAttributes, {class: 'gap'}), 0];
-  },
-});
+import {
+  addFailed,
+  saveFailed,
+  successfullyAdded,
+  successfullySaved,
+} from "../../custom/Notification/Notification";
+import CardEditorFooter from "../CardEditorFooter";
 
 interface ClozeCardEditorProps {
   card: Card<CardType.Cloze> | null;
@@ -82,7 +44,6 @@ export default function ClozeCardEditor({
   //fix sometime
   const editor = useCardEditor({
     content: useSharedValue(card?.content.textReferenceId ?? "")?.value ?? "",
-    extensions: [Gap],
     onUpdate: ({ editor }) => {
       if (editor?.getHTML().valueOf() !== editorContent.valueOf()) {
         setEditorContent(editor?.getHTML() ?? "");
@@ -99,11 +60,12 @@ export default function ClozeCardEditor({
 
   const smallestAvailableOcclusionNumber = useMemo(() => {
     const occlusionNumberSet = getOcclusionNumberSet(editorContent);
-    for (let i = 1; i < 100; i++) {
+    for (let i = 1; i < 10; i++) {
       if (!occlusionNumberSet.includes(i)) {
         return i;
       }
     }
+    return 9;
   }, [editorContent]);
 
   const clear = useCallback(() => {
diff --git a/src/logic/CardTypeImplementations/ClozeCard.tsx b/src/logic/CardTypeImplementations/ClozeCard.tsx
index ec9fd58..2d51bea 100644
--- a/src/logic/CardTypeImplementations/ClozeCard.tsx
+++ b/src/logic/CardTypeImplementations/ClozeCard.tsx
@@ -26,7 +26,11 @@ export const ClozeCardUtils: CardTypeManager<CardType.Cloze> = {
   update(params: { text: string }, existingCard: Card<CardType.Cloze>) {
     setSharedValue(existingCard.content.textReferenceId, params.text);
     updateCard(existingCard.id, {
-      preview: toPreviewString(params.text),
+      preview: toPreviewString(
+        params.text.replace(/\{\{c\d::((?!\{\{|}}).)*\}\}/g, (match) =>
+          match.slice(6, -2)
+        )
+      ),
     });
     return { preview: toPreviewString(params.text), ...existingCard };
   },
@@ -38,7 +42,11 @@ export const ClozeCardUtils: CardTypeManager<CardType.Cloze> = {
   }): Card<CardType.Cloze> {
     return {
       ...createCardSkeleton(),
-      preview: toPreviewString(params.text),
+      preview: toPreviewString(
+        params.text.replace(/\{\{c\d::((?!\{\{|}}).)*\}\}/g, (match) =>
+          match.slice(6, -2)
+        )
+      ),
       content: {
         type: CardType.Cloze,
         occlusionNumber: params.occlusionNumber,