add tests and fix htmlization of templates

vue-styleguidist · Aug 31, 2022 · 064f334 · 064f334
1 parent a47cbb9
commit 064f334
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 2 deletions.
diff --git a/.changeset/dry-eyes-develop.md b/.changeset/dry-eyes-develop.md
@@ -0,0 +1,5 @@
+---
+'vue-styleguidist': patch
+---
+
+fix editor highlight on sfc components
diff --git a/packages/vue-styleguidist/src/client/rsg-components/VsgEditor/EditorPrism.cy.tsx b/packages/vue-styleguidist/src/client/rsg-components/VsgEditor/EditorPrism.cy.tsx
@@ -67,4 +67,46 @@ function foo(param: Vue) : { one: number, two: boolean } {
 			</Provider>
 		)
 	})
+
+  it('renders vue SFC with Self-closing tag', () => {
+		const code = `
+<template>
+  <Checkbox />
+</template>
+<script lang="ts">
+import type { Vue } from 'vue'
+
+function foo(param: Vue) : { one: number, two: boolean } {
+  return 'bar'
+}
+</script>
+    `
+		mount(
+			<Provider jsxInExamples>
+				<EditorPrism code={code} onChange={() => {}} />
+			</Provider>
+		)
+
+    cy.contains('.token.tag', 'Checkbox').should('be.visible')
+	})
+
+  it('renders vue SFC with style scoped tag', () => {
+		const code = `
+<template>
+  <Checkbox />
+</template>
+<style scoped>
+  .checkbox {
+    color: red;
+  }
+</script>
+    `
+		mount(
+			<Provider jsxInExamples>
+				<EditorPrism code={code} onChange={() => {}} />
+			</Provider>
+		)
+
+    cy.contains('.token.tag', 'Checkbox').should('be.visible')
+	})
 })
diff --git a/packages/vue-styleguidist/src/client/rsg-components/VsgEditor/EditorPrism.tsx b/packages/vue-styleguidist/src/client/rsg-components/VsgEditor/EditorPrism.tsx
@@ -44,7 +44,7 @@ const highlight = (lang: 'vsg' | 'vue-sfc', jsxInExamples: boolean): ((code: str
 
 		return code => {
 			const parser = new DOMParser()
-			const SfcXMLDocument = parser.parseFromString(`<body>${code}</body>`, 'text/html')
+			const SfcXMLDocument = parser.parseFromString(`<body>${code}</body>`, 'text/xml')
 			const scriptNodes = SfcXMLDocument.querySelectorAll('script')
 			const scriptBlocks: { text: string; lg: string }[] = []
 			scriptNodes.forEach(scriptNode => {
@@ -55,7 +55,7 @@ const highlight = (lang: 'vsg' | 'vue-sfc', jsxInExamples: boolean): ((code: str
         }
 				scriptNode.textContent = ' '
 			})
-			const htmlHighlighted = prismHighlight(SfcXMLDocument.body.innerHTML, langScheme, 'html')
+			const htmlHighlighted = prismHighlight(SfcXMLDocument.documentElement.innerHTML, langScheme, 'html')
 			return htmlHighlighted.replace(/<span class="token language-javascript"> <\/span>/g, () => {
 				const scriptBlock = scriptBlocks.shift()
 				if (scriptBlock) {