mirror of
https://github.com/hedgedoc/hedgedoc.git
synced 2024-11-22 17:56:30 -05:00
Fix counter continue in highlighted-fence-replacer.tsx (#943)
Signed-off-by: Tilman Vatteroth <tilman.vatteroth@tu-dortmund.de>
This commit is contained in:
Tilman Vatteroth
GitHub
parent
7be64bc582
commit
9f6b1a9a46
5 changed files with 197 additions and 117 deletions
|
|
@ -1,98 +0,0 @@
|
|||
/*
|
||||
* SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
|
||||
*
|
||||
* SPDX-License-Identifier: AGPL-3.0-only
|
||||
*/
|
||||
|
||||
describe('Code', () => {
|
||||
beforeEach(() => {
|
||||
cy.visit('/n/test', {
|
||||
onBeforeLoad (win: Window): void {
|
||||
cy.spy(win.navigator.clipboard, 'writeText').as('copy')
|
||||
}
|
||||
})
|
||||
cy.get('.btn.active.btn-outline-secondary > i.fa-columns')
|
||||
.should('exist')
|
||||
|
||||
cy.get('.CodeMirror')
|
||||
.click()
|
||||
.get('textarea')
|
||||
.as('codeinput')
|
||||
})
|
||||
|
||||
describe('without = doesn\'t show gutter', () => {
|
||||
it('without wrapLines active', () => {
|
||||
cy.get('@codeinput')
|
||||
.fill('```javascript \nlet x = 0\n```')
|
||||
cy.get('.markdown-body > pre > code')
|
||||
.should('have.class', 'hljs')
|
||||
})
|
||||
|
||||
it('with wrapLines active', () => {
|
||||
cy.get('@codeinput')
|
||||
.fill('```javascript!\nlet x = 0\n```')
|
||||
cy.get('.markdown-body > pre > code')
|
||||
.should('have.class', 'hljs')
|
||||
.should('have.class', 'wrapLines')
|
||||
})
|
||||
})
|
||||
|
||||
describe('with = shows gutter', () => {
|
||||
it('without wrapLines active', () => {
|
||||
cy.get('@codeinput')
|
||||
.fill('```javascript=\nlet x = 0\n```')
|
||||
cy.get('.markdown-body > pre > code')
|
||||
.should('have.class', 'hljs')
|
||||
.should('have.class', 'showGutter')
|
||||
cy.get('.markdown-body > pre > code > span')
|
||||
.should('have.class', 'linenumber')
|
||||
.should('have.attr', 'data-line-number', '1')
|
||||
})
|
||||
|
||||
it('with wrapLines active', () => {
|
||||
cy.get('@codeinput')
|
||||
.fill('```javascript=! \nlet x = 0\n```')
|
||||
cy.get('.markdown-body > pre > code')
|
||||
.should('have.class', 'hljs')
|
||||
.should('have.class', 'showGutter')
|
||||
.should('have.class', 'wrapLines')
|
||||
cy.get('.markdown-body > pre > code > span')
|
||||
.should('have.class', 'linenumber')
|
||||
.should('have.attr', 'data-line-number', '1')
|
||||
})
|
||||
})
|
||||
|
||||
describe('with = shows gutter and number is used as startline', () => {
|
||||
it('without wrapLines active', () => {
|
||||
cy.get('@codeinput')
|
||||
.fill('```javascript=100\nlet x = 0\n```')
|
||||
cy.get('.markdown-body > pre > code')
|
||||
.should('have.class', 'hljs')
|
||||
.should('have.class', 'showGutter')
|
||||
cy.get('.markdown-body > pre > code > span')
|
||||
.should('have.class', 'linenumber')
|
||||
.should('have.attr', 'data-line-number', '100')
|
||||
})
|
||||
|
||||
it('with wrapLines active', () => {
|
||||
cy.get('@codeinput')
|
||||
.fill('```javascript=100! \nlet x = 0\n```')
|
||||
cy.get('.markdown-body > pre > code')
|
||||
.should('have.class', 'hljs')
|
||||
.should('have.class', 'showGutter')
|
||||
.should('have.class', 'wrapLines')
|
||||
cy.get('.markdown-body > pre > code > span')
|
||||
.should('have.class', 'linenumber')
|
||||
.should('have.attr', 'data-line-number', '100')
|
||||
})
|
||||
})
|
||||
|
||||
it('has a button', () => {
|
||||
cy.get('@codeinput')
|
||||
.fill('```javascript \nlet x = 0\n```')
|
||||
cy.get('.markdown-body > pre > div > button > i')
|
||||
.should('have.class', 'fa-files-o')
|
||||
.click()
|
||||
cy.get('@copy').should('be.calledWithExactly', 'let x = 0\n')
|
||||
})
|
||||
})
|
||||
171
cypress/integration/highlightedCodeBlock.spec.ts
Normal file
171
cypress/integration/highlightedCodeBlock.spec.ts
Normal file
|
|
@ -0,0 +1,171 @@
|
|||
/*
|
||||
* SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
|
||||
*
|
||||
* SPDX-License-Identifier: AGPL-3.0-only
|
||||
*/
|
||||
|
||||
describe('Code', () => {
|
||||
beforeEach(() => {
|
||||
cy.visit('/n/test', {
|
||||
onBeforeLoad (win: Window): void {
|
||||
cy.spy(win.navigator.clipboard, 'writeText').as('copy')
|
||||
}
|
||||
})
|
||||
cy.get('.btn.active.btn-outline-secondary > i.fa-columns')
|
||||
.should('exist')
|
||||
|
||||
cy.get('.CodeMirror ')
|
||||
.click()
|
||||
cy.get('.CodeMirror textarea')
|
||||
.as('codeinput')
|
||||
})
|
||||
|
||||
describe('with just the language', () => {
|
||||
it('doesn\'t show a gutter', () => {
|
||||
cy.get('@codeinput')
|
||||
.fill('```javascript \nlet x = 0\n```')
|
||||
cy.get('.markdown-body > pre > code.hljs')
|
||||
.should('be.visible')
|
||||
.should('not.have.class', 'showGutter')
|
||||
cy.get('.markdown-body > pre > code.hljs > .linenumber')
|
||||
.should('not.be.visible')
|
||||
})
|
||||
|
||||
describe('and line wrapping', () => {
|
||||
it('doesn\'t show a gutter', () => {
|
||||
cy.get('@codeinput')
|
||||
.fill('```javascript! \nlet x = 0\n```')
|
||||
cy.get('.markdown-body > pre > code.hljs')
|
||||
.should('be.visible')
|
||||
.should('not.have.class', 'showGutter')
|
||||
.should('have.class', 'wrapLines')
|
||||
cy.get('.markdown-body > pre > code.hljs > .linenumber')
|
||||
.should('not.be.visible')
|
||||
})
|
||||
})
|
||||
})
|
||||
|
||||
describe('with the language and show gutter', () => {
|
||||
it('shows the correct line number', () => {
|
||||
cy.get('@codeinput')
|
||||
.fill('```javascript= \nlet x = 0\n```')
|
||||
cy.get('.markdown-body > pre > code.hljs')
|
||||
.should('be.visible')
|
||||
.should('have.class', 'showGutter')
|
||||
cy.get('.markdown-body > pre > code.hljs > .linenumber')
|
||||
.should('be.visible')
|
||||
.text()
|
||||
.should('eq', '1')
|
||||
})
|
||||
|
||||
describe('and line wrapping', () => {
|
||||
it('shows the correct line number', () => {
|
||||
cy.get('@codeinput')
|
||||
.fill('```javascript=! \nlet x = 0\n```')
|
||||
cy.get('.markdown-body > pre > code.hljs')
|
||||
.should('be.visible')
|
||||
.should('have.class', 'showGutter')
|
||||
.should('have.class', 'wrapLines')
|
||||
cy.get('.markdown-body > pre > code.hljs > .linenumber')
|
||||
.should('be.visible')
|
||||
.text()
|
||||
.should('eq', '1')
|
||||
})
|
||||
})
|
||||
})
|
||||
|
||||
describe('with the language, show gutter with a start number', () => {
|
||||
it('shows the correct line number', () => {
|
||||
cy.get('@codeinput')
|
||||
.fill('```javascript=100 \nlet x = 0\n```')
|
||||
cy.get('.markdown-body > pre > code.hljs')
|
||||
.should('be.visible')
|
||||
.should('have.class', 'showGutter')
|
||||
cy.get('.markdown-body > pre > code.hljs > .linenumber')
|
||||
.should('be.visible')
|
||||
.text()
|
||||
.should('eq', '100')
|
||||
})
|
||||
|
||||
it('shows the correct line number and continues in another codeblock', () => {
|
||||
cy.get('@codeinput')
|
||||
.fill('```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')
|
||||
.should('have.class', 'showGutter')
|
||||
.first()
|
||||
.find('.linenumber')
|
||||
.first()
|
||||
.should('be.visible')
|
||||
.text()
|
||||
.should('eq', '100')
|
||||
cy.get('.markdown-body > pre > code.hljs')
|
||||
.first()
|
||||
.find('.linenumber')
|
||||
.last()
|
||||
.should('be.visible')
|
||||
.text()
|
||||
.should('eq', '101')
|
||||
cy.get('.markdown-body > pre > code.hljs')
|
||||
.last()
|
||||
.find('.linenumber')
|
||||
.first()
|
||||
.should('be.visible')
|
||||
.text()
|
||||
.should('eq', '102')
|
||||
})
|
||||
|
||||
describe('and line wrapping', () => {
|
||||
it('shows the correct line number', () => {
|
||||
cy.get('@codeinput')
|
||||
.fill('```javascript=100! \nlet x = 0\n```')
|
||||
cy.get('.markdown-body > pre > code.hljs')
|
||||
.should('be.visible')
|
||||
.should('have.class', 'showGutter')
|
||||
.should('have.class', 'wrapLines')
|
||||
cy.get('.markdown-body > pre > code.hljs > .linenumber')
|
||||
.should('be.visible')
|
||||
.text()
|
||||
.should('eq', '100')
|
||||
})
|
||||
|
||||
it('shows the correct line number and continues in another codeblock', () => {
|
||||
cy.get('@codeinput')
|
||||
.fill('```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')
|
||||
.should('have.class', 'showGutter')
|
||||
.should('have.class', 'wrapLines')
|
||||
.first()
|
||||
.find('.linenumber')
|
||||
.first()
|
||||
.should('be.visible')
|
||||
.text()
|
||||
.should('eq', '100')
|
||||
cy.get('.markdown-body > pre > code.hljs')
|
||||
.first()
|
||||
.find('.linenumber')
|
||||
.last()
|
||||
.should('be.visible')
|
||||
.text()
|
||||
.should('eq', '101')
|
||||
cy.get('.markdown-body > pre > code.hljs')
|
||||
.last()
|
||||
.find('.linenumber')
|
||||
.first()
|
||||
.should('be.visible')
|
||||
.text()
|
||||
.should('eq', '102')
|
||||
})
|
||||
})
|
||||
})
|
||||
|
||||
it('has a working copy button', () => {
|
||||
cy.get('@codeinput')
|
||||
.fill('```javascript \nlet x = 0\n```')
|
||||
cy.get('.markdown-body > pre > div > button > i')
|
||||
.should('have.class', 'fa-files-o')
|
||||
.click()
|
||||
cy.get('@copy').should('be.calledWithExactly', 'let x = 0\n')
|
||||
})
|
||||
})
|
||||
|
|
@ -26,26 +26,31 @@
|
|||
display: grid;
|
||||
grid-template-columns: auto minmax(0, 1fr);
|
||||
|
||||
.codeline {
|
||||
grid-column: 2;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.linenumber {
|
||||
grid-column: 1;
|
||||
position: relative;
|
||||
cursor: default;
|
||||
z-index: 4;
|
||||
padding: 0 8px 0 0;
|
||||
min-width: 20px;
|
||||
box-sizing: content-box;
|
||||
color: #afafaf;
|
||||
border-right: 3px solid #6ce26c;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
user-select: none;
|
||||
align-items: flex-end;
|
||||
display: none;
|
||||
}
|
||||
|
||||
&.showGutter {
|
||||
.linenumber {
|
||||
position: relative;
|
||||
cursor: default;
|
||||
z-index: 4;
|
||||
padding: 0 8px 0 0;
|
||||
min-width: 20px;
|
||||
box-sizing: content-box;
|
||||
color: #afafaf;
|
||||
border-right: 3px solid #6ce26c;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
user-select: none;
|
||||
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
|
||||
&:before {
|
||||
content: attr(data-line-number);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -41,7 +41,9 @@ export const HighlightedCode: React.FC<HighlightedCodeProps> = ({ code, language
|
|||
const unreplacedCode = !!language && languageSupported(language) ? hljs.default.highlight(language, code).value : escapeHtml(code)
|
||||
const replacedDom = replaceCode(unreplacedCode).map((line, index) => (
|
||||
<Fragment key={index}>
|
||||
<span className={'linenumber'} data-line-number={(startLineNumber || 1) + index}/>
|
||||
<span className={'linenumber'}>
|
||||
{ (startLineNumber || 1) + index }
|
||||
</span>
|
||||
<div className={'codeline'}>
|
||||
{line}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@ export class HighlightedCodeReplacer extends ComponentReplacer {
|
|||
|
||||
const language = codeNode.attribs['data-highlight-language']
|
||||
const extraData = codeNode.attribs['data-extra']
|
||||
const extraInfos = /(=(\d*|\+))?(!?)/.exec(extraData)
|
||||
const extraInfos = /(=(\d+|\+)?)?(!?)/.exec(extraData)
|
||||
|
||||
let showLineNumbers = false
|
||||
let startLineNumberAttribute = ''
|
||||
|
|
|
|||
Loading…
Reference in a new issue