ether / ep_cursortrace Goto Github PK

View Code? Open in Web Editor NEW

12.0 12.0 15.0 3.79 MB

Etherpad plugin to trace the cursor(actually caret) of other users in real time

License: Apache License 2.0

JavaScript 91.92% CSS 8.08%

ep_cursortrace's People

Contributors

Stargazers

Watchers

Forkers

qubicle pzyworld ioki storytouch mir123 rhansen woeterman94 arthurk12 frankemax mconf antobinary docs-plus isabella232 tamo lgtm-migrator

ep_cursortrace's Issues

IE doesn't show X position

Explained at https://github.com/redhog/ep_cursortrace/blob/master/static/js/main.js#L230

X position of cursor trace is incorrect when page view is off

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.

Get "Uncaught ReferenceError: browser is not defined" warning and plugin has no effect

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.

Sometimes the X position is incorrect due to page view or so

To replicate install ep_page_view, DISABLE it on both viewers, note caret is in wrong position.

Caret position fail when font-size different than 12px

Hello,
Thanks for this plugin, it's great !

When I change the font-size of the pad (I use 14px instead of 12px) the caret is broken. It is working on the beginning of the line, but more we are writing, more the caret have an offset from the real position

msg: 'Uncaught TypeError: Cannot read property \'offsetLeft\' of undefined',

[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' }

Center'd etc content from ep_align doesn't show caret position

X position of cursor trace when typing long text in one hard line

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.

Wrong cursor position in RTL (right-to-left) mode

In RTL mode, the cursor appears on a wrong position. See below:

2022-06-20_10-31-38.mp4

Breaks collab_client.js test?

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

Doesn't seem to be working any more?!

wanna xfer this repo over to me or "Ether"?

Seems to be a more suitable home now as I'm maintaining it and have completely rewritten it? :)

crashes with two clients

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.

Have Disabled Cursor Trace an RTC on http://beta.etherpad.org -- Please clear your browser cache and test again.

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

shortcomings I noticed if you jus twant to follow an author

line height of empty span doesn't work great
Left offset is a bit weird
Following an author wouldn't need X location
Following an author could just be on edit not caret / cursor move
Following an author isn't persistent

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

Use below logic for author location (saves additional msgs)
Needs a clearer author / easier methods to track an author -- think checkbox next to user
Needs a method to follow multiple authors

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
    }
  });
});

wrong cursor position in some cases

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

Does this work for read only pads?

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?