webapp/bookstack
1
0
Fork 0
mirror of https://github.com/BookStackApp/BookStack.git synced 2025-08-09 10:22:51 +03:00
Code Activity

Revamped workings of WYSIWYG code blocks

Browse Source 
Code blocks in tinymce could sometimes end up exploded into the sub
elements of the codemirror display.
This changes the strategy to render codemirror within the shadow dom of
a custom element while preserving the normal pre/code DOM structure.

Still a little instability when moving/adding code blocks within details
blocks but much harder to break things now.
This commit is contained in:
Dan Brown
2022-02-09 19:24:27 +00:00
parent 2b46b00f29
commit 2b3726702d
7 changed files with 216 additions and 148 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
resources/sass/_pages.scss
View File

@@ -158,6 +158,11 @@ body.tox-fullscreen, body.markdown-fullscreen {
details > summary + * {
margin-top: .2em;
}
details:after {
content: '';
display: block;
clear: both;
}
&.page-revision {
pre code {

10
resources/sass/_tinymce.scss
View File

@@ -21,6 +21,9 @@
.page-content.mce-content-body doc-root {
display: block;
}
.page-content.mce-content-body code-block {
display: block;
}
// In editor line height override
.page-content.mce-content-body p {
@@ -38,9 +41,12 @@ body.page-content.mce-content-body {
}
// Prevent scroll jumps on codemirror clicks
.page-content.mce-content-body .CodeMirror {
.page-content.mce-content-body code-block > * {
pointer-events: none;
}
.page-content.mce-content-body code-block pre {
display: none;
}
// Details/summary editor usability
.page-content.mce-content-body details summary {
@@ -51,6 +57,8 @@ body.page-content.mce-content-body {
margin-left: (2px - $-s);
margin-right: (2px - $-s);
margin-bottom: (2px - $-s);
margin-top: (2px - $-s);
overflow: hidden;
}
/**