I'm attempting to make a Meteor app which allows multiple people to edit a body of text concurrently (think Google Docs/Drive).
I figure in order to do this, I need to have a template which just shows the text that's currently in the database, and then whenever the text is modified, it needs to update the text in the database.
I was able to reproduce the same problems from my full app in this minimal reproduction below (designed to be used by a single user instead of multiple, thus swapped from using a Mongo Collection to a Session.)
<body>
{{> hello}}
</body>
<template name="hello">
<pre contentEditable="true">{{text}}</pre>
</template>
(The exact same problem happens if I use a div instead of a pre.)
if (Meteor.isClient) {
Session.setDefault('text', "Edit me!");
Template.hello.helpers({
text: function () {
return Session.get('text');
}
});
Template.hello.events({
"input pre": function (event) {
Session.set('text', $(event.target).text());
}
});
}
Try typing a bit in the application and the bug should pretty quickly be apparent to you: with each keystroke it takes all of the existing text and appends it to what you've typed (so with each keystroke, it duplicates all the text). Here's the really weird part: this behavior doesn't always start immediately... in fact, I haven't found any particularly reliable ways of reproducing it. Once it has duplicated the text a single time, it'll reliably do it again and again with each keystroke, up until you refresh the page. After you refresh the page, sometimes the bug appears again with your next keystroke, other times it can take ~20 keystrokes before it appears.
I've tested this on Safari 8 (both OS X and iOS), Chrome (both OS X and Windows), and Firefox (just OS X) and the issue appears in every browser.
If you haven't been able to reproduce it yet, try highlighting all the text, deleting it, and typing. Also try starting a new line. I find those actions seem to have a higher probability of starting the text duplication, but even those don't consistently start the issue.
My questions are:
- Why is this bug occurring?
- How can I stop it from occurring?
If you'd like to see the problem first hand without having to run a meteor server (although I gave you everything you all the code already...) I threw it up here.
Aucun commentaire:
Enregistrer un commentaire