XF 2.1 Font Awesome 5, Editor button management, Markdown support and more!

We did say we'd see you again fairly soon and so here we are, hot on the heels of our push notifications announcement, to bring you an update on several more new features and improvements coming in XenForo 2.1.

Remember, to ensure you're kept up to date, we strongly recommend smashing the "Watch forum" link here and enabling email notifications if you haven't done so already

 

[Chris D]

Font Awesome 5

In what was some relatively poor timing, around about the time we released XenForo 2.0, Font Awesome 5 was released. As you may know, Font Awesome 5 brings a huge number of new icons and in three different styles, light, regular and solid. There's technically a fourth style too, which now represents all of the brand icons.

The number of changes in FA5 means that we've had to wait until a more significant release to implement it. So here we are

First and foremost, you will probably want to decide which style you would like. To do this, we have created a new style property under the "Typography" style property group:

Note: the default we have chosen is "Regular" and therefore the Admin CP will always use "Regular" regardless of the setting here.
​

It's somewhat tricky to show you exactly what each style looks like, but a comparison of the editor toolbars probably gives the best idea:

Existing XF 2.0 editor with FA4

XF 2.1 editor with FA5 "solid" style

XF 2.1 editor with FA5 "regular" style (the new default)

XF 2.1 editor with FA5 "light" style
​

We will talk a little bit more about how to use icons in templates at a later date, as there are some changes there. You can, however, just use the HTML code provided on the FA5 website for a specific icon. It is worth noting that the names of some icons and some concepts have changed so your existing icons may not work after upgrading.

A note to style designers:
We have put some measures in place to avoid styles from breaking completely (mostly related to the use of the FA variables in Less templates) but as some variable names and icon names have changed, it is possible that some of your existing icons may render as empty squares or be missing entirely. We strongly recommend you test your styles against XF 2.1 at the earliest of opportunities to ensure that you can be roughly ready for a 2.1 compliant version once it reaches stable.

 

[Chris D]

Markdown support

Many developers will certainly be familiar with Markdown, and I'm sure many of you have heard of it. Ultimately it is a simple and easy-to-type formatting language that allows you to more easily format plain text into HTML. The syntax in places is certainly much simpler than BB code but for numerous reasons we clearly can't move away from BB code entirely.

Any content that has ever been written in XenForo is already in BB code. BB code is also much more extensible in terms of adding additional tags, especially for custom BB codes. Adding Markdown on its own would have been relatively simple, but the biggest challenge was actually making it co-exist with BB code!

Our solution to this is that we support (a fairly substantial) subset of the typical Markdown syntax using a parser we have written ourselves. But rather than parsing the Markdown to HTML on page load, we instead parse the Markdown to BB code at save time.

Composing a post using Markdown

The resulting output

Converted back to BB code after saving.
​

To learn more about Markdown, you can view the GitHub "cheat sheet" here (though bear in mind some things are clearly GitHub specific ).

 

[Chris D]

Enhanced editor integration and BB code option syntax

Just because we're implementing a bit of a "new-kid-on-the-block" text formatting approach, doesn't mean we're entirely done with BB code. As mentioned above, it still has its place, not least because of a much more flexible syntax.

Admittedly, BB code can constrain us in terms of which functionality we can support. One headache we're solving with XF 2.1 relates to the options we provide to BB code tags in order to make the available functionality more flexible. Which enables us to do things like this:

​

What ultimately makes this possible is a much more flexible BB code options syntax. The resulting BB code for the above post looks like this:

[IMG align="left" width="337px" alt="PHP versions"]https://xenforo.com/community/attachments/1539019830210-png.185010/[/IMG]
This is what I might have used the other day if we had been running XF 2.1 already :rolleyes:

Although we're only supporting this kind of advanced option syntax on the IMG and ATTACH BB codes right now, it is a general concept that other developers could add to their own BB codes going forward.

 

[Chris D]

Editor button / dropdown management

Throughout the years we have had a few requests to move specific editor buttons, or to manage the content of drop downs or even fully configuring the editor buttons. So our next reveal should take care of your editor configuration needs.

The XenForo editor actually supports a total of four toolbar configurations behind the scenes, which are shown depending on the device viewport. By default, all of them apart from the "Extra small" toolbar are the same, but we're now allowing you to configure them independently. Just click the toolbar you'd like to edit:

