ether / ep_cursortrace Goto Github PK
View Code? Open in Web Editor NEWEtherpad plugin to trace the cursor(actually caret) of other users in real time
License: Apache License 2.0
Etherpad plugin to trace the cursor(actually caret) of other users in real time
License: Apache License 2.0
In IE
SCRIPT5007: Unable to get value of the property 'nodeType': object is null or undefined
LaaMb7FT2P, line 4 character 177
Replicate by openning an pad in chrome and clicking the bottom line, this error will appear in IE
[2015-01-02 23:05:33.757] [WARN] client - Uncaught TypeError: Cannot read property 'offsetLeft' of undefined -- { errorId:
'YZeK8w8CNXRM5lxvzLcF',
msg: 'Uncaught TypeError: Cannot read property \'offsetLeft\' of undefined',
url: 'http://beta.etherpad.org/p/release-150',
linenumber: 129,
userAgent: 'Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/39.0.2171.95 Safari/537.36' }
In RTL mode, the cursor appears on a wrong position. See below:
Whether ep_page_view is on or not, the following cases could happen.
(1)User A is typing without space key(i.e., a really long, long word) on an Etherpad session, and user A's text is in one hard line. User A's cursor trace goes off user B's screen.
(2)User A is typing with space key(i.e., some random text with spaces, or just regular text), and user A's text is in one hard line. User A's cursor trace goes off user B's screen when the text is at the start of the next soft newline, and the cursor trace goes to next soft line (but off the actual cursor which is "faster" than the cursor trace) when the text is reaching the middle of that soft line.
(3)User A is typing with only space key, and spaces are in one hard line. This behaves basically same with (1), but with text lags on both sides.
Expected the position of cursor trace should always follow the position of relative actual cursor.
Testing with etherpad-lite-win 1.8.18, I'm not sure that ep_cursortrace works correctly.
First, the cursor is one char left.
origin[ABC|DEF]->remote[AB|CDEF]
If my cursor is between C and D, other users will see me between B and C.
I think here may be an off-by-one: https://github.com/ether/ep_cursortrace/blob/v3.1.16/static/js/main.js#L92
Second, line-height of folded lines are incorrect.
origin remote
1 ABCDEFGHIJKLMNOPQRST|U 1 ABCDEFG
HIJKLM|N
OPQRSTU
If I use wide screen and my cursor is between T and U, other users with narrow screen will see me at a little higher position, for example, between M and N.
I think the worker lacks line-height while innerdocbody has "line-height: 1.6" (i.e. 160% of font-size in px).
Last, cursor is too low when the screen is narrow (mobile-layout).
outerdocbody usually has "padding-top: 20px" but it will be "0" on mobile-layout.
I think we should take it into account too: https://github.com/ether/ep_cursortrace/blob/v3.1.16/static/js/main.js#L120
I installed etherpad 1.4.1 (master branch, without any changes) with this plugin only and when I opened one pad in one browser, there is nothing changed and I cannot see the tag no matter I turn the authorship colors on or off. Then I open two different browser window to simulate there are two users, but there was no tag on either screen and I got "Uncaught ReferenceError: browser is not defined" warning message at backend. Moreover, synchronization between the same pad opened in different window seems stopped. I cannot see the input in the other window until I refresh the page. I have tried latest IE, Firefox and Chrome and all of them have this problem.
When this plugin is installed, the collab_client test fails with
Error: waitFor condition never became true () => helper.padInner$('div').eq(0).text() === user1Text
at Object.helper.waitFor (helper.js:206:9)
at Object.helper.waitForPromise (helper.js:253:59)
at http://localhost:9001/javascripts/lib/ep_etherpad-lite/tests/frontend/specs/collab_client.js?callback=testRunnerRequire.define:80:76
at Object.performAsOtherUser (helper/multipleUsers.js:27:11)
at Context.<anonymous> (http://localhost:9001/javascripts/lib/ep_etherpad-lite/tests/frontend/specs/collab_client.js?callback=testRunnerRequire.define:80:32)
Not sure if it's a problem with the test or with ep_cursortrace
Steps to reproduce:
$ git clone https://github.com/ether/etherpad-lite.git
$ cd etherpad-lite
$ bin/run.sh
$ npm install ep_cursortrace
$ bin/fastRun.sh
Now, with two different browser profiles or browsers, access an arbitrary pad, e.g., http://0.0.0.0:9001/p/test . This yields two different stacktraces:
[2020-11-29 19:06:26.200] [WARN] client - Uncaught ReferenceError: nodes is not defined -- {
errorId: 'ghbpCdnfKlzu1yVyPJNm',
type: 'Uncaught exception',
msg: 'Uncaught ReferenceError: nodes is not defined',
url: 'http://0.0.0.0:9001/p/test',
source: 'http://0.0.0.0:9001/javascripts/lib/ep_etherpad-lite/static/js/ace2_common.js?callback=require.define&v=67cf214c',
linenumber: 65,
userAgent: 'Mozilla/5.0 (X11; Linux x86_64) [...]',
stack: 'ReferenceError: nodes is not defined\n' +
' at wrap (eval at j (http://0.0.0.0:9001/static/js/require-kernel.js?v=67cf214c:10:1408), <anonymous>:5:498)\n' +
' at Object.exports.handleClientMessage_CUSTOM [as hook_fn] (eval at j (http://0.0.0.0:9001/static/js/require-kernel.js?v=67cf214c:10:1408), <anonymous>:5:3065)\n' +
' at callHookFnSync (http://0.0.0.0:9001/javascripts/lib/ep_etherpad-lite/static/js/ace2_common.js?callback=require.define&v=67cf214c:65:1586)\n' +
' at http://0.0.0.0:9001/javascripts/lib/ep_etherpad-lite/static/js/ace2_common.js?callback=require.define&v=67cf214c:65:3706\n' +
' at Array.map (<anonymous>)\n' +
' at Object.exports.callAll (http://0.0.0.0:9001/javascripts/lib/ep_etherpad-lite/static/js/ace2_common.js?callback=require.define&v=67cf214c:65:3690)\n' +
' at Object.handleMessageFromServer (http://0.0.0.0:9001/javascripts/lib/ep_etherpad-lite/static/js/pad.js?callback=require.define&v=67cf214c:38:6146)\n' +
' at r.<anonymous> (http://0.0.0.0:9001/javascripts/lib/ep_etherpad-lite/static/js/pad.js?callback=require.define&v=67cf214c:3:4719)\n' +
' at r.emit (http://0.0.0.0:9001/socket.io/socket.io.js?v=67cf214c:6:19839)\n' +
' at r.onevent (http://0.0.0.0:9001/socket.io/socket.io.js?v=67cf214c:8:10571)'
and
[2020-11-29 19:07:11.208] [WARN] client - ReferenceError: assignment to undeclared variable nodes -- {
errorId: 'moEzQA0v3dG2KeCqAYpi',
type: 'Uncaught exception',
msg: 'ReferenceError: assignment to undeclared variable nodes',
url: 'http://0.0.0.0:9001/p/test',
source: 'http://0.0.0.0:9001/static/js/require-kernel.js?v=68c37cb4 line 10 > Function',
linenumber: 5,
userAgent: 'Mozilla/5.0 (X11; Linux x86_64) [...]',
stack: 'wrap@http://0.0.0.0:9001/static/js/require-kernel.js?v=68c37cb4 line 10 > Function:5:512\n' +
'ep_cursortrace/static/js/main.js/exports.handleClientMessage_CUSTOM@http://0.0.0.0:9001/static/js/require-kernel.js?v=68c37cb4 line 10 > Function:5:3064\n' +
'callHookFnSync@http://0.0.0.0:9001/javascripts/lib/ep_etherpad-lite/static/js/ace2_common.js?callback=require.define&v=68c37cb4:65:1586\n' +
'ep_etherpad-lite/static/js/pluginfw/hooks.js/exports.callAll/<@http://0.0.0.0:9001/javascripts/lib/ep_etherpad-lite/static/js/ace2_common.js?callback=require.define&v=68c37cb4:65:3720\n' +
'ep_etherpad-lite/static/js/pluginfw/hooks.js/exports.callAll@http://0.0.0.0:9001/javascripts/lib/ep_etherpad-lite/static/js/ace2_common.js?callback=require.define&v=68c37cb4:65:3690\n' +
'handleMessageFromServer@http://0.0.0.0:9001/javascripts/lib/ep_etherpad-lite/static/js/pad.js?callback=require.define&v=68c37cb4:38:6146\n' +
'handshake/<@http://0.0.0.0:9001/javascripts/lib/ep_etherpad-lite/static/js/pad.js?callback=require.define&v=68c37cb4:3:4719\n' +
'r.prototype.emit@http://0.0.0.0:9001/socket.io/socket.io.js?v=68c37cb4:6:19839\n' +
'r.prototype.onevent@http://0.0.0.0:9001/socket.io/socket.io.js?v=68c37cb4:8:10571\n' +
'r.prototype.onpacket@http://0.0.0.0:9001/socket.io/socket.io.js?v=68c37cb4:8:10193\n' +
't.exports/<@http://0.0.0.0:9001/socket.io/socket.io.js?v=68c37cb4:8:12354\n' +
'r.prototype.emit@http://0.0.0.0:9001/socket.io/socket.io.js?v=68c37cb4:6:19839\n' +
'r.prototype.ondecoded@http://0.0.0.0:9001/socket.io/socket.io.js?v=68c37cb4:6:25583\n' +
't.exports/<@http://0.0.0.0:9001/socket.io/socket.io.js?v=68c37cb4:8:12354\n' +
'r.prototype.emit@http://0.0.0.0:9001/socket.io/socket.io.js?v=68c37cb4:6:19839\n' +
'a.prototype.add@http://0.0.0.0:9001/socket.io/socket.io.js?v=68c37cb4:6:12498\n' +
'r.prototype.ondata@http://0.0.0.0:9001/socket.io/socket.io.js?v=68c37cb4:6:25536\n' +
't.exports/<@http://0.0.0.0:9001/socket.io/socket.io.js?v=68c37cb4:8:12354\n' +
'r.prototype.emit@http://0.0.0.0:9001/socket.io/socket.io.js?v=68c37cb4:6:19839\n' +
'r.prototype.onPacket@http://0.0.0.0:9001/socket.io/socket.io.js?v=68c37cb4:7:2948\n' +
'r.prototype.setTransport/<@http://0.0.0.0:9001/socket.io/socket.io.js?v=68c37cb4:7:560\n' +
'r.prototype.emit@http://0.0.0.0:9001/socket.io/socket.io.js?v=68c37cb4:6:19839\n' +
'r.prototype.onPacket@http://0.0.0.0:9001/socket.io/socket.io.js?v=68c37cb4:7:15217\n' +
'r.prototype.onData@http://0.0.0.0:9001/socket.io/socket.io.js?v=68c37cb4:7:15166\n' +
'r.prototype.addEventListeners/this.ws.onmessage@http://0.0.0.0:9001/socket.io/socket.io.js?v=68c37cb4:8:6594\n'
Editing in one browser causes the exception to be shown for the other browser and vice versa.
Because of this I think ep_follow should be a thing and not within ep_cursortrace - I also think ep_cursortrace is too spammy/noisy.
Things I'd do diff in ep_author
My brain dump
look in innerdoccontainer
if a span containing authorclass is added/modified
$('body').on('DOMSubtreeModified', 'span', function(){
console.log('changed');
// author-a-z74zz66z7z80z8z77znz85zgz90zvz77zuwdv
// visible in author tray is a.JB7P8MnUgZvMuwdv
// https://github.com/ether/ep_author_hover/blob/master/static/js/index.js#L71
var followAuthors = [['someAuthorIDClass'], ['anotherAuthorIDClass']]
// get each class on the span
var classes = $(this).attr('class').split(/\s+/);
// for each author we follow
$.each(followAuthors(function(authorClass){
// does the modified span have the authors we're following?
if(classes.indexOf(authorClass) !== -1){
// need to follow this so get offsetTop
var newY = $(this).context.offsetTop + "px";
var $outerdoc = $('iframe[name="ace_outer"]').contents().find("#outerdocbody");
var $outerdocHTML = $('iframe[name="ace_outer"]').contents().find("#outerdocbody").parent();
$outerdoc.css({top: newY +"px"}); // Chrome
$outerdocHTML.animate({scrollTop: newY}); // needed for FF
}
});
});
I would like to have the caret be shown on a read only pad. I can't see the cursorPosition message being received on the read only pad. Is there any way to receive it?
If two users are collaborating together using Etherpad with both session's ep_page_view plugin off, the X positions of their cursor traces will be off for some distances from their actual cursors.
If both users turn on their ep_page_view, their X positions seem correctly. If one turns on page view plugin and the other doesn't, only the one turns on the plugin has correct X position.
To replicate install ep_page_view, DISABLE it on both viewers, note caret is in wrong position.
Seems to be a more suitable home now as I'm maintaining it and have completely rewritten it? :)
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.