Merge pull request #2159 from microsoft/romasha/versionbump1020

Bump RoosterJS verson to 8.58
microsoft · Oct 20, 2023 · f527296 · f527296
2 parents 9079a70 + 768124a
commit f527296
Show file tree

Hide file tree

Showing 337 changed files with 8,745 additions and 3,262 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -146,5 +146,7 @@ module.exports = {
             },
         ],
         'import/no-duplicates': 'error',
+        'prefer-const': 'error',
+        'no-var': 'error',
     },
 };
diff --git a/README.md b/README.md
@@ -128,81 +128,36 @@ In order to run the code below, you may also need to install [webpack](https://w
 
 ### A quick start
 
-1. Create `editor.htm` contains a DIV with some styles, and a reference to a
-   .js file:
+1. Create `editor.htm` which contains a DIV with some styles, buttons to handle some click events and a reference to rooster.js (update with the path to your rooster.js file):
 
 ```html
 <html>
     <body>
-        <div
-            id="editorDiv"
-            style="width: 500px; height: 300px; overflow: auto;
-        border: solid 1px black"
-        ></div>
-        <script src="editor.js"></script>
-    </body>
-</html>
-```
-
-2. Create `source.js` to import roosterjs and create an editor:
-
-```javascript
-var roosterjs = require('roosterjs');
-var editorDiv = document.getElementById('editorDiv');
-var editor = roosterjs.createEditor(editorDiv);
-editor.setContent('Welcome to <b>RoosterJs</b>!');
-```
-
-3. Compile the javascript file using webpack:
-
-`webpack source.js editor.js`
-
-4. Navigate to editor.htm, you will see a editor shown in the page.
-
-### Add some format buttons
-
-1. Add some buttons into `editor.htm`:
-
-```html
-<html>
-    <body>
-        <div
-            id="editorDiv"
-            style="width: 500px; height: 300px; overflow: auto;
-        border: solid 1px black"
-        ></div>
+        <div style="width: 500px; height: 400px; border: solid 1px black" id="contentDiv"></div>
         <button id="buttonB">B</button> <button id="buttonI">I</button>
         <button id="buttonU">U</button>
-        <script src="editor.js"></script>
+        <script src="rooster.js"></script>
+        <script>
+            var contentDiv = document.getElementById('contentDiv');
+            var editor = roosterjs.createEditor(contentDiv);
+
+            editor.setContent('Welcome to <b>RoosterJs</b>!');
+            document.getElementById('buttonB').addEventListener('click', function () {
+                roosterjs.toggleBold(editor);
+            });
+            document.getElementById('buttonI').addEventListener('click', function () {
+                roosterjs.toggleItalic(editor);
+            });
+            document.getElementById('buttonU').addEventListener('click', function () {
+                roosterjs.toggleUnderline(editor);
+            });
+        </script>
     </body>
 </html>
 ```
 
-2. Add code to `source.js` to handle click event of the buttons:
-
-```javascript
-var roosterjs = require('roosterjs');
-var editorDiv = document.getElementById('editorDiv');
-var editor = roosterjs.createEditor(editorDiv);
-editor.setContent('Welcome to <b>RoosterJs</b>!');
-
-document.getElementById('buttonB').addEventListener('click', function () {
-    roosterjs.toggleBold(editor);
-});
-document.getElementById('buttonI').addEventListener('click', function () {
-    roosterjs.toggleItalic(editor);
-});
-document.getElementById('buttonU').addEventListener('click', function () {
-    roosterjs.toggleUnderline(editor);
-});
-```
-
-3. Compile the javascript file using webpack:
-
-`webpack source.js editor.js`
-
-4. Navigate to editor.htm, you will see buttons with bold, italic, underline
-   actions in the page.
+2. Navigate to editor.htm, you will see a editor shown in the page which includes buttons with bold, italic, underline
+   actions.
 
 ## Sample code
 
@@ -292,7 +247,7 @@ Currently we have very few external dependencies. Before adding any new dependen
 If you still feel a new dependency is required after checking these questions, we can review it and
 finally decide whether we should add the new dependency.
 
-For build time dependencies, it is more flexable to add new dependencies since it won't increase runtime
+For build time dependencies, it is more flexible to add new dependencies since it won't increase runtime
 code size or dependencies.
 
 ## More documentation

diff --git a/demo/scripts/controls/BuildInPluginState.ts b/demo/scripts/controls/BuildInPluginState.ts
@@ -37,6 +37,7 @@ export default interface BuildInPluginState {
     isRtl: boolean;
     cacheModel?: boolean;
     tableFeaturesContainerSelector: string;
+    applyChangesOnMouseUp?: boolean;
 }
 
 export interface BuildInPluginProps extends BuildInPluginState, SidePaneElementProps {}
diff --git a/demo/scripts/controls/ContentModelEditorMainPane.tsx b/demo/scripts/controls/ContentModelEditorMainPane.tsx
@@ -118,6 +118,11 @@ class ContentModelEditorMainPane extends MainPaneBase {
             isDarkMode: this.themeMatch?.matches || false,
             editorCreator: null,
             isRtl: false,
+            tableBorderFormat: {
+                width: '1px',
+                style: 'solid',
+                color: '#ABABAB',
+            },
         };
     }
 

