From 39a294abbe3b0e38e2ca8c84745ac4b5cdbbde0f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jonatan=20K=C5=82osko?= <jonatanklosko@gmail.com>
Date: Wed, 13 Apr 2022 23:54:05 +0200
Subject: [PATCH] Add an option for wrapping words in Markdown editor by
 default (#1107)

---
 assets/js/hooks/cell_editor/live_editor.js | 4 ++++
 assets/js/hooks/editor_settings.js         | 8 ++++++++
 assets/js/lib/settings.js                  | 1 +
 lib/livebook_web/live/settings_live.ex     | 4 ++++
 4 files changed, 17 insertions(+)

diff --git a/assets/js/hooks/cell_editor/live_editor.js b/assets/js/hooks/cell_editor/live_editor.js
index bdd487f23..0758dfb2e 100644
--- a/assets/js/hooks/cell_editor/live_editor.js
+++ b/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({
diff --git a/assets/js/hooks/editor_settings.js b/assets/js/hooks/editor_settings.js
index 404ab7add..956d8837b 100644
--- a/assets/js/hooks/editor_settings.js
+++ b/assets/js/hooks/editor_settings.js
@@ -23,6 +23,9 @@ 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;
@@ -30,6 +33,7 @@ const EditorSettings = {
       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 });
+    });
   },
 };
 
diff --git a/assets/js/lib/settings.js b/assets/js/lib/settings.js
index 15d941447..8064b1445 100644
--- a/assets/js/lib/settings.js
+++ b/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,
 };
 
 /**
diff --git a/lib/livebook_web/live/settings_live.ex b/lib/livebook_web/live/settings_live.ex
index 522e15c8c..02e7d3abd 100644
--- a/lib/livebook_web/live/settings_live.ex
+++ b/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>