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 🙂
 
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:

Screenshot 2018-10-11 at 10.11.50.webp



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:


toolbar-20x.webp

Existing XF 2.0 editor with FA4

toolbar-21x-solid-16.webp

XF 2.1 editor with FA5 "solid" style

toolbar-21x-regular-16.webp

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

toolbar-21x-light-16.webp

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.
 
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.

1539181953351.webp

Composing a post using Markdown

1539182545683.webp

The resulting output


1539182608681.webp

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 😉).
 
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:

21editor.gif

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:

Code:
[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.
 
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.

1539209223845.webp


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:

21editormanagement.gif


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:

toolbar-21x-regular-custom.webp


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:

21editordropdown.gif


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.

1539210914027.webp

 
Wait... "Inline spoiler"?

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

21inlinespoiler.gif


As well as being activated in the editor, you can also use the [ISPOILER] BB code directly.
 
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 🙂

1539212571000.webp


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:

Code:
[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!

21table.gif


We also have to extend a huge thanks to @Steffen here who helped out with some of the code for the TABLE BB code.
 
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 🙂
 
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]?
 
Last edited:
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.
 
Back
Top Bottom