Merge pull request #1990 from microsoft/romasha/versionbump728

Version Bump on 7/28
microsoft · Jul 28, 2023 · cefac4c · cefac4c
2 parents 9eb8593 + e2866f0
commit cefac4c
Show file tree

Hide file tree

Showing 190 changed files with 4,020 additions and 1,325 deletions.
diff --git a/demo/scripts/controls/ContentModelEditorMainPane.tsx b/demo/scripts/controls/ContentModelEditorMainPane.tsx
@@ -2,11 +2,11 @@ import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 import ApiPlaygroundPlugin from './sidePane/apiPlayground/ApiPlaygroundPlugin';
 import ContentModelEditorOptionsPlugin from './sidePane/editorOptions/ContentModelEditorOptionsPlugin';
+import ContentModelFormatPainterPlugin from './contentModel/plugins/ContentModelFormatPainterPlugin';
 import ContentModelFormatStatePlugin from './sidePane/formatState/ContentModelFormatStatePlugin';
 import ContentModelPanePlugin from './sidePane/contentModel/ContentModelPanePlugin';
 import ContentModelRibbon from './ribbonButtons/contentModel/ContentModelRibbon';
 import EventViewPlugin from './sidePane/eventViewer/EventViewPlugin';
-import FormatPainterPlugin from './contentModel/plugins/FormatPainterPlugin';
 import getToggleablePlugins from './getToggleablePlugins';
 import MainPaneBase from './MainPaneBase';
 import SampleEntityPlugin from './sampleEntity/SampleEntityPlugin';
