Forms with multiple fields

1

I have a question about structuring YJS when I have a form with multiple fields that need to be updated.

Say I have a form with 2 basic input fields and then a Quill based editor.

Is there a way to to this so that the awareness stays working for Quill without using a separate provider for every field? Is this something I could use subdocuments for, somehow?

2

Hi @dev,

you can just reuse the same awareness instance for multiple editor bindings.

3

Thanks! But I need to create a separate contentProvider for each field even when using subdocs so for 3 fields I would have 3 WS connections open (can’t just create one for the rootDoc)?

4

If you choose to create a Yjs document for each field, then you can still share the awareness instance with all three providers. Alternatively, you could simply create a single Yjs document that syncs several fields at once. That’s really up to you.

5

Ah OK, this is what I’m having problems with – how do I sync several fields at once via one provider? All examples I have been able to find show one field per provider (room/connection).

6

If you always have exactly two fields you want to make collaborative, you can give your shared types different names:

const ytext1 = ydoc.getText('field 1')
const ytext2 = ydoc.getText('field 2')

You can now “bind” each type individually to a different field.

If you are working with a variable number of fields, you could manage them in a Y.Array. This is explained in more detail here: https://docs.yjs.dev/getting-started/working-with-shared-types

7

Ah, Shared Types! This is what I was looking for. Thanks!