diff --git a/demo/scripts/controls/MainPaneBase.tsx b/demo/scripts/controls/MainPaneBase.tsx
@@ -3,12 +3,13 @@ import * as ReactDOM from 'react-dom';
 import BuildInPluginState from './BuildInPluginState';
 import SidePane from './sidePane/SidePane';
 import SnapshotPlugin from './sidePane/snapshot/SnapshotPlugin';
+import { Border } from 'roosterjs-content-model-editor';
+import { EditorOptions, EditorPlugin, IEditor } from 'roosterjs-editor-types';
 import { getDarkColor } from 'roosterjs-color-utils';
 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 { EditorOptions, EditorPlugin, IEditor } from 'roosterjs-editor-types';
 import {
     createUpdateContentPlugin,
     Rooster,
@@ -24,6 +25,7 @@ export interface MainPaneBaseState {
     isDarkMode: boolean;
     editorCreator: (div: HTMLDivElement, options: EditorOptions) => IEditor;
     isRtl: boolean;
+    tableBorderFormat?: Border;
 }
 
 const PopoutRoot = 'mainPane';
@@ -129,6 +131,28 @@ export default abstract class MainPaneBase extends React.Component<{}, MainPaneB
         });
     }
 
+    getTableBorder(): Border {
+        return this.state.tableBorderFormat;
+    }
+
+    setTableBorderColor(color: string): void {
+        this.setState({
+            tableBorderFormat: { ...this.getTableBorder(), color },
+        });
+    }
+
+    setTableBorderWidth(width: string): void {
+        this.setState({
+            tableBorderFormat: { ...this.getTableBorder(), width },
+        });
+    }
+
+    setTableBorderStyle(style: string): void {
+        this.setState({
+            tableBorderFormat: { ...this.getTableBorder(), style },
+        });
+    }
+
     toggleDarkMode(): void {
         this.setState({
             isDarkMode: !this.state.isDarkMode,

diff --git a/...pts/controls/contentModel/components/format/formatPart/ListStylePositionFormatRenderer.ts b/...pts/controls/contentModel/components/format/formatPart/ListStylePositionFormatRenderer.ts
diff --git a/...ts/controls/contentModel/components/format/formatPart/ListStylePositionFormatRenderers.ts b/...ts/controls/contentModel/components/format/formatPart/ListStylePositionFormatRenderers.ts
@@ -0,0 +1,18 @@
+import { createDropDownFormatRenderer } from '../utils/createDropDownFormatRenderer';
+import { createTextFormatRenderer } from '../utils/createTextFormatRenderer';
+import { FormatRenderer } from '../utils/FormatRenderer';
+import { ListStyleFormat } from 'roosterjs-content-model-types';
+
+export const ListStylePositionFormatRenderers: FormatRenderer<ListStyleFormat>[] = [
+    createDropDownFormatRenderer(
+        'List position',
+        ['inside', 'outside'],
+        format => format.listStylePosition,
+        (format, value) => (format.listStylePosition = value)
+    ),
+    createTextFormatRenderer(
+        'List style type',
+        format => format.listStyleType,
+        (format, value) => (format.listStyleType = value)
+    ),
+];
diff --git a/...ipts/controls/contentModel/components/format/formatPart/TableCellMetadataFormatRenders.ts b/...ipts/controls/contentModel/components/format/formatPart/TableCellMetadataFormatRenders.ts
@@ -13,4 +13,9 @@ export const TableCellMetadataFormatRenders: FormatRenderer<TableCellMetadataFor
         format => format.vAlignOverride,
         (format, value) => (format.vAlignOverride = value)
     ),
+    createCheckboxFormatRenderer<TableCellMetadataFormat>(
+        'BorderOverride',
+        format => format.borderOverride,
+        (format, value) => (format.borderOverride = value)
+    ),
 ];
diff --git a/.../scripts/controls/contentModel/components/format/formatPart/TableMetadataFormatRenders.ts b/.../scripts/controls/contentModel/components/format/formatPart/TableMetadataFormatRenders.ts
@@ -1,9 +1,8 @@
-import { CompatibleTableBorderFormat } from 'roosterjs-editor-types/lib/compatibleTypes';
 import { createCheckboxFormatRenderer } from '../utils/createCheckboxFormatRenderer';
 import { createColorFormatRenderer } from '../utils/createColorFormatRender';
 import { createDropDownFormatRenderer } from '../utils/createDropDownFormatRenderer';
 import { FormatRenderer } from '../utils/FormatRenderer';
-import { TableMetadataFormat } from 'roosterjs-content-model-types';
+import { TableBorderFormat, TableMetadataFormat } from 'roosterjs-content-model-types';
 
 export const TableMetadataFormatRenders: FormatRenderer<TableMetadataFormat>[] = [
     createColorFormatRenderer<TableMetadataFormat>(
@@ -58,7 +57,7 @@ export const TableMetadataFormatRenders: FormatRenderer<TableMetadataFormat>[] =
         format => format.bgColorOdd,
         (format, value) => (format.bgColorOdd = value)
     ),
-    createDropDownFormatRenderer<TableMetadataFormat, keyof typeof CompatibleTableBorderFormat>(
+    createDropDownFormatRenderer<TableMetadataFormat, keyof typeof TableBorderFormat>(
         'TableBorderFormat',
         [
             'DEFAULT',
@@ -71,10 +70,7 @@ export const TableMetadataFormatRenders: FormatRenderer<TableMetadataFormat>[] =
             'ESPECIAL_TYPE_3',
             'CLEAR',
         ],
-        format =>
-            CompatibleTableBorderFormat[
-                format.tableBorderFormat
-            ] as keyof typeof CompatibleTableBorderFormat,
-        (format, newValue) => (format.tableBorderFormat = CompatibleTableBorderFormat[newValue])
+        format => TableBorderFormat[format.tableBorderFormat] as keyof typeof TableBorderFormat,
+        (format, newValue) => (format.tableBorderFormat = TableBorderFormat[newValue])
     ),
 ];
diff --git a/demo/scripts/controls/contentModel/components/model/ContentModelListLevelView.tsx b/demo/scripts/controls/contentModel/components/model/ContentModelListLevelView.tsx
@@ -4,13 +4,13 @@ import { DirectionFormatRenderer } from '../format/formatPart/DirectionFormatRen
 import { FormatRenderer } from '../format/utils/FormatRenderer';
 import { FormatView } from '../format/FormatView';
 import { ListMetadataFormatRenderers } from '../format/formatPart/ListMetadataFormatRenderers';
-import { ListStylePositionFormatRenderer } from '../format/formatPart/ListStylePositionFormatRenderer';
+import { ListStylePositionFormatRenderers } from '../format/formatPart/ListStylePositionFormatRenderers';
 import { ListThreadFormatRenderers } from '../format/formatPart/ListThreadFormatRenderer';
 import { MarginFormatRenderer } from '../format/formatPart/MarginFormatRenderer';
 import { MetadataView } from '../format/MetadataView';
 import { PaddingFormatRenderer } from '../format/formatPart/PaddingFormatRenderer';
 import { TextAlignFormatRenderer } from '../format/formatPart/TextAlignFormatRenderer';
-import { updateListMetadata } from 'roosterjs-content-model-dom';
+import { updateListMetadata } from 'roosterjs-content-model-editor';
 import { useProperty } from '../../hooks/useProperty';
 import {
     ContentModelListItemLevelFormat,
@@ -25,7 +25,7 @@ const ListLevelFormatRenders: FormatRenderer<ContentModelListItemLevelFormat>[]
     TextAlignFormatRenderer,
     MarginFormatRenderer,
     PaddingFormatRenderer,
-    ListStylePositionFormatRenderer,
+    ...ListStylePositionFormatRenderers,
 ];
 
 export function ContentModelListLevelView(props: { level: ContentModelListLevel }) {

diff --git a/demo/scripts/controls/getToggleablePlugins.ts b/demo/scripts/controls/getToggleablePlugins.ts
@@ -24,6 +24,7 @@ export default function getToggleablePlugins(initState: BuildInPluginState) {
     const imageEdit = pluginList.imageEdit
         ? new ImageEdit({
               preserveRatio: initState.forcePreserveRatio,
+              applyChangesOnMouseUp: initState.applyChangesOnMouseUp,
           })
         : null;
 

diff --git a/demo/scripts/controls/ribbonButtons/contentModel/ContentModelRibbon.tsx b/demo/scripts/controls/ribbonButtons/contentModel/ContentModelRibbon.tsx
@@ -46,6 +46,10 @@ import { spacingButton } from './spacingButton';
 import { strikethroughButton } from './strikethroughButton';
 import { subscriptButton } from './subscriptButton';
 import { superscriptButton } from './superscriptButton';
+import { tableBorderApplyButton } from './tableBorderApplyButton';
+import { tableBorderColorButton } from './tableBorderColorButton';
+import { tableBorderStyleButton } from './tableBorderStyleButton';
+import { tableBorderWidthButton } from './tableBorderWidthButton';
 import { textColorButton } from './textColorButton';
 import { underlineButton } from './underlineButton';
 import { zoom } from '../zoom';
@@ -101,6 +105,10 @@ const buttons = [
     tableSplitButton,
     tableAlignCellButton,
     tableAlignTableButton,
+    tableBorderApplyButton,
+    tableBorderColorButton,
+    tableBorderWidthButton,
+    tableBorderStyleButton,
     imageBorderColorButton,
     imageBorderWidthButton,
     imageBorderStyleButton,

diff --git a/demo/scripts/controls/ribbonButtons/contentModel/ContentModelRibbonPlugin.ts b/demo/scripts/controls/ribbonButtons/contentModel/ContentModelRibbonPlugin.ts
@@ -1,6 +1,6 @@
+import { FormatState, PluginEvent, PluginEventType } from 'roosterjs-editor-types';
 import { getObjectKeys } from 'roosterjs-editor-dom';
 import { LocalizedStrings, RibbonButton, RibbonPlugin, UIUtilities } from 'roosterjs-react';
-import { PluginEvent, PluginEventType } from 'roosterjs-editor-types';
 import {
     ContentModelFormatState,
     getFormatState,
@@ -9,7 +9,7 @@ import {
 
 export class ContentModelRibbonPlugin implements RibbonPlugin {
     private editor: IContentModelEditor | null = null;
-    private onFormatChanged: ((formatState: ContentModelFormatState) => void) | null = null;
+    private onFormatChanged: ((formatState: FormatState) => void) | null = null;
     private timer = 0;
     private formatState: ContentModelFormatState | null = null;
     private uiUtilities: UIUtilities | null = null;
@@ -72,7 +72,7 @@ export class ContentModelRibbonPlugin implements RibbonPlugin {
     /**
      * Register a callback to be invoked when format state of editor is changed, returns a disposer function.
      */
-    registerFormatChangedCallback(callback: (formatState: ContentModelFormatState) => void) {
+    registerFormatChangedCallback(callback: (formatState: FormatState) => void) {
         this.onFormatChanged = callback;
 
         return () => {
@@ -162,7 +162,7 @@ export class ContentModelRibbonPlugin implements RibbonPlugin {
                 )
             ) {
                 this.formatState = newFormatState;
-                this.onFormatChanged(newFormatState);
+                this.onFormatChanged((newFormatState as any) as FormatState);
             }
         }
     }