Implement a Collaborative Textbox

Our application is based on ReactJS, which is a famous Javascript library for building user interfaces. We also use Create-React-App to create our single-paged application.

With Create-React-App, our folder structure would be like:

my-app/
  README.md
  node_modules/
  package.json
  public/
    index.html
    favicon.ico
  src/
    App.css
    App.js
    App.test.js
    ClickToEdit.js
    index.css
    index.js
    logo.svg
    reportWebVitals.js
    setupTests.js

And it is exactly how our workspace /App is organized.

App.js

We chose React as our framework because its idea of "Components" greatly enables us to implement our collaborative textbox as an independent, reusable piece that can be plugged into a webpage with a single line of code, an example is already in App.js:

import React from 'react';
import * as Y from 'yjs'

import ClickToEdit from "./ClickToEdit";

function App() {
    // define three Yjs document objects
    const ydoc1 = new Y.Doc()
    const ydoc2 = new Y.Doc()
    const ydoc3 = new Y.Doc()

  return (
    <div>
        <ClickToEdit room={'a'} ydoc={ydoc1}  />
        <ClickToEdit room={'b'} ydoc={ydoc2}  />
        <ClickToEdit room={'c'} ydoc={ydoc3}  />
    </div>
  );
}

export default App;

In the function of App, we created three instances of the textbox, each is specified with a unique room name, and has a Y.doc() to store its content. Y.doc is the shared document data structure provided by Yjs.

You can add as many ClickToEdit components as you like.

ClickToEdit.js

The component ClickToEdit is implemented in ClickToEdit.js. Here we utilized React's hooks to build the WebSocket connection and implement the toggled button to connect and disconnect.

import React, {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'


function ClickToEdit(props) {
	const theme = 'snow';  // or const theme = 'bubble';
	const modules = {
	  toolbar: [
		['bold', 'italic', 'underline', 'strike'],
	  ],
	};
        
        const placeholder = "Start collaborating..."
	
	const formats = ['bold', 'italic', 'underline', 'strike'];
	
	const {quill, quillRef} = useQuill({ theme, modules, formats, placeholder });

	const [provider, setProvider] = useState(null)

	const  [connection, setConnection] = useState(true)

	useEffect(() => {
		// console.log("Re-init setprovider..." + props.room)
		if (quill) {
			// console.log("quill ok")
			setProvider(new WebsocketProvider('ws://localhost:1234/' + props.room, 'quill_' + props.room, props.ydoc))
		}
	}, [quill, props.room, props.ydoc]);

	useEffect(() => {
		// console.log("Updating provider..." + props.room)
		if (provider !== null) {
			const yQuillTextYtype = props.ydoc.getText('quill')
			// bind the Yjs document type with a Quill textbox
			new QuillBinding(yQuillTextYtype, quill, provider.awareness)
		}
	}, [provider, props.ydoc, quill])

	const handleClick = () => {
		console.log("Clicked")
		if (connection) {
			setConnection(false)
			provider.disconnect()
		} else {
			setConnection(true)
			provider.connect()
		}
	}

	return (
		<div style={{width: 500, height: 300, margin: 100}}>
		    <button onClick = {handleClick}>{connection ? "Disconnect" : "Connect"}</button>
			<div ref={quillRef}/>
		</div>
		
		
	);
}

export default ClickToEdit;