Jelajahi Sumber

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.
Louis Meyer 5 tahun lalu
induk
melakukan
e2935488a3
1 mengubah file dengan 8 tambahan dan 0 penghapusan
  1. 8 0
      client/components/editor/editor-markdown.vue

+ 8 - 0
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;