Merge pull request #1656 from microsoft/u/juliaroldi/image-format-con…

…tent-model Add Image Format to getFormatState
microsoft · Mar 22, 2023 · 5ff7581 · 5ff7581
2 parents 527cc0a + 7e4c912
commit 5ff7581
Show file tree

Hide file tree

Showing 4 changed files with 166 additions and 29 deletions.
diff --git a/packages/roosterjs-content-model/lib/modelApi/common/retrieveModelFormatState.ts b/packages/roosterjs-content-model/lib/modelApi/common/retrieveModelFormatState.ts
@@ -1,11 +1,13 @@
 import { ContentModelBlock } from '../../publicTypes/block/ContentModelBlock';
 import { ContentModelBlockGroup } from '../../publicTypes/group/ContentModelBlockGroup';
 import { ContentModelDocument } from '../../publicTypes/group/ContentModelDocument';
+import { ContentModelFormatState } from '../../publicTypes/format/formatState/ContentModelFormatState';
+import { ContentModelImage } from '../../publicTypes/segment/ContentModelImage';
 import { ContentModelListItem } from '../../publicTypes/group/ContentModelListItem';
 import { ContentModelParagraph } from '../../publicTypes/block/ContentModelParagraph';
 import { ContentModelSegment } from '../../publicTypes/segment/ContentModelSegment';
 import { ContentModelSegmentFormat } from '../../publicTypes/format/ContentModelSegmentFormat';
-import { FormatState } from 'roosterjs-editor-types';
+import { extractBorderValues } from '../../domUtils/borderValues';
 import { getClosestAncestorBlockGroupIndex } from './getClosestAncestorBlockGroupIndex';
 import { isBold } from '../../publicApi/segment/toggleBold';
 import { iterateSelections, TableSelectionContext } from '../selection/iterateSelections';
@@ -17,11 +19,12 @@ import { updateTableMetadata } from '../../domUtils/metadata/updateTableMetadata
 export function retrieveModelFormatState(
     model: ContentModelDocument,
     pendingFormat: ContentModelSegmentFormat | null,
-    formatState: FormatState
+    formatState: ContentModelFormatState
 ) {
     let firstTableContext: TableSelectionContext | undefined;
     let firstBlock: ContentModelBlock | undefined;
     let isFirst = true;
+    let isFirstImage = true;
 
     if (pendingFormat) {
         // Pending format
@@ -59,6 +62,15 @@ export function retrieveModelFormatState(
                         segments.some(segment => segment.segmentType == 'Image');
 
                     isFirst = false;
+
+                    if (segment.segmentType === 'Image') {
+                        if (isFirstImage) {
+                            retrieveImageFormat(segment, formatState);
+                            isFirstImage = false;
+                        } else {
+                            formatState.imageFormat = undefined;
+                        }
+                    }
                 });
 
                 isFirst = false;
@@ -92,7 +104,7 @@ export function retrieveModelFormatState(
 }
 
 function retrieveSegmentFormat(
-    result: FormatState,
+    result: ContentModelFormatState,
     format: ContentModelSegmentFormat,
     isFirst: boolean,
     segment?: ContentModelSegment
@@ -126,7 +138,7 @@ function retrieveSegmentFormat(
 }
 
 function retrieveParagraphFormat(
-    result: FormatState,
+    result: ContentModelFormatState,
     paragraph: ContentModelParagraph,
     isFirst: boolean
 ) {
@@ -141,7 +153,7 @@ function retrieveParagraphFormat(
 }
 
 function retrieveStructureFormat(
-    result: FormatState,
+    result: ContentModelFormatState,
     path: ContentModelBlockGroup[],
     isFirst: boolean
 ) {
@@ -159,7 +171,7 @@ function retrieveStructureFormat(
     mergeValue(result, 'isBlockQuote', quoteIndex >= 0, isFirst);
 }
 
-function retrieveTableFormat(tableContext: TableSelectionContext, result: FormatState) {
+function retrieveTableFormat(tableContext: TableSelectionContext, result: ContentModelFormatState) {
     const tableFormat = updateTableMetadata(tableContext.table);
 
     result.isInTable = true;
@@ -170,10 +182,26 @@ function retrieveTableFormat(tableContext: TableSelectionContext, result: Format
     }
 }
 
-function mergeValue<K extends keyof FormatState>(
-    format: FormatState,
+function retrieveImageFormat(image: ContentModelImage, result: ContentModelFormatState) {
+    const { format } = image;
+    const borderKey = 'borderTop';
+    const extractedBorder = extractBorderValues(format[borderKey]);
+    const borderColor = extractedBorder.color;
+    const borderWidth = extractedBorder.width;
+    const borderStyle = extractedBorder.style;
+    result.imageFormat = {
+        borderColor,
+        borderWidth,
+        borderStyle,
+        boxShadow: format.boxShadow,
+        borderRadius: format.borderRadius,
+    };
+}
+
+function mergeValue<K extends keyof ContentModelFormatState>(
+    format: ContentModelFormatState,
     key: K,
-    newValue: FormatState[K] | undefined,
+    newValue: ContentModelFormatState[K] | undefined,
     isFirst: boolean
 ) {
     if (isFirst) {

diff --git a/...ges/roosterjs-content-model/lib/publicTypes/format/formatState/ContentModelFormatState.ts b/...ges/roosterjs-content-model/lib/publicTypes/format/formatState/ContentModelFormatState.ts
@@ -0,0 +1,12 @@
+import ImageFormat from './ImageFormat';
+import { FormatState } from 'roosterjs-editor-types';
+
+/**
+ * The format object state in Content Model
+ */
+export interface ContentModelFormatState extends FormatState {
+    /**
+     * Format of image, if there is table at cursor position
+     */
+    imageFormat?: ImageFormat;
+}
diff --git a/packages/roosterjs-content-model/lib/publicTypes/format/formatState/ImageFormat.ts b/packages/roosterjs-content-model/lib/publicTypes/format/formatState/ImageFormat.ts
@@ -0,0 +1,27 @@
+/**
+ * Image Format
+ */
+export default interface ImageFormat {
+    /**
+     * Border color
+     */
+    borderColor?: string;
+    /**
+     * Border width
+     */
+    borderWidth?: string;
+    /**
+     * Border style
+     */
+    borderStyle?: string;
+
+    /**
+     * Border radius
+     */
+    borderRadius?: string;
+
+    /**
+     * Box Shadow style
+     */
+    boxShadow?: string;
+}