yjs / y-websocket

Websocket Connector for Yjs
https://docs.yjs.dev/ecosystem/connection-provider/y-websocket
MIT License
523 stars 261 forks source link

Cant separate data with different Y.Doc instances #11

Closed LukenAgile42 closed 4 years ago

LukenAgile42 commented 4 years ago
import React from 'react';
import * as Y from 'yjs'

import ClickToEdit from "./ClickToEdit";

function App() {
    const ydoc1 = new Y.Doc()
    const ydoc2 = new Y.Doc()
    const demoText = "Here is the new text"

  return (
    <div>
        <ClickToEdit shouldUpdate={true} room={'a'} ydoc={ydoc1} text={demoText} /><br/>
        <ClickToEdit shouldUpdate={true} room={'b'} ydoc={ydoc2} text={demoText} />
    </div>
  );
}

export default App;

import React, {useCallback, useEffect, useState} from 'react';
import {useQuill} from "react-quilljs";
import 'quill/dist/quill.snow.css'; // Add css for snow theme

import {WebsocketProvider} from 'y-websocket'
import {QuillBinding} from 'y-quill'
import Quill from 'quill'

function ClickToEdit(props) {
    const {quill, quillRef} = useQuill();

    const [provider, setProvider] = useState(null)

    useEffect(() => {
        if (quill) {
            setProvider(new WebsocketProvider('ws://localhost:1234', 'quill' + props.room, props.ydoc))
        }
    }, [quill]);

    useEffect(() => {
        if (provider !== null) {
            const yQuillTextYtype = props.ydoc.getText('quill')
            const binding = new QuillBinding(yQuillTextYtype, quill, provider.awareness)
            const handleObserve = e => {
                if (quill && e.delta[0]) {
                    const text = e.delta[0].insert
                    quill.clipboard.dangerouslyPasteHTML(props.text)
                    yQuillTextYtype.unobserve(handleObserve)
                }
            }
            yQuillTextYtype.observe(handleObserve)

        }
    }, [provider])

    return (
        <div style={{width: 500, height: 300}}>
            <div ref={quillRef}/>
        </div>
    );
}

export default ClickToEdit;

My expectation here is that I would have separate data in the two input fields. However its the same, even though I have different rooms, and different Doc instances.

Huly®: YJS-480

dmonad commented 4 years ago

You posted the same issue here https://github.com/yjs/yjs/issues/185 and in the Gitter channel.

Please respect my time.