We have long used third-party editors to provide the WYSIWYG (What You See Is What You Get) experience in the Article Editor.
I'm delighted to announce that we just upgraded our third-party Modern Editor to the latest version.
We've added some more awesome stuff to the editing experience (and fixed some awkward interactions, too)!
The quick summary:
- Insert Anchor tool
- List format dropdowns
- Autoplay for videos added via URL
- Way more emoji options
- Table footer option
Alert divs are now PARAGRAPHS(this may require updating Custom CSS in your knowledge base!)This change rolled back.- New icons/cleaner layout/no more heavy black bar at the top
- Some editor bugs fixed, too
See below for more details on each of those items!
Editor upgrades are a huge undertaking due to the editor's complexity. Please let us know if you notice any unusual or difficult behaviors in the editor as a result of these changes. We tested them a lot but we are also human, so some bugs might have slipped through.
New: Insert Anchor tool
Those of you who have used the old Legacy editor will know that one of the differences between the two was that Legacy had its own tool to create anchors, and Modern did not. (We know some of you have continued to use Legacy editor entirely for this reason!)
We decided the upgrade was the perfect time to build it.
What it does: Allows you to insert an anchor anywhere into your article, so you can create same-page hyperlinks to jump people to a particular heading or section.
Why we love it: No more toggling to Legacy Editor or having to create anchors manually in HTML!
This new tool is located between the Insert Link and Insert Image controls in the editor and is, appropriately enough, an anchor icon:
New Insert Anchor icon
The editor will tell you there's an anchor using the same anchor icon:
Editor-only anchor icon helps you find where you have anchors
For more details using this tool, see Add anchors within articles.
(And yes, I DID use the anchor tool to help create all the jump links at the top of this release note. )
New: Ordered and bulleted list formatting dropdowns
This is one of the features I was personally the most excited about in the upgrade. For ordered and unordered lists, there's now a small arrow next to the lists. You can click this arrow to select formatting options for each list type.
What it does: You can choose to keep the "Default" list formatting to keep the traditional styles, or use the dropdown to specify a different style for any level of your lists.
Why we love it: Greater control over list formats; no need to add Custom CSS or edit raw HTML to get the appearance you want!
New Ordered list options are:
- Default: 1, 2, 3 for top-level; will use our default Lower alpha for second-level; Lower Roman for third-level and beyond
- Lower Alpha: a, b, c
- Lower Greek: α, β, γ
- Lower Roman: i, ii, iii
- Upper Alpha: A, B, C
- Upper Roman: I, II, III
New Unordered list options are:
- Default: This uses our existing Unordered list defaults: a Disc for first-level; circle for second-level; and square for third-level and beyond
- Circle: The round circle that's been the default for the second-level of unordered lists. Now you can use it at whatever level you want.
- Disc: The round black dot used as our default first-level. Now you can use it at whatever level you want.
- Square: A small black square used as our default third-level. Now you can use it at whatever level you want.
New: Autoplay option for videos added via URL
When you insert a video from URL now, there's a checkbox to have the video autoplay when the article is displayed:
URL video Autoplay option
What it does: Sets the video to automatically start playing, muted, when the article is loaded
Why we love it: Previously you would have had to mess with the URL directly to add a parameter to set it to autoplay and mute; this control does it all for you!
This option only applies to videos added via URL.
Enhanced: Greatly expanded emoji options
Our editor used to have 56 built-in emojis, most of which were faces. It now has 8 tabs of different emojis, including animals, fruits, holidays, symbols, and more!
Old emoji options 
New emoji options! Why we love it: Who doesn't love more emojis?
New: Table footer option
The table controls in the Modern Editor have always had the option to add a table header row. They now also include an option to have a table footer row.
What it does: Creates a tfoot section in the table, which has different styles (and you can style differently using CSS).
Why we love it: Easier styling of the final row of a table, if that's your thing!
Here's a quick sample of both the control and what's possible with adding the footer and styling it:
Sample table with footer row, table control with Table Footer icon displayed
Important changes
No upgrade is complete without a few changes that might take some getting used to. We tried to keep overall changes to a minimum, but there are still a couple changes worth calling out.
Updated icons, no more divider lines
The first thing you'll probably notice in the editor is that we've updated the icons and removed most of the vertical and horizontal grey lines dividing the sections. We are trying to give the editor a cleaner look. But don't worry! Aside from the new Anchor control, everything should still be in the same spot as before.
A lot of the small pop-ups or modals also got a slight facelift, but they should otherwise contain all the same things.
Div style is now Paragraph style
We had to roll back this change after it conflicted with authors using lists and other HTML that can't be embedded within a paragraph. Leaving it here but striking it out for posterity.
This is the change that may most impact your custom styles and your editor workflow.
In the old editor, the dropdown next to Paragraph format was called Div style. It allowed you to add Well, Alert Danger, Alert Info, and other callouts or specially formatted divs into your content.
The new editor has these same controls but instead of going into div elements, they go into paragraphs instead.
The display is identical for anyone using our default styles, so if you haven't customized things, you won't even notice this change.
If you have Custom CSS to style these divs, review it to be sure it applies properly to the new paragraph format.
Why we love it: This is better semantic HTML, which is a plus for accessibility, and it also makes it much easier to use these alerts within the editor!
It took me a hot minute to get used to the new editor experience for these callouts, so let me try to save you some time by explaining it in more detail:
Previously, if you hit Enter from within an alert div, it just added a line break inside the div, and you had to physically click outside of the div (or, if you were at the bottom of the page, click on that weird little blue arrow to get to a blank line outside of the div). This was an awkward and sometimes frustrating experience.
With the alerts in paragraphs instead, the editor treats them more like paragraphs. So when you hit Enter, it will create a new alert on the next line using the same style.
You can click the Paragraph style option again and select the same type of alert to remove it and shift back to a normal paragraph:
How to "get out of" an alert in the upgraded editorThis shift has already made the alerts much easier for me to use, and I'm hoping you find the same!
Bugs fixed
As with all upgrades, we also tried to fix some existing bugs with the editor experience. These are the ones we've confirmed seem fixed now:
- Better behavior when adding code blocks inside lists: Previously, if you tried to highlight one list item and make it code, the editor would duplicate the entire list and format the duplicate list as code. Now, only the list item you selected gets the code treatment, and only the text of it (not the number or bullet). So basically the behavior is actually what you'd expect now!
- Better behavior with resizing images with captions: Previously, if you had an image that you'd added a caption to, and you clicked the "Change Size" option in the image menu and entered a percentage as one of the values, the editor did some very odd things. It would basically make the image take up that percentage of space within the captioned section, rather than applying the percentage to the entire image + caption. We customized this behavior so that it properly applies things and doesn't leave you with any weird behavior.
