Merge pull request #1251 from microsoft/romasha/versionbump9-9-22

Romasha/versionbump9 9 22

demo/scripts/controls/contentModel/components/format/SegmentFormatView.tsx

@@ -0,0 +1,32 @@
+import * as React from 'react';
+import { BackgroundColorFormatRenderer } from './formatPart/BackgroundColorFormatRenderer';
+import { ContentModelSegmentFormat } from 'roosterjs-content-model';
+import { FontFamilyFormatRenderer } from './formatPart/FontFamilyFormatRenderer';
+import { FontSizeFormatRenderer } from './formatPart/FontSizeFormatRenderer';
+import { FormatRenderer } from './utils/FormatRenderer';
+import { FormatView } from './FormatView';
+import { TextColorFormatRenderer } from './formatPart/TextColorFormatRenderer';
+import {
+    BoldFormatRenderer,
+    ItalicFormatRenderer,
+    StrikeFormatRenderer,
+    UnderlineFormatRenderer,
+    SuperOrSubScriptFormatRenderer,
+} from './formatPart/BasicFormatRenderers';
+
+const SegmentFormatRenders: FormatRenderer<ContentModelSegmentFormat>[] = [
+    TextColorFormatRenderer,
+    BackgroundColorFormatRenderer,
+    FontSizeFormatRenderer,
+    FontFamilyFormatRenderer,
+    BoldFormatRenderer,
+    ItalicFormatRenderer,
+    UnderlineFormatRenderer,
+    StrikeFormatRenderer,
+    SuperOrSubScriptFormatRenderer,
+];
+
+export function SegmentFormatView(props: { format: ContentModelSegmentFormat }) {
+    const { format } = props;
+    return <FormatView format={format} renderers={SegmentFormatRenders} />;
+}

demo/scripts/controls/contentModel/components/format/formatPart/BasicFormatRenderers.ts

@@ -0,0 +1,50 @@
+import { createCheckboxFormatRenderer } from '../utils/createCheckboxFormatRenderer';
+import { createTextFormatRenderer } from '../utils/createTextFormatRenderer';
+import { FormatRenderer } from '../utils/FormatRenderer';
+import {
+    BoldFormat,
+    ItalicFormat,
+    StrikeFormat,
+    SuperOrSubScriptFormat,
+    UnderlineFormat,
+} from 'roosterjs-content-model';
+
+export const BoldFormatRenderer: FormatRenderer<BoldFormat> = createCheckboxFormatRenderer<
+    BoldFormat
+>(
+    'Bold',
+    format => format.bold,
+    (format, value) => (format.bold = value)
+);
+
+export const ItalicFormatRenderer: FormatRenderer<ItalicFormat> = createCheckboxFormatRenderer<
+    ItalicFormat
+>(
+    'Italic',
+    format => format.italic,
+    (format, value) => (format.italic = value)
+);
+
+export const UnderlineFormatRenderer: FormatRenderer<UnderlineFormat> = createCheckboxFormatRenderer<
+    UnderlineFormat
+>(
+    'Underline',
+    format => format.underline,
+    (format, value) => (format.underline = value)
+);
+
+export const StrikeFormatRenderer: FormatRenderer<StrikeFormat> = createCheckboxFormatRenderer<
+    StrikeFormat
+>(
+    'Strike',
+    format => format.strikethrough,
+    (format, value) => (format.strikethrough = value)
+);
+
+export const SuperOrSubScriptFormatRenderer: FormatRenderer<SuperOrSubScriptFormat> = createTextFormatRenderer<
+    SuperOrSubScriptFormat
+>(
+    'SuperOrSubScript',
+    format => format.superOrSubScriptSequence,
+    (format, value) => (format.superOrSubScriptSequence = value)
+);

demo/scripts/controls/contentModel/components/format/formatPart/FontFamilyFormatRenderer.ts

