Difficult to post code due to preview system

[jaysoffian]

When you submit a hint in HTML, you can get less than ('<') and greater than ('>') symbols to appear properly in the rendered HTML by using the HTML entities &lt; and &gt;

So you type in your hint using the HTML entities and then click "preview". The HTML preview renders as expected, with a less than or greater than symbol in place of the raw HTML entity. However, browsers (tested with both Safari and Mozilla) also translate the raw HTML entities in the default text for the textarea form input field into the corresponding less than and greater than symbols. If you don't go through the text field and translate all those back into the raw HTML entity, when you click submit, your final hint ends up with those symbols not being rendered since they will most likely appear as unknown HTML tags.

As a test, preview a simple hint supplying '&lt;foobar&gt;' as the hint contents. Click preview. Notice that the preview renders as expected: "<foobar>". Notice also that the textarea also renders as "<foobar>". What do you think will happen if you click preview again? But before doing that, view the source for the preview'ed hint. Search for "foobar" twice and notice that the <textarea> is:

<textarea name="introtext" cols="55" rows="12" wrap="virtual">&lt;foobar&gt;</textarea>

Unfortunately, both Mozilla and Safari render this text area substituting less than and greater than symbols for the HTML entities.

This makes the preview system difficult to use. In my case, I edit my HTML in an external editor and cut and paste it into the text area box. I then click preview, and if it looks correct, replace the text area box that the browser rendered (and munged) by cutting and pasting my hint in again. I then click Post. If I need to make changes, I make then in the external editor, cut and paste again, etc.

I can think of two solutions:

1) Change the workflow. So user enters text, clicks preview, if it looks right, clicks post. There is no opportunity to re-enter the text directly on the preview page. If they don't like the preview, then they click back in their browser to make changes. You'd have to store the hint on the server side, or use a hidden form field which shouldn't get munged by the browser (base64 encode it if you have too...).

2) Double escape the less than and greater than signs in the textarea sent to the browser. In this case, the textarea would have to look like this:

<textarea name="introtext" cols="55" rows="12" wrap="virtual">&amp;amp;gt;foobar&amp;amp;lt;</textarea>

(Geez, I had to double-escape my double-escapes to get the amp entity to render right in this forum ... sheesh)

j.

[griffman]

Instead of the tricky workaround and HTML entities, just use the [ code ] [ /code ] tag pair (remove the spaces I've inserted to prevent vBulletin from parsing the brackets!), as explained on the hint submission page:Please use the [ code ] and [ /code ] tags around any XML, UNIX code, AppleScripts, or other code fragments in your submission!
Yes, those are square brackets around the tags, not angle brackets. Anything you type inside the code tags will be left as-is during preview and posting. No need to use HTML entities; just enter the actual \ > < symbols. You can then preview, edit, and submit the hint when it looks good to you...

It's not ideal, but until someone really re-works the Geeklog parser, it's the best solution. Just make sure you're in HTML post mode, and that you use square, not angled, brackets around the code tags.

regards;
-rob.

[jaysoffian]

Doh, the obvious solution. Somehow I totally overlooked that on the submit hint page. Maybe it's because I know that <code> is a valid HTML tag, I thought [ code ] was a mistake. Dunno.

Thanks.

j.

[nkuvu]

The square bracket tags are vBulletin tags. I believe they're calleed bbcode, specifically.

But I also know that "obvious solution" often is the same as "easy to miss" (since I've done the same thing on a large number of occasions). ;)

[griffman]

Actually, it's a bit confusing in this case -- the square bracket code tags are valid in both vBulletin (this forum site's engine) and Geeklog (the hints' site engine). However, Geeklog doesn't have any other "bbcode" type attributes; this one was added due primarily to my complaining about the munging of special characters in HTML posts :).

When posting on the forum site, you don't necessarily have to use the code tag, as vBulletin will (I believe) leave all the special characters alone. It's only Geeklog that wants to eat them for lunch!

-rob.

[nkuvu]

Er, yeah. Sorry, thought this was about the posting on the forums only. I'll go back to work now... :)