feat(ui): support markdown in AnnotatedText - WF-169

src/ui/src/components/core/base/BaseMarkdown.vue

@@ -1,13 +1,14 @@
 <template>
-	<div
+	<BaseMarkdownRaw
 		v-if="isMarkedLoaded"
-		v-dompurify-html="marked.parse(props.rawText).trim()"
-		class="BaseMarkdown markdown"
-	></div>
+		:raw-markdown="String(marked.parse(props.rawText)).trim()"
+		class="BaseMarkdown"
+	></BaseMarkdownRaw>
 </template>
 
 <script setup lang="ts">
 import { onBeforeMount, ref } from "vue";
+import BaseMarkdownRaw from "./BaseMarkdownRaw.vue";
 
 let marked: typeof import("marked");
 const isMarkedLoaded = ref(false);
@@ -21,89 +22,3 @@ onBeforeMount(async () => {
 	isMarkedLoaded.value = true;
 });
 </script>
-
-<style scoped>
-.markdown {
-	font-size: 0.875rem;
-}
-
-.markdown:deep() h1,
-.markdown:deep() h2,
-.markdown:deep() h3,
-.markdown:deep() h4 {
-	margin: 0;
-	color: var(--primaryTextColor);
-}
-
-.markdown:deep() h1 {
-	font-size: 1.5rem;
-	letter-spacing: 0.1875rem;
-	font-weight: 600;
-	line-height: 162.5%;
-}
-
-.markdown:deep() h2 {
-	font-size: 1.5rem;
-	font-weight: 500;
-	line-height: 120%;
-}
-
-.markdown:deep() h3 {
-	font-size: 1.25rem;
-	font-weight: 500;
-	line-height: 120%;
-}
-
-.markdown:deep() h4 {
-	font-weight: 700;
-	font-size: 1rem;
-	line-height: 247.5%;
-}
-
-.markdown:deep() ul,
-.markdown:deep() ol {
-	padding: 0;
-	padding-inline-start: 0;
-	margin-block-start: 0;
-}
-
-.markdown:deep() li {
-	margin: 0 0 0 32px;
-}
-
-.markdown:deep() hr {
-	border: none;
-	border-top: 1px solid var(--separatorColor);
-}
-
-.markdown:deep() pre {
-	background-color: var(--separatorColor);
-	font-family: monospace;
-	padding: 8px;
-}
-
-.markdown:deep() code {
-	background-color: var(--separatorColor);
-	font-family: monospace;
-	padding: 2px;
-}
-
-.markdown:deep() pre > code {
-	background-color: unset;
-}
-
-.markdown:deep() table {
-	border-collapse: collapse;
-}
-
-.markdown:deep() th {
-	padding: 8px;
-	background: var(--separatorColor);
-	border: 1px solid var(--separatorColor);
-}
-
-.markdown:deep() td {
-	padding: 8px;
-	border: 1px solid var(--separatorColor);
-}
-</style>

src/ui/src/components/core/base/BaseMarkdownRaw.vue

@@ -0,0 +1,100 @@
+<template>
+	<div v-dompurify-html="rawMarkdown" class="markdown"></div>
+</template>
+
+<script setup lang="ts">
+defineProps({
+	rawMarkdown: { type: String, required: true },
+});
+</script>
+
+<style scoped>
+.markdown {
+	font-size: 0.875rem;
+}
+
+.markdown:deep() h1,
+.markdown:deep() h2,
+.markdown:deep() h3,
+.markdown:deep() h4 {
+	margin: 0;
+	color: var(--primaryTextColor);
+}
+
+.markdown:deep() h1 {
+	font-size: 1.5rem;
+	letter-spacing: 0.1875rem;
+	font-weight: 600;
+	line-height: 162.5%;
+}
+
+.markdown:deep() h2 {
+	font-size: 1.5rem;
+	font-weight: 500;
+	line-height: 120%;
+}
+
+.markdown:deep() h3 {
+	font-size: 1.25rem;
+	font-weight: 500;
+	line-height: 120%;
+}
+
+.markdown:deep() h4 {
+	font-weight: 700;
+	font-size: 1rem;
+	line-height: 247.5%;
+}
+
+.markdown:deep() ul,
+.markdown:deep() ol {
+	padding: 0;
+	padding-inline-start: 0;
+	margin-block-start: 0;
+}
+
+.markdown:deep() li {
+	margin: 0 0 0 32px;
+}
+
+.markdown:deep() hr {
+	border: none;
+	border-top: 1px solid var(--separatorColor);
+}
+
+.markdown:deep() pre {
+	background-color: var(--separatorColor);
+	font-family: monospace;
+	padding: 8px;
+}
+
+.markdown:deep() code {
+	background-color: var(--separatorColor);
+	font-family: monospace;
+	padding: 2px;
+}
+
+.markdown:deep() pre > code {
+	background-color: unset;
+}
+
+.markdown:deep() table {
+	border-collapse: collapse;
+}
+
+.markdown:deep() th {
+	padding: 8px;
+	background: var(--separatorColor);
+	border: 1px solid var(--separatorColor);
+}
+
+.markdown:deep() td {
+	padding: 8px;
+	border: 1px solid var(--separatorColor);
+}
+
+.markdown:deep() blockquote {
+	padding: 8px;
+	border-left: 5px solid var(--separatorColor);
+}
+</style>