@@ -92,7 +92,7 @@ class ContentModelEditorMainPane extends MainPaneBase {
     private pasteOptionPlugin: EditorPlugin;
     private emojiPlugin: EditorPlugin;
     private toggleablePlugins: EditorPlugin[] | null = null;
-    private formatPainterPlugin: FormatPainterPlugin;
+    private formatPainterPlugin: ContentModelFormatPainterPlugin;
     private sampleEntityPlugin: SampleEntityPlugin;
 
     constructor(props: {}) {
@@ -108,7 +108,7 @@ class ContentModelEditorMainPane extends MainPaneBase {
         this.contentModelRibbonPlugin = new ContentModelRibbonPlugin();
         this.pasteOptionPlugin = createPasteOptionPlugin();
         this.emojiPlugin = createEmojiPlugin();
-        this.formatPainterPlugin = new FormatPainterPlugin();
+        this.formatPainterPlugin = new ContentModelFormatPainterPlugin();
         this.sampleEntityPlugin = new SampleEntityPlugin();
         this.state = {
             showSidePane: window.location.hash != '',

diff --git a/demo/scripts/controls/MainPane.tsx b/demo/scripts/controls/MainPane.tsx
@@ -3,7 +3,6 @@ import * as ReactDOM from 'react-dom';
 import ApiPlaygroundPlugin from './sidePane/apiPlayground/ApiPlaygroundPlugin';
 import EditorOptionsPlugin from './sidePane/editorOptions/EditorOptionsPlugin';
 import EventViewPlugin from './sidePane/eventViewer/EventViewPlugin';
-import FormatPainterPlugin from './contentModel/plugins/FormatPainterPlugin';
 import FormatStatePlugin from './sidePane/formatState/FormatStatePlugin';
 import getToggleablePlugins from './getToggleablePlugins';
 import MainPaneBase from './MainPaneBase';
@@ -102,7 +101,6 @@ class MainPane extends MainPaneBase {
     private pasteOptionPlugin: EditorPlugin;
     private emojiPlugin: EditorPlugin;
     private toggleablePlugins: EditorPlugin[] | null = null;
-    private formatPainterPlugin: FormatPainterPlugin;
     private sampleEntityPlugin: SampleEntityPlugin;
     private mainWindowButtons: RibbonButton<RibbonStringKeys>[];
     private popoutWindowButtons: RibbonButton<RibbonStringKeys>[];
@@ -118,7 +116,6 @@ class MainPane extends MainPaneBase {
         this.ribbonPlugin = createRibbonPlugin();
         this.pasteOptionPlugin = createPasteOptionPlugin();
         this.emojiPlugin = createEmojiPlugin();
-        this.formatPainterPlugin = new FormatPainterPlugin();
         this.sampleEntityPlugin = new SampleEntityPlugin();
 
         this.mainWindowButtons = getButtons([
@@ -183,7 +180,6 @@ class MainPane extends MainPaneBase {
             this.ribbonPlugin,
             this.pasteOptionPlugin,
             this.emojiPlugin,
-            this.formatPainterPlugin,
             this.sampleEntityPlugin,
         ];
 

diff --git a/demo/scripts/controls/contentModel/components/format/formatPart/ListTypeFormatRenderer.ts b/demo/scripts/controls/contentModel/components/format/formatPart/ListTypeFormatRenderer.ts
diff --git a/...ripts/controls/contentModel/components/format/formatPart/TableCellMetadataFormatRender.ts b/...ripts/controls/contentModel/components/format/formatPart/TableCellMetadataFormatRender.ts
diff --git a/...ipts/controls/contentModel/components/format/formatPart/TableCellMetadataFormatRenders.ts b/...ipts/controls/contentModel/components/format/formatPart/TableCellMetadataFormatRenders.ts
@@ -0,0 +1,16 @@
+import { createCheckboxFormatRenderer } from '../utils/createCheckboxFormatRenderer';
+import { FormatRenderer } from '../utils/FormatRenderer';
+import { TableCellMetadataFormat } from 'roosterjs-editor-types';
+
+export const TableCellMetadataFormatRenders: FormatRenderer<TableCellMetadataFormat>[] = [
+    createCheckboxFormatRenderer<TableCellMetadataFormat>(
+        'BgColorOverride',
+        format => format.bgColorOverride,
+        (format, value) => (format.bgColorOverride = value)
+    ),
+    createCheckboxFormatRenderer<TableCellMetadataFormat>(
+        'VAlignOverride',
+        format => format.vAlignOverride,
+        (format, value) => (format.vAlignOverride = value)
+    ),
+];
diff --git a/demo/scripts/controls/contentModel/components/model/ContentModelListItemView.scss b/demo/scripts/controls/contentModel/components/model/ContentModelListItemView.scss
@@ -1,7 +1,3 @@
 .modelListItem {
     background-color: #fb7;
 }
-
-.hr {
-    width: 100%;
-}
diff --git a/demo/scripts/controls/contentModel/components/model/ContentModelListItemView.tsx b/demo/scripts/controls/contentModel/components/model/ContentModelListItemView.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { ContentModelBlockView } from './ContentModelBlockView';
+import { ContentModelListLevelView } from './ContentModelListLevelView';
 import { ContentModelView } from '../ContentModelView';
 import { DirectionFormatRenderer } from '../format/formatPart/DirectionFormatRenderer';
 import { FontFamilyFormatRenderer } from '../format/formatPart/FontFamilyFormatRenderer';
@@ -8,34 +9,17 @@ import { FormatRenderer } from '../format/utils/FormatRenderer';
 import { FormatView } from '../format/FormatView';
 import { hasSelectionInBlockGroup } from 'roosterjs-content-model-editor';
 import { LineHeightFormatRenderer } from '../format/formatPart/LineHeightFormatRenderer';
-import { ListMetadataFormatRenderers } from '../format/formatPart/ListMetadataFormatRenderers';
-import { ListStylePositionFormatRenderer } from '../format/formatPart/ListStylePositionFormatRenderer';
-import { ListThreadFormatRenderers } from '../format/formatPart/ListThreadFormatRenderer';
-import { ListTypeFormatRenderer } from '../format/formatPart/ListTypeFormatRenderer';
 import { MarginFormatRenderer } from '../format/formatPart/MarginFormatRenderer';
-import { PaddingFormatRenderer } from '../format/formatPart/PaddingFormatRenderer';
 import { TextAlignFormatRenderer } from '../format/formatPart/TextAlignFormatRenderer';
 import { TextColorFormatRenderer } from '../format/formatPart/TextColorFormatRenderer';
-import { useProperty } from '../../hooks/useProperty';
 import {
     ContentModelListItem,
     ContentModelListItemFormat,
-    ContentModelListItemLevelFormat,
     ContentModelSegmentFormat,
 } from 'roosterjs-content-model-types';
 
 const styles = require('./ContentModelListItemView.scss');
 
-const ListLevelFormatRenders: FormatRenderer<ContentModelListItemLevelFormat>[] = [
-    ListTypeFormatRenderer,
-    ...ListThreadFormatRenderers,
-    ...ListMetadataFormatRenderers,
-    DirectionFormatRenderer,
-    TextAlignFormatRenderer,
-    MarginFormatRenderer,
-    PaddingFormatRenderer,
-    ListStylePositionFormatRenderer,
-];
 const ListItemFormatRenderers: FormatRenderer<ContentModelListItemFormat>[] = [
     DirectionFormatRenderer,
     TextAlignFormatRenderer,
@@ -48,20 +32,17 @@ const ListItemFormatHolderRenderers: FormatRenderer<ContentModelSegmentFormat>[]
     FontFamilyFormatRenderer,
 ];
 
-function getSubTitle(listItem: ContentModelListItem) {
-    return listItem.levels.map(level => level.listType || 'UL').join('/');
-}
-
 export function ContentModelListItemView(props: { listItem: ContentModelListItem }) {
     const { listItem } = props;
-    const [subTitle, setSubTitle] = useProperty(getSubTitle(listItem));
-    const onFormatChanged = React.useCallback(() => {
-        setSubTitle(getSubTitle(listItem));
-    }, [setSubTitle, listItem]);
-
     const getContent = React.useCallback(() => {
         return (
             <>
+                <div>List Levels</div>
+                {listItem.levels.map((level, index) => (
+                    <ContentModelListLevelView level={level} key={index} />
+                ))}
+
+                <div>List Contents</div>
                 {listItem.blocks.map((block, index) => (
                     <ContentModelBlockView block={block} key={index} />
                 ))}
@@ -72,33 +53,21 @@ export function ContentModelListItemView(props: { listItem: ContentModelListItem
     const getFormat = React.useCallback(() => {
         return (
             <>
-                <div>List levels:</div>
-                {listItem.levels.map((level, index) => (
-                    <FormatView
-                        format={level}
-                        renderers={ListLevelFormatRenders}
-                        onUpdate={onFormatChanged}
-                        key={index}
-                    />
-                ))}
-                <hr className={styles.hr} />
-
                 <div>List item format:</div>
                 <FormatView format={listItem.format} renderers={ListItemFormatRenderers} />
-
+                <br />
                 <div>List marker format:</div>
                 <FormatView
                     format={listItem.formatHolder.format}
                     renderers={ListItemFormatHolderRenderers}
                 />
             </>
         );
-    }, [listItem.levels, subTitle]);
+    }, [listItem.levels]);
 
     return (
         <ContentModelView
             title="ListItem"
-            subTitle={subTitle}
             isExpanded={false}
             className={styles.modelListItem}
             hasSelection={hasSelectionInBlockGroup(listItem)}

diff --git a/demo/scripts/controls/contentModel/components/model/ContentModelListLevelView.scss b/demo/scripts/controls/contentModel/components/model/ContentModelListLevelView.scss
@@ -0,0 +1,3 @@
+.modelListLevel {
+    background-color: #38a;
+}
diff --git a/demo/scripts/controls/contentModel/components/model/ContentModelListLevelView.tsx b/demo/scripts/controls/contentModel/components/model/ContentModelListLevelView.tsx
@@ -0,0 +1,80 @@
+import * as React from 'react';
+import { ContentModelView } from '../ContentModelView';
+import { DirectionFormatRenderer } from '../format/formatPart/DirectionFormatRenderer';
+import { FormatRenderer } from '../format/utils/FormatRenderer';
+import { FormatView } from '../format/FormatView';
+import { ListMetadataFormatRenderers } from '../format/formatPart/ListMetadataFormatRenderers';
+import { ListStylePositionFormatRenderer } from '../format/formatPart/ListStylePositionFormatRenderer';
+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 { useProperty } from '../../hooks/useProperty';
+import {
+    ContentModelListItemLevelFormat,
+    ContentModelListLevel,
+} from 'roosterjs-content-model-types';
+
+const styles = require('./ContentModelListLevelView.scss');
+
+const ListLevelFormatRenders: FormatRenderer<ContentModelListItemLevelFormat>[] = [
+    ...ListThreadFormatRenderers,
+    DirectionFormatRenderer,
+    TextAlignFormatRenderer,
+    MarginFormatRenderer,
+    PaddingFormatRenderer,
+    ListStylePositionFormatRenderer,
+];
+
+export function ContentModelListLevelView(props: { level: ContentModelListLevel }) {
+    const { level } = props;
+    const [listType, setListType] = useProperty(level.listType);
+    const listTypeInput = React.useRef<HTMLSelectElement>(null);
+    const onListTypeChanged = React.useCallback(() => {
+        const newValue = listTypeInput.current.value as 'OL' | 'UL';
+
+        level.listType = newValue;
+        setListType(newValue);
+    }, [setListType, level]);
+
+    const getContent = React.useCallback(() => {
+        return (
+            <div>
+                ListType:{' '}
+                <select value={listType} onChange={onListTypeChanged} ref={listTypeInput}>
+                    <option value="OL">OL</option>
+                    <option value="UL">UL</option>
+                </select>
+            </div>
+        );
+    }, [level, listType]);
+
+    const getFormat = React.useCallback(() => {
+        return <FormatView format={level.format} renderers={ListLevelFormatRenders} />;
+    }, [level, listType]);
+
+    const getMetadata = React.useCallback(() => {
+        return (
+            <MetadataView
+                model={level}
+                renderers={ListMetadataFormatRenderers}
+                updater={updateListMetadata}
+            />
+        );
+    }, [level]);
+
+    return (
+        <ContentModelView
+            title="ListLevel"
+            subTitle={listType}
+            isExpanded={false}
+            className={styles.modelListLevel}
+            jsonSource={level}
+            getContent={getContent}
+            getFormat={getFormat}
+            getMetadata={getMetadata}
+        />
+    );
+}
diff --git a/demo/scripts/controls/contentModel/components/model/ContentModelTableCellView.tsx b/demo/scripts/controls/contentModel/components/model/ContentModelTableCellView.tsx
@@ -13,7 +13,7 @@ import { HtmlAlignFormatRenderer } from '../format/formatPart/HtmlAlignFormatRen
 import { MetadataView } from '../format/MetadataView';
 import { PaddingFormatRenderer } from '../format/formatPart/PaddingFormatRenderer';
 import { SizeFormatRenderers } from '../format/formatPart/SizeFormatRenderers';
-import { TableCellMetadataFormatRender } from '../format/formatPart/TableCellMetadataFormatRender';
+import { TableCellMetadataFormatRenders } from '../format/formatPart/TableCellMetadataFormatRenders';
 import { TextAlignFormatRenderer } from '../format/formatPart/TextAlignFormatRenderer';
 import { TextColorFormatRenderer } from '../format/formatPart/TextColorFormatRenderer';
 import { useProperty } from '../../hooks/useProperty';
@@ -102,7 +102,7 @@ export function ContentModelTableCellView(props: { cell: ContentModelTableCell }
         return (
             <MetadataView
                 model={cell}
-                renderers={[TableCellMetadataFormatRender]}
+                renderers={TableCellMetadataFormatRenders}
                 updater={updateTableCellMetadata}
             />
         );

diff --git a/...ntentModel/plugins/FormatPainterPlugin.ts → ...lugins/ContentModelFormatPainterPlugin.ts b/...ntentModel/plugins/FormatPainterPlugin.ts → ...lugins/ContentModelFormatPainterPlugin.ts
@@ -14,7 +14,7 @@ interface FormatPainterFormatHolder {
     format: ContentModelSegmentFormat | null;
 }
 
-export default class FormatPainterPlugin implements EditorPlugin {
+export default class ContentModelFormatPainterPlugin implements EditorPlugin {
     private editor: IContentModelEditor | null = null;
 
     getName() {

diff --git a/demo/scripts/controls/ribbonButtons/contentModel/ContentModelRibbon.tsx b/demo/scripts/controls/ribbonButtons/contentModel/ContentModelRibbon.tsx
@@ -31,6 +31,7 @@ import { italicButton } from './italicButton';
 import { listStartNumberButton } from './listStartNumberButton';
 import { ltrButton } from './ltrButton';
 import { numberedListButton } from './numberedListButton';
+import { pasteButton } from './pasteButton';
 import { popout } from '../popout';
 import { removeLinkButton } from './removeLinkButton';
 import { Ribbon, RibbonButton, RibbonPlugin } from 'roosterjs-react';
@@ -109,6 +110,7 @@ const buttons = [
     spacingButton,
     spaceBeforeButton,
     spaceAfterButton,
+    pasteButton,
 ];
 
 export default function ContentModelRibbon(props: {

diff --git a/demo/scripts/controls/ribbonButtons/contentModel/formatPainterButton.ts b/demo/scripts/controls/ribbonButtons/contentModel/formatPainterButton.ts
@@ -1,4 +1,4 @@
-import FormatPainterPlugin from '../../contentModel/plugins/FormatPainterPlugin';
+import ContentModelFormatPainterPlugin from '../../contentModel/plugins/ContentModelFormatPainterPlugin';
 import { isContentModelEditor } from 'roosterjs-content-model-editor';
 import { RibbonButton } from 'roosterjs-react';
 
@@ -12,7 +12,7 @@ export const formatPainterButton: RibbonButton<'formatPainter'> = {
     iconName: 'Brush',
     onClick: editor => {
         if (isContentModelEditor(editor)) {
-            FormatPainterPlugin.startFormatPainter(editor);
+            ContentModelFormatPainterPlugin.startFormatPainter(editor);
         }
         return true;
     },