Version bump content model packages to 0.25.0 (#2392)

* wip * wip * refactor * fix dependecies * fix dependecies * fix dependecies * WIP * add test * add tests * types * add comment * add comment * add comment * add comment * add comment * comments * fix build * fixes * fixes * refactor * fixes * Add shortcut support Ctrl+K for insertLink (#2333) * Add shortcut support Ctrl+K for insertLink * Add metakey and alt key checks * Add insertButton check and disable param * add options to ribbon and decouple onButtonClick * update * update fix * add break statement * remove duplicate imports --------- Co-authored-by: Ghanem10 <[email protected]> Co-authored-by: Jiuqing Song <[email protected]> * Content Model: Add back ContentModelBeforePasteEvent (#2347) * Use margin-top and bottom for list margin (#2346) * Standalone Editor: Improve cache (3rd try) (#2344) Co-authored-by: Bryan Valverde U <[email protected]> * fixes * fix test * Fix safari selection issue (#2332) * try fix safari selection issue * fix content model editor, add test * fix focus bug * Standalone Editor: Remove dependency to old code from api and plugins package (#2349) * Content Model: Decouple test code from old code (#2351) * Fix demo site (#2353) * Content Model: Fix table text color (#2359) * Fix pending format (#2354) * Fix pending format * improve * Standalone Editor: Provide a DOMHelper to allow access DOM tree (#2363) * Fix shadow edit (#2355) * Fix 2 shadow edit issue (#2356) * Support unit "inch" when parse value (#2357) * Content Model: Support inch when parse unit value * add comment * Code clean up: small refactor to paste code (#2365) * Refactor paste * add test * Code clean up: Remove IStandaloneEditor.setContentModel (#2364) * Add support to cursor around Block entities. (#2350) * rotator space * Port ContextMenu plugin (#2366) * Port ContextMenu plugin * add test * Content Model: Fix 252436 (#2367) * Content Model: Fix 252436 * add test --------- Co-authored-by: Bryan Valverde U <[email protected]> * Code cleanup: Remove parameter onNodeCreated (#2374) * Code cleanup: Remove isContentModelEditor (#2371) * Code cleanup: Remove isContentModelEditor * add buttons * Add `isReverted` to DOM Selection (#2368) * add Changes * add Tests * fix dependencies * address comments * address comment * fix after merge * fix test --------- Co-authored-by: Jiuqing Song <[email protected]> * Code cleanup: Remove NormalizeTablePlugin (#2376) * add normalize content model * fix build * Code cleanup: Replace createContentModel with getContentModelCopy (#2372) * Code cleanup: Remove isContentModelEditor * add buttons * Code cleanup: Replace createContentModel with getContentModelCopy * Code cleanup: Remove get/setZoomScale (#2378) * Code cleanup: Remove get/setZoomScale * Add calculateZoomScale function * improve * Code cleanup: Move isNodeInEditor into DOMHelper (#2379) * Code cleanup: Remove TODO (#2384) * Add write permission to deploy action (#2383) * Revert "Add support to cursor around Block entities. (#2350)" (#2390) This reverts commit 7998d03. * Content Model: Fix #2202 (#2389) Co-authored-by: Bryan Valverde U <[email protected]> * bump --------- Co-authored-by: Júlia Roldi <[email protected]> Co-authored-by: Julia Roldi <[email protected]> Co-authored-by: Gani <[email protected]> Co-authored-by: Ghanem10 <[email protected]> Co-authored-by: Jiuqing Song <[email protected]> Co-authored-by: Bryan Valverde U <[email protected]>
microsoft · Feb 2, 2024 · fb93567 · fb93567
1 parent 56194db
commit fb93567
Show file tree

Hide file tree

Showing 197 changed files with 6,944 additions and 2,947 deletions.
diff --git a/.github/workflows/build-and-deploy.yml b/.github/workflows/build-and-deploy.yml
@@ -6,6 +6,8 @@ on:
 jobs:
     build-and-deploy:
         runs-on: ubuntu-latest
+        permissions:
+            contents: write
         steps:
             - name: Checkout
               uses: actions/[email protected]

diff --git a/demo/scripts/controls/ContentModelEditorMainPane.tsx b/demo/scripts/controls/ContentModelEditorMainPane.tsx
@@ -6,7 +6,7 @@ import ContentModelEventViewPlugin from './sidePane/eventViewer/ContentModelEven
 import ContentModelFormatPainterPlugin from './contentModel/plugins/ContentModelFormatPainterPlugin';
 import ContentModelFormatStatePlugin from './sidePane/formatState/ContentModelFormatStatePlugin';
 import ContentModelPanePlugin from './sidePane/contentModel/ContentModelPanePlugin';
-import ContentModelRibbon from './ribbonButtons/contentModel/ContentModelRibbon';
+import ContentModelRibbonButton from './ribbonButtons/contentModel/ContentModelRibbonButton';
 import ContentModelRooster from './contentModel/editor/ContentModelRooster';
 import ContentModelSnapshotPlugin from './sidePane/snapshot/ContentModelSnapshotPlugin';
 import getToggleablePlugins from './getToggleablePlugins';
@@ -15,18 +15,86 @@ import RibbonPlugin from './ribbonButtons/contentModel/RibbonPlugin';
 import SampleEntityPlugin from './sampleEntity/SampleEntityPlugin';
 import SidePane from './sidePane/SidePane';
 import TitleBar from './titleBar/TitleBar';
+import { alignCenterButton } from './ribbonButtons/contentModel/alignCenterButton';
+import { alignJustifyButton } from './ribbonButtons/contentModel/alignJustifyButton';
+import { alignLeftButton } from './ribbonButtons/contentModel/alignLeftButton';
+import { alignRightButton } from './ribbonButtons/contentModel/alignRightButton';
 import { arrayPush } from 'roosterjs-editor-dom';
+import { backgroundColorButton } from './ribbonButtons/contentModel/backgroundColorButton';
+import { blockQuoteButton } from './ribbonButtons/contentModel/blockQuoteButton';
+import { boldButton } from './ribbonButtons/contentModel/boldButton';
+import { bulletedListButton } from './ribbonButtons/contentModel/bulletedListButton';
+import { changeImageButton } from './ribbonButtons/contentModel/changeImageButton';
+import { clearFormatButton } from './ribbonButtons/contentModel/clearFormatButton';
+import { codeButton } from './ribbonButtons/contentModel/codeButton';
+import { ContentModelRibbon } from './ribbonButtons/contentModel/ContentModelRibbon';
 import { ContentModelRibbonPlugin } from './ribbonButtons/contentModel/ContentModelRibbonPlugin';
 import { ContentModelSegmentFormat, Snapshots } from 'roosterjs-content-model-types';
 import { createEmojiPlugin, createPasteOptionPlugin } from 'roosterjs-react';
+import { darkMode } from './ribbonButtons/contentModel/darkMode';
+import { decreaseFontSizeButton } from './ribbonButtons/contentModel/decreaseFontSizeButton';
+import { decreaseIndentButton } from './ribbonButtons/contentModel/decreaseIndentButton';
 import { EditorPlugin } from 'roosterjs-editor-types';
+import { exportContent } from './ribbonButtons/contentModel/export';
+import { fontButton } from './ribbonButtons/contentModel/fontButton';
+import { fontSizeButton } from './ribbonButtons/contentModel/fontSizeButton';
+import { formatPainterButton } from './ribbonButtons/contentModel/formatPainterButton';
+import { formatTableButton } from './ribbonButtons/contentModel/formatTableButton';
 import { getDarkColor } from 'roosterjs-color-utils';
+import { imageBorderColorButton } from './ribbonButtons/contentModel/imageBorderColorButton';
+import { imageBorderRemoveButton } from './ribbonButtons/contentModel/imageBorderRemoveButton';
+import { imageBorderStyleButton } from './ribbonButtons/contentModel/imageBorderStyleButton';
+import { imageBorderWidthButton } from './ribbonButtons/contentModel/imageBorderWidthButton';
+import { imageBoxShadowButton } from './ribbonButtons/contentModel/imageBoxShadowButton';
+import { increaseFontSizeButton } from './ribbonButtons/contentModel/increaseFontSizeButton';
+import { increaseIndentButton } from './ribbonButtons/contentModel/increaseIndentButton';
+import { insertImageButton } from './ribbonButtons/contentModel/insertImageButton';
+import { insertLinkButton } from './ribbonButtons/contentModel/insertLinkButton';
+import { insertTableButton } from './ribbonButtons/contentModel/insertTableButton';
+import { italicButton } from './ribbonButtons/contentModel/italicButton';
+import { listStartNumberButton } from './ribbonButtons/contentModel/listStartNumberButton';
+import { ltrButton } from './ribbonButtons/contentModel/ltrButton';
+import { numberedListButton } from './ribbonButtons/contentModel/numberedListButton';
 import { PartialTheme } from '@fluentui/react/lib/Theme';
+import { pasteButton } from './ribbonButtons/contentModel/pasteButton';
+import { popout } from './ribbonButtons/contentModel/popout';
+import { redoButton } from './ribbonButtons/contentModel/redoButton';
+import { removeLinkButton } from './ribbonButtons/contentModel/removeLinkButton';
+import { rtlButton } from './ribbonButtons/contentModel/rtlButton';
+import { setBulletedListStyleButton } from './ribbonButtons/contentModel/setBulletedListStyleButton';
+import { setHeadingLevelButton } from './ribbonButtons/contentModel/setHeadingLevelButton';
+import { setNumberedListStyleButton } from './ribbonButtons/contentModel/setNumberedListStyleButton';
+import { setTableCellShadeButton } from './ribbonButtons/contentModel/setTableCellShadeButton';
+import { setTableHeaderButton } from './ribbonButtons/contentModel/setTableHeaderButton';
+import { spacingButton } from './ribbonButtons/contentModel/spacingButton';
+import { strikethroughButton } from './ribbonButtons/contentModel/strikethroughButton';
+import { subscriptButton } from './ribbonButtons/contentModel/subscriptButton';
+import { superscriptButton } from './ribbonButtons/contentModel/superscriptButton';
+import { tableBorderApplyButton } from './ribbonButtons/contentModel/tableBorderApplyButton';
+import { tableBorderColorButton } from './ribbonButtons/contentModel/tableBorderColorButton';
+import { tableBorderStyleButton } from './ribbonButtons/contentModel/tableBorderStyleButton';
+import { tableBorderWidthButton } from './ribbonButtons/contentModel/tableBorderWidthButton';
+import { textColorButton } from './ribbonButtons/contentModel/textColorButton';
 import { trustedHTMLHandler } from '../utils/trustedHTMLHandler';
+import { underlineButton } from './ribbonButtons/contentModel/underlineButton';
+import { undoButton } from './ribbonButtons/contentModel/undoButton';
+import { zoom } from './ribbonButtons/contentModel/zoom';
 import {
+    spaceAfterButton,
+    spaceBeforeButton,
+} from './ribbonButtons/contentModel/spaceBeforeAfterButtons';
+import {
+    tableAlignCellButton,
+    tableAlignTableButton,
+    tableDeleteButton,
+    tableInsertButton,
+    tableMergeButton,
+    tableSplitButton,
+} from './ribbonButtons/contentModel/tableEditButtons';
+import {
+    ContentModelAutoFormatPlugin,
     ContentModelEditPlugin,
     ContentModelPastePlugin,
-    EntityDelimiterPlugin,
 } from 'roosterjs-content-model-plugins';
 import {
     ContentModelEditor,
@@ -101,16 +169,80 @@ class ContentModelEditorMainPane extends MainPaneBase<ContentModelMainPaneState>
     private apiPlaygroundPlugin: ApiPlaygroundPlugin;
     private contentModelPanePlugin: ContentModelPanePlugin;
     private contentModelEditPlugin: ContentModelEditPlugin;
+    private contentModelAutoFormatPlugin: ContentModelAutoFormatPlugin;
     private contentModelRibbonPlugin: RibbonPlugin;
     private pasteOptionPlugin: EditorPlugin;
     private emojiPlugin: EditorPlugin;
     private snapshotPlugin: ContentModelSnapshotPlugin;
-    private entityDelimiterPlugin: EntityDelimiterPlugin;
     private toggleablePlugins: EditorPlugin[] | null = null;
     private formatPainterPlugin: ContentModelFormatPainterPlugin;
     private pastePlugin: ContentModelPastePlugin;
     private sampleEntityPlugin: SampleEntityPlugin;
     private snapshots: Snapshots;
+    private buttons: ContentModelRibbonButton<any>[] = [
+        formatPainterButton,
+        boldButton,
+        italicButton,
+        underlineButton,
+        fontButton,
+        fontSizeButton,
+        increaseFontSizeButton,
+        decreaseFontSizeButton,
+        textColorButton,
+        backgroundColorButton,
+        bulletedListButton,
+        numberedListButton,
+        decreaseIndentButton,
+        increaseIndentButton,
+        blockQuoteButton,
+        alignLeftButton,
+        alignCenterButton,
+        alignRightButton,
+        alignJustifyButton,
+        insertLinkButton,
+        removeLinkButton,
+        insertTableButton,
+        insertImageButton,
+        superscriptButton,
+        subscriptButton,
+        strikethroughButton,
+        setHeadingLevelButton,
+        codeButton,
+        ltrButton,
+        rtlButton,
+        undoButton,
+        redoButton,
+        clearFormatButton,
+        setBulletedListStyleButton,
+        setNumberedListStyleButton,
+        listStartNumberButton,
+        formatTableButton,
+        setTableCellShadeButton,
+        setTableHeaderButton,
+        tableInsertButton,
+        tableDeleteButton,
+        tableMergeButton,
+        tableSplitButton,
+        tableAlignCellButton,
+        tableAlignTableButton,
+        tableBorderApplyButton,
+        tableBorderColorButton,
+        tableBorderWidthButton,
+        tableBorderStyleButton,
+        imageBorderColorButton,
+        imageBorderWidthButton,
+        imageBorderStyleButton,
+        imageBorderRemoveButton,
+        changeImageButton,
+        imageBoxShadowButton,
+        spacingButton,
+        spaceBeforeButton,
+        spaceAfterButton,
+        pasteButton,
+        darkMode,
+        zoom,
+        exportContent,
+    ];
 
     constructor(props: {}) {
         super(props);
@@ -130,10 +262,10 @@ class ContentModelEditorMainPane extends MainPaneBase<ContentModelMainPaneState>
         this.snapshotPlugin = new ContentModelSnapshotPlugin(this.snapshots);
         this.contentModelPanePlugin = new ContentModelPanePlugin();
         this.contentModelEditPlugin = new ContentModelEditPlugin();
+        this.contentModelAutoFormatPlugin = new ContentModelAutoFormatPlugin();
         this.contentModelRibbonPlugin = new ContentModelRibbonPlugin();
         this.pasteOptionPlugin = createPasteOptionPlugin();
         this.emojiPlugin = createEmojiPlugin();
-        this.entityDelimiterPlugin = new EntityDelimiterPlugin();
         this.formatPainterPlugin = new ContentModelFormatPainterPlugin();
         this.pastePlugin = new ContentModelPastePlugin();
         this.sampleEntityPlugin = new SampleEntityPlugin();
@@ -162,11 +294,13 @@ class ContentModelEditorMainPane extends MainPaneBase<ContentModelMainPaneState>
     }
 
     renderRibbon(isPopout: boolean) {
+        const buttons = isPopout ? this.buttons : this.buttons.concat([popout]);
+
         return (
             <ContentModelRibbon
-                ribbonPlugin={this.contentModelRibbonPlugin}
-                isRtl={this.state.isRtl}
-                isInPopout={isPopout}
+                buttons={buttons}
+                plugin={this.contentModelRibbonPlugin}
+                dir={this.state.isRtl ? 'rtl' : 'ltr'}
             />
         );
     }
@@ -192,10 +326,8 @@ class ContentModelEditorMainPane extends MainPaneBase<ContentModelMainPaneState>
 
         const plugins = [
             ...this.toggleablePlugins,
-            this.contentModelPanePlugin.getInnerRibbonPlugin(),
             this.pasteOptionPlugin,
             this.emojiPlugin,
-            this.entityDelimiterPlugin,
             this.sampleEntityPlugin,
         ];
 
@@ -254,15 +386,16 @@ class ContentModelEditorMainPane extends MainPaneBase<ContentModelMainPaneState>
                                 this.contentModelRibbonPlugin,
                                 this.formatPainterPlugin,
                                 this.pastePlugin,
+                                this.contentModelAutoFormatPlugin,
                                 this.contentModelEditPlugin,
+                                this.contentModelPanePlugin.getInnerRibbonPlugin(),
                             ]}
                             defaultSegmentFormat={defaultFormat}
                             inDarkMode={this.state.isDarkMode}
                             getDarkColor={getDarkColor}
                             experimentalFeatures={this.state.initState.experimentalFeatures}
                             snapshots={this.snapshotPlugin.getSnapshots()}
                             trustedHTMLHandler={trustedHTMLHandler}
-                            zoomScale={this.state.scale}
                             initialContent={this.content}
                             editorCreator={this.state.editorCreator}
                             dir={this.state.isRtl ? 'rtl' : 'ltr'}