moving the cursor

[Johannes Wilm]

Hey,

as you know, I have been preaching for a long time about the need to use a ton of javascript to move the cursor in a contenteditable environment if you have complex elements, such as footnotes, equations, citations, etc. .

I have asked Takuto of Fidus Writer to open source this part of the source code (AGPL) already ahead of the release of the entire source code which is scheduled to happen this summer. He agreed and here you can find it including a little test app:

https://github.com/Fiduswriter/Fidus-Writer

This same code, with some modifications, could be used in a Booktype or WYSIWHAT editor. It shouldn't matter if it uses Aloha or TinyMCE, HalloJS or whatever. Most of the code should be the same.

However: This may not be a good idea! It currently takes up about 1100 lines and is only handling the movement of the cursor in Chrome (possibly also Safari). Quite a lot of work would have to go into making it work in Firefox and Internet Explorer. I am sure there are even issues with the Chrome implementation.

But maybe studying the source code can serve as an instructional exercise so that we can come up with something completely different that none of us have thought of so far.

--

Johannes Wilm

BookJS Developer

johann...@sourcefabric.org

www.sourcefabric.org

US: +1 520 399 8880

skype: johanneswilm

[Johannes Wilm]

The demo can now be found here: http://fiduswriter.github.io/movecursor/

Enable CSS Regions to see it entirely. 

The repository is at https://github.com/fiduswriter/movecursor

[Johannes Wilm]

Hey Mihai,

You are right -- it also scares me to go this deep with javascript.

At least for booktype, things that have ben asked for are from BookJS are footnotes and margin notes. Even if we don't end up using BookJS in the editor, we still need to be able to create/handle them within the editor so that later on we have them in the output.

Other things that have bene wished for in the past are: equations, pictures/figures with captions.

For all of these we would need this kind of cursor handling.

But there could be other options I haven't considered enough. One would be to not use contenteditable and instead implement the whole editor in Javascript the way Google Docs does. Another would be to contribute to Gecko, Webkit and Blink, fixing the various bugs in those so that the amount of javascript one needs for this can be brought down.

On Mon, Apr 22, 2013 at 12:20 PM, Mihai Balaceanu <mihai.b...@sourcefabric.org> wrote:

The algorithms run deep into ranges and dom, kind of gets me scared, but if that's what you really need, what we really need (?) I guess we could adapt it to our projects... and Firefox -- I have never heard of Internet Explorer, what is it? :o)

--
Mihai Balaceanu
Software Developer, Sourcefabric
mihai.b...@sourcefabric.org
http://sourcefabric.org | http://sourcefabric.com

str. Ciresilor nr. 43A, ap. 4
Cluj-Napoca, Romania

skype: gizm0bill, twitter: gizm0bill

[Johannes Wilm]

Hey again

to bad I didn't hear back from anyone but Mihai.

I have come up with another posisble solution -- use small canvas elements within the text for elements one only wants to be treated as single elements.

Check this example: http://johanneswilm.github.io/canvasContentEditable/

It lets you create new footnotes and update the contents of footnotes and it is much cleaner because it uses way less Javascript and no weird empty space nodes, etc. . Even most of the key movememts in Firefox work -- with the exception that you cannot move the cursor before elemnts at the very start or end of paragraphs. In Chroomium everything works.

I would really like to hear from you others. We all have this problem and we should be able to find a solution together!