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.

fix: properly wrap very long words in markdown editor (#1743)
e2935488 · Louis Meyer · GitHub · 8a1b5b13 · e2935488
Unverified Commit e2935488 authored May 22, 2020 by Louis Meyer Committed by GitHub May 22, 2020
Hide whitespace changes
Inline Side-by-side

Showing with 8 additions and 0 deletions

editor-markdown.vue client/components/editor/editor-markdown.vue +8 -0

No files found.
--- 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;