Merge pull request #1712 from microsoft/u/juliaroldi/bump-version-8.45.0

U/juliaroldi/bump version 8.45.0
microsoft · Apr 6, 2023 · 4acd03c · 4acd03c
2 parents 5b62515 + ae69ff5
commit 4acd03c
Show file tree

Hide file tree

Showing 193 changed files with 10,675 additions and 2,892 deletions.
diff --git a/demo/index.html b/demo/index.html
@@ -18,8 +18,8 @@
     </head>
     <body>
         <div id="mainPane"></div>
-        <script src="https://unpkg.com/react@16.14.0/umd/react.production.min.js"></script>
-        <script src="https://unpkg.com/react-dom@16.14.0/umd/react-dom.production.min.js"></script>
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.14.0/umd/react.production.min.js"></script>
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.14.0/umd/react-dom.production.min.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>

diff --git a/demo/scripts/controls/BuildInPluginState.ts b/demo/scripts/controls/BuildInPluginState.ts
@@ -22,6 +22,8 @@ export interface BuildInPluginList {
     tableEditMenu: boolean;
     contextMenu: boolean;
     autoFormat: boolean;
+    contentModelFormat: boolean;
+    contentModelEdit: boolean;
 }
 
 export default interface BuildInPluginState {

diff --git a/demo/scripts/controls/MainPane.tsx b/demo/scripts/controls/MainPane.tsx
@@ -14,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 { ContentModelEditor, ContentModelPlugin } from 'roosterjs-content-model';
+import { ContentModelEditor } from 'roosterjs-content-model';
 import { ContentModelRibbonPlugin } from './ribbonButtons/contentModel/ContentModelRibbonPlugin';
 import { darkMode, DarkModeButtonStringKey } from './ribbonButtons/darkMode';
 import { EditorOptions, EditorPlugin } from 'roosterjs-editor-types';
@@ -127,7 +127,6 @@ class MainPane extends MainPaneBase {
     private emojiPlugin: EditorPlugin;
     private updateContentPlugin: UpdateContentPlugin;
     private toggleablePlugins: EditorPlugin[] | null = null;
-    private contentModelPlugin: ContentModelPlugin;
     private formatPainterPlugin: FormatPainterPlugin;
     private mainWindowButtons: RibbonButton<RibbonStringKeys>[];
     private popoutWindowButtons: RibbonButton<RibbonStringKeys>[];
@@ -150,7 +149,6 @@ class MainPane extends MainPaneBase {
         this.pasteOptionPlugin = createPasteOptionPlugin();
         this.emojiPlugin = createEmojiPlugin();
         this.updateContentPlugin = createUpdateContentPlugin(UpdateMode.OnDispose, this.onUpdate);
-        this.contentModelPlugin = new ContentModelPlugin();
         this.formatPainterPlugin = new FormatPainterPlugin();
         this.mainWindowButtons = getButtons([
             ...AllButtonKeys,
@@ -438,7 +436,6 @@ class MainPane extends MainPaneBase {
             this.ContentModelPanePlugin.getInnerRibbonPlugin(),
             this.pasteOptionPlugin,
             this.emojiPlugin,
-            this.contentModelPlugin,
             this.formatPainterPlugin,
         ];
 

diff --git a/demo/scripts/controls/contentModel/components/model/ContentModelBlockGroupView.tsx b/demo/scripts/controls/contentModel/components/model/ContentModelBlockGroupView.tsx
@@ -1,9 +1,9 @@
 import * as React from 'react';
 import { ContentModelBlockGroup } from 'roosterjs-content-model';
 import { ContentModelDocumentView } from './ContentModelDocumentView';
+import { ContentModelFormatContainerView } from './ContentModelFormatContainerView';
 import { ContentModelGeneralView } from './ContentModelGeneralView';
 import { ContentModelListItemView } from './ContentModelListItemView';
-import { ContentModelQuoteView } from './ContentModelQuoteView';
 import { ContentModelTableCellView } from './ContentModelTableCellView';
 
 export function ContentModelBlockGroupView(props: { group: ContentModelBlockGroup }) {
@@ -19,8 +19,8 @@ export function ContentModelBlockGroupView(props: { group: ContentModelBlockGrou
         case 'ListItem':
             return <ContentModelListItemView listItem={group} />;
 
-        case 'Quote':
-            return <ContentModelQuoteView quote={group} />;
+        case 'FormatContainer':
+            return <ContentModelFormatContainerView container={group} />;
 
         case 'TableCell':
             return <ContentModelTableCellView cell={group} />;

diff --git a/...mponents/model/ContentModelQuoteView.scss → ...odel/ContentModelFormatContainerView.scss b/...mponents/model/ContentModelQuoteView.scss → ...odel/ContentModelFormatContainerView.scss
@@ -1,3 +1,3 @@
-.modelQuote {
+.modelFormatContainer {
     background-color: #a8a;
 }
diff --git a/demo/scripts/controls/contentModel/components/model/ContentModelFormatContainerView.tsx b/demo/scripts/controls/contentModel/components/model/ContentModelFormatContainerView.tsx
@@ -0,0 +1,36 @@
+import * as React from 'react';
+import { BlockFormatView } from '../format/BlockFormatView';
+import { BlockGroupContentView } from './BlockGroupContentView';
+import { ContentModelFormatContainer, hasSelectionInBlock } from 'roosterjs-content-model';
+import { ContentModelView } from '../ContentModelView';
+import { SegmentFormatView } from '../format/SegmentFormatView';
+
+const styles = require('./ContentModelFormatContainerView.scss');
+
+export function ContentModelFormatContainerView(props: { container: ContentModelFormatContainer }) {
+    const { container } = props;
+    const getContent = React.useCallback(() => {
+        return <BlockGroupContentView group={container} />;
+    }, [container]);
+
+    const getFormat = React.useCallback(() => {
+        return (
+            <>
+                <BlockFormatView format={container.format} />
+                <SegmentFormatView format={container.format} />
+            </>
+        );
+    }, [container]);
+
+    return (
+        <ContentModelView
+            title="FormatContainer"
+            subTitle={container.tagName}
+            className={styles.modelFormatContainer}
+            hasSelection={hasSelectionInBlock(container)}
+            jsonSource={container}
+            getContent={getContent}
+            getFormat={getFormat}
+        />
+    );
+}
diff --git a/demo/scripts/controls/contentModel/components/model/ContentModelQuoteView.tsx b/demo/scripts/controls/contentModel/components/model/ContentModelQuoteView.tsx
diff --git a/demo/scripts/controls/getToggleablePlugins.ts b/demo/scripts/controls/getToggleablePlugins.ts
@@ -1,6 +1,7 @@
 import BuildInPluginState, { BuildInPluginList, UrlPlaceholder } from './BuildInPluginState';
 import { AutoFormat } from 'roosterjs-editor-plugins/lib/AutoFormat';
 import { ContentEdit } from 'roosterjs-editor-plugins/lib/ContentEdit';
+import { ContentModelEditPlugin, ContentModelFormatPlugin } from 'roosterjs-content-model';
 import { CustomReplace as CustomReplacePlugin } from 'roosterjs-editor-plugins/lib/CustomReplace';
 import { CutPasteListChain } from 'roosterjs-editor-plugins/lib/CutPasteListChain';
 import { EditorPlugin } from 'roosterjs-editor-types';
@@ -55,6 +56,8 @@ export default function getToggleablePlugins(initState: BuildInPluginState) {
                 ? createTableEditMenuProvider()
                 : null,
         contextMenu: pluginList.contextMenu ? createContextMenuPlugin() : null,
+        contentModelFormat: pluginList.contentModelFormat ? new ContentModelFormatPlugin() : null,
+        contentModelEdit: pluginList.contentModelEdit ? new ContentModelEditPlugin() : null,
     };
 
     return Object.values(plugins);

diff --git a/demo/scripts/controls/ribbonButtons/contentModel/setTableCellShadeButton.ts b/demo/scripts/controls/ribbonButtons/contentModel/setTableCellShadeButton.ts
@@ -17,7 +17,7 @@ export const setTableCellShadeButton: RibbonButton<
 > = {
     dropDownMenu: {
         ...originalBackgroundColorButton.dropDownMenu,
-        allowLivePreview: false,
+        allowLivePreview: true,
     },
     key: 'ribbonButtonSetTableCellShade',
     unlocalizedText: 'Set table shade color',

diff --git a/demo/scripts/controls/sidePane/editorOptions/ContentEditFeatures.tsx b/demo/scripts/controls/sidePane/editorOptions/ContentEditFeatures.tsx
@@ -53,6 +53,10 @@ const EditFeatureDescriptionMap: Record<keyof ContentEditFeatureSettings, string
         'Content edit feature to move the cursor from Delimiters around Entities when using Right or Left Arrow Keys',
     removeEntityBetweenDelimiters:
         'When using BACKSPACE or DELETE in a Readonly inline entity delimeter, trigger a Entity Operation',
+    removeCodeWhenEnterOnEmptyLine: 'Remove code line when enter on empty line',
+    removeCodeWhenBackspaceOnEmptyFirstLine: 'Remove code line when backspace on empty first line',
+    indentWhenAltShiftRight: 'Indent list item using Alt + Shift + Right',
+    outdentWhenAltShiftLeft: 'Outdent list item using Alt + Shift + Left',
 };
 
 export interface ContentEditFeaturessProps {

diff --git a/demo/scripts/controls/sidePane/editorOptions/EditorOptionsPlugin.ts b/demo/scripts/controls/sidePane/editorOptions/EditorOptionsPlugin.ts
@@ -21,6 +21,8 @@ const initialState: BuildInPluginState = {
         tableEditMenu: true,
         contextMenu: true,
         autoFormat: true,
+        contentModelFormat: true,
+        contentModelEdit: false,
     },
     contentEditFeatures: getDefaultContentEditFeatureSettings(),
     defaultFormat: {},

diff --git a/demo/scripts/controls/sidePane/editorOptions/Plugins.tsx b/demo/scripts/controls/sidePane/editorOptions/Plugins.tsx
@@ -61,6 +61,14 @@ export default class Plugins extends React.Component<PluginsProps, {}> {
                         'Show customized context menu for special cases'
                     )}
                     {this.renderPluginItem('tableCellSelection', 'Table Cell Selection')}
+                    {this.renderPluginItem(
+                        'contentModelFormat',
+                        'Handle pending format using Content Model'
+                    )}
+                    {this.renderPluginItem(
+                        'contentModelEdit',
+                        'Handle keyboard edit event using Content Model'
+                    )}
                 </tbody>
             </table>
         );

diff --git a/demo/scripts/controls/sidePane/editorOptions/getDefaultContentEditFeatureSettings.ts b/demo/scripts/controls/sidePane/editorOptions/getDefaultContentEditFeatureSettings.ts
@@ -2,10 +2,14 @@ import { ContentEditFeatureSettings } from 'roosterjs-editor-types';
 import { getAllFeatures } from 'roosterjs-editor-plugins/lib/ContentEdit';
 import { getObjectKeys } from 'roosterjs-editor-dom';
 
-export default function getDefaultContentEditFeatureSettings() {
+export default function getDefaultContentEditFeatureSettings(): ContentEditFeatureSettings {
     const allFeatures = getAllFeatures();
-    return getObjectKeys(allFeatures).reduce((settings, key) => {
-        settings[key] = !allFeatures[key].defaultDisabled;
-        return settings;
-    }, <ContentEditFeatureSettings>{});
+    return {
+        ...getObjectKeys(allFeatures).reduce((settings, key) => {
+            settings[key] = !allFeatures[key].defaultDisabled;
+            return settings;
+        }, <ContentEditFeatureSettings>{}),
+        indentWhenAltShiftRight: true,
+        outdentWhenAltShiftLeft: true,
+    };
 }
diff --git a/index.html b/index.html
@@ -18,8 +18,8 @@
     </head>
     <body>
         <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://cdnjs.cloudflare.com/ajax/libs/react/16.14.0/umd/react.production.min.js"></script>
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.14.0/umd/react-dom.production.min.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>

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

diff --git a/packages-ui/roosterjs-react/lib/pasteOptions/plugin/createPasteOptionPlugin.ts b/packages-ui/roosterjs-react/lib/pasteOptions/plugin/createPasteOptionPlugin.ts
@@ -142,6 +142,13 @@ class PasteOptionPlugin implements ReactEditorPlugin {
                         true /*applyCurrentFormat*/
                     );
                     break;
+                case 'pasteOptionPasteAsImage':
+                    this.editor.paste(
+                        this.clipboardData,
+                        false /*pasteAsText*/,
+                        false /*applyCurrentFormat*/,
+                        true /** pasteAsImage **/
+                    );
             }
 
             this.pasteOptionRef.current?.setSelectedKey(key);

diff --git a/packages-ui/roosterjs-react/lib/pasteOptions/type/PasteOptionStringKeys.ts b/packages-ui/roosterjs-react/lib/pasteOptions/type/PasteOptionStringKeys.ts
@@ -4,7 +4,8 @@
 export type PasteOptionButtonKeys =
     | 'pasteOptionPasteAsIs'
     | 'pasteOptionPasteText'
-    | 'pasteOptionMergeFormat';
+    | 'pasteOptionMergeFormat'
+    | 'pasteOptionPasteAsImage';
 
 /**
  * Localized string keys for Paste Option buttons and its UI component

diff --git a/packages-ui/roosterjs-react/lib/pasteOptions/utils/buttons.ts b/packages-ui/roosterjs-react/lib/pasteOptions/utils/buttons.ts
@@ -28,6 +28,11 @@ export const Buttons: Record<PasteOptionButtonKeys, PasteOptionButtonType> = {
         shortcut: 'M',
         icon: 'ClipboardList',
     },
+    pasteOptionPasteAsImage: {
+        unlocalizedText: 'Paste as image',
+        shortcut: 'I',
+        icon: 'PictureFill',
+    },
 };
 
 /**

diff --git a/packages/roosterjs-content-model/lib/domToModel/context/defaultProcessors.ts b/packages/roosterjs-content-model/lib/domToModel/context/defaultProcessors.ts
@@ -5,13 +5,13 @@ import { elementProcessor } from '../processors/elementProcessor';
 import { ElementProcessorMap } from '../../publicTypes/context/DomToModelSettings';
 import { entityProcessor } from '../processors/entityProcessor';
 import { fontProcessor } from '../processors/fontProcessor';
+import { formatContainerProcessor, quoteProcessor } from '../processors/formatContainerProcessor';
 import { generalProcessor } from '../processors/generalProcessor';
 import { hrProcessor } from '../processors/hrProcessor';
 import { imageProcessor } from '../processors/imageProcessor';
 import { knownElementProcessor } from '../processors/knownElementProcessor';
 import { listItemProcessor } from '../processors/listItemProcessor';
 import { listProcessor } from '../processors/listProcessor';
-import { quoteProcessor } from '../processors/quoteProcessor';
 import { tableProcessor } from '../processors/tableProcessor';
 import { textProcessor } from '../processors/textProcessor';
 
@@ -40,7 +40,7 @@ export const defaultProcessorMap: ElementProcessorMap = {
     li: listItemProcessor,
     ol: listProcessor,
     p: knownElementProcessor,
-    pre: knownElementProcessor,
+    pre: formatContainerProcessor,
     s: knownElementProcessor,
     span: knownElementProcessor,
     strike: knownElementProcessor,