Skip to content

Commit

Permalink
Merge pull request #6481 from nextcloud-libraries/backport/6474/next
Browse files Browse the repository at this point in the history 
[next] fix(NcRich*): style fixes and RTL support
  • Loading branch information
@susnux
susnux authored Jan 31, 2025
2 parents be39731 + 87b1576 commit d796386
Show file tree
Hide file tree
Showing 7 changed files with 43 additions and 179 deletions.
8 changes: 5 additions & 3 deletions src/components/NcRichContenteditable/NcRichContenteditable.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -185,7 +185,7 @@ export default {
<style lang="scss" scoped>
h5 {
font-weight: bold;
margin: 40px 0 20px 0;
margin: 40px 0 20px;
}

.pre-line {
Expand Down Expand Up @@ -1030,6 +1030,7 @@ export default {
background-color: var(--color-main-background);
font-family: var(--font-face);
font-size: inherit;
tab-size: 4;
min-height: var(--default-clickable-area);
max-height: calc(var(--default-clickable-area) * 5.5);

Expand Down Expand Up @@ -1083,7 +1084,8 @@ export default {
overflow: auto;
// Hide container root element while initializing
position: absolute;
left: -10000px;
/* stylelint-disable csstools/use-logical */ /* upstream logic */
left: -100vw;
// Space it out a bit from the text
margin: var(--default-grid-baseline) 0;
padding: var(--default-grid-baseline);
Expand Down Expand Up @@ -1173,7 +1175,7 @@ export default {
width: 20px;
height: 20px;
object-fit: contain;
padding-right: var(--default-grid-baseline);
padding-inline-end: var(--default-grid-baseline);
filter: var(--background-invert-if-dark);
}
}
Expand Down
4 changes: 2 additions & 2 deletions src/components/NcRichText/NcReferencePicker/NcProviderList.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -126,14 +126,14 @@ export default {
overflow: hidden;

.link-icon {
margin-right: 8px;
margin-inline-end: 8px;
}

.provider-icon {
width: 20px;
height: 20px;
object-fit: contain;
margin-right: 8px;
margin-inline-end: 8px;
filter: var(--background-invert-if-dark);
}

Expand Down
6 changes: 3 additions & 3 deletions src/components/NcRichText/NcReferencePicker/NcReferencePickerModal.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -172,17 +172,17 @@ export default {
top: 4px;
}
.back-button {
left: 4px;
inset-inline-start: 4px;
}
.close-button {
right: 4px;
inset-inline-end: 4px;
}

> h2 {
display: flex;
margin: 12px 0 20px 0;
.icon {
margin-right: 8px;
margin-inline-end: 8px;
}
}
}
Expand Down
2 changes: 1 addition & 1 deletion src/components/NcRichText/NcReferencePicker/NcSearchResult.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -73,7 +73,7 @@ export default {
&--content {
display: flex;
flex-direction: column;
padding-left: 10px;
padding-inline-start: 10px;
overflow: hidden;

&--name,
Expand Down
2 changes: 1 addition & 1 deletion src/components/NcRichText/NcReferenceWidget.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -239,7 +239,7 @@ export default {

&.full-width {
width: var(--widget-full-width, 100%) !important;
left: calc( (var(--widget-full-width, 100%) - 100%) / 2 * -1);
inset-inline-start: calc( (var(--widget-full-width, 100%) - 100%) / 2 * -1);
position: relative;
}
}
Expand Down
28 changes: 2 additions & 26 deletions src/components/NcRichText/NcRichText.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -372,30 +372,7 @@ export default {
type: Object,
default: null,
},
markdownCssClasses: {
type: Object,
default: () => {
return {
a: 'rich-text--external-link',
ol: 'rich-text--ordered-list',
ul: 'rich-text--un-ordered-list',
li: 'rich-text--list-item',
strong: 'rich-text--strong',
em: 'rich-text--italic',
h1: 'rich-text--heading rich-text--heading-1',
h2: 'rich-text--heading rich-text--heading-2',
h3: 'rich-text--heading rich-text--heading-3',
h4: 'rich-text--heading rich-text--heading-4',
h5: 'rich-text--heading rich-text--heading-5',
h6: 'rich-text--heading rich-text--heading-6',
hr: 'rich-text--hr',
table: 'rich-text--table',
pre: 'rich-text--pre',
code: 'rich-text--code',
blockquote: 'rich-text--blockquote',
}
},
},
/** Provide basic Markdown syntax */
useMarkdown: {
type: Boolean,
default: false,
Expand Down Expand Up @@ -489,7 +466,6 @@ export default {
},
})
.use(this.useExtendedMarkdown ? rehypeHighlight.value : undefined)
// .use(rehypeAddClasses, this.markdownCssClasses)
.use(remarkPlaceholder)
.use(rehypeExternalLinks, {
target: '_blank',
Expand Down Expand Up @@ -550,7 +526,7 @@ export default {
&& children[0].props.type === 'checkbox') {
const [inputNode, , ...labelParts] = children

const nestedNodeIndex = labelParts.findIndex((child) => ['ul', 'ol', 'li', 'blockquote', 'pre'].includes(child.tag))
const nestedNodeIndex = labelParts.findIndex((child) => ['ul', 'ol', 'li', 'blockquote', 'pre'].includes(child.type))
if (nestedNodeIndex !== -1) {
nestedNode = labelParts[nestedNodeIndex]
labelParts.splice(nestedNodeIndex)
Expand Down
172 changes: 29 additions & 143 deletions src/components/NcRichText/richtext.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,21 +3,9 @@
* SPDX-License-Identifier: AGPL-3.0-or-later
*/

/**
* Styles are extracted to extract scss to dist folder, too.
*/

@use './highlight.scss';

li.task-list-item > ul,
li.task-list-item > ol,
li.task-list-item > li,
li.task-list-item > blockquote,
li.task-list-item > pre {
margin-inline-start: 15px;
margin-block-end: 0;
}

/* Plain text styles */

.rich-text--wrapper {
word-break: break-word;
Expand All @@ -33,136 +21,31 @@ li.task-list-item > pre {
content: ' ↗';
}
}

.rich-text--ordered-list {
.rich-text--list-item {
list-style: decimal;
}
}

.rich-text--un-ordered-list {
.rich-text--list-item {
list-style: initial;
}
}

.rich-text--list-item {
white-space: initial;
color: var(--color-text-light);
padding: initial;
margin-left: 20px;

&.task-list-item {
list-style: none;
white-space: initial;
color: var(--color-text-light);

input {
min-height: initial;
}
}
}

.rich-text--strong {
white-space: initial;
font-weight: bold;
color: var(--color-text-light);
}

.rich-text--italic {
white-space: initial;
font-style: italic;
color: var(--color-text-light);
}

.rich-text--heading {
white-space: initial;
font-size: initial;
color: var(--color-text-light);
margin-bottom: 5px;
margin-top: 5px;
font-weight: bold;

&.rich-text--heading-1 {
font-size: 20px;
}

&.rich-text--heading-2 {
font-size: 19px;
}

&.rich-text--heading-3 {
font-size: 18px;
}

&.rich-text--heading-4 {
font-size: 17px;
}

&.rich-text--heading-5 {
font-size: 16px;
}

&.rich-text--heading-6 {
font-size: 15px;
}
}

.rich-text--hr {
border-top: 1px solid var(--color-border-dark);
border-bottom: 0;
}

.rich-text--pre {
border: 1px solid var(--color-border-dark);
background-color: var(--color-background-dark);
padding: 5px;
}

.rich-text--code {
background-color: var(--color-background-dark);
}

.rich-text--blockquote {
border-left: 3px solid var(--color-border-dark);
padding-left: 5px;
}

.rich-text--table {
border-collapse: collapse;

thead tr th {
border: 1px solid var(--color-border-dark);
font-weight: bold;
padding: 6px 13px;
}

tbody tr {
td {
border: 1px solid var(--color-border-dark);
padding: 6px 13px;
}

&:nth-child(even) {
background-color: var(--color-background-dark);
}
}
}
}

/* Markdown styles */

.rich-text--wrapper-markdown {
tab-size: 4;

div > *:first-child,
blockquote > *:first-child {
margin-top: 0 !important;
}
div > *:last-child,
blockquote > *:last-child {
margin-bottom: 0 !important;
margin-block-end: 0 !important;
}

blockquote {
padding-inline-start: 13px;
border-inline-start: 2px solid var(--color-border-dark);
color: var(--color-text-lighter);
}

h1, h2, h3, h4, h5, h6, p, ul, ol, blockquote, pre {
margin-top: 0;
margin-bottom: 1em;
margin-block-end: 1em;
}

h1, h2, h3, h4, h5, h6 {
Expand All @@ -174,18 +57,29 @@ li.task-list-item > pre {
}

ul, ol {
padding-left: 15px;
padding-inline-start: 4ch;
}

ul {
list-style-type: disc;
}

/* Flavored Markdown styles */

ul.contains-task-list {
list-style-type: none;
padding: 0;
}

li.task-list-item > ul,
li.task-list-item > ol,
li.task-list-item > li,
li.task-list-item > blockquote,
li.task-list-item > pre {
margin-inline-start: 15px;
margin-block-end: 0;
}

table {
border-collapse: collapse;
border: 2px solid var(--color-border-maxcontrast);
Expand All @@ -195,10 +89,10 @@ li.task-list-item > pre {
padding: var(--default-grid-baseline);
border: 1px solid var(--color-border-maxcontrast);
&:first-child {
border-left: 0;
border-inline-start: 0;
}
&:last-child {
border-right: 0;
border-inline-end: 0;
}
}

Expand All @@ -207,21 +101,13 @@ li.task-list-item > pre {
border-top: 0;
}
&:last-child td {
border-bottom: 0;
border-block-end: 0;
}
}
}

blockquote {
padding-left: 13px;
border-left: 2px solid var(--color-border-dark);
color: var(--color-text-lighter);
}
}

/**
* Highlight code syntax in code blocks
*/
/* Highlight code syntax in code blocks */

/* stylelint-disable-next-line no-duplicate-selectors */
.rich-text--wrapper-markdown {
Expand Down

0 comments on commit d796386

Please sign in to comment.