Version bump to 9.38.0

demo/scripts/controlsV2/sidePane/editorOptions/EditorOptionsPlugin.ts

@@ -66,6 +66,7 @@ const initialState: OptionState = {
         'PersistCache',
         'HandleEnterKey',
         'CustomCopyCut',
+        'CloneIndependentRoot',
     ]),
 };
 

demo/scripts/controlsV2/sidePane/editorOptions/ExperimentalFeatures.tsx

@@ -14,6 +14,7 @@ export class ExperimentalFeatures extends React.Component<DefaultFormatProps, {}
                 {this.renderFeature('PersistCache')}
                 {this.renderFeature('HandleEnterKey')}
                 {this.renderFeature('CustomCopyCut')}
+                {this.renderFeature('CloneIndependentRoot')}
             </>
         );
     }

packages/roosterjs-content-model-api/lib/index.ts

@@ -62,3 +62,4 @@ export { matchLink } from './modelApi/link/matchLink';
 export { promoteLink } from './modelApi/link/promoteLink';
 export { getListAnnounceData } from './modelApi/list/getListAnnounceData';
 export { queryContentModelBlocks } from './modelApi/common/queryContentModelBlocks';
+export { adjustWordSelection } from './modelApi/selection/adjustWordSelection';

packages/roosterjs-content-model-api/lib/modelApi/selection/adjustWordSelection.ts

