#2490: Sills Display - properly theme headers in the markdown

dashboard-prime/src/skills-display/theme/ThemeHelper.js

@@ -91,6 +91,12 @@ export default {
         'body #app .sd-theme-home .p-datatable .p-datatable-thead > tr > th,' +
         'body #app .sd-theme-home .p-paginator.p-component .p-paginator-element.p-link,' +
         'body #app .sd-theme-home .toastui-editor-contents p,' +
+        'body #app .sd-theme-home .toastui-editor-contents h1,' +
+        'body #app .sd-theme-home .toastui-editor-contents h2,' +
+        'body #app .sd-theme-home .toastui-editor-contents h3,' +
+        'body #app .sd-theme-home .toastui-editor-contents h4,' +
+        'body #app .sd-theme-home .toastui-editor-contents h5,' +
+        'body #app .sd-theme-home .toastui-editor-contents h6,' +
         'body #app .sd-theme-home .toastui-editor-tabs .tab-item,' +
         'body #app .sd-theme-home .toastui-editor-popup label,' +
         'body #app .sd-theme-home .p-chip.p-component,' +
@@ -181,6 +187,7 @@ export default {
           '.p-overlaypanel-content .p-panelmenu .p-panelmenu-content .p-menuitem-link:hover,' +
           '.p-overlaypanel-content .p-panelmenu .p-panelmenu-content .p-avatar-icon,' +
           'body #app .sd-theme-home .fa-stack .fa-stack-1x.fa-inverse,' +
+          'body #app .sd-theme-home .toastui-editor-contents pre code,' +
           'body #app .sd-theme-home .toastui-editor-popup [data-type="Heading"]:hover,' +
           'body #app .sd-theme-home .toastui-editor-popup .drop-down .drop-down-item:hover',
         styleName: 'color'

e2e-tests/cypress/e2e/client-display/client-display-theme-components_spec.js

@@ -474,5 +474,73 @@ describe('Client Display Theme Components Tests', () => {
     })
   })
 
+  it('markdown display foreground color', () => {
+    const markdown = '# Title1\n## Title2\n### Title 3\n#### Title 4\n##### Title 5\nTitle 6\n\n' +
+      '---\n' +
+      '# Emphasis\n' +
+      'italics: *italicized* or _italicized_\n\n' +
+      'bold: **bolded** or __bolded__\n\n' +
+      'combination **_bolded & italicized_**\n\n' +
+      'strikethrough: ~~struck~~\n\n' +
+      '---\n' +
+      '# Inline\n' +
+      'Inline `code` has `back-ticks around` it\n\n' +
+      '---\n' +
+      '# Multiline\n' +
+      '\n' +
+      '\n' +
+      '```\n' +
+      'import { SkillsDirective } from \'@skilltree/skills-client-vue\';\n' +
+      'Vue.use(SkillsDirective);\n' +
+      '```\n' +
+      '# Lists\n' +
+      'Ordered Lists:\n' +
+      '1. Item one\n' +
+      '1. Item two\n' +
+      '1. Item three (actual number does not matter)\n\n' +
+      'If List item has multiple lines of text, subsequent lines must be idented four spaces, otherwise list item numbers will reset, e.g.,\n' +
+      '1. item one\n' +
+      '    paragrah one\n' +
+      '1. item two\n' +
+      '1. item three\n' +
+      '\n' +
+      'Unordered Lists\n' +
+      '* Item\n' +
+      '* Item\n' +
+      '* Item\n' +
+      '___\n' +
+      '# Links\n' +
+      '[in line link](https://www.somewebsite.com)\n' +
+      '___\n' +
+      '# Blockquotes\n' +
+      '> Blockquotes are very handy to emulate reply text.\n' +
+      '> This line is part of the same quote.\n\n' +
+      '# Horizontal rule\n' +
+      'Use three or more dashes, asterisks, or underscores to generate a horizontal rule line\n' +
+      '\n' +
+      'Separate me\n\n' +
+      '___\n\n' +
+      'Separate me\n\n' +
+      '---\n\n' +
+      'Separate me\n\n' +
+      '***\n\n'
+
+    cy.createSkill(1, 1, 5, {description: markdown })
+
+    const tiles = JSON.stringify( {
+      backgroundColor:encodeURIComponent('#152E4d')
+    })
+    const url = `/subjects/subj1/skills/skill5?themeParam=tiles|${tiles}&themeParam=textPrimaryColor|white}`
+    cy.cdVisit(url)
+
+    cy.get('[data-cy="pointsPerOccurrenceCard"] [data-cy="mediaInfoCardTitle"]').should('have.text', '100 Increment')
+    cy.wait(4000)
+    cy.matchSnapshotImageForElement('#toastuiViewer-skillDescription-skill5', {
+      errorThreshold: 0.05
+    })
+  })
+
+
+
 })