add option to hide the "Powered by CKEditor" banner

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

@@ -31,6 +31,7 @@ import VacuumDatabaseOptions from "./options/advanced/vacuum_database.js";
 import DatabaseAnonymizationOptions from "./options/advanced/database_anonymization.js";
 import BackendLogWidget from "./content/backend_log.js";
 import AttachmentErasureTimeoutOptions from "./options/other/attachment_erasure_timeout.js";
+import PoweredByCKEditorOptions from "./options/appearance/powered_by_ckeditor.js";
 
 const TPL = `<div class="note-detail-content-widget note-detail-printable">
     <style>
@@ -53,10 +54,11 @@ const TPL = `<div class="note-detail-content-widget note-detail-printable">
 
 const CONTENT_WIDGETS = {
     _optionsAppearance: [
-        ZoomFactorOptions,
+        PoweredByCKEditorOptions,
-        NativeTitleBarOptions,
         ThemeOptions,
         FontsOptions,
+        ZoomFactorOptions,
+        NativeTitleBarOptions,
         MaxContentWidthOptions
     ],
     _optionsShortcuts: [ KeyboardShortcutsOptions ],

src/public/app/widgets/type_widgets/options/appearance/powered_by_ckeditor.js

@@ -0,0 +1,32 @@
+import OptionsWidget from "../options_widget.js";
+import utils from "../../../../services/utils.js";
+
+const TPL = `
+<div class="options-section">
+    <h4>Powered by CKEditor banner</h4>
+    
+    <p>CKEditor by default displays a small banner in the editing area. Some users may find this distracting, so it is possible to hide it.</p>
+    
+    <select class="powered-by-ckeditor-select form-control">
+        <option value="show">shown</option>
+        <option value="hide">hidden</option>
+    </select>
+</div>`;
+
+export default class PoweredByCKEditorOptions extends OptionsWidget {
+    doRender() {
+        this.$widget = $(TPL);
+        this.$poweredByCKEditorSelect = this.$widget.find(".powered-by-ckeditor-select");
+        this.$poweredByCKEditorSelect.on('change', async () => {
+            const hidePoweredByCKEditor = this.$poweredByCKEditorSelect.val() === 'hide' ? 'true' : 'false';
+
+            await this.updateOption('hidePoweredByCKEditor', hidePoweredByCKEditor);
+
+            utils.reloadFrontendApp("Powered by CKEditor change");
+        });
+    }
+
+    async optionsLoaded(options) {
+        this.$poweredByCKEditorSelect.val(options.hidePoweredByCKEditor === 'true' ? 'hide' : 'show');
+    }
+}

src/routes/api/options.js

@@ -56,6 +56,7 @@ const ALLOWED_OPTIONS = new Set([
     'disableTray',
     'customSearchEngineName',
     'customSearchEngineUrl',
+    'hidePoweredByCKEditor'
 ]);
 
 function getOptions() {

src/routes/index.js

@@ -29,6 +29,7 @@ function index(req, res) {
         mainFontSize: parseInt(options.mainFontSize),
         treeFontSize: parseInt(options.treeFontSize),
         detailFontSize: parseInt(options.detailFontSize),
+        hidePoweredByCKEditor: options.hidePoweredByCKEditor === 'true',
         maxEntityChangeIdAtLoad: sql.getValue("SELECT COALESCE(MAX(id), 0) FROM entity_changes"),
         maxEntityChangeSyncIdAtLoad: sql.getValue("SELECT COALESCE(MAX(id), 0) FROM entity_changes WHERE isSynced = 1"),
         instanceName: config.General ? config.General.instanceName : null,

src/services/options_init.js

@@ -89,6 +89,7 @@ const defaultOptions = [
     { name: 'eraseUnusedAttachmentsAfterSeconds', value: '2592000', isSynced: true },
     { name: 'customSearchEngineName', value: 'DuckDuckGo', isSynced: true },
     { name: 'customSearchEngineUrl', value: 'https://duckduckgo.com/?q={keyword}', isSynced: true },
+    { name: 'hidePoweredByCKEditor', value: 'false', isSynced: true },
 ];
 
 function initStartupOptions() {

src/views/desktop.ejs

@@ -44,6 +44,12 @@
     .note-split {
         max-width: <%= maxContentWidth %>px;
     }
+
+    <% if (hidePoweredByCKEditor) { %>
+    .ck-powered-by-balloon {
+        display: none !important;
+    }
+    <% } %>
 </style>
 
 <!-- Required for correct loading of scripts in Electron -->