feat(classic-toolbar): allow user to toggle multiline toolbar

src/public/app/widgets/type_widgets/editable_text.js

@@ -176,8 +176,16 @@ export default class EditableTextTypeWidget extends AbstractTextTypeWidget {
         });
 
         this.watchdog.setCreator(async (elementOrData, editorConfig) => {
+            const extraOpts = {};
+            if (isClassicEditor) {
+                extraOpts.toolbar = {
+                    shouldNotGroupWhenFull: options.get("textNoteEditorMultilineToolbar") === "true"
+                };
+            }
+
             const editor = await editorClass.create(elementOrData, {
                 ...editorConfig,
+                ...extraOpts,
                 htmlSupport: {
                     allow: JSON.parse(options.get("allowedHtmlTags")),
                     styles: true,

src/public/app/widgets/type_widgets/options/text_notes/editor.js

@@ -3,7 +3,7 @@ import utils from "../../../../services/utils.js";
 import OptionsWidget from "../options_widget.js";
 
 const TPL = `
-<div class="options-section">
+<div class="options-section formatting-toolbar">
     <h4>${t("editing.editor_type.label")}</h4>
     
     <div>
@@ -20,9 +20,23 @@ const TPL = `
             <strong>${t("editing.editor_type.fixed.title")}</strong>
             - ${t("editing.editor_type.fixed.description")}
         </label>
+
+        <div>
+            <label>
+                <input type="checkbox" name="multiline-toolbar" />
+                Display the toolbar on multiple lines if it doesn't fit.
+            </label>
         </div>
+    </div>
+
+</div>
 
-</div>`;
+<style>
+    .formatting-toolbar div > div {
+        margin-left: 1em;
+    }
+</style>
+`;
 
 export default class EditorOptions extends OptionsWidget {
     doRender() {
@@ -33,10 +47,14 @@ export default class EditorOptions extends OptionsWidget {
             await this.updateOption('textNoteEditorType', newEditorType);
             utils.reloadFrontendApp("editor type change");
         });
+        
+        this.$multilineToolbarCheckbox = this.$widget.find('input[name="multiline-toolbar"]');
+        this.$multilineToolbarCheckbox.on("change", () => this.updateCheckboxOption("textNoteEditorMultilineToolbar", this.$multilineToolbarCheckbox));
     }
 
     async optionsLoaded(options) {
         this.$widget.find(`input[name="editor-type"][value="${options.textNoteEditorType}"]`)
                     .prop("checked", "true");
+        this.setCheckboxState(this.$multilineToolbarCheckbox, options.textNoteEditorMultilineToolbar);
     }
 }

src/routes/api/options.ts

@@ -67,6 +67,7 @@ const ALLOWED_OPTIONS = new Set([
     'locale',
     'firstDayOfWeek',
     'textNoteEditorType',
+    'textNoteEditorMultilineToolbar',
     'layoutOrientation',
     'backgroundEffects',
     'allowedHtmlTags' // Allow configuring HTML import tags

src/services/options_init.ts

@@ -134,6 +134,7 @@ const defaultOptions: DefaultOption[] = [
 
     // Text note configuration
     { name: "textNoteEditorType", value: "ckeditor-balloon", isSynced: true },
+    { name: "textNoteEditorMultilineToolbar", value: "false", isSynced: true },
 
     // HTML import configuration
     { name: "layoutOrientation", value: "vertical", isSynced: false },