Ordered list support

[yadutaf]

Hi !

I implemented ordered list support and added the related icon in the toolbar. It automatically adjusts the numbering while adding and ((de)indenting) entries. There still are an issue since deleting an entry is not immediately taken into account. I guess I should add a hook into "doDeleteKey()" but I'm not yet sure of how do to it properly.

Btw, you are welcome to test it here: http://www.jtlebi.fr:6001/p/test1

[JohnMcLear]

I will try and test this asap

-----Original Message----- From: jtlebi [mailto:reply@reply.github.com] Sent: 01 December 2011 17:51 To: John McLear Subject: [etherpad-lite] Ordered list support (#257)

Hi !

I implemented ordered list support and added the related icon in the toolbar. It automatically adjusts the numbering while adding and ((de)indenting) entries. There still are an issue since deleting an entry is not immediately taken into account. I guess I should add a hook into "doDeleteKey()" but I'm not yet sure of how do to it properly.

You can merge this Pull Request by running:

git pull https://github.com/jtlebi/etherpad-lite ordered-list

Or you can view, comment on it, or merge it online at:

https://github.com/Pita/etherpad-lite/pull/257

-- Commit Summary --

• added internal ordered list support. Numbering increment is not yet handled. small code factorisation. Added related CSS
• fixed typo, added initial interface with still bullet button
• added an icon for ordered list
• added numbrering logic + trigger on style update + visual render

-- File Changes --

M static/css/iframe_editor.css (19) M static/img/etherpad_lite_icons.png (0) M static/js/ace2_inner.js (85) M static/js/domline.js (4) M static/js/linestylefilter.js (4) M static/js/pad_editbar.js (1) M static/pad.html (5)

-- Patch Links --

https://github.com/Pita/etherpad-lite/pull/257.patch https://github.com/Pita/etherpad-lite/pull/257.diff

---

Reply to this email directly or view it on GitHub: https://github.com/Pita/etherpad-lite/pull/257 This email and its attachments may be confidential and are intended solely for the use of the individual to whom it is addressed. Any views or opinions expressed are solely those of the author and do not necessarily represent those of the organisation from which this email originated. If you are not the intended recipient of this email and its attachments, you must take no action based upon them, nor must you copy or show them to anyone. Please contact the sender if you believe you have received this email in error. This email was sent by School Email - Safe Webmail and Hosted Email for Schools

[crash-dive]

I talked with jtlebi on the pad and we looked at the issue with the first numbers of lists longer than 9 being cut off. I suggested using list-style-position:inside which does fix the issue, however it also means that the text after the list gets indented a little so they do not line up so the other solution they suggested was increase the left padding. I am not sure which one is better.

Also the list type created in the domline.js appendSpan needs changing from ul to ol for ordered list because the start attribute is not used by Chrome or IE for ul lists. The quick and easy solution jtlebi suggested would be in that function you just add a if(listType === "number") but the code for lists could be refactored a bit to make it better. I have been looking through it to see how much work that would be.

[yadutaf]

EDIT: forget it, it does not work, I did it with a "number" type detection. Not clean at all but it works.

As a quick and dirty (tm) fix, I had a silly idea : I switched everything from "ul" to "ol". This must not be a long term fix. Actually, I'd like to refactor the list handling logic as it has evolved quite a bit recently.

Could you test this on your browsers please ? I updated the code on my server but I didn't commit yet.

[Pita]

I can see no changes on htmlexport and timeslider. Did you test if the ordered list are working there?

[yadutaf]

Not yet. I actually focused on the UI interraction

[Pita]

any news on that?

[yadutaf]

Not on my side. I have a big project currently running so no time for open source for the next days. By the way, the html export code looks very different from the ace2 rendering code. and I have not been able to do a quick fix.

Would it be possible to merge this code for the moment so that anybody could help fixing "html export" ? Otherwise, i'll try to get a deeper look at it next week end if I do not have to much work.

[Pita]

I'm not a fan of merging unfinished features. This isn't on the list for 1.1 so it would be an extra. I'm happy to merge it when its ready

[yadutaf]

If I could emit a suggestion, it would be to deal with duplicated code. Appart from the comments, files blablabla.js and blablabla_client.js are the same. To fix the timeslider, I just had to copy paste the code from one to the other :/

[yadutaf]

By the way, this feature is still un-finished. My TODO:

• trigger re-numbering on line removal (no clue of how to do it)
• fix the numbers not displaying because of the margin...
• ? any other bug :)

[yadutaf]

I have a strange behaviour that I do not know how to fix :

adding any char to a numbered list removes the list attribute. It does not happend for unordered lists. And this is very weird since the huge majority of the code is shared. I already double checked the non-shared parts but I have no clue. Any idea ?

[yadutaf]

All the list user interraction should be OK now. Can anyone test and confirm please ? I really tried to make things as intuitive as possible.

http://www.jtlebi.fr:6001/p/test2

[Pita]

looks good. But the htmlexport code is still untouched. If you manage to update this, this feature will make it to 1.1

[Pita]

