RoosterJs 8.32.0

.vscode/launch.json

@@ -33,6 +33,44 @@
             "args": ["start", "--chrome", "--components", "${fileBasenameNoExtension}"],
             "console": "integratedTerminal"
         },
+        {
+            "type": "node",
+            "request": "launch",
+            "name": "Debug All Unit Tests",
+            "program": "${workspaceFolder}/node_modules/karma/bin/karma",
+            "args": ["start", "--no-single-run"],
+            "console": "integratedTerminal"
+        },
+        {
+            "type": "node",
+            "request": "launch",
+            "name": "Debug All Unit Tests (Chrome)",
+            "program": "${workspaceFolder}/node_modules/karma/bin/karma",
+            "args": ["start", "--chrome", "--no-single-run"],
+            "console": "integratedTerminal"
+        },
+        {
+            "type": "node",
+            "request": "launch",
+            "name": "Debug current unit test file",
+            "program": "${workspaceFolder}/node_modules/karma/bin/karma",
+            "args": ["start", "--components", "${fileBasenameNoExtension}", "--no-single-run"],
+            "console": "integratedTerminal"
+        },
+        {
+            "type": "node",
+            "request": "launch",
+            "name": "Debug current unit test file (Chrome)",
+            "program": "${workspaceFolder}/node_modules/karma/bin/karma",
+            "args": [
+                "start",
+                "--chrome",
+                "--components",
+                "${fileBasenameNoExtension}",
+                "--no-single-run"
+            ],
+            "console": "integratedTerminal"
+        },
         {
             "type": "chrome",
             "request": "launch",

demo/scripts/controls/BuildInPluginState.ts

@@ -22,6 +22,7 @@ export interface BuildInPluginList {
     tableEditMenu: boolean;
     contextMenu: boolean;
     autoFormat: boolean;
+    imageSelection: boolean;
 }
 
 export default interface BuildInPluginState {

demo/scripts/controls/contentModel/components/format/FormatView.tsx

@@ -3,8 +3,12 @@ import { FormatRenderer } from './utils/FormatRenderer';
 
 const styles = require('./FormatView.scss');
 
-export function FormatView<T>(props: { format: T; renderers: FormatRenderer<T>[] }) {
-    const { format, renderers } = props;
+export function FormatView<T>(props: {
+    format: T;
+    renderers: FormatRenderer<T>[];
+    onUpdate?: () => void;
+}) {
+    const { format, renderers, onUpdate } = props;
 
-    return <div className={styles.formatTable}>{renderers.map(x => x(format))}</div>;
+    return <div className={styles.formatTable}>{renderers.map(x => x(format, onUpdate))}</div>;
 }

demo/scripts/controls/contentModel/components/format/utils/FormatRenderer.ts

@@ -1 +1 @@
-export type FormatRenderer<T> = (format: T) => JSX.Element;
+export type FormatRenderer<T> = (format: T, onUpdate?: () => void) => JSX.Element;

demo/scripts/controls/contentModel/components/format/utils/createCheckboxFormatRenderer.tsx

@@ -9,15 +9,17 @@ function CheckboxFormatItem<TFormat>(props: {
     format: TFormat;
     getter: (format: TFormat) => boolean;
     setter?: (format: TFormat, newValue: boolean) => void;
+    onUpdate?: () => void;
 }) {
-    const { name, getter, setter, format } = props;
+    const { name, getter, setter, format, onUpdate } = props;
     const checkbox = React.useRef<HTMLInputElement>(null);
     const [value, setValue] = useProperty<boolean>(getter(format));
 
     const onChange = React.useCallback(() => {
         const newValue = checkbox.current.checked;
         setValue(newValue);
         setter?.(format, newValue);
+        onUpdate?.();
     }, [format, setter, setValue]);
 
     return (
@@ -35,12 +37,13 @@ export function createCheckboxFormatRenderer<T>(
     getter: (format: T) => boolean,
     setter?: (format: T, newValue: boolean) => void
 ): FormatRenderer<T> {
-    return (format: T) => (
+    return (format: T, onUpdate?: () => void) => (
         <CheckboxFormatItem
             name={name}
             getter={getter}
             setter={setter}
             format={format}
+            onUpdate={onUpdate}
             key={name}
         />
     );

demo/scripts/controls/contentModel/components/format/utils/createColorFormatRender.tsx

@@ -11,8 +11,9 @@ function ColorFormatItem<T>(props: {
     format: T;
     getter: (format: T) => string;
     setter?: (format: T, newValue: string) => void;
+    onUpdate?: () => void;
 }) {
-    const { name, getter, setter, format } = props;
+    const { name, getter, setter, format, onUpdate } = props;
     const colorPickerBox = React.useRef<HTMLInputElement & HTMLTextAreaElement>(null);
     const colorValueBox = React.useRef<HTMLInputElement>(null);
     const transparentCheckBox = React.useRef<HTMLInputElement>(null);
@@ -39,6 +40,7 @@ function ColorFormatItem<T>(props: {
 
             setValue(newValue);
             setter?.(format, newValue);
+            onUpdate?.();
         },
         [setter, format]
     );
@@ -90,8 +92,15 @@ export function createColorFormatRenderer<T>(
     getter: (format: T) => string,
     setter?: (format: T, newValue: string) => void
 ): FormatRenderer<T> {
-    return (format: T) => (
-        <ColorFormatItem name={name} getter={getter} setter={setter} format={format} key={name} />
+    return (format: T, onUpdate?: () => void) => (
+        <ColorFormatItem
+            name={name}
+            getter={getter}
+            setter={setter}
+            format={format}
+            key={name}
+            onUpdate={onUpdate}
+        />
     );
 }
 
@@ -100,7 +109,7 @@ export function createColorFormatRendererGroup<T, V extends string>(
     getter: (format: T) => string[],
     setter?: (format: T, name: V, newValue: string) => void
 ): FormatRenderer<T> {
-    return (format: T) => {
+    return (format: T, onUpdate?: () => void) => {
         const initValues = getter(format);
 
         return (
@@ -111,6 +120,7 @@ export function createColorFormatRendererGroup<T, V extends string>(
                         getter={() => initValues[index]}
                         setter={(format, newValue) => setter?.(format, name, newValue)}
                         format={format}
+                        onUpdate={onUpdate}
                         key={name}
                     />
                 ))}

demo/scripts/controls/contentModel/components/format/utils/createDropDownFormatRenderer.tsx

@@ -10,8 +10,9 @@ function DropDownFormatItem<TFormat, TOption extends string>(props: {
     options: TOption[];
     getter: (format: TFormat) => TOption | undefined;
     setter?: (format: TFormat, newValue: TOption | undefined) => void;
+    onUpdate?: () => void;
 }) {
-    const { name, getter, setter, format, options } = props;
+    const { name, getter, setter, format, options, onUpdate } = props;
     const dropDown = React.useRef<HTMLSelectElement>(null);
     const [value, setValue] = useProperty(getter(format));
 
@@ -20,6 +21,7 @@ function DropDownFormatItem<TFormat, TOption extends string>(props: {
             dropDown.current.value == '' ? undefined : (dropDown.current.value as TOption);
         setValue(newValue);
         setter?.(format, newValue);
+        onUpdate?.();
     }, [format, setter]);
 
     return (
@@ -45,13 +47,14 @@ export function createDropDownFormatRenderer<T, O extends string>(
     getter: (format: T) => O,
     setter?: (format: T, newValue: O) => void
 ): FormatRenderer<T> {
-    return (format: T) => (
+    return (format: T, onUpdate?: () => void) => (
         <DropDownFormatItem
             name={name}
             getter={getter}
             setter={setter}
             format={format}
             options={options}
+            onUpdate={onUpdate}
             key={name}
         />
     );
@@ -63,7 +66,7 @@ export function createDropDownFormatRendererGroup<T, O extends string, V extends
     getter: (format: T) => O[],
     setter?: (format: T, name: V, newValue: O) => void
 ): FormatRenderer<T> {
-    return (format: T) => {
+    return (format: T, onUpdate?: () => void) => {
         const initValues = getter(format);
         return (
             <>
@@ -74,6 +77,7 @@ export function createDropDownFormatRendererGroup<T, O extends string, V extends
                         setter={(format, newValue) => setter?.(format, name, newValue)}
                         format={format}
                         options={options}
+                        onUpdate={onUpdate}
                         key={name}
                     />
                 ))}

demo/scripts/controls/contentModel/components/format/utils/createTextFormatRenderer.tsx

@@ -9,16 +9,18 @@ function TextFormatItem<T>(props: {
     format: T;
     getter: (format: T) => string;
     setter?: (format: T, newValue: string) => void;
+    onUpdate?: () => void;
     type: 'text' | 'number' | 'multiline';
 }) {
-    const { name, getter, setter, format, type } = props;
+    const { name, getter, setter, format, type, onUpdate } = props;
     const textBox = React.useRef<HTMLInputElement & HTMLTextAreaElement>(null);
     const [value, setValue] = useProperty(getter(format));
 
     const updateValue = React.useCallback(
         (newValue: string) => {
             setValue(newValue);
             setter?.(format, newValue);
+            onUpdate();
         },
         [setter, format]
     );
@@ -78,13 +80,14 @@ export function createTextFormatRenderer<T>(
     setter?: (format: T, newValue: string) => void,
     type: 'text' | 'number' | 'multiline' = 'text'
 ): FormatRenderer<T> {
-    return (format: T) => (
+    return (format: T, onUpdate?: () => void) => (
         <TextFormatItem
             name={name}
             getter={getter}
             setter={setter}
             format={format}
             type={type}
+            onUpdate={onUpdate}
             key={name}
         />
     );
@@ -96,7 +99,7 @@ export function createTextFormatRendererGroup<T, V extends string>(
     setter?: (format: T, name: V, newValue: string) => void,
     type: 'text' | 'number' | 'multiline' = 'text'
 ): FormatRenderer<T> {
-    return (format: T) => {
+    return (format: T, onUpdate?: () => void) => {
         const initValues = getter(format);
 
         return (
@@ -108,6 +111,7 @@ export function createTextFormatRendererGroup<T, V extends string>(
                         setter={(format, newValue) => setter?.(format, name, newValue)}
                         format={format}
                         type={type}
+                        onUpdate={onUpdate}
                         key={name}
                     />
                 ))}

demo/scripts/controls/contentModel/components/model/ContentModelDocumentView.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { BlockGroupContentView } from './BlockGroupContentView';
-import { ContentModelDocument, hasSelectionInBlock } from 'roosterjs-content-model';
+import { ContentModelDocument, hasSelectionInBlockGroup } from 'roosterjs-content-model';
 import { ContentModelView } from '../ContentModelView';
 
 const styles = require('./ContentModelDocumentView.scss');
@@ -16,7 +16,7 @@ export function ContentModelDocumentView(props: { doc: ContentModelDocument }) {
             title="Document"
             subTitle={doc.document.location.href}
             className={styles.modelDocument}
-            hasSelection={hasSelectionInBlock(doc)}
+            hasSelection={hasSelectionInBlockGroup(doc)}
             jsonSource={doc}
             getContent={getContent}
         />

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

@@ -12,7 +12,7 @@ import { VerticalAlignFormatRenderer } from '../format/formatPart/VerticalAlignF
 import {
     ContentModelTableCell,
     ContentModelTableCellFormat,
-    hasSelectionInBlock,
+    hasSelectionInBlockGroup,
 } from 'roosterjs-content-model';
 
 const styles = require('./ContentModelTableCellView.scss');
@@ -99,7 +99,7 @@ export function ContentModelTableCellView(props: { cell: ContentModelTableCell }
             title={isHeader ? 'TableCellHeader' : 'TableCell'}
             subTitle={subTitle}
             className={styles.modelTableCell}
-            hasSelection={hasSelectionInBlock(cell)}
+            hasSelection={hasSelectionInBlockGroup(cell)}
             isSelected={cell.isSelected}
             jsonSource={cell}
             getContent={getContent}

demo/scripts/controls/contentModel/components/model/ContentModelTableView.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { applyTableFormat } from 'roosterjs-content-model/lib/modelApi/table/applyTableFormat';
 import { BackgroundColorFormatRenderer } from '../format/formatPart/BackgroundColorFormatRenderer';
 import { BorderFormatRenderers } from '../format/formatPart/BorderFormatRenderers';
-import { ContentModelBlockView } from './ContentModelBlockView';
+import { ContentModelBlockGroupView } from './ContentModelBlockGroupView';
 import { ContentModelView } from '../ContentModelView';
 import { FormatRenderer } from '../format/utils/FormatRenderer';
 import { FormatView } from '../format/FormatView';
@@ -48,7 +48,7 @@ export function ContentModelTableView(props: { table: ContentModelTable }) {
                 {table.cells.map((row, i) => (
                     <div className={styles.tableRow} key={i}>
                         {row.map((cell, j) => (
-                            <ContentModelBlockView block={cell} key={j} />
+                            <ContentModelBlockGroupView group={cell} key={j} />
                         ))}
                     </div>
                 ))}

demo/scripts/controls/editor/ExperimentalContentModelEditor.ts

@@ -1,12 +1,14 @@
+import { ContentPosition, EditorOptions, SelectionRangeTypes } from 'roosterjs-editor-types';
 import { Editor } from 'roosterjs-editor-core';
-import { EditorOptions, SelectionRangeTypes } from 'roosterjs-editor-types';
 import { getComputedStyles, Position } from 'roosterjs-editor-dom';
 import {
-    ContentModelContext,
+    EditorContext,
     ContentModelDocument,
     contentModelToDom,
     domToContentModel,
+    DomToModelOption,
     IExperimentalContentModelEditor,
+    ModelToDomOption,
 } from 'roosterjs-content-model';
 
 /**
@@ -29,9 +31,9 @@ export default class ExperimentalContentModelEditor extends Editor
     }
 
     /**
-     * Create a ContentModelContext object used by ContentModel API
+     * Create a EditorContext object used by ContentModel API
      */
-    createContentModelContext(): ContentModelContext {
+    createEditorContext(): EditorContext {
         return {
             isDarkMode: this.isDarkMode(),
             zoomScale: this.getZoomScale(),
@@ -44,26 +46,25 @@ export default class ExperimentalContentModelEditor extends Editor
      * Create Content Model from DOM tree in this editor
      * @param startNode Optional start node. If provided, Content Model will be created from this node (including itself),
      * otherwise it will create Content Model for the whole content in editor.
+     * @param option The option to customize the behavior of DOM to Content Model conversion
      */
-    createContentModel(startNode?: HTMLElement): ContentModelDocument {
-        return domToContentModel(
-            startNode || this.contentDiv,
-            this.createContentModelContext(),
-            !!startNode,
-            this.getSelectionRangeEx()
-        );
+    createContentModel(startNode?: HTMLElement, option?: DomToModelOption): ContentModelDocument {
+        return domToContentModel(startNode || this.contentDiv, this.createEditorContext(), {
+            includeRoot: !!startNode,
+            selectionRange: this.getSelectionRangeEx(),
+            ...(option || {}),
+        });
     }
 
     /**
      * Set content with content model
      * @param model The content model to set
      * @param mergingCallback A callback to indicate how should the new content be integrated into existing content
+     * @param option Additional options to customize the behavior of Content Model to DOM conversion
      */
-    setContentModel(
-        model: ContentModelDocument,
-        mergingCallback: (fragment: DocumentFragment) => void = this.defaultMergingCallback
-    ) {
-        const [fragment, range] = contentModelToDom(model, this.createContentModelContext());
+    setContentModel(model: ContentModelDocument, option?: ModelToDomOption) {
+        const [fragment, range] = contentModelToDom(model, this.createEditorContext(), option);
+        const mergingCallback = option?.mergingCallback || this.defaultMergingCallback;
 
         switch (range?.type) {
             case SelectionRangeTypes.Normal:
@@ -86,7 +87,10 @@ export default class ExperimentalContentModelEditor extends Editor
     }
 
     private defaultMergingCallback = (fragment: DocumentFragment) => {
-        this.setContent('');
-        this.insertNode(fragment);
+        while (this.contentDiv.firstChild) {
+            this.contentDiv.removeChild(this.contentDiv.firstChild);
+        }
+
+        this.insertNode(fragment, { position: ContentPosition.Begin });
     };
 }