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 · Feb 10, 2023 · fcd1061 · fcd1061
1 parent 1f1f96c
commit fcd1061
Show file tree

Hide file tree

Showing 251 changed files with 5,282 additions and 1,475 deletions.
diff --git a/demo/scripts/controls/MainPane.tsx b/demo/scripts/controls/MainPane.tsx
@@ -6,7 +6,6 @@ import ContentModelPanePlugin from './sidePane/contentModel/ContentModelPanePlug
 import ContentModelRibbon from './ribbonButtons/contentModel/ContentModelRibbon';
 import EditorOptionsPlugin from './sidePane/editorOptions/EditorOptionsPlugin';
 import EventViewPlugin from './sidePane/eventViewer/EventViewPlugin';
-import ExperimentalContentModelEditor from './editor/ExperimentalContentModelEditor';
 import FormatPainterPlugin from './contentModel/plugins/FormatPainterPlugin';
 import FormatStatePlugin from './sidePane/formatState/FormatStatePlugin';
 import getToggleablePlugins from './getToggleablePlugins';
@@ -15,7 +14,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 { EditorOptions, EditorPlugin } from 'roosterjs-editor-types';
@@ -456,7 +455,7 @@ class MainPane extends MainPaneBase {
         this.toggleablePlugins = null;
         this.setState({
             editorCreator: (div: HTMLDivElement, options: EditorOptions) =>
-                new ExperimentalContentModelEditor(div, options),
+                new ContentModelEditor(div, options),
         });
     }
 }

diff --git a/demo/scripts/controls/contentModel/components/format/LinkFormatView.tsx b/demo/scripts/controls/contentModel/components/format/LinkFormatView.tsx
@@ -1,10 +1,12 @@
 import * as React from 'react';
+import { ContentModelHyperLinkFormat, LinkFormat } from 'roosterjs-content-model';
 import { createTextFormatRenderer } from './utils/createTextFormatRenderer';
 import { FormatRenderer } from './utils/FormatRenderer';
 import { FormatView } from './FormatView';
-import { LinkFormat } from 'roosterjs-content-model';
+import { TextColorFormatRenderer } from './formatPart/TextColorFormatRenderer';
+import { UnderlineFormatRenderer } from './formatPart/BasicFormatRenderers';
 
