search

dasmikko / strapi-tiptap-editor

A drop-in replacement for the strapi editor
MIT License
64 stars 29 forks source link

Saving as JSON format #46

Closed m7rlin closed 1 year ago

m7rlin commented 2 years ago

It will be nice to save the data as JSON. You could e.g. add on boolean field "Save as JSON". image

SalahAdDin commented 2 years ago

@m7rlin Wait a minute, what is it saving right now?

@dasmikko As a possible EditorJS user, having the possibility to save the data as JSON is a must since it makes it easy to handle its rendering in the frontend.

Even more, handling raw HTML in React is a very insecure practice, so, it is better if all the data is managed as JSON.

m7rlin commented 2 years ago

@SalahAdDin Data is saved in the database as HTML.

SalahAdDin commented 2 years ago

@SalahAdDin Data is saved in the database as HTML.

Where is it saved as HTML?

m7rlin commented 2 years ago

in MySQL

dasmikko commented 2 years ago

@SalahAdDin i don't see how it should be more insecure? It's only bad, if you don't control what kind of html is entered in your database. And in this case you have full control over it.

I could make a setting so it will save it as JSON in the database.

But honestly I think saving it as html is easier, as you don't have to write your own custom JSON to html parser/renderer. I can see it making sense if your frontend is a mobile app or something else, but for web frontend, it shouldn't be an issue.

SalahAdDin commented 2 years ago

This is what React's official documentation says about it. Just saying.

That's one of the reasons the current editor outputs markdown: it is more secure and there are a lot of packages for parsing it to HTML.

I was also thinking of helping with this option if you want.

m7rlin commented 2 years ago

@SalahAdDin You can still render the saved HTML content on frontend with TipTap instance. So you will have your own schema and the rest of unwanted HTML will be ignored.

SalahAdDin commented 2 years ago

@SalahAdDin You can still render the saved HTML content on the front end with the TipTap instance. So you will have your own schema and the rest of the unwanted HTML will be ignored.

What if I want to render it with custom components, let's say, for instance, the NextJS optimized built-in image? Or code with syntax highlighter(using another react library)?

In this case, we would require to parse this HTML to another thing prior to using it with our custom components.

m7rlin commented 2 years ago

You will have to create an instance of TipTap in your frontend as here https://tiptap.dev/introduction.

SalahAdDin commented 2 years ago

You will have to create an instance of TipTap in your frontend as here https://tiptap.dev/introduction.

Why should we have to do it?

In Strapi, save data as JSON, in frontend, parse this JSON using your custom components.

That's all.

SalahAdDin commented 1 year ago

@dasmikko so man, how is this going on? how can we help you with this?

dasmikko commented 1 year ago

PR's are more than welcome. I'm currently busy with other work related stuff and projects.

SalahAdDin commented 1 year ago

PR's are more than welcome. I'm currently busy with other work related stuff and projects.

where do you convert it to html? or, where do you save the data?

markhughes commented 1 year ago

If this is done, I would strongly recommend it has a configuration option :)

@SalahAdDin you can see it here:

https://github.com/dasmikko/strapi-tiptap-editor/blob/22b83f34f37e1a3d530600aed49bc034926a1a28/admin/src/components/Wysiwyg/index.js#L208

You will want to call getJSON() instead: https://tiptap.dev/guide/output#option-1-json

SalahAdDin commented 1 year ago

If this is done, I would strongly recommend it has a configuration option :)

@SalahAdDin you can see it here:

https://github.com/dasmikko/strapi-tiptap-editor/blob/22b83f34f37e1a3d530600aed49bc034926a1a28/admin/src/components/Wysiwyg/index.js#L208

You will want to call getJSON() instead: https://tiptap.dev/guide/output#option-1-json

This is pretty nice, I will check it and try to make a pull request, thanks!!!

dasmikko commented 1 year ago

I have made a Save as JSON toggle now.

It will save the content as stringified json object, as Strapi expects the WYSIWYG content to be a string.

You will have to re-save all pages for the content to be changed to JSON. You will still be able to edit the page content if you toggle the setting on or off.

This with be available in the next release.

dasmikko commented 1 year ago

Fixed in 0.9.7

SalahAdDin commented 1 year ago

@dasmikko Are the settings exposed to the public? I mean, so the developer can override the default settings. It could be a new future for the plugin.

Migrating it to Typescript is also in my plans.

dasmikko commented 1 year ago

@SalahAdDin yup. There is a settings page inside strapi. There you can configure many parts of the editor.

SalahAdDin commented 1 year ago

@SalahAdDin yup. There is a settings page inside strapi. There you can configure many parts of the editor.

But not by Strapi, by the configuration settings in the plugins file.

dasmikko commented 1 year ago

Oh, in that sense. Currently the plugin is configured completely inside the strapi dashboard. It could absolutely be a feature in the future.

SalahAdDin commented 1 year ago

Oh, in that sense. Currently, the plugin is configured completely inside the Strapi dashboard. It could absolutely be a feature in the future.

Ok, cool! It is on the list then.