Possible to go without tags: list with custom bbcode

[EXreaction]

Instead of defining tags to go from wysiwyg to source, it would be very nice if it could just take the HTML entered in the bbcode definition and use that to build the source.

This would significantly simplify adding custom bbcodes. With the need for tags, it requires us to create a regular expression on the PHP side to go from HTML to build a tag definition automatically, since custom bbcodes are created by administrators with just the format and HTML replacement.

[samclarke]

Sorry for my slow reply.

The reason it doesn't do this currently is because it wouldn't work for BBCodes which can match multiple tags/styles. Take the bold tag for instance. That should match <b>, <strong> and the CSS font-weight: bold; rule. By just using the replacement it would only work for the <b> tag.

There are also some tags like [youtube], [vimeo], ect. which can create almost identical HTML with only a different URL which again wouldn't work with a simple match and replace unless it supported partially matching attributes.

It is possible to do this for simpler tags like the video tags by auto generating an ID for each tag and inserting that with the HTML then looking for that ID to convert back. It would add quite a bit of complexity though and only work with simpler tags so I'm unsure if this would be a good idea or not but having a simple way of adding custom BBCodes would be a good feature.

I am planning to add some more helper functions in the 1.4.1 (the next next version) which should help simplify adding custom BBCodes to the editor.

[brunoais]

For an idea... How about using a data attribute? Each outer tag of the container (for example, a div) could have a data-SCE-tagid="" This would be in such way that each BBCode has an id in the system and, from the last time you changed from the BBCode to HTML until the next time that happens, each BBCode maintains the same id. IIRC you cannot delete BBCodes after adding, you can only add, so that helps. (If one didn't want as much he shouldn't have had 'em in the first place). Any ideas?

[samclarke]

That's sort of what I was thinking by using an ID. There are 2 problems I can think of with it though.

1. With BBCodes that have attributes it will be tricky to extract those attributes in a generic way because if it's something like a youtube BBCode, it would need to only extract the ID from the URL and not the entire URL. It can be done it just gets a bit more complicated.
2. A browser might add some CSS rules to the BBCode, i.e. someone clicks Bold and it adds font-weight: bold; to the BBCodes HTML. If that happens the font-weight rule should be converted but none of the other HTML should as that would be part of the other BBCode and handled by that.

Both are possible just a bit more complicated which would also mean a lot of testing too. It would be a great feature to have though and definitely worth having. Once I've finished with the 1.4.0 updates I'll look into it a bit more.

[brunoais]

For the 1. You can do a proper text match. It worked for me when I made some tests some months ago for the youtube tag itself. I tried doing one without using the one you provide. It did work quite well. With simple regex you can easily extract an id out of the string that is provided. Also, you can always use data-* attributes to ease the job of extracting. I don't believe that a user will ever try to change the HTML directly without the UI and the UI does not allow changing the HTML without using the controls, so all seems quite safe and easy.

For the 2. Yeah... that is a complicated situation. Different browsers use different implementations for the same command. Even the same browser may produce a final code differently depending on the context you are using it. AKAIK, the only really safe way is to change the markup "ourselves". This means not using the commands the browser allows us to use and to write ourselves the HTML code itself.

[samclarke]

Your're right data attributes should solve the 1st problem for 99% of cases, so that would probably be the best method. It's possible if it was something like an image with a width & height that the browser could resize it, which would invalid the data attributes. I think that would apply to such a small number of BBCodes though that it wouldn't be worth trying to handle them.

For the 2nd problem I was thinking of parsing the HTML then storing the DOM in a cache. Then comparing the HTML DOM to be converted with the cache and using that to pick out any different styles. Not the simplest method but trying to change how the browser behaves with contenteditable/designmode is very, very tricky to get 100% right.

I've just thought of another slight problem. If a custom BBCode is added that has attributes then the user will need to enter those attributes. There will need to be some way of knowing which attributes are required, if they are valid and what the label should be called.

[brunoais]

About that 3rd paragraph... I think for the most complex BBCodes, the user should use a function on his own. One thing is the simple find and replace, another is the really complex multi-something BBCodes. There's limits! :)