-const LinkFormatRenderers: FormatRenderer<LinkFormat>[] = [
+const LinkFormatRenderers: FormatRenderer<ContentModelHyperLinkFormat>[] = [
     createTextFormatRenderer<LinkFormat>(
         'Name',
         format => format.name,
@@ -40,6 +42,8 @@ const LinkFormatRenderers: FormatRenderer<LinkFormat>[] = [
         format => format.relationship,
         (format, value) => (format.relationship = value)
     ),
+    TextColorFormatRenderer,
+    UnderlineFormatRenderer,
 ];
 
 export function LinkFormatView(props: { format: LinkFormat }) {

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

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/ContentModelImageView.tsx b/demo/scripts/controls/contentModel/components/model/ContentModelImageView.tsx
@@ -11,7 +11,7 @@ import { MetadataView } from '../format/MetadataView';
 import { PaddingFormatRenderer } from '../format/formatPart/PaddingFormatRenderer';
 import { SegmentFormatView } from '../format/SegmentFormatView';
 import { SizeFormatRenderers } from '../format/formatPart/SizeFormatRenderers';
-import { updateImageMetadata } from 'roosterjs-content-model/lib/modelApi/metadata/updateImageMetadata';
+import { updateImageMetadata } from 'roosterjs-content-model';
 import { useProperty } from '../../hooks/useProperty';
 
 const styles = require('./ContentModelImageView.scss');

diff --git a/demo/scripts/controls/contentModel/components/model/ContentModelTableCellView.tsx b/demo/scripts/controls/contentModel/components/model/ContentModelTableCellView.tsx
@@ -11,7 +11,7 @@ import { MetadataView } from '../format/MetadataView';
 import { PaddingFormatRenderer } from '../format/formatPart/PaddingFormatRenderer';
 import { TableCellMetadataFormatRender } from '../format/formatPart/TableCellMetadataFormatRender';
 import { TextColorFormatRenderer } from '../format/formatPart/TextColorFormatRenderer';
-import { updateTableCellMetadata } from 'roosterjs-content-model/lib/modelApi/metadata/updateTableCellMetadata';
+import { updateTableCellMetadata } from 'roosterjs-content-model';
 import { useProperty } from '../../hooks/useProperty';
 import { VerticalAlignFormatRenderer } from '../format/formatPart/VerticalAlignFormatRenderer';
 import { WordBreakFormatRenderer } from '../format/formatPart/WordBreakFormatRenderer';

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';
@@ -13,7 +12,7 @@ import { MarginFormatRenderer } from '../format/formatPart/MarginFormatRenderer'
 import { MetadataView } from '../format/MetadataView';
 import { SpacingFormatRenderer } from '../format/formatPart/SpacingFormatRenderer';
 import { TableMetadataFormatRenders } from '../format/formatPart/TableMetadataFormatRenders';
-import { updateTableMetadata } from 'roosterjs-content-model/lib/modelApi/metadata/updateTableMetadata';
+import { updateTableMetadata } from 'roosterjs-content-model';
 import { useProperty } from '../../hooks/useProperty';
 import {
     ContentModelTable,
@@ -61,26 +60,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/contentModel/plugins/FormatPainterPlugin.ts b/demo/scripts/controls/contentModel/plugins/FormatPainterPlugin.ts
@@ -3,7 +3,7 @@ import {
     applySegmentFormat,
     ContentModelSegmentFormat,
     getSegmentFormat,
-    IExperimentalContentModelEditor,
+    IContentModelEditor,
 } from 'roosterjs-content-model';
 
 const FORMATPAINTERCURSOR_SVG = require('./formatpaintercursor.svg');
@@ -15,14 +15,14 @@ interface FormatPainterFormatHolder {
 }
 
 export default class FormatPainterPlugin implements EditorPlugin {
-    private editor: IExperimentalContentModelEditor | null = null;
+    private editor: IContentModelEditor | null = null;
 
     getName() {
         return 'FormatPainter';
     }
 
     initialize(editor: IEditor) {
-        this.editor = editor as IExperimentalContentModelEditor;
+        this.editor = editor as IContentModelEditor;
     }
 
     dispose() {
@@ -42,7 +42,7 @@ export default class FormatPainterPlugin implements EditorPlugin {
         }
     }
 
-    static startFormatPainter(editor: IExperimentalContentModelEditor) {
+    static startFormatPainter(editor: IContentModelEditor) {
         const formatHolder = getFormatHolder(editor);
         const format = getSegmentFormat(editor);
 

diff --git a/demo/scripts/controls/editor/ExperimentalContentModelEditor.ts b/demo/scripts/controls/editor/ExperimentalContentModelEditor.ts
diff --git a/demo/scripts/controls/editor/isContentModelEditor.ts b/demo/scripts/controls/editor/isContentModelEditor.ts
diff --git a/demo/scripts/controls/ribbonButtons/contentModel/ContentModelRibbon.tsx b/demo/scripts/controls/ribbonButtons/contentModel/ContentModelRibbon.tsx
@@ -6,13 +6,18 @@ import { backgroundColorButton } from './backgroundColorButton';
 import { blockQuoteButton } from './blockQuoteButton';
 import { boldButton } from './boldButton';
 import { bulletedListButton } from './bulletedListButton';
+import { changeImageButton } from './changeImageButton';
 import { clearFormatButton } from './clearFormatButton';
 import { decreaseFontSizeButton } from './decreaseFontSizeButton';
 import { decreaseIndentButton } from './decreaseIndentButton';
 import { fontButton } from './fontButton';
 import { fontSizeButton } from './fontSizeButton';
 import { formatPainterButton } from './formatPainterButton';
 import { formatTableButton } from './formatTableButton';
+import { imageBorderColorButton } from './imageBorderColorButton';
+import { imageBorderStyleButton } from './imageBorderStyleButton';
+import { imageBorderWidthButton } from './imageBorderWidthButton';
+import { imageBoxShadowButton } from './imageBoxShadowButton';
 import { increaseFontSizeButton } from './increaseFontSizeButton';
 import { increaseIndentButton } from './increaseIndentButton';
 import { insertImageButton } from './insertImageButton';
@@ -43,6 +48,8 @@ import {
     tableMergeButton,
     tableSplitButton,
 } from './tableEditButtons';
+import { spacingButton } from './spacingButton';
+import { spaceAfterButton, spaceBeforeButton } from './spaceBeforeAfterButtons';
 
 const buttons = [
     formatPainterButton,
@@ -86,6 +93,14 @@ const buttons = [
     tableSplitButton,
     tableAlignCellButton,
     tableAlignTableButton,
+    imageBorderColorButton,
+    imageBorderWidthButton,
+    imageBorderStyleButton,
+    changeImageButton,
+    imageBoxShadowButton,
+    spacingButton,
+    spaceBeforeButton,
+    spaceAfterButton,
 ];
 
 export default function ContentModelRibbon(props: { ribbonPlugin: RibbonPlugin; isRtl: boolean }) {

diff --git a/demo/scripts/controls/ribbonButtons/contentModel/ContentModelRibbonPlugin.ts b/demo/scripts/controls/ribbonButtons/contentModel/ContentModelRibbonPlugin.ts
@@ -1,10 +1,10 @@
 import { FormatState, PluginEvent, PluginEventType } from 'roosterjs-editor-types';
-import { getFormatState, IExperimentalContentModelEditor } from 'roosterjs-content-model';
+import { getFormatState, IContentModelEditor } from 'roosterjs-content-model';
 import { getObjectKeys } from 'roosterjs-editor-dom';
 import { LocalizedStrings, RibbonButton, RibbonPlugin, UIUtilities } from 'roosterjs-react';
 
 export class ContentModelRibbonPlugin implements RibbonPlugin {
-    private editor: IExperimentalContentModelEditor | null = null;
+    private editor: IContentModelEditor | null = null;
     private onFormatChanged: ((formatState: FormatState) => void) | null = null;
     private timer = 0;
     private formatState: FormatState | null = null;
@@ -27,7 +27,7 @@ export class ContentModelRibbonPlugin implements RibbonPlugin {
      * Initialize this plugin
      * @param editor The editor instance
      */
-    initialize(editor: IExperimentalContentModelEditor) {
+    initialize(editor: IContentModelEditor) {
         this.editor = editor;
     }
 

diff --git a/demo/scripts/controls/ribbonButtons/contentModel/alignCenterButton.ts b/demo/scripts/controls/ribbonButtons/contentModel/alignCenterButton.ts
@@ -1,5 +1,5 @@
-import isContentModelEditor from '../../editor/isContentModelEditor';
 import { AlignCenterButtonStringKey, RibbonButton } from 'roosterjs-react';
+import { isContentModelEditor } from 'roosterjs-content-model';
 import { setAlignment } from 'roosterjs-content-model';
 
 /**

diff --git a/demo/scripts/controls/ribbonButtons/contentModel/alignLeftButton.ts b/demo/scripts/controls/ribbonButtons/contentModel/alignLeftButton.ts
@@ -1,5 +1,5 @@
-import isContentModelEditor from '../../editor/isContentModelEditor';
 import { AlignLeftButtonStringKey, RibbonButton } from 'roosterjs-react';
+import { isContentModelEditor } from 'roosterjs-content-model';
 import { setAlignment } from 'roosterjs-content-model';
 
 /**

diff --git a/demo/scripts/controls/ribbonButtons/contentModel/alignRightButton.ts b/demo/scripts/controls/ribbonButtons/contentModel/alignRightButton.ts
@@ -1,5 +1,5 @@
-import isContentModelEditor from '../../editor/isContentModelEditor';
 import { AlignRightButtonStringKey, RibbonButton } from 'roosterjs-react';
+import { isContentModelEditor } from 'roosterjs-content-model';
 import { setAlignment } from 'roosterjs-content-model';
 
 /**