Version bump: Roosterjs 8.41.0 (#1537)

* convert alpha to decimals * fix auto format list * add null and refactor * Content Model Selection API step 4: Refactor existing table API (#1479) * Selection API step 1 * Selection API 2 * New selection API * Refactor table API * add test * Support element with namespace (#1489) * Content Model: Fix a bug when process margin (#1493) * Fix margin issue * Fix test * Fix A tag without href (#1495) * Fix Cut/Copy page scroll issue (#1496) * Fix Cut/Copy page scroll issue * Fix test * fix image plugin z-index calc * Content Model Format State Step 1: Refactor formatSegmentWithContentModel() (#1490) * Selection API step 1 * Selection API 2 * New selection API * Refactor table API * add test * Format state step 1 * Improve * update condition per comments * Content Model Format State Step 2: Allow retrieving metadata directly (#1491) * Selection API step 1 * Selection API 2 * New selection API * Refactor table API * add test * Format state step 1 * FormatState step 2 * Improve * Content Model Format State Step 3: Add getFormatState API and ContentModelPlugin (#1492) * Selection API step 1 * Selection API 2 * New selection API * Refactor table API * add test * Format state step 1 * FormatState step 2 * FormatState step 3: Add getFormatState API and ContentModel plugin * Improve * Improve * Improve * fix test * improve, fix safari issue * fix test * Content Model: Add API clearFormat (#1497) * Selection API step 1 * Selection API 2 * New selection API * Refactor table API * add test * Format state step 1 * FormatState step 2 * FormatState step 3: Add getFormatState API and ContentModel plugin * Improve * Content Model: clearFormat * fix build * Improve * Improve * fix test * improve, fix safari issue * fix test * remove wrapper when content change * fix * Content Model: Move format API: link, image, captalization, ... (#1506) * Selection API step 1 * Selection API 2 * New selection API * Refactor table API * add test * Format state step 1 * FormatState step 2 * FormatState step 3: Add getFormatState API and ContentModel plugin * Improve * Content Model: clearFormat * fix build * Improve * Improve * fix test * improve, fix safari issue * fix test * ContentModel: Support insertLink and removeLink * changeCapitalization and setImageAltText * fix for image selection * refactor * refactor * Test image edit with ShadowDOM * improve * Fix #1509 (#1511) * ContentModel: Improve Divider (#1513) * ContentModel: Improve Divider * Add BorderFormat to ContentModelBlockFormat * Add test * fix build * Content Model: Support "no color" when set color (#1514) * Content Model: Support "no color" when set color * improve * Content Model: Use Entity handle readonly element (#1515) * image wrapper using shadow dom * Content Model: Support get and apply segment format (#1518) * Do not merge table when insert a table (#1519) * Content Model: Fix #1239 (#1521) * WIP AND fix for span height * stop dragging * comment * prevent drag * remove new max-width * Load fluent ui from cdnjs (#1525) * Content Model: Improve selection (#1526) * Apply format to word where cursor is located (#1367) * attempt with traversers * attempt using splitTextNode * Return to original implementation * Fix build * implementation with content model * Implement word selection with new content model * removed selectWordFromCollapsedRange.ts * optimization fixes and file changes * standardize function and remove castings * fix paragraph and pending state * fix pending state, name change * Added test cases, disabled end or start of word * fixed dependency * fix pending state * more tests * fixed tests * End of word format fix (#1528) * End of word format fix Fix scenario where format was wrongly applied where the cursor was located at the end of a word * add tests * Variable based dark color (#1531) * Variable based dark color * fix test * improve * Improve * Fix comment * Fix #1532: Support isCode in FormatState (#1533) * Fix #1532 * add comment * fix build * fix comment * Bump ua-parser-js from 0.7.31 to 0.7.33 (#1535) Bumps [ua-parser-js](https://github.com/faisalman/ua-parser-js) from 0.7.31 to 0.7.33. - [Release notes](https://github.com/faisalman/ua-parser-js/releases) - [Changelog](https://github.com/faisalman/ua-parser-js/blob/master/changelog.md) - [Commits](faisalman/ua-parser-js@0.7.31...0.7.33) --- updated-dependencies: - dependency-name: ua-parser-js dependency-type: indirect ... Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * Fix #1529 #1530 and 187095 (#1534) --------- Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: Júlia Roldi <[email protected]> Co-authored-by: Julia Roldi <[email protected]> Co-authored-by: Shai Petel <[email protected]> Co-authored-by: Shai Petel <[email protected]> Co-authored-by: Andres-CT98 <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
microsoft · Jan 27, 2023 · 878aab5 · 878aab5
1 parent 962fb77
commit 878aab5
Show file tree

Hide file tree

Showing 70 changed files with 2,782 additions and 386 deletions.
diff --git a/demo/index.html b/demo/index.html
@@ -20,7 +20,7 @@
         <div id="mainPane"></div>
         <script src="https://unpkg.com/[email protected]/umd/react.production.min.js"></script>
         <script src="https://unpkg.com/[email protected]/umd/react-dom.production.min.js"></script>
-        <script src="https://unpkg.com/@fluentui/react@8.60.1/dist/fluentui-react.js"></script>
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/fluentui-react/8.60.1/fluentui-react.min.js"></script>
         <script src="rooster-min.js"></script>
         <script src="rooster-react-min.js"></script>
         <script src="demo.js"></script>

diff --git a/demo/scripts/controls/contentModel/components/model/ContentModelEntityView.tsx b/demo/scripts/controls/contentModel/components/model/ContentModelEntityView.tsx
@@ -71,6 +71,7 @@ export function ContentModelEntityView(props: { entity: ContentModelEntity }) {
             title="Entity"
             subTitle={id}
             className={styles.modelEntity}
+            isSelected={entity.isSelected}
             jsonSource={entity}
             getContent={getContent}
             getFormat={getFormat}

diff --git a/demo/scripts/controls/contentModel/components/model/ContentModelListItemView.tsx b/demo/scripts/controls/contentModel/components/model/ContentModelListItemView.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { ContentModelBlockView } from './ContentModelBlockView';
 import { ContentModelView } from '../ContentModelView';
+import { DirectionFormatRenderers } from '../format/formatPart/DirectionFormatRenderers';
 import { FontFamilyFormatRenderer } from '../format/formatPart/FontFamilyFormatRenderer';
 import { FontSizeFormatRenderer } from '../format/formatPart/FontSizeFormatRenderer';
 import { FormatRenderer } from '../format/utils/FormatRenderer';
@@ -23,6 +24,7 @@ const ListLevelFormatRenders: FormatRenderer<ContentModelListItemLevelFormat>[]
     ListTypeFormatRenderer,
     ...ListThreadFormatRenderers,
     ...ListMetadataFormatRenderers,
+    ...DirectionFormatRenderers,
 ];
 
 const ListItemFormatHolderRenderers: FormatRenderer<ContentModelSegmentFormat>[] = [

diff --git a/demo/scripts/controls/editor/ExperimentalContentModelEditor.ts b/demo/scripts/controls/editor/ExperimentalContentModelEditor.ts
@@ -45,6 +45,7 @@ export default class ExperimentalContentModelEditor extends Editor
             zoomScale: this.getZoomScale(),
             isRightToLeft: getComputedStyles(this.contentDiv, 'direction')[0] == 'rtl',
             getDarkColor: this.getDarkColor,
+            darkColorHandler: this.getDarkColorHandler(),
         };
     }
 

diff --git a/demo/scripts/controls/sidePane/editorOptions/EditorOptionsPlugin.ts b/demo/scripts/controls/sidePane/editorOptions/EditorOptionsPlugin.ts
@@ -31,6 +31,7 @@ const initialState: BuildInPluginState = {
         ExperimentalFeatures.ListItemAlignment,
         ExperimentalFeatures.DefaultFormatInSpan,
         ExperimentalFeatures.AutoFormatList,
+        ExperimentalFeatures.VariableBasedDarkColor,
     ],
     isRtl: false,
 };

diff --git a/demo/scripts/controls/sidePane/editorOptions/ExperimentalFeatures.tsx b/demo/scripts/controls/sidePane/editorOptions/ExperimentalFeatures.tsx
@@ -18,6 +18,7 @@ const FeatureNames: Partial<Record<ExperimentalFeatures, string>> = {
         "Reuse ancestor list elements even if they don't match the types from the list item.",
     [ExperimentalFeatures.DefaultFormatInSpan]:
         'When apply default format when initialize or user type, apply the format on a SPAN element.',
+    [ExperimentalFeatures.VariableBasedDarkColor]: 'Use variable-based color for dark mode',
 };
 
 export default class ExperimentalFeaturesPane extends React.Component<

diff --git a/demo/scripts/controls/sidePane/editorOptions/OptionsPane.tsx b/demo/scripts/controls/sidePane/editorOptions/OptionsPane.tsx
@@ -33,7 +33,7 @@ const htmlRoosterReact =
     '<div id="root"></div>\n' +
     '<script src="https://unpkg.com/react@16/umd/react.development.js"></script>\n' +
     '<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>\n' +
-    '<script src="https://unpkg.com/@fluentui/react/dist/fluentui-react.js"></script>\n' +
+    '<script src="https://cdnjs.cloudflare.com/ajax/libs/fluentui-react/8.60.1/fluentui-react.min.js"></script>\n' +
     '<script src="https://microsoft.github.io/roosterjs/rooster-min.js"></script>\n' +
     '<script src="https://microsoft.github.io/roosterjs/rooster-react-min.js"></script>\n' +
     '</body>\n' +

diff --git a/index.html b/index.html
@@ -20,7 +20,7 @@
         <div id="mainPane"></div>
         <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
         <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
-        <script src="https://unpkg.com/@fluentui/react@8.60.1/dist/fluentui-react.js"></script>
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/fluentui-react/8.60.1/fluentui-react.min.js"></script>
         <script src="scripts/demo.js"></script>
     </body>
 </html>
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "roosterjs",
-    "version": "8.40.2",
+    "version": "8.41.0",
     "description": "Framework-independent javascript editor",
     "repository": {
         "type": "git",

diff --git a/packages-ui/roosterjs-react/lib/ribbon/component/buttons/code.ts b/packages-ui/roosterjs-react/lib/ribbon/component/buttons/code.ts
@@ -10,6 +10,7 @@ export const code: RibbonButton<CodeButtonStringKey> = {
     key: 'buttonNameCode',
     unlocalizedText: 'Code',
     iconName: 'Code',
+    isChecked: formatState => !!formatState.isCodeBlock,
     onClick: editor => {
         toggleCodeBlock(editor);
     },

diff --git a/packages/roosterjs-content-model/lib/domToModel/processors/entityProcessor.ts b/packages/roosterjs-content-model/lib/domToModel/processors/entityProcessor.ts
@@ -13,28 +13,21 @@ export const entityProcessor: ElementProcessor<HTMLElement> = (group, element, c
     const entity = getEntityFromElement(element);
 
     // In Content Model we also treat read only element as an entity since we cannot edit it
-    if (entity || element.contentEditable == 'false') {
-        const { id, type, isReadonly } = entity || {};
-        const isBlockEntity = isBlockElement(element, context);
+    const { id, type, isReadonly } = entity || { isReadonly: true };
+    const isBlockEntity = isBlockElement(element, context);
 
-        stackFormat(
-            context,
-            { segment: isBlockEntity ? 'shallowCloneForBlock' : undefined },
-            () => {
-                const entityModel = createEntity(
-                    element,
-                    context.segmentFormat,
-                    id,
-                    type,
-                    isReadonly
-                );
+    stackFormat(context, { segment: isBlockEntity ? 'shallowCloneForBlock' : undefined }, () => {
+        const entityModel = createEntity(element, isReadonly, context.segmentFormat, id, type);
 
-                if (isBlockEntity) {
-                    addBlock(group, entityModel);
-                } else {
-                    addSegment(group, entityModel);
-                }
-            }
-        );
-    }
+        // TODO: Need to handle selection for editable entity
+        if (context.isInSelection) {
+            entityModel.isSelected = true;
+        }
+
+        if (isBlockEntity) {
+            addBlock(group, entityModel);
+        } else {
+            addSegment(group, entityModel);
+        }
+    });
 };
diff --git a/packages/roosterjs-content-model/lib/formatHandlers/common/backgroundColorFormatHandler.ts b/packages/roosterjs-content-model/lib/formatHandlers/common/backgroundColorFormatHandler.ts
@@ -8,8 +8,12 @@ import { getColor, setColor } from '../utils/color';
 export const backgroundColorFormatHandler: FormatHandler<BackgroundColorFormat> = {
     parse: (format, element, context, defaultStyle) => {
         const backgroundColor =
-            getColor(element, true /*isBackground*/, context.isDarkMode) ||
-            defaultStyle.backgroundColor;
+            getColor(
+                element,
+                true /*isBackground*/,
+                context.darkColorHandler,
+                context.isDarkMode
+            ) || defaultStyle.backgroundColor;
 
         if (backgroundColor) {
             format.backgroundColor = backgroundColor;
@@ -21,6 +25,7 @@ export const backgroundColorFormatHandler: FormatHandler<BackgroundColorFormat>
                 element,
                 format.backgroundColor,
                 true /*isBackground*/,
+                context.darkColorHandler,
                 context.isDarkMode,
                 context.getDarkColor
             );

diff --git a/packages/roosterjs-content-model/lib/formatHandlers/defaultFormatHandlers.ts b/packages/roosterjs-content-model/lib/formatHandlers/defaultFormatHandlers.ts
@@ -93,7 +93,7 @@ const defaultFormatKeysPerCategory: {
 } = {
     block: blockFormatHandlers,
     listItem: ['listItemThread', 'listItemMetadata'],
-    listLevel: ['listType', 'listLevelThread', 'listLevelMetadata'],
+    listLevel: ['listType', 'listLevelThread', 'listLevelMetadata', 'direction'],
     segment: [
         'superOrSubScript',
         'strike',

diff --git a/packages/roosterjs-content-model/lib/formatHandlers/segment/textColorFormatHandler.ts b/packages/roosterjs-content-model/lib/formatHandlers/segment/textColorFormatHandler.ts
@@ -8,7 +8,12 @@ import { TextColorFormat } from '../../publicTypes/format/formatParts/TextColorF
 export const textColorFormatHandler: FormatHandler<TextColorFormat> = {
     parse: (format, element, context, defaultStyle) => {
         const textColor =
-            getColor(element, false /*isBackground*/, context.isDarkMode) || defaultStyle.color;
+            getColor(
+                element,
+                false /*isBackground*/,
+                context.darkColorHandler,
+                context.isDarkMode
+            ) || defaultStyle.color;
 
         if (textColor && textColor != 'inherit') {
             format.textColor = textColor;
@@ -22,6 +27,7 @@ export const textColorFormatHandler: FormatHandler<TextColorFormat> = {
                 element,
                 format.textColor,
                 false /*isBackground*/,
+                context.darkColorHandler,
                 context.isDarkMode,
                 context.getDarkColor
             );

diff --git a/packages/roosterjs-content-model/lib/formatHandlers/utils/color.ts b/packages/roosterjs-content-model/lib/formatHandlers/utils/color.ts
@@ -1,15 +1,16 @@
-import { DarkModeDatasetNames, ModeIndependentColor } from 'roosterjs-editor-types';
+import { DarkColorHandler, DarkModeDatasetNames } from 'roosterjs-editor-types';
 
 /**
  * @internal
  */
 export function getColor(
     element: HTMLElement,
     isBackground: boolean,
+    darkColorHandler: DarkColorHandler | undefined | null,
     isDarkMode: boolean
 ): string | undefined {
     let color: string | undefined;
-    if (isDarkMode) {
+    if (isDarkMode && !darkColorHandler) {
         color =
             element.dataset[
                 isBackground
@@ -30,6 +31,10 @@ export function getColor(
             undefined;
     }
 
+    if (darkColorHandler) {
+        color = darkColorHandler.parseColorValue(color).lightModeColor;
+    }
+
     return color;
 }
 
@@ -38,24 +43,28 @@ export function getColor(
  */
 export function setColor(
     element: HTMLElement,
-    color: string | ModeIndependentColor,
+    lightModeColor: string,
     isBackground: boolean,
+    darkColorHandler: DarkColorHandler | undefined | null,
     isDarkMode: boolean,
     getDarkColor?: (color: string) => string
 ) {
-    const originalColor = typeof color === 'object' ? color.lightModeColor : color;
-    const effectiveColor = isDarkMode
-        ? typeof color === 'object'
-            ? color.darkModeColor
-            : getDarkColor?.(color) || color
-        : originalColor;
+    let effectiveColor: string;
+
+    if (darkColorHandler) {
+        effectiveColor = darkColorHandler.registerColor(lightModeColor, isDarkMode);
+    } else {
+        effectiveColor = isDarkMode
+            ? getDarkColor?.(lightModeColor) || lightModeColor
+            : lightModeColor;
 
-    if (isDarkMode && originalColor) {
-        element.dataset[
-            isBackground
-                ? DarkModeDatasetNames.OriginalStyleBackgroundColor
-                : DarkModeDatasetNames.OriginalStyleColor
-        ] = originalColor;
+        if (isDarkMode && lightModeColor) {
+            element.dataset[
+                isBackground
+                    ? DarkModeDatasetNames.OriginalStyleBackgroundColor
+                    : DarkModeDatasetNames.OriginalStyleColor
+            ] = lightModeColor;
+        }
     }
 
     if (isBackground) {

diff --git a/packages/roosterjs-content-model/lib/modelApi/block/setModelIndentation.ts b/packages/roosterjs-content-model/lib/modelApi/block/setModelIndentation.ts
@@ -41,15 +41,19 @@ export function setModelIndentation(
         } else if (block) {
             const { format } = block;
             const { marginLeft, marginRight, direction } = format;
-            const originalValue = parseValueWithUnit(direction == 'rtl' ? marginRight : marginLeft);
+            const isRtl = direction == 'rtl';
+            const originalValue = parseValueWithUnit(isRtl ? marginRight : marginLeft);
             let newValue = (isIndent ? Math.ceil : Math.floor)(originalValue / length) * length;
 
             if (newValue == originalValue) {
                 newValue = Math.max(newValue + length * (isIndent ? 1 : -1), 0);
             }
 
-            format.marginLeft = newValue + 'px';
-            format.marginRight = newValue + 'px';
+            if (isRtl) {
+                format.marginRight = newValue + 'px';
+            } else {
+                format.marginLeft = newValue + 'px';
+            }
         }
     });
 

diff --git a/packages/roosterjs-content-model/lib/modelApi/common/retrieveModelFormatState.ts b/packages/roosterjs-content-model/lib/modelApi/common/retrieveModelFormatState.ts
@@ -19,6 +19,7 @@ export function retrieveModelFormatState(
     formatState: FormatState
 ) {
     let isFirst = true;
+    let previousTableContext: TableSelectionContext | undefined;
 
     iterateSelections(
         [model],
@@ -35,11 +36,23 @@ export function retrieveModelFormatState(
                     );
                 } else if (tableContext) {
                     retrieveTableFormat(tableContext, formatState);
+                    previousTableContext = tableContext;
                 }
                 isFirst = false;
             } else {
                 formatState.isMultilineSelection = true;
 
+                if (tableContext && previousTableContext) {
+                    const { table, colIndex, rowIndex } = previousTableContext;
+
+                    if (
+                        tableContext.table == table &&
+                        (tableContext.colIndex != colIndex || tableContext.rowIndex != rowIndex)
+                    ) {
+                        formatState.canMergeTableCell = true;
+                    }
+                }
+
                 // Return true to stop iteration since we have already got everything we need
                 return true;
             }
@@ -99,7 +112,10 @@ function retrieveFormatStateInternal(
     if (tableContext) {
         retrieveTableFormat(tableContext, result);
     }
+
+    // TODO: Support Code block in format state for Content Model
 }
+
 function retrieveTableFormat(tableContext: TableSelectionContext, result: FormatState) {
     const tableFormat = updateTableMetadata(tableContext.table);
 

diff --git a/packages/roosterjs-content-model/lib/modelApi/creators/createEntity.ts b/packages/roosterjs-content-model/lib/modelApi/creators/createEntity.ts
@@ -6,10 +6,10 @@ import { ContentModelSegmentFormat } from '../../publicTypes/format/ContentModel
  */
 export function createEntity(
     wrapper: HTMLElement,
+    isReadonly: boolean,
     segmentFormat?: ContentModelSegmentFormat,
     id?: string,
-    type?: string,
-    isReadonly?: boolean
+    type?: string
 ): ContentModelEntity {
     return {
         segmentType: 'Entity',

diff --git a/packages/roosterjs-content-model/lib/modelApi/list/setListType.ts b/packages/roosterjs-content-model/lib/modelApi/list/setListType.ts
@@ -35,6 +35,7 @@ export function setListType(model: ContentModelDocument, listType: 'OL' | 'UL')
 
             if (index >= 0) {
                 const prevBlock = parent.blocks[index - 1];
+                const segmentFormat = block.segments[0]?.format || {};
                 const newListItem = createListItem(
                     [
                         {
@@ -46,9 +47,16 @@ export function setListType(model: ContentModelDocument, listType: 'OL' | 'UL')
                                     prevBlock.levels[0]?.listType == 'OL')
                                     ? undefined
                                     : 1,
+                            direction: block.format.direction,
+                            textAlign: block.format.textAlign,
                         },
                     ],
-                    block.segments[0]?.format
+                    // For list bullet, we only want to carry over these formats from segments:
+                    {
+                        fontFamily: segmentFormat.fontFamily,
+                        fontSize: segmentFormat.fontSize,
+                        textColor: segmentFormat.textColor,
+                    }
                 );
 
                 // Since there is only one paragraph under the list item, no need to keep its paragraph element (DIV).