microsoft · BryanValverdeU · Jul 31, 2025 · Jun 11, 2025 · Jun 11, 2025 · Jun 16, 2025
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -63,6 +63,7 @@
         "Polski",
         "Popout",
         "Resizer",
+        "resizers",
         "roosterjs",
         "rowspan",
         "saturationv",

diff --git a/demo/scripts/controlsV2/demoButtons/exportContentButton.ts b/demo/scripts/controlsV2/demoButtons/exportContentButton.ts
@@ -1,3 +1,4 @@
+import * as DOMPurify from 'dompurify';
 import { exportContent } from 'roosterjs-content-model-core';
 import { ModelToTextCallbacks } from 'roosterjs-content-model-types';
 import type { RibbonButton } from 'roosterjs-react';
@@ -33,12 +34,30 @@ export const exportContentButton: RibbonButton<ExportButtonStringKey> = {
         let html = '';
 
         if (key == 'menuNameExportHTML') {
-            html = exportContent(editor);
+            html =
+                '<html><head><style>p{margin-top:0;margin-bottom:0;}</style></head><body>' +
+                exportContent(editor, 'HTML', {
+                    defaultContentModelFormatOverride: {
+                        p: {
+                            marginTop: '0',
+                            marginBottom: '0',
+                        },
+                    },
+                }) +
+                '</body></html>';
         } else if (key == 'menuNameExportText') {
             html = `<pre>${exportContent(editor, 'PlainText', callbacks)}</pre>`;
         }
 
-        win.document.write(editor.getTrustedHTMLHandler()(html));
+        win.document.write(
+            (DOMPurify.sanitize(html, {
+                ADD_TAGS: ['head', 'meta', 'iframe'],
+                ADD_ATTR: ['name', 'content'],
+                WHOLE_DOCUMENT: true,
+                ALLOW_UNKNOWN_PROTOCOLS: true,
+                RETURN_TRUSTED_TYPE: true,
+            }) as any) as string
+        );
     },
     commandBarProperties: {
         buttonStyles: {

diff --git a/demo/scripts/controlsV2/demoButtons/formatPainterButton.ts b/demo/scripts/controlsV2/demoButtons/formatPainterButton.ts
@@ -12,8 +12,9 @@ export function createFormatPainterButton(
         key: 'formatPainter',
         unlocalizedText: 'Format painter',
         iconName: 'Brush',
-        onClick: () => {
+        onClick: editor => {
             handler.startFormatPainter();
+            editor.focus();
         },
     };
 }
diff --git a/demo/scripts/controlsV2/mainPane/MainPane.scss b/demo/scripts/controlsV2/mainPane/MainPane.scss
@@ -52,6 +52,11 @@
     top: 0;
     right: 0;
     bottom: 0;
+
+    p {
+        margin-top: 0;
+        margin-bottom: 0;
+    }
 }
 
 .resizer {

diff --git a/demo/scripts/controlsV2/mainPane/MainPane.tsx b/demo/scripts/controlsV2/mainPane/MainPane.tsx
@@ -5,6 +5,7 @@ import { ApiPlaygroundPlugin } from '../sidePane/apiPlayground/ApiPlaygroundPlug
 import { ContentModelPanePlugin } from '../sidePane/contentModel/ContentModelPanePlugin';
 import { darkModeButton } from '../demoButtons/darkModeButton';
 import { defaultDomToModelOption } from '../options/defaultDomToModelOption';
+import { defaultModelToDomOption } from '../options/defaultModelToDomOption';
 import { Editor } from 'roosterjs-content-model-core';
 import { EditorOptionsPlugin } from '../sidePane/editorOptions/EditorOptionsPlugin';
 import { EventViewPlugin } from '../sidePane/eventViewer/EventViewPlugin';
@@ -106,7 +107,6 @@ export class MainPane extends React.Component<{}, MainPaneState> {
     private formatPainterPlugin: FormatPainterPlugin;
     private samplePickerPlugin: SamplePickerPlugin;
     private snapshots: Snapshots;
-    private imageEditPlugin: ImageEditPlugin;
     private markdownPanePlugin: MarkdownPanePlugin;
 
     protected sidePane = React.createRef<SidePane>();
@@ -145,7 +145,6 @@ export class MainPane extends React.Component<{}, MainPaneState> {
         this.ribbonPlugin = createRibbonPlugin();
         this.formatPainterPlugin = new FormatPainterPlugin();
         this.samplePickerPlugin = new SamplePickerPlugin();
-        this.imageEditPlugin = new ImageEditPlugin();
         this.markdownPanePlugin = new MarkdownPanePlugin();
 
         this.state = {
@@ -167,13 +166,22 @@ export class MainPane extends React.Component<{}, MainPaneState> {
 
     render() {
         const theme = getTheme(this.state.isDarkMode);
+
+        const imageEditPlugin = this.state.initState.pluginList.imageEditPlugin
+            ? new ImageEditPlugin({
+                  disableSideResize: this.state.initState.disableSideResize,
+              })
+            : null;
+
         return (
             <ThemeProvider applyTo="body" theme={theme} className={styles.mainPane}>
                 {this.renderTitleBar()}
                 {!this.state.popoutWindow && this.renderTabs()}
-                {!this.state.popoutWindow && this.renderRibbon()}
+                {!this.state.popoutWindow && this.renderRibbon(imageEditPlugin)}
                 <div className={styles.body + ' ' + (this.state.isDarkMode ? 'dark' : '')}>
-                    {this.state.popoutWindow ? this.renderPopout() : this.renderMainPane()}
+                    {this.state.popoutWindow
+                        ? this.renderPopout(imageEditPlugin)
+                        : this.renderMainPane(imageEditPlugin)}
                 </div>
             </ThemeProvider>
         );
@@ -303,13 +311,13 @@ export class MainPane extends React.Component<{}, MainPaneState> {
             </div>
         );
     }
-    private renderRibbon() {
+    private renderRibbon(imageEditPlugin: ImageEditPlugin | undefined) {
         return (
             <Ribbon
                 buttons={getButtons(
                     this.state.activeTab,
                     this.formatPainterPlugin,
-                    this.imageEditPlugin
+                    imageEditPlugin
                 )}
                 plugin={this.ribbonPlugin}
                 dir={this.state.isRtl ? 'rtl' : 'ltr'}
@@ -337,7 +345,7 @@ export class MainPane extends React.Component<{}, MainPaneState> {
         });
     }
 
-    private renderEditor() {
+    private renderEditor(imageEditPlugin: ImageEditPlugin | undefined) {
         // Set preset if found
         const search = new URLSearchParams(document.location.search);
         const hasPreset = search.get('preset');
@@ -355,7 +363,7 @@ export class MainPane extends React.Component<{}, MainPaneState> {
             this.ribbonPlugin,
             this.formatPainterPlugin,
             this.samplePickerPlugin,
-            ...this.getToggleablePlugins(),
+            ...this.getToggleablePlugins(imageEditPlugin),
             this.contentModelPanePlugin.getInnerRibbonPlugin(),
             this.updateContentPlugin,
         ];
@@ -389,17 +397,18 @@ export class MainPane extends React.Component<{}, MainPaneState> {
                                 this.state.initState.experimentalFeatures
                             )}
                             defaultDomToModelOptions={defaultDomToModelOption}
+                            defaultModelToDomOptions={defaultModelToDomOption}
                         />
                     )}
                 </div>
             </div>
         );
     }
 
-    private renderMainPane() {
+    private renderMainPane(imageEditPlugin: ImageEditPlugin | undefined) {
         return (
             <>
-                {this.renderEditor()}
+                {this.renderEditor(imageEditPlugin)}
                 {this.state.showSidePane ? (
                     <>
                         <div className={styles.resizer} onMouseDown={this.onMouseDown} />
@@ -425,7 +434,7 @@ export class MainPane extends React.Component<{}, MainPaneState> {
         );
     }
 
-    private renderPopout() {
+    private renderPopout(imageEditPlugin: ImageEditPlugin | undefined) {
         return (
             <>
                 {this.renderSidePane(true /*fullWidth*/)}
@@ -434,8 +443,10 @@ export class MainPane extends React.Component<{}, MainPaneState> {
                         <ThemeProvider applyTo="body" theme={getTheme(this.state.isDarkMode)}>
                             <div className={styles.mainPane}>
                                 {this.renderTabs()}
-                                {this.renderRibbon()}
-                                <div className={styles.body}>{this.renderEditor()}</div>
+                                {this.renderRibbon(imageEditPlugin)}
+                                <div className={styles.body}>
+                                    {this.renderEditor(imageEditPlugin)}
+                                </div>
                             </div>
                         </ThemeProvider>
                     </WindowProvider>,
@@ -501,7 +512,7 @@ export class MainPane extends React.Component<{}, MainPaneState> {
         ];
     }
 
-    private getToggleablePlugins(): EditorPlugin[] {
+    private getToggleablePlugins(imageEditPlugin: ImageEditPlugin | undefined): EditorPlugin[] {
         const {
             pluginList,
             allowExcelNoBorderTable,
@@ -515,6 +526,7 @@ export class MainPane extends React.Component<{}, MainPaneState> {
             customReplacements,
             editPluginOptions,
         } = this.state.initState;
+
         return [
             pluginList.autoFormat && new AutoFormatPlugin(autoFormatOptions),
             pluginList.edit && new EditPlugin(editPluginOptions),
@@ -523,16 +535,17 @@ export class MainPane extends React.Component<{}, MainPaneState> {
             pluginList.tableEdit && new TableEditPlugin(),
             pluginList.watermark && new WatermarkPlugin(watermarkText),
             pluginList.markdown && new MarkdownPlugin(markdownOptions),
-            pluginList.imageEditPlugin && this.imageEditPlugin,
+            imageEditPlugin,
             pluginList.emoji && createEmojiPlugin(),
             pluginList.pasteOption && createPasteOptionPlugin(),
             pluginList.sampleEntity && new SampleEntityPlugin(),
             pluginList.contextMenu && createContextMenuPlugin(),
             pluginList.contextMenu && listMenu && createListEditMenuProvider(),
             pluginList.contextMenu && tableMenu && createTableEditMenuProvider(),
             pluginList.contextMenu &&
+                imageEditPlugin &&
                 imageMenu &&
-                createImageEditMenuProvider(this.imageEditPlugin),
+                createImageEditMenuProvider(imageEditPlugin),
             pluginList.hyperlink &&
                 new HyperlinkPlugin(
                     linkTitle?.indexOf(UrlPlaceholder) >= 0

diff --git a/demo/scripts/controlsV2/options/defaultDomToModelOption.ts b/demo/scripts/controlsV2/options/defaultDomToModelOption.ts
@@ -5,4 +5,5 @@ export const defaultDomToModelOption: DomToModelOption = {
     additionalFormatParsers: {
         link: [demoUndeletableAnchorParser],
     },
+    processNonVisibleElements: true,
 };
diff --git a/demo/scripts/controlsV2/options/defaultModelToDomOption.ts b/demo/scripts/controlsV2/options/defaultModelToDomOption.ts
@@ -0,0 +1,10 @@
+import { ModelToDomOption } from 'roosterjs-content-model-types';
+
+export const defaultModelToDomOption: ModelToDomOption = {
+    defaultContentModelFormatOverride: {
+        p: {
+            marginTop: '0',
+            marginBottom: '0',
+        },
+    },
+};
diff --git a/demo/scripts/controlsV2/sidePane/editorOptions/EditorOptionsPlugin.ts b/demo/scripts/controlsV2/sidePane/editorOptions/EditorOptionsPlugin.ts
@@ -61,6 +61,7 @@ const initialState: OptionState = {
         handleTabKey: true,
     },
     customReplacements: emojiReplacements,
+    disableSideResize: false,
     experimentalFeatures: new Set<ExperimentalFeature>([
         'PersistCache',
         'HandleEnterKey',

diff --git a/demo/scripts/controlsV2/sidePane/editorOptions/OptionState.ts b/demo/scripts/controlsV2/sidePane/editorOptions/OptionState.ts
@@ -38,6 +38,7 @@ export interface OptionState {
     markdownOptions: MarkdownOptions;
     customReplacements: CustomReplace[];
     editPluginOptions: EditOptions;
+    disableSideResize: boolean;
 
     // Legacy plugin options
     defaultFormat: ContentModelSegmentFormat;

diff --git a/demo/scripts/controlsV2/sidePane/editorOptions/OptionsPane.tsx b/demo/scripts/controlsV2/sidePane/editorOptions/OptionsPane.tsx
@@ -141,6 +141,7 @@ export class OptionsPane extends React.Component<OptionPaneProps, OptionState> {
             customReplacements: this.state.customReplacements,
             experimentalFeatures: this.state.experimentalFeatures,
             editPluginOptions: { ...this.state.editPluginOptions },
+            disableSideResize: this.state.disableSideResize,
         };
 
         if (callback) {

diff --git a/demo/scripts/controlsV2/sidePane/editorOptions/Plugins.tsx b/demo/scripts/controlsV2/sidePane/editorOptions/Plugins.tsx
@@ -120,6 +120,7 @@ export class Plugins extends PluginsBase<keyof BuildInPluginList> {
     private markdownStrikethrough = React.createRef<HTMLInputElement>();
     private markdownCode = React.createRef<HTMLInputElement>();
     private linkTitle = React.createRef<HTMLInputElement>();
+    private disableSideResize = React.createRef<HTMLInputElement>();
 
     render(): JSX.Element {
         return (
@@ -314,7 +315,18 @@ export class Plugins extends PluginsBase<keyof BuildInPluginList> {
                         )
                     )}
                     {this.renderPluginItem('customReplace', 'Custom Replace')}
-                    {this.renderPluginItem('imageEditPlugin', 'ImageEditPlugin')}
+                    {this.renderPluginItem(
+                        'imageEditPlugin',
+                        'ImageEditPlugin',
+                        <>
+                            {this.renderCheckBox(
+                                'Disable side resize',
+                                this.disableSideResize,
+                                this.props.state.disableSideResize,
+                                (state, value) => (state.disableSideResize = value)
+                            )}
+                        </>
+                    )}
                     {this.renderPluginItem('hiddenProperty', 'Hidden Property')}
                 </tbody>
             </table>

diff --git a/demo/scripts/controlsV2/sidePane/presets/allPresets/allPresets.ts b/demo/scripts/controlsV2/sidePane/presets/allPresets/allPresets.ts
@@ -1,7 +1,7 @@
 import { allTextFormats } from './textPresets';
+import { htmlParagraphs, mixedParagraphs } from './paragraphPresets';
 import { image64x64Black, image64x64Gradient, image64x64White } from './imagePresets';
 import { mergedTableNoText, simpleTable, simpleTableWithHeader } from './tablePresets';
-import { mixedParagraphs } from './paragraphPresets';
 import { numberedList, simpleList } from './listPresets';
 import { Preset } from './Preset';
 import { undeleteableText } from './undeleteablePresets';
@@ -24,6 +24,7 @@ export const allPresets: Preset[] = [
     simpleList,
     numberedList,
     mixedParagraphs,
+    htmlParagraphs,
     allTextFormats,
     image64x64Gradient,
     image64x64Black,

diff --git a/demo/scripts/controlsV2/sidePane/presets/allPresets/paragraphPresets.ts b/demo/scripts/controlsV2/sidePane/presets/allPresets/paragraphPresets.ts
@@ -1,5 +1,69 @@
 import { Preset } from './Preset';
 
+export const htmlParagraphs: Preset = {
+    buttonName: 'HTML Paragraphs with margins',
+    id: 'htmlParagraphs',
+    content: {
+        blockGroupType: 'Document',
+        blocks: [
+            {
+                segments: [
+                    {
+                        text: 'line 1',
+                        segmentType: 'Text',
+                        format: {},
+                    },
+                ],
+                blockType: 'Paragraph',
+                format: {
+                    marginTop: '1em',
+                    marginBottom: '1em',
+                },
+                decorator: {
+                    tagName: 'p',
+                    format: {},
+                },
+            },
+            {
+                segments: [
+                    {
+                        text: 'line 2',
+                        segmentType: 'Text',
+                        format: {},
+                    },
+                ],
+                blockType: 'Paragraph',
+                format: {
+                    marginTop: '1em',
+                    marginBottom: '1em',
+                },
+                decorator: {
+                    tagName: 'p',
+                    format: {},
+                },
+            },
+            {
+                segments: [
+                    {
+                        text: 'line 3',
+                        segmentType: 'Text',
+                        format: {},
+                    },
+                ],
+                blockType: 'Paragraph',
+                format: {
+                    marginTop: '1em',
+                    marginBottom: '1em',
+                },
+                decorator: {
+                    tagName: 'p',
+                    format: {},
+                },
+            },
+        ],
+    },
+};
+
 export const mixedParagraphs: Preset = {
     buttonName: 'Mixed Paragraphs',
     id: 'mixedParagraphs',