Bump packages to 9.11.2 (#2826)

* Add a ID to the TempDiv, to be able to identify on blur was caused for copy/cut #2813 * delete image range * remove selection * fix build * WIP * clean info when delete image * WIP * WIP * add unit tests * nit * Remove style "white-space" from empty paragraph (#2820) * Remove white-space style for empty paragraph * improve * Fix #2804 (#2821) * touch images * Do not treat image without src as empty image (#2823) * update versions.json * update versions --------- Co-authored-by: Julia Roldi (from Dev Box) <[email protected]> Co-authored-by: Julia Roldi <[email protected]> Co-authored-by: Jiuqing Song <[email protected]>
microsoft · Oct 11, 2024 · db6f8d8 · db6f8d8
1 parent 320086c
commit db6f8d8
Show file tree

Hide file tree

Showing 9 changed files with 1,491 additions and 58 deletions.
diff --git a/packages/roosterjs-content-model-core/lib/corePlugin/cache/domIndexerImpl.ts b/packages/roosterjs-content-model-core/lib/corePlugin/cache/domIndexerImpl.ts
@@ -1,5 +1,7 @@
 import {
     EmptySegmentFormat,
+    addCode,
+    addLink,
     createParagraph,
     createSelectionMarker,
     createText,
@@ -448,6 +450,16 @@ export class DomIndexerImpl implements DomIndexer {
                     const marker = createSelectionMarker(first.format);
                     newSegments.push(marker);
 
+                    if (startOffset < (textNode.nodeValue ?? '').length) {
+                        if (first.link) {
+                            addLink(marker, first.link);
+                        }
+
+                        if (first.code) {
+                            addCode(marker, first.code);
+                        }
+                    }
+
                     selectable = marker;
                     endOffset = startOffset;
                 } else if (endOffset > startOffset) {

diff --git a/packages/roosterjs-content-model-core/test/corePlugin/cache/domIndexerImplTest.ts b/packages/roosterjs-content-model-core/test/corePlugin/cache/domIndexerImplTest.ts
@@ -12,6 +12,7 @@ import {
 import {
     CacheSelection,
     ContentModelDocument,
+    ContentModelLink,
     ContentModelSegment,
     DOMSelection,
 } from 'roosterjs-content-model-types';
@@ -934,6 +935,63 @@ describe('domIndexerImpl.reconcileSelection', () => {
             ],
         });
     });
+
+    it('Existing text has link', () => {
+        const node = document.createTextNode('test') as any;
+        const newRangeEx: DOMSelection = {
+            type: 'range',
+            range: createRange(node, 2),
+            isReverted: false,
+        };
+        const link: ContentModelLink = {
+            dataset: {},
+            format: {
+                href: 'test',
+            },
+        };
+        const paragraph = createParagraph();
+        const segment = createText('', {}, link);
+
+        paragraph.segments.push(segment);
+        domIndexerImpl.onSegment(node, paragraph, [segment]);
+
+        const result = domIndexerImpl.reconcileSelection(model, newRangeEx);
+
+        const segment1: ContentModelSegment = {
+            segmentType: 'Text',
+            text: 'te',
+            format: {},
+            link,
+        };
+        const segment2: ContentModelSegment = {
+            segmentType: 'Text',
+            text: 'st',
+            format: {},
+            link,
+        };
+
+        expect(result).toBeTrue();
+        expect(node.__roosterjsContentModel).toEqual({
+            paragraph,
+            segments: [segment1, segment2],
+        });
+        expect(paragraph).toEqual({
+            blockType: 'Paragraph',
+            format: {},
+            segments: [
+                segment1,
+                {
+                    segmentType: 'SelectionMarker',
+                    format: {},
+                    isSelected: true,
+                    link,
+                },
+                segment2,
+            ],
+        });
+        expect(setSelectionSpy).not.toHaveBeenCalled();
+        expect(model.hasRevertedRangeSelection).toBeFalsy();
+    });
 });
 
 describe('domIndexerImpl.reconcileChildList', () => {

diff --git a/packages/roosterjs-content-model-dom/lib/modelApi/common/normalizeParagraph.ts b/packages/roosterjs-content-model-dom/lib/modelApi/common/normalizeParagraph.ts
@@ -38,6 +38,8 @@ export function normalizeParagraph(paragraph: ReadonlyContentModelParagraph) {
                 mutateBlock(paragraph).segments.pop();
             }
         }
+
+        normalizeParagraphStyle(paragraph);
     }
 
     if (!isWhiteSpacePreserved(paragraph.format.whiteSpace)) {
@@ -51,6 +53,18 @@ export function normalizeParagraph(paragraph: ReadonlyContentModelParagraph) {
     moveUpSegmentFormat(paragraph);
 }
 
+function normalizeParagraphStyle(paragraph: ReadonlyContentModelParagraph) {
+    // New paragraph should not have white-space style
+    if (
+        paragraph.format.whiteSpace &&
+        paragraph.segments.every(
+            seg => seg.segmentType == 'Br' || seg.segmentType == 'SelectionMarker'
+        )
+    ) {
+        delete mutateBlock(paragraph).format.whiteSpace;
+    }
+}
+
 function removeEmptySegments(block: ReadonlyContentModelParagraph) {
     for (let j = block.segments.length - 1; j >= 0; j--) {
         if (isSegmentEmpty(block.segments[j])) {

diff --git a/packages/roosterjs-content-model-dom/test/modelApi/common/normalizeParagraphTest.ts b/packages/roosterjs-content-model-dom/test/modelApi/common/normalizeParagraphTest.ts
@@ -809,4 +809,34 @@ describe('Move up format', () => {
             cachedElement: mockedCache,
         });
     });
+
+    it('Empty paragraph has white-space style', () => {
+        const para = createParagraph(false, { whiteSpace: 'pre-wrap' });
+        const br = createBr();
+
+        para.segments.push(br);
+
+        normalizeParagraph(para);
+
+        expect(para).toEqual({
+            blockType: 'Paragraph',
+            segments: [br],
+            format: {},
+        });
+    });
+
+    it('Paragraph has content and white-space style', () => {
+        const para = createParagraph(false, { whiteSpace: 'pre-wrap' });
+        const text = createText('test');
+
+        para.segments.push(text);
+
+        normalizeParagraph(para);
+
+        expect(para).toEqual({
+            blockType: 'Paragraph',
+            segments: [text],
+            format: { whiteSpace: 'pre-wrap' },
+        });
+    });
 });
