Skip to:
Content

Opened 17 months ago

Closed 10 months ago

Last modified 8 months ago

#2091 closed defect (fixed)

Posting code is not a good experience

Reported by: jaredatch Owned by:
Milestone: 2.4 Priority: high
Severity: normal Version: 2.2
Component: Content Creation Keywords:
Cc: e.soghe@…, pippin@…

Description

Things are a bit weird on bbPress.org at the moment when it comes to posting code. Few things/comments to note.

The first thing is it seems any <pre> tags get stripped. So posting blocks of code, even using <code>, is weird because paragraphs get entered and it just looks off. Thats definitely an issue.

Secondly, the styling on code blocks (pre). I can't see what it looks like because its getting stripped, but we need to do some sort of nice styling for blocks off code. I'm going to post an image of a clean example.

I know Alex had a patch he was going to roll into SyntaxHighlighter that made it work with bbPress. Something like that would be nice as well.

Right now posting large chunks of code is not easy and can only be done using text mode. Should we maybe ad a "code" button to TinyMCE? How can we make this easier and more elegant?

Lastly, on bbPress.org we can't get to the profile edit screen that's in wp-admin (which is by design), however there is no way then for me to disable the TinyMCE editor. I post code in a lot of posts, so I'd just prefer to have an option to disable the fancy editor so I'm not having to toggle modes all the time.

Thoughts?

Attachments (3)

Screen Shot 2012-12-10 at 6.02.29 PM.png (55.3 KB) - added by jaredatch 17 months ago.
ugly block of code with <p>s being used
Screen Shot 2012-12-10 at 6.02.39 PM.png (14.8 KB) - added by jaredatch 17 months ago.
<p> all the things
Screen Shot 2012-12-10 at 6.03.38 PM.png (9.6 KB) - added by jaredatch 17 months ago.
a more ideal solution/style

Download all attachments as: .zip

Change History (26)

jaredatch17 months ago

ugly block of code with <p>s being used

jaredatch17 months ago

<p> all the things

jaredatch17 months ago

a more ideal solution/style

comment:1 jaredatch17 months ago

Here's another example of code getting mangled http://bbpress.org/forums/topic/google-authorship/#post-122479

You can tell the author tried to use <code> and maybe even <pre> but it got broken into paragraphs.

comment:2 johnjamesjacoby17 months ago

I'll likely need to write something up, could even be a core bbPress patch. I think WordPress kses strips out code and pre tags for non-authors.

comment:3 johnjamesjacoby16 months ago

  • Component changed from Front-end to Content Creation
  • Milestone changed from bbPress.org to 2.3
  • Version set to trunk

Fixed in r4604.

comment:4 johnjamesjacoby16 months ago

  • Resolution set to fixed
  • Status changed from new to closed

comment:5 Sadr12 months ago

  • Cc e.soghe@… added
  • Priority changed from normal to high
  • Resolution fixed deleted
  • Status changed from closed to reopened
  • Type changed from enhancement to defect

Troublesome code posting is still an issue. See this topic for some tests and feedback:
http://jmonkeyengine.org/forum/topic/configure-the-syntax-highlighting-script-to-use-regular-quotes/

  • It's converting the double quote character ” into open and close quotes, which are then invalid if cut and pasted into code.
  • It's still removing anything inside angle brackets from inside the code blocks.

This is a major issue for any code-centric forum, which there are a lot of.

We are currently using the "Crayon Syntax Highlighter" plugin to format code snippets. I am not aware of any other functional code highlighter plugin for bbPress.

comment:6 follow-up: jaredatch12 months ago

Can you provide a gist/pastebin of all those snippets?

This way we can drop them in various installs and do some testing on the exact ones that you had issues with.

comment:7 johnjamesjacoby12 months ago

  • Milestone changed from 2.3 to 2.3.1

Moving to 2.3.1 to investigate.

comment:8 in reply to: ↑ 6 Sadr12 months ago

Replying to jaredatch:

Can you provide a gist/pastebin of all those snippets?

This way we can drop them in various installs and do some testing on the exact ones that you had issues with.

Hum, sure, I suppose this should do:

https://gist.github.com/erlend-sh/5397555 - Test for quotes.

https://gist.github.com/erlend-sh/5397661 - Test for angle brackets.

There might be more though. These are just the ones that we've encountered on a Java-centric forum. Thanks for investigating.

comment:9 jaredatch12 months ago

I've tested things out on bbp.org (which runs trunk) and here is what we know.

