Code listing style fixes, remove extra line management (#667)

* Fix extra empty line issue on tutorial

* refactor: change the CodeListing rendering

Co-authored-by: Kyle <kyle201817146@gmail.com>

Author: Dobromir Hristov

src/components/ContentNode/CodeListing.vue

@@ -23,18 +23,20 @@
     </Filename>
     <div class="container-general">
       <!-- Do not add newlines in <pre>, as they'll appear in the rendered HTML. -->
-      <pre><CodeBlock><span
+      <pre><CodeBlock><template
         v-for="(line, index) in syntaxHighlightedLines"
-        :class="['code-line-container',{ highlighted: isHighlighted(index) }]"
+      ><span
         :key="index"
+        :class="['code-line-container',{ highlighted: isHighlighted(index) }]"
       ><span
-        v-show="showLineNumbers" class="code-number"
+        v-if="showLineNumbers"
+        class="code-number"
         :data-line-number="lineNumberFor(index)"
-      />
-<span
-  class="code-line"
-  v-html="line"
-/></span></CodeBlock></pre>
+      /><span
+        class="code-line"
+        v-html="line"
+      /></span><!-- This new line must stay -->
+</template></CodeBlock></pre>
     </div>
   </div>
 </template>
@@ -128,10 +130,13 @@ export default {
 @import 'docc-render/styles/_core.scss';
 
 .code-line-container {
-  display: flex;
+  display: inline-block;
+  width: 100%;
+  box-sizing: border-box;
 }
 
 .code-number {
+  display: inline-block;
   padding: $code-number-padding;
   text-align: right;
   min-width: 2em;
@@ -167,18 +172,11 @@ pre {
 }
 
 code {
-  display: flex;
-  flex-direction: column;
   white-space: pre;
   word-wrap: normal;
   flex-grow: 9999;
 }
 
-.code-line-container {
-  flex-shrink: 0;
-  padding-right: 14px;
-}
-
 .code-listing,
 .container-general {
   display: flex;

src/components/DocumentationTopic/ContentNode.vue

@@ -47,8 +47,6 @@ $docs-code-listing-border-width: 1px !default;
 
     pre {
       padding: var(--code-block-style-elements-padding);
-      // setting it to 0 prevents browsers from adding extra right spacing, when having scrollbar
-      padding-right: 0;
 
       > code {
         @include font-styles(documentation-code-listing);

src/components/Tutorial/CodePreview.vue

@@ -178,7 +178,7 @@ export default {
         this.shouldDisplayHideLabel
           ? this.$t('verbs.hide')
           : this.$t('verbs.show')
-        }`;
+      }`;
     },
   },
   methods: {
@@ -227,6 +227,11 @@ $duration: 0.2s;
 
   /deep/ .code-listing {
     color: var(--text, var(--color-code-plain));
+
+    .code-line-container {
+      // add extra padding, so we have extra space on right when scrolling is needed
+      padding-right: 14px;
+    }
   }
 
   /deep/ pre {

src/utils/syntax-highlight.js

@@ -1,7 +1,7 @@
 /**
  * This source file is part of the Swift.org open source project
  *
- * Copyright (c) 2021 Apple Inc. and the Swift project authors
+ * Copyright (c) 2021-2023 Apple Inc. and the Swift project authors
  * Licensed under Apache License v2.0 with Runtime Library Exception
  *
  * See https://swift.org/LICENSE.txt for license information
@@ -192,7 +192,7 @@ function duplicateMultilineNode(element) {
 
   // wrap each new line with the current element's class
   const result = getLines(element.innerHTML)
-    .reduce((all, lineText) => `${all}<span class="${className}">${lineText || '\n\n'}</span>\n`, '');
+    .reduce((all, lineText) => `${all}<span class="${className}">${lineText}</span>\n`, '');
 
   // return a list of newly wrapped HTML elements
   return htmlToElements(result.trim());

tests/unit/components/ContentNode/CodeListing.spec.js

@@ -55,9 +55,8 @@ describe('CodeListing', () => {
     expect(listing.attributes('data-syntax')).toBe('swift');
 
     const codeLineContainer = listing.find('span.code-line-container');
-    const codeNumber = codeLineContainer.find('.code-number');
-    // Code Number content should be empty to not get copied during user select
-    expect(codeNumber.text()).toBe('');
+    // Code Number content should not be rendered, if not needed
+    expect(codeLineContainer.find('.code-number').exists()).toBe(false);
 
     const codeLine = codeLineContainer.find('.code-line');
     expect(codeLine.text()).toBe('hello');
@@ -88,7 +87,6 @@ describe('CodeListing', () => {
       const shouldBeHighlighted = highlights.map(h => h.line).includes(index + 1);
 
       const codeNumber = codeLineContainer.find('.code-number');
-      // expect(codeNumber.text()).toBe(`${index + 1}`);
 
       expect(codeNumber.attributes('data-line-number')).toBe(`${index + 1}`);
 

tests/unit/utils/syntax-highlight.spec.js

@@ -107,17 +107,11 @@ describe("syntax-highlight", () => {
     expect(sanitizedCode).toMatchInlineSnapshot(`
       <span class="syntax-keyword">let</span> multiline = <span class="syntax-string">""</span><span class="syntax-string">"</span>
       <span class="syntax-string">Needs</span>
-      <span class="syntax-string">
-
-      </span>
+      <span class="syntax-string"></span>
       <span class="syntax-string">Spaces</span>
-      <span class="syntax-string">
-
-      </span>
+      <span class="syntax-string"></span>
       <span class="syntax-string">Between</span>
-      <span class="syntax-string">
-
-      </span>
+      <span class="syntax-string"></span>
       <span class="syntax-string">Lines</span>
       <span class="syntax-string">"</span><span class="syntax-string">""</span>
     `);