@@ -0,0 +1,14 @@
+import { createTextFormatRenderer } from '../utils/createTextFormatRenderer';
+import { FontFamilyFormat } from 'roosterjs-content-model';
+import { FormatRenderer } from '../utils/FormatRenderer';
+
+export const FontFamilyFormatRenderer: FormatRenderer<FontFamilyFormat> = createTextFormatRenderer<
+    FontFamilyFormat
+>(
+    'Font family',
+    format => format.fontFamily,
+    (format, value) => {
+        format.fontFamily = value;
+        return undefined;
+    }
+);

demo/scripts/controls/contentModel/components/format/formatPart/FontSizeFormatRenderer.ts

@@ -0,0 +1,14 @@
+import { createTextFormatRenderer } from '../utils/createTextFormatRenderer';
+import { FontSizeFormat } from 'roosterjs-content-model';
+import { FormatRenderer } from '../utils/FormatRenderer';
+
+export const FontSizeFormatRenderer: FormatRenderer<FontSizeFormat> = createTextFormatRenderer<
+    FontSizeFormat
+>(
+    'Font size',
+    format => format.fontSize,
+    (format, value) => {
+        format.fontSize = value;
+        return undefined;
+    }
+);

demo/scripts/controls/contentModel/components/format/formatPart/TextColorFormatRenderer.ts

@@ -0,0 +1,15 @@
+import * as Color from 'color';
+import { createColorFormatRenderer } from '../utils/createColorFormatRender';
+import { FormatRenderer } from '../utils/FormatRenderer';
+import { TextColorFormat } from 'roosterjs-content-model';
+
+export const TextColorFormatRenderer: FormatRenderer<TextColorFormat> = createColorFormatRenderer<
+    TextColorFormat
+>(
+    'Text color',
+    format => (format.textColor ? Color(format.textColor).hex() : ''),
+    (format, value) => {
+        format.textColor = value;
+        return undefined;
+    }
+);

demo/scripts/controls/contentModel/components/model/ContentModelBlockGroupView.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { ContentModelBlockGroup, ContentModelBlockGroupType } from 'roosterjs-content-model';
+import { ContentModelBlockGroup } from 'roosterjs-content-model';
 import { ContentModelDocumentView } from './ContentModelDocumentView';
 import { ContentModelGeneralView } from './ContentModelGeneralView';
 import { ContentModelTableCellView } from './ContentModelTableCellView';
