El Dorado

A full-stack community web application written in Ruby/Rails
bbcode lists « El Dorado « almost effortless
 
Fri, 23 May 2008, 8:31am #1
irkenInvader
Member
Zim
Registered: May, 2008
Last visit: Wed, 04 Jun 2008
Posts: 85

I'd really like to implement list generation using bbcode for posts.

The code below seems to work, but I think there are two problems I'm hoping you can help me with.

Here's the code I added to the Tags hash in bbcodeizer.rb:

:start_list            => [ /\[list\]/i, '<ul>' ],
:list_item => [ /\[\*\](.+?)$/, '<li>\1</li>' ],
:end_list => [ /\[\/list\]/i, '</ul>' ],

I also added this function:

def list(string)
# list tags must match, else don't do any replacing.
if string.scan(Tags[:start_list].first).size == string.scan(Tags[:end_list].first).size
apply_tags(string, :start_list, :end_list)
end
end

And of course, I added this to the end of the TagList array:

... , :list, :list_item ]

Here is my test post (spaces added so bbcodeizer would ignore the tags):

[ list]
[ *]This is a test
[ *]This is another test
[ *]Third Test
[ /list]

Here is the resulting HTML from the test post on my development site:

<ul>

<br><li>This is a test
<br></li>
<br><li>This is another test
<br></li>
<br><li>Third Test
<br></li>
<br></ul>

There are two problems. Your CSS has, at the very top, the following line, which is suppressing the bullets and indentation:

li { margin: 0; padding: 0; list-style-type: none; }

And finally, I don't know where all those extra <br> tags are getting inserted. It seems that any of your 'blocks' (code blocks, quote blocks, etc.) have the same extra, added <br> tags added in.

Any thoughts/help?


Zim wrote:

Invader’s blood marches through my veins like giant, radioactive rubber pants! The pants command me! Do not ignore my veins!

Offline
Fri, 23 May 2008, 10:42am #2
irkenInvader
Member
Zim
Registered: May, 2008
Last visit: Wed, 04 Jun 2008
Posts: 85

Ok, I fixed problem number one (I think).

Here's what I added to the application.css:

.post-body ul {
margin: 10px !important;
padding: 6px;
}

.post-body li {
list-style-type: disc;
}

Now the bullets and lists are showing up correctly, but I still need to figure out what's up with those <br /> tags getting added.


Zim wrote:

Invader’s blood marches through my veins like giant, radioactive rubber pants! The pants command me! Do not ignore my veins!

Offline
Fri, 23 May 2008, 10:52am #3
Trevor
Administrator
Wait-ill-fix-it
Registered: Sep, 2005
Last visit: 51 minutes ago
Posts: 240

I believe that's from the simple_format helper. Check application_helper and you should see the "bb" helper, which calls this. I've been wondering - for this kind of thing, would it be a good idea to build something into El Dorado to allow people to post via BBCode OR textile, html, etc. Maybe then we could just allow people to post using whatever they want...? I'm just not sure if you'd be able to bypass the BR tag insertion...

Offline
Fri, 23 May 2008, 10:57am #4
irkenInvader
Member
Zim
Registered: May, 2008
Last visit: Wed, 04 Jun 2008
Posts: 85

Well, I notice that quote tags don't have the problem.

Example:

This is a quote block
This is another line in the quote block
A third line

Compared to a code block:

This is a quote block
This is another line in the quote block
A third line

I'm looking to see what's going on.


Zim wrote:

Invader’s blood marches through my veins like giant, radioactive rubber pants! The pants command me! Do not ignore my veins!

Offline
Fri, 23 May 2008, 11:13am #5
Trevor
Administrator
Wait-ill-fix-it
Registered: Sep, 2005
Last visit: 51 minutes ago
Posts: 240

Weird. It might be the regex in the BBCode. Check out how some have an "m" at the end. This is something where it matches empty lines as well. I think spoiler has that. Perhaps that's it? Not sure.

Offline
Fri, 23 May 2008, 2:48pm #6
irkenInvader
Member
Zim
Registered: May, 2008
Last visit: Wed, 04 Jun 2008
Posts: 85

Ok.

simple_format is definitely the culprit.

It goes through the post and replaces '\n' or '\r\n' with '\n<br />'

Here's the source of simple_format that does the work:
[code]
content_tag 'p', text.to_s.
gsub(/\r\n?/, "\n"). # \r\n and \r -> \n
gsub(/\n\n+/, "</p>\n\n<p>"). # 2+ newline -> paragraph
gsub(/([^\n]\n)(?=[^\n])/, '\1<br />') # 1 newline -> br
[/code]

