Bump Rooster to 8.42.0 (#1571)

* 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 * 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) * backu * remove unneeded changes * bump RoosterJS version * 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 * Bump Content Model version * Fix a pending format issue in firefox (#1572) --------- 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: Ian Elizondo <[email protected]>
microsoft · Jun 16, 2023 · 0a6d525 · 0a6d525
1 parent db137d5
commit 0a6d525
Show file tree

Hide file tree

Showing 46 changed files with 638 additions and 1,573 deletions.
diff --git a/demo/scripts/controls/MainPane.tsx b/demo/scripts/controls/MainPane.tsx
@@ -12,7 +12,7 @@ import SidePane from './sidePane/SidePane';
 import SnapshotPlugin from './sidePane/snapshot/SnapshotPlugin';
 import TitleBar from './titleBar/TitleBar';
 import { arrayPush } from 'roosterjs-editor-dom';
-import { ContentModelPlugin } from 'roosterjs-content-model';
+import { ContentModelEditor, ContentModelPlugin } from 'roosterjs-content-model';
 import { ContentModelRibbonPlugin } from './ribbonButtons/contentModel/ContentModelRibbonPlugin';
 import { darkMode, DarkModeButtonStringKey } from './ribbonButtons/darkMode';
 import { Editor } from 'roosterjs-editor-core';

diff --git a/demo/scripts/controls/contentModel/components/format/SegmentFormatView.tsx b/demo/scripts/controls/contentModel/components/format/SegmentFormatView.tsx
@@ -15,6 +15,7 @@ import {
     UnderlineFormatRenderer,
     SuperOrSubScriptFormatRenderer,
 } from './formatPart/BasicFormatRenderers';
+import { LineHeightFormatRenderer } from './formatPart/LineHeightFormatRenderer';
 
 const SegmentFormatRenders: FormatRenderer<ContentModelSegmentFormat>[] = [
     TextColorFormatRenderer,

diff --git a/demo/scripts/controls/contentModel/components/format/formatPart/TextColorFormatRenderer.ts b/demo/scripts/controls/contentModel/components/format/formatPart/TextColorFormatRenderer.ts
@@ -1,19 +1,13 @@
 import * as Color from 'color';
 import { createColorFormatRenderer } from '../utils/createColorFormatRender';
 import { FormatRenderer } from '../utils/FormatRenderer';
-import { HyperLinkColorPlaceholder } from 'roosterjs-content-model/lib/formatHandlers/utils/defaultStyles';
 import { TextColorFormat } from 'roosterjs-content-model';
 
 export const TextColorFormatRenderer: FormatRenderer<TextColorFormat> = createColorFormatRenderer<
     TextColorFormat
 >(
     'Text color',
-    format =>
-        format.textColor == HyperLinkColorPlaceholder
-            ? format.textColor
-            : format.textColor
-            ? Color(format.textColor).hex()
-            : '',
+    format => (format.textColor ? Color(format.textColor).hex() : ''),
     (format, value) => {
         format.textColor = value;
         return undefined;

diff --git a/demo/scripts/controls/contentModel/components/model/ContentModelTableView.tsx b/demo/scripts/controls/contentModel/components/model/ContentModelTableView.tsx
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { applyTableFormat } from 'roosterjs-content-model/lib/modelApi/table/applyTableFormat';
 import { BackgroundColorFormatRenderer } from '../format/formatPart/BackgroundColorFormatRenderer';
 import { BorderBoxFormatRenderer } from '../format/formatPart/BorderBoxFormatRenderer';
 import { BorderFormatRenderers } from '../format/formatPart/BorderFormatRenderers';
@@ -51,26 +50,17 @@ export function ContentModelTableView(props: { table: ContentModelTable }) {
         );
     }, [table]);
 
-    const onApplyTableFormat = React.useCallback(() => {
-        applyTableFormat(table, undefined, true);
-    }, [table]);
-
     const getFormat = React.useCallback(() => {
         return <FormatView format={table.format} renderers={TableFormatRenderers} />;
     }, [table.format]);
 
     const getMetadata = React.useCallback(() => {
         return (
-            <>
-                <MetadataView
-                    model={table}
-                    renderers={TableMetadataFormatRenders}
-                    updater={updateTableMetadata}
-                />
-                <div>
-                    <button onClick={onApplyTableFormat}>Apply table format</button>
-                </div>
-            </>
+            <MetadataView
+                model={table}
+                renderers={TableMetadataFormatRenders}
+                updater={updateTableMetadata}
+            />
         );
     }, [table]);
 

diff --git a/demo/scripts/controls/ribbonButtons/contentModel/ContentModelRibbon.tsx b/demo/scripts/controls/ribbonButtons/contentModel/ContentModelRibbon.tsx
@@ -56,6 +56,8 @@ import {
     tableMergeButton,
     tableSplitButton,
 } from './tableEditButtons';
+import { spacingButton } from './spacingButton';
+import { spaceAfterButton, spaceBeforeButton } from './spaceBeforeAfterButtons';
 
 const buttons = [
     formatPainterButton,

diff --git a/demo/scripts/controls/sidePane/formatState/FormatStatePlugin.ts b/demo/scripts/controls/sidePane/formatState/FormatStatePlugin.ts
@@ -1,11 +1,13 @@
 import FormatStatePane, { FormatStatePaneProps } from './FormatStatePane';
-import isContentModelEditor from '../../editor/isContentModelEditor';
 import SidePanePluginImpl from '../SidePanePluginImpl';
 import { getFormatState } from 'roosterjs-editor-api';
-import { getFormatState as getFormatStateFromContentModel } from 'roosterjs-content-model';
 import { getPositionRect } from 'roosterjs-editor-dom';
 import { IEditor, PluginEvent, PluginEventType } from 'roosterjs-editor-types';
 import { SidePaneElementProps } from '../SidePaneElement';
+import {
+    getFormatState as getFormatStateFromContentModel,
+    isContentModelEditor,
+} from 'roosterjs-content-model';
 
 export default class FormatStatePlugin extends SidePanePluginImpl<
     FormatStatePane,

diff --git a/packages/roosterjs-content-model/lib/domToModel/context/createDomToModelContext.ts b/packages/roosterjs-content-model/lib/domToModel/context/createDomToModelContext.ts
@@ -59,10 +59,6 @@ export function createDomToModelContext(
         allowCacheElement: !options?.disableCacheElement,
     };
 
-    if (editorContext?.isRightToLeft) {
-        context.blockFormat.direction = 'rtl';
-    }
-
     if (options?.alwaysNormalizeTable) {
         context.alwaysNormalizeTable = true;
     }

diff --git a/packages/roosterjs-content-model/lib/domToModel/utils/stackFormat.ts b/packages/roosterjs-content-model/lib/domToModel/utils/stackFormat.ts
@@ -33,6 +33,15 @@ const SkippedStylesForTable: (keyof ContentModelBlockFormat)[] = [
     'paddingRight',
 ];
 
+const CopiedStylesForBlockInherit: (keyof ContentModelBlockFormat)[] = [
+    'backgroundColor',
+    'direction',
+    'textAlign',
+    'isTextAlignFromAttr',
+    'lineHeight',
+    'whiteSpace',
+];
+
 /**
  * @internal
  */
@@ -127,6 +136,27 @@ function stackDecoratorInternal(
     }
 }
 
+function stackLinkInternal(linkFormat: ContentModelLink, link?: 'linkDefault' | 'empty') {
+    switch (link) {
+        case 'linkDefault':
+            return {
+                format: {
+                    underline: true,
+                },
+                dataset: {},
+            };
+
+        case 'empty':
+            return {
+                format: {},
+                dataset: {},
+            };
+
+        default:
+            return linkFormat;
+    }
+}
+
 function stackFormatInternal<T extends ContentModelFormatBase>(
     format: T,
     processType?: 'shallowClone' | 'shallowCloneForBlock' | 'shallowCloneForGroup' | 'empty'

diff --git a/packages/roosterjs-content-model/lib/editor/ContentModelPlugin.ts b/packages/roosterjs-content-model/lib/editor/ContentModelPlugin.ts
@@ -0,0 +1,86 @@
+import applyPendingFormat from '../publicApi/format/applyPendingFormat';
+import { canApplyPendingFormat, clearPendingFormat } from '../modelApi/format/pendingFormat';
+import { EditorPlugin, IEditor, Keys, PluginEvent, PluginEventType } from 'roosterjs-editor-types';
+import { IContentModelEditor } from '../publicTypes/IContentModelEditor';
+
+/**
+ * ContentModel plugins helps editor to do editing operation on top of content model.
+ * This includes:
+ * 1. Handle pending format changes when selection is collapsed
+ */
+export default class ContentModelPlugin implements EditorPlugin {
+    private editor: IContentModelEditor | null = null;
+
+    /**
+     * Get name of this plugin
+     */
+    getName() {
+        return 'ContentModel';
+    }
+
+    /**
+     * The first method that editor will call to a plugin when editor is initializing.
+     * It will pass in the editor instance, plugin should take this chance to save the
+     * editor reference so that it can call to any editor method or format API later.
+     * @param editor The editor object
+     */
+    initialize(editor: IEditor) {
+        // TODO: Later we may need a different interface for Content Model editor plugin
+        this.editor = editor as IContentModelEditor;
+    }
+
+    /**
+     * The last method that editor will call to a plugin before it is disposed.
+     * Plugin can take this chance to clear the reference to editor. After this method is
+     * called, plugin should not call to any editor method since it will result in error.
+     */
+    dispose() {
+        this.editor = null;
+    }
+
+    /**
+     * Core method for a plugin. Once an event happens in editor, editor will call this
+     * method of each plugin to handle the event as long as the event is not handled
+     * exclusively by another plugin.
+     * @param event The event to handle:
+     */
+    onPluginEvent(event: PluginEvent) {
+        if (!this.editor) {
+            return;
+        }
+
+        switch (event.eventType) {
+            case PluginEventType.Input:
+                // In Safari, isComposing will be undefined but isInIME() works
+                if (!event.rawEvent.isComposing && !this.editor.isInIME()) {
+                    this.checkAndApplyPendingFormat(event.rawEvent.data);
+                }
+
+                break;
+
+            case PluginEventType.CompositionEnd:
+                this.checkAndApplyPendingFormat(event.rawEvent.data);
+                break;
+
+            case PluginEventType.KeyDown:
+                if (event.rawEvent.which >= Keys.PAGEUP && event.rawEvent.which <= Keys.DOWN) {
+                    clearPendingFormat(this.editor);
+                }
+                break;
+
+            case PluginEventType.MouseUp:
+            case PluginEventType.ContentChanged:
+                if (!canApplyPendingFormat(this.editor)) {
+                    clearPendingFormat(this.editor);
+                }
+                break;
+        }
+    }
+
+    private checkAndApplyPendingFormat(data: string | null) {
+        if (this.editor && data) {
+            applyPendingFormat(this.editor, data);
+            clearPendingFormat(this.editor);
+        }
+    }
+}
diff --git a/packages/roosterjs-content-model/lib/formatHandlers/defaultFormatHandlers.ts b/packages/roosterjs-content-model/lib/formatHandlers/defaultFormatHandlers.ts
@@ -196,6 +196,7 @@ const defaultFormatKeysPerCategory: {
         'bold',
         'textColor',
         'backgroundColor',
+        'lineHeight',
     ],
     segmentOnBlock: ['fontFamily', 'fontSize', 'underline', 'italic', 'bold', 'textColor'],
     tableCell: ['border', 'borderBox', 'backgroundColor', 'padding', 'direction', 'verticalAlign'],

diff --git a/packages/roosterjs-content-model/lib/formatHandlers/segment/computedSegmentFormatHandler.ts b/packages/roosterjs-content-model/lib/formatHandlers/segment/computedSegmentFormatHandler.ts
@@ -0,0 +1,28 @@
+import { ContentModelSegmentFormat } from '../../publicTypes/format/ContentModelSegmentFormat';
+import { FormatHandler } from '../FormatHandler';
+import { parseValueWithUnit } from '../utils/parseValueWithUnit';
+
+/**
+ * @internal
+ */
+export const computedSegmentFormatHandler: FormatHandler<ContentModelSegmentFormat> = {
+    parse: (format, element) => {
+        const computedStyles = element.ownerDocument.defaultView?.getComputedStyle(element);
+
+        if (computedStyles) {
+            const { fontFamily, fontSize } = computedStyles;
+
+            // Only read font family and size from root container.
+            // For others, keep them undefined since it is not normal to have bold/italic/... in root container
+            // and we skip colors on purpose since we will get inverted color in dark mode which is not right.
+            if (fontFamily) {
+                format.fontFamily = fontFamily;
+            }
+
+            if (fontSize) {
+                format.fontSize = parseValueWithUnit(fontSize, undefined /*element*/, 'pt') + 'pt';
+            }
+        }
+    },
+    apply: () => {},
+};
diff --git a/packages/roosterjs-content-model/lib/modelApi/creators/createTable.ts b/packages/roosterjs-content-model/lib/modelApi/creators/createTable.ts
@@ -1,3 +1,4 @@
+import { ContentModelBlockFormat } from '../../publicTypes/format/ContentModelBlockFormat';
 import { ContentModelTable } from '../../publicTypes/block/ContentModelTable';
 import { ContentModelTableFormat } from '../../publicTypes/format/ContentModelTableFormat';
 import { ContentModelTableRow } from '../../publicTypes/block/ContentModelTableRow';

diff --git a/packages/roosterjs-content-model/lib/modelApi/metadata/updateListMetadata.ts b/packages/roosterjs-content-model/lib/modelApi/metadata/updateListMetadata.ts
diff --git a/packages/roosterjs-content-model/lib/modelApi/metadata/updateMetadata.ts b/packages/roosterjs-content-model/lib/modelApi/metadata/updateMetadata.ts
diff --git a/packages/roosterjs-content-model/lib/modelApi/metadata/updateTableCellMetadata.ts b/packages/roosterjs-content-model/lib/modelApi/metadata/updateTableCellMetadata.ts