diff --git a/apps/client/src/widgets/type_widgets/options/code_notes.tsx b/apps/client/src/widgets/type_widgets/options/code_notes.tsx
index 4e025436f..f86639ea5 100644
--- a/apps/client/src/widgets/type_widgets/options/code_notes.tsx
+++ b/apps/client/src/widgets/type_widgets/options/code_notes.tsx
@@ -12,7 +12,7 @@ import { DEFAULT_PREFIX } from "../abstract_code_type_widget";
 import { MimeType } from "@triliumnext/commons";
 import mime_types from "../../../services/mime_types";
 import CheckboxList from "./components/CheckboxList";
-import { CSSProperties, memo } from "preact/compat";
+import AutoReadOnlySize from "./components/AutoReadOnlySize";
 
 const SAMPLE_MIME = "application/typescript";
 
@@ -22,6 +22,7 @@ export default function CodeNoteSettings() {
             <Editor />
             <Appearance />
             <CodeMimeTypes />
+            <AutoReadOnlySize option="autoReadonlySizeCode" label={t("code_auto_read_only_size.label")} />
         </>
     )
 }
diff --git a/apps/client/src/widgets/type_widgets/options/code_notes/code_auto_read_only_size.ts b/apps/client/src/widgets/type_widgets/options/code_notes/code_auto_read_only_size.ts
deleted file mode 100644
index b3b7bad0f..000000000
--- a/apps/client/src/widgets/type_widgets/options/code_notes/code_auto_read_only_size.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-import type { OptionMap } from "@triliumnext/commons";
-import { t } from "../../../../services/i18n.js";
-import OptionsWidget from "../options_widget.js";
-
-const TPL = /*html*/`
-<div class="options-section">
-    <h4>${t("code_auto_read_only_size.title")}</h4>
-
-    <p class="form-text">${t("code_auto_read_only_size.description")}</p>
-
-    <div class="form-group">
-        <label for="auto-readonly-size-code">${t("code_auto_read_only_size.label")}</label>
-        <label class="input-group tn-number-unit-pair">
-            <input id="auto-readonly-size-code" class="auto-readonly-size-code form-control options-number-input" type="number" min="0">
-            <span class="input-group-text">${t("code_auto_read_only_size.unit")}</span>
-        </label>
-    </div>
-</div>`;
-
-export default class CodeAutoReadOnlySizeOptions extends OptionsWidget {
-
-    private $autoReadonlySizeCode!: JQuery<HTMLElement>;
-
-    doRender() {
-        this.$widget = $(TPL);
-        this.$autoReadonlySizeCode = this.$widget.find(".auto-readonly-size-code");
-        this.$autoReadonlySizeCode.on("change", () => this.updateOption("autoReadonlySizeCode", this.$autoReadonlySizeCode.val()));
-    }
-
-    async optionsLoaded(options: OptionMap) {
-        this.$autoReadonlySizeCode.val(options.autoReadonlySizeCode);
-    }
-}
diff --git a/apps/client/src/widgets/type_widgets/options/components/AutoReadOnlySize.tsx b/apps/client/src/widgets/type_widgets/options/components/AutoReadOnlySize.tsx
new file mode 100644
index 000000000..3fd7abccb
--- /dev/null
+++ b/apps/client/src/widgets/type_widgets/options/components/AutoReadOnlySize.tsx
@@ -0,0 +1,31 @@
+import { OptionNames } from "@triliumnext/commons";
+import FormText from "../../../react/FormText";
+import { FormTextBoxWithUnit } from "../../../react/FormTextBox";
+import OptionsSection from "./OptionsSection";
+import { useTriliumOption } from "../../../react/hooks";
+import { t } from "../../../../services/i18n";
+import FormGroup from "../../../react/FormGroup";
+
+interface AutoReadOnlySizeProps {
+    label: string;
+    option: OptionNames;
+}
+
+export default function AutoReadOnlySize({ label, option }: AutoReadOnlySizeProps) {
+    const [ autoReadonlyOpt, setAutoReadonlyOpt ] = useTriliumOption(option);
+
+    return (
+        <OptionsSection title={t("text_auto_read_only_size.title")}>
+            <FormText>{t("text_auto_read_only_size.description")}</FormText>
+
+            <FormGroup label={label}>
+                <FormTextBoxWithUnit
+                    name="auto-readonly-size-text"
+                    type="number" min={0}
+                    unit={t("text_auto_read_only_size.unit")}
+                    currentValue={autoReadonlyOpt} onChange={setAutoReadonlyOpt}
+                />
+            </FormGroup>
+        </OptionsSection>
+    )
+}
\ No newline at end of file
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 13390ff0c..a8506a5e2 100644
--- a/apps/client/src/widgets/type_widgets/options/text_notes.tsx
+++ b/apps/client/src/widgets/type_widgets/options/text_notes.tsx
@@ -18,6 +18,7 @@ import FormTextBox, { FormTextBoxWithUnit } from "../../react/FormTextBox";
 import CheckboxList from "./components/CheckboxList";
 import KeyboardShortcut from "../../react/KeyboardShortcut";
 import { Trans } from "react-i18next";
+import AutoReadOnlySize from "./components/AutoReadOnlySize";
 
 export default function TextNoteSettings() {
     return (
@@ -28,7 +29,7 @@ export default function TextNoteSettings() {
             <CodeBlockStyle />
             <TableOfContent />
             <HighlightsList />
-            <AutoReadOnlySize />
+            <AutoReadOnlySize option="autoReadonlySizeText" label={t("text_auto_read_only_size.label")} />
             <DateTimeFormatOptions />
         </>
     )
@@ -285,25 +286,6 @@ function HighlightsList() {
     )
 }
 
-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>
-    )
-}
-
 function DateTimeFormatOptions() {
     const [ customDateTimeFormat, setCustomDateTimeFormat ] = useTriliumOption("customDateTimeFormat");