Design issue Wysiwyg editor and \t (tab) bug

[Rasmus Vind]

Hey guys. I just came across a bug in the WYSIWYG editor in XenForo.

1. Copy the text from the file "indentation bug.txt" into first the WYSIWYG editor.
2. Press preview.
3. It shows this:

Which is not expected.

Now, try this:
1. Copy the text from the file "indentation bug.txt" into first the plain text editor.
2. Press preview.
3. It shows this:


Many users on my site share code with each other and are having problems with the rich text editor screwing up indentation in their code.

 

[xenfans]

Showing tabs and spaces and returns in my editor, I see it shows fine, indents as expected, etc. I can repeat this on my site as well.
I have had this so many times, it's utterly frustrating and makes running a site for code sharing a lot harder.

    4
x    3
xx    2
xxx    1

 

[Rasmus Vind]

I just had a look. Turns out in the file bb_code_edit.js there is a function called pasteCleanUpCallback.
In two places I found the code:

                    return b.replace(/\t/g, "    ").replace(/  /g, "  ").replace(/  /g, "  ")

                    b.length ? (c = "<p>" + b.replace(/\r?\n/g, "</p><p>") + "</p>", c = c.replace(/\t/g, "    ").replace(/<p> /g, "<p>&nbsp;").replace(/  /g,

Which naively replaces a tab with 4 spaces without paying attention to the column.

I also found a method called insertCode which has this piece:

e = e.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/\t/g, "    ").replace(/\n /g, "\n&nbsp;").replace(/  /g, "&nbsp; ").replace(/  /g, " &nbsp;").replace(/\n/g, "</p>\n<p>");

It seems to do the same thing.

I might for kicks write up a patch when I get time.

 

[Rasmus Vind]

Turns out on xf2beta.xenforo.com it trims the whitespace to the left of any code when using the Wysiwyg editor.

 

[Mike]

There are limitations of the RTE with tab characters, as such we translate them to 4 spaces. This isn't something we expect to change at this time.