RoosterJs 9

Changes in RoosterJs 9.0.0

Start from RoosterJs 9.0.0, the editor is built based on a middle layer called "Content Model". All formatting behavior will happen on top of this middle layer, directly DOM operation will be avoided as much as possible.

As a result, there are a lot of public interface changes. Some original API are removed, more new API/utilities are added.

New IEditor interface

To replace the old roosterjs-editor-core package and Editor/IEditor type, we created new Editor/IEditor types. You can use Editor class from package roosterjs-content-model-core to create a new instance of Content Model based editor. For example:

import { Editor } from 'roosterjs-content-model-core';

const editor = new Editor(div, {
    defaultSegmentFormat: {
        fontSize: '10pt',
    },
    plugins: [ new MyPlugin(), ...], // Plugins that implement new EditorPlugin interface
    initialModel: {
        ... // Initial Content Model that will be used as initial content in editor
    }
});

For more information about this package, please see here

Migrate to EditorAdapter

To help on board RoosterJs 9.0.0, we provided an adapter class EditorAdapter which is compatible with IEditor from RoosterJs 8.x. EditorAdapter is located in package roosterjs-editor-adapter which keeps using version 8.x. For more information, please see here.

EditorAdapter provides the same interface with original IEditor. Its constructor also accepts a DIV element and an option object. The only difference is you need to use legacyPlugins property to pass in plugins that works with RoosterJs 8.x since the new plugins property is preserved for plugins that work with RoosterJs 9.x.

For example, you have the code to create editor using RoosterJs 8.x:

import { Editor } from 'roosterjs-editor-core';

const plugins = [new MyPlugin(), ...]
const defaultFormat = {
    fontSize: '10pt',
}
const editor = new Editor(div, {
    defaultFormat: defaultFormat,
    plugins: plugins
});

With RoosterJs 9.x and EditorAdapter, this should be changed to:

import { EditorAdapter } from 'roosterjs-editor-adapter';

const plugins = [new MyPlugin(), ...]
const defaultFormat = {
    fontSize: '10pt',
}
const editor = new EditorAdapter(div, {
    defaultFormat: defaultFormat,
    legacyPlugins: plugins
});

EditorAdapter implements both old and new IEditor interface so it can work with both old and new API.

Although EditorAdapter can be fully compatible with old plugins and API, it still has dependency to old packages such as roosterjs-editor-dom so this will have some bundle size overhead since their functionalities can already be replaced by new Content Model based editor and API. So we recommend to fully convert your code to using new API from 9.x when upgrade.

Using plugins from RoosterJs 9.x

RoosterJs 9.x provides package roosterjs-content-model-plugins for public plugins, to replace the old package roosterjs-editor-plugins. As of 9.0.0, The following plugins from 8.x already have related plugin in 9.x:

8.x Name	9.x Name
AutoFormat	AutoFormatPlugin
ContentEdit	EditPlugin, AutoFormatPlugin
ContextMenu	ContextMenuPluginBase
Paste	PastePlugin
TableResize	TableEditPlugin
Watermark	WatermarkPlugin

The following plugins are still work in progress, they will be available in coming versions. To use them, you need to add them into legacyPlugins array when create editor (see above).

• Announce
• CustomReplace
• HyperLink
• ImageEdit
• Picker

And the following plugins are not needed any more since their functionalities are integrated into editor core:

• CutPasteListChain
• TableCellSelection

Using format API from RoosterJs 9.x

Format API from package roosterjs-editor-api are replaced with new Content Model based from API from package roosterjs-content-model-api. They can accept both new IEditor and EditorAdapter as parameter. For more information, please see here.