Tiptap editor draft #66

dz4k commented 2025年10月19日 09:03:58 +02:00

Add a rich-text field type.

Rich text fields display a Tiptap editor and are saved as HTML.

TODO:

• vendor Tiptap library
• make it look good
• clean up code (I made this by copying the markdown impl, so there's a lot of dead code right now)

Add a `rich-text` field type. Rich text fields display a Tiptap editor and are saved as HTML. TODO: - [ ] vendor Tiptap library - [ ] make it look good - [ ] clean up code (I made this by copying the markdown impl, so there's a lot of dead code right now)

oscarotero commented 2025年10月19日 12:49:30 +02:00

I just tested it and it's really great! I love the integration with markdown syntax.

• For styling, I think you can duplicate code.css to rich-text.css and change the class names to (.tiptap instead of .cm-editor).
• Can we apply tags not available in the toolbar? Like <code> or <dl>, for example. Maybe there should be be a way to see and edit the code directly?

I just tested it and it's really great! I love the integration with markdown syntax. - For styling, I think you can duplicate `code.css` to `rich-text.css` and change the class names to (`.tiptap` instead of `.cm-editor`). - Can we apply tags not available in the toolbar? Like `<code>` or `<dl>`, for example. Maybe there should be be a way to see and edit the code directly?

dz4k commented 2025年10月19日 13:35:52 +02:00

Yeah, I'll get to styling now.

Editing HTML code could be possible, but a bit of work (Tiptap has its own content model separate from HTML, but it gives us functions to convert back and forth).

For <code>, you can use backticks, and we can add a button for it as well. Unfortunately I don't see a way to do <dl>.

Yeah, I'll get to styling now. Editing HTML code could be possible, but a bit of work (Tiptap has its own content model separate from HTML, but it gives us functions to convert back and forth). For `<code>`, you can use backticks, and we can add a button for it as well. Unfortunately I don't see a way to do `<dl>`.

oscarotero commented 2025年10月20日 01:11:59 +02:00

Oh, I didn't realized markdown you can write directly markdown and it's converted automatically to HTML. That's fantastic.

Would be possible to add images? In markdown, images and other media elements are detected automatically on paste urls using this function.

Is it possible to have something similar here? Ideally, a dialog to add the source and alt would be great, but we can start with something simpler.

Oh, I didn't realized markdown you can write directly markdown and it's converted automatically to HTML. That's fantastic. Would be possible to add images? In markdown, images and other media elements are detected automatically on paste urls [using this function](https://github.com/lumeland/cms/blob/main/static/components/f-markdown.js#L170). Is it possible to have something similar here? Ideally, a dialog to add the source and alt would be great, but we can start with something simpler.

oscarotero commented 2025年10月25日 17:21:18 +02:00

Hi. I tried to test your latest changes but it fails in my local because the markup_util.js file is not found.
Let me know if you have any question or need some help.

Hi. I tried to test your latest changes but it fails in my local because the `markup_util.js` file is not found. Let me know if you have any question or need some help.

dz4k commented 2025年10月25日 20:16:59 +02:00

I couldn't figure out the library build setup. markup_util.js is in scripts/

I couldn't figure out the library build setup. markup_util.js is in scripts/

oscarotero commented 2025年11月11日 00:37:40 +01:00

Hi!
Just to clarify: are you still working on this? If you are, there's no rush, I just want to know.
I'm asking because if you can't continue, I could.

Hi! Just to clarify: are you still working on this? If you are, there's no rush, I just want to know. I'm asking because if you can't continue, I could.

dz4k commented 2025年11月11日 14:37:15 +01:00

Hi, sorry about that, I had to leave this for a while.

I haven't figured out how to implement full snippet support, if that's not needed then I think this is ready

Hi, sorry about that, I had to leave this for a while. I haven't figured out how to implement full snippet support, if that's not needed then I think this is ready

oscarotero commented 2025年11月11日 17:55:08 +01:00

I think we can skip snippets for now.
Thank you!

I think we can skip snippets for now. Thank you!