mirrors/hedgedoc
1
0
Fork 0
mirror of https://github.com/hedgedoc/hedgedoc.git synced 2025-05-27 13:34:28 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

Upgrade to CodeMirror 6 (#1787)

Browse source 
Upgrade to CodeMirror 6

Signed-off-by: Tilman Vatteroth <git@tilmanvatteroth.de>
This commit is contained in:
Tilman Vatteroth 2022-02-13 12:14:01 +01:00 • committed by GitHub
parent 1a09bfa5f1
commit 6a6f6105b9
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
103 changed files with 1906 additions and 2615 deletions
Download patch file Download diff file Expand all files Collapse all files

193
cypress/integration/autocompletion.spec.ts
View file

@ -1,193 +0,0 @@
/*
* SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
*
* SPDX-License-Identifier: AGPL-3.0-only
*/
describe('Autocompletion works for', () => {
beforeEach(() => {
cy.visitTestNote()
cy.get('.CodeMirror').click().get('textarea').as('codeinput')
})
describe('code block', () => {
it('via enter', () => {
cy.setCodemirrorContent('```')
cy.get('.CodeMirror-hints').should('be.visible')
cy.get('@codeinput').type('{enter}')
cy.get('.CodeMirror-hints').should('not.exist')
cy.get('.CodeMirror-code > div:nth-of-type(1) > .CodeMirror-line').contains('```abnf')
cy.get('.CodeMirror-code > div:nth-of-type(3) > .CodeMirror-line').contains('```')
cy.getMarkdownBody().findByCypressId('highlighted-code-block').should('exist')
})
it('via doubleclick', () => {
cy.setCodemirrorContent('```')
cy.get('.CodeMirror-hints').should('be.visible')
cy.get('.CodeMirror-hints > li').first().dblclick()
cy.get('.CodeMirror-hints').should('not.exist')
cy.get('.CodeMirror-code > div:nth-of-type(1) > .CodeMirror-line').contains('```abnf')
cy.get('.CodeMirror-code > div:nth-of-type(3) > .CodeMirror-line').contains('```')
cy.getMarkdownBody().findByCypressId('highlighted-code-block').should('exist')
})
})
describe('container', () => {
it('via enter', () => {
cy.setCodemirrorContent(':::')
cy.get('.CodeMirror-hints').should('be.visible')
cy.get('@codeinput').type('{enter}')
cy.get('.CodeMirror-hints').should('not.exist')
cy.get('.CodeMirror-code > div:nth-of-type(1) > .CodeMirror-line').contains(':::success')
cy.get('.CodeMirror-code > div:nth-of-type(3) > .CodeMirror-line').contains('::: ')
cy.getMarkdownBody().find('.alert').should('exist')
})
it('via doubleclick', () => {
cy.setCodemirrorContent(':::')
cy.get('.CodeMirror-hints').should('be.visible')
cy.get('.CodeMirror-hints > li').first().dblclick()
cy.get('.CodeMirror-hints').should('not.exist')
cy.get('.CodeMirror-code > div:nth-of-type(1) > .CodeMirror-line').contains(':::success')
cy.get('.CodeMirror-code > div:nth-of-type(3) > .CodeMirror-line').contains('::: ')
cy.getMarkdownBody().find('.alert').should('exist')
})
})
describe('emoji', () => {
describe('normal emoji', () => {
it('via enter', () => {
cy.setCodemirrorContent(':hedg')
cy.get('.CodeMirror-hints').should('be.visible')
cy.get('@codeinput').type('{enter}')
cy.get('.CodeMirror-hints').should('not.exist')
cy.get('.CodeMirror-activeline').contains(':hedgehog:')
})
it('via doubleclick', () => {
cy.setCodemirrorContent(':hedg')
cy.get('.CodeMirror-hints').should('be.visible')
cy.get('.CodeMirror-hints > li').first().dblclick()
cy.get('.CodeMirror-hints').should('not.exist')
cy.get('.CodeMirror-activeline').contains(':hedgehog:')
})
})
describe('fork-awesome-icon', () => {
it('via enter', () => {
cy.setCodemirrorContent(':fa-face')
cy.get('.CodeMirror-hints').should('be.visible')
cy.get('@codeinput').type('{enter}')
cy.get('.CodeMirror-hints').should('not.exist')
cy.get('.CodeMirror-activeline').contains(':fa-facebook:')
})
it('via doubleclick', () => {
cy.setCodemirrorContent(':fa-face')
cy.get('.CodeMirror-hints').should('be.visible')
cy.get('.CodeMirror-hints > li').first().dblclick()
cy.get('.CodeMirror-hints').should('not.exist')
cy.get('.CodeMirror-activeline').contains(':fa-facebook:')
})
})
})
describe('header', () => {
it('via enter', () => {
cy.setCodemirrorContent('#')
cy.get('.CodeMirror-hints').should('be.visible')
cy.get('@codeinput').type('{enter}')
cy.get('.CodeMirror-hints').should('not.exist')
cy.get('.CodeMirror-activeline').contains('# ')
cy.getMarkdownBody().find('h1').should('have.text', '\n ')
})
it('via doubleclick', () => {
cy.setCodemirrorContent('#')
cy.get('.CodeMirror-hints').should('be.visible')
cy.get('.CodeMirror-hints > li').first().dblclick()
cy.get('.CodeMirror-hints').should('not.exist')
cy.get('.CodeMirror-activeline').contains('# ')
cy.getMarkdownBody().find('h1').should('have.text', '\n ')
})
})
describe('images', () => {
it('via enter', () => {
cy.setCodemirrorContent('!')
cy.get('.CodeMirror-hints').should('be.visible')
cy.get('@codeinput').type('{enter}')
cy.get('.CodeMirror-hints').should('not.exist')
cy.get('.CodeMirror-activeline').contains('![image alt](https:// "title")')
cy.getMarkdownBody().findByCypressId('image-placeholder-image-drop').should('exist')
})
it('via doubleclick', () => {
cy.setCodemirrorContent('!')
cy.get('.CodeMirror-hints').should('be.visible')
cy.get('.CodeMirror-hints > li').first().dblclick()
cy.get('.CodeMirror-hints').should('not.exist')
cy.get('.CodeMirror-activeline').contains('![image alt](https:// "title")')
cy.getMarkdownBody().findByCypressId('image-placeholder-image-drop').should('exist')
})
})
describe('links', () => {
it('via enter', () => {
cy.setCodemirrorContent('[')
cy.get('.CodeMirror-hints').should('be.visible')
cy.get('@codeinput').type('{enter}')
cy.get('.CodeMirror-hints').should('not.exist')
cy.get('.CodeMirror-activeline').contains('[link text](https:// "title") ')
cy.getMarkdownBody()
.find('p > a')
.should('have.text', 'link text')
.should('have.attr', 'href', 'https://')
.should('have.attr', 'title', 'title')
})
it('via doubleclick', () => {
cy.setCodemirrorContent('[')
cy.get('.CodeMirror-hints').should('be.visible')
cy.get('.CodeMirror-hints > li').first().dblclick()
cy.get('.CodeMirror-hints').should('not.exist')
cy.get('.CodeMirror-activeline').contains('[link text](https:// "title") ')
cy.getMarkdownBody()
.find('p > a')
.should('have.text', 'link text')
.should('have.attr', 'href', 'https://')
.should('have.attr', 'title', 'title')
})
})
describe('pdf', () => {
it('via enter', () => {
cy.setCodemirrorContent('{')
cy.get('.CodeMirror-hints').should('be.visible')
cy.get('@codeinput').type('{enter}')
cy.get('.CodeMirror-hints').should('not.exist')
cy.get('.CodeMirror-activeline').contains('{%pdf https:// %}')
cy.getMarkdownBody().find('p').should('exist')
})
it('via doubleclick', () => {
cy.setCodemirrorContent('{')
cy.get('.CodeMirror-hints').should('be.visible')
cy.get('.CodeMirror-hints > li').first().dblclick()
cy.get('.CodeMirror-hints').should('not.exist')
cy.get('.CodeMirror-activeline').contains('{%pdf https:// %}')
cy.getMarkdownBody().find('p').should('exist')
})
})
describe('collapsible blocks', () => {
it('via enter', () => {
cy.setCodemirrorContent('<d')
cy.get('.CodeMirror-hints').should('be.visible')
cy.get('@codeinput').type('{enter}')
cy.get('.CodeMirror-hints').should('not.exist')
cy.get('.CodeMirror-activeline').contains('</details>') // after selecting the hint, the last line of the inserted suggestion is active
cy.getMarkdownBody().find('details').should('exist')
})
it('via doubleclick', () => {
cy.setCodemirrorContent('<d')
cy.get('.CodeMirror-hints').should('be.visible')
cy.get('.CodeMirror-hints > li').first().dblclick()
cy.get('.CodeMirror-hints').should('not.exist')
cy.get('.CodeMirror-activeline').contains('</details>')
cy.getMarkdownBody().find('details').should('exist')
})
})
})

3
cypress/integration/documentTitle.spec.ts
View file

@ -76,7 +76,8 @@ describe('Document Title', () => {
it('katex code looks right', () => {
cy.setCodemirrorContent(`# $\\alpha$-foo`)
cy.getIframeBody().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.
//TODO: Remove workaround after https://github.com/hedgedoc/react-client/issues/1816 has been fixed.
cy.get('.cm-editor .cm-content').type('{Enter}{Enter}{Enter}{Enter}{Enter}')
cy.title().should('eq', `α-foo - HedgeDoc @ ${branding.name}`)
})
})

29
cypress/integration/fileUpload.spec.ts
View file

@ -12,19 +12,6 @@ describe('File upload', () => {
cy.fixture('demo.png').as('demoImage')
})
it("doesn't prevent drag'n'drop of plain text", () => {
const dataTransfer = new DataTransfer()
cy.setCodemirrorContent('line 1\nline 2\ndragline')
cy.get('.CodeMirror').click()
cy.get('.CodeMirror-line > span').last().dblclick()
cy.get('.CodeMirror-line > span > .cm-matchhighlight').trigger('dragstart', { dataTransfer })
cy.get('.CodeMirror-code > div:nth-of-type(1) > .CodeMirror-line > span > span').trigger('drop', { dataTransfer })
cy.get('.CodeMirror-code > div:nth-of-type(1) > .CodeMirror-line > span > span').should(
'have.text',
'lindraglinee 1'
)
})
describe('works', () => {
beforeEach(() => {
cy.intercept(
@ -50,7 +37,7 @@ describe('File upload', () => {
},
{ force: true }
)
cy.get('.CodeMirror-activeline').contains(`![](${imageUrl})`)
cy.get('.cm-line').contains(`![](${imageUrl})`)
})
it('via paste', () => {
@ -61,13 +48,13 @@ describe('File upload', () => {
getData: (_: string) => ''
}
}
cy.get('.CodeMirror-scroll').trigger('paste', pasteEvent)
cy.get('.CodeMirror-activeline').contains(`![](${imageUrl})`)
cy.get('.cm-content').trigger('paste', pasteEvent)
cy.get('.cm-line').contains(`![](${imageUrl})`)
})
})
it('via drag and drop', () => {
cy.get('.CodeMirror-scroll').selectFile(
cy.get('.cm-content').selectFile(
{
contents: '@demoImage',
fileName: 'demo.png',
@ -75,7 +62,7 @@ describe('File upload', () => {
},
{ action: 'drag-drop', force: true }
)
cy.get('.CodeMirror-activeline').contains(`![](${imageUrl})`)
cy.get('.cm-line').contains(`![](${imageUrl})`)
})
})
@ -98,7 +85,7 @@ describe('File upload', () => {
},
{ force: true }
)
cy.get('.CodeMirror-activeline').contains('![upload of demo.png failed]()')
cy.get('.cm-line').contains('![upload of demo.png failed]()')
})
it('lets text paste still work', () => {
@ -108,7 +95,7 @@ describe('File upload', () => {
getData: (type = 'text') => testText
}
}
cy.get('.CodeMirror-scroll').trigger('paste', pasteEvent)
cy.get('.CodeMirror-activeline').contains(`${testText}`)
cy.get('.cm-content').trigger('paste', pasteEvent)
cy.get('.cm-line').contains(`${testText}`)
})
})

