add strikethrough lines

Author: Jesse Haigh

src/components/ContentNode.vue

@@ -277,6 +277,7 @@ function renderNode(createElement, references) {
         copyToClipboard: node.copyToClipboard ?? false,
         wrap: node.wrap ?? 0,
         highlightedLines: node.highlight ?? [],
+        strikethroughLines: node.strikeout ?? [],
       };
       return createElement(CodeListing, { props });
     }

src/components/ContentNode/CodeListing.vue

@@ -42,7 +42,8 @@
       ><span
         :key="index"
         :class="['code-line-container',{ highlighted: isHighlighted(index),
-                 'user-highlighted': isUserHighlighted(index) }]"
+                 'user-highlighted': isUserHighlighted(index),
+                 'user-strikethrough': isUserStrikethrough(index),}]"
       ><span
         v-if="showLineNumbers"
         class="code-number"
@@ -113,6 +114,10 @@ export default {
       type: Array,
       default: () => [],
     },
+    strikethroughLines: {
+      type: Array,
+      default: () => [],
+    },
     startLineNumber: {
       type: Number,
       default: () => 1,
@@ -143,6 +148,10 @@ export default {
       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) {
@@ -169,6 +178,9 @@ export default {
     isUserHighlighted(index) {
       return this.highlightSet.has(this.lineNumberFor(index));
     },
+    isUserStrikethrough(index) {
+      return this.strikethroughSet.has(this.lineNumberFor(index));
+    },
     // Returns the line number for the line at the given index in `content`.
     lineNumberFor(index) {
       return this.startLineNumber + index;
@@ -247,6 +259,12 @@ export default {
   }
 }
 
+.user-strikethrough {
+  text-decoration-line: line-through;
+  text-decoration-color: var(--color-figure-gray);
+  opacity: 0.85;
+}
+
 pre {
   padding: $code-listing-with-numbers-padding;
   display: flex;

tests/unit/components/ContentNode.spec.js

@@ -102,6 +102,9 @@ describe('ContentNode', () => {
       fileType: 'swift',
       code: ['foobar'],
       copyToClipboard: false,
+      wrap: 0,
+      highlightedLines: [],
+      strikethroughLines: [],
     };
 
     it('renders a `CodeListing`', () => {
@@ -113,6 +116,9 @@ describe('ContentNode', () => {
       expect(codeListing.props('fileType')).toBe(listing.fileType);
       expect(codeListing.props('content')).toEqual(listing.code);
       expect(codeListing.props('copyToClipboard')).toEqual(listing.copyToClipboard);
+      expect(codeListing.props('wrap')).toEqual(listing.wrap);
+      expect(codeListing.props('highlightedLines')).toEqual(listing.highlightedLines);
+      expect(codeListing.props('strikethroughLines')).toEqual(listing.strikethroughLines);
       expect(codeListing.element.childElementCount === 0).toBe(true);
     });
 

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

@@ -98,6 +98,76 @@ describe('CodeListing', () => {
     });
   });
 
+  it('highlights the correct lines from highlightedLines', async () => {
+    const content = ['a', 'b', 'c', 'd', 'e'];
+    const highlightedLines = [1, 3];
+
+    const wrapper = shallowMount(CodeListing, {
+      propsData: {
+        content,
+        highlightedLines,
+        showLineNumbers: true,
+      },
+    });
+
+    await flushPromises();
+
+    const pre = wrapper.find('pre');
+    expect(pre.exists()).toBe(true);
+
+    const codeLineContainers = wrapper.findAll('span.code-line-container');
+    expect(codeLineContainers.length).toBe(content.length);
+
+    content.forEach((line, index) => {
+      const codeLineContainer = codeLineContainers.at(index);
+      const shouldBeHighlighted = highlightedLines.includes(index + 1);
+
+      const codeNumber = codeLineContainer.find('.code-number');
+
+      expect(codeNumber.attributes('data-line-number')).toBe(`${index + 1}`);
+
+      const codeLine = codeLineContainer.find('.code-line');
+      expect(codeLine.text()).toBe(line);
+
+      expect(codeLineContainer.classes('user-highlighted')).toBe(shouldBeHighlighted);
+    });
+  });
+
+  it('strikes through the correct lines from strikethroughLines', async () => {
+    const content = ['a', 'b', 'c', 'd', 'e'];
+    const strikethroughLines = [1, 3];
+
+    const wrapper = shallowMount(CodeListing, {
+      propsData: {
+        content,
+        strikethroughLines,
+        showLineNumbers: true,
+      },
+    });
+
+    await flushPromises();
+
+    const pre = wrapper.find('pre');
+    expect(pre.exists()).toBe(true);
+
+    const codeLineContainers = wrapper.findAll('span.code-line-container');
+    expect(codeLineContainers.length).toBe(content.length);
+
+    content.forEach((line, index) => {
+      const codeLineContainer = codeLineContainers.at(index);
+      const shouldBeStriked = strikethroughLines.includes(index + 1);
+
+      const codeNumber = codeLineContainer.find('.code-number');
+
+      expect(codeNumber.attributes('data-line-number')).toBe(`${index + 1}`);
+
+      const codeLine = codeLineContainer.find('.code-line');
+      expect(codeLine.text()).toBe(line);
+
+      expect(codeLineContainer.classes('user-strikethrough')).toBe(shouldBeStriked);
+    });
+  });
+
   it('syntax highlights code for Swift', async () => {
     const wrapper = shallowMount(CodeListing, {
       propsData: {