search

ether / etherpad-lite

Etherpad: A modern really-real-time collaborative document editor.
http://docs.etherpad.org/
Apache License 2.0
16.73k stars 2.86k forks source link

Autocompletion #1853

Closed angezanetti closed 9 years ago

angezanetti commented 11 years ago

I just spend a lot of time using Etherpad for translations and working on several documents. I missed so much the autocompletion features of my text editor.

Is is possible to implement a feature that parse the text and show a menu when the user hit a key; That menu should contain the word in the page starting with the same begin than the word i'm typing.

marcelklehr commented 11 years ago

I'd say it's possible.

coderhs commented 11 years ago

Has anyone worked on this yet? How would you build it, can we use jquery.autocomplete for this purpose?

JohnMcLear commented 11 years ago

I haven't worked on it. This is how you can build it:

  1. On each edit I'd update an object of words (easy)
  2. On keydown(of non special key) I'd do a lookup for that word in the object (easy)
  3. If a word is detected I'd get the Caret X,Y (not so easy to get properly -- Y is easy, X not so) and draw the options to the screen.
  4. I'd have an onclick event and/or handle special key event (up/down/enter) live until the options are no longer on the screen.
  5. Actually replacing a text range may be tricky, I'm not sure how well that will fly with formatting / clean dom etc.

jquery.autocomplete may be overkill but why not if it makes you happy, it will replace a few lines of code with one. The hard part here is:

  1. Drawing the options on the screen in the correct location
  2. Replacing the text on the screen with the selected option. With regards to this you could potentially fake a paste of the rest of the string, again it might funk up formatting..

To prototype this follow my steps and get it to the point where your options are displayed in an absolute location, worry about getting caretX later, I have to work on that anyway. If you really wanna work on that bit see https://github.com/redhog/ep_cursortrace which does some crazy ass caretX logic (it has to write to the dom to get the true X(px) of the caret).

Once you can click on an option make it just paste the rest of the string, see what happens. If you can get this part right try to keep it modular and abstract because it could be useful for other plugins :) Also note we already include a sendkeys library with Etherpad that can be leveraged to send keypresses to a pad (we use it in the test framework).

Gotcha.. Getting the options (of words to autocorrect) to always be on the screen is a pita, see how I solved this with https://github.com/redhog/ep_cursortrace -- The problem here is that if you are at Max X on a pad your options will be shown further to the right ergo off the visible pad area, getting the options to display in the correct location wont be easy and will require some hacking.

fosils commented 10 years ago

Anyone up for some freelance work? I am willing to sponsor (maybe just symbolic sponsoring for you experts) the development of this feature. You can find the project here: https://www.freelancer.com/projects/Javascript/Modify-Etherpad-the-editor-used.html

JohnMcLear commented 10 years ago

@fosils This is probably my specialism but I wouldn't do it through freelancer.com - bump me directly

fosils commented 10 years ago

@JohnMcLear What does "bump me directly" mean. It does not have to be via Freelancer.com I am flexible. How much would it cost to fulfill the requirements of the freelancer.com project I linked to? I am hoping your pricing will be gentle.

JohnMcLear commented 10 years ago

Email me john@mclear.co.uk

JohnMcLear commented 10 years ago

FYI @fosils your feature request should be a plugin, not a core modification... You mention on freelancer.com to fork and edit, that would be pointless as we wouldn't accept it as a core feature :)

fosils commented 10 years ago

The approach I imagine is to first get it to work in a fork, and then it can be turned into a plugin if it works and we want to continue utilizing it. So for this first part, I am just expecting a quick and dirty "make it work" approach, and we can beautify it later.

On Tue, Dec 17, 2013 at 4:43 PM, John McLear notifications@github.comwrote:

FYI @fosils https://github.com/fosils your feature request should be a plugin, not a core modification... You mention on freelancer.com to fork and edit, that would be pointless as we wouldn't accept it as a core feature :)

— Reply to this email directly or view it on GitHubhttps://github.com/ether/etherpad-lite/issues/1853#issuecomment-30761475 .

JohnMcLear commented 10 years ago

