Skip to content

Commit

Permalink
fix(app-store): Correctly render Markdown in app description
Browse files Browse the repository at this point in the history
This seems to be broken by an update because the renderer now passes an object instead of multiple arguments to the render functions.

Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>
  • Loading branch information
susnux committed Oct 23, 2024
1 parent 7b2a614 commit 838f140
Show file tree
Hide file tree
Showing 3 changed files with 74 additions and 48 deletions.
58 changes: 58 additions & 0 deletions apps/settings/src/components/Markdown.cy.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,58 @@
/*!
* SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors
* SPDX-License-Identifier: AGPL-3.0-or-later
*/

import Markdown from './Markdown.vue'

describe('Markdown component', () => {
it('renders links', () => {
cy.mount(Markdown, {
propsData: {
text: 'This is [a link](http://example.com)!',
},
})

cy.contains('This is')
.find('a')
.should('exist')
.and('have.attr', 'href', 'http://example.com')
.and('contain.text', 'a link')
})

it('renders headings', () => {
cy.mount(Markdown, {
propsData: {
text: '# level 1\nText\n## level 2\nText\n### level 3\nText\n#### level 4\nText\n##### level 5\nText\n###### level 6\nText\n',
},
})

for (let level = 1; level <= 6; level++) {
cy.contains(`h${level}`, `level ${level}`)
.should('be.visible')
}
})

it('can limit headings', () => {
cy.mount(Markdown, {
propsData: {
text: '# level 1\nText\n## level 2\nText\n### level 3\nText\n#### level 4\nText\n##### level 5\nText\n###### level 6\nText\n',
minHeading: 4,
},
})

cy.get('h1').should('not.exist')
cy.get('h2').should('not.exist')
cy.get('h3').should('not.exist')
cy.get('h4')
.should('exist')
.and('contain.text', 'level 1')
cy.get('h5')
.should('exist')
.and('contain.text', 'level 2')
cy.contains('h6', 'level 3').should('exist')
cy.contains('h6', 'level 4').should('exist')
cy.contains('h6', 'level 5').should('exist')
cy.contains('h6', 'level 6').should('exist')
})
})
63 changes: 15 additions & 48 deletions apps/settings/src/components/Markdown.vue
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ export default {
computed: {
renderMarkdown() {
const renderer = new marked.Renderer()
renderer.link = function(href, title, text) {
renderer.link = function({ href, title, text }) {
let prot
try {
prot = decodeURIComponent(unescape(href))
Expand All @@ -47,18 +47,18 @@ export default {
out += '>' + text + '</a>'
return out
}
renderer.heading = (text, level) => {
level = Math.min(6, level + (this.minHeading - 1))
return `<h${level}>${text}</h${level}>`
renderer.heading = ({ text, depth }) => {
depth = Math.min(6, depth + (this.minHeading - 1))
return `<h${depth}>${text}</h${depth}>`
}
renderer.image = function(href, title, text) {
renderer.image = ({ title, text }) => {
if (text) {
return text
}
return title
}
renderer.blockquote = function(quote) {
return quote
renderer.blockquote = ({ text }) => {
return `<blockquote>${text}</blockquote>`
}
return dompurify.sanitize(
marked(this.text.trim(), {
Expand Down Expand Up @@ -99,45 +99,13 @@ export default {
</script>

<style scoped lang="scss">
.settings-markdown::v-deep {

h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: 600;
line-height: 120%;
margin-top: 24px;
margin-bottom: 12px;
color: var(--color-main-text);
}

h1 {
font-size: 36px;
margin-top: 48px;
}

h2 {
font-size: 28px;
margin-top: 48px;
}

h3 {
font-size: 24px;
}

h4 {
font-size: 21px;
}

h5 {
font-size: 17px;
}

h6 {
font-size: var(--default-font-size);
.settings-markdown::v-deep {
a {
text-decoration: underline;
&::after {
content: '↗';
padding-inline: calc(var(--default-grid-baseline) / 2);
}
}

pre {
Expand Down Expand Up @@ -183,6 +151,5 @@ export default {
margin-left: 0;
margin-right: 0;
}

}
}
</style>
1 change: 1 addition & 0 deletions cypress.config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -110,6 +110,7 @@ export default defineConfig({
},

component: {
specPattern: ['core/**/*.cy.ts', 'apps/**/*.cy.ts'],
devServer: {
framework: 'vue',
bundler: 'webpack',
Expand Down

0 comments on commit 838f140

Please sign in to comment.