[xwiki-devs] IE issue with placing the caret at the beginning of a text node - xwiki-devs@xwiki.org

Anca Paula Luca

27 Oct 27 Oct

12:36 p.m.

Marius Dumitru Florea wrote:

Hi devs, To explain the issue lets consider the following scenario: * Edit a new page with the new WYSIWYG editor. * Type "foobar" and place the caret as in "foo|bar", where the pipe represents the caret. * Press the Bold button or type CRTL+B in order to start typing bold text at the current insertion point. * At this moment, the HTML should be "foo|bar" where the pipe represents the caret. The Problem In Mozilla it's easy to place the caret as suggested. In IE it's impossible (this weekend I tried all sort of things and search desperately on Google..). What I can easily do in IE is either "foo|bar" or "foo|bar". The workaround that I found is to use a special space symbol http://en.wikipedia.org/wiki/Zero-width_non-joiner inside the strong tag (before, it had an empty text node inside) and place the caret just after this special space symbol. PROs: * When the use will type the text will be bold. CONs: * Although the space character is not visible you have to jump over it while navigating with the arrow keys. * Although we can remove these special symbols before converting to wiki syntax, the user will have them when copy&pasting. I'm in favor of using this special space symbol. WDYT?

I would be for some limitations and inconsistencies between browsers (like not being able to start writing bold but only select and boldify in IE) than for inserting an obscure character and mess up copy-paste and navigation. I really don't like the idea of this character, even if it won't endup in the actually saved content. Happy coding, Anca

...

Thanks, Marius. P.S.: I need your opinion ASAP, thanks! _______________________________________________ devs mailing list devs(a)xwiki.org http://lists.xwiki.org/mailman/listinfo/devs

Reply

Anca Paula Luca

12:52 p.m.

Marius Dumitru Florea wrote:

...

Anca Paula Luca wrote:

Marius Dumitru Florea wrote:

Hi devs, To explain the issue lets consider the following scenario: * Edit a new page with the new WYSIWYG editor. * Type "foobar" and place the caret as in "foo|bar", where the pipe represents the caret. * Press the Bold button or type CRTL+B in order to start typing bold text at the current insertion point. * At this moment, the HTML should be "foo|bar" where the pipe represents the caret. The Problem In Mozilla it's easy to place the caret as suggested. In IE it's impossible (this weekend I tried all sort of things and search desperately on Google..). What I can easily do in IE is either "foo|bar" or "foo|bar". The workaround that I found is to use a special space symbol http://en.wikipedia.org/wiki/Zero-width_non-joiner inside the strong tag (before, it had an empty text node inside) and place the caret just after this special space symbol. PROs: * When the use will type the text will be bold. CONs: * Although the space character is not visible you have to jump over it while navigating with the arrow keys. * Although we can remove these special symbols before converting to wiki syntax, the user will have them when copy&pasting. I'm in favor of using this special space symbol. WDYT?

I would be for some limitations and inconsistencies between browsers (like not being able to start writing bold but only select and boldify in IE) than for inserting an obscure character and mess up copy-paste and navigation. I really don't like the idea of this character, even if it won't endup in the actually saved content.

That would mean we would have different implementations at the high level whereas using this special symbol allows me to have the same logic in the application at the high lever and different implementation just at the lower level (only different implementations for the Range class -- all that is build on top of it is cross-browser).

What if we have the same logic highlevel and, well, as much as I hate saying it, buggy behaviour on IE? How buggy would that make it?

...

Thanks Anca, Marius

Happy coding, Anca

Thanks, Marius. P.S.: I need your opinion ASAP, thanks! _______________________________________________ devs mailing list devs(a)xwiki.org http://lists.xwiki.org/mailman/listinfo/devs

_______________________________________________ devs mailing list devs(a)xwiki.org http://lists.xwiki.org/mailman/listinfo/devs

Reply

Marius Dumitru Florea

1:06 p.m.

Vincent Massol wrote:

...

The third option is to have a different behavior in IE, i.e. bold the whole word at the caret location when you hit bold. Especially if all existing wysiwyg browsers do this. The proposed solution sounds a bit hackish and complex.

Hackish yes, complex no.

...

I don't have a better opinion for now.

I talked with Marta and she noticed that Open Office has the same behavior as IE: the whole word becomes bold and not just the insertion point, the only exception being when the caret is not inside a word. I'll raise a vote on this. Thanks, Marius

...

Thanks -Vincent On Oct 27, 2008, at 12:17 PM, Marius Dumitru Florea wrote:

Hi devs, To explain the issue lets consider the following scenario: * Edit a new page with the new WYSIWYG editor. * Type "foobar" and place the caret as in "foo|bar", where the pipe represents the caret. * Press the Bold button or type CRTL+B in order to start typing bold text at the current insertion point. * At this moment, the HTML should be "foo|bar" where the pipe represents the caret. The Problem In Mozilla it's easy to place the caret as suggested. In IE it's impossible (this weekend I tried all sort of things and search desperately on Google..). What I can easily do in IE is either "foo|bar" or "foo|bar". The workaround that I found is to use a special space symbol http://en.wikipedia.org/wiki/Zero-width_non-joiner inside the strong tag (before, it had an empty text node inside) and place the caret just after this special space symbol. PROs: * When the use will type the text will be bold. CONs: * Although the space character is not visible you have to jump over it while navigating with the arrow keys. * Although we can remove these special symbols before converting to wiki syntax, the user will have them when copy&pasting. I'm in favor of using this special space symbol. WDYT? Thanks, Marius. P.S.: I need your opinion ASAP, thanks! _______________________________________________ devs mailing list devs(a)xwiki.org http://lists.xwiki.org/mailman/listinfo/devs

_______________________________________________ devs mailing list devs(a)xwiki.org http://lists.xwiki.org/mailman/listinfo/devs

Reply

Marius Dumitru Florea

8:17 p.m.

Sergiu Dumitriu wrote:

...

Marius Dumitru Florea wrote:

Hi devs, To explain the issue lets consider the following scenario: * Edit a new page with the new WYSIWYG editor. * Type "foobar" and place the caret as in "foo|bar", where the pipe represents the caret. * Press the Bold button or type CRTL+B in order to start typing bold text at the current insertion point. * At this moment, the HTML should be "foo|bar" where the pipe represents the caret. The Problem In Mozilla it's easy to place the caret as suggested. In IE it's impossible (this weekend I tried all sort of things and search desperately on Google..). What I can easily do in IE is either "foo|bar" or "foo|bar". The workaround that I found is to use a special space symbol http://en.wikipedia.org/wiki/Zero-width_non-joiner inside the strong tag (before, it had an empty text node inside) and place the caret just after this special space symbol.

Question: does IE support clicking bold outside/at the start/end of the word? For example: * Type " foo bar " * What happens when the cursor is like: "| foo bar "? * What happens when the cursor is like: " |foo bar "? * What happens when the cursor is like: " foo| bar "? * What happens when the cursor is like: " foo |bar "? * What happens when the cursor is like: " foo bar| "? * What happens when the cursor is like: " foo bar |"? * What happens when the cursor is like: " foo | bar "? If the " foo | bar " case works fine, then this is just another example of how IE is so incredibly wrongly coded... These cases (along with "foo|bar") should be tested in several browsers and see what's happening.

IE behaves exactly as Word. The answer to all your questions is: They don't insert a strong element immediately, but just as soon as you type a letter. And this is the right behavior, I think. On the contrary, I insert the strong element right away and that's why I need to place the caret inside it. I'll change my implementation to delay the insertion of the strong element, thus avoiding the use of the special space symbol. Thanks, Marius.

Reply