From 485279151c9176ecc20a6510f12683a07ed035e6 Mon Sep 17 00:00:00 2001
From: Egor Gorbachev <7gorbachevm@gmail.com>
Date: Mon, 29 Jan 2024 11:20:36 +0700
Subject: [PATCH] Formatting field switcher + CloudStorage adapter (#8)

---
 src/lib/cache/cache-promise.test.ts           |  2 +-
 src/lib/mobx-form/persistable-field.ts        |  3 +-
 src/lib/sanitize-html/remove-all-tags.ts      |  5 +-
 src/lib/telegram/cloud-storage.ts             | 42 +++++++++++++
 .../{hapticNotification.ts => haptics.ts}     |  0
 src/lib/telegram/storage-adapter.ts           |  6 ++
 src/screens/deck-form/card-form-view.tsx      | 63 +++++++++++++++----
 src/screens/deck-form/card-form-wrapper.tsx   | 11 ++--
 src/screens/deck-form/card-preview.tsx        | 11 ++--
 src/screens/deck-form/deck-form-screen.tsx    |  7 +--
 src/screens/deck-form/formatting-switcher.tsx | 39 ++++++++++++
 ...-store.ts => card-form-store-interface.ts} |  9 ++-
 .../deck-form/store/deck-form-store.ts        |  4 +-
 .../store/quick-add-card-form-store.ts        |  4 +-
 .../deck-review/store/card-preview-store.ts   | 20 +++---
 .../deck-review/store/review-store.test.ts    | 20 +++++-
 src/screens/deck-review/store/review-store.ts |  2 +-
 .../store/user-settings-store.tsx             |  2 +-
 src/store/deck-list-store.test.ts             | 12 ++++
 src/store/user-store.ts                       | 10 +++
 src/translations/t.ts                         |  4 ++
 src/ui/label.tsx                              | 14 ++++-
 src/ui/wysiwyg-field/wysiwig-field.tsx        |  7 +++
 src/ui/wysiwyg-field/wysiwyg-field.css        |  2 +-
 24 files changed, 244 insertions(+), 55 deletions(-)
 create mode 100644 src/lib/telegram/cloud-storage.ts
 rename src/lib/telegram/{hapticNotification.ts => haptics.ts} (100%)
 create mode 100644 src/lib/telegram/storage-adapter.ts
 create mode 100644 src/screens/deck-form/formatting-switcher.tsx
 rename src/screens/deck-form/store/{card-form-store.ts => card-form-store-interface.ts} (51%)

