Bump version to 8.59.1 and 0.21.0 (#2236)

* margin in lists * remove code * type * refactor * fixes * remove parameter * refactor * remove file change * Use Content Model to handle Delete/Backspace key in more cases (#2162) * Do not set focus when quite shadow edit (#2163) * Fix #237217 (#2164) * Fix #237735 (#2165) * Fix #236416 (#2166) * wip * fixes * Fix #2160 (#2167) * Fix #2160 * fix build * test * remove test * remove test * remove test * Rearrange parameters of iterateSelections (#2180) * Rearrange parameters of iterateSelections * improve * Standalone editor step 0: Create a copy of Editor class (#2175) * Standalone editor step 0: Create a copy of Editor class * remove unnecessary change * improve * Fix #2061, apply pending format on Android (#2172) * Fix #2061 * Fix for Android * Fix #2080 (#2173) * Standalone editor Step 0.5: Create test page for adapter editor (#2176) * Standalone editor step 0: Create a copy of Editor class * Standalone editor Step 0.5: Create test page for adapter editor * Add Content Model functionality to AdapterEditor * remove unnecessary change * remove unnecessary change * improve * toggleListType * type * Fix Mouseout behavior to hide table editors (#2181) * init * init * fix build * Add comment * Fix apply Table Inside borders operation and Demo site (#2184) * fix cases * fix demo * Add image size checkmarks to context menu (#2168) * Allow a max error un percentage size check * Allow a checkmark to be shown in ctx menu * Add checkmark to image sizes * Add missing type * Fix types * Add comment * Attempt to fix image selection * Revert unneeded changes in image selection * Use attr as backup in resize calc * Rely entirely on image selection * Revert changes to domeventplugin * Copy changes into content model adapter * Revert previous standalone editor change (#2189) * Revert previous standalone change * fix build * Move formatWithContentModel to be a core API (#2185) * Content Model: Allow clear cache from formatContentModel (#2186) * Move formatWithContentModel to be a core API * Content Model: Allow clear cache from formatContentModel * Content Model: Potential perf improvement in getFormatState (#2187) * Content Model: Move pending format into editor core (#2188) * Move formatWithContentModel to be a core API * Content Model: Allow clear cache from formatContentModel * Content Model: Move pending format into editor core * Convert DeleteResult from const enum to string literal type (#2191) * Move paste plugin to roosterjs-content-model-plugins package (#2192) * image selection plugin * check image parent node * Adding module entry to package.json (#2197) * Move ContentModelEdit plugin to plugins package (#2195) * Move ContentModelEdit plugin to plugins package * improve --------- Co-authored-by: Bryan Valverde U <[email protected]> * Move type files to roosterjs-content-model-types package (#2196) * Move ContentModelEdit plugin to plugins package * Move types to roosterjs-content-model-types package * improve * Improve * improve * Improve * improve * fix build * fix build * Move core API to roosterjs-content-model-core package (#2198) * Move ContentModelEdit plugin to plugins package * Move types to roosterjs-content-model-types package * improve * Improve * improve * Improve * improve * Move core API to core package * fix build * improve * fix build * fix build * Move corePlugins to roosterjs-content-model-core package (#2199) * Move ContentModelEdit plugin to plugins package * Move types to roosterjs-content-model-types package * improve * Improve * improve * Improve * improve * Move core API to core package * fix build * improve * Move corePlugins to roosterjs-content-model-core package * fix build * improve * fix build * fix build * Move format API to roosterjs-content-model-api package (#2200) * Move ContentModelEdit plugin to plugins package * Move types to roosterjs-content-model-types package * improve * Improve * improve * Improve * improve * Move core API to core package * fix build * improve * Move corePlugins to roosterjs-content-model-core package * fix build * improve * fix build * Move format API to roosterjs-content-model-api package * fix build * Improve * Decouple ContentModelEditor from roosterjs-editor-core (#2201) * Move ContentModelEdit plugin to plugins package * Move types to roosterjs-content-model-types package * improve * Improve * improve * Improve * improve * Move core API to core package * fix build * improve * Move corePlugins to roosterjs-content-model-core package * fix build * improve * fix build * Move format API to roosterjs-content-model-api package * fix build * Improve * Decouple ContentModelEditor from roosterjs-editor-core * improve * Remove public enum from Content Model (#2204) * Directly create Content Model editor (#2206) * Fix Delimiter Nested Entity Scenario (#2207) * init * comment * Standalone editor: Remove dependency to EditorCore (#2208) * Remove dependency to EditorCore * fix test * improve --------- Co-authored-by: Bryan Valverde U <[email protected]> * Standalone Editor: Remove legacy plugin: PendingFormatStatePlugin (#2209) * Remove dependency to EditorCore * fix test * improve * Standalone editor: Remove PendingFormatStatePlugin * fix build * Standalone editor: Merge DOMEventPlugin and MouseUpPlugin (#2210) * Remove dependency to EditorCore * fix test * improve * Standalone editor: Remove PendingFormatStatePlugin * fix build * Merge DOMEventPlugin and MouseUpPlugin * Standalone Editor: CreateStandaloneEditorCore (#2218) * Standalone Editor: Port LifecyclePlugin (#2219) * Standalone Editor: CreateStandaloneEditorCore * Standalone Editor: Port LifecyclePlugin * fix build * fix test * improve * fix test * fix comment * select on click * test * Standalone Editor: Support keyboard input (init step) (#2221) * apply table format fix * remove console.log * fix comments * Standalone Editor: Port EntityPlugin (#2223) * Standalone Editor: CreateStandaloneEditorCore * Standalone Editor: Port LifecyclePlugin * fix build * fix test * improve * fix test * Standalone Editor: Support keyboard input (init step) * Standalone Editor: Port EntityPlugin * improve * Add test * improve * test * Content Model: Keep image port if exist (#2226) * add color spectrum check * auto format test * remove empty line * Allow each package has its own version when publish (#2233) * Allow each package has its own version when publish * remove unnecessary change * Content Model: Fix #2230 (#2231) * Content Model: keep default format when paste into empty editor (#2232) * Standalone Editor: Add a SelectionPlugin (#2228) --------- Co-authored-by: Júlia Roldi <[email protected]> Co-authored-by: Julia Roldi <[email protected]> Co-authored-by: Bryan Valverde U <[email protected]> Co-authored-by: Andres-CT98 <[email protected]> Co-authored-by: Ian Elizondo <[email protected]> Co-authored-by: Keven Arroyo <[email protected]>
microsoft · Dec 1, 2023 · 03a0395 · 03a0395
1 parent bbf6a43
commit 03a0395
Show file tree

Hide file tree

Showing 152 changed files with 10,680 additions and 1,549 deletions.
diff --git a/demo/scripts/controls/ContentModelEditorMainPane.tsx b/demo/scripts/controls/ContentModelEditorMainPane.tsx
@@ -7,19 +7,26 @@ import ContentModelFormatPainterPlugin from './contentModel/plugins/ContentModel
 import ContentModelFormatStatePlugin from './sidePane/formatState/ContentModelFormatStatePlugin';
 import ContentModelPanePlugin from './sidePane/contentModel/ContentModelPanePlugin';
 import ContentModelRibbon from './ribbonButtons/contentModel/ContentModelRibbon';
+import ContentModelRooster from './contentModel/editor/ContentModelRooster';
 import getToggleablePlugins from './getToggleablePlugins';
-import MainPaneBase from './MainPaneBase';
+import MainPaneBase, { MainPaneBaseState } from './MainPaneBase';
 import SampleEntityPlugin from './sampleEntity/SampleEntityPlugin';
 import SidePane from './sidePane/SidePane';
 import SnapshotPlugin from './sidePane/snapshot/SnapshotPlugin';
 import TitleBar from './titleBar/TitleBar';
 import { arrayPush } from 'roosterjs-editor-dom';
-import { ContentModelEditor } from 'roosterjs-content-model-editor';
-import { ContentModelEditPlugin } from 'roosterjs-content-model-plugins';
+import { ContentModelEditPlugin, EntityDelimiterPlugin } from 'roosterjs-content-model-plugins';
 import { ContentModelRibbonPlugin } from './ribbonButtons/contentModel/ContentModelRibbonPlugin';
+import { ContentModelSegmentFormat } from 'roosterjs-content-model-types';
 import { createEmojiPlugin, createPasteOptionPlugin, RibbonPlugin } from 'roosterjs-react';
-import { EditorOptions, EditorPlugin } from 'roosterjs-editor-types';
+import { EditorPlugin } from 'roosterjs-editor-types';
 import { PartialTheme } from '@fluentui/react/lib/Theme';
+import { trustedHTMLHandler } from '../utils/trustedHTMLHandler';
+import {
+    ContentModelEditor,
+    ContentModelEditorOptions,
+    IContentModelEditor,
+} from 'roosterjs-content-model-editor';
 
 const styles = require('./ContentModelEditorMainPane.scss');
 
@@ -77,7 +84,11 @@ const DarkTheme: PartialTheme = {
     },
 };
 
-class ContentModelEditorMainPane extends MainPaneBase {
+interface ContentModelMainPaneState extends MainPaneBaseState {
+    editorCreator: (div: HTMLDivElement, options: ContentModelEditorOptions) => IContentModelEditor;
+}
+
+class ContentModelEditorMainPane extends MainPaneBase<ContentModelMainPaneState> {
     private formatStatePlugin: ContentModelFormatStatePlugin;
     private editorOptionPlugin: ContentModelEditorOptionsPlugin;
     private eventViewPlugin: ContentModelEventViewPlugin;
@@ -87,6 +98,7 @@ class ContentModelEditorMainPane extends MainPaneBase {
     private contentModelRibbonPlugin: RibbonPlugin;
     private pasteOptionPlugin: EditorPlugin;
     private emojiPlugin: EditorPlugin;
+    private entityDelimiterPlugin: EntityDelimiterPlugin;
     private toggleablePlugins: EditorPlugin[] | null = null;
     private formatPainterPlugin: ContentModelFormatPainterPlugin;
     private sampleEntityPlugin: SampleEntityPlugin;
@@ -104,6 +116,7 @@ class ContentModelEditorMainPane extends MainPaneBase {
         this.contentModelRibbonPlugin = new ContentModelRibbonPlugin();
         this.pasteOptionPlugin = createPasteOptionPlugin();
         this.emojiPlugin = createEmojiPlugin();
+        this.entityDelimiterPlugin = new EntityDelimiterPlugin();
         this.formatPainterPlugin = new ContentModelFormatPainterPlugin();
         this.sampleEntityPlugin = new SampleEntityPlugin();
         this.state = {
@@ -166,6 +179,7 @@ class ContentModelEditorMainPane extends MainPaneBase {
             this.contentModelEditPlugin,
             this.pasteOptionPlugin,
             this.emojiPlugin,
+            this.entityDelimiterPlugin,
             this.formatPainterPlugin,
             this.sampleEntityPlugin,
         ];
@@ -182,14 +196,60 @@ class ContentModelEditorMainPane extends MainPaneBase {
     resetEditor() {
         this.toggleablePlugins = null;
         this.setState({
-            editorCreator: (div: HTMLDivElement, options: EditorOptions) =>
+            editorCreator: (div: HTMLDivElement, options: ContentModelEditorOptions) =>
                 new ContentModelEditor(div, {
                     ...options,
                     cacheModel: this.state.initState.cacheModel,
                 }),
         });
     }
 
+    renderEditor() {
+        const styles = this.getStyles();
+        const allPlugins = this.getPlugins();
+        const editorStyles = {
+            transform: `scale(${this.state.scale})`,
+            transformOrigin: this.state.isRtl ? 'right top' : 'left top',
+            height: `calc(${100 / this.state.scale}%)`,
+            width: `calc(${100 / this.state.scale}%)`,
+        };
+        const format = this.state.initState.defaultFormat;
+        const defaultFormat: ContentModelSegmentFormat = {
+            fontWeight: format.bold ? 'bold' : undefined,
+            italic: format.italic || undefined,
+            underline: format.underline || undefined,
+            fontFamily: format.fontFamily || undefined,
+            fontSize: format.fontSize || undefined,
+            textColor: format.textColors?.lightModeColor || format.textColor || undefined,
+            backgroundColor:
+                format.backgroundColors?.lightModeColor || format.backgroundColor || undefined,
+        };
+
+        this.updateContentPlugin.forceUpdate();
+
+        return (
+            <div className={styles.editorContainer} id="EditorContainer">
+                <div style={editorStyles}>
+                    {this.state.editorCreator && (
+                        <ContentModelRooster
+                            className={styles.editor}
+                            plugins={allPlugins}
+                            defaultSegmentFormat={defaultFormat}
+                            inDarkMode={this.state.isDarkMode}
+                            experimentalFeatures={this.state.initState.experimentalFeatures}
+                            undoMetadataSnapshotService={this.snapshotPlugin.getSnapshotService()}
+                            trustedHTMLHandler={trustedHTMLHandler}
+                            zoomScale={this.state.scale}
+                            initialContent={this.content}
+                            editorCreator={this.state.editorCreator}
+                            dir={this.state.isRtl ? 'rtl' : 'ltr'}
+                        />
+                    )}
+                </div>
+            </div>
+        );
+    }
+
     getTheme(isDark: boolean): PartialTheme {
         return isDark ? DarkTheme : LightTheme;
     }

diff --git a/demo/scripts/controls/MainPane.tsx b/demo/scripts/controls/MainPane.tsx
@@ -5,18 +5,20 @@ import EditorOptionsPlugin from './sidePane/editorOptions/EditorOptionsPlugin';
 import EventViewPlugin from './sidePane/eventViewer/EventViewPlugin';
 import FormatStatePlugin from './sidePane/formatState/FormatStatePlugin';
 import getToggleablePlugins from './getToggleablePlugins';
-import MainPaneBase from './MainPaneBase';
+import MainPaneBase, { MainPaneBaseState } from './MainPaneBase';
 import SampleEntityPlugin from './sampleEntity/SampleEntityPlugin';
 import SidePane from './sidePane/SidePane';
 import SnapshotPlugin from './sidePane/snapshot/SnapshotPlugin';
 import TitleBar from './titleBar/TitleBar';
 import { arrayPush } from 'roosterjs-editor-dom';
 import { darkMode, DarkModeButtonStringKey } from './ribbonButtons/darkMode';
 import { Editor } from 'roosterjs-editor-core';
-import { EditorOptions, EditorPlugin } from 'roosterjs-editor-types';
+import { EditorOptions, EditorPlugin, IEditor } from 'roosterjs-editor-types';
 import { ExportButtonStringKey, exportContent } from './ribbonButtons/export';
+import { getDarkColor } from 'roosterjs-color-utils';
 import { PartialTheme } from '@fluentui/react/lib/Theme';
 import { popout, PopoutButtonStringKey } from './ribbonButtons/popout';
+import { trustedHTMLHandler } from '../utils/trustedHTMLHandler';
 import { zoom, ZoomButtonStringKey } from './ribbonButtons/zoom';
 import {
     createRibbonPlugin,
@@ -28,6 +30,7 @@ import {
     AllButtonStringKeys,
     getButtons,
     AllButtonKeys,
+    Rooster,
 } from 'roosterjs-react';
 
 const styles = require('./MainPane.scss');
@@ -92,7 +95,11 @@ const DarkTheme: PartialTheme = {
     },
 };
 
-class MainPane extends MainPaneBase {
+interface MainPaneState extends MainPaneBaseState {
+    editorCreator: (div: HTMLDivElement, options: EditorOptions) => IEditor;
+}
+
+class MainPane extends MainPaneBase<MainPaneState> {
     private formatStatePlugin: FormatStatePlugin;
     private editorOptionPlugin: EditorOptionsPlugin;
     private eventViewPlugin: EventViewPlugin;
@@ -204,6 +211,42 @@ class MainPane extends MainPaneBase {
         return isDark ? DarkTheme : LightTheme;
     }
 
+    renderEditor() {
+        const styles = this.getStyles();
+        const allPlugins = this.getPlugins();
+        const editorStyles = {
+            transform: `scale(${this.state.scale})`,
+            transformOrigin: this.state.isRtl ? 'right top' : 'left top',
+            height: `calc(${100 / this.state.scale}%)`,
+            width: `calc(${100 / this.state.scale}%)`,
+        };
+
+        this.updateContentPlugin.forceUpdate();
+
+        return (
+            <div className={styles.editorContainer} id="EditorContainer">
+                <div style={editorStyles}>
+                    {this.state.editorCreator && (
+                        <Rooster
+                            className={styles.editor}
+                            plugins={allPlugins}
+                            defaultFormat={this.state.initState.defaultFormat}
+                            inDarkMode={this.state.isDarkMode}
+                            getDarkColor={getDarkColor}
+                            experimentalFeatures={this.state.initState.experimentalFeatures}
+                            undoMetadataSnapshotService={this.snapshotPlugin.getSnapshotService()}
+                            trustedHTMLHandler={trustedHTMLHandler}
+                            zoomScale={this.state.scale}
+                            initialContent={this.content}
+                            editorCreator={this.state.editorCreator}
+                            dir={this.state.isRtl ? 'rtl' : 'ltr'}
+                        />
+                    )}
+                </div>
+            </div>
+        );
+    }
+
     private getSidePanePlugins() {
         return [
             this.formatStatePlugin,

diff --git a/demo/scripts/controls/MainPaneBase.tsx b/demo/scripts/controls/MainPaneBase.tsx
@@ -4,26 +4,19 @@ import BuildInPluginState from './BuildInPluginState';
 import SidePane from './sidePane/SidePane';
 import SnapshotPlugin from './sidePane/snapshot/SnapshotPlugin';
 import { Border } from 'roosterjs-content-model-types';
-import { EditorOptions, EditorPlugin, IEditor } from 'roosterjs-editor-types';
-import { getDarkColor } from 'roosterjs-color-utils';
+import { EditorPlugin } from 'roosterjs-editor-types';
 import { PartialTheme, ThemeProvider } from '@fluentui/react/lib/Theme';
 import { registerWindowForCss, unregisterWindowForCss } from '../utils/cssMonitor';
 import { trustedHTMLHandler } from '../utils/trustedHTMLHandler';
 import { WindowProvider } from '@fluentui/react/lib/WindowProvider';
-import {
-    createUpdateContentPlugin,
-    Rooster,
-    UpdateContentPlugin,
-    UpdateMode,
-} from 'roosterjs-react';
+import { createUpdateContentPlugin, UpdateContentPlugin, UpdateMode } from 'roosterjs-react';
 
 export interface MainPaneBaseState {
     showSidePane: boolean;
     popoutWindow: Window;
     initState: BuildInPluginState;
     scale: number;
     isDarkMode: boolean;
-    editorCreator: (div: HTMLDivElement, options: EditorOptions) => IEditor;
     isRtl: boolean;
     tableBorderFormat?: Border;
 }
@@ -34,9 +27,12 @@ const POPOUT_FEATURES = 'menubar=no,statusbar=no,width=1200,height=800';
 const POPOUT_URL = 'about:blank';
 const POPOUT_TARGET = '_blank';
 
-export default abstract class MainPaneBase extends React.Component<{}, MainPaneBaseState> {
+export default abstract class MainPaneBase<T extends MainPaneBaseState> extends React.Component<
+    {},
+    T
+> {
     private mouseX: number;
-    private static instance: MainPaneBase;
+    private static instance: MainPaneBase<MainPaneBaseState>;
     private popoutRoot: HTMLElement;
 
     protected sidePane = React.createRef<SidePane>();
@@ -70,6 +66,8 @@ export default abstract class MainPaneBase extends React.Component<{}, MainPaneB
 
     abstract getTheme(isDark: boolean): PartialTheme;
 
+    abstract renderEditor(): JSX.Element;
+
     render() {
         const styles = this.getStyles();
 
@@ -187,42 +185,6 @@ export default abstract class MainPaneBase extends React.Component<{}, MainPaneB
         );
     }
 
-    private renderEditor() {
-        const styles = this.getStyles();
-        const allPlugins = this.getPlugins();
-        const editorStyles = {
-            transform: `scale(${this.state.scale})`,
-            transformOrigin: this.state.isRtl ? 'right top' : 'left top',
-            height: `calc(${100 / this.state.scale}%)`,
-            width: `calc(${100 / this.state.scale}%)`,
-        };
-
-        this.updateContentPlugin.forceUpdate();
-
-        return (
-            <div className={styles.editorContainer} id="EditorContainer">
-                <div style={editorStyles}>
-                    {this.state.editorCreator && (
-                        <Rooster
-                            className={styles.editor}
-                            plugins={allPlugins}
-                            defaultFormat={this.state.initState.defaultFormat}
-                            inDarkMode={this.state.isDarkMode}
-                            getDarkColor={getDarkColor}
-                            experimentalFeatures={this.state.initState.experimentalFeatures}
-                            undoMetadataSnapshotService={this.snapshotPlugin.getSnapshotService()}
-                            trustedHTMLHandler={trustedHTMLHandler}
-                            zoomScale={this.state.scale}
-                            initialContent={this.content}
-                            editorCreator={this.state.editorCreator}
-                            dir={this.state.isRtl ? 'rtl' : 'ltr'}
-                        />
-                    )}
-                </div>
-            </div>
-        );
-    }
-
     private renderSidePaneButton() {
         const styles = this.getStyles();
 

diff --git a/.../scripts/controls/contentModel/components/format/formatPart/TableMetadataFormatRenders.ts b/.../scripts/controls/contentModel/components/format/formatPart/TableMetadataFormatRenders.ts
@@ -2,7 +2,9 @@ import { createCheckboxFormatRenderer } from '../utils/createCheckboxFormatRende
 import { createColorFormatRenderer } from '../utils/createColorFormatRender';
 import { createDropDownFormatRenderer } from '../utils/createDropDownFormatRenderer';
 import { FormatRenderer } from '../utils/FormatRenderer';
-import { TableBorderFormat, TableMetadataFormat } from 'roosterjs-content-model-types';
+import { getObjectKeys } from 'roosterjs-content-model-dom';
+import { TableBorderFormat } from 'roosterjs-content-model-core';
+import { TableMetadataFormat } from 'roosterjs-content-model-types';
 
 export const TableMetadataFormatRenders: FormatRenderer<TableMetadataFormat>[] = [
     createColorFormatRenderer<TableMetadataFormat>(
@@ -60,17 +62,20 @@ export const TableMetadataFormatRenders: FormatRenderer<TableMetadataFormat>[] =
     createDropDownFormatRenderer<TableMetadataFormat, keyof typeof TableBorderFormat>(
         'TableBorderFormat',
         [
-            'DEFAULT',
-            'LIST_WITH_SIDE_BORDERS',
-            'NO_HEADER_BORDERS',
-            'NO_SIDE_BORDERS',
-            'FIRST_COLUMN_HEADER_EXTERNAL',
-            'ESPECIAL_TYPE_1',
-            'ESPECIAL_TYPE_2',
-            'ESPECIAL_TYPE_3',
-            'CLEAR',
+            'Default',
+            'ListWithSideBorders',
+            'NoHeaderBorders',
+            'NoSideBorders',
+            'FirstColumnHeaderExternal',
+            'EspecialType1',
+            'EspecialType2',
+            'EspecialType3',
+            'Clear',
         ],
-        format => TableBorderFormat[format.tableBorderFormat] as keyof typeof TableBorderFormat,
+        format =>
+            getObjectKeys(TableBorderFormat)[
+                Object.values(TableBorderFormat).indexOf(format.tableBorderFormat)
+            ],
         (format, newValue) => (format.tableBorderFormat = TableBorderFormat[newValue])
     ),
 ];