adding support for markdown

cypress/e2e/nodes_spec.cy.js

@@ -181,14 +181,12 @@ describe('Solution Navigator', () => {
       },
     });
 
-    cy.intercept('/node_modules/primeicons/fonts/primeicons*').as('primeicons');
-    cy.wait('@primeicons', { requestTimeout: 10000, responseTimeout: 10000 });
-
+    cy.waitForPrimevue();
     cy.get('[data-test-child-node-item]').eq(1).as('childNode');
     cy.get('@childNode').realMouseWheel({ deltaY: 200 });
     cy.get('@childNode').realHover();
 
-    cy.get('[data-test-content-preview]').should('have.text', 'my content level 1');
+    cy.get('[data-test-content-preview]').contains('my content level 1');
   });
 
   context('when the node does not exist', () => {
@@ -211,6 +209,7 @@ describe('Solution Navigator', () => {
         },
       });
 
+      cy.waitForPrimevue();
       cy.get('[data-test-child-node-item]').should('have.length', 1);
     });
   });

cypress/support/commands.js

@@ -23,3 +23,8 @@
 //
 // -- This will overwrite an existing command --
 // Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
+
+Cypress.Commands.add('waitForPrimevue', () => {
+  cy.intercept('/node_modules/primeicons/fonts/primeicons*').as('primeicons');
+  cy.wait('@primeicons', { requestTimeout: 10000, responseTimeout: 10000 });
+});

package.json

@@ -19,6 +19,7 @@
   },
   "dependencies": {
     "@primevue/themes": "^4.0.1",
+    "markdown-it": "^14.1.0",
     "pinia": "^2.1.7",
     "pinia-plugin-persistedstate": "^3.2.1",
     "primeicons": "^7.0.0",
@@ -30,6 +31,7 @@
   "devDependencies": {
     "@pinia/testing": "^0.1.3",
     "@rushstack/eslint-patch": "^1.10.3",
+    "@types/markdown-it": "^14.1.1",
     "@vitejs/plugin-vue": "^5.0.5",
     "@vitejs/plugin-vue-jsx": "^4.0.0",
     "@vue/eslint-config-prettier": "^9.0.0",

src/components/ChildNode.vue

@@ -1,4 +1,5 @@
 <script setup>
+import markdownit from 'markdown-it';
 import { ref, watch, computed } from 'vue';
 import Button from 'primevue/button';
 import Checkbox from 'primevue/checkbox';
@@ -34,6 +35,7 @@ const {
 const editing = ref(false);
 const nodeTitle = ref('');
 const contentPreview = ref(null);
+const md = markdownit({ linkify: true });
 
 const node = findNode(props.nodeUuid);
 if (!node) {
@@ -141,9 +143,7 @@ const hideContentPreview = (event) => {
     </Chip>
   </div>
   <Popover ref="contentPreview" data-test-content-preview>
-    <div class="content-preview">
-      <p>{{ node.content }}</p>
-    </div>
+    <div class="content-preview" v-html="md.render(node.content)"></div>
   </Popover>
   <ChildNode
     v-for="childNodeUuid in childNodes"

src/views/NodeShow.vue

@@ -1,4 +1,5 @@
 <script setup>
+import markdownit from 'markdown-it';
 import Button from 'primevue/button';
 import { ref, watch, computed } from 'vue';
 import InputText from 'primevue/inputtext';
@@ -23,6 +24,7 @@ const titlePlaceHolder = ref('add a title...');
 const nodeTitle = ref('');
 const nodeContent = ref('');
 const contentPlaceholder = ref('double click to add content or edit it...');
+const md = markdownit({ linkify: true });
 
 const node = findNode(props.nodeUuid);
 
@@ -99,9 +101,13 @@ const handleAddChildNode = () => {
         @focusout="editingContent = false"
         @keydown.esc="editingContent = false"
       />
-      <div v-else data-test-node-content class="final-content" @dblclick="editingContent = true">
-        {{ node.content || contentPlaceholder }}
-      </div>
+      <div
+        v-else
+        data-test-node-content
+        class="final-content"
+        @dblclick="editingContent = true"
+        v-html="md.render(node.content) || contentPlaceholder"
+      ></div>
       <Divider />
       <div class="child-nodes-actions">
         <Button