diff --git a/apps/client/src/widgets/type_widgets/options/text_notes.tsx b/apps/client/src/widgets/type_widgets/options/text_notes.tsx
index 9f63315b8..ad57e7a3e 100644
--- a/apps/client/src/widgets/type_widgets/options/text_notes.tsx
+++ b/apps/client/src/widgets/type_widgets/options/text_notes.tsx
@@ -26,6 +26,7 @@ export default function TextNoteSettings() {
             <CodeBlockStyle />
             <TableOfContent />
             <HighlightsList />
+            <AutoReadOnlySize />
         </>
     )
 }
@@ -279,4 +280,23 @@ function HighlightsList() {
             <FormText>{t("highlights_list.shortcut_info")}</FormText>
         </OptionsSection>
     )
+}
+
+function AutoReadOnlySize() {
+    const [ autoReadonlySizeText, setAutoReadonlySizeText ] = useTriliumOption("autoReadonlySizeText");
+
+    return (
+        <OptionsSection title={t("text_auto_read_only_size.title")}>
+            <FormText>{t("text_auto_read_only_size.description")}</FormText>
+
+            <FormGroup label={t("text_auto_read_only_size.label")}>
+                <FormTextBoxWithUnit
+                    name="auto-readonly-size-text"
+                    type="number" min={0}
+                    unit={t("text_auto_read_only_size.unit")}
+                    currentValue={autoReadonlySizeText} onChange={setAutoReadonlySizeText}
+                />
+            </FormGroup>
+        </OptionsSection>
+    )
 }
\ No newline at end of file
diff --git a/apps/client/src/widgets/type_widgets/options/text_notes/text_auto_read_only_size.ts b/apps/client/src/widgets/type_widgets/options/text_notes/text_auto_read_only_size.ts
deleted file mode 100644
index ef48abaaa..000000000
--- a/apps/client/src/widgets/type_widgets/options/text_notes/text_auto_read_only_size.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-import OptionsWidget from "../options_widget.js";
-import { t } from "../../../../services/i18n.js";
-import type { OptionMap } from "@triliumnext/commons";
-
-const TPL = /*html*/`
-<div class="options-section">
-    <h4>${t("text_auto_read_only_size.title")}</h4>
-
-    <p class="form-text">${t("text_auto_read_only_size.description")}</p>
-
-    <div class="form-group">
-        <label for="auto-readonly-size-text">${t("text_auto_read_only_size.label")}</label>
-        <label class="input-group tn-number-unit-pair">
-            <input id="auto-readonly-size-text" class="auto-readonly-size-text form-control options-number-input" type="number" min="0">
-            <span class="input-group-text">${t("text_auto_read_only_size.unit")}</span>
-        </label>
-    </div>
-</div>`;
-
-export default class TextAutoReadOnlySizeOptions extends OptionsWidget {
-
-    private $autoReadonlySizeText!: JQuery<HTMLElement>;
-
-    doRender() {
-        this.$widget = $(TPL);
-        this.$autoReadonlySizeText = this.$widget.find(".auto-readonly-size-text");
-        this.$autoReadonlySizeText.on("change", () => this.updateOption("autoReadonlySizeText", this.$autoReadonlySizeText.val()));
-    }
-
-    async optionsLoaded(options: OptionMap) {
-        this.$autoReadonlySizeText.val(options.autoReadonlySizeText);
-    }
-}