Merge pull request #1796 from microsoft/u/biwu/versionbump_8_46_1

U/biwu/versionbump 8 46 1
microsoft · May 12, 2023 · 3862e3b · 3862e3b
2 parents 6ebd1e8 + b7ed811
commit 3862e3b
Show file tree

Hide file tree

Showing 279 changed files with 11,823 additions and 4,886 deletions.
diff --git a/demo/scripts/controls/BuildInPluginState.ts b/demo/scripts/controls/BuildInPluginState.ts
@@ -22,8 +22,7 @@ export interface BuildInPluginList {
     tableEditMenu: boolean;
     contextMenu: boolean;
     autoFormat: boolean;
-    contentModelFormat: boolean;
-    contentModelEdit: boolean;
+    contentModelPaste: boolean;
 }
 
 export default interface BuildInPluginState {

diff --git a/demo/scripts/controls/MainPane.tsx b/demo/scripts/controls/MainPane.tsx
@@ -383,20 +383,22 @@ class MainPane extends MainPaneBase {
         return (
             <div className={styles.editorContainer}>
                 <div style={editorStyles}>
-                    <Rooster
-                        className={styles.editor}
-                        plugins={allPlugins}
-                        defaultFormat={this.state.initState.defaultFormat}
-                        inDarkMode={this.state.isDarkMode}
-                        getDarkColor={getDarkColor}
-                        experimentalFeatures={this.state.initState.experimentalFeatures}
-                        undoMetadataSnapshotService={this.snapshotPlugin.getSnapshotService()}
-                        trustedHTMLHandler={trustedHTMLHandler}
-                        zoomScale={this.state.scale}
-                        initialContent={this.content}
-                        editorCreator={this.state.editorCreator}
-                        dir={this.state.isRtl ? 'rtl' : 'ltr'}
-                    />
+                    {this.state.editorCreator && (
+                        <Rooster
+                            className={styles.editor}
+                            plugins={allPlugins}
+                            defaultFormat={this.state.initState.defaultFormat}
+                            inDarkMode={this.state.isDarkMode}
+                            getDarkColor={getDarkColor}
+                            experimentalFeatures={this.state.initState.experimentalFeatures}
+                            undoMetadataSnapshotService={this.snapshotPlugin.getSnapshotService()}
+                            trustedHTMLHandler={trustedHTMLHandler}
+                            zoomScale={this.state.scale}
+                            initialContent={this.content}
+                            editorCreator={this.state.editorCreator}
+                            dir={this.state.isRtl ? 'rtl' : 'ltr'}
+                        />
+                    )}
                 </div>
             </div>
         );

diff --git a/demo/scripts/controls/contentModel/components/ContentModelView.tsx b/demo/scripts/controls/contentModel/components/ContentModelView.tsx
@@ -1,10 +1,16 @@
 import * as React from 'react';
 import { ButtonGroup } from './ButtonGroup';
 import { ContentModelJson } from './model/ContentModelJson';
-import { ContentModelWithDataset, DatasetFormat } from 'roosterjs-content-model';
 import { css } from '@fluentui/react/lib/Utilities';
 import { getObjectKeys } from 'roosterjs-editor-dom';
 import { useProperty } from '../hooks/useProperty';
+import {
+    ContentModelBlockWithCache,
+    ContentModelEntity,
+    ContentModelGeneralBlock,
+    ContentModelWithDataset,
+    DatasetFormat,
+} from 'roosterjs-content-model';
 
 const styles = require('./ContentModelView.scss');
 const MetadataKey = 'editingInfo';
@@ -36,6 +42,7 @@ export function ContentModelView(props: {
     const [bodyState, setBodyState] = useProperty<
         'collapsed' | 'children' | 'format' | 'json' | 'dataset'
     >(isExpanded ? 'children' : 'collapsed');
+    const highlightBorder = React.useRef<HTMLElement>(null);
 
     const toggleVisual = React.useCallback(() => {
         setBodyState(bodyState == 'children' ? 'collapsed' : 'children');
@@ -53,14 +60,64 @@ export function ContentModelView(props: {
         setBodyState(bodyState == 'dataset' ? 'collapsed' : 'dataset');
     }, [bodyState]);
 
+    const getCachedElement = React.useCallback(() => {
+        return (
+            (jsonSource as ContentModelBlockWithCache)?.cachedElement ||
+            (jsonSource as ContentModelGeneralBlock)?.element ||
+            (jsonSource as ContentModelEntity)?.wrapper
+        );
+    }, [jsonSource]);
+    const onMouseOver = React.useCallback(
+        (e: React.MouseEvent) => {
+            const cachedElement = getCachedElement();
+            const doc = cachedElement?.ownerDocument;
+
+            if (cachedElement && doc) {
+                onMouseOut();
+
+                const rect = cachedElement.getBoundingClientRect();
+                const div = doc.createElement('div');
+
+                if (div) {
+                    div.style.position = 'fixed';
+                    div.style.zIndex = '10000';
+                    div.style.left = rect.left + 'px';
+                    div.style.top = rect.top + 'px';
+                    div.style.width = rect.width + 'px';
+                    div.style.height = rect.height + 'px';
+                    div.style.border = 'solid 2px #8888ff';
+                    div.style.boxSizing = 'border-box';
+                    doc.body.appendChild(div);
+
+                    highlightBorder.current = div;
+                }
+
+                e.stopPropagation();
+            }
+        },
+        [getCachedElement]
+    );
+    const onMouseOut = React.useCallback(() => {
+        if (highlightBorder.current) {
+            highlightBorder.current.parentNode?.removeChild(highlightBorder.current);
+            highlightBorder.current = null;
+        }
+    }, [getCachedElement]);
+
     const dataset = (jsonSource as ContentModelWithDataset<any>).dataset;
 
+    React.useEffect(() => () => {
+        onMouseOut();
+    });
+
     return (
         <div
             className={css(styles.modelWrapper, className, {
                 [styles.childSelected]: hasSelection,
                 [styles.selected]: isSelection,
-            })}>
+            })}
+            onMouseOver={onMouseOver}
+            onMouseOut={onMouseOut}>
             <div className={styles.titleBar}>
                 <div
                     className={css(styles.title, {

diff --git a/demo/scripts/controls/contentModel/components/format/BlockFormatView.tsx b/demo/scripts/controls/contentModel/components/format/BlockFormatView.tsx
@@ -2,17 +2,21 @@ import * as React from 'react';
 import { BackgroundColorFormatRenderer } from './formatPart/BackgroundColorFormatRenderer';
 import { BorderFormatRenderers } from './formatPart/BorderFormatRenderers';
 import { ContentModelBlockFormat, ContentModelSegmentFormat } from 'roosterjs-content-model';
-import { DirectionFormatRenderers } from './formatPart/DirectionFormatRenderers';
+import { DirectionFormatRenderer } from './formatPart/DirectionFormatRenderer';
 import { FormatRenderer } from './utils/FormatRenderer';
 import { FormatView } from './FormatView';
+import { HtmlAlignFormatRenderer } from './formatPart/HtmlAlignFormatRenderer';
 import { LineHeightFormatRenderer } from './formatPart/LineHeightFormatRenderer';
 import { MarginFormatRenderer } from './formatPart/MarginFormatRenderer';
 import { PaddingFormatRenderer } from './formatPart/PaddingFormatRenderer';
+import { TextAlignFormatRenderer } from './formatPart/TextAlignFormatRenderer';
 import { WhiteSpaceFormatRenderer } from './formatPart/WhiteSpaceFormatRenderer';
 
 const BlockFormatRenders: FormatRenderer<ContentModelBlockFormat>[] = [
     BackgroundColorFormatRenderer,
-    ...DirectionFormatRenderers,
+    DirectionFormatRenderer,
+    TextAlignFormatRenderer,
+    HtmlAlignFormatRenderer,
     MarginFormatRenderer,
     PaddingFormatRenderer,
     LineHeightFormatRenderer,

diff --git a/demo/scripts/controls/contentModel/components/format/LinkFormatView.tsx b/demo/scripts/controls/contentModel/components/format/LinkFormatView.tsx
@@ -1,8 +1,11 @@
 import * as React from 'react';
 import { ContentModelHyperLinkFormat, LinkFormat } from 'roosterjs-content-model';
 import { createTextFormatRenderer } from './utils/createTextFormatRenderer';
+import { DisplayFormatRenderer } from './formatPart/DisplayFormatRenderer';
 import { FormatRenderer } from './utils/FormatRenderer';
 import { FormatView } from './FormatView';
+import { MarginFormatRenderer } from './formatPart/MarginFormatRenderer';
+import { PaddingFormatRenderer } from './formatPart/PaddingFormatRenderer';
 import { TextColorFormatRenderer } from './formatPart/TextColorFormatRenderer';
 import { UnderlineFormatRenderer } from './formatPart/BasicFormatRenderers';
 
@@ -44,6 +47,9 @@ const LinkFormatRenderers: FormatRenderer<ContentModelHyperLinkFormat>[] = [
     ),
     TextColorFormatRenderer,
     UnderlineFormatRenderer,
+    DisplayFormatRenderer,
+    MarginFormatRenderer,
+    PaddingFormatRenderer,
 ];
 
 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
@@ -5,6 +5,8 @@ import { FontFamilyFormatRenderer } from './formatPart/FontFamilyFormatRenderer'
 import { FontSizeFormatRenderer } from './formatPart/FontSizeFormatRenderer';
 import { FormatRenderer } from './utils/FormatRenderer';
 import { FormatView } from './FormatView';
+import { LetterSpacingFormatRenderer } from './formatPart/LetterSpacingFormatRenderer';
+import { LineHeightFormatRenderer } from './formatPart/LineHeightFormatRenderer';
 import { TextColorFormatRenderer } from './formatPart/TextColorFormatRenderer';
 import {
     BoldFormatRenderer,
@@ -13,7 +15,6 @@ import {
     UnderlineFormatRenderer,
     SuperOrSubScriptFormatRenderer,
 } from './formatPart/BasicFormatRenderers';
-import { LineHeightFormatRenderer } from './formatPart/LineHeightFormatRenderer';
 
 const SegmentFormatRenders: FormatRenderer<ContentModelSegmentFormat>[] = [
     TextColorFormatRenderer,
@@ -26,6 +27,7 @@ const SegmentFormatRenders: FormatRenderer<ContentModelSegmentFormat>[] = [
     StrikeFormatRenderer,
     SuperOrSubScriptFormatRenderer,
     LineHeightFormatRenderer,
+    LetterSpacingFormatRenderer,
 ];
 
 export function SegmentFormatView(props: { format: ContentModelSegmentFormat }) {

diff --git a/demo/scripts/controls/contentModel/components/format/formatPart/DirectionFormatRenderer.ts b/demo/scripts/controls/contentModel/components/format/formatPart/DirectionFormatRenderer.ts
@@ -0,0 +1,9 @@
+import { createDropDownFormatRenderer } from '../utils/createDropDownFormatRenderer';
+import { DirectionFormat } from 'roosterjs-content-model';
+
+export const DirectionFormatRenderer = createDropDownFormatRenderer<DirectionFormat, 'ltr' | 'rtl'>(
+    'Direction',
+    ['ltr', 'rtl'],
+    format => format.direction,
+    (format, value) => (format.direction = value)
+);
diff --git a/demo/scripts/controls/contentModel/components/format/formatPart/DirectionFormatRenderers.ts b/demo/scripts/controls/contentModel/components/format/formatPart/DirectionFormatRenderers.ts
diff --git a/demo/scripts/controls/contentModel/components/format/formatPart/HtmlAlignFormatRenderer.ts b/demo/scripts/controls/contentModel/components/format/formatPart/HtmlAlignFormatRenderer.ts
@@ -0,0 +1,12 @@
+import { createDropDownFormatRenderer } from '../utils/createDropDownFormatRenderer';
+import { HtmlAlignFormat } from 'roosterjs-content-model';
+
+export const HtmlAlignFormatRenderer = createDropDownFormatRenderer<
+    HtmlAlignFormat,
+    'start' | 'center' | 'end' | 'justify' | 'initial'
+>(
+    'HTML align',
+    ['start', 'center', 'end'],
+    format => format.htmlAlign,
+    (format, value) => (format.htmlAlign = value)
+);
diff --git a/...scripts/controls/contentModel/components/format/formatPart/LetterSpacingFormatRenderer.ts b/...scripts/controls/contentModel/components/format/formatPart/LetterSpacingFormatRenderer.ts
@@ -0,0 +1,13 @@
+import { createTextFormatRenderer } from '../utils/createTextFormatRenderer';
+import { FormatRenderer } from '../utils/FormatRenderer';
+import { LetterSpacingFormat } from 'roosterjs-content-model';
+
+export const LetterSpacingFormatRenderer: FormatRenderer<LetterSpacingFormat> = createTextFormatRenderer<
+    LetterSpacingFormat
+>(
+    'Letter spacing',
+    format => format.letterSpacing,
+    (format, value) => {
+        format.letterSpacing = value;
+    }
+);
diff --git a/...pts/controls/contentModel/components/format/formatPart/ListStylePositionFormatRenderer.ts b/...pts/controls/contentModel/components/format/formatPart/ListStylePositionFormatRenderer.ts
@@ -0,0 +1,10 @@
+import { createDropDownFormatRenderer } from '../utils/createDropDownFormatRenderer';
+import { FormatRenderer } from '../utils/FormatRenderer';
+import { ListStylePositionFormat } from 'roosterjs-content-model';
+
+export const ListStylePositionFormatRenderer: FormatRenderer<ListStylePositionFormat> = createDropDownFormatRenderer(
+    'List Type',
+    ['inside', 'outside'],
+    format => format.listStylePosition,
+    (format, value) => (format.listStylePosition = value)
+);
diff --git a/demo/scripts/controls/contentModel/components/format/formatPart/TextAlignFormatRenderer.ts b/demo/scripts/controls/contentModel/components/format/formatPart/TextAlignFormatRenderer.ts
@@ -0,0 +1,12 @@
+import { createDropDownFormatRenderer } from '../utils/createDropDownFormatRenderer';
+import { TextAlignFormat } from 'roosterjs-content-model';
+
+export const TextAlignFormatRenderer = createDropDownFormatRenderer<
+    TextAlignFormat,
+    'start' | 'center' | 'end' | 'justify' | 'initial'
+>(
+    'Text align',
+    ['start', 'center', 'end'],
+    format => format.textAlign,
+    (format, value) => (format.textAlign = value)
+);
diff --git a/demo/scripts/controls/contentModel/components/model/ContentModelCodeView.tsx b/demo/scripts/controls/contentModel/components/model/ContentModelCodeView.tsx
@@ -1,16 +1,23 @@
 import * as React from 'react';
-import { ContentModelCode } from 'roosterjs-content-model';
+import { ContentModelCode, ContentModelCodeFormat } from 'roosterjs-content-model';
 import { ContentModelView } from '../ContentModelView';
+import { DisplayFormatRenderer } from '../format/formatPart/DisplayFormatRenderer';
 import { FontFamilyFormatRenderer } from '../format/formatPart/FontFamilyFormatRenderer';
+import { FormatRenderer } from '../format/utils/FormatRenderer';
 import { FormatView } from '../format/FormatView';
 
+const CodeRenderers: FormatRenderer<ContentModelCodeFormat>[] = [
+    FontFamilyFormatRenderer,
+    DisplayFormatRenderer,
+];
+
 const styles = require('./ContentModelCodeView.scss');
 
 export function ContentModelCodeView(props: { code: ContentModelCode }) {
     const { code } = props;
 
     const getFormat = React.useCallback(() => {
-        return <FormatView format={code.format} renderers={[FontFamilyFormatRenderer]} />;
+        return <FormatView format={code.format} renderers={CodeRenderers} />;
     }, [code.format]);
 
     return (

diff --git a/demo/scripts/controls/contentModel/components/model/ContentModelDividerView.tsx b/demo/scripts/controls/contentModel/components/model/ContentModelDividerView.tsx
@@ -3,7 +3,7 @@ import { BackgroundColorFormatRenderer } from '../format/formatPart/BackgroundCo
 import { BorderFormatRenderers } from '../format/formatPart/BorderFormatRenderers';
 import { ContentModelDivider, ContentModelDividerFormat } from 'roosterjs-content-model';
 import { ContentModelView } from '../ContentModelView';
-import { DirectionFormatRenderers } from '../format/formatPart/DirectionFormatRenderers';
+import { DirectionFormatRenderer } from '../format/formatPart/DirectionFormatRenderer';
 import { DisplayFormatRenderer } from '../format/formatPart/DisplayFormatRenderer';
 import { FormatRenderer } from '../format/utils/FormatRenderer';
 import { FormatView } from '../format/FormatView';
@@ -17,7 +17,7 @@ import { WhiteSpaceFormatRenderer } from '../format/formatPart/WhiteSpaceFormatR
 const styles = require('./ContentModelDividerView.scss');
 const DividerFormatRenders: FormatRenderer<ContentModelDividerFormat>[] = [
     BackgroundColorFormatRenderer,
-    ...DirectionFormatRenderers,
+    DirectionFormatRenderer,
     MarginFormatRenderer,
     PaddingFormatRenderer,
     LineHeightFormatRenderer,

diff --git a/demo/scripts/controls/contentModel/components/model/ContentModelFormatContainerView.tsx b/demo/scripts/controls/contentModel/components/model/ContentModelFormatContainerView.tsx
@@ -1,12 +1,25 @@
 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 { DisplayFormatRenderer } from '../format/formatPart/DisplayFormatRenderer';
+import { FormatRenderer } from '../format/utils/FormatRenderer';
+import { FormatView } from '../format/FormatView';
 import { SegmentFormatView } from '../format/SegmentFormatView';
+import { SizeFormatRenderers } from '../format/formatPart/SizeFormatRenderers';
+import {
+    ContentModelFormatContainer,
+    ContentModelFormatContainerFormat,
+    hasSelectionInBlock,
+} from 'roosterjs-content-model';
 
 const styles = require('./ContentModelFormatContainerView.scss');
 
+const FormatContainerFormatRenderers: FormatRenderer<ContentModelFormatContainerFormat>[] = [
+    ...SizeFormatRenderers,
+    DisplayFormatRenderer,
+];
+
 export function ContentModelFormatContainerView(props: { container: ContentModelFormatContainer }) {
     const { container } = props;
     const getContent = React.useCallback(() => {
@@ -18,6 +31,7 @@ export function ContentModelFormatContainerView(props: { container: ContentModel
             <>
                 <BlockFormatView format={container.format} />
                 <SegmentFormatView format={container.format} />
+                <FormatView format={container.format} renderers={FormatContainerFormatRenderers} />
             </>
         );
     }, [container]);