Fix copy and paste

andrewbranch · andrewbranch · commit d1f1e295a36b · 2020-05-16T16:51:14.000-07:00
diff --git a/src/factory/html.js b/src/factory/html.js
@@ -44,11 +44,13 @@ function createLineElement(line, meta, index, language, getLineClassName, tokens
 /** @param {GutterCell | undefined} cell */
 function createGutterCellElement(cell) {
   return span(
-    { class: joinClassNames('grvsc-gutter', cell && cell.className) },
-    [escapeHTML((cell && cell.text) || '')],
     {
-      whitespace: TriviaRenderFlags.NoWhitespace
-    }
+      class: joinClassNames('grvsc-gutter', cell && cell.className),
+      'aria-hidden': 'true',
+      'data-content': cell && cell.text
+    },
+    [],
+    { whitespace: TriviaRenderFlags.NoWhitespace }
   );
 }
 
diff --git a/src/renderers/html.js b/src/renderers/html.js
@@ -64,6 +64,7 @@ function renderHTML(element) {
 
     const { tagName, attributes, children } = element;
     const attrs = Object.keys(attributes)
+      .filter(attr => attributes[attr] !== undefined)
       .map(attr => ` ${attr}="${escapeHTML(attributes[attr])}"`)
       .join('');
 
diff --git a/styles.css b/styles.css
@@ -12,7 +12,7 @@
 }
 
 .grvsc-code {
-  display: inline-table;
+  display: table;
 }
 
 .grvsc-line {
@@ -39,6 +39,10 @@
   user-select: none;
 }
 
+.grvsc-gutter::before {
+  content: attr(data-content);
+}
+
 .grvsc-source {
   display: table-cell;
   padding-left: 1.5rem;
diff --git a/test/integration/baselines/bug-37.html b/test/integration/baselines/bug-37.html
@@ -24,7 +24,7 @@
   }
   
   .grvsc-code {
-    display: inline-table;
+    display: table;
   }
   
   .grvsc-line {
@@ -51,6 +51,10 @@
     user-select: none;
   }
   
+  .grvsc-gutter::before {
+    content: attr(data-content);
+  }
+  
   .grvsc-source {
     display: table-cell;
     padding-left: 1.5rem;
diff --git a/test/integration/baselines/bug-93.html b/test/integration/baselines/bug-93.html
@@ -23,7 +23,7 @@ <h1>TypeError: Cannot read property 'marker' of undefined</h1>
   }
   
   .grvsc-code {
-    display: inline-table;
+    display: table;
   }
   
   .grvsc-line {
@@ -50,6 +50,10 @@ <h1>TypeError: Cannot read property 'marker' of undefined</h1>
     user-select: none;
   }
   
+  .grvsc-gutter::before {
+    content: attr(data-content);
+  }
+  
   .grvsc-source {
     display: table-cell;
     padding-left: 1.5rem;
diff --git a/test/integration/baselines/code-fence-meta.html b/test/integration/baselines/code-fence-meta.html
@@ -15,7 +15,7 @@
   }
   
   .grvsc-code {
-    display: inline-table;
+    display: table;
   }
   
   .grvsc-line {
@@ -42,6 +42,10 @@
     user-select: none;
   }
   
+  .grvsc-gutter::before {
+    content: attr(data-content);
+  }
+  
   .grvsc-source {
     display: table-cell;
     padding-left: 1.5rem;
diff --git a/test/integration/baselines/github-zip.html b/test/integration/baselines/github-zip.html
@@ -21,7 +21,7 @@
   }
   
   .grvsc-code {
-    display: inline-table;
+    display: table;
   }
   
   .grvsc-line {
@@ -48,6 +48,10 @@
     user-select: none;
   }
   
+  .grvsc-gutter::before {
+    content: attr(data-content);
+  }
+  
   .grvsc-source {
     display: table-cell;
     padding-left: 1.5rem;
diff --git a/test/integration/baselines/highlight-directive-comments.html b/test/integration/baselines/highlight-directive-comments.html
@@ -29,7 +29,7 @@
   }
   
   .grvsc-code {
-    display: inline-table;
+    display: table;
   }
   
   .grvsc-line {
@@ -56,6 +56,10 @@
     user-select: none;
   }
   
+  .grvsc-gutter::before {
+    content: attr(data-content);
+  }
+  
   .grvsc-source {
     display: table-cell;
     padding-left: 1.5rem;
diff --git a/test/integration/baselines/inline-custom-class.html b/test/integration/baselines/inline-custom-class.html
@@ -18,7 +18,7 @@ <h1>Inline Code</h1>
   }
   
   .grvsc-code {
-    display: inline-table;
+    display: table;
   }
   
   .grvsc-line {
@@ -45,6 +45,10 @@ <h1>Inline Code</h1>
     user-select: none;
   }
   
