Difficulty to show the content on preview

[M4rdine]

I want to use this library in a scenario where in an environment x you create content with tiptap, and in another environment it is possible to view the created content.

But I have the following problems:

1- In the same environment x, I cannot view the content created at this exact moment in a preview, it is as if the content that is being generated does not come with the same css that is in tiptap.

2- In environment y it is also not the same as the content created in environment x, the css is not following, maybe I have to call a different class? Maybe it is because I am using this in Next? I do not know, any light?

https://github.com/M4rdine/reactjs-tip-tap-preview => Project with the problem

https://drive.google.com/file/d/1FBrOR4Y03FLJYglV08P3B1RWfwLHzBRB/view?usp=drive_link => Video showing the problem

[M4rdine]

In the demo, for example, if you try to show a preview with this generated code, how would you do that?

[hunghg255]

you need to import CSS, and some extensions need to integrate with 3rd library (exclaudraw, mermaid,...)

[M4rdine]

which css? I'm importing these packages here:

import 'reactjs-tiptap-editor/style.css'
import 'katex/dist/katex.min.css'

This is what I found in the documentation. Where can I find the information about the missing CSS?

Another thing, am I doing it the right way to display the content? I saw in other open issues a recommendation to do something similar to this:

const Tiptap = () => {
  const editor = useEditor({
    extensions: [StarterKit],
    content: "<p>Hello World! 🌎️</p>",
    editable: false,
  });

  return <EditorContent editor={editor} />;
};

[hunghg255]

import 'reactjs-tiptap-editor/style.css'
import 'katex/dist/katex.min.css'

yes this one

[M4rdine]

dont work :/

i update the mini repo with this import

[M4rdine]

Im trying to add a pull request to your project with the same context, replicating the preview attempt in the playground to show that the preview there would also be inconsistent with what is shown in the editor but i dont have permission, if you want i can clone this on my github and send for you here, or, just add the code above on your project...

[M4rdine]

Hi, I decided to create my own tiptap editor and it seems to be working. Do you have any idea about my bug?
If not, I think enabling read-only mode in your tiptap editor might be a way. ( maybe, i dont have idea what are wrong on my code )
Do you want help with this?

[hunghg255]

Hi, I decided to create my own tiptap editor and it seems to be working. Do you have any idea about my bug? If not, I think enabling read-only mode in your tiptap editor might be a way. ( maybe, i dont have idea what are wrong on my code ) Do you want help with this?

use dangerouslySetInnerHTML It will not show exactly a few content, If you display content HTML like Editor need to write a component to Preview(complex component to handle view content from output tiptap editor like html/json), or use the component editor itself with Read Only as an option