Rich Editor coming out of beta & Rich Editor file attachments

With the 2.8 release Rich Editor will be coming out of beta and will be the default on all new sites for mobile and desktop.

In order to make this possible we've been rapidly improving Rich Editor. Here's a few of the improvements we've made since the beta went out:

File Attachments

Rich editor supports file attachments in the post contents. Here's a couple examples.

These attachments are controlled by the Garden.Uploads.Add permission.

Syntax Highlighting / Code prettifying

Our new syntax highlighting is even better than what our previous code-prettifying plugin did. It is built into rich editor and works live in the editor as you type!

Here's an example using the code that starts up the syntax highlighter.

/**
 * @author Adam (charrondev) Charron <adam.c@vanillaforums.com>
 * @copyright 2009-2018 Vanilla Forums Inc.
 * @license GPL-2.0-only
 */

import BaseSyntaxModule from "quill/modules/syntax";
import Quill from "quill/core";
import CodeBlockBlot from "@rich-editor/quill/blots/blocks/CodeBlockBlot";

/**
 * Override the core syntax module to register our own code block.
 */
export default class SyntaxModule extends BaseSyntaxModule {
    public static register() {
        super.register();
        Quill.register(CodeBlockBlot);
    }

    /**
     * Overridden to ensure quill has focus before resetting the selection
     * because quill selection does not always get moved away from quill when focus moves.
     *
     * For example opening the paragraph menu retains selection, but the setSelection at the end here
     * would clear remove focus from the paragraph menu.
     *
     * Check if this needs to be removed with Quill 2.0.
     */
    public highlight() {
        if ((this.quill as any).selection.composing) {
            return;
        }
        this.quill.update(Quill.sources.USER);
        const range = this.quill.getSelection();
        const hasFocus = this.quill.hasFocus();
        (this.quill as any).scroll.descendants(CodeBlockBlot).forEach(code => {
            code.highlight(this.options.highlight);
        });
        this.quill.update(Quill.sources.SILENT);
        if (range != null && hasFocus) {
            this.quill.setSelection(range, Quill.sources.SILENT);
        }
    }
}

Bug Fixes

We're fixed numerous bugs affecting rich editors integration with various other parts of our systems.

• Rich Editor now mounts on every page.
• Rich Editor posts (as well as BBCode & Markdown which weren't) are now formatted in notification emails.
• Rich Editor now works with signatures.
• Rich Editor can no successfully paste almost any content while converting most of its formatting. This was recently tested in a sprint demo where an entire article from our public documentation was successfully copied and pasted into the editor with all formatting (line breaks, headings, paragraphs, bold, italic, etc) preserved.

For Advanced Editor Users

While we are still working on Advanced Editor -> Rich conversion tools, existing users of Advanced editor can set Rich Editor as their default editor without losing any existing content. Just be sure to leave on Advanced Editor as well an editing an existing post in bbcode, markdown, html, text, textex or wysiwyg will continue to use advanced editor.