Moving the buttons around, or adding additional buttons, is as simple as dragging and dropping, and it works with touch devices too. In the screen recording above, you can see us add the "Insert quote" button into the editor, and change the position of a few others.

Once saved, the changes are reflected on the front end immediately:

In addition to moving buttons around, you can also create and edit your own dropdowns. Seeing as we added "Insert quote" to the main editor toolbar above, we probably don't need it in the default "Insert" menu anymore:

You can even change the icon! Here we simply removed the "Insert quote" button from this dropdown. As we've updated an existing dropdown, that is updated immediately on the front-end with the new icon and the "Insert quote" button now removed. You can of course create new dropdowns and position them on the toolbar accordingly.

​

 

[Chris D]

Wait... "Inline spoiler"?

I guess the last reveal wasn't quite "spoiler-free" I guess we'll just show you, including some big news!

As well as being activated in the editor, you can also use the [ISPOILER] BB code directly.

 

[Chris D]

Tables!

There is often an assumption that when we use a rich text editor such as Froala that we can automatically support all of its features. That would certainly make life easier, but unfortunately rich text editors produce HTML and we therefore have to convert any HTML to BB code on save and back again for rendering.

Therefore there are significant barriers in introducing some features, but we feel that there's enough support for tables that we should bring them to you in XF 2.1

You can of course write the BB code manually, which most likely uses a familiar syntax if you're familiar with HTML tables. Here's a snippet of the above:

[TABLE]
[TR]
[TH]Version[/TH]
[TH]Release date[/TH]
[TH]Last release[/TH]
[/TR]
[TR]
[TD]1.0[/TD]
[TD]March 8, 2011[/TD]
[TD]1.0.4 - July 12, 2011[/TD]
[/TR]
[/TABLE]

But, of course, it's probably easier just to use the newly built-in "Insert table" button!

We also have to extend a huge thanks to @Steffen here who helped out with some of the code for the TABLE BB code.

 

[Chris D]

We sincerely hope you're liking what you've seen so far in XF 2.1. We definitely still have a lot more to show you. Don't worry, and try to keep your reactions under control, as we'll be back next week with much more

 

[Brent W]

I approve. Keep it up

 

[Ozzy47]

This is all excellent news, exciting times recently, keep up the good work.

 

[mkucuksari]

These are really excellent news, especially editor button manager and table support Waiting to see the rest

 

[twollert]

Awesome! I was waiting for a editor button management system like this.

 

[Digital Doctor]

Shouldn't all these features have their own Have You Seen ?

 

[Digital Doctor]

Can addons easily insert buttons now ?

 

[Kirby]

This is, yet again, excellent news - almost can't wait to see this in production

One question though

Although we're only supporting this kind of advanced option syntax on the IMG BB code right now, it is a general concept that other developers could add to their own BB codes going forward.

It's great that this is possible, but [img] itself is somewhat problematic

• It is more complicated to post an image as users have to upload it to a 3rd party server, copy the URL, etc.
• Loading images from (probably) dozens of different servers is not ideal for performance
  This could be cirvumvented by using the image proxy, but this is legally problematic in ragards to copyright
• Loading resources from (a priori unknown) 3rd party servers can be legally problematic due to GDPR
• The is no guarantee that the content hosted on external servers will available in the future or even taht the correct content is delivered
  In some cases whe've seen adult content (instead of horses, etc.) for images on free image hosters
• There is no reliable way to determine the size of external images which is problemtic for AMP

So for all these reasons we discourage the use of and advise our users to use attachments instead.
Will this feature be also available for [attach]?

 

[Chris D]

My bad, [ATTACH] is supported as well.

 

[CMTV]

Will addon's buttons be visible and configurable from "Editor management"?

 

[Ozzy47]

Shouldn't all these features have their own Have You Seen ?

Obviously not, otherwise they would have been.

 

[SyTry]

A lot of new features, nice !
For BB Codes this makes me think about @Lukas W. and his add-on !

 

[Chris D]

Can addons easily insert buttons now ?

Add-ons adding editor buttons has always been fairly trivial.

Will addon's buttons be visible and configurable from "Editor management"?

Add-ons will be able to add their own editor buttons into the data used by the editor management system in order to make their position configurable, yes.

We haven't added it yet, but will be adding a code event here that can be listened to to do that.