Skip to content

Commit

Permalink
Update RTF to support new elements (#730)
Browse files Browse the repository at this point in the history
Update RTF to support strikethroughs, superscripts, subscripts, code, code blocks, blockquotes, and headings

The styling for these elements are the defaults for Chrome, with a few tweaks. The headings use `--yxt-font-size` values rather than the defaults, and the spacing is decreased so that it is more consistent with the KG spacing. The blockquote has a shorter indent because I think it works better on our cards. Finally, I made the code font smaller to make it more consistent with the default font.

J=SLAP-1273
TEST=manual

Use the Rose test account and the Answers rich text formatter on a card with all of the RTF that the KG supports
  • Loading branch information
cea2aj authored Apr 20, 2021
1 parent 3721829 commit 8d32143
Showing 1 changed file with 86 additions and 0 deletions.
86 changes: 86 additions & 0 deletions static/scss/answers/common/mixins.scss
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,16 @@
font-style: italic;
}

@mixin header_styling
{
display: block;
margin-block-start: .33em;
margin-block-end: .33em;
margin-inline-start: 0px;
margin-inline-end: 0px;
font-weight: bold;
}

@mixin rich_text_formatting
{
ul
Expand Down Expand Up @@ -84,6 +94,82 @@
{
margin-bottom: var(--yxt-base-spacing);
}

s
{
text-decoration: line-through;
}

sup
{
vertical-align: super;
font-size: smaller;
}

sub
{
vertical-align: sub;
font-size: smaller;
}

code
{
font-family: monospace;
font-size: smaller;
}

pre
{
display: block;
font-family: monospace;
white-space: pre;
margin: 1em 0px;
}

blockquote
{
display: block;
margin-block-start: 1em;
margin-block-end: 1em;
margin-inline-start: var(--yxt-base-spacing);
margin-inline-end: var(--yxt-base-spacing);
}

h1
{
@include header_styling;
font-size: var(--yxt-font-size-xlg);
}

h2
{
@include header_styling;
font-size: var(--yxt-font-size-lg);
}

h3
{
@include header_styling;
font-size: var(--yxt-font-size-md-lg);
}

h4
{
@include header_styling;
font-size: var(--yxt-font-size-md);
}

h5
{
@include header_styling;
font-size: var(--yxt-font-size-sm);
}

h6
{
@include header_styling;
font-size: var(--yxt-font-size-xs);
}
}

@mixin Text(
Expand Down

0 comments on commit 8d32143

Please sign in to comment.