dgellow · September 15, 2016 08:49
diff --git a/_README.md b/_README.md
diff --git a/client.jsx b/client.jsx
 var App = React.createClass({
     mixins: [ReactMeteor.Mixin],

    startMeteorSubscriptions: function() {
        Meteor.subscribe('documents');
    },

    getMeteorState: function() {
        var doc = Documents.findOne({
            title: 'Initial document'
        });
        return {
            document: doc,
            documentContent: doc ? doc.content: '',
            users: Meteor.users.find({})
        };
    },

    handleChange: function(event) {
        var text = event.target.value;
        this.setState({
            documentContent: text,
            cursor: event.target.selectionStart,
            nbChars: event.target.value.length
        });
        Meteor.call('updateDocument',
                    this.state.document._id,
                    text);
    },

    componentDidUpdate: function() {
        var domNode = this.refs.textarea.getDOMNode(),
            newNbChars = domNode.value.length,
            diffNbChars = newNbChars - this.state.nbChars,
            newCursor = this.state.cursor + diffNbChars;
            domNode.setSelectionRange(
                newCursor, newCursor
        );
    },

    render: function() {
        var users = this.state.users.map(function(user) {
            return (<span class="username">{user.username}</span>);
        });
        return (
                <div>
                <p>{users}</p>
                <textarea ref="textarea" onChange={this.handleChange}
                defaultValue={'I am empty'}
                value={this.state.documentContent}>
                </textarea>
                </div>
        );
    }
 });

 if (Meteor.isClient) {
    Meteor.startup(function() {
        React.render(
                <App />,
            document.getElementById('react-root')
        );
    });

    Accounts.ui.config({
        passwordSignupFields: 'USERNAME_ONLY'
    });
 }
diff --git a/common.js b/common.js
 Documents = new Mongo.Collection('documents');
 
 Meteor.methods({
    addDocument: function(title) {
        Documents.insert({
            content: '',
            createdAt: new Date(),
            title: title
        });
    },
 
    updateDocument: function(docId, content) {
        var doc = Documents.findOne({_id: docId});
        if (!doc) {
            throw new Meteor.Error('not-found');
        }
        Documents.update(doc._id, {$set: {content: content}});
    }
 });
diff --git a/index.html b/index.html
 <head>
  <title>sync-texteditor</title>
 </head>
 
 <body>
    <h1>Multi User Text Editor</h1>
    <div id="react-root"></div>
 </body>
diff --git a/main.css b/main.css
 textarea {
    margin: auto;
    width: 90vw;
    height: 80vh;
 }

 .username {
    border: 1px solid black;
    padding: 2px;
 }
diff --git a/server.js b/server.js
 if (Meteor.isServer) {
    Meteor.publish('documents', function() {
        return Documents.find({});
    });
 
    Meteor.startup(function() {
        var doc = Documents.findOne({title: 'Initial document'});
        if (!doc) {
            Documents.insert({
                title: 'Initial document',
                content: '',
                createdAt: new Date()
            });
        }
    });
 }
	var App = React.createClass({
	mixins: [ReactMeteor.Mixin],

	startMeteorSubscriptions: function() {
	Meteor.subscribe('documents');
	},

	getMeteorState: function() {
	var doc = Documents.findOne({
	title: 'Initial document'
	});
	return {
	document: doc,
	documentContent: doc ? doc.content: '',
	users: Meteor.users.find({})
	};
	},

	handleChange: function(event) {
	var text = event.target.value;
	this.setState({
	documentContent: text,
	cursor: event.target.selectionStart,
	nbChars: event.target.value.length
	});
	Meteor.call('updateDocument',
	this.state.document._id,
	text);
	},

	componentDidUpdate: function() {
	var domNode = this.refs.textarea.getDOMNode(),
	newNbChars = domNode.value.length,
	diffNbChars = newNbChars - this.state.nbChars,
	newCursor = this.state.cursor + diffNbChars;
	domNode.setSelectionRange(
	newCursor, newCursor
	);
	},

	render: function() {
	var users = this.state.users.map(function(user) {
	return (<span class="username">{user.username}</span>);
	});
	return (
	<div>
	<p>{users}</p>
	<textarea ref="textarea" onChange={this.handleChange}
	defaultValue={'I am empty'}
	value={this.state.documentContent}>
	</textarea>
	</div>
	);
	}
	});

	if (Meteor.isClient) {
	Meteor.startup(function() {
	React.render(
	<App />,
	document.getElementById('react-root')
	);
	});

	Accounts.ui.config({
	passwordSignupFields: 'USERNAME_ONLY'
	});
	}
	Documents = new Mongo.Collection('documents');

	Meteor.methods({
	addDocument: function(title) {
	Documents.insert({
	content: '',
	createdAt: new Date(),
	title: title
	});
	},

	updateDocument: function(docId, content) {
	var doc = Documents.findOne({_id: docId});
	if (!doc) {
	throw new Meteor.Error('not-found');
	}
	Documents.update(doc._id, {$set: {content: content}});
	}
	});
	<head>
	<title>sync-texteditor</title>
	</head>

	<body>
	<h1>Multi User Text Editor</h1>
	<div id="react-root"></div>
	</body>
	textarea {
	margin: auto;
	width: 90vw;
	height: 80vh;
	}

	.username {
	border: 1px solid black;
	padding: 2px;
	}
	if (Meteor.isServer) {
	Meteor.publish('documents', function() {
	return Documents.find({});
	});

	Meteor.startup(function() {
	var doc = Documents.findOne({title: 'Initial document'});
	if (!doc) {
	Documents.insert({
	title: 'Initial document',
	content: '',
	createdAt: new Date()
	});
	}
	});
	}