Bump version to 9.0.0

.eslintrc.js

@@ -150,5 +150,20 @@ module.exports = {
         'prefer-const': 'error',
         'no-var': 'error',
         'etc/no-const-enum': ['error', { allowLocal: true }],
+        'import/no-default-export': 'error',
     },
+    overrides: [
+        {
+            files: [
+                'roosterjs-editor-*/**/*.ts',
+                'roosterjs-react/**/*.ts',
+                'roosterjs-react/**/*.tsx',
+                'roosterjs-color-utils/**/*.ts',
+                'roosterjs/**/*.ts',
+            ],
+            rules: {
+                'import/no-default-export': 'off',
+            },
+        },
+    ],
 };

README.md

@@ -6,13 +6,17 @@ Rooster is a framework-independent JavaScript rich-text editor neatly nested
 inside one HTML `<div>` element. Editing operations performed by end users are
 handled in simple ways to generate the final HTML.
 
-To view the sample site, please click the link below:
+Rooster is working on top of a middle layer data structure called "Content Model".
+All format API and editing operation are using this Content Model layer as content format,
+and finally convert to HTML and show it in editor.
 
-[RoosterJs Sample Site](https://microsoft.github.io/roosterjs/index.html).
+To view the demo site, please click the link below:
 
-## Upgrade from RoosterJs 7.\*
+[RoosterJs Demo Site](https://microsoft.github.io/roosterjs/index.html).
 
-Please see [here](https://github.com/microsoft/roosterjs/wiki/RoosterJs-8).
+## Upgrade from RoosterJs 8.\*
+
+Please see [here](https://github.com/microsoft/roosterjs/wiki/RoosterJs-9).
 
 ## Features
 
@@ -25,24 +29,22 @@ Rooster contains 6 basic packages.
    `createEditor()` function in roosterjs to create an editor with default
    configurations.
 
-2. [roosterjs-editor-core](https://microsoft.github.io/roosterjs/docs/modules/roosterjs_editor_core.html):
-   Defines the core editor and plugin infrastructure. Use `roosterjs-editor-core`
+2. [roosterjs-content-model-core](https://microsoft.github.io/roosterjs/docs/modules/roosterjs_content_model_core.html):
+   Defines the core editor and plugin infrastructure. Use `roosterjs-content-model-core`
    instead of `roosterjs` to build and customize your own editor.
 
-3. [roosterjs-editor-api](https://microsoft.github.io/roosterjs/docs/modules/roosterjs_editor_api.html):
+3. [roosterjs-content-model-api](https://microsoft.github.io/roosterjs/docs/modules/roosterjs_content_model_api.html):
    Defines APIs for editor operations. Use these APIs to modify content and
-   formatting in the editor you built using `roosterjs-editor-core`.
+   formatting in the editor you built using `roosterjs-content-model-core`.
 
-4. [roosterjs-editor-dom](https://microsoft.github.io/roosterjs/docs/modules/roosterjs_editor_dom.html):
-   Defines APIs for DOM operations. Use `roosterjs-editor-api` instead unless
-   you want to access DOM API directly.
+4. [roosterjs-content-model-dom](https://microsoft.github.io/roosterjs/docs/modules/roosterjs_content_model_dom.html):
+   Defines APIs for Content Model and DOM operations. This package do conversion between DOM tree and roosterjs Content Model.
 
-5. [roosterjs-editor-plugins](https://microsoft.github.io/roosterjs/docs/modules/roosterjs_editor_plugins.html):
-   Defines basic plugins for common features. Examples: making hyperlinks,
-   pasting HTML content, inserting inline images.
+5. [roosterjs-content-model-plugins](https://microsoft.github.io/roosterjs/docs/modules/roosterjs_content_model_plugins.html):
+   Defines basic plugins for common features.
 
-6. [roosterjs-editor-types](https://microsoft.github.io/roosterjs/docs/modules/roosterjs_editor_types.html):
-   Defines public interfaces and enumerations.
+6. [roosterjs-content-model-types](https://microsoft.github.io/roosterjs/docs/modules/roosterjs_content_model_types.html):
+   Defines public interfaces and enumerations, including Content Model types, API parameters and other types.
 
 There are also some extension packages to provide additional functionalities.
 
@@ -52,30 +54,38 @@ There are also some extension packages to provide additional functionalities.
 2. [roosterjs-react](https://microsoft.github.io/roosterjs/docs/modules/roosterjs_react.html):
    Provide a React wrapper of roosterjs so it can be easily used with React.
 
-3. [roosterjs-editor-types-compatible](https://microsoft.github.io/roosterjs/docs/modules/roosterjs_editor_types_compatible.html):
-   Provide types that are compatible with isolatedModules mode. When using isolatedModules mode,
-   "const enum" will not work correctly, this package provides enums with prefix "Compatible" in
-   their names and they have the same value with const enums in roosterjs-editor-types package
+To be compatible with old (8.\*) versions, you can use `EditorAdapter` class from the following package which can act as a 8.\* Editor:
+
+1. [roosterjs-editor-adapter](https://microsoft.github.io/roosterjs/docs/modules/roosterjs_editor_adapter.html):
+   Provide a adapter class `EditorAdapter` to work with Editor (9.\*) and legacy plugins (via [EditorAdapterOptions.legacyPlugins](https://microsoft.github.io/roosterjs/docs/interfaces/roosterjs_editor_adapter.editoradapteroptions.html#legacyplugins))
+
+And the following packages are for old (8.\*) compatibility:
+
+1. [roosterjs-editor-core](https://microsoft.github.io/roosterjs/docs/modules/roosterjs_editor_core.html):
+2. [roosterjs-editor-api](https://microsoft.github.io/roosterjs/docs/modules/roosterjs_editor_api.html):
+3. [roosterjs-editor-dom](https://microsoft.github.io/roosterjs/docs/modules/roosterjs_editor_dom.html):
+4. [roosterjs-editor-plugins](https://microsoft.github.io/roosterjs/docs/modules/roosterjs_editor_plugins.html):
+5. [roosterjs-editor-types](https://microsoft.github.io/roosterjs/docs/modules/roosterjs_editor_types.html):
+6. [roosterjs-editor-types-compatible](https://microsoft.github.io/roosterjs/docs/modules/roosterjs_editor_types_compatible.html):
 
 ### APIs
 
-Rooster provides DOM level APIs (in `roosterjs-editor-dom`), core APIs (in `roosterjs-editor-core`), and formatting APIs
-(in `roosterjs-editor-api`) to perform editing operations.
+Rooster provides Content Model level APIs (in `roosterjs-content-model-dom`), core APIs (in `roosterjs-content-model-core`), and formatting APIs
+(in `roosterjs-content-modelapi`) to perform editing operations.
 
-`roosterjs-editor-dom` provides several levels of DOM operations:
+`roosterjs-content-model-dom` provides several levels of Content Model operations:
 
--   Perform basic DOM operations such as `wrap()`, `unwrap()`, ...
--   Wrap a given DOM node with `InlineElement` or `BlockElement` and perform
-    operations with DOM Walker API.
--   Perform DOM operations on a given scope using scopers.
--   Travel among `InlineElements` and `BlockElements` with scope using
-    ContentTraverser API.
+-   Create Content Model elements
+-   Convert DOM tree to Content Model
+-   Convert Content Model to DOM tree
+-   Format handlers
+-   A few DOM level API
 
-`roosterjs-editor-core` provides APIs for editor core. Editor class will call such
-APIs to perform basic editor operations. These APIs are overridable by specifying
+`roosterjs-content-model-core` provides APIs for editor core. Editor class will call such
+APIs to perform basic editor operations. These APIs can be overridden by specifying
 API overrides in Editor options when creating the editor.
 
-`roosterjs-editor-api` provides APIs for scenario-based operations triggered by
+`roosterjs-content-model-api` provides APIs for scenario-based operations triggered by
 user interaction.
 
 ## Plugins
@@ -99,7 +109,7 @@ class HelloRooster implements EditorPlugin {
     dispose() {}
 
     onPluginEvent(e: PluginEvent) {
-        if (e.eventType == PluginEventType.KeyPress && e.rawEvent.which == 65) {
+        if (e.eventType == 'input' && e.rawEvent.which == 65) {
             alert('Hello Rooster');
         }
     }
@@ -114,9 +124,9 @@ Install via NPM or Yarn:
 
 You can also install sub packages separately:
 
-`yarn add roosterjs-editor-core`
+`yarn add roosterjs-content-model-core`
 
-`yarn add roosterjs-editor-api`
+`yarn add roosterjs-content-model-api`
 
 `...`
 
@@ -161,9 +171,9 @@ In order to run the code below, you may also need to install [webpack](https://w
 
 ## Sample code
 
-To view the sample site, please click [here](https://microsoft.github.io/roosterjs/index.html).
+To view the demo site, please click [here](https://microsoft.github.io/roosterjs/index.html).
 
-To build the sample site code yourself, follow these instructions:
+To build the demo site code yourself, follow these instructions:
 
 1. Get dependencies using [yarn](https://yarnpkg.com) or [npm](https://www.npmjs.com/):
 

demo/index.html

@@ -21,8 +21,8 @@
         <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.14.0/umd/react.production.min.js"></script>
         <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.14.0/umd/react-dom.production.min.js"></script>
         <script src="https://cdnjs.cloudflare.com/ajax/libs/fluentui-react/8.60.1/fluentui-react.min.js"></script>
+        <script src="rooster-legacy-min.js"></script>
         <script src="rooster-min.js"></script>
-        <script src="rooster-content-model-min.js"></script>
         <script src="rooster-adapter-min.js"></script>
         <script src="rooster-react-min.js"></script>
         <script src="demo.js"></script>

demo/scripts/controls/sidePane/editorOptions/OptionsPane.tsx

@@ -23,7 +23,7 @@ const htmlButtons =
     '<button id=buttonRedo>Redo</button>\n';
 const darkButton = '<button id=buttonDark>Dark Mode</button>\n';
 const htmlEnd =
-    '<script src="https://microsoft.github.io/roosterjs/rooster-min.js"></script>\n' +
+    '<script src="https://microsoft.github.io/roosterjs/rooster-legacy-min.js"></script>\n' +
     '</body>\n' +
     '</html>';
 
@@ -34,7 +34,7 @@ const htmlRoosterReact =
     '<script src="https://unpkg.com/react@16/umd/react.development.js"></script>\n' +
     '<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>\n' +
     '<script src="https://cdnjs.cloudflare.com/ajax/libs/fluentui-react/8.60.1/fluentui-react.min.js"></script>\n' +
-    '<script src="https://microsoft.github.io/roosterjs/rooster-min.js"></script>\n' +
+    '<script src="https://microsoft.github.io/roosterjs/rooster-legacy-min.js"></script>\n' +
     '<script src="https://microsoft.github.io/roosterjs/rooster-react-min.js"></script>\n' +
     '</body>\n' +
     '</html>';

demo/scripts/controls/sidePane/editorOptions/codes/ButtonsCode.ts

@@ -2,11 +2,11 @@ import CodeElement from './CodeElement';
 import { getObjectKeys } from 'roosterjs-editor-dom';
 
 const codeMap: { [id: string]: string } = {
-    buttonB: 'roosterjs.toggleBold(editor)',
-    buttonI: 'roosterjs.toggleItalic(editor)',
-    buttonU: 'roosterjs.toggleUnderline(editor)',
-    buttonBullet: 'roosterjs.toggleBullet(editor)',
-    buttonNumbering: 'roosterjs.toggleNumbering(editor)',
+    buttonB: 'roosterjsLegacy.toggleBold(editor)',
+    buttonI: 'roosterjsLegacy.toggleItalic(editor)',
+    buttonU: 'roosterjsLegacy.toggleUnderline(editor)',
+    buttonBullet: 'roosterjsLegacy.toggleBullet(editor)',
+    buttonNumbering: 'roosterjsLegacy.toggleNumbering(editor)',
     buttonUndo: 'editor.undo()',
     buttonRedo: 'editor.redo()',
 };

demo/scripts/controls/sidePane/editorOptions/codes/ContentEditCode.ts

@@ -10,6 +10,6 @@ export default class ContentEditCode extends CodeElement {
     }
 
     getCode() {
-        return 'new roosterjs.ContentEdit(' + this.features.getCode() + ')';
+        return 'new roosterjsLegacy.ContentEdit(' + this.features.getCode() + ')';
     }
 }

demo/scripts/controls/sidePane/editorOptions/codes/DarkModeCode.ts

@@ -2,6 +2,6 @@ import CodeElement from './CodeElement';
 
 export default class DarkModeCode extends CodeElement {
     getCode() {
-        return 'roosterjs.getDarkColor';
+        return 'roosterjsLegacy.getDarkColor';
     }
 }

demo/scripts/controls/sidePane/editorOptions/codes/EditorCode.ts

@@ -27,18 +27,18 @@ export default class EditorCode extends CodeElement {
         let defaultFormat = this.defaultFormat.getCode();
         let expermientalFeatures = this.experimentalFeatures.getCode();
         let darkMode = this.darkMode.getCode();
-        let code = "let contentDiv = document.getElementById('contentDiv') as HTMLDivElement;\n";
+        let code = "let contentDiv = document.getElementById('contentDiv');\n";
         code += `let plugins = ${this.plugins.getCode()};\n`;
         code += defaultFormat ? `let defaultFormat: DefaultFormat = ${defaultFormat};\n` : '';
-        code += 'let options: roosterjs.EditorOptions = {\n';
+        code += 'let options = {\n';
         code += this.indent('plugins: plugins,\n');
         code += defaultFormat ? this.indent('defaultFormat: defaultFormat,\n') : '';
         code += expermientalFeatures
             ? this.indent(`experimentalFeatures: [\n${expermientalFeatures}],\n`)
             : '';
         code += darkMode ? this.indent(`getDarkColor: ${darkMode},\n`) : '';
         code += '};\n';
-        code += 'let editor = new roosterjs.Editor(contentDiv, options);\n';
+        code += 'let editor = new roosterjsLegacy.Editor(contentDiv, options);\n';
         code += this.buttons ? this.buttons.getCode() : '';
 
         return code;

demo/scripts/controls/sidePane/editorOptions/codes/HyperLinkCode.ts

@@ -7,7 +7,7 @@ export default class HyperLinkCode extends CodeElement {
     }
 
     getCode() {
-        return 'new roosterjs.HyperLink(' + this.getLinkCallback() + ')';
+        return 'new roosterjsLegacy.HyperLink(' + this.getLinkCallback() + ')';
     }
 
     private getLinkCallback() {

demo/scripts/controls/sidePane/editorOptions/codes/PluginsCode.ts

@@ -4,12 +4,7 @@ import ContentEditCode from './ContentEditCode';
 import HyperLinkCode from './HyperLinkCode';
 import TableCellSelectionCode from './TableCellSelectionCode';
 import WatermarkCode from './WatermarkCode';
-import {
-    CustomReplaceCode,
-    CutPasteListChainCode,
-    ImageEditCode,
-    ContentModelPasteCode,
-} from './SimplePluginCode';
+import { CustomReplaceCode, CutPasteListChainCode, ImageEditCode } from './SimplePluginCode';
 
 export default class PluginsCode extends CodeElement {
     private plugins: CodeElement[];
@@ -21,7 +16,6 @@ export default class PluginsCode extends CodeElement {
         this.plugins = [
             pluginList.contentEdit && new ContentEditCode(state.contentEditFeatures),
             pluginList.hyperlink && new HyperLinkCode(state.linkTitle),
-            new ContentModelPasteCode(),
             pluginList.watermark && new WatermarkCode(this.state.watermarkText),
             pluginList.imageEdit && new ImageEditCode(),
             pluginList.cutPasteListChain && new CutPasteListChainCode(),

demo/scripts/controls/sidePane/editorOptions/codes/ReactEditorCode.ts

@@ -41,8 +41,8 @@ export default class ReactEditorCode extends CodeElement {
         }
 
         code += `let plugins = ${this.plugins.getCode()};\n`;
-        code += defaultFormat ? `let defaultFormat: DefaultFormat = ${defaultFormat};\n` : '';
-        code += 'let options: roosterjs.EditorOptions = {\n';
+        code += defaultFormat ? `let defaultFormat = ${defaultFormat};\n` : '';
+        code += 'let options = {\n';
         code += this.indent('plugins: plugins,\n');
         code += defaultFormat ? this.indent('defaultFormat: defaultFormat,\n') : '';
         code += expermientalFeatures

demo/scripts/controls/sidePane/editorOptions/codes/SimplePluginCode.ts

@@ -1,7 +1,7 @@
 import CodeElement from './CodeElement';
 
 class SimplePluginCode extends CodeElement {
-    constructor(private name: string, private namespace: string = 'roosterjs') {
+    constructor(private name: string, private namespace: string = 'roosterjsLegacy') {
         super();
     }
 
@@ -16,12 +16,6 @@ export class PasteCode extends SimplePluginCode {
     }
 }
 
-export class ContentModelPasteCode extends SimplePluginCode {
-    constructor() {
-        super('PastePlugin', 'roosterjsContentModel');
-    }
-}
-
 export class ImageEditCode extends SimplePluginCode {
     constructor() {
         super('ImageEdit');

demo/scripts/controls/sidePane/editorOptions/codes/TableCellSelectionCode.ts

@@ -6,6 +6,6 @@ export default class TableCellSelectionCode extends CodeElement {
     }
 
     getCode() {
-        return 'new roosterjs.TableCellSelection()';
+        return 'new roosterjsLegacy.TableCellSelection()';
     }
 }

demo/scripts/controls/sidePane/editorOptions/codes/WatermarkCode.ts

@@ -6,6 +6,6 @@ export default class WatermarkCode extends CodeElement {
     }
 
     getCode() {
-        return `new roosterjs.Watermark('${this.encode(this.watermarkText)}')`;
+        return `new roosterjsLegacy.Watermark('${this.encode(this.watermarkText)}')`;
     }
 }

demo/scripts/controlsV2/demoButtons/darkModeButton.ts

@@ -21,4 +21,9 @@ export const darkModeButton: RibbonButton<DarkModeButtonStringKey> = {
         MainPane.getInstance().toggleDarkMode();
         return true;
     },
+    commandBarProperties: {
+        buttonStyles: {
+            icon: { paddingBottom: '10px' },
+        },
+    },
 };

demo/scripts/controlsV2/demoButtons/exportContentButton.ts

@@ -19,4 +19,9 @@ export const exportContentButton: RibbonButton<ExportButtonStringKey> = {
         const html = exportContent(editor);
         win.document.write(editor.getTrustedHTMLHandler()(html));
     },
+    commandBarProperties: {
+        buttonStyles: {
+            icon: { paddingBottom: '10px' },
+        },
+    },
 };

demo/scripts/controlsV2/demoButtons/formatPainterButton.ts

@@ -1,15 +1,19 @@
-import { FormatPainterPlugin } from '../plugins/FormatPainterPlugin';
+import { FormatPainterHandler } from '../plugins/FormatPainterPlugin';
 import type { RibbonButton } from '../roosterjsReact/ribbon';
 
 /**
  * @internal
  * "Format Painter" button on the format ribbon
  */
-export const formatPainterButton: RibbonButton<'formatPainter'> = {
-    key: 'formatPainter',
-    unlocalizedText: 'Format painter',
-    iconName: 'Brush',
-    onClick: () => {
-        FormatPainterPlugin.startFormatPainter();
-    },
-};
+export function createFormatPainterButton(
+    handler: FormatPainterHandler
+): RibbonButton<'formatPainter'> {
+    return {
+        key: 'formatPainter',
+        unlocalizedText: 'Format painter',
+        iconName: 'Brush',
+        onClick: () => {
+            handler.startFormatPainter();
+        },
+    };
+}

demo/scripts/controlsV2/demoButtons/formatTableButton.ts

@@ -1,5 +1,5 @@
 import { formatTable } from 'roosterjs-content-model-api';
-import { TableBorderFormat } from 'roosterjs-content-model-core';
+import { TableBorderFormat } from 'roosterjs-content-model-dom';
 import { TableMetadataFormat } from 'roosterjs-content-model-types';
 import type { RibbonButton } from '../roosterjsReact/ribbon';
 

demo/scripts/controlsV2/demoButtons/pasteButton.ts

@@ -1,4 +1,5 @@
-import { extractClipboardItems, paste } from 'roosterjs-content-model-core';
+import { extractClipboardItems } from 'roosterjs-content-model-dom';
+import { paste } from 'roosterjs-content-model-core';
 import type { RibbonButton } from '../roosterjsReact/ribbon';
 
 /**