@fosils I hear that a lot only for people to regret it.

Plugins abstract complexity and make code more maintainable ergo making implementation simpler.

JohnMcLear commented 10 years ago

For posterity here is the content from freelancer.com:

I need someone to implement auto-suggest feature to Etherpad. We will use this to implement this auto-suggest feature: http://screencast.com/t/fWUQowPuZ3

Etherpad should read the patterns that should present the box from either a text file or a postgresql database (bonus for this). It should be generic so I should be able to predefine, which keys should trigger the auto-suggest dialog. Please implement in the first place that the following will trigger it: @? @! @

I can accept that your solution does not work on Macs as that seems to be a problem. You might want to contact the guys here to get some help: https://github.com/ether/etherpad-lite/issues/1853

I need you to fork the existing etherpad code found here: https://github.com/ether/etherpad-lite and commit your code to your fork. You also need to show that this works on a server. Please specify in your bid whether you can test your solution on Android 4.X and iOS as this is a requirement.

fosils commented 10 years ago

JohnMcLear, gave me a quote of 640$ (8 hours of work) to complete this. As this is too much for us we will put this on hold. If others are willing to sponsor this feature, I would be interested in hearing from you, so we can share the cost.

jdittrich commented 10 years ago

I'd be interested in an autocomplete option too.

make it just paste the rest of the string, see what happens. If you can get this part right try to keep it modular and abstract because it could be useful for other plugins :)

What is the problem with inserting text?

fosils commented 10 years ago

@jdittrich In 1,5 months we would probably have 200$ to sponsor such a feature. Can you also put down a third of the cost?

jdittrich commented 10 years ago

@fosils currently I don’t consider myself to be enough into etherpad’s inner mechanics. Not the money, but too few knowledge about the text-insertion is the main problem here.

If anyone of you knows more, please add to this google-groups post I created for collecting information on that topic (as I think that the list suits better) I'll post there (and here) when I know more.

jdittrich commented 10 years ago

Anybody who wants to have a look at the caretX issue? I am struggeling there.

worry about getting caretX later, I have to work on that anyway.

@JohnMcLear did you find a reasonable solution to the caretX problem?

JohnMcLear commented 10 years ago

Yea I thought I mentioned already, peep the ep_author_hover plugin. Feel free to re-use that code. Oh shit I just realized I had written a huge email response to this thread and it appears my phone never sent it.. Grr!

jdittrich commented 10 years ago

@JohnMcLear

ep_author_hover plugin. Feel free to re-use that code.

Thanks! I had a look at the code. It seems that the position of the indicator is relative to the mouse cursor (thus the position of the event the mousemove triggers). I'm unable to get the connection to finding out the caret-position (both are independent, except for the moment when I click in the text). (Maybe the text that your phone refused to send could enlighten me)

jdittrich commented 10 years ago

had a try to write such a function. Currently more a protoype than production ready. Whoever wants to help to clean away the bugs is welcome to do so :-)

fosils commented 10 years ago

This is great news, jdittrich. I am completely blank myself. What I could do is to hire someone to test it on a specific platform. Would that be of any help? On Mar 3, 2014 10:58 PM, "jdittrich" notifications@github.com wrote:

had a tryhttps://github.com/jdittrich/ep_autocomp/blob/master/ep_autocomp/static/js/autocomp.jsto write such a function. Works on a prototype level. Whoever wants to help to clean away the bugs is welcome to do so :-)

Reply to this email directly or view it on GitHubhttps://github.com/ether/etherpad-lite/issues/1853#issuecomment-36565312 .

marcelklehr commented 10 years ago

I just submitted a pull request on your repo that shows how you'd display the list of suggestions, and it seems cursorPosition() works as intended.

jdittrich commented 10 years ago

@fosils sorry for not getting back earlier…

Currently I'm happy if it runs smoothly on current desktop browsers. So if it is tested there it would be great. Testing on other platforms, aka iOS or Android is nice, though not (yet?) a central concern.

JohnMcLear commented 9 years ago

Here is an autocomplete plugin for Etherpad: https://github.com/jdittrich/ep_autocomp