src/ui/src/components/core/content/CoreAnnotatedText.spec.ts

@@ -0,0 +1,91 @@
+import { describe, expect, it } from "vitest";
+import BaseMarkdownRaw from "../base/BaseMarkdownRaw.vue";
+import CoreAnnotatedText from "./CoreAnnotatedText.vue";
+import VueDOMPurifyHTML from "vue-dompurify-html";
+import injectionKeys from "@/injectionKeys";
+import { buildMockCore, mockProvides } from "@/tests/mocks";
+import { flushPromises, shallowMount } from "@vue/test-utils";
+import { ref } from "vue";
+import { WdsColor } from "@/wds/tokens";
+
+describe("CoreAnnotatedText", async () => {
+	const text = [
+		"# This\n\n",
+		["**is**", "Verb", "red"],
+		" some ",
+		["_annotated_", "Adjective"],
+		["text", "Noun"],
+		". ",
+		"## title 2\n\n",
+		"And [here](https://google.com)'s paragraph 2",
+	];
+
+	it("should render in non-markdown mode", async () => {
+		const { core } = buildMockCore();
+
+		const wrapper = shallowMount(CoreAnnotatedText, {
+			global: {
+				plugins: [VueDOMPurifyHTML],
+				provide: {
+					...mockProvides,
+					[injectionKeys.core as symbol]: core,
+					[injectionKeys.isBeingEdited as symbol]: ref(false),
+					[injectionKeys.evaluatedFields as symbol]: {
+						text: ref(text),
+						seed: ref(1),
+						useMarkdown: ref("no"),
+						rotateHue: ref("yes"),
+						referenceColor: ref(WdsColor.Blue5),
+						copyButtons: ref("yes"),
+					},
+				},
+			},
+		});
+
+		await flushPromises();
+
+		const annotations = wrapper.findAll(".CoreAnnotatedText__annotation");
+		expect(annotations).toHaveLength(text.filter(Array.isArray).length);
+
+		// should use the value provided
+		expect(annotations.at(0).attributes().style).toBe(
+			"background-color: red;",
+		);
+
+		// should generate the color
+		expect(annotations.at(1).attributes().style).toMatchInlineSnapshot(
+			`"background-color: rgb(180, 237, 238);"`,
+		);
+
+		expect(wrapper.element).toMatchSnapshot();
+	});
+
+	it("should render in markdown mode", async () => {
+		const { core } = buildMockCore();
+
+		const wrapper = shallowMount(CoreAnnotatedText, {
+			global: {
+				plugins: [VueDOMPurifyHTML],
+				provide: {
+					...mockProvides,
+					[injectionKeys.core as symbol]: core,
+					[injectionKeys.isBeingEdited as symbol]: ref(false),
+					[injectionKeys.evaluatedFields as symbol]: {
+						text: ref(text),
+						seed: ref(1),
+						useMarkdown: ref("yes"),
+						rotateHue: ref("yes"),
+						referenceColor: ref(WdsColor.Blue5),
+						copyButtons: ref("yes"),
+					},
+				},
+			},
+		});
+
+		await flushPromises();
+
+		expect(
+			wrapper.getComponent(BaseMarkdownRaw).props().rawMarkdown,
+		).toMatchSnapshot();
+	});
+});