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 4ae575317..c08f7289b 100644
--- a/apps/client/src/widgets/type_widgets/options/text_notes.tsx
+++ b/apps/client/src/widgets/type_widgets/options/text_notes.tsx
@@ -8,6 +8,7 @@ export default function TextNoteSettings() {
     return (
         <>
             <FormattingToolbar />
+            <EditorFeatures />
         </>
     )
 }
@@ -43,4 +44,25 @@ function FormattingToolbar() {
             />
         </OptionsSection>
     )
+}
+
+function EditorFeatures() {
+    const [ textNoteEmojiCompletionEnabled, setTextNoteEmojiCompletionEnabled] = useTriliumOptionBool("textNoteEmojiCompletionEnabled");
+    const [ textNoteCompletionEnabled, setTextNoteCompletionEnabled ] = useTriliumOptionBool("textNoteCompletionEnabled");
+
+    return (
+        <OptionsSection title={t("editorfeatures.title")}>
+            <FormCheckbox
+                name="emoji-completion-enabled"
+                label={t("editorfeatures.emoji_completion_enabled")}
+                currentValue={textNoteEmojiCompletionEnabled} onChange={setTextNoteEmojiCompletionEnabled}
+            /> 
+
+            <FormCheckbox
+                name="note-completion-enabled"
+                label={t("editorfeatures.note_completion_enabled")}
+                currentValue={textNoteCompletionEnabled} onChange={setTextNoteCompletionEnabled}
+            />
+        </OptionsSection>
+    );
 }
\ No newline at end of file
diff --git a/apps/client/src/widgets/type_widgets/options/text_notes/features.ts b/apps/client/src/widgets/type_widgets/options/text_notes/features.ts
deleted file mode 100644
index d0986fe0d..000000000
--- a/apps/client/src/widgets/type_widgets/options/text_notes/features.ts
+++ /dev/null
@@ -1,45 +0,0 @@
-import { OptionMap } from "@triliumnext/commons";
-import OptionsWidget from "../options_widget";
-import { t } from "../../../../services/i18n";
-
-const TPL = /*html*/`
-<div class="options-section">
-    <h4>${t("editorfeatures.title")}</h4>
-
-    <div>
-        <label class="tn-checkbox">
-            <input type="checkbox" name="emoji-completion-enabled" />
-            ${t("editorfeatures.emoji_completion_enabled")}
-        </label>
-    </div>
-
-    <div>
-        <label class="tn-checkbox">
-            <input type="checkbox" name="note-completion-enabled" />
-            ${t("editorfeatures.note_completion_enabled")}
-        </label>
-    </div>
-</div>
-`;
-
-export default class EditorFeaturesOptions extends OptionsWidget {
-
-    private $emojiCompletionEnabledCheckbox!: JQuery<HTMLElement>;
-    private $noteCompletionEnabledCheckbox!: JQuery<HTMLElement>;
-
-    doRender() {
-        this.$widget = $(TPL);
-
-        this.$emojiCompletionEnabledCheckbox = this.$widget.find(`input[name="emoji-completion-enabled"]`);
-        this.$emojiCompletionEnabledCheckbox.on("change", () => this.updateCheckboxOption("textNoteEmojiCompletionEnabled", this.$emojiCompletionEnabledCheckbox))
-
-        this.$noteCompletionEnabledCheckbox = this.$widget.find(`input[name="note-completion-enabled"]`);
-        this.$noteCompletionEnabledCheckbox.on("change", () => this.updateCheckboxOption("textNoteCompletionEnabled", this.$noteCompletionEnabledCheckbox))
-    }
-
-    optionsLoaded(options: OptionMap) {
-        this.setCheckboxState(this.$emojiCompletionEnabledCheckbox, options.textNoteEmojiCompletionEnabled);
-        this.setCheckboxState(this.$noteCompletionEnabledCheckbox, options.textNoteCompletionEnabled);
-    }
-
-}