Merge pull request #3299 from Banbury/code-options-linebreak

Added option to toggle line wrapping for Code notes

src/public/app/widgets/dialogs/options/code_notes.js

@@ -10,6 +10,11 @@ const TPL = `
     <input type="checkbox" class="custom-control-input" id="vim-keymap-enabled">
     <label class="custom-control-label" for="vim-keymap-enabled">Enable Vim Keybindings</label>
 </div>
+<h4>Wrap lines in CodeNotes</h4>
+<div class="custom-control custom-checkbox">
+    <input type="checkbox" class="custom-control-input" id="linewrap-enabled">
+    <label class="custom-control-label" for="linewrap-enabled">Enable Linewrap</label>
+</div>
 <h4>Available MIME types in the dropdown</h4>
 
 <ul id="options-mime-types" style="max-height: 500px; overflow: auto; list-style-type: none;"></ul>`;
@@ -24,12 +29,19 @@ export default class CodeNotesOptions {
             server.put('options', opts).then(() => toastService.showMessage("Options change have been saved."));
             return false;
         });
+        this.$linewrapEnabled = $("#linewrap-enabled");
+        this.$linewrapEnabled.on('change', () => {
+            const opts = { 'linewrapEnabled': this.$linewrapEnabled.is(":checked") ? "true" : "false" };
+            server.put('options', opts).then(() => toastService.showMessage("Options change have been saved."));
+            return false;
+        });
         this.$mimeTypes = $("#options-mime-types");
     }
 
     async optionsLoaded(options) {
         this.$mimeTypes.empty();
         this.$vimKeymapEnabled.prop("checked", options['vimKeymapEnabled'] === 'true');
+        this.$linewrapEnabled.prop("checked", options['linewrapEnabled'] === 'true');
         let idCtr = 1;
 
         for (const mimeType of await mimeTypesService.getMimeTypes()) {

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

@@ -60,7 +60,7 @@ export default class EditableCodeTypeWidget extends TypeWidget {
             tabindex: 300,
             // we linewrap partly also because without it horizontal scrollbar displays only when you scroll
             // all the way to the bottom of the note. With line wrap there's no horizontal scrollbar so no problem
-            lineWrapping: true,
+            lineWrapping: options.is('linewrapEnabled'),
             dragDrop: false, // with true the editor inlines dropped files which is not what we expect
             placeholder: "Type the content of your code note here..."
         });

src/routes/api/options.js

@@ -33,6 +33,7 @@ const ALLOWED_OPTIONS = new Set([
     'editedNotesWidget',
     'calendarWidget',
     'vimKeymapEnabled',
+    'linewrapEnabled',
     'codeNotesMimeTypes',
     'spellCheckEnabled',
     'spellCheckLanguageCode',

src/services/options_init.js

@@ -62,6 +62,7 @@ const defaultOptions = [
     { name: 'imageJpegQuality', value: '75', isSynced: true },
     { name: 'autoFixConsistencyIssues', value: 'true', isSynced: false },
     { name: 'vimKeymapEnabled', value: 'false', isSynced: false },
+    { name: 'linewrapEnabled', value: 'true', isSynced: false },
     { name: 'codeNotesMimeTypes', value: '["text/x-csrc","text/x-c++src","text/x-csharp","text/css","text/x-go","text/x-groovy","text/x-haskell","text/html","message/http","text/x-java","application/javascript;env=frontend","application/javascript;env=backend","application/json","text/x-kotlin","text/x-markdown","text/x-perl","text/x-php","text/x-python","text/x-ruby",null,"text/x-sql","text/x-sqlite;schema=trilium","text/x-swift","text/xml","text/x-yaml"]', isSynced: true },
     { name: 'leftPaneWidth', value: '25', isSynced: false },
     { name: 'leftPaneVisible', value: 'true', isSynced: false },