Add an option for wrapping words in Markdown editor by default

assets/js/hooks/cell_editor/live_editor.js

@@ -262,6 +262,10 @@ class LiveEditor {
       // of the line we would get "defmodule" as a word completion.
       wordBasedSuggestions: !this.intellisense,
       parameterHints: this.intellisense && settings.editor_auto_signature,
+      wordWrap:
+        this.language === "markdown" && settings.editor_markdown_word_wrap
+          ? "on"
+          : "off",
     });
 
     this.editor.addAction({

assets/js/hooks/editor_settings.js

@@ -23,13 +23,17 @@ const EditorSettings = {
     const editorHighContrastCheckbox = this.el.querySelector(
       `[name="editor_high_contrast"][value="true"]`
     );
+    const editorMarkdownWordWrapCheckbox = this.el.querySelector(
+      `[name="editor_markdown_word_wrap"][value="true"]`
+    );
 
     editorAutoCompletionCheckbox.checked = settings.editor_auto_completion;
     editorAutoSignatureCheckbox.checked = settings.editor_auto_signature;
     editorFontSizeCheckbox.checked =
       settings.editor_font_size === EDITOR_FONT_SIZE.large ? true : false;
     editorHighContrastCheckbox.checked =
       settings.editor_theme === EDITOR_THEME.highContrast ? true : false;
+    editorMarkdownWordWrapCheckbox.checked = settings.editor_markdown_word_wrap;
 
     editorAutoCompletionCheckbox.addEventListener("change", (event) => {
       settingsStore.update({ editor_auto_completion: event.target.checked });
@@ -54,6 +58,10 @@ const EditorSettings = {
           : EDITOR_THEME.default,
       });
     });
+
+    editorMarkdownWordWrapCheckbox.addEventListener("change", (event) => {
+      settingsStore.update({ editor_markdown_word_wrap: event.target.checked });
+    });
   },
 };
 

assets/js/lib/settings.js

@@ -17,6 +17,7 @@ const DEFAULT_SETTINGS = {
   editor_auto_signature: true,
   editor_font_size: EDITOR_FONT_SIZE.normal,
   editor_theme: EDITOR_THEME.default,
+  editor_markdown_word_wrap: true,
 };
 
 /**

lib/livebook_web/live/settings_live.ex

@@ -121,6 +121,10 @@ defmodule LivebookWeb.SettingsLive do
                   name="editor_high_contrast"
                   label="Use high contrast theme"
                   checked={false} />
+                <.switch_checkbox
+                  name="editor_markdown_word_wrap"
+                  label="Wrap words in Markdown"
+                  checked={false} />
               </div>
             </div>
           </div>