If you're trying to paste, escape, write, manage, etc any code in the Visual Editor mode there is a very high chance on post/save that the code will get altered or manipulated due to the mechanics of TinyMCE. Right now there isn't much we can do about that.

With that said, I am able to post those code snippets you provided in the normal/text mode without any issues at all, see http://cl.ly/image/2y3l0f0Y0a2M. This is using the markdown-related ` escaping method, no need to wrap in code or pre.

If you those snippets don't work even in text mode, then I suspect it might be a plugin applying some filtering.

comment:10 johnjamesjacoby12 months ago

  • Milestone changed from 2.3.1 to Future Release

Also seems to work when wrapped in normal code or pre tags, not just backticks.

Note that TinyMCE has this same problem in the visual editor when creating a new post or page, which is why there are numerous syntax highlighting plugins available out there.

This appears to be working adequately for 2.3. It's not super amazing great, but it's not hugely broken that I can see at the moment.

Moving to Future Release, if anyone wants to stab at improvements.

comment:11 Sadr12 months ago

I can't get the backticks to work, but the tests I've done with angled brackets are still not turning out well. Here's one done on testbp.org:
http://testbp.org/discussion/topic/testing-code-posting/#post-8043

The code tags end up rendering the html instead of showing pure text. I've no idea why yours turned out different.

comment:12 jaredatch12 months ago

Try it again. testbp.org wasn't up to date.

See my test via http://testbp.org/discussion/topic/testing-code-posting/#post-8045

comment:13 Sadr12 months ago

That site is running on WordPress 3.6 now. That's not the current working version for bbPress and BuddyPress. If it's not working right on WP 3.5.1 then it's not currently working.

I actually tested 3.5.1 against 3.5.2(alpha) and 3.6(beta). It appears both 3.5.2 and 3.6 fixes this somehow. After I update to either of those two, new forum posts using angled brackets in code tags would correctly avoid rendering the HTML code inside the code tags. This only applied to posts made after the upgrade, though I could still go in and edit old posts and simply publish them again without making any changes, and they would now display correctly as well.

In conclusion, there's some fix in the trunk versions of WordPress that you guys are using that fixes this issue, but it's not present in the stable 3.5.1 yet. I should also note that, oddly enough, ordinary blog posts (on 3.5.2 or 3.6) would still render the HTML. Only bbPress gets fixed.

comment:14 johnjamesjacoby12 months ago

WordPress 3.5.2 is functionally identical to WordPress 3.5.1 regarding anything remotely close to do with any of this. Nothing in the 3.5 branch changes anything here.

comment:15 follow-up: Sadr12 months ago

Did you try it?

comment:16 in reply to: ↑ 15 johnjamesjacoby12 months ago

Replying to Sadr:

Did you try it?

Yes

comment:17 Sadr12 months ago

OK I can't consistently reproduce the issue with the angled brackets (in bbPress that is. WordPress code tag still renders content in angled brackets even with code tags applied).

There's still the issue of quotations being converted from this " to this ”. It's only on the front-end though. If I edit the post, the code-friendly " quotation is still present.

comment:18 follow-up: Sadr12 months ago

Oh, turns out angled brackets is still a problem as well. I forgot that a tag like <em> is normally allowed formatting, so the rules for it might be different. I tested with some sample XML, and the angle brackets are not displayed. In fact, they're completely removed after the post is submitted.

comment:19 in reply to: ↑ 18 johnjamesjacoby12 months ago

Replying to Sadr:

Oh, turns out angled brackets is still a problem as well. I forgot that a tag like <em> is normally allowed formatting, so the rules for it might be different. I tested with some sample XML, and the angle brackets are not displayed. In fact, they're completely removed after the post is submitted.

Going to be tricky to fix. Basically, will need to kses around code blocks, and convert to entities within them. The current kses does some of this, but it will need to be smarter.

comment:20 mordauk10 months ago

  • Cc pippin@… added

comment:21 johnjamesjacoby10 months ago

  • Milestone changed from Future Release to 2.4
  • Resolution set to fixed
  • Status changed from reopened to closed
  • Version changed from trunk to 2.2

Basically fixed this over the course of the past 2 months. Closing as fixed and moving to 2.4.

comment:22 johnjamesjacoby8 months ago

In 5085:

Update CSS for code and pre tags to reduce scrollbars. See #2091.

comment:23 johnjamesjacoby8 months ago

In 5086:

When converting backticks to pre and code blocks, wrap pre's in new lines. Fixes inconsistent output between: the original posted content, formatted output, and editing content. See #2091.

Note: See TracTickets for help on using tickets.