liz/wikijs-fork
liz/wikijs-fork
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: properly wrap very long words in markdown editor (#1743)

Browse Source 
* 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.
This commit is contained in:
Louis Meyer 2020-05-22 19:31:31 +02:00 committed by GitHub
parent 8a1b5b1383
commit e2935488a3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 8 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
client/components/editor/editor-markdown.vue
View File

@ -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;