Add delete highlight support

Author: Kyle-Ye

src/components/ContentNode/CodeListing.vue

@@ -25,7 +25,10 @@
       <!-- Do not add newlines in <pre>, as they'll appear in the rendered HTML. -->
       <pre><CodeBlock><span
         v-for="(line, index) in syntaxHighlightedLines"
-        :class="['code-line-container',{ highlighted: isHighlighted(index) }]"
+        :class="['code-line-container',
+        { highlighted: !isLastCodeListing && isHighlighted(index),
+          deleteHighlighted: isLastCodeListing && isDeleteHighlighted(index)
+        }]"
         :key="index"
       ><span
         v-show="showLineNumbers" class="code-number"
@@ -75,16 +78,27 @@ export default {
       type: Array,
       default: () => [],
     },
+    deleteHighlights: {
+      type: Array,
+      default: () => [],
+    },
     showLineNumbers: {
       type: Boolean,
       default: () => false,
     },
+    isLastCodeListing: {
+      type: Boolean,
+      default: () => false,
+    },
   },
   computed: {
     escapedContent: ({ content }) => content.map(escapeHtml),
     highlightedLineNumbers() {
       return new Set(this.highlights.map(({ line }) => line));
     },
+    deleteHighlightedLineNumbers() {
+      return new Set(this.deleteHighlights.map(({ line }) => line));
+    },
     syntaxNameNormalized() {
       // `occ` is a legacy naming convention
       const fallbackMap = { occ: Language.objectiveC.key.url };
@@ -101,6 +115,9 @@ export default {
     isHighlighted(index) {
       return this.highlightedLineNumbers.has(this.lineNumberFor(index));
     },
+    isDeleteHighlighted(index) {
+      return this.deleteHighlightedLineNumbers.has(this.lineNumberFor(index));
+    },
     // Returns the line number for the line at the given index in `content`.
     lineNumberFor(index) {
       return this.startLineNumber + index;
@@ -152,6 +169,16 @@ export default {
   }
 }
 
+.deleteHighlighted {
+  text-decoration-line: line-through;
+  background: var(--line-delete-highlight, var(--color-code-line-delete-highlight));
+  border-left: $highlighted-border-width solid var(--color-code-line-delete-highlight-border);
+
+  .code-number {
+    padding-left: $code-number-padding-left - $highlighted-border-width;
+  }
+}
+
 pre {
   padding: $code-listing-with-numbers-padding;
   display: flex;

src/components/Tutorial/CodePreview.vue

@@ -12,6 +12,7 @@
   <div :class="['code-preview', { ide: isTargetIDE }]">
     <CodeTheme>
       <CodeListing v-if="code" v-bind="codeProps" showLineNumbers />
+      <CodeListing v-if="lastCode" v-bind="lastCodeProps" showLineNumbers isLastCodeListing />
     </CodeTheme>
     <div
       class="runtime-preview"
@@ -89,6 +90,10 @@ export default {
       type: String,
       required: true,
     },
+    lastCode: {
+      type: String,
+      required: false,
+    },
     preview: {
       type: String,
       required: false,
@@ -157,6 +162,11 @@ export default {
     codeProps() {
       return this.references[this.code];
     },
+    lastCodeProps() {
+      const ref = this.references[this.lastCode];
+      ref.deleteHighlights = this.codeProps.deleteHighlights;
+      return ref;
+    },
     runtimePreviewClasses() {
       return {
         collapsed: !this.shouldDisplayHideLabel,

src/components/Tutorial/CodeTheme.vue

@@ -84,6 +84,7 @@ export default {
         '--text': codeColors.text,
         '--background': codeColors.background,
         '--line-highlight': codeColors.lineHighlight,
+        '--line-delete-highlight': codeColors.lineDeleteHighlight,
         '--url': codeColors.commentURL,
         '--syntax-comment': codeColors.comment,
         '--syntax-quote': codeColors.comment,

src/components/Tutorial/SectionSteps.vue

@@ -44,6 +44,7 @@
         <CodePreview
           v-if="visibleAsset.code"
           :code="visibleAsset.code"
+          :lastCode="visibleAsset.lastCode"
           :preview="visibleAsset.runtimePreview"
           :isRuntimePreviewVisible="isRuntimePreviewVisible"
           @runtime-preview-toggle="onRuntimePreviewToggle"
@@ -99,11 +100,13 @@ export default {
       runtimePreview,
     } = this.content[firstStepIndex] || {};
 
+    const lastCode = '';
     return {
       tutorialState: this.store.state,
       visibleAsset: {
         media,
         code,
+        lastCode,
         runtimePreview,
       },
       activeStep: firstStepIndex,
@@ -190,9 +193,17 @@ export default {
         runtimePreview,
       } = this.content[key];
 
+      let lastCode;
+      if (key > 0) {
+        lastCode = this.content[key - 1].code;
+      } else {
+        lastCode = '';
+      }
+
       this.activeStep = key;
       this.visibleAsset = {
         code,
+        lastCode,
         media,
         runtimePreview,
       };

src/styles/core/colors/_dark.scss

@@ -36,6 +36,7 @@
   --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-code-line-delete-highlight: #{change-color(dark-color(figure-red), $alpha: 0.08)};
   --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

@@ -76,6 +76,8 @@
   --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-code-line-delete-highlight: #{change-color(light-color(figure-red), $alpha: 0.08)};
+  --color-code-line-delete-highlight-border: var(--color-figure-red);
   --color-code-plain: var(--color-figure-gray);
   --color-dropdown-background: #{transparentize(light-color(fill), 0.2)};
   --color-dropdown-border: #{light-color(fill-gray)};