imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add code blocks to rich text editor (#9921)

Browse source 
* Applies small changes to code block display in timeline
* Makes the composer code block look like the timeline display, but without line numbers
* Adds a button to allow code blocks to be implemented
* Adds tests for the new button
This commit is contained in:
alunturner 2023-01-19 15:49:21 +00:00 • committed by GitHub
parent 422802ea6d
commit a63da74f06
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 32 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

6
res/css/views/rooms/_EventTile.pcss
View file

@ -548,7 +548,7 @@ $left-gutter: 64px;
pre,
code {
font-family: $monospace-font-family !important;
background-color: $codeblock-background-color;
background-color: $system;
}
code:not(pre *) {
@ -578,6 +578,8 @@ $left-gutter: 64px;
background: transparent;
}
border: 1px solid $quinary-content;
code {
white-space: pre; /* we want code blocks to be scrollable and not wrap */
@ -756,6 +758,8 @@ $left-gutter: 64px;
.mx_EventTile_collapsedCodeBlock {
max-height: 30vh;
padding-top: $spacing-12;
padding-bottom: $spacing-12;
}
/* Inserted adjacent to <pre> blocks, (See TextualBody) */

15
res/css/views/rooms/wysiwyg_composer/components/_Editor.pcss
View file

@ -46,10 +46,23 @@ limitations under the License.
// model output always includes a linebreak but we do not want the user
// to see it when writing input in lists
:is(ol, ul) + br:last-of-type {
:is(ol, ul, pre) + br:last-of-type {
display: none;
}
> pre {
font-size: $font-15px;
line-height: $font-24px;
margin-top: 0;
margin-bottom: 0;
padding: $spacing-8 $spacing-12;
background-color: $inlinecode-background-color;
border: 1px solid $inlinecode-border-color;
border-radius: 2px;
}
code {
font-family: $monospace-font-family !important;
background-color: $inlinecode-background-color;