In the April 2024 Site Builder platform update, the rich text editor has been upgraded. This editor is used when inputting formatted text throughout sites (like the body field for a Page or Text Block).

This new editor provides many usability improvements and a refreshed toolbar design and experience.

Major Changes

Redesigned Toolbar

The toolbar has received a design overhaul to look more modern.

Before:

After:

Note the following changes:

1. The "Full screen" button has been removed temporarily (see "Known Issues" below).
2. The "unlink" button has been removed. Removing links is now handled via an inline dialog that appears when selecting an existing link in the editor.
3. The text alignment buttons for left, center, and right and have collapsed to a single drop-button.
4. The "Paste as Plaintext" button has been removed. This button didn't do anything other than prompt the user to use keyboard shortcuts. To paste contents and have all formatting stripped away, use Ctrl + Shift + V (on Windows computers) or Cmd + Shift + V (on Mac computers).
5. The "Paste from Word" button has been removed. Pasted content that is derived from MS Word or Google Docs is automatically detected and formatting is converted where possible.
6. There is a new button for inserting a block of pre-formatted text. It appears between the existing icons for inserting special characters and code.

Styles Drop-down

The drop-down menu for styles has been updated:

1. It now shows all defined styles, not just those that are applicable to the current selected text (this may be changed in a future update). Styles that cannot be applied to the selected text will be disabled (greyed out).
2. Styles are shown with a small preview window that is intended to demonstrate the effect of the style. However, these previews have not been implemented for most of Site Builder's styles. We may implement this in the future.
3. The element a style applies to must first be created before a style can be applied to it. For example, to apply a heading style, first create the heading, then select the style after highlighting the heading. For links styles, create the link, then highlight it and select the link style. This behavior may change in the future to allow selecting styles and have their associated elements automatically created.
4. Multiple styles can now be applied to a single element, though this is not intentional and will likely be disabled in the future. Most styles that we provide are NOT intended to be combined.

Linking Experience

The Link button in the toolbar now opens a inline dialog where your cursor is. This dialog has a field to find and select site content or paste a URL for an external link (just like the old modal did). It's recommended to first type the text of the link in the editor, highlight it, and press the link button.

Note that you can use a keyboard shortcut Ctrl + K (Windows) or Cmd + K (Mac) to create a link. This shortcut is commonly used in many applications that support linking and is helpful when writing content with many links.

Here's a look a the new inline link dialog:

Auto-formatting

The editor now supports auto-formatting by reacting to certain inputs. These shortcuts enable entering formatted content quickly and are commonly found in other text-editing applications as well.

Inline Auto-formatting

• Bold: Type ** or __ around your text.
• Italic: Type * or _ around your text.
• Code: Type ˋ around your text.

Block Auto-formatting

• Block quotes - Start a line with ﹥ followed by a space.
• Headings:
  1. Heading 2 - Start a line with ## followed by a space.
  2. Heading 3 - Start a line with ### followed by a space.
  3. Heading 4 - Start a line with #### followed by a space.
• Lists:
  • Numbered lists - Start a line with 1. or 1) followed by a space.
  • Bulleted lists - Start a line with * or - followed by a space.
• Code blocks - Start a line with ˋˋˋ.
• Horizontal lines - Start a line with ---.

Miscellaneous Changes

Tables

The process for inserting and managing tables has changed. The button now allows you to select the initial table grid (rows and columns). After the table is inserted, there are additional inline buttons for adding/removing rows and columns, designating header rows and columns, and adding a table caption.

Media

Inserted media has new inline buttons to re-open the embed modal, add a link, and open a new window to edit the media:

Known Issues

Full Screen Button Unavailable

The button to expand the editor to full screen is no longer available, but we expect to add it back later this year.

Custom Ordering Style for Ordered Lists Unavailable

In the old editor, the style of the numbered ordered lists could be modified by right-clicking the list and choosing a different style like alphabetical (a., b., c., etc) or roman (i., ii., iii., etc). In the new editor, there is no method to change the list style by right-clicking.

There are plans to re-introduce this feature in an upcoming release. Until then, a workaround exists to set the style type manually by editing the source HTML and inserting the appropriate attribute:

1. Click the "Source" button in the toolbar
2. Find the <ol> element that corresponds with the list
3. Add a "type" attribute as follow:
   1. <ol type="i"> for Lower Roman (i, ii, iii, etc.)
   2. <ol type="I">for Upper Roman (I, II, III, etc.)
   3. <ol type="a"> for Lower Alpha (a, b, c, etc.)
   4. <ol type="A"> for Upper Alpha (A, B, C, etc.)

Caption Overrides Unavailable

In the old editor, captions from embedded images could be overridden with a different caption. This is no longer possible in the new editor. Previously overridden captions are still respected, but they cannot be modified in the editor. At this time, due to technology constraints, we don't currently have plans to restore this feature.