fixed highlight fence in regard to '=' (showLines) and '!' (wrapLines) (#594)

this was just a simple index problem. The 0. entry of a regex result is the whole string and not the first capture group

added e2e tests to fix this in the future
cypress does currently not support copy to clipboard in firefox so this part of the test is commented out (for the time being)

cypress/integration/code.spec.ts

@@ -0,0 +1,90 @@
+describe('Code', () => {
+  beforeEach(() => {
+    cy.visit('/n/test')
+    cy.get('.btn.active.btn-outline-secondary > i.fa-columns')
+      .should('exist')
+    cy.get('.CodeMirror textarea')
+      .type('{ctrl}a', { force: true })
+      .type('{backspace}')
+  })
+
+  describe('without = doesn\'t show gutter', () => {
+    it("without wrapLines active", () => {
+      cy.get('.CodeMirror textarea')
+        .type(`\`\`\`javascript \nlet x = 0\n\`\`\``)
+      cy.get('.markdown-body > pre > code')
+        .should('have.class', 'hljs')
+    })
+
+    it("with wrapLines active", () => {
+      cy.get('.CodeMirror textarea')
+        .type(`\`\`\`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('.CodeMirror textarea')
+        .type(`\`\`\`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('.CodeMirror textarea')
+        .type(`\`\`\`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('.CodeMirror textarea')
+        .type(`\`\`\`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('.CodeMirror textarea')
+        .type(`\`\`\`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('.CodeMirror textarea')
+      .type(`\`\`\`javascript \nlet x = 0\n\`\`\``)
+    cy.get('.markdown-body > pre > div > button > i')
+      .should('have.class', 'fa-files-o')
+      .click()
+    // This line can be activated if cypress supports copy to clipboard in firefox, too.
+    // Please run `yarn add --dev clipboardy`
+    // uncomment cypress plugin
+    // cy.task('getClipboard').should('contain', 'let x = 0\n');
+  })
+
+})

cypress/plugins/index.js

@@ -0,0 +1,8 @@
+// const clipboardy = require('clipboardy');
+module.exports = ( on ) => {
+  on('task', {
+    getClipboard () {
+      // return clipboardy.readSync();
+    }
+  });
+};

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

@@ -20,9 +20,9 @@ export class HighlightedCodeReplacer extends ComponentReplacer {
     let wrapLines = false
 
     if (extraInfos) {
-      showLineNumbers = extraInfos[0] !== undefined
+      showLineNumbers = extraInfos[1]?.startsWith('=') || false
-      startLineNumberAttribute = extraInfos[1]
+      startLineNumberAttribute = extraInfos[2]
-      wrapLines = extraInfos[2] !== undefined
+      wrapLines = extraInfos[3] === '!'
     }
 
     const startLineNumber = startLineNumberAttribute === '+' ? this.lastLineNumber : (parseInt(startLineNumberAttribute) || 1)