The indent of ordered and unorderd elements is very high. I don't like that

[yadutaf]

The HtmlExport is the next item on my todo :)

When developing the list numbering, I noticed that the "1" of "10" was not visible. The margin I applied is just a quick and dirty hack. Which values would you suggest for this increment ? It's just a matter of 2 minute to update it !

Le 09/12/2011 17:39, Peter 'Pita' Martischka a écrit :

The indent of ordered and unorderd elements is very high. I don't like that

---

Reply to this email directly or view it on GitHub: https://github.com/Pita/etherpad-lite/pull/257#issuecomment-3082117

Jean-Tiare LE BIGOT

[JohnMcLear]

Was intuitive for me, tested a bunch of scenarios, worked well.

Good work!

-----Original Message----- From: jtlebi [mailto:reply@reply.github.com] Sent: 09 December 2011 16:35 To: John McLear Subject: Re: [etherpad-lite] Ordered list support (#257)

All the list user interraction should be OK now. Can anyone test and confirm please ? I really tried to make things as intuitive as possible.

http://www.jtlebi.fr:6001/p/test2

---

Reply to this email directly or view it on GitHub: https://github.com/Pita/etherpad-lite/pull/257#issuecomment-3082046 This email and its attachments may be confidential and are intended solely for the use of the individual to whom it is addressed. Any views or opinions expressed are solely those of the author and do not necessarily represent those of the organisation from which this email originated. If you are not the intended recipient of this email and its attachments, you must take no action based upon them, nor must you copy or show them to anyone. Please contact the sender if you believe you have received this email in error. This email was sent by School Email - Safe Webmail and Hosted Email for Schools

[yadutaf]

I'm done with the HTML exporter: http://www.jtlebi.fr:6001/p/test1 Please note that there is no CSS embeded !

Do you have a suggestion for the indentation margin that would be the nicest ?

[Pita]

I don't know how its correct, but its really broken cause you can't create list that starts with the line. Its always about a 1cm away from the line beginning. Take the half of the indent and it should be ok too

[Pita]

And feel free to add some css to the html export, there is already some css in there

[yadutaf]

in the first commit, I suggest to indent the whole text pad to keep the relative indentation between text and lists as consistent as possible.

There is currently a limitation in the HTMLexport code: it can not handle mixed types on the same level of indentation. see my test case in http://www.jtlebi.fr:6001/p/test1 Sadly, It would require a lot of work to fix. Do you need it before merge ?

[Pita]

Timeslider works, Htmlexport works too - great work

Only some small things I would like to change: 1) Why is the whole text suddenly so far away from the left border? Please change that back to the old state 2) The icon for the orderd list is ugly, maybe @0ip can help you here 3) Someone needs to test that on IE 7 and IE 8 @wikinaut

[JohnMcLear]

Fantastic work :) I'm testing in IE now

-----Original Message----- From: Peter 'Pita' Martischka [mailto:reply@reply.github.com] Sent: 11 December 2011 18:01 To: John McLear Subject: Re: [etherpad-lite] Ordered list support (#257)

Timeslider works, Htmlexport works too - great work

Only some small things I would like to change: 1) Why is the whole text suddenly so far away from the left border? Please change that back to the old state 2) The icon for the orderd list is ugly, maybe @0ip can help you here 3) Someone needs to test that on IE 7 and IE 8 @wikinaut

---

Reply to this email directly or view it on GitHub: https://github.com/Pita/etherpad-lite/pull/257#issuecomment-3098480 This email and its attachments may be confidential and are intended solely for the use of the individual to whom it is addressed. Any views or opinions expressed are solely those of the author and do not necessarily represent those of the organisation from which this email originated. If you are not the intended recipient of this email and its attachments, you must take no action based upon them, nor must you copy or show them to anyone. Please contact the sender if you believe you have received this email in error. This email was sent by School Email - Safe Webmail and Hosted Email for Schools

[crash-dive]

@Pita it is because by default numbers in lists sit outside the content flow and when you reached double digits the numbers on the list were overlapping with the line numbers bar.

The alternative solution to that is add list-style-position:inside, but that when you hit double digits the lists look like this:

1. Test
2. Test
3. Test
4. Test
5. Test
6. Test
7. Test
8. Test
9. Test
10. Test

See how when you move from 9 to 10 the text does not line up? The choice is indenting the pad more like the current version or having the text on numbered lists not line up when the number of digits changes.

[Wikinaut]

where can I test this ?

[Pita]

@Wikinaut @johnyma22 see here http://pitapoison.de:9001/

@ja-jo I found a weird bug. When you create a ordered list and press Enter it deletes the ordered list sign. And because of this space thing. I see where you coming from, but I think half of the space should be enough too

[JohnMcLear]

IE7 and IE8 work pretty well for me in IETester

[JohnMcLear]

I would suggest putting this functionality up on one of our dev sites such as TypeWithMe for a week and seeing how people get on and if any bugs are reported prior to merging into master?

[JohnMcLear]

