How should I approach use of 'contenteditable' with VanJS?

[leaf-node]

I'm wondering if anyone has any ideas about how to track and apply changes to sections of the DOM that are marked as contenteditable with VanJS? This feature allow for users to edit rich text in their browser. I plan on using this feature with VanJS to create a real-time collaborative editing application.

Thanks for any help! 😄

[efpage]

VanJS tags return a DOM reference, this gives you full access. You can find an example on the DML example page of a markdown editor. DML has a similar approach to VanJS, so the examples should work with some small syntax changes.

You can use the .oninput-event to track user actions. Usually changing the DOM content is very fast, so even if you update the whole element, this takes virtually no time.

[leaf-node]

Thanks for the link. 😄

contenteditable is a bit different from a markdown editor though, because with the latter, there are two views, one with text that is being typed out, and another that renders the markup language. With contenteditable, one directly edits the rich text, and is based on an an HTML / DOM element tree encoded in the page.

I suppose it shouldn't be much different than writing it in vanilla JS, so maybe I just need to read more about contenteditable. I am hoping that there are some conveniences to getting this working cleanly with VanJS, like maybe I just need to map an oninput event onto every element that is created by VanJS or the user when they click on 'bold' and then type text. That way I can track changes to specific elements so I know what to send to the server as a diff, which can also be applied to the rich text view of other clients.

[efpage]

contenteditable is an attribute, that makes ANY HTML element user editable. But you will get only out what you put in. So, nothing much to do with rich text.

There is a bunch of feature-rich editors out there, that can be used as a basis (like TinyMCE or ckEdit), and also woking collaboration tools, but the one I like most ist "TipTap". There was a post, how to use this as a component in DML. This should apply also to VanJS.