WIP PR feedback

Author: Jesse Haigh

src/components/ContentNode/CodeListing.vue

@@ -13,7 +13,7 @@
     class="code-listing"
     :data-syntax="syntaxNameNormalized"
     :class="{ 'single-line': syntaxHighlightedLines.length === 1, 'is-wrapped': wrap > 0 }"
-    :style="wrapStyle"
+    :style="wrap > 0 ? { '--wrap-ch': wrap } : null"
   >
     <Filename
       v-if="fileName"
@@ -42,8 +42,8 @@
       ><span
         :key="index"
         :class="['code-line-container',{ highlighted: isHighlighted(index),
-                 'user-highlighted': isUserHighlighted(index),
-                 'user-strikethrough': isUserStrikethrough(index),}]"
+                 highlighted: isUserHighlighted(index),
+                 strikethrough: isUserStrikethrough(index),}]"
       ><span
         v-if="showLineNumbers"
         class="code-number"
@@ -113,10 +113,13 @@ export default {
     highlightedLines: {
       type: Array,
       default: () => [],
+      validator: lines => lines.every(number => Number.isInteger(number) && number > 0),
     },
     strikethroughLines: {
       type: Array,
       default: () => [],
+      validator: lines => lines.every(number => Number.isInteger(number) && number > 0),
+
     },
     startLineNumber: {
       type: Number,
@@ -144,26 +147,6 @@ export default {
     copyableText() {
       return this.content.join('\n');
     },
-    highlightSet() {
-      const arr = this.highlightedLines || [];
-      return new Set(arr.map(Number).filter(n => Number.isFinite(n) && n > 0));
-    },
-    strikethroughSet() {
-      const arr = this.strikethroughLines || [];
-      return new Set(arr.map(Number).filter(n => Number.isFinite(n) && n > 0));
-    },
-    wrapStyle() {
-      const style = {};
-      if (this.wrap > 0) {
-        style.whiteSpace = 'pre-wrap';
-        style.wordBreak = 'break-word';
-        style.overflowWrap = 'anywhere';
-        style['--wrap-ch'] = String(this.wrap);
-      } else {
-        style.whiteSpace = 'pre';
-      }
-      return style;
-    },
   },
   watch: {
     content: {
@@ -176,10 +159,10 @@ export default {
       return this.highlightedLineNumbers.has(this.lineNumberFor(index));
     },
     isUserHighlighted(index) {
-      return this.highlightSet.has(this.lineNumberFor(index));
+      return this.highlightedLines.includes(this.lineNumberFor(index));
     },
     isUserStrikethrough(index) {
-      return this.strikethroughSet.has(this.lineNumberFor(index));
+      return this.strikethroughLines.includes(this.lineNumberFor(index));
     },
     // Returns the line number for the line at the given index in `content`.
     lineNumberFor(index) {
@@ -250,16 +233,7 @@ export default {
   }
 }
 
-.user-highlighted {
-  background: var(--user-line-highlight, var(--color-user-code-line-highlight));
-  border-left: $highlighted-border-width solid var(--color-user-code-line-highlight-border);
-
-  .code-number {
-    padding-left: $code-number-padding-left - $highlighted-border-width;
-  }
-}
-
-.user-strikethrough {
+.strikethrough {
   text-decoration-line: line-through;
   text-decoration-color: var(--color-figure-gray);
   opacity: 0.85;

src/styles/core/colors/_dark.scss

@@ -37,7 +37,6 @@
   --color-badge-default: var(--color-badge-dark-default);
   --color-button-background-active: #{dark-color(fill-blue)};
   --color-code-line-highlight: #{change-color(dark-color(figure-blue), $alpha: 0.08)};
-  --color-user-code-line-highlight: #{change-color(dark-color(figure-orange), $alpha: 0.32)};
   --color-dropdown-background: var(--color-dropdown-dark-background);
   --color-dropdown-border: var(--color-dropdown-dark-border);
   --color-dropdown-option-text: var(--color-dropdown-dark-option-text);

src/styles/core/colors/_light.scss

@@ -77,8 +77,6 @@
   --color-code-collapsible-text: var(--color-figure-gray-secondary-alt);
   --color-code-line-highlight: #{change-color(light-color(figure-blue), $alpha: 0.08)};
   --color-code-line-highlight-border: var(--color-figure-blue);
-  --color-user-code-line-highlight: #{change-color(light-color(figure-orange), $alpha: 0.32)};
-  --color-user-code-line-highlight-border: var(--color-figure-orange);
   --color-code-plain: var(--color-figure-gray);
   --color-dropdown-background: #{transparentize(light-color(fill), 0.2)};
   --color-dropdown-border: #{light-color(fill-gray)};

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

@@ -351,8 +351,7 @@ describe('CodeListing', () => {
 
     await wrapper.setProps({ wrap: 0 });
     style = wrapper.attributes('style') || '';
-    expect(wrapper.classes()).not.toContain('is-wrapped');
-    expect(style).not.toMatch(/--wrap-ch:\s*\d+/);
+    expect(style).toMatch(/--wrap-ch:\s*0\b/);
   });
 
   it('treats negative wrap as no-wrap', async () => {