Fix counter continue in highlighted-fence-replacer.tsx (#943)

Signed-off-by: Tilman Vatteroth <[email protected]>

cypress/integration/highlightedCodeBlock.spec.ts

@@ -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')
+  })
+})

src/components/markdown-renderer/replace-components/highlighted-fence/highlighted-code/highlighted-code.scss

@@ -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);
-          }
         }
       }
 

src/components/markdown-renderer/replace-components/highlighted-fence/highlighted-code/highlighted-code.tsx

@@ -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>

src/components/markdown-renderer/replace-components/highlighted-fence/highlighted-fence-replacer.tsx

@@ -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 = ''