How to create a viewer to display HTML rendering from JSON while using the extension system with Angular components?

[GitHubish]

My question is I think not obvious. I tried to create a dedicated component to display the content generated by the editor. The component receives the JSON previously extracted by the editor which has been saved in the database. This component allows to display the HTML rendering according to the JSON. So I used the generateHTML() method of tiptap/html by passing it the model and the schema according to the extensions. But it doesn't allow me to display my nodeviews which use an Angular component. Do you have an idea? I think adding a viewer to display this rendering would be very useful for Ngx-Tiptap. I had this system when I was using Ngx-Quill.

const extensions = [
      Document,
      Dropcursor,
      Gapcursor,
      History,
      Text,
      HardBreak,
      Paragraph
];

const schema = getSchema(extensions);
const html = generateHTML(this.content, extensions);

this.elementRef.nativeElement.innerHTML = html;

[sibiraj-s]

A Shallow Explanation: When you provide custom components, we parse it and render it as component and insert into the view. In your case when inject the HTML string into the DOM, you will need to handle that.

One of the thing that comes to my mind right away when rendering html is CustomElements. You can define a custom element as found in the HTML and wire that to render your angular component.

See. https://angular.io/guide/elements.

Since this is not an issue with ngx-tiptap, I am moving to discussion. Feel free to continue the thread.

[GitHubish]

@sibiraj-s I couldn't do it. Normally I thought that the addNodeView() method should be called when the mention is created which would then call my Angular component

How inspiring and equally feasible can this be with your implementation of Tiptap and AngularExtensions?
editor-preview.component.ts