18
cypress/integration/import.spec.ts
View file

@ -21,11 +21,8 @@ describe('Import markdown file', () => {
},
{ force: true }
)
cy.get('.CodeMirror-code > div:nth-of-type(1) > .CodeMirror-line > span > span').should(
'have.text',
'# Some short import test file'
)
cy.get('.CodeMirror-code > div:nth-of-type(2) > .CodeMirror-line > span > span').should('have.text', ':)')
cy.get('.cm-editor .cm-line:nth-child(1)').should('have.text', '# Some short import test file')
cy.get('.cm-editor .cm-line:nth-child(2)').should('have.text', ':)')
})
it('import on note with content', () => {
@ -40,12 +37,9 @@ describe('Import markdown file', () => {
},
{ force: true }
)
cy.get('.CodeMirror-code > div:nth-of-type(1) > .CodeMirror-line > span > span').should('have.text', 'test')
cy.get('.CodeMirror-code > div:nth-of-type(2) > .CodeMirror-line > span > span').should('have.text', 'abc')
cy.get('.CodeMirror-code > div:nth-of-type(3) > .CodeMirror-line > span > span').should(
'have.text',
'# Some short import test file'
)
cy.get('.CodeMirror-code > div:nth-of-type(4) > .CodeMirror-line > span > span').should('have.text', ':)')
cy.get('.cm-editor .cm-line:nth-child(1)').should('have.text', 'test')
cy.get('.cm-editor .cm-line:nth-child(2)').should('have.text', 'abc')
cy.get('.cm-editor .cm-line:nth-child(3)').should('have.text', '# Some short import test file')
cy.get('.cm-editor .cm-line:nth-child(4)').should('have.text', ':)')
})
})

