client, server: Create option to control word wrapping for code blocks

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

@@ -23,6 +23,13 @@ const TPL = `
             <label>${t("highlighting.color-scheme")}</label>
             <select class="theme-select form-select"></select>
         </div>
+
+        <div class="col-6">
+            <label>Word wrapping</label>
+            <div class="form-check">
+                <input type="checkbox" class="word-wrap form-check-input" />
+            </div>
+        </div>
     </div>
 
     <div class="form-group row">
@@ -51,6 +58,9 @@ export default class CodeBlockOptions extends OptionsWidget {
             library_loader.loadHighlightingTheme(newTheme);
             await server.put(`options/codeBlockTheme/${newTheme}`);
         });
+        
+        this.$wordWrap = this.$widget.find(".word-wrap");
+        this.$wordWrap.on("change", () => this.updateCheckboxOption("codeBlockWordWrap", this.$wordWrap));
 
         // Set up preview
         const sampleEl = this.$widget.find(".code-sample");
@@ -74,5 +84,6 @@ export default class CodeBlockOptions extends OptionsWidget {
                 .text(theme.title));
         }
         this.$themeSelect.val(options.codeBlockTheme);
+        this.setCheckboxState(this.$wordWrap, options.codeBlockWordWrap);
     }
 }

src/routes/api/options.ts

@@ -17,6 +17,7 @@ const ALLOWED_OPTIONS = new Set([
     'zoomFactor',
     'theme',
     'codeBlockTheme',
+    "codeBlockWordWrap",
     'syncServerHost',
     'syncServerTimeout',
     'syncProxy',

src/services/options_init.ts

@@ -100,7 +100,9 @@ const defaultOptions: DefaultOption[] = [
 
     // Internationalization
     { name: 'locale', value: 'en', isSynced: true },
-    { name: 'firstDayOfWeek', value: '1', isSynced: true }    
+    { name: 'firstDayOfWeek', value: '1', isSynced: true },
+
+    { name: "codeBlockWordWrap", value: "false", isSynced: true }
 ];
 
 function initStartupOptions() {