+  .grvsc-gutter::before {
+    content: attr(data-content);
+  }
+  
   .grvsc-source {
     display: table-cell;
     padding-left: 1.5rem;
diff --git a/test/integration/baselines/inline-theme-function.html b/test/integration/baselines/inline-theme-function.html
@@ -18,7 +18,7 @@ <h1>Inline Code</h1>
   }
   
   .grvsc-code {
-    display: inline-table;
+    display: table;
   }
   
   .grvsc-line {
@@ -45,6 +45,10 @@ <h1>Inline Code</h1>
     user-select: none;
   }
   
+  .grvsc-gutter::before {
+    content: attr(data-content);
+  }
+  
   .grvsc-source {
     display: table-cell;
     padding-left: 1.5rem;
diff --git a/test/integration/baselines/inline.html b/test/integration/baselines/inline.html
@@ -18,7 +18,7 @@ <h1>Inline Code</h1>
   }
   
   .grvsc-code {
-    display: inline-table;
+    display: table;
   }
   
   .grvsc-line {
@@ -45,6 +45,10 @@ <h1>Inline Code</h1>
     user-select: none;
   }
   
+  .grvsc-gutter::before {
+    content: attr(data-content);
+  }
+  
   .grvsc-source {
     display: table-cell;
     padding-left: 1.5rem;
diff --git a/test/integration/baselines/line-numbers.html b/test/integration/baselines/line-numbers.html
diff --git a/test/integration/baselines/npm-extension.html b/test/integration/baselines/npm-extension.html
@@ -21,7 +21,7 @@
   }
   
   .grvsc-code {
-    display: inline-table;
+    display: table;
   }
   
   .grvsc-line {
@@ -48,6 +48,10 @@
     user-select: none;
   }
   
+  .grvsc-gutter::before {
+    content: attr(data-content);
+  }
+  
   .grvsc-source {
     display: table-cell;
     padding-left: 1.5rem;
diff --git a/test/integration/baselines/parent-selector.html b/test/integration/baselines/parent-selector.html
@@ -14,7 +14,7 @@
   }
   
   .grvsc-code {
-    display: inline-table;
+    display: table;
   }
   
   .grvsc-line {
@@ -41,6 +41,10 @@
     user-select: none;
   }
   
+  .grvsc-gutter::before {
+    content: attr(data-content);
+  }
+  
   .grvsc-source {
     display: table-cell;
     padding-left: 1.5rem;
diff --git a/test/integration/baselines/vsix.html b/test/integration/baselines/vsix.html
@@ -21,7 +21,7 @@
   }
   
   .grvsc-code {
-    display: inline-table;
+    display: table;
   }
   
   .grvsc-line {
@@ -48,6 +48,10 @@
     user-select: none;
   }
   
