Version bump 8.54.0

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';

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)
+);

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 }) {

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,
+    };
+}

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,

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 () => {

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,

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);
+        }
+    },
+};

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;
+}

demo/scripts/controls/sidePane/contentModelApiPlayground/ApiPlaygroundPane.scss

@@ -0,0 +1,4 @@
+.header {
+    flex: 0 0 auto;
+    padding-bottom: 5px;
+}

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]);
+    };
+}

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));
+    }
+}

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;

demo/scripts/controls/sidePane/contentModelApiPlayground/insertEntity/InsertEntityPane.scss

@@ -0,0 +1,6 @@
+.textarea {
+    outline: none;
+    resize: none;
+    min-height: 40px;
+    width: 90%;
+}