From 94850677497e8cb4fdfccdd1b64c2c209777c29b Mon Sep 17 00:00:00 2001
From: Adorian Doran <adorian@esevo.ro>
Date: Wed, 13 Nov 2024 23:34:43 +0200
Subject: [PATCH] client: Replace the editor type combo box with radio buttons

---
 .../type_widgets/options/text_notes/editor.js | 28 +++++++++++++------
 1 file changed, 20 insertions(+), 8 deletions(-)

diff --git a/src/public/app/widgets/type_widgets/options/text_notes/editor.js b/src/public/app/widgets/type_widgets/options/text_notes/editor.js
index 9db62b40b..ce5bc9edc 100644
--- a/src/public/app/widgets/type_widgets/options/text_notes/editor.js
+++ b/src/public/app/widgets/type_widgets/options/text_notes/editor.js
@@ -6,25 +6,37 @@ const TPL = `
 <div class="options-section">
     <h4>${t("editing.editor_type.label")}</h4>
     
-    <select class="editor-type-select form-select">
-        <option value="ckeditor-balloon">${t("editing.editor_type.floating")}</option>
-        <option value="ckeditor-classic">${t("editing.editor_type.fixed")}</option>
-    </select>
+    <div>
+        <label>
+            <input type="radio" name="editor-type" value="ckeditor-balloon" />
+            <strong>${t("editing.editor_type.floating.title")}</strong>
+            - ${t("editing.editor_type.floating.description")}
+        </label>
+    </div>
+
+    <div>
+        <label>
+            <input type="radio" name="editor-type" value="ckeditor-classic" />
+            <strong>${t("editing.editor_type.fixed.title")}</strong>
+            - ${t("editing.editor_type.fixed.description")}
+        </label>
+    </div>
+
 </div>`;
 
 export default class EditorOptions extends OptionsWidget {
     doRender() {
         this.$widget = $(TPL);
         this.$body = $("body");
-        this.$editorType = this.$widget.find(".editor-type-select");
-        this.$editorType.on('change', async () => {
-            const newEditorType = this.$editorType.val();
+        this.$widget.find(`input[name="editor-type"]`).on('change', async () => {
+            const newEditorType = this.$widget.find(`input[name="editor-type"]:checked`).val();
             await this.updateOption('textNoteEditorType', newEditorType);
             utils.reloadFrontendApp("editor type change");
         });
     }
 
     async optionsLoaded(options) {
-        this.$editorType.val(options.textNoteEditorType);
+        this.$widget.find(`input[name="editor-type"][value="${options.textNoteEditorType}"]`)
+                    .prop("checked", "true");
     }
 }