From d87c15ccbe0c28069d095b4a6356fd14f21ebe68 Mon Sep 17 00:00:00 2001
From: Juraci <juraci.vieira@gmail.com>
Date: Thu, 25 Jul 2024 21:58:36 -0300
Subject: [PATCH] improve content preview UX

---
 src/components/ChildNode.vue | 10 ++++------
 src/views/NodeShow.vue       |  2 +-
 2 files changed, 5 insertions(+), 7 deletions(-)

diff --git a/src/components/ChildNode.vue b/src/components/ChildNode.vue
index 5023881..7b21936 100644
--- a/src/components/ChildNode.vue
+++ b/src/components/ChildNode.vue
@@ -6,6 +6,7 @@ import Checkbox from 'primevue/checkbox';
 import Chip from 'primevue/chip';
 import InputText from 'primevue/inputtext';
 import Popover from 'primevue/popover';
+import ScrollPanel from 'primevue/scrollpanel';
 import { useNodeStore } from '@/stores/NodeStore';
 
 const props = defineProps({
@@ -81,7 +82,6 @@ const hideContentPreview = (event) => {
     :style="{ 'margin-left': level * 1 + 'rem' }"
     data-test-child-node-item
     @mouseenter="showContentPreview"
-    @mouseleave="hideContentPreview"
   >
     <span v-if="editing" class="inline-flex items-center gap-2">
       <InputText
@@ -139,7 +139,9 @@ const hideContentPreview = (event) => {
     </Chip>
   </div>
   <Popover ref="contentPreview" data-test-content-preview>
-    <div class="content-preview" v-html="md.render(node.content)"></div>
+    <ScrollPanel style="max-width: 40rem; max-height: 20rem">
+      <div class="content-preview" v-html="md.render(node.content)"></div>
+    </ScrollPanel>
   </Popover>
   <ChildNode
     v-for="childNodeUuid in childNodes"
@@ -164,9 +166,5 @@ const hideContentPreview = (event) => {
 }
 .content-preview {
   white-space: pre-wrap;
-  max-height: 20rem;
-  max-width: 40rem;
-  height: 100%;
-  overflow: hidden;
 }
 </style>
diff --git a/src/views/NodeShow.vue b/src/views/NodeShow.vue
index 0832418..c5b021e 100644
--- a/src/views/NodeShow.vue
+++ b/src/views/NodeShow.vue
@@ -25,7 +25,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 md = markdownit({ html: true, linkify: true, typographer: true });
 
 const node = findNode(props.nodeUuid);