Skip to content

Commit

Permalink
Merge pull request #2781 from microsoft/u/juliaroldi/find-images-on-t…
Browse files Browse the repository at this point in the history 
…ables

Fix image selection in tables
  • Loading branch information
@juliaroldi
juliaroldi authored Sep 3, 2024
2 parents 8faa8e0 + ffc0685 commit ab11e03
Show file tree
Hide file tree
Showing 3 changed files with 296 additions and 2 deletions.
7 changes: 6 additions & 1 deletion packages/roosterjs-content-model-plugins/lib/imageEdit/ImageEditPlugin.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -194,7 +194,11 @@ export class ImageEditPlugin implements ImageEditor, EditorPlugin {
this.isImageSelection(event.rawEvent.target as Node) &&
event.rawEvent.button !== MouseRightButton
) {
this.applyFormatWithContentModel(editor, this.isCropMode, true);
this.applyFormatWithContentModel(
editor,
this.isCropMode,
this.shadowSpan === event.rawEvent.target
);
}
}

Expand Down Expand Up @@ -287,6 +291,7 @@ export class ImageEditPlugin implements ImageEditor, EditorPlugin {

image.isSelected = shouldSelectImage;
image.isSelectedAsImageSelection = shouldSelectImage;
delete image.dataset.isEditing;
}
);

Expand Down
23 changes: 22 additions & 1 deletion packages/roosterjs-content-model-plugins/lib/imageEdit/utils/findEditingImage.ts
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,7 @@
import type { ReadonlyContentModelBlockGroup } from 'roosterjs-content-model-types';
import type {
ReadonlyContentModelBlockGroup,
ReadonlyContentModelTable,
} from 'roosterjs-content-model-types';
import type { ImageAndParagraph } from '../types/ImageAndParagraph';