diff --git a/src/lib/cache/cache-promise.test.ts b/src/lib/cache/cache-promise.test.ts
index 8b575339..9bfad550 100644
--- a/src/lib/cache/cache-promise.test.ts
+++ b/src/lib/cache/cache-promise.test.ts
@@ -1,4 +1,4 @@
-import { test, vi, expect } from "vitest";
+import { expect, test, vi } from "vitest";
 import { cachePromise } from "./cache-promise.ts";
 
 test("should cache the resolved value of a promise", async () => {
diff --git a/src/lib/mobx-form/persistable-field.ts b/src/lib/mobx-form/persistable-field.ts
index aa510d05..52e70aa9 100644
--- a/src/lib/mobx-form/persistable-field.ts
+++ b/src/lib/mobx-form/persistable-field.ts
@@ -1,5 +1,6 @@
 import { makePersistable } from "mobx-persist-store";
 import { FieldWithValue } from "./field-with-value.ts";
+import { storageAdapter } from "../telegram/storage-adapter.ts";
 
 export const persistableField = <T extends FieldWithValue<any>>(
   field: T,
@@ -9,7 +10,7 @@ export const persistableField = <T extends FieldWithValue<any>>(
   makePersistable(field, {
     name: storageKey,
     properties: ["value"],
-    storage: window.localStorage,
+    storage: storageAdapter,
     expireIn: expireIn,
   });
 
diff --git a/src/lib/sanitize-html/remove-all-tags.ts b/src/lib/sanitize-html/remove-all-tags.ts
index 1f04e770..22121842 100644
--- a/src/lib/sanitize-html/remove-all-tags.ts
+++ b/src/lib/sanitize-html/remove-all-tags.ts
@@ -1,5 +1,8 @@
 import sanitizeHtml from "sanitize-html";
 
 export const removeAllTags = (text: string) => {
-  return sanitizeHtml(text);
+  return sanitizeHtml(text, {
+    allowedTags: [],
+    allowedAttributes: {},
+  });
 };
diff --git a/src/lib/telegram/cloud-storage.ts b/src/lib/telegram/cloud-storage.ts
new file mode 100644
index 00000000..cc41e094
--- /dev/null
+++ b/src/lib/telegram/cloud-storage.ts
@@ -0,0 +1,42 @@
+import WebApp from "@twa-dev/sdk";
+import { type StorageController } from "mobx-persist-store";
+
+// An adapter of the Telegram cloud storage to the mobx-persist-store interface
+export const cloudStorageAdapter: StorageController = {
+  getItem(key: string) {
+    return new Promise((resolve, reject) => {
+      WebApp.CloudStorage.getItem(key, (err, value) => {
+        if (err != null) {
+          return reject(err);
+        } else {
+          // @ts-ignore
+          return resolve(value);
+        }
+      });
+    });
+  },
+  removeItem(key: string) {
+    return new Promise((resolve, reject) => {
+      WebApp.CloudStorage.removeItem(key, (err, result) => {
+        if (err != null) {
+          return reject(err);
+        } else {
+          // @ts-ignore
+          return resolve(result);
+        }
+      });
+    });
+  },
+  setItem(key: string, value: any) {
+    return new Promise((resolve, reject) => {
+      WebApp.CloudStorage.setItem(key, value, (err, result) => {
+        if (err != null) {
+          return reject(err);
+        } else {
+          // @ts-ignore
+          return resolve(result);
+        }
+      });
+    });
+  },
+};
diff --git a/src/lib/telegram/hapticNotification.ts b/src/lib/telegram/haptics.ts
similarity index 100%
rename from src/lib/telegram/hapticNotification.ts
rename to src/lib/telegram/haptics.ts
diff --git a/src/lib/telegram/storage-adapter.ts b/src/lib/telegram/storage-adapter.ts
new file mode 100644
index 00000000..9aeeea59
--- /dev/null
+++ b/src/lib/telegram/storage-adapter.ts
@@ -0,0 +1,6 @@
+import WebApp from "@twa-dev/sdk";
+import { cloudStorageAdapter } from "./cloud-storage.ts";
+
+export const storageAdapter = WebApp.isVersionAtLeast("6.9")
+  ? cloudStorageAdapter
+  : window.localStorage;
diff --git a/src/screens/deck-form/card-form-view.tsx b/src/screens/deck-form/card-form-view.tsx
index b7d6da71..5b09da98 100644
--- a/src/screens/deck-form/card-form-view.tsx
+++ b/src/screens/deck-form/card-form-view.tsx
@@ -1,5 +1,5 @@
 import { observer, useLocalObservable } from "mobx-react-lite";
-import { CardFormStore } from "./store/card-form-store.ts";
+import { CardFormStoreInterface } from "./store/card-form-store-interface.ts";
 import { assert } from "../../lib/typescript/assert.ts";
 import { useMainButton } from "../../lib/telegram/use-main-button.tsx";
 import { t } from "../../translations/t.ts";
@@ -24,9 +24,12 @@ import React from "react";
 import { ValidationError } from "../../ui/validation-error.tsx";
 import { showAlert } from "../../lib/telegram/show-alert.ts";
 import { WysiwygField } from "../../ui/wysiwyg-field/wysiwig-field.tsx";
+import { userStore } from "../../store/user-store.ts";
+import { Input } from "../../ui/input.tsx";
+import { FormattingSwitcher } from "./formatting-switcher.tsx";
 
 type Props = {
-  cardFormStore: CardFormStore;
+  cardFormStore: CardFormStoreInterface;
 };
 
 export const CardFormView = observer((props: Props) => {
@@ -54,17 +57,45 @@ export const CardFormView = observer((props: Props) => {
     ),
   }));
 
+  const isCardFormattingOn = userStore.isCardFormattingOn.value;
+
   return (
     <Screen title={cardForm.id ? t("edit_card") : t("add_card")}>
-      <Label text={t("card_front_title")} isRequired>
-        <WysiwygField field={cardForm.front} />
-        <HintTransparent>{t("card_front_side_hint")}</HintTransparent>
-      </Label>
+      <div
+        className={css({
+          display: "flex",
+          flexDirection: "column",
+          gap: 16,
+        })}
+      >
+        <Label
+          text={t("card_front_title")}
+          isPlain
+          isRequired
+          slotRight={<FormattingSwitcher />}
+        >
+          {isCardFormattingOn ? (
+            <WysiwygField field={cardForm.front} />
+          ) : (
+            <Input field={cardForm.front} type={"textarea"} rows={2} />
+          )}
+          <HintTransparent>{t("card_front_side_hint")}</HintTransparent>
+        </Label>
 
-      <Label text={t("card_back_title")} isRequired>
-        <WysiwygField field={cardForm.back} />
-        <HintTransparent>{t("card_back_side_hint")}</HintTransparent>
-      </Label>
+        <Label
+          text={t("card_back_title")}
+          isPlain
+          isRequired
+          slotRight={<FormattingSwitcher />}
+        >
+          {isCardFormattingOn ? (
+            <WysiwygField field={cardForm.back} />
+          ) : (
+            <Input field={cardForm.back} type={"textarea"} rows={2} />
+          )}
+          <HintTransparent>{t("card_back_side_hint")}</HintTransparent>
+        </Label>
+      </div>
 
       <CardRow>
         <span>{t("card_advanced")}</span>
@@ -160,8 +191,16 @@ export const CardFormView = observer((props: Props) => {
             </>
           )}
 
-          <Label text={t("card_field_example_title")}>
-            <WysiwygField field={cardForm.example} />
+          <Label
+            isPlain
+            text={t("card_field_example_title")}
+            slotRight={<FormattingSwitcher />}
+          >
+            {isCardFormattingOn ? (
+              <WysiwygField field={cardForm.example} />
+            ) : (
+              <Input field={cardForm.example} type={"textarea"} rows={2} />
+            )}
             <HintTransparent>{t("card_field_example_hint")}</HintTransparent>
           </Label>
         </>
diff --git a/src/screens/deck-form/card-form-wrapper.tsx b/src/screens/deck-form/card-form-wrapper.tsx
index e86a182b..526b349e 100644
--- a/src/screens/deck-form/card-form-wrapper.tsx
+++ b/src/screens/deck-form/card-form-wrapper.tsx
@@ -2,18 +2,16 @@ import { observer } from "mobx-react-lite";
 import React from "react";
 import { AnswerFormView } from "./answer-form-view.tsx";
 import { assert } from "../../lib/typescript/assert.ts";
-import { CardFormStore } from "./store/card-form-store.ts";
+import { CardFormStoreInterface } from "./store/card-form-store-interface.ts";
 import { CardPreview } from "./card-preview.tsx";
 import { CardFormView } from "./card-form-view.tsx";
-import { DeckFormStore } from "./store/deck-form-store.ts";
 
 type Props = {
-  cardFormStore: CardFormStore;
-  deckFormStore?: DeckFormStore;
+  cardFormStore: CardFormStoreInterface;
 };
 
 export const CardFormWrapper = observer((props: Props) => {
-  const { cardFormStore, deckFormStore } = props;
+  const { cardFormStore } = props;
   const { cardForm } = cardFormStore;
   assert(cardForm, "Card should not be empty before editing");
 
@@ -24,8 +22,7 @@ export const CardFormWrapper = observer((props: Props) => {
   if (cardFormStore.isCardPreviewSelected.value) {
     return (
       <CardPreview
-        form={cardForm}
-        deckFormStore={deckFormStore}
+        form={cardFormStore}
         onBack={cardFormStore.isCardPreviewSelected.setFalse}
       />
     );
diff --git a/src/screens/deck-form/card-preview.tsx b/src/screens/deck-form/card-preview.tsx
index 1371b156..075c707c 100644
--- a/src/screens/deck-form/card-preview.tsx
+++ b/src/screens/deck-form/card-preview.tsx
@@ -1,22 +1,19 @@
 import { observer } from "mobx-react-lite";
 import { useBackButton } from "../../lib/telegram/use-back-button.tsx";
 import { css } from "@emotion/css";
-import { CardFormType, DeckFormStore } from "./store/deck-form-store.ts";
 import { CardReviewWithControls } from "../deck-review/card-review-with-controls.tsx";
 import { useState } from "react";
 import { CardPreviewStore } from "../deck-review/store/card-preview-store.ts";
+import { CardFormStoreInterface } from "./store/card-form-store-interface.ts";
 
 type Props = {
-  form: CardFormType;
+  form: CardFormStoreInterface;
   onBack: () => void;
-  deckFormStore?: DeckFormStore;
 };
 
 export const CardPreview = observer((props: Props) => {
-  const { form, onBack, deckFormStore } = props;
-  const [cardPreviewStore] = useState(
-    () => new CardPreviewStore(form, deckFormStore),
-  );
+  const { form, onBack } = props;
+  const [cardPreviewStore] = useState(() => new CardPreviewStore(form));
 
   useBackButton(() => {
     onBack();
diff --git a/src/screens/deck-form/deck-form-screen.tsx b/src/screens/deck-form/deck-form-screen.tsx
index 97063e2c..d13efaba 100644
--- a/src/screens/deck-form/deck-form-screen.tsx
+++ b/src/screens/deck-form/deck-form-screen.tsx
@@ -13,12 +13,7 @@ export const DeckFormScreen = observer(() => {
   }
 
   if (deckFormStore.deckFormScreen === "cardForm") {
-    return (
-      <CardFormWrapper
-        cardFormStore={deckFormStore}
-        deckFormStore={deckFormStore}
-      />
-    );
+    return <CardFormWrapper cardFormStore={deckFormStore} />;
   }
 
   return <DeckForm />;
diff --git a/src/screens/deck-form/formatting-switcher.tsx b/src/screens/deck-form/formatting-switcher.tsx
new file mode 100644
index 00000000..ba6d5064
--- /dev/null
+++ b/src/screens/deck-form/formatting-switcher.tsx
@@ -0,0 +1,39 @@
+import { observer } from "mobx-react-lite";
+import { userStore } from "../../store/user-store.ts";
+import { css, cx } from "@emotion/css";
+import { reset } from "../../ui/reset.ts";
+import { theme } from "../../ui/theme.tsx";
+import { ChevronIcon } from "../../ui/chevron-icon.tsx";
+import { t } from "../../translations/t.ts";
+import React from "react";
+
+export const FormattingSwitcher = observer(() => {
+  return (
+    <button
+      onClick={() => {
+        userStore.isCardFormattingOn.toggle();
+      }}
+      className={cx(
+        reset.button,
+        css({
+          fontSize: 16,
+          color: theme.linkColor,
+          cursor: "pointer",
+        }),
+      )}
+    >
+      <span
+        className={css({
+          transform: "translateY(2px)",
+          display: "inline-block",
+        })}
+      >
+        {" "}
+        <ChevronIcon
+          direction={userStore.isCardFormattingOn.value ? "top" : "bottom"}
+        />
+      </span>{" "}
+      {t("formatting")}
+    </button>
+  );
+});
diff --git a/src/screens/deck-form/store/card-form-store.ts b/src/screens/deck-form/store/card-form-store-interface.ts
similarity index 51%
rename from src/screens/deck-form/store/card-form-store.ts
rename to src/screens/deck-form/store/card-form-store-interface.ts
index 1c138702..97547799 100644
--- a/src/screens/deck-form/store/card-form-store.ts
+++ b/src/screens/deck-form/store/card-form-store-interface.ts
@@ -1,7 +1,9 @@
 import { BooleanToggle } from "../../../lib/mobx-form/boolean-toggle.ts";
 import { CardFormType } from "./deck-form-store.ts";
+import { TextField } from "../../../lib/mobx-form/text-field.ts";
+import { DeckSpeakFieldEnum } from "../../../../functions/db/deck/decks-with-cards-schema.ts";
 
-export type CardFormStore = {
+export type CardFormStoreInterface = {
   cardForm?: CardFormType | null;
   onSaveCard: () => void;
   onBackCard: () => void;
@@ -9,4 +11,9 @@ export type CardFormStore = {
   isCardPreviewSelected: BooleanToggle;
   isSending: boolean;
   markCardAsRemoved?: () => void;
+
+  deckForm?: {
+    speakingCardsLocale: TextField<string | null>;
+    speakingCardsField: TextField<DeckSpeakFieldEnum | null>;
+  };
 };
diff --git a/src/screens/deck-form/store/deck-form-store.ts b/src/screens/deck-form/store/deck-form-store.ts
index 03986a7c..ebb6bbe7 100644
--- a/src/screens/deck-form/store/deck-form-store.ts
+++ b/src/screens/deck-form/store/deck-form-store.ts
@@ -24,7 +24,7 @@ import { CardAnswerType } from "../../../../functions/db/custom-types.ts";
 import { ListField } from "../../../lib/mobx-form/list-field.ts";
 import { BooleanField } from "../../../lib/mobx-form/boolean-field.ts";
 import { v4 } from "uuid";
-import { CardFormStore } from "./card-form-store.ts";
+import { CardFormStoreInterface } from "./card-form-store-interface.ts";
 import { UpsertDeckRequest } from "../../../../functions/upsert-deck.ts";
 import { UnwrapArray } from "../../../lib/typescript/unwrap-array.ts";
 
@@ -147,7 +147,7 @@ const cardFormToApi = (
 export type CardFilterSortBy = "createdAt" | "frontAlpha" | "backAlpha";
 export type CardFilterDirection = "desc" | "asc";
 
-export class DeckFormStore implements CardFormStore {
+export class DeckFormStore implements CardFormStoreInterface {
   cardFormIndex?: number;
   cardFormType?: "new" | "edit";
   isCardPreviewSelected = new BooleanToggle(false);
diff --git a/src/screens/deck-form/store/quick-add-card-form-store.ts b/src/screens/deck-form/store/quick-add-card-form-store.ts
index eb22f279..13e0b420 100644
--- a/src/screens/deck-form/store/quick-add-card-form-store.ts
+++ b/src/screens/deck-form/store/quick-add-card-form-store.ts
@@ -18,9 +18,9 @@ import { AddCardRequest } from "../../../../functions/add-card.ts";
 import { deckListStore } from "../../../store/deck-list-store.ts";
 import { t } from "../../../translations/t.ts";
 import { BooleanToggle } from "../../../lib/mobx-form/boolean-toggle.ts";
-import { CardFormStore } from "./card-form-store.ts";
+import { CardFormStoreInterface } from "./card-form-store-interface.ts";
 
-export class QuickAddCardFormStore implements CardFormStore {
+export class QuickAddCardFormStore implements CardFormStoreInterface {
   cardForm: CardFormType = {
     back: createCardSideField(""),
     front: createCardSideField(""),
diff --git a/src/screens/deck-review/store/card-preview-store.ts b/src/screens/deck-review/store/card-preview-store.ts
index f59b0586..79b79011 100644
--- a/src/screens/deck-review/store/card-preview-store.ts
+++ b/src/screens/deck-review/store/card-preview-store.ts
@@ -4,15 +4,13 @@ import {
   DeckSpeakFieldEnum,
 } from "../../../../functions/db/deck/decks-with-cards-schema.ts";
 import { CardAnswerType } from "../../../../functions/db/custom-types.ts";
-import {
-  CardFormType,
-  DeckFormStore,
-} from "../../deck-form/store/deck-form-store.ts";
 import { makeAutoObservable } from "mobx";
 import { userStore } from "../../../store/user-store.ts";
 import { isEnumValid } from "../../../lib/typescript/is-enum-valid.ts";
-import { SpeakLanguageEnum, speak } from "../../../lib/voice-playback/speak.ts";
+import { speak, SpeakLanguageEnum } from "../../../lib/voice-playback/speak.ts";
 import { removeAllTags } from "../../../lib/sanitize-html/remove-all-tags.ts";
+import { CardFormStoreInterface } from "../../deck-form/store/card-form-store-interface.ts";
+import { assert } from "../../../lib/typescript/assert.ts";
 
 export class CardPreviewStore implements LimitedCardUnderReviewStore {
   id: number;
@@ -28,8 +26,10 @@ export class CardPreviewStore implements LimitedCardUnderReviewStore {
 
   isOpened = false;
 
-  constructor(form: CardFormType, deckFormStore?: DeckFormStore) {
+  constructor(cardFormStore: CardFormStoreInterface) {
     makeAutoObservable(this, {}, { autoBind: true });
+    const form = cardFormStore.cardForm;
+    assert(form, "form is not defined");
     this.id = 9999;
     this.front = form.front.value;
     this.back = form.back.value;
@@ -41,13 +41,13 @@ export class CardPreviewStore implements LimitedCardUnderReviewStore {
       isCorrect: answer.isCorrect.value,
     }));
 
-    if (!deckFormStore) {
+    const deckForm = cardFormStore.deckForm;
+    if (!deckForm) {
       return;
     }
 
-    this.deckSpeakLocale =
-      deckFormStore.form?.speakingCardsLocale.value ?? null;
-    this.deckSpeakField = deckFormStore.form?.speakingCardsField.value ?? null;
+    this.deckSpeakLocale = deckForm.speakingCardsLocale.value ?? null;
+    this.deckSpeakField = deckForm.speakingCardsField.value ?? null;
   }
 
   speak() {
diff --git a/src/screens/deck-review/store/review-store.test.ts b/src/screens/deck-review/store/review-store.test.ts
index 072f8ce6..ea5b5ea8 100644
--- a/src/screens/deck-review/store/review-store.test.ts
+++ b/src/screens/deck-review/store/review-store.test.ts
@@ -6,6 +6,12 @@ import {
   DeckWithCardsWithReviewType,
 } from "../../../store/deck-list-store.ts";
 
+vi.mock("mobx-persist-store", () => {
+  return {
+    makePersistable: () => {},
+  };
+});
+
 const deckCardsMock: DeckCardDbTypeWithType[] = [
   {
     id: 3,
@@ -59,6 +65,12 @@ const deckMock: DeckWithCardsWithReviewType = {
   category_id: null,
 };
 
+vi.mock("../lib/telegram/storage-adapter.ts", () => {
+  return {
+    storageAdapter: {},
+  };
+});
+
 vi.mock("../../../api/api.ts", () => {
   return {
     reviewCardsRequest: () => {},
@@ -80,13 +92,19 @@ vi.mock("../../../lib/voice-playback/speak.ts", async () => {
   };
 });
 
-vi.mock("../../../lib/telegram/hapticNotification.ts", () => {
+vi.mock("../../../lib/telegram/haptics.ts", () => {
   return {
     hapticImpact: () => {},
     hapticNotification: () => {},
   };
 });
 
+vi.mock("../../../store/user-store.ts", () => {
+  return {
+    userStore: {},
+  };
+});
+
 const cardToSnapshot = (card: CardUnderReviewStore) => ({
   back: card.back,
   deckName: card.deckName,
diff --git a/src/screens/deck-review/store/review-store.ts b/src/screens/deck-review/store/review-store.ts
index c38cdba2..e30e8084 100644
--- a/src/screens/deck-review/store/review-store.ts
+++ b/src/screens/deck-review/store/review-store.ts
@@ -8,7 +8,7 @@ import { type DeckWithCardsWithReviewType } from "../../../store/deck-list-store
 import {
   hapticImpact,
   hapticNotification,
-} from "../../../lib/telegram/hapticNotification.ts";
+} from "../../../lib/telegram/haptics.ts";
 
 type ReviewResult = {
   forgotIds: number[];
diff --git a/src/screens/user-settings/store/user-settings-store.tsx b/src/screens/user-settings/store/user-settings-store.tsx
index a5c75a64..876bf9dd 100644
--- a/src/screens/user-settings/store/user-settings-store.tsx
+++ b/src/screens/user-settings/store/user-settings-store.tsx
@@ -9,7 +9,7 @@ import { screenStore } from "../../../store/screen-store.ts";
 import { UserSettingsRequest } from "../../../../functions/user-settings.ts";
 import { BooleanField } from "../../../lib/mobx-form/boolean-field.ts";
 import { userStore } from "../../../store/user-store.ts";
-import { hapticNotification } from "../../../lib/telegram/hapticNotification.ts";
+import { hapticNotification } from "../../../lib/telegram/haptics.ts";
 
 const DEFAULT_TIME = "12:00";
 
diff --git a/src/store/deck-list-store.test.ts b/src/store/deck-list-store.test.ts
index 20b231a6..bd1339d9 100644
--- a/src/store/deck-list-store.test.ts
+++ b/src/store/deck-list-store.test.ts
@@ -4,6 +4,18 @@ import { MyInfoResponse } from "../../functions/my-info.ts";
 import { when } from "mobx";
 import { userStore } from "./user-store.ts";
 
+vi.mock("mobx-persist-store", () => {
+  return {
+    makePersistable: () => {},
+  };
+});
+
+vi.mock("../lib/telegram/storage-adapter.ts", () => {
+  return {
+    storageAdapter: {},
+  };
+});
+
 vi.mock("../api/api.ts", () => {
   return {
     reviewCardsRequest: () => {},
diff --git a/src/store/user-store.ts b/src/store/user-store.ts
index 373aac99..fcee4a22 100644
--- a/src/store/user-store.ts
+++ b/src/store/user-store.ts
@@ -2,13 +2,23 @@ import { makeAutoObservable } from "mobx";
 import { type UserDbType } from "../../functions/db/user/upsert-user-db.ts";
 import { assert } from "../lib/typescript/assert.ts";
 import { type PlansForUser } from "../../functions/db/plan/get-plans-for-user.ts";
+import { makePersistable } from "mobx-persist-store";
+import { storageAdapter } from "../lib/telegram/storage-adapter.ts";
+import { BooleanToggle } from "../lib/mobx-form/boolean-toggle.ts";
 
 export class UserStore {
   userInfo?: UserDbType;
   plans?: PlansForUser;
+  isCardFormattingOn = new BooleanToggle(false);
 
   constructor() {
     makeAutoObservable(this, {}, { autoBind: true });
+
+    makePersistable(this.isCardFormattingOn, {
+      name: "isCardFormattingOn",
+      properties: ["value"],
+      storage: storageAdapter,
+    });
   }
 
   setUser(user: UserDbType, plans: PlansForUser) {
diff --git a/src/translations/t.ts b/src/translations/t.ts
index dcac5c41..87d06425 100644
--- a/src/translations/t.ts
+++ b/src/translations/t.ts
@@ -3,6 +3,7 @@ import { getUserLanguage } from "./get-user-language.ts";
 
 const en = {
   my_decks: "My decks",
+  formatting: "Formatting",
   choose_what_to_create: "Choose what to create",
   deck: "Deck",
   deck_description: "A collection of cards",
@@ -153,6 +154,7 @@ const en = {
 type Translation = typeof en;
 
 const ru: Translation = {
+  formatting: "Форматирование",
   validation_at_least_one_deck: "Пожалуйста выберите хотя бы 1 колоду",
   duplicate_folder_confirm: "Вы уверены, что хотите продублировать эту папку?",
   validation_answer_at_least_one_correct: "Выберите хотя бы 1 правильный ответ",
@@ -299,6 +301,7 @@ const ru: Translation = {
 };
 
 const es: Translation = {
+  formatting: "Formato",
   validation_at_least_one_deck: "Por favor, selecciona al menos 1 mazo",
   duplicate_folder_confirm: "¿Estás seguro de duplicar esta carpeta?",
   yes_no: "Sí No",
@@ -451,6 +454,7 @@ const es: Translation = {
 };
 
 const ptBr: Translation = {
+  formatting: "Formatação",
   validation_answer_at_least_one_correct:
     "Selecione pelo menos uma resposta correta",
   is_correct_explanation: `Só pode haver uma resposta correta`,
diff --git a/src/ui/label.tsx b/src/ui/label.tsx
index 05470e43..cf535b2f 100644
--- a/src/ui/label.tsx
+++ b/src/ui/label.tsx
@@ -8,14 +8,16 @@ type Props = {
   isRequired?: boolean;
   // Helps to avoid nested <label> tags
   isPlain?: boolean;
+  slotRight?: ReactNode;
 };
 
 export const Label = (props: Props) => {
   const Tag = props.isPlain ? "span" : "label";
+  const { slotRight } = props;
 
   return (
     <Tag className={css({ display: "flex", flexDirection: "column", gap: 2 })}>
-      <span className={css({ marginLeft: 12 })}>
+      <span className={css({ marginLeft: 12, display: "flex" })}>
         {props.text}
         {props.isRequired && (
           <span
@@ -27,6 +29,16 @@ export const Label = (props: Props) => {
             *
           </span>
         )}
+        {slotRight && (
+          <span
+            className={css({
+              marginLeft: "auto",
+              marginRight: 12,
+            })}
+          >
+            {slotRight}
+          </span>
+        )}
       </span>
       {props.children}
     </Tag>
diff --git a/src/ui/wysiwyg-field/wysiwig-field.tsx b/src/ui/wysiwyg-field/wysiwig-field.tsx
index f984ea0f..e035f5a3 100644
--- a/src/ui/wysiwyg-field/wysiwig-field.tsx
+++ b/src/ui/wysiwyg-field/wysiwig-field.tsx
@@ -74,6 +74,12 @@ export const BtnRed = createButton(
   },
 );
 
+export const BtnClearFormatting = createButton(
+  "Clear formatting",
+  <i className={"mdi mdi-format-clear"} />,
+  "removeFormat",
+);
+
 type Props = {
   field: TextField<string>;
 };
@@ -109,6 +115,7 @@ export const WysiwygField = observer((props: Props) => {
           <BtnBigHeader />
           <BtnMiddleHeader />
           <BtnSmallHeader />
+          <BtnClearFormatting />
           <BtnUndo />
           <BtnRedo />
         </Toolbar>
diff --git a/src/ui/wysiwyg-field/wysiwyg-field.css b/src/ui/wysiwyg-field/wysiwyg-field.css
index d912000f..5475279a 100644
--- a/src/ui/wysiwyg-field/wysiwyg-field.css
+++ b/src/ui/wysiwyg-field/wysiwyg-field.css
@@ -7,7 +7,7 @@
 }
 
 .rsw-toolbar button:hover {
-  background-color: var(--tg-theme-button-color) !important;
+  background-color: unset !important;
 }
 
 .rsw-editor {