Skip to content

Commit cefac4c

Browse files
romanisaromanisa
authored
Merge pull request #1990 from microsoft/romasha/versionbump728
Version Bump on 7/28
2 parents 9eb8593 + e2866f0 commit cefac4c

File tree

190 files changed

+4020
-1325
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

190 files changed

+4020
-1325
lines changed

‎demo/scripts/controls/ContentModelEditorMainPane.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,11 @@ import * as React from 'react';
22
import * as ReactDOM from 'react-dom';
33
import ApiPlaygroundPlugin from './sidePane/apiPlayground/ApiPlaygroundPlugin';
44
import ContentModelEditorOptionsPlugin from './sidePane/editorOptions/ContentModelEditorOptionsPlugin';
5+
import ContentModelFormatPainterPlugin from './contentModel/plugins/ContentModelFormatPainterPlugin';
56
import ContentModelFormatStatePlugin from './sidePane/formatState/ContentModelFormatStatePlugin';
67
import ContentModelPanePlugin from './sidePane/contentModel/ContentModelPanePlugin';
78
import ContentModelRibbon from './ribbonButtons/contentModel/ContentModelRibbon';
89
import EventViewPlugin from './sidePane/eventViewer/EventViewPlugin';
9-
import FormatPainterPlugin from './contentModel/plugins/FormatPainterPlugin';
1010
import getToggleablePlugins from './getToggleablePlugins';
1111
import MainPaneBase from './MainPaneBase';
1212
import SampleEntityPlugin from './sampleEntity/SampleEntityPlugin';
@@ -92,7 +92,7 @@ class ContentModelEditorMainPane extends MainPaneBase {
9292
private pasteOptionPlugin: EditorPlugin;
9393
private emojiPlugin: EditorPlugin;
9494
private toggleablePlugins: EditorPlugin[] | null = null;
95-
private formatPainterPlugin: FormatPainterPlugin;
95+
private formatPainterPlugin: ContentModelFormatPainterPlugin;
9696
private sampleEntityPlugin: SampleEntityPlugin;
9797

9898
constructor(props: {}) {
@@ -108,7 +108,7 @@ class ContentModelEditorMainPane extends MainPaneBase {
108108
this.contentModelRibbonPlugin = new ContentModelRibbonPlugin();
109109
this.pasteOptionPlugin = createPasteOptionPlugin();
110110
this.emojiPlugin = createEmojiPlugin();
111-
this.formatPainterPlugin = new FormatPainterPlugin();
111+
this.formatPainterPlugin = new ContentModelFormatPainterPlugin();
112112
this.sampleEntityPlugin = new SampleEntityPlugin();
113113
this.state = {
114114
showSidePane: window.location.hash != '',

‎demo/scripts/controls/MainPane.tsx‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@ import * as ReactDOM from 'react-dom';
33
import ApiPlaygroundPlugin from './sidePane/apiPlayground/ApiPlaygroundPlugin';
44
import EditorOptionsPlugin from './sidePane/editorOptions/EditorOptionsPlugin';
55
import EventViewPlugin from './sidePane/eventViewer/EventViewPlugin';
6-
import FormatPainterPlugin from './contentModel/plugins/FormatPainterPlugin';
76
import FormatStatePlugin from './sidePane/formatState/FormatStatePlugin';
87
import getToggleablePlugins from './getToggleablePlugins';
98
import MainPaneBase from './MainPaneBase';
@@ -102,7 +101,6 @@ class MainPane extends MainPaneBase {
102101
private pasteOptionPlugin: EditorPlugin;
103102
private emojiPlugin: EditorPlugin;
104103
private toggleablePlugins: EditorPlugin[] | null = null;
105-
private formatPainterPlugin: FormatPainterPlugin;
106104
private sampleEntityPlugin: SampleEntityPlugin;
107105
private mainWindowButtons: RibbonButton<RibbonStringKeys>[];
108106
private popoutWindowButtons: RibbonButton<RibbonStringKeys>[];
@@ -118,7 +116,6 @@ class MainPane extends MainPaneBase {
118116
this.ribbonPlugin = createRibbonPlugin();
119117
this.pasteOptionPlugin = createPasteOptionPlugin();
120118
this.emojiPlugin = createEmojiPlugin();
121-
this.formatPainterPlugin = new FormatPainterPlugin();
122119
this.sampleEntityPlugin = new SampleEntityPlugin();
123120

124121
this.mainWindowButtons = getButtons([
@@ -183,7 +180,6 @@ class MainPane extends MainPaneBase {
183180
this.ribbonPlugin,
184181
this.pasteOptionPlugin,
185182
this.emojiPlugin,
186-
this.formatPainterPlugin,
187183
this.sampleEntityPlugin,
188184
];
189185

‎demo/scripts/controls/contentModel/components/format/formatPart/ListTypeFormatRenderer.ts‎

Lines changed: 0 additions & 10 deletions
This file was deleted.

‎demo/scripts/controls/contentModel/components/format/formatPart/TableCellMetadataFormatRender.ts‎

Lines changed: 0 additions & 8 deletions
This file was deleted.

‎demo/scripts/controls/contentModel/components/format/formatPart/TableCellMetadataFormatRenders.ts‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import { createCheckboxFormatRenderer } from '../utils/createCheckboxFormatRenderer';
2+
import { FormatRenderer } from '../utils/FormatRenderer';
3+
import { TableCellMetadataFormat } from 'roosterjs-editor-types';
4+
5+
export const TableCellMetadataFormatRenders: FormatRenderer<TableCellMetadataFormat>[] = [
6+
createCheckboxFormatRenderer<TableCellMetadataFormat>(
7+
'BgColorOverride',
8+
format => format.bgColorOverride,
9+
(format, value) => (format.bgColorOverride = value)
10+
),
11+
createCheckboxFormatRenderer<TableCellMetadataFormat>(
12+
'VAlignOverride',
13+
format => format.vAlignOverride,
14+
(format, value) => (format.vAlignOverride = value)
15+
),
16+
];

‎demo/scripts/controls/contentModel/components/model/ContentModelListItemView.scss‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,3 @@
11
.modelListItem {
22
background-color: #fb7;
33
}
4-
5-
.hr {
6-
width: 100%;
7-
}

‎demo/scripts/controls/contentModel/components/model/ContentModelListItemView.tsx‎

Lines changed: 9 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import * as React from 'react';
22
import { ContentModelBlockView } from './ContentModelBlockView';
3+
import { ContentModelListLevelView } from './ContentModelListLevelView';
34
import { ContentModelView } from '../ContentModelView';
45
import { DirectionFormatRenderer } from '../format/formatPart/DirectionFormatRenderer';
56
import { FontFamilyFormatRenderer } from '../format/formatPart/FontFamilyFormatRenderer';
@@ -8,34 +9,17 @@ import { FormatRenderer } from '../format/utils/FormatRenderer';
89
import { FormatView } from '../format/FormatView';
910
import { hasSelectionInBlockGroup } from 'roosterjs-content-model-editor';
1011
import { LineHeightFormatRenderer } from '../format/formatPart/LineHeightFormatRenderer';
11-
import { ListMetadataFormatRenderers } from '../format/formatPart/ListMetadataFormatRenderers';
12-
import { ListStylePositionFormatRenderer } from '../format/formatPart/ListStylePositionFormatRenderer';
13-
import { ListThreadFormatRenderers } from '../format/formatPart/ListThreadFormatRenderer';
14-
import { ListTypeFormatRenderer } from '../format/formatPart/ListTypeFormatRenderer';
1512
import { MarginFormatRenderer } from '../format/formatPart/MarginFormatRenderer';
16-
import { PaddingFormatRenderer } from '../format/formatPart/PaddingFormatRenderer';
1713
import { TextAlignFormatRenderer } from '../format/formatPart/TextAlignFormatRenderer';
1814
import { TextColorFormatRenderer } from '../format/formatPart/TextColorFormatRenderer';
19-
import { useProperty } from '../../hooks/useProperty';
2015
import {
2116
ContentModelListItem,
2217
ContentModelListItemFormat,
23-
ContentModelListItemLevelFormat,
2418
ContentModelSegmentFormat,
2519
} from 'roosterjs-content-model-types';
2620

2721
const styles = require('./ContentModelListItemView.scss');
2822

29-
const ListLevelFormatRenders: FormatRenderer<ContentModelListItemLevelFormat>[] = [
30-
ListTypeFormatRenderer,
31-
...ListThreadFormatRenderers,
32-
...ListMetadataFormatRenderers,
33-
DirectionFormatRenderer,
34-
TextAlignFormatRenderer,
35-
MarginFormatRenderer,
36-
PaddingFormatRenderer,
37-
ListStylePositionFormatRenderer,
38-
];
3923
const ListItemFormatRenderers: FormatRenderer<ContentModelListItemFormat>[] = [
4024
DirectionFormatRenderer,
4125
TextAlignFormatRenderer,
@@ -48,20 +32,17 @@ const ListItemFormatHolderRenderers: FormatRenderer<ContentModelSegmentFormat>[]
4832
FontFamilyFormatRenderer,
4933
];
5034

51-
function getSubTitle(listItem: ContentModelListItem) {
52-
return listItem.levels.map(level => level.listType || 'UL').join('/');
53-
}
54-
5535
export function ContentModelListItemView(props: { listItem: ContentModelListItem }) {
5636
const { listItem } = props;
57-
const [subTitle, setSubTitle] = useProperty(getSubTitle(listItem));
58-
const onFormatChanged = React.useCallback(() => {
59-
setSubTitle(getSubTitle(listItem));
60-
}, [setSubTitle, listItem]);
61-
6237
const getContent = React.useCallback(() => {
6338
return (
6439
<>
40+
<div>List Levels</div>
41+
{listItem.levels.map((level, index) => (
42+
<ContentModelListLevelView level={level} key={index} />
43+
))}
44+
45+
<div>List Contents</div>
6546
{listItem.blocks.map((block, index) => (
6647
<ContentModelBlockView block={block} key={index} />
6748
))}
@@ -72,33 +53,21 @@ export function ContentModelListItemView(props: { listItem: ContentModelListItem
7253
const getFormat = React.useCallback(() => {
7354
return (
7455
<>
75-
<div>List levels:</div>
76-
{listItem.levels.map((level, index) => (
77-
<FormatView
78-
format={level}
79-
renderers={ListLevelFormatRenders}
80-
onUpdate={onFormatChanged}
81-
key={index}
82-
/>
83-
))}
84-
<hr className={styles.hr} />
85-
8656
<div>List item format:</div>
8757
<FormatView format={listItem.format} renderers={ListItemFormatRenderers} />
88-
58+
<br />
8959
<div>List marker format:</div>
9060
<FormatView
9161
format={listItem.formatHolder.format}
9262
renderers={ListItemFormatHolderRenderers}
9363
/>
9464
</>
9565
);
96-
}, [listItem.levels, subTitle]);
66+
}, [listItem.levels]);
9767

9868
return (
9969
<ContentModelView
10070
title="ListItem"
101-
subTitle={subTitle}
10271
isExpanded={false}
10372
className={styles.modelListItem}
10473
hasSelection={hasSelectionInBlockGroup(listItem)}

‎demo/scripts/controls/contentModel/components/model/ContentModelListLevelView.scss‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
.modelListLevel {
2+
background-color: #38a;
3+
}

‎demo/scripts/controls/contentModel/components/model/ContentModelListLevelView.tsx‎

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
import * as React from 'react';
2+
import { ContentModelView } from '../ContentModelView';
3+
import { DirectionFormatRenderer } from '../format/formatPart/DirectionFormatRenderer';
4+
import { FormatRenderer } from '../format/utils/FormatRenderer';
5+
import { FormatView } from '../format/FormatView';
6+
import { ListMetadataFormatRenderers } from '../format/formatPart/ListMetadataFormatRenderers';
7+
import { ListStylePositionFormatRenderer } from '../format/formatPart/ListStylePositionFormatRenderer';
8+
import { ListThreadFormatRenderers } from '../format/formatPart/ListThreadFormatRenderer';
9+
import { MarginFormatRenderer } from '../format/formatPart/MarginFormatRenderer';
10+
import { MetadataView } from '../format/MetadataView';
11+
import { PaddingFormatRenderer } from '../format/formatPart/PaddingFormatRenderer';
12+
import { TextAlignFormatRenderer } from '../format/formatPart/TextAlignFormatRenderer';
13+
import { updateListMetadata } from 'roosterjs-content-model-dom';
14+
import { useProperty } from '../../hooks/useProperty';
15+
import {
16+
ContentModelListItemLevelFormat,
17+
ContentModelListLevel,
18+
} from 'roosterjs-content-model-types';
19+
20+
const styles = require('./ContentModelListLevelView.scss');
21+
22+
const ListLevelFormatRenders: FormatRenderer<ContentModelListItemLevelFormat>[] = [
23+
...ListThreadFormatRenderers,
24+
DirectionFormatRenderer,
25+
TextAlignFormatRenderer,
26+
MarginFormatRenderer,
27+
PaddingFormatRenderer,
28+
ListStylePositionFormatRenderer,
29+
];
30+
31+
export function ContentModelListLevelView(props: { level: ContentModelListLevel }) {
32+
const { level } = props;
33+
const [listType, setListType] = useProperty(level.listType);
34+
const listTypeInput = React.useRef<HTMLSelectElement>(null);
35+
const onListTypeChanged = React.useCallback(() => {
36+
const newValue = listTypeInput.current.value as 'OL' | 'UL';
37+
38+
level.listType = newValue;
39+
setListType(newValue);
40+
}, [setListType, level]);
41+
42+
const getContent = React.useCallback(() => {
43+
return (
44+
<div>
45+
ListType:{' '}
46+
<select value={listType} onChange={onListTypeChanged} ref={listTypeInput}>
47+
<option value="OL">OL</option>
48+
<option value="UL">UL</option>
49+
</select>
50+
</div>
51+
);
52+
}, [level, listType]);
53+
54+
const getFormat = React.useCallback(() => {
55+
return <FormatView format={level.format} renderers={ListLevelFormatRenders} />;
56+
}, [level, listType]);
57+
58+
const getMetadata = React.useCallback(() => {
59+
return (
60+
<MetadataView
61+
model={level}
62+
renderers={ListMetadataFormatRenderers}
63+
updater={updateListMetadata}
64+
/>
65+
);
66+
}, [level]);
67+
68+
return (
69+
<ContentModelView
70+
title="ListLevel"
71+
subTitle={listType}
72+
isExpanded={false}
73+
className={styles.modelListLevel}
74+
jsonSource={level}
75+
getContent={getContent}
76+
getFormat={getFormat}
77+
getMetadata={getMetadata}
78+
/>
79+
);
80+
}

‎demo/scripts/controls/contentModel/components/model/ContentModelTableCellView.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ import { HtmlAlignFormatRenderer } from '../format/formatPart/HtmlAlignFormatRen
1313
import { MetadataView } from '../format/MetadataView';
1414
import { PaddingFormatRenderer } from '../format/formatPart/PaddingFormatRenderer';
1515
import { SizeFormatRenderers } from '../format/formatPart/SizeFormatRenderers';
16-
import { TableCellMetadataFormatRender } from '../format/formatPart/TableCellMetadataFormatRender';
16+
import { TableCellMetadataFormatRenders } from '../format/formatPart/TableCellMetadataFormatRenders';
1717
import { TextAlignFormatRenderer } from '../format/formatPart/TextAlignFormatRenderer';
1818
import { TextColorFormatRenderer } from '../format/formatPart/TextColorFormatRenderer';
1919
import { useProperty } from '../../hooks/useProperty';
@@ -102,7 +102,7 @@ export function ContentModelTableCellView(props: { cell: ContentModelTableCell }
102102
return (
103103
<MetadataView
104104
model={cell}
105-
renderers={[TableCellMetadataFormatRender]}
105+
renderers={TableCellMetadataFormatRenders}
106106
updater={updateTableCellMetadata}
107107
/>
108108
);

0 commit comments

Comments
 (0)