client: Set up ui for selecting editor UI

This commit is contained in:
Elian Doran 2024-11-09 14:33:20 +02:00
parent 7a70fc14b3
commit 89420eafa3
No known key found for this signature in database
2 changed files with 34 additions and 0 deletions

View File

@ -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,

View File

@ -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);
}
}