From 89420eafa3f11971e680e113b725cd8c428a345f Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Sat, 9 Nov 2024 14:33:20 +0200
Subject: [PATCH] client: Set up ui for selecting editor UI

---
 .../widgets/type_widgets/content_widget.js    |  2 ++
 .../type_widgets/options/text_notes/editor.js | 32 +++++++++++++++++++
 2 files changed, 34 insertions(+)
 create mode 100644 src/public/app/widgets/type_widgets/options/text_notes/editor.js

diff --git a/src/public/app/widgets/type_widgets/content_widget.js b/src/public/app/widgets/type_widgets/content_widget.js
index 92e4895f7..7f4a4e3ee 100644
--- a/src/public/app/widgets/type_widgets/content_widget.js
+++ b/src/public/app/widgets/type_widgets/content_widget.js
@@ -35,6 +35,7 @@ import AttachmentErasureTimeoutOptions from "./options/other/attachment_erasure_
 import RibbonOptions from "./options/appearance/ribbon.js";
 import LocalizationOptions from "./options/appearance/i18n.js";
 import CodeBlockOptions from "./options/appearance/code_block.js";
+import EditorOptions from "./options/text_notes/editor.js";
 
 const TPL = `<div class="note-detail-content-widget note-detail-printable">
     <style>
@@ -68,6 +69,7 @@ const CONTENT_WIDGETS = {
     ],
     _optionsShortcuts: [ KeyboardShortcutsOptions ],
     _optionsTextNotes: [
+        EditorOptions,
         HeadingStyleOptions,
         TableOfContentsOptions,
         HighlightsListOptions,
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
new file mode 100644
index 000000000..559328630
--- /dev/null
+++ b/src/public/app/widgets/type_widgets/options/text_notes/editor.js
@@ -0,0 +1,32 @@
+import OptionsWidget from "../options_widget.js";
+
+const TPL = `
+<div class="options-section">
+    <h4>Editor</h4>
+    
+    <div class="form-group row">
+        <div class="col-6">
+            <label>Editor type</label>
+            <select class="editor-type-select form-select">
+                <option value="ckeditor-balloon">CKEditor with floating toolbar (default)</option>
+                <option value="ckeditor-classic">CKEditor with fixed toolbar</option>
+            </select>
+        </div>
+    </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', () => {
+            const newEditorType = this.$editorType.val();
+            this.updateOption('textNoteEditorType', newEditorType);
+        });
+    }
+
+    async optionsLoaded(options) {
+        this.$editorType.val(options.textNoteEditorType);
+    }
+}