Help Wanted : Need better understanding on wrappers

[gethari]

Hi @sibiraj-s , First of all thanks for this amazing lib 👍 . I am trying to create a code-block extension similar to Gitlab.

Here's the structure that they have

• code_block_highlight ( extended code for the official tiptap's codeblock lowlight extension )
• They have a code_block_wrapper Wrapper

Now I am trying to replicate the same in Angular and when I add the addNodeView() along with my code-block.component, I do'nt seem to understand how to get the HTML output that the extension is outputting.

If I use the tiptapNodeViewContent directive on my wrapper component, I do not get the pre / code tags that are rendered by the extension , I'd rather need to write like the below on my component.

<pre><code tiptapNodeViewContent></code></pre>

How to make this block seem to reflect in the wrapper

 renderHTML({ HTMLAttributes }) {
    return [
      "pre",
      {
        ...HTMLAttributes,
        class: `${HTMLAttributes.class}`,
      },
      ["code", {}, 0],
    ];
  },

When we look at the Gitlab wrapper they do something like this

<node-view-content ref="nodeViewContent" as="code" />

Could you please let us know if my understanding is right ? Many thanks in advance

[sibiraj-s]

Did you see the code at https://github.com/sibiraj-s/ngx-tiptap/tree/master/projects/demo? Try running the project locally. Two custom angular components are implemented using NodeViews.

Steps to run the project locally

clone
npm i
npm run dev
npm run demo

Lets me know if that doesn't solve your problem. I'll try to help further. Also try adding a minimal stackblitz of what you have tried to better/quickly solve the problem

[gethari]

Hi @sibiraj-s did you get chance to look into this.
Apologies for inconvenience.
Have a great weekend and Happy Independence Day 🇮🇳

[sibiraj-s]

Hi. I am seeing your stackblitz now and it appears to be working as expected. did you figure it out? and just the last comment is still a mystery?

[sibiraj-s]

I think I get your problem.

and now if we look at the Input passed from Gitlab's Wrapper, this is responsible for creating the DOM element ( from the extension) on top of the component that we write.

node-view-wrapper is nothing but a div with some attributes for the NodeViewRenderer to identify. Nothing else. And the polymorphism in the component is implemented using the as prop.

I am clearly missing some understanding here.

When I was writing this package, unlike other frameworks, it was not straightforward to implement the similar api in angular or at-least I could not figure it out at the moment. Hence a directive tiptapNodeViewContent is made to replace the node-view-wrapper. And for the as prop, since this is a directive you could add on any HTML element, you might not need the as prop. You could just write the tag and use the directive on it.

And for the answer (I guess):

In other frameworks on how the API is authored, there is a wrapper component It creates a div tag (or a different component via the as prop) and when used Tiptap renders the content inside it. Here, you will have to create the tag yourself and add the directive and the content will be rendered inside it

[gethari]

And for the answer (I guess):

Thank you so much for your response. This is what I wanted to know. Appreciate it.

[sibiraj-s]

Glad that helped 👍