Version bump 8.54.0 (#2042)

* Content Model: Improve cache behavior (#1999) * Content Model: Improve cache behavior * fix build * fix comment * Skip Trigger plugin event on plain text paste (#2011) * init * remove unneeded change * Update return type * Fix 218869: Do not allow dragging on readonly content (#2010) * Fix 218869: Do not allow dragging readonly content * fix test * Content Model: Fix 194024 and 220289 (#2012) * Content Model: Fix 221290 Support float for image (#2013) * Content Model: improve formatWithContentModel 1 (#2001) * Content Model: Improve cache behavior * fix build * Content Model: improve formatWithContentModel * Content Model: improve formatWithContentModel 2 (#2002) * Content Model: Improve cache behavior * fix build * Content Model: improve formatWithContentModel * Content Model: improve formatWithContentModel 2 * fix format * WIP * fix handles * MergeModel, do not inherit the styles of table when splitting the param (#2016) * init * init * address comment * update test names * fixes * Demo site: Fix insert link button in Content Model ribbon (#2018) * Content Model: insertEntity API (#1800) * Content Model insertEntity * improve * improve * Content Model: Improve cache behavior * fix build * Content Model: improve formatWithContentModel * Content Model: improve formatWithContentModel 2 * Improve * fix build * fix build * improve * add test * add test * add test * add test * fix dark color * fix test * fix build and test * crop * fix xase * check cell exist * Fix #1752, rename header to heading (#2020) * fix cell empty cells * fix flipped image * Update logic to decide if we need to merge a table on paste. (#2022) * Fix TableSelectionCopy * update unit tests * Fix 2 * address comment * Content Model: Rename a test file (#2029) * Fix Triple clicking a single cell selecting more than one (#2024) * fix triple click, optimisation * Remove `display: flex` style on paste (#2031) * init * Fix * Replace first cell content if input while on cell selection (#2030) * select first cell content and empty, add undo if change * Content Model: Fix 222135 (#2035) * Fix 222135 * fix build * Content Model: Fix 219312 (#2036) * Fix regression when creating the BeforePasteEvent (#2039) * init * fix build * Content Model: Fix 220050 (#2037) * Content Model: Fix 220050 * Fix build * improve * improve * Simplify the domToModel call in `paste.ts` (#2040) * add more changes * fix build * fix test * Content Model: Support vertical-align for image (#2041) * Content Model: Support vertical-align for image * fix build and test --------- Co-authored-by: Bryan Valverde U <[email protected]> * version bump --------- Co-authored-by: Jiuqing Song <[email protected]> Co-authored-by: Bryan Valverde U <[email protected]> Co-authored-by: Júlia Roldi <[email protected]> Co-authored-by: Julia Roldi <[email protected]>
microsoft · Aug 18, 2023 · e2ae751 · e2ae751
1 parent fc1c8bc
commit e2ae751
Show file tree

Hide file tree

Showing 165 changed files with 6,813 additions and 2,216 deletions.
diff --git a/demo/scripts/controls/ContentModelEditorMainPane.tsx b/demo/scripts/controls/ContentModelEditorMainPane.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
-import ApiPlaygroundPlugin from './sidePane/apiPlayground/ApiPlaygroundPlugin';
+import ApiPlaygroundPlugin from './sidePane/contentModelApiPlayground/ApiPlaygroundPlugin';
 import ContentModelEditorOptionsPlugin from './sidePane/editorOptions/ContentModelEditorOptionsPlugin';
 import ContentModelFormatPainterPlugin from './contentModel/plugins/ContentModelFormatPainterPlugin';
 import ContentModelFormatStatePlugin from './sidePane/formatState/ContentModelFormatStatePlugin';

diff --git a/demo/scripts/controls/contentModel/components/format/formatPart/FloatFormatRenderer.ts b/demo/scripts/controls/contentModel/components/format/formatPart/FloatFormatRenderer.ts
@@ -0,0 +1,11 @@
+import { createTextFormatRenderer } from '../utils/createTextFormatRenderer';
+import { FloatFormat } from 'roosterjs-content-model-types';
+import { FormatRenderer } from '../utils/FormatRenderer';
+
+export const FloatFormatRenderer: FormatRenderer<FloatFormat> = createTextFormatRenderer<
+    FloatFormat
+>(
+    'Float',
+    format => format.float,
+    (format, value) => (format.float = value)
+);
diff --git a/demo/scripts/controls/contentModel/components/model/ContentModelImageView.tsx b/demo/scripts/controls/contentModel/components/model/ContentModelImageView.tsx
@@ -3,6 +3,7 @@ import { ContentModelCodeView } from './ContentModelCodeView';
 import { ContentModelImage, ContentModelImageFormat } from 'roosterjs-content-model-types';
 import { ContentModelLinkView } from './ContentModelLinkView';
 import { ContentModelView } from '../ContentModelView';
+import { FloatFormatRenderer } from '../format/formatPart/FloatFormatRenderer';
 import { FormatRenderer } from '../format/utils/FormatRenderer';
 import { FormatView } from '../format/FormatView';
 import { IdFormatRenderer } from '../format/formatPart/IdFormatRenderer';
@@ -22,6 +23,7 @@ const ImageFormatRenderers: FormatRenderer<ContentModelImageFormat>[] = [
     ...SizeFormatRenderers,
     MarginFormatRenderer,
     PaddingFormatRenderer,
+    FloatFormatRenderer,
 ];
 
 export function ContentModelImageView(props: { image: ContentModelImage }) {

diff --git a/demo/scripts/controls/contentModel/plugins/ContentModelFormatPainterPlugin.ts b/demo/scripts/controls/contentModel/plugins/ContentModelFormatPainterPlugin.ts
@@ -2,7 +2,7 @@ import { ContentModelSegmentFormat } from 'roosterjs-content-model-types';
 import { EditorPlugin, IEditor, PluginEvent, PluginEventType } from 'roosterjs-editor-types';
 import {
     applySegmentFormat,
-    getSegmentFormat,
+    getFormatState,
     IContentModelEditor,
 } from 'roosterjs-content-model-editor';
 
@@ -53,13 +53,13 @@ export default class ContentModelFormatPainterPlugin implements EditorPlugin {
     }
 }
 
-function getFormatHolder(editor: IEditor): FormatPainterFormatHolder {
+function getFormatHolder(editor: IContentModelEditor): FormatPainterFormatHolder {
     return editor.getCustomData('__FormatPainterFormat', () => {
         return {} as FormatPainterFormatHolder;
     });
 }
 
-function setFormatPainterCursor(editor: IEditor, isOn: boolean) {
+function setFormatPainterCursor(editor: IContentModelEditor, isOn: boolean) {
     let styles = editor.getEditorDomAttribute('style') || '';
     styles = styles.replace(CURSOR_REGEX, '');
 
@@ -69,3 +69,24 @@ function setFormatPainterCursor(editor: IEditor, isOn: boolean) {
 
     editor.setEditorDomAttribute('style', styles);
 }
+
+function getSegmentFormat(editor: IContentModelEditor): ContentModelSegmentFormat {
+    const formatState = getFormatState(editor);
+
+    return {
+        backgroundColor: formatState.backgroundColor,
+        fontFamily: formatState.fontName,
+        fontSize: formatState.fontSize,
+        fontWeight: formatState.isBold ? 'bold' : 'normal',
+        italic: formatState.isItalic,
+        letterSpacing: formatState.letterSpacing,
+        strikethrough: formatState.isStrikeThrough,
+        superOrSubScriptSequence: formatState.isSubscript
+            ? 'sub'
+            : formatState.isSuperscript
+            ? 'super'
+            : '',
+        textColor: formatState.textColor,
+        underline: formatState.isUnderline,
+    };
+}
diff --git a/demo/scripts/controls/ribbonButtons/contentModel/ContentModelRibbon.tsx b/demo/scripts/controls/ribbonButtons/contentModel/ContentModelRibbon.tsx
@@ -37,7 +37,7 @@ import { removeLinkButton } from './removeLinkButton';
 import { Ribbon, RibbonButton, RibbonPlugin } from 'roosterjs-react';
 import { rtlButton } from './rtlButton';
 import { setBulletedListStyleButton } from './setBulletedListStyleButton';
-import { setHeaderLevelButton } from './setHeaderLevelButton';
+import { setHeadingLevelButton } from './setHeadingLevelButton';
 import { setNumberedListStyleButton } from './setNumberedListStyleButton';
 import { setTableCellShadeButton } from './setTableCellShadeButton';
 import { setTableHeaderButton } from './setTableHeaderButton';
@@ -84,7 +84,7 @@ const buttons = [
     superscriptButton,
     subscriptButton,
     strikethroughButton,
-    setHeaderLevelButton,
+    setHeadingLevelButton,
     codeButton,
     ltrButton,
     rtlButton,

diff --git a/demo/scripts/controls/ribbonButtons/contentModel/ContentModelRibbonPlugin.ts b/demo/scripts/controls/ribbonButtons/contentModel/ContentModelRibbonPlugin.ts
@@ -1,13 +1,17 @@
-import { FormatState, PluginEvent, PluginEventType } from 'roosterjs-editor-types';
-import { getFormatState, IContentModelEditor } from 'roosterjs-content-model-editor';
 import { getObjectKeys } from 'roosterjs-editor-dom';
 import { LocalizedStrings, RibbonButton, RibbonPlugin, UIUtilities } from 'roosterjs-react';
+import { PluginEvent, PluginEventType } from 'roosterjs-editor-types';
+import {
+    ContentModelFormatState,
+    getFormatState,
+    IContentModelEditor,
+} from 'roosterjs-content-model-editor';
 
 export class ContentModelRibbonPlugin implements RibbonPlugin {
     private editor: IContentModelEditor | null = null;
-    private onFormatChanged: ((formatState: FormatState) => void) | null = null;
+    private onFormatChanged: ((formatState: ContentModelFormatState) => void) | null = null;
     private timer = 0;
-    private formatState: FormatState | null = null;
+    private formatState: ContentModelFormatState | null = null;
     private uiUtilities: UIUtilities | null = null;
 
     /**
@@ -68,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: FormatState) => void) {
+    registerFormatChangedCallback(callback: (formatState: ContentModelFormatState) => void) {
         this.onFormatChanged = callback;
 
         return () => {

diff --git a/demo/scripts/controls/ribbonButtons/contentModel/insertLinkButton.ts b/demo/scripts/controls/ribbonButtons/contentModel/insertLinkButton.ts
@@ -1,5 +1,5 @@
-import showInputDialog from 'roosterjs-react/lib/inputDialog/utils/showInputDialog';
 import { InsertLinkButtonStringKey, RibbonButton } from 'roosterjs-react';
+import { showInputDialog } from 'roosterjs-react/lib/inputDialog';
 import {
     adjustLinkSelection,
     insertLink,

diff --git a/demo/scripts/controls/ribbonButtons/contentModel/setHeaderLevelButton.ts b/demo/scripts/controls/ribbonButtons/contentModel/setHeaderLevelButton.ts
diff --git a/demo/scripts/controls/ribbonButtons/contentModel/setHeadingLevelButton.ts b/demo/scripts/controls/ribbonButtons/contentModel/setHeadingLevelButton.ts
@@ -0,0 +1,36 @@
+import { isContentModelEditor, setHeadingLevel } from 'roosterjs-content-model-editor';
+import {
+    getButtons,
+    HeadingButtonStringKey,
+    KnownRibbonButtonKey,
+    RibbonButton,
+} from 'roosterjs-react';
+
+const originalHeadingButton: RibbonButton<HeadingButtonStringKey> = getButtons([
+    KnownRibbonButtonKey.Heading,
+])[0] as RibbonButton<HeadingButtonStringKey>;
+const keys: HeadingButtonStringKey[] = [
+    'buttonNameNoHeading',
+    'buttonNameHeading1',
+    'buttonNameHeading2',
+    'buttonNameHeading3',
+    'buttonNameHeading4',
+    'buttonNameHeading5',
+    'buttonNameHeading6',
+];
+
+export const setHeadingLevelButton: RibbonButton<HeadingButtonStringKey> = {
+    dropDownMenu: {
+        ...originalHeadingButton.dropDownMenu,
+    },
+    key: 'buttonNameHeading',
+    unlocalizedText: 'Heading',
+    iconName: 'Header1',
+    onClick: (editor, key) => {
+        const headingLevel = keys.indexOf(key);
+
+        if (isContentModelEditor(editor) && headingLevel >= 0) {
+            setHeadingLevel(editor, headingLevel as 0 | 1 | 2 | 3 | 4 | 5 | 6);
+        }
+    },
+};
diff --git a/demo/scripts/controls/sidePane/contentModelApiPlayground/ApiPaneProps.ts b/demo/scripts/controls/sidePane/contentModelApiPlayground/ApiPaneProps.ts
@@ -0,0 +1,10 @@
+import { IEditor, PluginEvent } from 'roosterjs-editor-types';
+import { SidePaneElementProps } from '../SidePaneElement';
+
+export default interface ApiPaneProps extends SidePaneElementProps {
+    getEditor: () => IEditor;
+}
+
+export interface ApiPlaygroundComponent {
+    onPluginEvent?: (e: PluginEvent) => void;
+}
diff --git a/demo/scripts/controls/sidePane/contentModelApiPlayground/ApiPlaygroundPane.scss b/demo/scripts/controls/sidePane/contentModelApiPlayground/ApiPlaygroundPane.scss
@@ -0,0 +1,4 @@
+.header {
+    flex: 0 0 auto;
+    padding-bottom: 5px;
+}
diff --git a/demo/scripts/controls/sidePane/contentModelApiPlayground/ApiPlaygroundPane.tsx b/demo/scripts/controls/sidePane/contentModelApiPlayground/ApiPlaygroundPane.tsx
@@ -0,0 +1,69 @@
+import * as React from 'react';
+import apiEntries, { ApiPlaygroundReactComponent } from './apiEntries';
+import ApiPaneProps from './ApiPaneProps';
+import { getObjectKeys } from 'roosterjs-editor-dom';
+import { PluginEvent } from 'roosterjs-editor-types';
+import { SidePaneElement } from '../SidePaneElement';
+
+const styles = require('./ApiPlaygroundPane.scss');
+
+export interface ApiPlaygroundPaneState {
+    current: string;
+}
+
+export default class ApiPlaygroundPane extends React.Component<ApiPaneProps, ApiPlaygroundPaneState>
+    implements SidePaneElement {
+    private select = React.createRef<HTMLSelectElement>();
+    private pane = React.createRef<ApiPlaygroundReactComponent>();
+    constructor(props: ApiPaneProps) {
+        super(props);
+        this.state = { current: 'empty' };
+    }
+
+    render() {
+        let componentClass = apiEntries[this.state.current].component;
+        let pane: JSX.Element = null;
+        if (componentClass) {
+            pane = React.createElement(componentClass, { ...this.props, ref: this.pane });
+        }
+
+        return (
+            <>
+                <div className={styles.header}>
+                    <h3>Select an API to try</h3>
+
+                    <select ref={this.select} value={this.state.current} onChange={this.onChange}>
+                        {getObjectKeys(apiEntries).map(key => (
+                            <option value={key} key={key}>
+                                {apiEntries[key].name}
+                            </option>
+                        ))}
+                    </select>
+                </div>
+                {pane}
+            </>
+        );
+    }
+
+    onPluginEvent(e: PluginEvent) {
+        if (this.pane.current && this.pane.current.onPluginEvent) {
+            this.pane.current.onPluginEvent(e);
+        }
+    }
+
+    setHashPath(path: string[]) {
+        let paneName = path && getObjectKeys(apiEntries).indexOf(path[0]) >= 0 ? path[0] : null;
+
+        if (paneName && paneName != this.state.current) {
+            this.setState({
+                current: paneName,
+            });
+        } else {
+            this.props.updateHash(null, [this.state.current]);
+        }
+    }
+
+    private onChange = () => {
+        this.props.updateHash(null, [this.select.current.value]);
+    };
+}
diff --git a/demo/scripts/controls/sidePane/contentModelApiPlayground/ApiPlaygroundPlugin.ts b/demo/scripts/controls/sidePane/contentModelApiPlayground/ApiPlaygroundPlugin.ts
@@ -0,0 +1,27 @@
+import ApiPaneProps from './ApiPaneProps';
+import ApiPlaygroundPane from './ApiPlaygroundPane';
+import SidePanePluginImpl from '../SidePanePluginImpl';
+import { PluginEvent } from 'roosterjs-editor-types';
+import { SidePaneElementProps } from '../SidePaneElement';
+
+export default class ApiPlaygroundPlugin extends SidePanePluginImpl<
+    ApiPlaygroundPane,
+    ApiPaneProps
+> {
+    constructor() {
+        super(ApiPlaygroundPane, 'api', 'API Playground');
+    }
+
+    getComponentProps(base: SidePaneElementProps) {
+        return {
+            ...base,
+            getEditor: () => {
+                return this.editor;
+            },
+        };
+    }
+
+    onPluginEvent(e: PluginEvent) {
+        this.getComponent(component => component.onPluginEvent(e));
+    }
+}
diff --git a/demo/scripts/controls/sidePane/contentModelApiPlayground/apiEntries.ts b/demo/scripts/controls/sidePane/contentModelApiPlayground/apiEntries.ts
@@ -0,0 +1,27 @@
+import * as React from 'react';
+import ApiPaneProps, { ApiPlaygroundComponent } from './ApiPaneProps';
+import InsertEntityPane from './insertEntity/InsertEntityPane';
+
+export interface ApiPlaygroundReactComponent
+    extends React.Component<ApiPaneProps, any>,
+        ApiPlaygroundComponent {}
+
+interface ApiEntry {
+    name: string;
+    component?: { new (prpos: ApiPaneProps): ApiPlaygroundReactComponent };
+}
+
+const apiEntries: { [key: string]: ApiEntry } = {
+    empty: {
+        name: 'Please select',
+    },
+    entity: {
+        name: 'Insert Entity',
+        component: InsertEntityPane,
+    },
+    more: {
+        name: 'Coming soon...',
+    },
+};
+
+export default apiEntries;
diff --git a/demo/scripts/controls/sidePane/contentModelApiPlayground/insertEntity/InsertEntityPane.scss b/demo/scripts/controls/sidePane/contentModelApiPlayground/insertEntity/InsertEntityPane.scss
@@ -0,0 +1,6 @@
+.textarea {
+    outline: none;
+    resize: none;
+    min-height: 40px;
+    width: 90%;
+}