From 9c38655a921110fa0f6a1fa36bdfdf46b777fd64 Mon Sep 17 00:00:00 2001
From: Philip Molares <git@molar.es>
Date: Tue, 22 Sep 2020 23:17:19 +0200
Subject: [PATCH] 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              | 90 +++++++++++++++++++
 cypress/plugins/index.js                      |  8 ++
 .../highlighted-fence-replacer.tsx            |  6 +-
 3 files changed, 101 insertions(+), 3 deletions(-)
 create mode 100644 cypress/integration/code.spec.ts
 create mode 100644 cypress/plugins/index.js

diff --git a/cypress/integration/code.spec.ts b/cypress/integration/code.spec.ts
new file mode 100644
index 000000000..1541510be
--- /dev/null
+++ b/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');
+  })
+
+})
diff --git a/cypress/plugins/index.js b/cypress/plugins/index.js
new file mode 100644
index 000000000..88bfac4f7
--- /dev/null
+++ b/cypress/plugins/index.js
@@ -0,0 +1,8 @@
+// const clipboardy = require('clipboardy');
+module.exports = ( on ) => {
+  on('task', {
+    getClipboard () {
+      // return clipboardy.readSync();
+    }
+  });
+};
diff --git a/src/components/markdown-renderer/replace-components/highlighted-fence/highlighted-fence-replacer.tsx b/src/components/markdown-renderer/replace-components/highlighted-fence/highlighted-fence-replacer.tsx
index 4c7fe9658..0f230fc7c 100644
--- a/src/components/markdown-renderer/replace-components/highlighted-fence/highlighted-fence-replacer.tsx
+++ b/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
-      startLineNumberAttribute = extraInfos[1]
-      wrapLines = extraInfos[2] !== undefined
+      showLineNumbers = extraInfos[1]?.startsWith('=') || false
+      startLineNumberAttribute = extraInfos[2]
+      wrapLines = extraInfos[3] === '!'
     }
 
     const startLineNumber = startLineNumberAttribute === '+' ? this.lastLineNumber : (parseInt(startLineNumberAttribute) || 1)