Skip to content

Commit 6ab02e6

Browse files
juliaroldijuliaroldi
authored
Merge pull request #2422 from microsoft/u/juliaroldi/release-version-8.60.0
[Bump RoosterJS] Classic: 8.60.0 Content-Model: 0.26
2 parents 85b20ff + 64bbaab commit 6ab02e6

File tree

238 files changed

+12620
-3190
lines changed

Some content is hidden

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

238 files changed

+12620
-3190
lines changed

‎demo/scripts/controls/ContentModelEditorMainPane.tsx‎

Lines changed: 16 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ import { alignJustifyButton } from './ribbonButtons/contentModel/alignJustifyBut
2020
import { alignLeftButton } from './ribbonButtons/contentModel/alignLeftButton';
2121
import { alignRightButton } from './ribbonButtons/contentModel/alignRightButton';
2222
import { arrayPush } from 'roosterjs-editor-dom';
23+
import { AutoFormatPlugin, EditPlugin, PastePlugin } from 'roosterjs-content-model-plugins';
2324
import { backgroundColorButton } from './ribbonButtons/contentModel/backgroundColorButton';
2425
import { blockQuoteButton } from './ribbonButtons/contentModel/blockQuoteButton';
2526
import { boldButton } from './ribbonButtons/contentModel/boldButton';
@@ -29,11 +30,11 @@ import { clearFormatButton } from './ribbonButtons/contentModel/clearFormatButto
2930
import { codeButton } from './ribbonButtons/contentModel/codeButton';
3031
import { ContentModelRibbon } from './ribbonButtons/contentModel/ContentModelRibbon';
3132
import { ContentModelRibbonPlugin } from './ribbonButtons/contentModel/ContentModelRibbonPlugin';
32-
import { ContentModelSegmentFormat, Snapshots } from 'roosterjs-content-model-types';
3333
import { createEmojiPlugin, createPasteOptionPlugin } from 'roosterjs-react';
3434
import { darkMode } from './ribbonButtons/contentModel/darkMode';
3535
import { decreaseFontSizeButton } from './ribbonButtons/contentModel/decreaseFontSizeButton';
3636
import { decreaseIndentButton } from './ribbonButtons/contentModel/decreaseIndentButton';
37+
import { EditorAdapter, EditorAdapterOptions } from 'roosterjs-editor-adapter';
3738
import { EditorPlugin } from 'roosterjs-editor-types';
3839
import { exportContent } from './ribbonButtons/contentModel/export';
3940
import { fontButton } from './ribbonButtons/contentModel/fontButton';
@@ -79,6 +80,11 @@ import { trustedHTMLHandler } from '../utils/trustedHTMLHandler';
7980
import { underlineButton } from './ribbonButtons/contentModel/underlineButton';
8081
import { undoButton } from './ribbonButtons/contentModel/undoButton';
8182
import { zoom } from './ribbonButtons/contentModel/zoom';
83+
import {
84+
ContentModelSegmentFormat,
85+
IStandaloneEditor,
86+
Snapshots,
87+
} from 'roosterjs-content-model-types';
8288
import {
8389
spaceAfterButton,
8490
spaceBeforeButton,
@@ -91,16 +97,6 @@ import {
9197
tableMergeButton,
9298
tableSplitButton,
9399
} from './ribbonButtons/contentModel/tableEditButtons';
94-
import {
95-
ContentModelAutoFormatPlugin,
96-
ContentModelEditPlugin,
97-
ContentModelPastePlugin,
98-
} from 'roosterjs-content-model-plugins';
99-
import {
100-
ContentModelEditor,
101-
ContentModelEditorOptions,
102-
IContentModelEditor,
103-
} from 'roosterjs-content-model-editor';
104100

105101
const styles = require('./ContentModelEditorMainPane.scss');
106102

@@ -159,7 +155,7 @@ const DarkTheme: PartialTheme = {
159155
};
160156

161157
interface ContentModelMainPaneState extends MainPaneBaseState {
162-
editorCreator: (div: HTMLDivElement, options: ContentModelEditorOptions) => IContentModelEditor;
158+
editorCreator: (div: HTMLDivElement, options: EditorAdapterOptions) => IStandaloneEditor;
163159
}
164160

165161
class ContentModelEditorMainPane extends MainPaneBase<ContentModelMainPaneState> {
@@ -168,15 +164,15 @@ class ContentModelEditorMainPane extends MainPaneBase<ContentModelMainPaneState>
168164
private eventViewPlugin: ContentModelEventViewPlugin;
169165
private apiPlaygroundPlugin: ApiPlaygroundPlugin;
170166
private contentModelPanePlugin: ContentModelPanePlugin;
171-
private contentModelEditPlugin: ContentModelEditPlugin;
172-
private contentModelAutoFormatPlugin: ContentModelAutoFormatPlugin;
167+
private contentModelEditPlugin: EditPlugin;
168+
private contentModelAutoFormatPlugin: AutoFormatPlugin;
173169
private contentModelRibbonPlugin: RibbonPlugin;
174170
private pasteOptionPlugin: EditorPlugin;
175171
private emojiPlugin: EditorPlugin;
176172
private snapshotPlugin: ContentModelSnapshotPlugin;
177173
private toggleablePlugins: EditorPlugin[] | null = null;
178174
private formatPainterPlugin: ContentModelFormatPainterPlugin;
179-
private pastePlugin: ContentModelPastePlugin;
175+
private pastePlugin: PastePlugin;
180176
private sampleEntityPlugin: SampleEntityPlugin;
181177
private snapshots: Snapshots;
182178
private buttons: ContentModelRibbonButton<any>[] = [
@@ -261,13 +257,13 @@ class ContentModelEditorMainPane extends MainPaneBase<ContentModelMainPaneState>
261257
this.apiPlaygroundPlugin = new ApiPlaygroundPlugin();
262258
this.snapshotPlugin = new ContentModelSnapshotPlugin(this.snapshots);
263259
this.contentModelPanePlugin = new ContentModelPanePlugin();
264-
this.contentModelEditPlugin = new ContentModelEditPlugin();
265-
this.contentModelAutoFormatPlugin = new ContentModelAutoFormatPlugin();
260+
this.contentModelEditPlugin = new EditPlugin();
261+
this.contentModelAutoFormatPlugin = new AutoFormatPlugin();
266262
this.contentModelRibbonPlugin = new ContentModelRibbonPlugin();
267263
this.pasteOptionPlugin = createPasteOptionPlugin();
268264
this.emojiPlugin = createEmojiPlugin();
269265
this.formatPainterPlugin = new ContentModelFormatPainterPlugin();
270-
this.pastePlugin = new ContentModelPastePlugin();
266+
this.pastePlugin = new PastePlugin();
271267
this.sampleEntityPlugin = new SampleEntityPlugin();
272268
this.state = {
273269
showSidePane: window.location.hash != '',
@@ -343,8 +339,8 @@ class ContentModelEditorMainPane extends MainPaneBase<ContentModelMainPaneState>
343339
resetEditor() {
344340
this.toggleablePlugins = null;
345341
this.setState({
346-
editorCreator: (div: HTMLDivElement, options: ContentModelEditorOptions) =>
347-
new ContentModelEditor(div, {
342+
editorCreator: (div: HTMLDivElement, options: EditorAdapterOptions) =>
343+
new EditorAdapter(div, {
348344
...options,
349345
cacheModel: this.state.initState.cacheModel,
350346
}),

‎demo/scripts/controls/StandaloneEditorMainPane.tsx‎

Lines changed: 5 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ import { alignCenterButton } from './ribbonButtons/contentModel/alignCenterButto
1717
import { alignJustifyButton } from './ribbonButtons/contentModel/alignJustifyButton';
1818
import { alignLeftButton } from './ribbonButtons/contentModel/alignLeftButton';
1919
import { alignRightButton } from './ribbonButtons/contentModel/alignRightButton';
20+
import { AutoFormatPlugin, EditPlugin } from 'roosterjs-content-model-plugins';
2021
import { backgroundColorButton } from './ribbonButtons/contentModel/backgroundColorButton';
2122
import { blockQuoteButton } from './ribbonButtons/contentModel/blockQuoteButton';
2223
import { boldButton } from './ribbonButtons/contentModel/boldButton';
@@ -93,10 +94,6 @@ import {
9394
tableMergeButton,
9495
tableSplitButton,
9596
} from './ribbonButtons/contentModel/tableEditButtons';
96-
import {
97-
ContentModelAutoFormatPlugin,
98-
ContentModelEditPlugin,
99-
} from 'roosterjs-content-model-plugins';
10097

10198
const styles = require('./StandaloneEditorMainPane.scss');
10299

@@ -164,9 +161,9 @@ class ContentModelEditorMainPane extends MainPaneBase<ContentModelMainPaneState>
164161
private eventViewPlugin: ContentModelEventViewPlugin;
165162
private apiPlaygroundPlugin: ApiPlaygroundPlugin;
166163
private contentModelPanePlugin: ContentModelPanePlugin;
167-
private contentModelEditPlugin: ContentModelEditPlugin;
164+
private contentModelEditPlugin: EditPlugin;
168165
private contentModelRibbonPlugin: RibbonPlugin;
169-
private contentAutoFormatPlugin: ContentModelAutoFormatPlugin;
166+
private contentAutoFormatPlugin: AutoFormatPlugin;
170167
private snapshotPlugin: ContentModelSnapshotPlugin;
171168
private formatPainterPlugin: ContentModelFormatPainterPlugin;
172169
private snapshots: Snapshots<Snapshot>;
@@ -252,8 +249,8 @@ class ContentModelEditorMainPane extends MainPaneBase<ContentModelMainPaneState>
252249
this.apiPlaygroundPlugin = new ApiPlaygroundPlugin();
253250
this.snapshotPlugin = new ContentModelSnapshotPlugin(this.snapshots);
254251
this.contentModelPanePlugin = new ContentModelPanePlugin();
255-
this.contentModelEditPlugin = new ContentModelEditPlugin();
256-
this.contentAutoFormatPlugin = new ContentModelAutoFormatPlugin();
252+
this.contentModelEditPlugin = new EditPlugin();
253+
this.contentAutoFormatPlugin = new AutoFormatPlugin();
257254
this.contentModelRibbonPlugin = new ContentModelRibbonPlugin();
258255
this.formatPainterPlugin = new ContentModelFormatPainterPlugin();
259256
this.state = {

‎demo/scripts/controls/contentModel/editor/ContentModelRooster.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import * as React from 'react';
2-
import { ContentModelEditor, ContentModelEditorOptions } from 'roosterjs-content-model-editor';
32
import { createUIUtilities, ReactEditorPlugin, UIUtilities } from 'roosterjs-react';
43
import { divProperties, getNativeProps } from '@fluentui/react/lib/Utilities';
4+
import { EditorAdapter, EditorAdapterOptions } from 'roosterjs-editor-adapter';
55
import { useTheme } from '@fluentui/react/lib/Theme';
66
import {
77
EditorPlugin,
@@ -14,7 +14,7 @@ import type { EditorPlugin as LegacyEditorPlugin } from 'roosterjs-editor-types'
1414
* Properties for Rooster react component
1515
*/
1616
export interface ContentModelRoosterProps
17-
extends ContentModelEditorOptions,
17+
extends EditorAdapterOptions,
1818
React.HTMLAttributes<HTMLDivElement> {
1919
/**
2020
* Creator function used for creating the instance of roosterjs editor.
@@ -86,8 +86,8 @@ function setUIUtilities(
8686
});
8787
}
8888

89-
function defaultEditorCreator(div: HTMLDivElement, options: ContentModelEditorOptions) {
90-
return new ContentModelEditor(div, options);
89+
function defaultEditorCreator(div: HTMLDivElement, options: EditorAdapterOptions) {
90+
return new EditorAdapter(div, options);
9191
}
9292

9393
function isReactEditorPlugin(

‎demo/scripts/controls/ribbonButtons/contentModel/export.ts‎

Lines changed: 3 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,5 @@
11
import ContentModelRibbonButton from './ContentModelRibbonButton';
2-
import { cloneModel } from 'roosterjs-content-model-core';
3-
import { ContentModelEntityFormat } from 'roosterjs-content-model-types';
4-
import {
5-
contentModelToDom,
6-
createModelToDomContext,
7-
parseEntityClassName,
8-
} from 'roosterjs-content-model-dom';
2+
import { exportContent as exportContentApi } from 'roosterjs-content-model-core';
93

104
/**
115
* Key of localized strings of Zoom button
@@ -21,53 +15,8 @@ export const exportContent: ContentModelRibbonButton<ExportButtonStringKey> = {
2115
iconName: 'Export',
2216
flipWhenRtl: true,
2317
onClick: editor => {
24-
// TODO: We need a export function in dev code to handle this feature
2518
const win = editor.getDocument().defaultView.open();
26-
27-
editor.formatContentModel(model => {
28-
const clonedModel = cloneModel(model, {
29-
includeCachedElement: (node, type) => {
30-
switch (type) {
31-
case 'cache':
32-
return undefined;
33-
34-
case 'general':
35-
return node.cloneNode() as HTMLElement;
36-
37-
case 'entity':
38-
const clonedRoot = node.cloneNode(true) as HTMLElement;
39-
const format: ContentModelEntityFormat = {};
40-
let isEntity = false;
41-
42-
clonedRoot.classList.forEach(name => {
43-
isEntity = parseEntityClassName(name, format) || isEntity;
44-
});
45-
46-
if (isEntity && format.id && format.entityType) {
47-
editor.triggerEvent('entityOperation', {
48-
operation: 'replaceTemporaryContent',
49-
entity: {
50-
wrapper: clonedRoot,
51-
id: format.id,
52-
type: format.entityType,
53-
isReadonly: !!format.isReadonly,
54-
},
55-
});
56-
}
57-
58-
return clonedRoot;
59-
}
60-
},
61-
});
62-
63-
contentModelToDom(
64-
win.document,
65-
win.document.body,
66-
clonedModel,
67-
createModelToDomContext()
68-
);
69-
70-
return false;
71-
});
19+
const html = exportContentApi(editor);
20+
win.document.write(editor.getTrustedHTMLHandler()(html));
7221
},
7322
};

‎demo/scripts/controls/sidePane/contentModel/ContentModelPanePlugin.ts‎

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import ContentModelPane, { ContentModelPaneProps } from './ContentModelPane';
22
import SidePanePluginImpl from '../SidePanePluginImpl';
33
import { ContentModelRibbonPlugin } from '../../ribbonButtons/contentModel/ContentModelRibbonPlugin';
4-
import { IContentModelEditor } from 'roosterjs-content-model-editor';
54
import { IEditor, PluginEvent, PluginEventType } from 'roosterjs-editor-types';
5+
import { IStandaloneEditor } from 'roosterjs-content-model-types';
66
import { setCurrentContentModel } from './currentModel';
77
import { SidePaneElementProps } from '../SidePaneElement';
88

@@ -20,7 +20,7 @@ export default class ContentModelPanePlugin extends SidePanePluginImpl<
2020
initialize(editor: IEditor): void {
2121
super.initialize(editor);
2222

23-
this.contentModelRibbon.initialize(editor as IContentModelEditor); // Temporarily use IContentModelEditor here. TODO: Port side pane to use IStandaloneEditor
23+
this.contentModelRibbon.initialize(editor as IEditor & IStandaloneEditor); // TODO: Port side pane to use IStandaloneEditor
2424
editor.getDocument().addEventListener('selectionchange', this.onModelChangeFromSelection);
2525
}
2626

@@ -37,7 +37,9 @@ export default class ContentModelPanePlugin extends SidePanePluginImpl<
3737
if (e.eventType == PluginEventType.ContentChanged && e.source == 'RefreshModel') {
3838
this.getComponent(component => {
3939
// TODO: Port to use IStandaloneEditor and remove type cast here
40-
const model = (this.editor as IContentModelEditor).getContentModelCopy('connected');
40+
const model = (this.editor as IEditor & IStandaloneEditor).getContentModelCopy(
41+
'connected'
42+
);
4143
component.setContentModel(model);
4244
setCurrentContentModel(model);
4345
});
@@ -72,7 +74,9 @@ export default class ContentModelPanePlugin extends SidePanePluginImpl<
7274
private onModelChange = () => {
7375
this.getComponent(component => {
7476
// TODO: Port to use IStandaloneEditor and remove type cast here
75-
const model = (this.editor as IContentModelEditor).getContentModelCopy('connected');
77+
const model = (this.editor as IEditor & IStandaloneEditor).getContentModelCopy(
78+
'connected'
79+
);
7680
component.setContentModel(model);
7781
setCurrentContentModel(model);
7882
});

‎demo/scripts/controls/sidePane/contentModelApiPlayground/insertEntity/InsertEntityPane.tsx‎

Lines changed: 30 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,9 @@
11
import * as React from 'react';
22
import ApiPaneProps from '../ApiPaneProps';
3-
import { Entity } from 'roosterjs-editor-types';
3+
import { Entity, IEditor } from 'roosterjs-editor-types';
44
import { getEntityFromElement, getEntitySelector } from 'roosterjs-editor-dom';
5-
import { IContentModelEditor } from 'roosterjs-content-model-editor';
65
import { insertEntity } from 'roosterjs-content-model-api';
7-
import { InsertEntityOptions } from 'roosterjs-content-model-types';
6+
import { InsertEntityOptions, IStandaloneEditor } from 'roosterjs-content-model-types';
87
import { trustedHTMLHandler } from '../../../../utils/trustedHTMLHandler';
98

109
const styles = require('./InsertEntityPane.scss');
@@ -106,37 +105,36 @@ export default class InsertEntityPane extends React.Component<ApiPaneProps, Inse
106105

107106
if (node) {
108107
const editor = this.props.getEditor();
108+
const options: InsertEntityOptions = {
109+
contentNode: node,
110+
focusAfterEntity: focusAfterEntity,
111+
};
109112

110-
editor.addUndoSnapshot(() => {
111-
const options: InsertEntityOptions = {
112-
contentNode: node,
113-
focusAfterEntity: focusAfterEntity,
114-
};
113+
editor.focus();
115114

116-
if (isBlock) {
117-
insertEntity(
118-
editor as IContentModelEditor,
119-
entityType,
120-
true,
121-
insertAtRoot
122-
? 'root'
123-
: insertAtTop
124-
? 'begin'
125-
: insertAtBottom
126-
? 'end'
127-
: 'focus',
128-
options
129-
);
130-
} else {
131-
insertEntity(
132-
editor as IContentModelEditor,
133-
entityType,
134-
isBlock,
135-
insertAtTop ? 'begin' : insertAtBottom ? 'end' : 'focus',
136-
options
137-
);
138-
}
139-
});
115+
if (isBlock) {
116+
insertEntity(
117+
editor as IStandaloneEditor & IEditor,
118+
entityType,
119+
true,
120+
insertAtRoot
121+
? 'root'
122+
: insertAtTop
123+
? 'begin'
124+
: insertAtBottom
125+
? 'end'
126+
: 'focus',
127+
options
128+
);
129+
} else {
130+
insertEntity(
131+
editor as IStandaloneEditor & IEditor,
132+
entityType,
133+
isBlock,
134+
insertAtTop ? 'begin' : insertAtBottom ? 'end' : 'focus',
135+
options
136+
);
137+
}
140138
}
141139
};
142140

‎demo/scripts/controls/sidePane/editorOptions/codes/ContentModelEditorCode.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@ export default class ContentModelEditorCode extends CodeElement {
3838
: '';
3939
code += darkMode ? this.indent(`getDarkColor: ${darkMode},\n`) : '';
4040
code += '};\n';
41-
code += 'let editor = new roosterjsContentModel.ContentModelEditor(contentDiv, options);\n';
41+
code += 'let editor = new roosterjsContentModel.StandaloneEditor(contentDiv, options);\n';
4242
code += this.buttons ? this.buttons.getCode() : '';
4343

4444
return code;

‎demo/scripts/controls/sidePane/editorOptions/codes/SimplePluginCode.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ export class PasteCode extends SimplePluginCode {
1818

1919
export class ContentModelPasteCode extends SimplePluginCode {
2020
constructor() {
21-
super('ContentModelPastePlugin', 'roosterjsContentModel');
21+
super('PastePlugin', 'roosterjsContentModel');
2222
}
2323
}
2424

0 commit comments

Comments
 (0)