Update Content Model demo view with missing types, formats and properties

demo/scripts/controlsV2/sidePane/contentModel/components/format/BlockFormatView.tsx

@@ -6,6 +6,7 @@ import { DirectionFormatRenderer } from './formatPart/DirectionFormatRenderer';
 import { FormatRenderer } from './utils/FormatRenderer';
 import { FormatView } from './FormatView';
 import { HtmlAlignFormatRenderer } from './formatPart/HtmlAlignFormatRenderer';
+import { IdFormatRenderer } from './formatPart/IdFormatRenderer';
 import { LineHeightFormatRenderer } from './formatPart/LineHeightFormatRenderer';
 import { MarginFormatRenderer } from './formatPart/MarginFormatRenderer';
 import { PaddingFormatRenderer } from './formatPart/PaddingFormatRenderer';
@@ -14,6 +15,7 @@ import { TextIndentFormatRenderer } from './formatPart/TextIndentFormatRenderer'
 import { WhiteSpaceFormatRenderer } from './formatPart/WhiteSpaceFormatRenderer';
 
 const BlockFormatRenders: FormatRenderer<ContentModelBlockFormat>[] = [
+    IdFormatRenderer,
     BackgroundColorFormatRenderer,
     DirectionFormatRenderer,
     TextAlignFormatRenderer,

demo/scripts/controlsV2/sidePane/contentModel/components/format/LinkFormatView.tsx

@@ -1,12 +1,17 @@
 import * as React from 'react';
+import { BackgroundColorFormatRenderer } from './formatPart/BackgroundColorFormatRenderer';
+import { BorderFormatRenderers } from './formatPart/BorderFormatRenderers';
 import { ContentModelHyperLinkFormat, LinkFormat } from 'roosterjs-content-model-types';
 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 { SizeFormatRenderers } from './formatPart/SizeFormatRenderers';
+import { TextAlignFormatRenderer } from './formatPart/TextAlignFormatRenderer';
 import { TextColorFormatRenderer } from './formatPart/TextColorFormatRenderer';
+import { UndeletableFormatRenderer } from './formatPart/UndeletableFormatRenderer';
 import { UnderlineFormatRenderer } from './formatPart/BasicFormatRenderers';
 
 const LinkFormatRenderers: FormatRenderer<ContentModelHyperLinkFormat>[] = [
@@ -46,10 +51,15 @@ const LinkFormatRenderers: FormatRenderer<ContentModelHyperLinkFormat>[] = [
         (format, value) => (format.relationship = value)
     ),
     TextColorFormatRenderer,
+    BackgroundColorFormatRenderer,
     UnderlineFormatRenderer,
     DisplayFormatRenderer,
+    TextAlignFormatRenderer,
     MarginFormatRenderer,
     PaddingFormatRenderer,
+    ...BorderFormatRenderers,
+    ...SizeFormatRenderers,
+    UndeletableFormatRenderer,
 ];
 
 export function LinkFormatView(props: { format: LinkFormat }) {

demo/scripts/controlsV2/sidePane/contentModel/components/format/formatPart/AriaFormatRenderers.ts

@@ -0,0 +1,16 @@
+import { AriaFormat } from 'roosterjs-content-model-types';
+import { createTextFormatRenderer } from '../utils/createTextFormatRenderer';
+import { FormatRenderer } from '../utils/FormatRenderer';
+
+export const AriaFormatRenderers: FormatRenderer<AriaFormat>[] = [
+    createTextFormatRenderer<AriaFormat>(
+        'AriaDescribedBy',
+        format => format.ariaDescribedBy,
+        (format, value) => (format.ariaDescribedBy = value)
+    ),
+    createTextFormatRenderer<AriaFormat>(
+        'Title',
+        format => format.title,
+        (format, value) => (format.title = value)
+    ),
+];

demo/scripts/controlsV2/sidePane/contentModel/components/format/formatPart/BoxShadowFormatRenderer.ts

@@ -0,0 +1,11 @@
+import { BoxShadowFormat } from 'roosterjs-content-model-types';
+import { createTextFormatRenderer } from '../utils/createTextFormatRenderer';
+import { FormatRenderer } from '../utils/FormatRenderer';
+
+export const BoxShadowFormatRenderer: FormatRenderer<BoxShadowFormat> = createTextFormatRenderer<
+    BoxShadowFormat
+>(
+    'BoxShadow',
+    format => format.boxShadow,
+    (format, value) => (format.boxShadow = value)
+);

demo/scripts/controlsV2/sidePane/contentModel/components/format/formatPart/DataValueFormatRenderer.ts

@@ -0,0 +1,11 @@
+import { createTextFormatRenderer } from '../utils/createTextFormatRenderer';
+import { DataValueFormat } from 'roosterjs-content-model-types';
+import { FormatRenderer } from '../utils/FormatRenderer';
+
+export const DataValueFormatRenderer: FormatRenderer<DataValueFormat> = createTextFormatRenderer<
+    DataValueFormat
+>(
+    'Data value',
+    format => format.dataValue,
+    (format, value) => (format.dataValue = value)
+);

demo/scripts/controlsV2/sidePane/contentModel/components/format/formatPart/ImageStateFormatRenderer.ts

@@ -0,0 +1,11 @@
+import { createTextFormatRenderer } from '../utils/createTextFormatRenderer';
+import { FormatRenderer } from '../utils/FormatRenderer';
+import { ImageStateFormat } from 'roosterjs-content-model-types';
+
+export const ImageStateFormatRenderer: FormatRenderer<ImageStateFormat> = createTextFormatRenderer<
+    ImageStateFormat
+>(
+    'ImageState',
+    format => format.imageState,
+    (format, value) => (format.imageState = value)
+);

demo/scripts/controlsV2/sidePane/contentModel/components/format/formatPart/LegacyTableBorderFormatRenderers.ts

@@ -0,0 +1,21 @@
+import { createTextFormatRenderer } from '../utils/createTextFormatRenderer';
+import { FormatRenderer } from '../utils/FormatRenderer';
+import { LegacyTableBorderFormat } from 'roosterjs-content-model-types';
+
+export const LegacyTableBorderFormatRenderers: FormatRenderer<LegacyTableBorderFormat>[] = [
+    createTextFormatRenderer<LegacyTableBorderFormat>(
+        'LegacyTableBorder',
+        format => format.legacyTableBorder,
+        (format, value) => (format.legacyTableBorder = value)
+    ),
+    createTextFormatRenderer<LegacyTableBorderFormat>(
+        'CellSpacing',
+        format => format.cellSpacing,
+        (format, value) => (format.cellSpacing = value)
+    ),
+    createTextFormatRenderer<LegacyTableBorderFormat>(
+        'CellPadding',
+        format => format.cellPadding,
+        (format, value) => (format.cellPadding = value)
+    ),
+];

demo/scripts/controlsV2/sidePane/contentModel/components/format/formatPart/RoleFormatRenderer.ts

@@ -0,0 +1,9 @@
+import { createTextFormatRenderer } from '../utils/createTextFormatRenderer';
+import { FormatRenderer } from '../utils/FormatRenderer';
+import { RoleFormat } from 'roosterjs-content-model-types';
+
+export const RoleFormatRenderer: FormatRenderer<RoleFormat> = createTextFormatRenderer<RoleFormat>(
+    'Role',
+    format => format.role,
+    (format, value) => (format.role = value)
+);

demo/scripts/controlsV2/sidePane/contentModel/components/format/formatPart/UndeletableFormatRenderer.ts

@@ -0,0 +1,11 @@
+import { createCheckboxFormatRenderer } from '../utils/createCheckboxFormatRenderer';
+import { FormatRenderer } from '../utils/FormatRenderer';
+import { UndeletableFormat } from 'roosterjs-content-model-types';
+
+export const UndeletableFormatRenderer: FormatRenderer<UndeletableFormat> = createCheckboxFormatRenderer<
+    UndeletableFormat
+>(
+    'Undeletable',
+    format => format.undeletable,
+    (format, value) => (format.undeletable = value)
+);

demo/scripts/controlsV2/sidePane/contentModel/components/model/ContentModelDataView.scss

@@ -0,0 +1,3 @@
+.modelData {
+    background-color: #609;
+}

demo/scripts/controlsV2/sidePane/contentModel/components/model/ContentModelDataView.tsx

@@ -0,0 +1,28 @@
+import * as React from 'react';
+import { ContentModelData, ContentModelDataFormat } from 'roosterjs-content-model-types';
+import { ContentModelView } from '../ContentModelView';
+import { DataValueFormatRenderer } from '../format/formatPart/DataValueFormatRenderer';
+import { FormatRenderer } from '../format/utils/FormatRenderer';
+import { FormatView } from '../format/FormatView';
+
+const DataRenderers: FormatRenderer<ContentModelDataFormat>[] = [DataValueFormatRenderer];
+
+const styles = require('./ContentModelDataView.scss');
+
+export function ContentModelDataView(props: { data: ContentModelData }) {
+    const { data } = props;
+
+    const getFormat = React.useCallback(() => {
+        return <FormatView format={data.format} renderers={DataRenderers} />;
+    }, [data.format]);
+
+    return (
+        <ContentModelView
+            title="Data"
+            subTitle={data.format.dataValue}
+            className={styles.modelData}
+            jsonSource={data}
+            getFormat={getFormat}
+        />
+    );
+}

demo/scripts/controlsV2/sidePane/contentModel/components/model/ContentModelEntityView.tsx

@@ -12,10 +12,12 @@ export function ContentModelEntityView(props: { entity: ContentModelEntity }) {
 
     const [id, setId] = useProperty(entity.entityFormat.id);
     const [isReadonly, setIsReadonly] = useProperty(entity.entityFormat.isReadonly);
+    const [isFakeEntity, setIsFakeEntity] = useProperty(entity.entityFormat.isFakeEntity);
     const [type, setType] = useProperty(entity.entityFormat.entityType);
 
     const idTextBox = React.useRef<HTMLInputElement>(null);
     const isReadonlyCheckBox = React.useRef<HTMLInputElement>(null);
+    const isFakeEntityCheckBox = React.useRef<HTMLInputElement>(null);
     const typeTextBox = React.useRef<HTMLInputElement>(null);
 
     const onIdChange = React.useCallback(() => {
@@ -33,6 +35,11 @@ export function ContentModelEntityView(props: { entity: ContentModelEntity }) {
         entity.entityFormat.isReadonly = newValue;
         setIsReadonly(newValue);
     }, [id, setId]);
+    const onFakeEntityChange = React.useCallback(() => {
+        const newValue = isFakeEntityCheckBox.current.checked;
+        entity.entityFormat.isFakeEntity = newValue;
+        setIsFakeEntity(newValue);
+    }, [isFakeEntity, setIsFakeEntity]);
 
     const getContent = React.useCallback(() => {
         return (
@@ -53,9 +60,18 @@ export function ContentModelEntityView(props: { entity: ContentModelEntity }) {
                         onChange={onReadonlyChange}
                     />
                 </div>
+                <div>
+                    IsFakeEntity:
+                    <input
+                        type="checkbox"
+                        checked={isFakeEntity}
+                        ref={isFakeEntityCheckBox}
+                        onChange={onFakeEntityChange}
+                    />
+                </div>
             </>
         );
-    }, [type, isReadonly, id]);
+    }, [type, isReadonly, isFakeEntity, id]);
 
     const getFormat = React.useCallback(() => {
         return (

demo/scripts/controlsV2/sidePane/contentModel/components/model/ContentModelImageView.tsx

@@ -1,20 +1,26 @@
 import * as React from 'react';
+import { BorderFormatRenderers } from '../format/formatPart/BorderFormatRenderers';
+import { BoxShadowFormatRenderer } from '../format/formatPart/BoxShadowFormatRenderer';
 import { ContentModelCodeView } from './ContentModelCodeView';
+import { ContentModelDataView } from './ContentModelDataView';
 import { ContentModelImage, ContentModelImageFormat } from 'roosterjs-content-model-types';
 import { ContentModelLinkView } from './ContentModelLinkView';
 import { ContentModelView } from '../ContentModelView';
+import { DisplayFormatRenderer } from '../format/formatPart/DisplayFormatRenderer';
 import { FloatFormatRenderer } from '../format/formatPart/FloatFormatRenderer';
 import { FormatRenderer } from '../format/utils/FormatRenderer';
 import { FormatView } from '../format/FormatView';
 import { IdFormatRenderer } from '../format/formatPart/IdFormatRenderer';
 import { ImageMetadataFormatRenderers } from '../format/formatPart/ImageMetadataFormatRenderers';
+import { ImageStateFormatRenderer } from '../format/formatPart/ImageStateFormatRenderer';
 import { MarginFormatRenderer } from '../format/formatPart/MarginFormatRenderer';
 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-dom';
 import { useProperty } from '../../hooks/useProperty';
+import { VerticalAlignFormatRenderer } from '../format/formatPart/VerticalAlignFormatRenderer';
 
 const styles = require('./ContentModelImageView.scss');
 
@@ -23,15 +29,24 @@ const ImageFormatRenderers: FormatRenderer<ContentModelImageFormat>[] = [
     ...SizeFormatRenderers,
     MarginFormatRenderer,
     PaddingFormatRenderer,
+    ...BorderFormatRenderers,
+    BoxShadowFormatRenderer,
+    DisplayFormatRenderer,
     FloatFormatRenderer,
+    VerticalAlignFormatRenderer,
+    ImageStateFormatRenderer,
 ];
 
 export function ContentModelImageView(props: { image: ContentModelImage }) {
     const { image } = props;
     const srcTextArea = React.useRef<HTMLTextAreaElement>(null);
+    const altInput = React.useRef<HTMLInputElement>(null);
+    const titleInput = React.useRef<HTMLInputElement>(null);
     const imageSelectionCheckBox = React.useRef<HTMLInputElement>(null);
 
     const [src, setSrc] = useProperty(image.src);
+    const [alt, setAlt] = useProperty(image.alt || '');
+    const [title, setTitle] = useProperty(image.title || '');
     const [imageSelected, setImageSelected] = useProperty(
         image.isSelectedAsImageSelection || false
     );
@@ -50,6 +65,13 @@ export function ContentModelImageView(props: { image: ContentModelImage }) {
             <>
                 <img src={src} className={styles.image} />
                 <textarea value={src} ref={srcTextArea} onChange={onSrcChange} />
+                <div>
+                    Alt: <input type="text" value={alt} ref={altInput} onChange={onAltChange} />
+                </div>
+                <div>
+                    Title:{' '}
+                    <input type="text" value={title} ref={titleInput} onChange={onTitleChange} />
+                </div>
                 <div>
                     <input
                         type="checkbox"
@@ -60,10 +82,11 @@ export function ContentModelImageView(props: { image: ContentModelImage }) {
                     Image selection
                 </div>
                 {image.link ? <ContentModelLinkView link={image.link} /> : null}{' '}
-                {image.code ? <ContentModelCodeView code={image.code} /> : null}
+                {image.code ? <ContentModelCodeView code={image.code} /> : null}{' '}
+                {image.data ? <ContentModelDataView data={image.data} /> : null}
             </>
         );
-    }, [src, imageSelected, image.link]);
+    }, [src, imageSelected, image.link, alt, title]);
 
     const getMetadata = React.useCallback(() => {
         return (
@@ -81,6 +104,18 @@ export function ContentModelImageView(props: { image: ContentModelImage }) {
         setSrc(newValue);
     }, [src, setSrc]);
 
+    const onAltChange = React.useCallback(() => {
+        const newValue = altInput.current.value;
+        image.alt = newValue;
+        setAlt(newValue);
+    }, [alt, setAlt]);
+
+    const onTitleChange = React.useCallback(() => {
+        const newValue = titleInput.current.value;
+        image.title = newValue;
+        setTitle(newValue);
+    }, [title, setTitle]);
+
     const onImageSelectionChange = React.useCallback(() => {
         const newValue = imageSelectionCheckBox.current.checked;
         image.isSelectedAsImageSelection = newValue;

demo/scripts/controlsV2/sidePane/contentModel/components/model/ContentModelListItemView.tsx

@@ -1,22 +1,20 @@
 import * as React from 'react';
+import { BackgroundColorFormatRenderer } from '../format/formatPart/BackgroundColorFormatRenderer';
 import { ContentModelBlockView } from './ContentModelBlockView';
 import { ContentModelListLevelView } from './ContentModelListLevelView';
 import { ContentModelView } from '../ContentModelView';
 import { DirectionFormatRenderer } from '../format/formatPart/DirectionFormatRenderer';
-import { FontFamilyFormatRenderer } from '../format/formatPart/FontFamilyFormatRenderer';
-import { FontSizeFormatRenderer } from '../format/formatPart/FontSizeFormatRenderer';
 import { FormatRenderer } from '../format/utils/FormatRenderer';
 import { FormatView } from '../format/FormatView';
 import { hasSelectionInBlockGroup } from 'roosterjs-content-model-dom';
 import { LineHeightFormatRenderer } from '../format/formatPart/LineHeightFormatRenderer';
+import { ListStylePositionFormatRenderers } from '../format/formatPart/ListStylePositionFormatRenderers';
 import { MarginFormatRenderer } from '../format/formatPart/MarginFormatRenderer';
+import { PaddingFormatRenderer } from '../format/formatPart/PaddingFormatRenderer';
+import { SegmentFormatView } from '../format/SegmentFormatView';
 import { TextAlignFormatRenderer } from '../format/formatPart/TextAlignFormatRenderer';
-import { TextColorFormatRenderer } from '../format/formatPart/TextColorFormatRenderer';
-import {
-    ContentModelListItem,
-    ContentModelListItemFormat,
-    ContentModelSegmentFormat,
-} from 'roosterjs-content-model-types';
+import { TextIndentFormatRenderer } from '../format/formatPart/TextIndentFormatRenderer';
+import { ContentModelListItem, ContentModelListItemFormat } from 'roosterjs-content-model-types';
 
 const styles = require('./ContentModelListItemView.scss');
 
@@ -25,11 +23,10 @@ const ListItemFormatRenderers: FormatRenderer<ContentModelListItemFormat>[] = [
     TextAlignFormatRenderer,
     LineHeightFormatRenderer,
     MarginFormatRenderer,
-];
-const ListItemFormatHolderRenderers: FormatRenderer<ContentModelSegmentFormat>[] = [
-    TextColorFormatRenderer,
-    FontSizeFormatRenderer,
-    FontFamilyFormatRenderer,
+    PaddingFormatRenderer,
+    TextIndentFormatRenderer,
+    BackgroundColorFormatRenderer,
+    ...ListStylePositionFormatRenderers,
 ];
 
 export function ContentModelListItemView(props: { listItem: ContentModelListItem }) {
@@ -57,10 +54,7 @@ export function ContentModelListItemView(props: { listItem: ContentModelListItem
                 <FormatView format={listItem.format} renderers={ListItemFormatRenderers} />
                 <br />
                 <div>List marker format:</div>
-                <FormatView
-                    format={listItem.formatHolder.format}
-                    renderers={ListItemFormatHolderRenderers}
-                />
+                <SegmentFormatView format={listItem.formatHolder.format} />
             </>
         );
     }, [listItem.levels]);

demo/scripts/controlsV2/sidePane/contentModel/components/model/ContentModelTableCellView.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { BackgroundColorFormatRenderer } from '../format/formatPart/BackgroundColorFormatRenderer';
 import { BlockGroupContentView } from './BlockGroupContentView';
+import { BoldFormatRenderer } from '../format/formatPart/BasicFormatRenderers';
 import { BorderBoxFormatRenderer } from '../format/formatPart/BorderBoxFormatRenderer';
 import { BorderFormatRenderers } from '../format/formatPart/BorderFormatRenderers';
 import { ContentModelTableCell, ContentModelTableCellFormat } from 'roosterjs-content-model-types';
@@ -33,6 +34,7 @@ const TableCellFormatRenderers: FormatRenderer<ContentModelTableCellFormat>[] =
     VerticalAlignFormatRenderer,
     WordBreakFormatRenderer,
     TextColorFormatRenderer,
+    BoldFormatRenderer,
     ...SizeFormatRenderers,
 ];