question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Custom view/vue component for marks

See original GitHub issue

I’ve gone through the documentation and unless I’ve misunderstood something, there are no supported methods for custom views for marks like the 1.0 method:

export default class Something extends Mark {
   get view() {
      return CustomVueComponent;
   }
}

I’ve also taken a look at the mention extension as a guide for inline nodes but I’m still unsure how to move forward in terms of basic functionality like toggling, component state, and so on.

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Comments:9 (3 by maintainers)

github_iconTop GitHub Comments

4reactions
iamdhrooovcommented, Nov 8, 2021

Was there a solution to this? Need to render a custom component on the Link mark. Should I create a new Node with Link features?

4reactions
philippkuehncommented, Jan 29, 2021

you could start with something like that:

const CustomNode = Node.create({
  name: 'customNode',
  group: 'inline',
  inline: true,
  content: 'text*',
  // ...
})
Read more comments on GitHub >

github_iconTop Results From Across the Web

Jinjiang/vue-mark-display: A Vue Component for Markdown ...
If you want to customize other styles in the component, please be careful. Because they are not guaranteed which means they may be...
Read more >
Creating our first Vue component - Learn web development
Now it's time to dive deeper into Vue, and create our own custom component — we'll start by creating a component to represent...
Read more >
Node views with Vue – Tiptap Editor
Node views with Vue. Introduction; Render a Vue component; Access node attributes; Update node attributes; Adding a content editable; All available props.
Read more >
Watchers | Vue.js
Deep Watchers # ... Deep watch requires traversing all nested properties in the watched object, and can be expensive when used on large...
Read more >
How To Use Built-In and Custom Directives in Vue.js
Vue.js comes pre-packaged with a number of directives that developers commonly use when working within the framework. Directives such as v-if , ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found