/**
Expand Down Expand Up @@ -45,10 +48,28 @@ export function findEditingImage(
break;
}
}
break;
case 'Table':
const imageInTable = findEditingImageOnTable(block, imageId);

if (imageInTable) {
return imageInTable;
}
break;
}
}

return null;
}

const findEditingImageOnTable = (table: ReadonlyContentModelTable, imageId?: string) => {
for (const row of table.rows) {
for (const cell of row.cells) {
const result = findEditingImage(cell, imageId);
if (result) {
return result;
}
}
}
return null;
};
268 changes: 268 additions & 0 deletions packages/roosterjs-content-model-plugins/test/imageEdit/utils/findEditingImageTest.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -107,6 +107,274 @@ describe('findEditingImage', () => {
});
});

it('editing image in table', () => {
const model: ContentModelDocument = {
blockGroupType: 'Document',
blocks: [
{
widths: [153, 120],
rows: [
{
height: 157,
cells: [
{
spanAbove: false,
spanLeft: false,
isHeader: false,
blockGroupType: 'TableCell',
blocks: [
{
segments: [
{
src:
'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAsJCQcJCQcJCQkJCwkJCQkJCQsJCwsMCwsLDA0QDB...',
isSelectedAsImageSelection: true,
segmentType: 'Image',
isSelected: true,
format: {
fontFamily: 'Calibri',
fontSize: '11pt',
textColor: 'rgb(0, 0, 0)',
id: 'image_0',
maxWidth: '773px',
},
dataset: {
isEditing: 'true',
},
},
],
segmentFormat: {
fontFamily: 'Calibri',
fontSize: '11pt',
textColor: 'rgb(0, 0, 0)',
},
blockType: 'Paragraph',
format: {},
},
],
format: {
borderTop: '1px solid rgb(171, 171, 171)',
borderRight: '1px solid rgb(171, 171, 171)',
borderBottom: '1px solid rgb(171, 171, 171)',
borderLeft: '1px solid rgb(171, 171, 171)',
verticalAlign: 'top',
width: '120px',
height: '22px',
useBorderBox: true,
},
dataset: {},
},
{
spanAbove: false,
spanLeft: false,
isHeader: false,
blockGroupType: 'TableCell',
blocks: [
{
segments: [
{
segmentType: 'Br',
format: {
fontFamily: 'Calibri',
fontSize: '11pt',
textColor: 'rgb(0, 0, 0)',
},
},
],
segmentFormat: {
fontFamily: 'Calibri',
fontSize: '11pt',
textColor: 'rgb(0, 0, 0)',
},
blockType: 'Paragraph',
format: {},
},
],
format: {
borderTop: '1px solid rgb(171, 171, 171)',
borderRight: '1px solid rgb(171, 171, 171)',
borderBottom: '1px solid rgb(171, 171, 171)',
borderLeft: '1px solid rgb(171, 171, 171)',
verticalAlign: 'top',
width: '120px',
height: '22px',
useBorderBox: true,
},
dataset: {},
},
],
format: {},
},
{
height: 22,
cells: [
{
spanAbove: false,
spanLeft: false,
isHeader: false,
blockGroupType: 'TableCell',
blocks: [
{
segments: [
{
segmentType: 'Br',
format: {
fontFamily: 'Calibri',
fontSize: '11pt',
textColor: 'rgb(0, 0, 0)',
},
},
],
segmentFormat: {
fontFamily: 'Calibri',
fontSize: '11pt',
textColor: 'rgb(0, 0, 0)',
},
blockType: 'Paragraph',
format: {},
},
],
format: {
borderTop: '1px solid rgb(171, 171, 171)',
borderRight: '1px solid rgb(171, 171, 171)',
borderBottom: '1px solid rgb(171, 171, 171)',
borderLeft: '1px solid rgb(171, 171, 171)',
verticalAlign: 'top',
width: '120px',
height: '22px',
useBorderBox: true,
},
dataset: {},
},
{
spanAbove: false,
spanLeft: false,
isHeader: false,
blockGroupType: 'TableCell',
blocks: [
{
segments: [
{
segmentType: 'Br',
format: {
fontFamily: 'Calibri',
fontSize: '11pt',
textColor: 'rgb(0, 0, 0)',
},
},
],
segmentFormat: {
fontFamily: 'Calibri',
fontSize: '11pt',
textColor: 'rgb(0, 0, 0)',
},
blockType: 'Paragraph',
format: {},
},
],
format: {
borderTop: '1px solid rgb(171, 171, 171)',
borderRight: '1px solid rgb(171, 171, 171)',
borderBottom: '1px solid rgb(171, 171, 171)',
borderLeft: '1px solid rgb(171, 171, 171)',
verticalAlign: 'top',
width: '120px',
height: '22px',
useBorderBox: true,
},
dataset: {},
},
],
format: {},
},
],
blockType: 'Table',
format: {
useBorderBox: true,
borderCollapse: true,
},
dataset: {
editingInfo:
'{"topBorderColor":"#ABABAB","bottomBorderColor":"#ABABAB","verticalBorderColor":"#ABABAB","hasHeaderRow":false,"hasFirstColumn":false,"hasBandedRows":false,"hasBandedColumns":false,"bgColorEven":null,"bgColorOdd":"#ABABAB20","headerRowColor":"#ABABAB","tableBorderFormat":0,"verticalAlign":"top"}',
},
},
{
segments: [
{
segmentType: 'Br',
format: {
fontFamily: 'Calibri',
fontSize: '11pt',
textColor: 'rgb(0, 0, 0)',
},
},
],
segmentFormat: {
fontFamily: 'Calibri',
fontSize: '11pt',
textColor: 'rgb(0, 0, 0)',
},
blockType: 'Paragraph',
format: {},
},
],
format: {
fontFamily: 'Calibri',
fontSize: '11pt',
textColor: '#000000',
},
};

const image = findEditingImage(model);
expect(image).toEqual({
image: {
src:
'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAsJCQcJCQcJCQkJCwkJCQkJCQsJCwsMCwsLDA0QDB...',
isSelectedAsImageSelection: true,
segmentType: 'Image',
isSelected: true,
format: {
fontFamily: 'Calibri',
fontSize: '11pt',
textColor: 'rgb(0, 0, 0)',
id: 'image_0',
maxWidth: '773px',
},
dataset: {
isEditing: 'true',
},
},
paragraph: {
segments: [
{
src:
'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAsJCQcJCQcJCQkJCwkJCQkJCQsJCwsMCwsLDA0QDB...',
isSelectedAsImageSelection: true,
segmentType: 'Image',
isSelected: true,
format: {
fontFamily: 'Calibri',
fontSize: '11pt',
textColor: 'rgb(0, 0, 0)',
id: 'image_0',
maxWidth: '773px',
},
dataset: {
isEditing: 'true',
},
},
],
segmentFormat: {
fontFamily: 'Calibri',
fontSize: '11pt',
textColor: 'rgb(0, 0, 0)',
},
blockType: 'Paragraph',
format: {},
},
});
});

it('editing image | by Id', () => {
const model: ContentModelDocument = {
blockGroupType: 'Document',
Expand Down

0 comments on commit ab11e03

Please sign in to comment.