improve content preview UX

Juraci · Jul 26, 2024 · d87c15c · d87c15c
1 parent 7f8fbaa
commit d87c15c
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 7 deletions.
diff --git 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
@@ -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);