From e2935488a37b64a7fc376f1a998fc4cb534df5ee Mon Sep 17 00:00:00 2001
From: Louis Meyer <h1ghbre4k3r@dev.bre4k3r.de>
Date: Fri, 22 May 2020 19:31:31 +0200
Subject: [PATCH] fix: properly wrap very long words in markdown editor (#1743)

* Fix: Fix word-wrap in markdown editor

Overwrite css-property 'work-break: normal' for '.CodeMirror-wrap
pre.CodeMirror-line', which lead to words not wrapping correctly,
with 'word-break: break-word' to properly wrap words.

* Add rule for 'p.line' under .editor-markdown-preview-content

Add 'overflow-wrap: break-word;' for line in the preview of the markdown editor, so the preview properly wraps and does not overflow.
---
 client/components/editor/editor-markdown.vue | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/client/components/editor/editor-markdown.vue b/client/components/editor/editor-markdown.vue
index 142bfe7c..98359dac 100644
--- a/client/components/editor/editor-markdown.vue
+++ b/client/components/editor/editor-markdown.vue
@@ -825,6 +825,10 @@ $editor-height-mobile: calc(100vh - 112px - 16px);
       @include until($tablet) {
         height: $editor-height-mobile;
       }
+
+      p.line {
+        overflow-wrap: break-word;
+      }
     }
   }
 
@@ -915,6 +919,10 @@ $editor-height-mobile: calc(100vh - 112px - 16px);
     }
   }
 
+  .CodeMirror-wrap pre.CodeMirror-line, .CodeMirror-wrap pre.CodeMirror-line-like {
+    word-break: break-word;
+  }
+
   .CodeMirror-focused .cm-matchhighlight {
     background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAFklEQVQI12NgYGBgkKzc8x9CMDAwAAAmhwSbidEoSQAAAABJRU5ErkJggg==);
     background-position: bottom;