@@ -8,13 +8,13 @@ export function ContentModelBlockGroupView(props: { group: ContentModelBlockGrou
     const { group } = props;
 
     switch (group.blockGroupType) {
-        case ContentModelBlockGroupType.Document:
+        case 'Document':
             return <ContentModelDocumentView doc={group} />;
 
-        case ContentModelBlockGroupType.General:
+        case 'General':
             return <ContentModelGeneralView model={group} />;
 
-        case ContentModelBlockGroupType.TableCell:
+        case 'TableCell':
             return <ContentModelTableCellView cell={group} />;
     }
 }

demo/scripts/controls/contentModel/components/model/ContentModelBlockView.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { ContentModelBlock, ContentModelBlockType } from 'roosterjs-content-model';
+import { ContentModelBlock } from 'roosterjs-content-model';
 import { ContentModelBlockGroupView } from './ContentModelBlockGroupView';
 import { ContentModelParagraphView } from './ContentModelParagraphView';
 import { ContentModelTableView } from './ContentModelTableView';
@@ -8,13 +8,13 @@ export function ContentModelBlockView(props: { block: ContentModelBlock }) {
     const { block } = props;
 
     switch (block.blockType) {
-        case ContentModelBlockType.BlockGroup:
+        case 'BlockGroup':
             return <ContentModelBlockGroupView group={block} />;
 
-        case ContentModelBlockType.Paragraph:
+        case 'Paragraph':
             return <ContentModelParagraphView paragraph={block} />;
 
-        case ContentModelBlockType.Table:
+        case 'Table':
             return <ContentModelTableView table={block} />;
     }
 }

demo/scripts/controls/contentModel/components/model/ContentModelBrView.tsx

@@ -1,18 +1,23 @@
 import * as React from 'react';
 import { ContentModelBr } from 'roosterjs-content-model';
 import { ContentModelView } from '../ContentModelView';
+import { SegmentFormatView } from '../format/SegmentFormatView';
 
 const styles = require('./ContentModelBrView.scss');
 
 export function ContentModelBrView(props: { br: ContentModelBr }) {
     const { br } = props;
+    const getFormat = React.useCallback(() => {
+        return <SegmentFormatView format={br.format} />;
+    }, [br.format]);
 
     return (
         <ContentModelView
             title="BR"
             className={styles.modelBr}
             isSelected={br.isSelected}
             jsonSource={br}
+            getFormat={getFormat}
         />
     );
 }

demo/scripts/controls/contentModel/components/model/ContentModelGeneralView.tsx

@@ -1,21 +1,26 @@
 import * as React from 'react';
 import { BlockGroupContentView } from './BlockGroupContentView';
 import { ContentModelView } from '../ContentModelView';
+import { SegmentFormatView } from '../format/SegmentFormatView';
 import {
     ContentModelGeneralBlock,
     ContentModelGeneralSegment,
-    ContentModelSegmentType,
     hasSelectionInBlock,
 } from 'roosterjs-content-model';
 
 const styles = require('./ContentModelGeneralView.scss');
 
 export function ContentModelGeneralView(props: { model: ContentModelGeneralBlock }) {
     const { model } = props;
+    const segment = isGeneralSegment(model) ? model : undefined;
     const getContent = React.useCallback(() => {
         return <BlockGroupContentView group={model} />;
     }, [model]);
 
+    const getFormat = React.useCallback(() => {
+        return <SegmentFormatView format={segment!.format} />;
+    }, [segment?.format]);
+
     return (
         <ContentModelView
             title="General"
@@ -25,10 +30,11 @@ export function ContentModelGeneralView(props: { model: ContentModelGeneralBlock
             isSelected={isGeneralSegment(model) ? model.isSelected : false}
             jsonSource={model}
             getContent={getContent}
+            getFormat={segment ? getFormat : undefined}
         />
     );
 }
 
 function isGeneralSegment(block: ContentModelGeneralBlock): block is ContentModelGeneralSegment {
-    return (block as ContentModelGeneralSegment).segmentType == ContentModelSegmentType.General;
+    return (block as ContentModelGeneralSegment).segmentType == 'General';
 }

demo/scripts/controls/contentModel/components/model/ContentModelJson.tsx

@@ -1,10 +1,5 @@
 import * as React from 'react';
 import { safeInstanceOf } from 'roosterjs-editor-dom';
-import {
-    CompatibleContentModelBlockGroupType,
-    CompatibleContentModelBlockType,
-    CompatibleContentModelSegmentType,
-} from 'roosterjs-content-model/lib/compatibleTypes';
 
 const styles = require('./ContentModelJson.scss');
 
@@ -21,12 +16,6 @@ export function ContentModelJson(props: { jsonSource: Object }) {
                 );
             } else if (safeInstanceOf(value, 'Node')) {
                 return Object.prototype.toString.apply(value);
-            } else if (key == 'blockType') {
-                return CompatibleContentModelBlockType[value];
-            } else if (key == 'blockGroupType') {
-                return CompatibleContentModelBlockGroupType[value];
-            } else if (key == 'segmentType') {
-                return CompatibleContentModelSegmentType[value];
             } else if (key == 'src' && typeof value == 'string') {
                 return value.length > 100 ? value.substring(0, 97) + '...' : value;
             } else {

demo/scripts/controls/contentModel/components/model/ContentModelSegmentView.tsx

@@ -1,24 +1,24 @@
 import * as React from 'react';
 import { ContentModelBrView } from './ContentModelBrView';
 import { ContentModelGeneralView } from './ContentModelGeneralView';
-import { ContentModelSegment, ContentModelSegmentType } from 'roosterjs-content-model';
+import { ContentModelSegment } from 'roosterjs-content-model';
 import { ContentModelSelectionMarkerView } from './ContentModelSelectionMarkerView';
 import { ContentModelTextView } from './ContentModelTextView';
 
 export function ContentModelSegmentView(props: { segment: ContentModelSegment }) {
     const { segment } = props;
 
     switch (segment.segmentType) {
-        case ContentModelSegmentType.Br:
+        case 'Br':
             return <ContentModelBrView br={segment} />;
 
-        case ContentModelSegmentType.General:
+        case 'General':
             return <ContentModelGeneralView model={segment} />;
 
-        case ContentModelSegmentType.SelectionMarker:
+        case 'SelectionMarker':
             return <ContentModelSelectionMarkerView marker={segment} />;
 
-        case ContentModelSegmentType.Text:
+        case 'Text':
             return <ContentModelTextView text={segment} />;
     }
 }

demo/scripts/controls/contentModel/components/model/ContentModelSelectionMarkerView.tsx

@@ -1,18 +1,24 @@
 import * as React from 'react';
 import { ContentModelSelectionMarker } from 'roosterjs-content-model';
 import { ContentModelView } from '../ContentModelView';
+import { SegmentFormatView } from '../format/SegmentFormatView';
 
 const styles = require('./ContentModelSelectionMarkerView.scss');
 
 export function ContentModelSelectionMarkerView(props: { marker: ContentModelSelectionMarker }) {
     const { marker } = props;
 
+    const getFormat = React.useCallback(() => {
+        return <SegmentFormatView format={marker.format} />;
+    }, [marker.format]);
+
     return (
         <ContentModelView
             title="SelectionMarker"
             className={styles.modelSelectionMarker}
             isSelected={true}
             jsonSource={marker}
+            getFormat={getFormat}
         />
     );
 }

demo/scripts/controls/contentModel/components/model/ContentModelTextView.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { ContentModelText } from 'roosterjs-content-model';
 import { ContentModelView } from '../ContentModelView';
+import { SegmentFormatView } from '../format/SegmentFormatView';
 import { useProperty } from '../../hooks/useProperty';
 
 const styles = require('./ContentModelTextView.scss');
@@ -20,6 +21,10 @@ export function ContentModelTextView(props: { text: ContentModelText }) {
         return <textarea ref={textArea} onChange={onChange} value={value} />;
     }, [text, value]);
 
+    const getFormat = React.useCallback(() => {
+        return <SegmentFormatView format={text.format} />;
+    }, [text.format]);
+
     return (
         <ContentModelView
             title="Text"
@@ -28,6 +33,7 @@ export function ContentModelTextView(props: { text: ContentModelText }) {
             isSelected={text.isSelected}
             jsonSource={text}
             getContent={getContent}
+            getFormat={getFormat}
         />
     );
 }

demo/scripts/controls/editor/isContentModelEditor.ts

@@ -6,5 +6,5 @@ export default function isContentModelEditor(
 ): editor is IExperimentalContentModelEditor {
     const experimentalEditor = editor as IExperimentalContentModelEditor;
 
-    return !!experimentalEditor.createContentModelContext;
+    return !!experimentalEditor.createContentModelContext && 'contentDiv' in experimentalEditor;
 }

package.json

@@ -1,6 +1,6 @@
 {
     "name": "roosterjs",
-    "version": "8.30.2",
+    "version": "8.31.0",
     "description": "Framework-independent javascript editor",
     "repository": {
         "type": "git",

packages-ui/roosterjs-react/lib/contextMenu/menus/createImageEditMenuProvider.tsx

@@ -23,7 +23,7 @@ const ImageAltTextMenuItem: ContextMenuItem<ImageEditMenuItemStringKey> = {
         showInputDialog(
             uiUtilities,
             'menuNameImageAltText',
-            'Set numbering value',
+            'Add alternate text',
             {
                 altText: {
                     labelKey: null,