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.
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