31
cypress/integration/taskLists.spec.ts
View file

@ -4,11 +4,6 @@
* SPDX-License-Identifier: AGPL-3.0-only
*/
const TEST_STRING_UNCHECKED = '- [ ] abc\n\n* [ ] abc\n\n+ [ ] abc\n\n1. [ ] abc\n\n10. [ ] abc\n\n5) [ ] abc'
const TEST_STRING_CHECKED_LOWER = '- [x] abc\n\n* [x] abc\n\n+ [x] abc\n\n1. [x] abc\n\n10. [x] abc\n\n5) [x] abc'
const TEST_STRING_CHECKED_UPPER = '- [X] abc\n\n* [X] abc\n\n+ [X] abc\n\n1. [X] abc\n\n10. [X] abc\n\n5) [X] abc'
const TEST_STRING_INVALID = '- [Y] abc\n\n* [ ] abc\n\n+ [-] abc\n\n1. [.] abc\n\n10. [] abc\n\n5) [-] abc'
describe('Task lists ', () => {
beforeEach(() => {
cy.visitTestNote()
@ -16,55 +11,55 @@ describe('Task lists ', () => {
describe('render with checkboxes ', () => {
it('when unchecked', () => {
cy.setCodemirrorContent(TEST_STRING_UNCHECKED)
cy.setCodemirrorContent('- [ ] abc\n\n* [ ] abc\n\n+ [ ] abc\n\n1. [ ] abc\n\n10. [ ] abc\n\n5) [ ] abc')
cy.getMarkdownBody().find('input[type=checkbox]').should('have.length', 6)
})
it('when checked lowercase', () => {
cy.setCodemirrorContent(TEST_STRING_CHECKED_LOWER)
cy.setCodemirrorContent('- [x] abc\n\n* [x] abc\n\n+ [x] abc\n\n1. [x] abc\n\n10. [x] abc\n\n5) [x] abc')
cy.getMarkdownBody().find('input[type=checkbox]').should('have.length', 6)
})
it('when checked uppercase', () => {
cy.setCodemirrorContent(TEST_STRING_CHECKED_UPPER)
cy.setCodemirrorContent('- [X] abc\n\n* [X] abc\n\n+ [X] abc\n\n1. [X] abc\n\n10. [X] abc\n\n5) [X] abc')
cy.getMarkdownBody().find('input[type=checkbox]').should('have.length', 6)
})
})
it('do not render as checkboxes when invalid', () => {
cy.setCodemirrorContent(TEST_STRING_INVALID)
cy.setCodemirrorContent('- [Y] abc\n\n* [ ] abc\n\n+ [-] abc\n\n1. [.] abc\n\n10. [] abc\n\n5) [-] abc')
cy.getMarkdownBody().find('input[type=checkbox]').should('have.length', 0)
})
describe('are clickable and change the markdown source ', () => {
it('from unchecked to checked', () => {
cy.setCodemirrorContent(TEST_STRING_UNCHECKED)
cy.setCodemirrorContent('- [ ] abc')
cy.getMarkdownBody()
.find('input[type=checkbox]')
.each((box) => {
box.trigger('click')
box.click()
})
cy.get('.CodeMirror-line > span').should('exist').should('contain.text', '[x]').should('not.contain.text', '[ ]')
cy.get('.cm-editor .cm-line').first().should('contain.text', '[x]').should('not.contain.text', '[ ]')
})
it('from checked (lowercase) to unchecked', () => {
cy.setCodemirrorContent(TEST_STRING_CHECKED_LOWER)
cy.setCodemirrorContent('- [x] abc')
cy.getMarkdownBody()
.find('input[type=checkbox]')
.each((box) => {
box.trigger('click')
box.click()
})
cy.get('.CodeMirror-line > span').should('exist').should('contain.text', '[ ]').should('not.contain.text', '[x]')
cy.get('.cm-editor .cm-line').should('exist').should('contain.text', '[ ]').should('not.contain.text', '[x]')
})
it('from checked (uppercase) to unchecked', () => {
cy.setCodemirrorContent(TEST_STRING_CHECKED_UPPER)
cy.setCodemirrorContent('- [X] abc')
cy.getMarkdownBody()
.find('input[type=checkbox]')
.each((box) => {
box.trigger('click')
box.click()
})
cy.get('.CodeMirror-line > span').should('exist').should('contain.text', '[ ]').should('not.contain.text', '[X]')
cy.get('.cm-editor .cm-line').should('exist').should('contain.text', '[ ]').should('not.contain.text', '[X]')
})
})
})