diff --git a/packages/roosterjs-content-model-plugins/lib/imageEdit/ImageEditPlugin.ts b/packages/roosterjs-content-model-plugins/lib/imageEdit/ImageEditPlugin.ts
@@ -14,10 +14,10 @@ import { Resizer } from './Resizer/resizerContext';
 import { Rotator } from './Rotator/rotatorContext';
 import { updateRotateHandle } from './Rotator/updateRotateHandle';
 import { updateWrapper } from './utils/updateWrapper';
-
 import {
     ChangeSource,
     getSafeIdSelector,
+    getSelectedParagraphs,
     isElementOfType,
     isNodeOfType,
     mutateBlock,
@@ -254,21 +254,26 @@ export class ImageEditPlugin implements ImageEditor, EditorPlugin {
         }
     }
 
-    private applyFormatWithContentModel(
+    /**
+     * EXPOSED FOR TESTING PURPOSE ONLY
+     */
+    protected applyFormatWithContentModel(
         editor: IEditor,
         isCropMode: boolean,
         shouldSelectImage: boolean,
         isApiOperation?: boolean
     ) {
         let editingImageModel: ContentModelImage | undefined;
         const selection = editor.getDOMSelection();
+
         editor.formatContentModel(
             model => {
                 const editingImage = getSelectedImage(model);
                 const previousSelectedImage = isApiOperation
                     ? editingImage
                     : findEditingImage(model);
                 let result = false;
+
                 if (
                     shouldSelectImage ||
                     previousSelectedImage?.image != editingImage?.image ||
@@ -301,6 +306,16 @@ export class ImageEditPlugin implements ImageEditor, EditorPlugin {
                                 image.isSelected = shouldSelectImage;
                                 image.isSelectedAsImageSelection = shouldSelectImage;
                                 delete image.dataset.isEditing;
+
+                                if (selection?.type == 'range' && !selection.range.collapsed) {
+                                    const selectedParagraphs = getSelectedParagraphs(model, true);
+                                    const isImageInRange = selectedParagraphs.some(paragraph =>
+                                        paragraph.segments.includes(image)
+                                    );
+                                    if (isImageInRange) {
+                                        image.isSelected = true;
+                                    }
+                                }
                             }
                         );
 
@@ -314,6 +329,7 @@ export class ImageEditPlugin implements ImageEditor, EditorPlugin {
 
                     this.isEditing = false;
                     this.isCropMode = false;
+
                     if (
                         editingImage &&
                         selection?.type == 'image' &&
@@ -404,6 +420,7 @@ export class ImageEditPlugin implements ImageEditor, EditorPlugin {
         if (this.imageEditInfo) {
             this.startEditing(editor, image, ['resize', 'rotate']);
             if (this.selectedImage && this.imageEditInfo && this.wrapper && this.clonedImage) {
+                const isMobileOrTable = !!editor.getEnvironment().isMobileOrTablet;
                 this.dndHelpers = [
                     ...getDropAndDragHelpers(
                         this.wrapper,
@@ -429,7 +446,8 @@ export class ImageEditPlugin implements ImageEditor, EditorPlugin {
                                 this.wasImageResized = true;
                             }
                         },
-                        this.zoomScale
+                        this.zoomScale,
+                        isMobileOrTable
                     ),
                     ...getDropAndDragHelpers(
                         this.wrapper,
@@ -460,7 +478,8 @@ export class ImageEditPlugin implements ImageEditor, EditorPlugin {
                                 );
                             }
                         },
-                        this.zoomScale
+                        this.zoomScale,
+                        isMobileOrTable
                     ),
                 ];
 
@@ -555,7 +574,8 @@ export class ImageEditPlugin implements ImageEditor, EditorPlugin {
                                 this.isCropMode = true;
                             }
                         },
-                        this.zoomScale
+                        this.zoomScale,
+                        !!editor.getEnvironment().isMobileOrTablet
                     ),
                 ];
                 updateWrapper(

diff --git a/packages/roosterjs-content-model-plugins/lib/imageEdit/utils/getDropAndDragHelpers.ts b/packages/roosterjs-content-model-plugins/lib/imageEdit/utils/getDropAndDragHelpers.ts
@@ -16,7 +16,8 @@ export function getDropAndDragHelpers(
     elementClass: ImageEditElementClass,
     helper: DragAndDropHandler<DragAndDropContext, any>,
     updateWrapper: (context: DragAndDropContext, _handle: HTMLElement) => void,
-    zoomScale: number
+    zoomScale: number,
+    useTouch: boolean
 ): DragAndDropHelper<DragAndDropContext, any>[] {
     return getEditElements(wrapper, elementClass).map(
         element =>
@@ -31,7 +32,8 @@ export function getDropAndDragHelpers(
                 },
                 updateWrapper,
                 helper,
-                zoomScale
+                zoomScale,
+                useTouch
             )
     );
 }