search

N00ts / vue3-treeview

a simple treeview in vue js 3
MIT License
73 stars 65 forks source link

Feature request: HTML parsing a node #6

Closed GoProduction closed 2 years ago

GoProduction commented 2 years ago

Hey there! I love this tree-view package you've created! It's sophisticated, yet very simple to use.

An idea that crossed my mind is the ability to enable HTML parsing within a node. You could create a config property that could be set to true, such as: parseHTML: true , and then inside of the TreeNode.vue component, you could use v-html conditionally based on the config value. Something like this could work:

<div v-else class="node-text"
     @dblclick="focusInput">
     <span v-if="parseHTML" v-html="text"></span>
     <span v-else>{{ text }}</span>
</div>
N00ts commented 2 years ago

Hey thank you for considering my component. I'm completely open to enhancements. What do you exactly have in mind ? What is your usecase ? I think you can do it in "slots" (before - after), be carefull to xss attacks !

GoProduction commented 2 years ago

Ah, yes that actually is perfect for my use case, thank you!

For context, the tree-view will be used as a Table of Contents for a document editor. When the editor is loaded, an imported word document is converted into a readable JSON file, where the sections are loaded into the tree view. We essentially needed to separate the section number and title to format them differently. XSS attacks wouldn't be an issue since the user has no control over the content being imported.

However, since you have implemented named slots before and after the node text, it allows me to do just that. Thanks a lot for your help!