React hooks and components

Question

React hooks and components

mweidner037 opened this issue a year ago · comments

mweidner037 commented a year ago

Draft here: https://github.com/mweidner037/fileshare-recipe-editor/tree/master/src/renderer/script/collabs-react

mweidner037 · Answer 1 · Sun Jul 16 2023 05:09:38 GMT+0800 (China Standard Time)

Update docs on CollabEventsRecord.Any to ref React hooks

mweidner037 · Answer 2 · Sat Aug 05 2023 19:33:34 GMT+0800 (China Standard Time)

Demo using these - React todo list? (Can also link fileshare-recipe-editor.)

mweidner037 · Answer 3 · Sat Aug 12 2023 04:03:16 GMT+0800 (China Standard Time)

I have a draft of a useCollab hook and a CollabsTextInput component in https://github.com/mweidner037/fileshare-recipe-editor/ . I think I will just copy these over as a new @collabs/react package.

I'll also the frontend of that demo to the monorepo's demo folder, so we can test the react package. We can also demo hiding the display until the WebSocketNetwork "Load" event (with a comment that you'd usually instead wait for IndexedDBDocStore, so you can load even offline).

CollabsTextInput improvements:

For the events that we handle (e.g. typing), still accept a handler as a prop, but actually use it: call it before our own processing and return if it calls e.preventDefault().
Add a way to move cursors around manually? (I guess you can use the ref and change the selection directly, but I don't think this will notify our onSelectionChange handler, which is necessary to move our internal Cursors.)
Document how to change the text directly, you must mutate the Collab, not the text input's value.