+  .grvsc-gutter::before {
+    content: attr(data-content);
+  }
+  
   .grvsc-source {
     display: table-cell;
     padding-left: 1.5rem;

Original file line number	Diff line number	Diff line change
`@@ -12,7 +12,7 @@`
`12`	`12`	`}`
`13`	`13`
`14`	`14`	`.grvsc-code {`
`15`		`- display: inline-table;`
	`15`	`+ display: table;`
`16`	`16`	`}`
`17`	`17`
`18`	`18`	`.grvsc-line {`
`@@ -39,6 +39,10 @@`
`39`	`39`	`user-select: none;`
`40`	`40`	`}`
`41`	`41`
	`42`	`+.grvsc-gutter::before {`
	`43`	`+ content: attr(data-content);`
	`44`	`+}`
	`45`	`+`
`42`	`46`	`.grvsc-source {`
`43`	`47`	`display: table-cell;`
`44`	`48`	`padding-left: 1.5rem;`
Original file line number	Diff line number	Diff line change
`@@ -24,7 +24,7 @@`
`24`	`24`	`}`
`25`	`25`
`26`	`26`	`.grvsc-code {`
`27`		`- display: inline-table;`
	`27`	`+ display: table;`
`28`	`28`	`}`
`29`	`29`
`30`	`30`	`.grvsc-line {`
`@@ -51,6 +51,10 @@`
`51`	`51`	`user-select: none;`
`52`	`52`	`}`
`53`	`53`
	`54`	`+ .grvsc-gutter::before {`
	`55`	`+ content: attr(data-content);`
	`56`	`+ }`
	`57`	`+`
`54`	`58`	`.grvsc-source {`
`55`	`59`	`display: table-cell;`
`56`	`60`	`padding-left: 1.5rem;`
Original file line number	Diff line number	Diff line change
`@@ -23,7 +23,7 @@ <h1>TypeError: Cannot read property 'marker' of undefined</h1>`
`23`	`23`	`}`
`24`	`24`
`25`	`25`	`.grvsc-code {`
`26`		`- display: inline-table;`
	`26`	`+ display: table;`
`27`	`27`	`}`
`28`	`28`
`29`	`29`	`.grvsc-line {`
`@@ -50,6 +50,10 @@ <h1>TypeError: Cannot read property 'marker' of undefined</h1>`
`50`	`50`	`user-select: none;`
`51`	`51`	`}`
`52`	`52`
	`53`	`+ .grvsc-gutter::before {`
	`54`	`+ content: attr(data-content);`
	`55`	`+ }`
	`56`	`+`
`53`	`57`	`.grvsc-source {`
`54`	`58`	`display: table-cell;`
`55`	`59`	`padding-left: 1.5rem;`
Original file line number	Diff line number	Diff line change
`@@ -15,7 +15,7 @@`
`15`	`15`	`}`
`16`	`16`
`17`	`17`	`.grvsc-code {`
`18`		`- display: inline-table;`
	`18`	`+ display: table;`
`19`	`19`	`}`
`20`	`20`
`21`	`21`	`.grvsc-line {`
`@@ -42,6 +42,10 @@`
`42`	`42`	`user-select: none;`
`43`	`43`	`}`
`44`	`44`
	`45`	`+ .grvsc-gutter::before {`
	`46`	`+ content: attr(data-content);`
	`47`	`+ }`
	`48`	`+`
`45`	`49`	`.grvsc-source {`
`46`	`50`	`display: table-cell;`
`47`	`51`	`padding-left: 1.5rem;`
Original file line number	Diff line number	Diff line change
`@@ -21,7 +21,7 @@`
`21`	`21`	`}`
`22`	`22`
`23`	`23`	`.grvsc-code {`
`24`		`- display: inline-table;`
	`24`	`+ display: table;`
`25`	`25`	`}`
`26`	`26`
`27`	`27`	`.grvsc-line {`
`@@ -48,6 +48,10 @@`
`48`	`48`	`user-select: none;`
`49`	`49`	`}`
`50`	`50`
	`51`	`+ .grvsc-gutter::before {`
	`52`	`+ content: attr(data-content);`
	`53`	`+ }`
	`54`	`+`
`51`	`55`	`.grvsc-source {`
`52`	`56`	`display: table-cell;`
`53`	`57`	`padding-left: 1.5rem;`
Original file line number	Diff line number	Diff line change
`@@ -29,7 +29,7 @@`
`29`	`29`	`}`
`30`	`30`
`31`	`31`	`.grvsc-code {`
`32`		`- display: inline-table;`
	`32`	`+ display: table;`
`33`	`33`	`}`
`34`	`34`
`35`	`35`	`.grvsc-line {`
`@@ -56,6 +56,10 @@`
`56`	`56`	`user-select: none;`
`57`	`57`	`}`
`58`	`58`
	`59`	`+ .grvsc-gutter::before {`
	`60`	`+ content: attr(data-content);`
	`61`	`+ }`
	`62`	`+`
`59`	`63`	`.grvsc-source {`
`60`	`64`	`display: table-cell;`
`61`	`65`	`padding-left: 1.5rem;`
Original file line number	Diff line number	Diff line change
`@@ -18,7 +18,7 @@ <h1>Inline Code</h1>`
`18`	`18`	`}`
`19`	`19`
`20`	`20`	`.grvsc-code {`
`21`		`- display: inline-table;`
	`21`	`+ display: table;`
`22`	`22`	`}`
`23`	`23`
`24`	`24`	`.grvsc-line {`
`@@ -45,6 +45,10 @@ <h1>Inline Code</h1>`
`45`	`45`	`user-select: none;`
`46`	`46`	`}`
`47`	`47`
	`48`	`+ .grvsc-gutter::before {`
	`49`	`+ content: attr(data-content);`
	`50`	`+ }`
	`51`	`+`
`48`	`52`	`.grvsc-source {`
`49`	`53`	`display: table-cell;`
`50`	`54`	`padding-left: 1.5rem;`
Original file line number	Diff line number	Diff line change
`@@ -14,7 +14,7 @@`
`14`	`14`	`}`
`15`	`15`
`16`	`16`	`.grvsc-code {`
`17`		`- display: inline-table;`
	`17`	`+ display: table;`
`18`	`18`	`}`
`19`	`19`
`20`	`20`	`.grvsc-line {`
`@@ -41,6 +41,10 @@`
`41`	`41`	`user-select: none;`
`42`	`42`	`}`
`43`	`43`
	`44`	`+ .grvsc-gutter::before {`
	`45`	`+ content: attr(data-content);`
	`46`	`+ }`
	`47`	`+`
`44`	`48`	`.grvsc-source {`
`45`	`49`	`display: table-cell;`
`46`	`50`	`padding-left: 1.5rem;`