One thing I would expect to happen is that if: 1) I type in 1.\n2.\n3.\n into a pad 2) I select the 3 new lines 3) I click ordered list support I expect that the numbers are already assumed to be part of the numbered/ordered list and automatically treated as such. This is the behavior in Microsoft Word.

*These steps are not required for Microsoft Word to assume that this is part of an ordered list.

[yadutaf]

@Pita I think the bug you are reporting is actually an intentional feature. In Gdoc, when you press enter in a list item, there i 2 scenarios :

1. the item contains text => create a new item on the same level
2. the item is empty => move the item to the immediately upper level or remove the list if already on the higher level. This allows very intuitive creation of list and avoid using shift+tab.

[yadutaf]

@johnyma22 Your idea for the numbers sounds very interesting but is that necessary to implement it right in a first version ? Btw, i'm on the IRC to discuss this :)

It sounds wise to me to first launch it on a "beta server" and see how this is used before merging. Ther may be forgotten use cases !

[Wikinaut]

I confirm that ordered lists do work in Firefox and IE8.

One question: when marking lines of an ordered (or an unordered) list, and deselecting "ordered list" (or unordered list), I expected that the first indenting is removed, but it is not removed.

[Wikinaut]

Another remark: the colour picking in IE8 on http://pitapoison.de:9001/ is still broken

[yadutaf]

Le 11/12/2011 22:12, Wikinaut a écrit :

I confirm that ordered lists do work in Firefox and IE8.

One question: when marking lines of an ordered (or an unordered) list, and deselecting "ordered list" (or unordered list), I expected that the first indenting is removed, but it is not removed. When you do that, you remove the list marker but the relative indentation of the text is preserved. This is the behaviour of Gdoc but it is true that LibreOffice does'nt behave the same way since it moves all the text back to the left margin.

In my opinion, keeping the relative indentation is more intuitive to the user as it keeps the logical organisation of the ideas in the list. It also allows him to quickly restore the list without re-indenting all the levels manually.

Anyway, I'm open to suggestions on this point. :)

---

Reply to this email directly or view it on GitHub: https://github.com/Pita/etherpad-lite/pull/257#issuecomment-3099703

Jean-Tiare LE BIGOT

[Wikinaut]

I do not insist on that but would suggest that in the case a user marked lines of an existing "list", the "list" bullet or number is removed and the first level of indentation is removed.

[JohnMcLear]

@Wikinaut I must stress this is really not the thread to comment on the colour picking in IE8. Me and 0ip have both submitted patches for the IE8 bug, feel free to find them and place a pull request with it fixed.

[Wikinaut]

@jtlebi I tested Firefox, Chrome and IE8, and found your enhancement working.

Updated on 20.12.2011:

However, there's is this core code problem on IE8:

• when the cursor is somewhere in the middle of the pad,
• and when you now click ordered list (or, alternatively, unordered list), --> the cursor jumps to the first line and first character position of the pad.

The problem is apparent in http://pitapoison.de:9001/p/test (core plus ordered list) and also in http://beta.etherpad.org (core)

As Jtlebi has mentioned below, this appears tp be a core code problem, and not a problem of the ordered-list enhancement, which is subject of this pull request discussion.

For this bug I filed https://github.com/Pita/etherpad-lite/issues/292 "Unordered list function broken in IE8: when clicking to add a list in the middle of the pad, the cursor jumps to the top left position of the pad".

[yadutaf]

Hi all,

Sorry for the delay, I had very few spare time these day. starting a new job :)

Anyway, I was able to reproduce this bug in IE8 but it is not specific to my modifications as it also occurs on http://beta.etherpad.org for bullet lists.

To limit interferences between patches, I suggest to fill another specific bug report.

Sadly I'm not a Microsoft product compatibility expert. Could anyone help ?

By the way, Thanks @Wikinaut for your heavy/extensive testing !

[Wikinaut]

For this core code bug I filed https://github.com/Pita/etherpad-lite/issues/292 "Unordered list function broken in IE8: when clicking to add a list in the middle of the pad, the cursor jumps to the top left position of the pad".

[yadutaf]

@johnyma22 @Pita What is the status of this pull request ? As the time goes it will become hard to merge it as it adds features to core functions :/

Btw, if the merge requires some editions, I have a few hours free this week to help.

Merry Christmas and Happy New Year :)

[JohnMcLear]

Status is: I want to see the jumping cursor in IE8 issue resolved then we are doing final tests and then merge. Aiming for mid January. that okay with you?

[yadutaf]

Ooooops ! It's very much like I've produced a Huuuuuuge diff just to fix a conflict :/

Anyway, I merged upstream into my work in order to fix conflicts. The only conflict was in pad.html and caused by commit https://github.com/Pita/etherpad-lite/commit/12fc8226f0bc99b1ce750c7d66d7df5796797ce6 Hopefully, it was pretty easy to fix.

[yadutaf]

Btw, I did a very quick test with this code and it seams to work pretty well :)

[JohnMcLear]

Manually merged, all credit to @jtlebi for making this a possibility :) Sorry about the delay in merging. It's been a busy few weeks!