So, the real problem is that [code] blocks (and my [list] blocks) need to be "prettified". The real question is should I try to "prettify" them in bbcodeizer (essentially, before simple_format gets a hold on the string), or in bb (after simple_format).

i'll try both and go with the more elegant solution.

[code]TEST TEST TEST[/code]


Zim wrote:

Invader’s blood marches through my veins like giant, radioactive rubber pants! The pants command me! Do not ignore my veins!

Offline
Fri, 23 May 2008, 2:51pm #7
irkenInvader
Member
Zim
Registered: May, 2008
Last visit: Wed, 04 Jun 2008
Posts: 85

looks like you are playing with the same thing (my [code] blocks above look like they are disabled). Should I wait for your work?


Zim wrote:

Invader’s blood marches through my veins like giant, radioactive rubber pants! The pants command me! Do not ignore my veins!

Offline
Fri, 23 May 2008, 3:28pm #8
irkenInvader
Member
Zim
Registered: May, 2008
Last visit: Wed, 04 Jun 2008
Posts: 85

Ok

Here are the changes I'll be making to my site to add [list] blocks to my bbcodeizer:

In the bbcodeizer.rb file, I added the following to the Tags hash:

:start_list            => [ /\[list\]/i, '<ul>' ],
:list_item => [ /\[\*\](.+?)(?:\r\n?)/, '<li>\1</li>' ],
:end_list => [ /\[\/list\]/i, '</ul>' ],

In the same file, the TagsList array looks like this:

TagList = [ :bold, :italic, :underline, :email_with_name, :email_sans_name, 
:url_with_title, :url_sans_title, :image, :size, :color, :code,
:quote, :youtube, :googlevid, :flash, :spoiler, :nsfw, :hide, :mp3,
:superdeluxe, :comedycentral, :revver, :myspacetv, :collegehumor,
:metacafe, :yahoovid, :flickr, :gametrailers, :slideshare, :funnyordie,
:atomfilms, :vimeo, :list, :list_item ]

Also in the same file, I added the following function:

def list(string)
# list tags must match, else don't do any replacing.
if string.scan(Tags[:start_list].first).size == string.scan(Tags[:end_list].first).size
apply_tags(string, :start_list, :end_list)
end
end

Finally, I added the following to my application.css stylesheet:

.post-body ul {
margin: 10px !important;
padding: 6px;
}

.post-body li {
list-style-type: disc;
}

The lists now look pretty cool, but I still have the problem with the blockquote element. Task for another day.


Zim wrote:

Invader’s blood marches through my veins like giant, radioactive rubber pants! The pants command me! Do not ignore my veins!

Offline
Fri, 23 May 2008, 5:33pm #9
Trevor
Administrator
Wait-ill-fix-it
Registered: Sep, 2005
Last visit: 51 minutes ago
Posts: 240

Cool. Any way you could whip up a patch for this? It'd make it easier for me to get it into my repo, and it would credit you properly.

Offline
Fri, 23 May 2008, 9:25pm #10
irkenInvader
Member
Zim
Registered: May, 2008
Last visit: Wed, 04 Jun 2008
Posts: 85

I would love to.

I am a bit nervous.

Can I mess up your repo if I do something wrong?

Here's what I plan to do:
On my development box, I'm going to get a fresh copy of your repo.

git pull git://github.com/trevorturk/el-dorado.git

I'll make my changes
Then I'll commit:
git commit -a

At that point, does git ask me to login with username and password?

sorry I'm such a n00b.


Zim wrote:

Invader’s blood marches through my veins like giant, radioactive rubber pants! The pants command me! Do not ignore my veins!

Offline
Sat, 24 May 2008, 9:21pm #11
Trevor
Administrator
Wait-ill-fix-it
Registered: Sep, 2005
Last visit: 51 minutes ago
Posts: 240

OK - I got your patch in, but it didn't seem to git you credit properly. Perhaps you can put your git repo on github, and then do the whole "pull request" thing? That worked in another case, and it gave credit in the right way.

Yours: http://github.com/trevorturk/el-dorado/commit/8...
Another one: http://github.com/trevorturk/el-dorado/commit/4...

See how the other one has the github avatar and whatnot? I'm not sure why that worked this way. Maybe I just need to figure out how to do patches better, but I can't seem to get your credit in there.

Anyway, I also can't get the lists working right. Can you do an example? I'll deploy this version to this site, so it should be up and running. It definitely will need some docs. I'm also wondering if it wouldn't make sense to do something like:

[ul]
a list item
another list item
[/ul]

and also add:

  • list item with a number

  • I dunno - just a thought. Thanks again!

    Offline