sibiraj-s / ngx-tiptap

Angular bindings for tiptap v2
https://sibiraj-s.github.io/ngx-tiptap/
MIT License
126 stars 19 forks source link

[FEAT] How to create a viewer to display HTML rendering from JSON while using the extension system with Angular components? #12

Closed GitHubish closed 3 years ago

GitHubish commented 3 years ago

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 commented 3 years ago

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.