mirror of
https://github.com/hedgedoc/hedgedoc.git
synced 2025-05-27 21:44:21 -04:00
Wrap markdown rendering in iframe (#837)
Signed-off-by: Tilman Vatteroth <tilman.vatteroth@tu-dortmund.de>
This commit is contained in:
Tilman Vatteroth
GitHub
parent
bd31076928
commit
586969f368
45 changed files with 1014 additions and 287 deletions
|
|
@ -26,7 +26,8 @@ describe('Autocompletion', () => {
|
|||
.should('have.text', '```abnf')
|
||||
cy.get('.CodeMirror-code > div:nth-of-type(3) > .CodeMirror-line > span span')
|
||||
.should('have.text', '```')
|
||||
cy.get('.markdown-body > pre > code')
|
||||
cy.getMarkdownBody()
|
||||
.find('pre > code')
|
||||
.should('exist')
|
||||
})
|
||||
it('via doubleclick', () => {
|
||||
|
|
@ -40,7 +41,8 @@ describe('Autocompletion', () => {
|
|||
.should('have.text', '```abnf')
|
||||
cy.get('.CodeMirror-code > div:nth-of-type(3) > .CodeMirror-line > span span')
|
||||
.should('have.text', '```')
|
||||
cy.get('.markdown-body > pre > code')
|
||||
cy.getMarkdownBody()
|
||||
.find('pre > code')
|
||||
.should('exist')
|
||||
})
|
||||
})
|
||||
|
|
@ -58,7 +60,8 @@ describe('Autocompletion', () => {
|
|||
.should('have.text', ':::success')
|
||||
cy.get('.CodeMirror-code > div:nth-of-type(3) > .CodeMirror-line > span span')
|
||||
.should('have.text', '::: ')
|
||||
cy.get('.markdown-body > div.alert')
|
||||
cy.getMarkdownBody()
|
||||
.find('div.alert')
|
||||
.should('exist')
|
||||
})
|
||||
it('via doubleclick', () => {
|
||||
|
|
@ -72,7 +75,8 @@ describe('Autocompletion', () => {
|
|||
.should('have.text', ':::success')
|
||||
cy.get('.CodeMirror-code > div:nth-of-type(3) > .CodeMirror-line > span span')
|
||||
.should('have.text', '::: ')
|
||||
cy.get('.markdown-body > div.alert')
|
||||
cy.getMarkdownBody()
|
||||
.find('div.alert')
|
||||
.should('exist')
|
||||
})
|
||||
})
|
||||
|
|
@ -80,8 +84,7 @@ describe('Autocompletion', () => {
|
|||
describe('emoji', () => {
|
||||
describe('normal emoji', () => {
|
||||
it('via Enter', () => {
|
||||
cy.get('@codeinput')
|
||||
.fill(':hedg')
|
||||
cy.codemirrorFill(':hedg')
|
||||
cy.get('.CodeMirror-hints')
|
||||
.should('exist')
|
||||
cy.get('@codeinput')
|
||||
|
|
@ -90,12 +93,11 @@ describe('Autocompletion', () => {
|
|||
.should('not.exist')
|
||||
cy.get('.CodeMirror-activeline > .CodeMirror-line > span')
|
||||
.should('have.text', ':hedgehog:')
|
||||
cy.get('.markdown-body')
|
||||
cy.getMarkdownBody()
|
||||
.should('have.text', '🦔')
|
||||
})
|
||||
it('via doubleclick', () => {
|
||||
cy.get('@codeinput')
|
||||
.fill(':hedg')
|
||||
cy.codemirrorFill(':hedg')
|
||||
cy.get('.CodeMirror-hints > li')
|
||||
.first()
|
||||
.dblclick()
|
||||
|
|
@ -103,15 +105,14 @@ describe('Autocompletion', () => {
|
|||
.should('not.exist')
|
||||
cy.get('.CodeMirror-activeline > .CodeMirror-line > span')
|
||||
.should('have.text', ':hedgehog:')
|
||||
cy.get('.markdown-body')
|
||||
cy.getMarkdownBody()
|
||||
.should('have.text', '🦔')
|
||||
})
|
||||
})
|
||||
|
||||
describe('fork-awesome-icon', () => {
|
||||
it('via Enter', () => {
|
||||
cy.get('@codeinput')
|
||||
.fill(':fa-face')
|
||||
cy.codemirrorFill(':fa-face')
|
||||
cy.get('.CodeMirror-hints')
|
||||
.should('exist')
|
||||
cy.get('@codeinput')
|
||||
|
|
@ -120,12 +121,12 @@ describe('Autocompletion', () => {
|
|||
.should('not.exist')
|
||||
cy.get('.CodeMirror-activeline > .CodeMirror-line > span')
|
||||
.should('have.text', ':fa-facebook:')
|
||||
cy.get('.markdown-body > p > i.fa.fa-facebook')
|
||||
cy.getMarkdownBody()
|
||||
.find('p > i.fa.fa-facebook')
|
||||
.should('exist')
|
||||
})
|
||||
it('via doubleclick', () => {
|
||||
cy.get('@codeinput')
|
||||
.fill(':fa-face')
|
||||
cy.codemirrorFill(':fa-face')
|
||||
cy.get('.CodeMirror-hints > li')
|
||||
.first()
|
||||
.dblclick()
|
||||
|
|
@ -133,7 +134,8 @@ describe('Autocompletion', () => {
|
|||
.should('not.exist')
|
||||
cy.get('.CodeMirror-activeline > .CodeMirror-line > span')
|
||||
.should('have.text', ':fa-facebook:')
|
||||
cy.get('.markdown-body > p > i.fa.fa-facebook')
|
||||
cy.getMarkdownBody()
|
||||
.find('p > i.fa.fa-facebook')
|
||||
.should('exist')
|
||||
})
|
||||
})
|
||||
|
|
@ -150,7 +152,8 @@ describe('Autocompletion', () => {
|
|||
.should('not.exist')
|
||||
cy.get('.CodeMirror-activeline > .CodeMirror-line > span')
|
||||
.should('have.text', '# ')
|
||||
cy.get('.markdown-body > h1 ')
|
||||
cy.getMarkdownBody()
|
||||
.find('h1 ')
|
||||
.should('have.text', ' ')
|
||||
})
|
||||
it('via doubleclick', () => {
|
||||
|
|
@ -162,7 +165,8 @@ describe('Autocompletion', () => {
|
|||
.should('not.exist')
|
||||
cy.get('.CodeMirror-activeline > .CodeMirror-line > span')
|
||||
.should('have.text', '# ')
|
||||
cy.get('.markdown-body > h1')
|
||||
cy.getMarkdownBody()
|
||||
.find('h1')
|
||||
.should('have.text', ' ')
|
||||
})
|
||||
})
|
||||
|
|
@ -178,7 +182,8 @@ describe('Autocompletion', () => {
|
|||
.should('not.exist')
|
||||
cy.get('.CodeMirror-activeline > .CodeMirror-line > span')
|
||||
.should('have.text', '')
|
||||
cy.get('.markdown-body > p > img')
|
||||
cy.getMarkdownBody()
|
||||
.find('p > img')
|
||||
.should('have.attr', 'alt', 'image alt')
|
||||
.should('have.attr', 'src', 'https://')
|
||||
.should('have.attr', 'title', 'title')
|
||||
|
|
@ -192,7 +197,8 @@ describe('Autocompletion', () => {
|
|||
.should('not.exist')
|
||||
cy.get('.CodeMirror-activeline > .CodeMirror-line > span')
|
||||
.should('have.text', '')
|
||||
cy.get('.markdown-body > p > img')
|
||||
cy.getMarkdownBody()
|
||||
.find('p > img')
|
||||
.should('have.attr', 'alt', 'image alt')
|
||||
.should('have.attr', 'src', 'https://')
|
||||
.should('have.attr', 'title', 'title')
|
||||
|
|
@ -210,7 +216,8 @@ describe('Autocompletion', () => {
|
|||
.should('not.exist')
|
||||
cy.get('.CodeMirror-activeline > .CodeMirror-line > span')
|
||||
.should('have.text', '[link text](https:// "title") ')
|
||||
cy.get('.markdown-body > p > a')
|
||||
cy.getMarkdownBody()
|
||||
.find('p > a')
|
||||
.should('have.text', 'link text')
|
||||
.should('have.attr', 'href', 'https://')
|
||||
.should('have.attr', 'title', 'title')
|
||||
|
|
@ -224,7 +231,8 @@ describe('Autocompletion', () => {
|
|||
.should('not.exist')
|
||||
cy.get('.CodeMirror-activeline > .CodeMirror-line > span')
|
||||
.should('have.text', '[link text](https:// "title") ')
|
||||
cy.get('.markdown-body > p > a')
|
||||
cy.getMarkdownBody()
|
||||
.find('p > a')
|
||||
.should('have.text', 'link text')
|
||||
.should('have.attr', 'href', 'https://')
|
||||
.should('have.attr', 'title', 'title')
|
||||
|
|
@ -242,7 +250,8 @@ describe('Autocompletion', () => {
|
|||
.should('not.exist')
|
||||
cy.get('.CodeMirror-activeline > .CodeMirror-line > span')
|
||||
.should('have.text', '{%pdf https:// %}')
|
||||
cy.get('.markdown-body > p')
|
||||
cy.getMarkdownBody()
|
||||
.find('p')
|
||||
.should('exist')
|
||||
})
|
||||
it('via doubleclick', () => {
|
||||
|
|
@ -254,7 +263,8 @@ describe('Autocompletion', () => {
|
|||
.should('not.exist')
|
||||
cy.get('.CodeMirror-activeline > .CodeMirror-line > span')
|
||||
.should('have.text', '{%pdf https:// %}')
|
||||
cy.get('.markdown-body > p')
|
||||
cy.getMarkdownBody()
|
||||
.find('p')
|
||||
.should('exist')
|
||||
})
|
||||
})
|
||||
|
|
@ -270,7 +280,8 @@ describe('Autocompletion', () => {
|
|||
.should('not.exist')
|
||||
cy.get('.CodeMirror-activeline > .CodeMirror-line > span')
|
||||
.should('have.text', '</details>') // after selecting the hint, the last line of the inserted suggestion is active
|
||||
cy.get('.markdown-body > details')
|
||||
cy.getMarkdownBody()
|
||||
.find('details')
|
||||
.should('exist')
|
||||
})
|
||||
it('via doubleclick', () => {
|
||||
|
|
@ -282,7 +293,8 @@ describe('Autocompletion', () => {
|
|||
.should('not.exist')
|
||||
cy.get('.CodeMirror-activeline > .CodeMirror-line > span')
|
||||
.should('have.text', '</details>')
|
||||
cy.get('.markdown-body > details')
|
||||
cy.getMarkdownBody()
|
||||
.find('details')
|
||||
.should('exist')
|
||||
})
|
||||
})
|
||||
|
|
|
|||
|
|
@ -87,7 +87,8 @@ describe('Document Title', () => {
|
|||
|
||||
it('katex code looks right', () => {
|
||||
cy.codemirrorFill(`# $\\alpha$-foo`)
|
||||
cy.get('.markdown-body > h1')
|
||||
cy.getMarkdownRenderer()
|
||||
.find('h1')
|
||||
.should('contain', 'α')
|
||||
cy.get('.CodeMirror textarea')
|
||||
.type('{Enter}{Enter}{Enter}{Enter}{Enter}') //This is a workaround because I don't know how to make sure, that the title gets updated in time.
|
||||
|
|
|
|||
|
|
@ -4,33 +4,37 @@
|
|||
* SPDX-License-Identifier: AGPL-3.0-only
|
||||
*/
|
||||
|
||||
const findHljsCodeBlock = () => {
|
||||
return cy.getMarkdownBody()
|
||||
.find('pre > code.hljs')
|
||||
.should('be.visible')
|
||||
}
|
||||
|
||||
describe('Code', () => {
|
||||
beforeEach(() => {
|
||||
cy.visit('/n/test', {
|
||||
onBeforeLoad (win: Window): void {
|
||||
cy.spy(win.navigator.clipboard, 'writeText').as('copy')
|
||||
}
|
||||
})
|
||||
cy.visit('/n/test')
|
||||
})
|
||||
|
||||
describe('with just the language', () => {
|
||||
it('doesn\'t show a gutter', () => {
|
||||
cy.codemirrorFill('```javascript \nlet x = 0\n```')
|
||||
cy.get('.markdown-body > pre > code.hljs')
|
||||
.should('be.visible')
|
||||
findHljsCodeBlock()
|
||||
.should('not.have.class', 'showGutter')
|
||||
cy.get('.markdown-body > pre > code.hljs > .linenumber')
|
||||
|
||||
findHljsCodeBlock()
|
||||
.find('.linenumber')
|
||||
.should('not.be.visible')
|
||||
})
|
||||
|
||||
describe('and line wrapping', () => {
|
||||
it('doesn\'t show a gutter', () => {
|
||||
cy.codemirrorFill('```javascript! \nlet x = 0\n```')
|
||||
cy.get('.markdown-body > pre > code.hljs')
|
||||
.should('be.visible')
|
||||
findHljsCodeBlock()
|
||||
.should('not.have.class', 'showGutter')
|
||||
.should('have.class', 'wrapLines')
|
||||
cy.get('.markdown-body > pre > code.hljs > .linenumber')
|
||||
|
||||
findHljsCodeBlock()
|
||||
.find('.linenumber')
|
||||
.should('not.be.visible')
|
||||
})
|
||||
})
|
||||
|
|
@ -39,10 +43,11 @@ describe('Code', () => {
|
|||
describe('with the language and show gutter', () => {
|
||||
it('shows the correct line number', () => {
|
||||
cy.codemirrorFill('```javascript= \nlet x = 0\n```')
|
||||
cy.get('.markdown-body > pre > code.hljs')
|
||||
.should('be.visible')
|
||||
findHljsCodeBlock()
|
||||
.should('have.class', 'showGutter')
|
||||
cy.get('.markdown-body > pre > code.hljs > .linenumber')
|
||||
|
||||
findHljsCodeBlock()
|
||||
.find('.linenumber')
|
||||
.should('be.visible')
|
||||
.text()
|
||||
.should('eq', '1')
|
||||
|
|
@ -51,11 +56,12 @@ describe('Code', () => {
|
|||
describe('and line wrapping', () => {
|
||||
it('shows the correct line number', () => {
|
||||
cy.codemirrorFill('```javascript=! \nlet x = 0\n```')
|
||||
cy.get('.markdown-body > pre > code.hljs')
|
||||
.should('be.visible')
|
||||
findHljsCodeBlock()
|
||||
.should('have.class', 'showGutter')
|
||||
.should('have.class', 'wrapLines')
|
||||
cy.get('.markdown-body > pre > code.hljs > .linenumber')
|
||||
|
||||
findHljsCodeBlock()
|
||||
.find('.linenumber')
|
||||
.should('be.visible')
|
||||
.text()
|
||||
.should('eq', '1')
|
||||
|
|
@ -66,10 +72,11 @@ describe('Code', () => {
|
|||
describe('with the language, show gutter with a start number', () => {
|
||||
it('shows the correct line number', () => {
|
||||
cy.codemirrorFill('```javascript=100 \nlet x = 0\n```')
|
||||
cy.get('.markdown-body > pre > code.hljs')
|
||||
.should('be.visible')
|
||||
findHljsCodeBlock()
|
||||
.should('have.class', 'showGutter')
|
||||
cy.get('.markdown-body > pre > code.hljs > .linenumber')
|
||||
|
||||
findHljsCodeBlock()
|
||||
.find('.linenumber')
|
||||
.should('be.visible')
|
||||
.text()
|
||||
.should('eq', '100')
|
||||
|
|
@ -77,8 +84,7 @@ describe('Code', () => {
|
|||
|
||||
it('shows the correct line number and continues in another codeblock', () => {
|
||||
cy.codemirrorFill('```javascript=100 \nlet x = 0\nlet y = 1\n```\n\n```javascript=+\nlet y = 2\n```\n')
|
||||
cy.get('.markdown-body > pre > code.hljs')
|
||||
.should('be.visible')
|
||||
findHljsCodeBlock()
|
||||
.should('have.class', 'showGutter')
|
||||
.first()
|
||||
.find('.linenumber')
|
||||
|
|
@ -86,14 +92,14 @@ describe('Code', () => {
|
|||
.should('be.visible')
|
||||
.text()
|
||||
.should('eq', '100')
|
||||
cy.get('.markdown-body > pre > code.hljs')
|
||||
findHljsCodeBlock()
|
||||
.first()
|
||||
.find('.linenumber')
|
||||
.last()
|
||||
.should('be.visible')
|
||||
.text()
|
||||
.should('eq', '101')
|
||||
cy.get('.markdown-body > pre > code.hljs')
|
||||
findHljsCodeBlock()
|
||||
.last()
|
||||
.find('.linenumber')
|
||||
.first()
|
||||
|
|
@ -105,11 +111,11 @@ describe('Code', () => {
|
|||
describe('and line wrapping', () => {
|
||||
it('shows the correct line number', () => {
|
||||
cy.codemirrorFill('```javascript=100! \nlet x = 0\n```')
|
||||
cy.get('.markdown-body > pre > code.hljs')
|
||||
.should('be.visible')
|
||||
findHljsCodeBlock()
|
||||
.should('have.class', 'showGutter')
|
||||
.should('have.class', 'wrapLines')
|
||||
cy.get('.markdown-body > pre > code.hljs > .linenumber')
|
||||
findHljsCodeBlock()
|
||||
.find('.linenumber')
|
||||
.should('be.visible')
|
||||
.text()
|
||||
.should('eq', '100')
|
||||
|
|
@ -117,8 +123,7 @@ describe('Code', () => {
|
|||
|
||||
it('shows the correct line number and continues in another codeblock', () => {
|
||||
cy.codemirrorFill('```javascript=100! \nlet x = 0\nlet y = 1\n```\n\n```javascript=+\nlet y = 2\n```\n')
|
||||
cy.get('.markdown-body > pre > code.hljs')
|
||||
.should('be.visible')
|
||||
findHljsCodeBlock()
|
||||
.should('have.class', 'showGutter')
|
||||
.should('have.class', 'wrapLines')
|
||||
.first()
|
||||
|
|
@ -127,14 +132,14 @@ describe('Code', () => {
|
|||
.should('be.visible')
|
||||
.text()
|
||||
.should('eq', '100')
|
||||
cy.get('.markdown-body > pre > code.hljs')
|
||||
findHljsCodeBlock()
|
||||
.first()
|
||||
.find('.linenumber')
|
||||
.last()
|
||||
.should('be.visible')
|
||||
.text()
|
||||
.should('eq', '101')
|
||||
cy.get('.markdown-body > pre > code.hljs')
|
||||
findHljsCodeBlock()
|
||||
.last()
|
||||
.find('.linenumber')
|
||||
.first()
|
||||
|
|
@ -147,9 +152,22 @@ describe('Code', () => {
|
|||
|
||||
it('has a working copy button', () => {
|
||||
cy.codemirrorFill('```javascript \nlet x = 0\n```')
|
||||
cy.get('.markdown-body > pre > div > button > i')
|
||||
.should('have.class', 'fa-files-o')
|
||||
|
||||
cy.get(`iframe[data-cy="documentIframe"]`)
|
||||
.then(($element: JQuery) => {
|
||||
const frame = $element[0] as HTMLIFrameElement
|
||||
if (frame === null || frame.contentWindow === null) {
|
||||
return cy.wrap(null)
|
||||
}
|
||||
|
||||
cy.spy(frame.contentWindow.navigator.clipboard, 'writeText').as("copy")
|
||||
})
|
||||
|
||||
cy.getMarkdownRenderer()
|
||||
.find('[data-cy="copy-code-button"]')
|
||||
.click()
|
||||
cy.get('@copy').should('be.calledWithExactly', 'let x = 0\n')
|
||||
|
||||
cy.get("@copy")
|
||||
.should('be.calledWithExactly', 'let x = 0\n')
|
||||
})
|
||||
})
|
||||
|
|
|
|||
|
|
@ -35,7 +35,8 @@ describe('The status bar text length info', () => {
|
|||
cy.codemirrorFill(tooMuchTestContent)
|
||||
cy.get('[data-cy="limitReachedModal"]')
|
||||
.should('be.visible')
|
||||
cy.get('[data-cy="limitReachedMessage"]')
|
||||
cy.getMarkdownRenderer()
|
||||
.find('[data-cy="limitReachedMessage"]')
|
||||
.should('be.visible')
|
||||
})
|
||||
|
||||
|
|
|
|||
|
|
@ -11,19 +11,22 @@ describe('YAML Array for deprecated syntax of document tags in frontmatter', ()
|
|||
|
||||
it('is shown when using old syntax', () => {
|
||||
cy.codemirrorFill('---\ntags: a, b, c\n---')
|
||||
cy.get('[data-cy="yamlArrayDeprecationAlert"]')
|
||||
cy.getMarkdownRenderer()
|
||||
.find('[data-cy="yamlArrayDeprecationAlert"]')
|
||||
.should('be.visible')
|
||||
})
|
||||
|
||||
it('isn\'t shown when using inline yaml-array', () => {
|
||||
cy.codemirrorFill('---\ntags: [\'a\', \'b\', \'c\']\n---')
|
||||
cy.get('[data-cy="yamlArrayDeprecationAlert"]')
|
||||
cy.getMarkdownRenderer()
|
||||
.find('[data-cy="yamlArrayDeprecationAlert"]')
|
||||
.should('not.exist')
|
||||
})
|
||||
|
||||
it('isn\'t shown when using multi line yaml-array', () => {
|
||||
cy.codemirrorFill('---\ntags:\n - a\n - b\n - c\n---')
|
||||
cy.get('[data-cy="yamlArrayDeprecationAlert"]')
|
||||
cy.getMarkdownRenderer()
|
||||
.find('[data-cy="yamlArrayDeprecationAlert"]')
|
||||
.should('not.exist')
|
||||
})
|
||||
})
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue