Bump Rooster to 8.43.0, Content Model to 0.1.2 (#1604)

* 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 * wip * WIP * wip * 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) * wip * Content Model: Fix #1239 (#1521) * WIP AND fix for span height * stop dragging * comment * prototype * remove change * prevent drag * remove new max-width * Load fluent ui from cdnjs (#1525) * small changes * 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) * WIP * test and fixes * unit tests * fix list trigger * Content Model: Adjust selection for link to select a word (#1538) * Content Model: Adjust word selection for link * add test * fix build * Fix table format (#1541) * refactor * move comment * Content Model code simplify 1 (#1544) * Content Model code simplify 2: Clean up EditorContext (#1545) * Content Model code simplify 1 * Content Model: Clean up EditorContext * improve * Content Model code simplify 3: Remove get/setPendingFormat from editor interface (#1546) * Content Model code simplify 1 * Content Model: Clean up EditorContext * improve * Content Model: Remove get/setPendingFormat * Add support for paragraph line spacing for content model (#1543) * Fetch line height from children * Create new content model api * Spacing btn * Fix tests * Remove key from roosterjs-react * testing * Allow segment to hold lineHeight format * Remove lineHeight from segments whenever possible * Fix imports * Remove normalization * Add todo for edge case * Render segment line height * Content Model Editor 1: Rename interface IExperimentalContentModelEditor (#1547) * Content Model code simplify 1 * Content Model: Clean up EditorContext * improve * Content Model: Remove get/setPendingFormat * Content Model: Rename IExperimentalContentModelEditor * fix build * WIP PROTOTYPE * Content Model Editor 2: Publish ContentModelEditor class (#1548) * Content Model code simplify 1 * Content Model: Clean up EditorContext * improve * Content Model: Remove get/setPendingFormat * Content Model: Rename IExperimentalContentModelEditor * Publish ContentModelEditor class * fix build * add test * fix build * fix build * Reorganize Contente Model code (#1555) * blur issue * Fix some block format issues (#1554) * Fix some block format issues * Improve * Content Model: Fix image size for outlook (#1556) * Content Model: Fix image size for outlook * Fix build * fix build * improve * add filter to client rects * Content Model: Support align table to center (#1557) * simply code * Content Model: Fix PRE tag (#1559) * Content Model: Support insert image with src (#1563) * Content Model: Get init segment format from root container (#1567) * Content Model: Get init segment format from root container * Improve * add test * Add missing setSpacing comment (#1564) * do not call updateHandle * check viewport * Content Model: Improve pending format implementation (#1570) * Disable list indentation on mac (#1552) * Disable list indentation on mac * Switch to default disabled * Content Model: Improve hyperlink handling (#1569) * Add support for adding/removing space before/after paragraphs in content model (#1565) * Create api for block margins * Create space before after buttons * Update testing * Fix by using decorator * Replace positive value with none * Treat no margin as space removed * Fix testing * Improve tag name selecting * testing * rename and improve logic * Add support for formatState on onClick call * Update button impl * Revert "Update button impl" This reverts commit edce3ad. * Revert "Add support for formatState on onClick call" This reverts commit 3d6b83d. * use getFormatState() * Update test name * Fix a pending format issue in firefox (#1572) * Content Model: Keep root level entity when format with Content Model (#1573) * Content Model: Preserve segment format when insert table (#1574) * delete table * fix enum * refactor * Fix #1585 (#1587) * strict mode * remove file * add zeros * enable strict mode * Content Model: Improve clearFormat API (#1579) * Content Model: Improve clearFormat * Improve * Improve * fix build * improve * WIP * Content Model: Improve getFormatState (#1594) * Fix color issue with Font tag (#1595) * refactor * Fix #1586 (#1597) * Add `dir` and `textAlign` in `FormatState` (#1590) Co-authored-by: Echo Li <[email protected]> * uncoment * Step 1: Add HTMLSpanElements around ReadOnly Inline entities to prevent cursor issues, (#1580) * init * add tests and build fixes * Fix failing tests in EntityPlugin * Fix comments * Fix comments * Move functionality to insertEntity * typedoc * refactor * refactor * add tests * Content Model: Improve pending format behavior (#1598) * Improve pending format behavior * fix test * Add flight check in InsertEntity #1602 * Improve PRE again (#1601) * Bump versions to 8.43.0 * Bump content model * Remove duplicate implementation * Change content model version to 0.2.0 --------- Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: Júlia Roldi <[email protected]> Co-authored-by: Jiuqing Song <[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> Co-authored-by: Echo-az <[email protected]> Co-authored-by: Echo Li <[email protected]> Co-authored-by: Bryan Valverde U <[email protected]>
microsoft · Feb 24, 2023 · c41ac57 · c41ac57
1 parent e53b232
commit c41ac57
Show file tree

Hide file tree

Showing 78 changed files with 2,060 additions and 646 deletions.
diff --git a/demo/scripts/controls/sidePane/editorOptions/ContentEditFeatures.tsx b/demo/scripts/controls/sidePane/editorOptions/ContentEditFeatures.tsx
@@ -48,6 +48,7 @@ const EditFeatureDescriptionMap: Record<keyof ContentEditFeatureSettings, string
     autoNumberingList:
         'When press space after an number, a letter or roman number followed by ), ., -, or between parenthesis in an empty line, toggle numbering',
     mergeListOnBackspaceAfterList: 'When backspacing between lists, merge the lists',
+    deleteTableWithBackspace: 'Delete table with backspace key with whole table is selected',
 };
 
 export interface ContentEditFeaturessProps {

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

diff --git a/demo/scripts/controls/sidePane/editorOptions/ExperimentalFeatures.tsx b/demo/scripts/controls/sidePane/editorOptions/ExperimentalFeatures.tsx
@@ -19,6 +19,10 @@ const FeatureNames: Partial<Record<ExperimentalFeatures, string>> = {
     [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',
+    [ExperimentalFeatures.DeleteTableWithBackspace]:
+        'Delete a table selected with the table selector pressing Backspace key',
+    [ExperimentalFeatures.InlineEntityReadOnlyDelimiters]:
+        'Add read entities around read only entities to handle browser edge cases.',
 };
 
 export default class ExperimentalFeaturesPane extends React.Component<

diff --git a/demo/scripts/controls/sidePane/snapshot/SnapshotPane.tsx b/demo/scripts/controls/sidePane/snapshot/SnapshotPane.tsx
@@ -43,6 +43,7 @@ export default class SnapshotPane extends React.Component<SnapshotPaneProps, Sna
                             this.props.onRestoreSnapshot({
                                 html: this.textarea.value,
                                 metadata: null,
+                                knownColors: [],
                             })
                         }>
                         {'Restore snapshot'}

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "roosterjs",
-    "version": "8.42.0",
+    "version": "8.43.0",
     "description": "Framework-independent javascript editor",
     "repository": {
         "type": "git",

diff --git a/packages/roosterjs-content-model/lib/formatHandlers/block/whiteSpaceFormatHandler.ts b/packages/roosterjs-content-model/lib/formatHandlers/block/whiteSpaceFormatHandler.ts
@@ -16,6 +16,9 @@ export const whiteSpaceFormatHandler: FormatHandler<WhiteSpaceFormat> = {
         if (format.whiteSpace == 'pre') {
             const pre = element.ownerDocument.createElement('pre');
 
+            pre.style.marginTop = '0';
+            pre.style.marginBottom = '0';
+
             element.parentNode?.appendChild(pre);
             pre.appendChild(element);
         } else if (format.whiteSpace) {

diff --git a/packages/roosterjs-content-model/lib/formatHandlers/utils/color.ts b/packages/roosterjs-content-model/lib/formatHandlers/utils/color.ts
@@ -1,4 +1,5 @@
 import { DarkColorHandler, DarkModeDatasetNames } from 'roosterjs-editor-types';
+import { getTagOfNode } from 'roosterjs-editor-dom';
 
 /**
  * @internal
@@ -26,6 +27,8 @@ export function getColor(
 
     if (!color) {
         color =
+            (darkColorHandler &&
+                tryGetFontColor(element, isDarkMode, darkColorHandler, isBackground)) ||
             (isBackground ? element.style.backgroundColor : element.style.color) ||
             element.getAttribute(isBackground ? 'bgcolor' : 'color') ||
             undefined;
@@ -73,3 +76,26 @@ export function setColor(
         element.style.color = effectiveColor;
     }
 }
+
+/**
+ * There is a known issue that when input with IME in Chrome, it is possible Chrome insert a new FONT tag with colors.
+ * If editor is in dark mode, this color will cause the FONT tag doesn't have light mode color info so that after convert
+ * to light mode the color will be wrong.
+ * To workaround it, we check if this is a known color (for light mode with VariableBasedDarkColor enabled, all used colors
+ * are stored in darkColorHandler), then use the related light mode color instead.
+ */
+function tryGetFontColor(
+    element: HTMLElement,
+    isDarkMode: boolean,
+    darkColorHandler: DarkColorHandler,
+    isBackground: boolean
+) {
+    let darkColor: string | null;
+
+    return getTagOfNode(element) == 'FONT' &&
+        !element.style.getPropertyValue(isBackground ? 'background-color' : 'color') &&
+        isDarkMode &&
+        (darkColor = element.getAttribute(isBackground ? 'bgcolor' : 'color'))
+        ? darkColorHandler.findLightColorFromDarkColor(darkColor)
+        : null;
+}
diff --git a/packages/roosterjs-content-model/lib/modelApi/common/clearModelFormat.ts b/packages/roosterjs-content-model/lib/modelApi/common/clearModelFormat.ts
@@ -1,3 +1,4 @@
+import { adjustWordSelection } from '../selection/adjustWordSelection';
 import { applyTableFormat } from '../table/applyTableFormat';
 import { arrayPush } from 'roosterjs-editor-dom';
 import { ContentModelBlock } from '../../publicTypes/block/ContentModelBlock';
@@ -39,27 +40,39 @@ export function clearModelFormat(
             }
         },
         {
-            includeListFormatHolder: 'anySegment',
+            // When there is a default format to apply, we know how to handle segment format under list.
+            // So no need to clear format of list number.
+            // Otherwise, we will clear all format of selected text. And since they are under LI tag, we
+            // also need to clear the format of LI (format holder) so that the format is really cleared
+            includeListFormatHolder: defaultSegmentFormat ? 'never' : 'anySegment',
         }
     );
 
-    // If a full block or multiple blocks are selected, clear block format first
+    const marker = segmentsToClear[0];
+
+    // 2. If selection is collapsed, add selection to whole word to clear if any
     if (
-        (blocksToClear.length == 1 && isOnlySelectionMarkerSelected(blocksToClear[0][1])) ||
-        blocksToClear.length > 1 ||
-        blocksToClear.some(x => isWholeBlockSelected(x[1]))
+        blocksToClear.length == 1 &&
+        isOnlySelectionMarkerSelected(blocksToClear[0][1]) &&
+        blocksToClear.length == 1
     ) {
+        segmentsToClear.splice(0, segmentsToClear.length, ...adjustWordSelection(model, marker));
+        clearListFormat(blocksToClear[0][0]);
+    } else if (blocksToClear.length > 1 || blocksToClear.some(x => isWholeBlockSelected(x[1]))) {
+        // 2. If a full block or multiple blocks are selected, clear block format
         for (let i = blocksToClear.length - 1; i >= 0; i--) {
             const [path, block] = blocksToClear[i];
 
-            clearBlockFormat(path, block, segmentsToClear);
+            clearBlockFormat(path, block);
             clearListFormat(path);
             clearQuoteFormat(path, block);
         }
     }
 
-    // Then clear segments format and table format if any
+    // 3. Finally clear format for segments
     clearSegmentsFormat(segmentsToClear, defaultSegmentFormat);
+
+    // 4. Clear format for table if any
     createTablesFormat(tablesToClear);
 }
 
@@ -84,7 +97,10 @@ function clearSegmentsFormat(
 ) {
     segmentsToClear.forEach(x => {
         x.format = { ...(defaultSegmentFormat || {}) };
-        delete x.link;
+
+        if (x.link) {
+            delete x.link.format.textColor;
+        }
     });
 }
 
@@ -139,19 +155,14 @@ function clearListFormat(path: ContentModelBlockGroup[]) {
     }
 }
 
-function clearBlockFormat(
-    path: ContentModelBlockGroup[],
-    block: ContentModelBlock,
-    segmentsToClear: ContentModelSegment[]
-) {
+function clearBlockFormat(path: ContentModelBlockGroup[], block: ContentModelBlock) {
     if (block.blockType == 'Divider') {
         const index = path[0].blocks.indexOf(block);
 
         if (index >= 0) {
             path[0].blocks.splice(index, 1);
         }
     } else if (block.blockType == 'Paragraph') {
-        arrayPush(segmentsToClear, block.segments);
         block.format = {};
         delete block.decorator;
     }

diff --git a/packages/roosterjs-content-model/lib/modelApi/common/mergeModel.ts b/packages/roosterjs-content-model/lib/modelApi/common/mergeModel.ts
@@ -25,6 +25,12 @@ export interface MergeModelOption {
      * @default false
      */
     mergeTable?: boolean;
+
+    /**
+     * Use this insert position to merge instead of querying selection from target model
+     * @default undefined
+     */
+    insertPosition?: InsertPosition;
 }
 
 /**
@@ -35,7 +41,7 @@ export function mergeModel(
     source: ContentModelDocument,
     options?: MergeModelOption
 ) {
-    const insertPosition = deleteSelection(target);
+    const insertPosition = options?.insertPosition ?? deleteSelection(target);
 
     if (insertPosition) {
         for (let i = 0; i < source.blocks.length; i++) {
@@ -140,7 +146,7 @@ function mergeTable(
             }
         }
 
-        normalizeTable(table);
+        normalizeTable(table, markerPosition.marker.format);
         applyTableFormat(table, undefined /*newFormat*/, true /*keepCellShade*/);
     } else {
         insertBlock(markerPosition, newTable);