@@ -13,7 +13,10 @@ import type {
 } from 'roosterjs-content-model-types';
 
 /**
- * @internal
+ * Return specific word segment where the selection marker is located
+ * @param model The model document
+ * @param marker The selection marker
+ * @returns An array of segments that form the word where the selection marker is located
  */
 export function adjustWordSelection(
     model: ReadonlyContentModelDocument,

packages/roosterjs-content-model-core/lib/corePlugin/selection/SelectionPlugin.ts

@@ -559,6 +559,10 @@ class SelectionPlugin implements PluginWithState<SelectionPluginState> {
 
             range.setStart(posStart.node, posStart.offset);
             range.setEnd(posEnd.node, posEnd.offset);
+
+            if (range.toString() === '') {
+                range.collapse(true /* toStart */);
+            }
         } else {
             // Get deepest editable position in the cell
             const { node, offset } = normalizePos(cell, nodeOffset);

packages/roosterjs-content-model-core/lib/editor/core/DOMHelperImpl.ts

@@ -5,8 +5,15 @@ import type {
     DOMHelper,
 } from 'roosterjs-content-model-types';
 
+/**
+ * @internal
+ */
+export interface DOMHelperImplOption {
+    cloneIndependentRoot?: boolean;
+}
+
 class DOMHelperImpl implements DOMHelper {
-    constructor(private contentDiv: HTMLElement) {}
+    constructor(private contentDiv: HTMLElement, private options: DOMHelperImplOption) {}
 
     queryElements(selector: string): HTMLElement[] {
         return toArray(this.contentDiv.querySelectorAll(selector)) as HTMLElement[];
@@ -90,7 +97,14 @@ class DOMHelperImpl implements DOMHelper {
      * Get a deep cloned root element
      */
     getClonedRoot(): HTMLElement {
-        return this.contentDiv.cloneNode(true /*deep*/) as HTMLElement;
+        if (this.options.cloneIndependentRoot) {
+            const doc = this.contentDiv.ownerDocument.implementation.createHTMLDocument();
+            const clone = doc.importNode(this.contentDiv, true /*deep*/);
+
+            return clone;
+        } else {
+            return this.contentDiv.cloneNode(true /*deep*/) as HTMLElement;
+        }
     }
 
     /**
@@ -139,6 +153,9 @@ class DOMHelperImpl implements DOMHelper {
 /**
  * @internal Create new instance of DOMHelper
  */
-export function createDOMHelper(contentDiv: HTMLElement): DOMHelper {
-    return new DOMHelperImpl(contentDiv);
+export function createDOMHelper(
+    contentDiv: HTMLElement,
+    options: DOMHelperImplOption = {}
+): DOMHelper {
+    return new DOMHelperImpl(contentDiv, options);
 }

packages/roosterjs-content-model-core/lib/editor/core/createEditorCore.ts

@@ -50,7 +50,9 @@ export function createEditorCore(contentDiv: HTMLDivElement, options: EditorOpti
                 ? options.trustedHTMLHandler
                 : createTrustedHTMLHandler(domCreator),
         domCreator: domCreator,
-        domHelper: createDOMHelper(contentDiv),
+        domHelper: createDOMHelper(contentDiv, {
+            cloneIndependentRoot: options.experimentalFeatures?.includes('CloneIndependentRoot'),
+        }),
         ...getPluginState(corePlugins),
         disposeErrorHandler: options.disposeErrorHandler,
         onFixUpModel: options.onFixUpModel,

packages/roosterjs-content-model-core/test/editor/core/DOMHelperImplTest.ts

@@ -365,6 +365,31 @@ describe('DOMHelperImpl', () => {
             expect(result).toBe(mockedClone);
             expect(cloneSpy).toHaveBeenCalledWith(true);
         });
+
+        it('getClonedRoot, with CloneIndependentRoot on', () => {
+            const mockedClone = 'CLONE' as any;
+            const cloneSpy = jasmine.createSpy('cloneSpy').and.returnValue(mockedClone);
+            const importNodeSpy = jasmine.createSpy('importNodeSpy').and.returnValue(mockedClone);
+            const mockedDiv: HTMLElement = {
+                cloneNode: cloneSpy,
+                ownerDocument: {
+                    implementation: {
+                        createHTMLDocument: () => ({
+                            importNode: importNodeSpy,
+                        }),
+                    },
+                },
+            } as any;
+            const domHelper = createDOMHelper(mockedDiv, {
+                cloneIndependentRoot: true,
+            });
+
+            const result = domHelper.getClonedRoot();
+
+            expect(result).toBe(mockedClone);
+            expect(cloneSpy).not.toHaveBeenCalled();
+            expect(importNodeSpy).toHaveBeenCalledWith(mockedDiv, true);
+        });
     });
 
     describe('getContainerFormat', () => {

packages/roosterjs-content-model-dom/lib/formatHandlers/common/roleFormatHandler.ts

@@ -0,0 +1,20 @@
+import type { RoleFormat } from 'roosterjs-content-model-types';
+import type { FormatHandler } from '../FormatHandler';
+
+/**
+ * @internal
+ */
+export const roleFormatHandler: FormatHandler<RoleFormat> = {
+    parse: (format, element) => {
+        const role = element.getAttribute('role');
+
+        if (role) {
+            format.role = role;
+        }
+    },
+    apply: (format, element) => {
+        if (format.role) {
+            element.setAttribute('role', format.role);
+        }
+    },
+};

packages/roosterjs-content-model-dom/lib/formatHandlers/defaultFormatHandlers.ts

@@ -24,6 +24,7 @@ import { listLevelThreadFormatHandler } from './list/listLevelThreadFormatHandle
 import { listStyleFormatHandler } from './list/listStyleFormatHandler';
 import { marginFormatHandler } from './block/marginFormatHandler';
 import { paddingFormatHandler } from './block/paddingFormatHandler';
+import { roleFormatHandler } from './common/roleFormatHandler';
 import { sizeFormatHandler } from './common/sizeFormatHandler';
 import { strikeFormatHandler } from './segment/strikeFormatHandler';
 import { superOrSubScriptFormatHandler } from './segment/superOrSubScriptFormatHandler';
@@ -79,6 +80,7 @@ const defaultFormatHandlerMap: FormatHandlers = {
     listStyle: listStyleFormatHandler,
     margin: marginFormatHandler,
     padding: paddingFormatHandler,
+    role: roleFormatHandler,
     size: sizeFormatHandler,
     strike: strikeFormatHandler,
     superOrSubScript: superOrSubScriptFormatHandler,
@@ -179,6 +181,7 @@ export const defaultFormatKeysPerCategory: {
         'tableLayout',
         'textColor',
         'direction',
+        'role',
     ],
     tableBorder: ['borderBox', 'tableSpacing'],
     tableCellBorder: ['borderBox'],

packages/roosterjs-content-model-dom/test/formatHandlers/block/displayFormatHandlerTest.ts

@@ -1,7 +1,7 @@
 import { createDomToModelContext } from '../../../lib/domToModel/context/createDomToModelContext';
 import { createModelToDomContext } from '../../../lib/modelToDom/context/createModelToDomContext';
-import { DisplayFormat, DomToModelContext, ModelToDomContext } from 'roosterjs-content-model-types';
 import { displayFormatHandler } from '../../../lib/formatHandlers/block/displayFormatHandler';
+import { DisplayFormat, DomToModelContext, ModelToDomContext } from 'roosterjs-content-model-types';
 
 describe('displayFormatHandler.parse', () => {
     let div: HTMLElement;

packages/roosterjs-content-model-dom/test/formatHandlers/common/roleFormatHandlerTest.ts

@@ -0,0 +1,164 @@
+import { DomToModelContext, ModelToDomContext, RoleFormat } from 'roosterjs-content-model-types';
+import { roleFormatHandler } from '../../../lib/formatHandlers/common/roleFormatHandler';
+import { createDomToModelContext } from '../../../lib/domToModel/context/createDomToModelContext';
+import { createModelToDomContext } from '../../../lib/modelToDom/context/createModelToDomContext';
+
+describe('roleFormatHandler.parse', () => {
+    let div: HTMLElement;
+    let format: RoleFormat;
+    let context: DomToModelContext;
+
+    beforeEach(() => {
+        div = document.createElement('div');
+        format = {};
+        context = createDomToModelContext();
+    });
+
+    it('No role', () => {
+        roleFormatHandler.parse(format, div, context, {});
+        expect(format).toEqual({});
+    });
+
+    it('has role', () => {
+        div.setAttribute('role', 'button');
+        roleFormatHandler.parse(format, div, context, {});
+        expect(format).toEqual({
+            role: 'button',
+        });
+    });
+
+    it('has role with different value', () => {
+        div.setAttribute('role', 'tabpanel');
+        roleFormatHandler.parse(format, div, context, {});
+        expect(format).toEqual({
+            role: 'tabpanel',
+        });
+    });
+
+    it('has empty role', () => {
+        div.setAttribute('role', '');
+        roleFormatHandler.parse(format, div, context, {});
+        expect(format).toEqual({});
+    });
+
+    it('table with role="table"', () => {
+        const table = document.createElement('table');
+        table.setAttribute('role', 'table');
+        roleFormatHandler.parse(format, table, context, {});
+        expect(format).toEqual({
+            role: 'table',
+        });
+    });
+
+    it('table with role="grid"', () => {
+        const table = document.createElement('table');
+        table.setAttribute('role', 'grid');
+        roleFormatHandler.parse(format, table, context, {});
+        expect(format).toEqual({
+            role: 'grid',
+        });
+    });
+
+    it('table with role="presentation"', () => {
+        const table = document.createElement('table');
+        table.setAttribute('role', 'presentation');
+        roleFormatHandler.parse(format, table, context, {});
+        expect(format).toEqual({
+            role: 'presentation',
+        });
+    });
+
+    it('table with role="treegrid"', () => {
+        const table = document.createElement('table');
+        table.setAttribute('role', 'treegrid');
+        roleFormatHandler.parse(format, table, context, {});
+        expect(format).toEqual({
+            role: 'treegrid',
+        });
+    });
+});
+
+describe('roleFormatHandler.apply', () => {
+    let div: HTMLElement;
+    let format: RoleFormat;
+    let context: ModelToDomContext;
+
+    beforeEach(() => {
+        div = document.createElement('div');
+        format = {};
+        context = createModelToDomContext();
+    });
+
+    it('No role', () => {
+        roleFormatHandler.apply(format, div, context);
+        expect(div.outerHTML).toBe('<div></div>');
+    });
+
+    it('Has role', () => {
+        format.role = 'button';
+        roleFormatHandler.apply(format, div, context);
+        expect(div.outerHTML).toBe('<div role="button"></div>');
+    });
+
+    it('Has role with different value', () => {
+        format.role = 'tabpanel';
+        roleFormatHandler.apply(format, div, context);
+        expect(div.outerHTML).toBe('<div role="tabpanel"></div>');
+    });
+
+    it('Role applied to different element types', () => {
+        format.role = 'navigation';
+        const nav = document.createElement('nav');
+        roleFormatHandler.apply(format, nav, context);
+        expect(nav.outerHTML).toBe('<nav role="navigation"></nav>');
+    });
+
+    it('Apply role="table" to table element', () => {
+        format.role = 'table';
+        const table = document.createElement('table');
+        roleFormatHandler.apply(format, table, context);
+        expect(table.outerHTML).toBe('<table role="table"></table>');
+    });
+
+    it('Apply role="grid" to table element', () => {
+        format.role = 'grid';
+        const table = document.createElement('table');
+        roleFormatHandler.apply(format, table, context);
+        expect(table.outerHTML).toBe('<table role="grid"></table>');
+    });
+
+    it('Apply role="presentation" to table element', () => {
+        format.role = 'presentation';
+        const table = document.createElement('table');
+        roleFormatHandler.apply(format, table, context);
+        expect(table.outerHTML).toBe('<table role="presentation"></table>');
+    });
+
+    it('Apply role="treegrid" to table element', () => {
+        format.role = 'treegrid';
+        const table = document.createElement('table');
+        roleFormatHandler.apply(format, table, context);
+        expect(table.outerHTML).toBe('<table role="treegrid"></table>');
+    });
+
+    it('Apply role to table cell elements', () => {
+        format.role = 'gridcell';
+        const td = document.createElement('td');
+        roleFormatHandler.apply(format, td, context);
+        expect(td.outerHTML).toBe('<td role="gridcell"></td>');
+    });
+
+    it('Apply role to table header elements', () => {
+        format.role = 'columnheader';
+        const th = document.createElement('th');
+        roleFormatHandler.apply(format, th, context);
+        expect(th.outerHTML).toBe('<th role="columnheader"></th>');
+    });
+
+    it('Apply role to table row elements', () => {
+        format.role = 'row';
+        const tr = document.createElement('tr');
+        roleFormatHandler.apply(format, tr, context);
+        expect(tr.outerHTML).toBe('<tr role="row"></tr>');
+    });
+});

packages/roosterjs-content-model-plugins/lib/autoFormat/horizontalLine/checkAndInsertHorizontalLine.ts

@@ -1,5 +1,6 @@
 import type {
     ContentModelDividerFormat,
+    ContentModelListItem,
     FormatContentModelContext,
     ReadonlyContentModelDocument,
     ShallowMutableContentModelParagraph,
@@ -8,6 +9,7 @@ import {
     addBlock,
     createContentModelDocument,
     createDivider,
+    getOperationalBlocks,
     mergeModel,
 } from 'roosterjs-content-model-dom';
 
@@ -128,6 +130,20 @@ export const checkAndInsertHorizontalLine = (
     paragraph: ShallowMutableContentModelParagraph,
     context: FormatContentModelContext
 ) => {
+    // Do not create horizontal lines inside a list
+    const blocks = getOperationalBlocks<ContentModelListItem>(
+        model,
+        ['ListItem'],
+        ['TableCell', 'FormatContainer']
+    );
+    if (
+        blocks[0] &&
+        blocks[0].block.blockType == 'BlockGroup' &&
+        blocks[0].block.blockGroupType == 'ListItem'
+    ) {
+        return false;
+    }
+
     const allText = paragraph.segments.reduce(
         (acc, segment) => (segment.segmentType === 'Text' ? acc + segment.text : acc),
         ''