Bump Rooster to 8.39.0 (#1450)

* get biggest z index * comment * refactor * refactor * refactor * refactor * refactor * refactor * refactor * refactor and comments * refactor * Improve handling of quotes inside lists (#1438) * Remove coloring when removing a quote inside a LI * Prevent list items from being removed before quote * refactor * Content Model Support PRE and CODE: step 1 (#1439) * Support PRE and CODE: step 1 * improve * Content Model Support PRE and CODE: step 2 (#1440) * Support PRE and CODE: step 1 * improve * Support PRE and CODE step 2 * Fix issue when cell resizing with merged cells (#1445) * init * Fix * Content Model Support PRE and CODE: step 3 (#1441) * Support PRE and CODE: step 1 * improve * Support PRE and CODE step 2 * Support PRE and CODE: step 3 * Content Model Support PRE and CODE: step 4 (#1442) * Support PRE and CODE: step 1 * improve * Support PRE and CODE step 2 * Support PRE and CODE: step 3 * Support PRE and CODE: step 4 * Allow styled table header cells to be clear formatted (#1447) * Consider nodes with siblings with no text as empty * Cleanup * Fix background color issue that can go across block element (#1448) * Fix Unhandled Rejection: Error: Editor is already disposed (#1449) * Fix issue * fix test * Bump * Bump content model Co-authored-by: Júlia Roldi <[email protected]> Co-authored-by: Julia Roldi <[email protected]> Co-authored-by: Jiuqing Song <[email protected]> Co-authored-by: Bryan Valverde U <[email protected]>
microsoft · Feb 10, 2023 · db0f800 · db0f800
1 parent a77576c
commit db0f800
Show file tree

Hide file tree

Showing 67 changed files with 583 additions and 385 deletions.
diff --git a/demo/scripts/controls/contentModel/components/format/BlockFormatView.tsx b/demo/scripts/controls/contentModel/components/format/BlockFormatView.tsx
@@ -16,6 +16,7 @@ const BlockFormatRenders: FormatRenderer<ContentModelBlockFormat>[] = [
     MarginFormatRenderer,
     PaddingFormatRenderer,
     LineHeightFormatRenderer,
+    WhiteSpaceFormatRenderer,
 ];
 
 export function BlockFormatView(props: { format: ContentModelSegmentFormat }) {

diff --git a/demo/scripts/controls/contentModel/components/model/ContentModelBlockView.tsx b/demo/scripts/controls/contentModel/components/model/ContentModelBlockView.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { ContentModelBlock } from 'roosterjs-content-model';
 import { ContentModelBlockGroupView } from './ContentModelBlockGroupView';
+import { ContentModelDividerView } from './ContentModelDividerView';
 import { ContentModelEntityView } from './ContentModelEntityView';
 import { ContentModelParagraphView } from './ContentModelParagraphView';
 import { ContentModelTableView } from './ContentModelTableView';
@@ -20,5 +21,8 @@ export function ContentModelBlockView(props: { block: ContentModelBlock }) {
 
         case 'Entity':
             return <ContentModelEntityView entity={block} />;
+
+        case 'Divider':
+            return <ContentModelDividerView divider={block} />;
     }
 }
diff --git a/demo/scripts/controls/contentModel/components/model/ContentModelDividerView.scss b/demo/scripts/controls/contentModel/components/model/ContentModelDividerView.scss
@@ -1,3 +1,3 @@
 .modelDivider {
-    background-color: #c0f;
+    background-color: #ccf;
 }
diff --git a/demo/scripts/controls/contentModel/components/model/ContentModelDividerView.tsx b/demo/scripts/controls/contentModel/components/model/ContentModelDividerView.tsx
@@ -1,31 +1,10 @@
 import * as React from 'react';
-import { BackgroundColorFormatRenderer } from '../format/formatPart/BackgroundColorFormatRenderer';
-import { BorderFormatRenderers } from '../format/formatPart/BorderFormatRenderers';
-import { ContentModelDivider, ContentModelDividerFormat } from 'roosterjs-content-model';
+import { BlockFormatView } from '../format/BlockFormatView';
+import { ContentModelDivider } from 'roosterjs-content-model';
 import { ContentModelView } from '../ContentModelView';
-import { DirectionFormatRenderers } from '../format/formatPart/DirectionFormatRenderers';
-import { DisplayFormatRenderer } from '../format/formatPart/DisplayFormatRenderer';
-import { FormatRenderer } from '../format/utils/FormatRenderer';
-import { FormatView } from '../format/FormatView';
-import { LineHeightFormatRenderer } from '../format/formatPart/LineHeightFormatRenderer';
-import { MarginFormatRenderer } from '../format/formatPart/MarginFormatRenderer';
-import { PaddingFormatRenderer } from '../format/formatPart/PaddingFormatRenderer';
-import { SizeFormatRenderers } from '../format/formatPart/SizeFormatRenderers';
 import { useProperty } from '../../hooks/useProperty';
-import { WhiteSpaceFormatRenderer } from '../format/formatPart/WhiteSpaceFormatRenderer';
 
 const styles = require('./ContentModelDividerView.scss');
-const DividerFormatRenders: FormatRenderer<ContentModelDividerFormat>[] = [
-    BackgroundColorFormatRenderer,
-    ...DirectionFormatRenderers,
-    MarginFormatRenderer,
-    PaddingFormatRenderer,
-    LineHeightFormatRenderer,
-    WhiteSpaceFormatRenderer,
-    ...BorderFormatRenderers,
-    DisplayFormatRenderer,
-    ...SizeFormatRenderers,
-];
 
 export function ContentModelDividerView(props: { divider: ContentModelDivider }) {
     const { divider } = props;
@@ -50,7 +29,7 @@ export function ContentModelDividerView(props: { divider: ContentModelDivider })
     }, [tagName]);
 
     const getFormat = React.useCallback(() => {
-        return <FormatView format={divider.format} renderers={DividerFormatRenders} />;
+        return <BlockFormatView format={divider.format} />;
     }, [divider.format]);
 
     return (

diff --git a/demo/scripts/controls/contentModel/components/model/ContentModelParagraphView.tsx b/demo/scripts/controls/contentModel/components/model/ContentModelParagraphView.tsx
@@ -1,33 +1,28 @@
 import * as React from 'react';
-import { BackgroundColorFormatRenderer } from '../format/formatPart/BackgroundColorFormatRenderer';
+import { BlockFormatView } from '../format/BlockFormatView';
 import { ContentModelSegmentView } from './ContentModelSegmentView';
 import { ContentModelView } from '../ContentModelView';
 import { SegmentFormatView } from '../format/SegmentFormatView';
 import { useProperty } from '../../hooks/useProperty';
+import {
+    ContentModelParagraph,
+    ContentModelParagraphDecorator,
+    hasSelectionInBlock,
+} from 'roosterjs-content-model';
 
 const styles = require('./ContentModelParagraphView.scss');
 
 export function ContentModelParagraphView(props: { paragraph: ContentModelParagraph }) {
     const { paragraph } = props;
     const implicitCheckbox = React.useRef<HTMLInputElement>(null);
     const [value, setValue] = useProperty(!!paragraph.isImplicit);
-    const [headerLevel, setHeaderLevel] = useProperty((paragraph.header?.headerLevel || '') + '');
 
     const onChange = React.useCallback(() => {
         const newValue = implicitCheckbox.current.checked;
         paragraph.isImplicit = newValue;
         setValue(newValue);
     }, [paragraph, setValue]);
 
-    const onHeaderLevelChange = React.useCallback(() => {
-        const newValue = headerLevelDropDown.current.value;
-
-        if (paragraph.header) {
-            paragraph.header.headerLevel = parseInt(newValue);
-        }
-        setHeaderLevel(newValue);
-    }, [paragraph, setHeaderLevel]);
-
     const getContent = React.useCallback(() => {
         return (
             <>
@@ -40,23 +35,9 @@ export function ContentModelParagraphView(props: { paragraph: ContentModelParagr
                     />
                     Implicit
                 </div>
-                {paragraph.header ? (
-                    <div>
-                        Header level:
-                        <select
-                            value={headerLevel}
-                            ref={headerLevelDropDown}
-                            onChange={onHeaderLevelChange}>
-                            <option value="1">1</option>
-                            <option value="2">2</option>
-                            <option value="3">3</option>
-                            <option value="4">4</option>
-                            <option value="5">5</option>
-                            <option value="6">6</option>
-                        </select>
-                        <SegmentFormatView format={paragraph.header.format} />
-                    </div>
-                ) : null}
+                {paragraph.decorator && (
+                    <ContentModelParagraphDecoratorView decorator={paragraph.decorator} />
+                )}
                 {paragraph.segments.map((segment, index) => (
                     <ContentModelSegmentView segment={segment} key={index} />
                 ))}
@@ -89,3 +70,48 @@ export function ContentModelParagraphView(props: { paragraph: ContentModelParagr
         />
     );
 }
+
+function ContentModelParagraphDecoratorView(props: { decorator: ContentModelParagraphDecorator }) {
+    const { decorator } = props;
+    const tagNameDropDown = React.useRef<HTMLSelectElement>(null);
+    const [tagName, setTagName] = useProperty(decorator.tagName || '');
+
+    const onTagNameChange = React.useCallback(() => {
+        const newValue = tagNameDropDown.current.value;
+
+        decorator.tagName = newValue;
+        setTagName(newValue);
+    }, [decorator, setTagName]);
+
+    const getContent = React.useCallback(() => {
+        return (
+            <div>
+                Tag name:
+                <select value={tagName} ref={tagNameDropDown} onChange={onTagNameChange}>
+                    <option value="p">P</option>
+                    <option value="h1">H1</option>
+                    <option value="h2">H2</option>
+                    <option value="h3">H3</option>
+                    <option value="h4">H4</option>
+                    <option value="h5">H5</option>
+                    <option value="h6">H6</option>
+                </select>
+            </div>
+        );
+    }, [decorator, tagName]);
+
+    const getFormat = React.useCallback(() => {
+        return <SegmentFormatView format={decorator.format} />;
+    }, [decorator.format]);
+
+    return (
+        <ContentModelView
+            title="Decorator"
+            subTitle={decorator.tagName}
+            className={styles.modelDecorator}
+            jsonSource={decorator}
+            getContent={getContent}
+            getFormat={getFormat}
+        />
+    );
+}
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "roosterjs",
-    "version": "8.38.0",
+    "version": "8.39.0",
     "description": "Framework-independent javascript editor",
     "repository": {
         "type": "git",

diff --git a/packages/roosterjs-content-model/lib/domToModel/context/defaultProcessors.ts b/packages/roosterjs-content-model/lib/domToModel/context/defaultProcessors.ts
@@ -17,6 +17,8 @@ export const defaultProcessorMap: ElementProcessorMap = {
     b: knownElementProcessor,
     blockquote: quoteProcessor,
     br: brProcessor,
+    center: knownElementProcessor,
+    code: knownElementProcessor,
     div: knownElementProcessor,
     em: knownElementProcessor,
     font: fontProcessor,
@@ -32,6 +34,7 @@ export const defaultProcessorMap: ElementProcessorMap = {
     li: listItemProcessor,
     ol: listProcessor,
     p: knownElementProcessor,
+    pre: knownElementProcessor,
     s: knownElementProcessor,
     span: knownElementProcessor,
     strike: knownElementProcessor,

diff --git a/packages/roosterjs-content-model/lib/domToModel/processors/entityProcessor.ts b/packages/roosterjs-content-model/lib/domToModel/processors/entityProcessor.ts
@@ -2,7 +2,9 @@ import { addBlock } from '../../modelApi/common/addBlock';
 import { addSegment } from '../../modelApi/common/addSegment';
 import { createEntity } from '../../modelApi/creators/createEntity';
 import { ElementProcessor } from '../../publicTypes/context/ElementProcessor';
-import { getEntityFromElement, isBlockElement } from 'roosterjs-editor-dom';
+import { getEntityFromElement } from 'roosterjs-editor-dom';
+import { isBlockElement } from '../utils/isBlockElement';
+import { stackFormat } from '../utils/stackFormat';
 
 /**
  * @internal
@@ -11,13 +13,20 @@ export const entityProcessor: ElementProcessor<HTMLElement> = (group, element, c
     const entity = getEntityFromElement(element);
 
     if (entity) {
-        const entityModel = createEntity(entity, context.segmentFormat);
         const isBlockEntity = isBlockElement(element, context);
 
-        if (isBlockEntity) {
-            addBlock(group, entityModel);
-        } else {
-            addSegment(group, entityModel);
-        }
+        stackFormat(
+            context,
+            { segment: isBlockEntity ? 'shallowCloneForBlock' : undefined },
+            () => {
+                const entityModel = createEntity(entity, context.segmentFormat);
+
+                if (isBlockEntity) {
+                    addBlock(group, entityModel);
+                } else {
+                    addSegment(group, entityModel);
+                }
+            }
+        );
     }
 };
diff --git a/packages/roosterjs-content-model/lib/domToModel/processors/fontProcessor.ts b/packages/roosterjs-content-model/lib/domToModel/processors/fontProcessor.ts
@@ -1,4 +1,5 @@
 import { ElementProcessor } from '../../publicTypes/context/ElementProcessor';
+import { isBlockElement } from '../utils/isBlockElement';
 import { parseFormat } from '../utils/parseFormat';
 import { stackFormat } from '../utils/stackFormat';
 
@@ -25,7 +26,7 @@ export const fontProcessor: ElementProcessor<HTMLFontElement> = (group, element,
     stackFormat(
         context,
         {
-            segment: 'shallowClone',
+            segment: isBlockElement(element, context) ? 'shallowCloneForBlock' : 'shallowClone',
         },
         () => {
             const fontFamily = element.getAttribute('face');

diff --git a/packages/roosterjs-content-model/lib/domToModel/processors/knownElementProcessor.ts b/packages/roosterjs-content-model/lib/domToModel/processors/knownElementProcessor.ts
@@ -1,9 +1,12 @@
 import { addBlock } from '../../modelApi/common/addBlock';
-import { ContentModelHeader } from '../../publicTypes/decorator/ContentModelHeader';
+import { ContentModelDivider } from '../../publicTypes/block/ContentModelDivider';
+import { ContentModelParagraphDecorator } from '../../publicTypes/decorator/ContentModelParagraphDecorator';
+import { createDivider } from '../../modelApi/creators/createDivider';
 import { createParagraph } from '../../modelApi/creators/createParagraph';
-import { DomToModelContext } from '../../publicTypes/context/DomToModelContext';
+import { createParagraphDecorator } from '../../modelApi/creators/createParagraphDecorator';
 import { ElementProcessor } from '../../publicTypes/context/ElementProcessor';
-import { isBlockElement } from 'roosterjs-editor-dom';
+import { isBlockElement } from '../utils/isBlockElement';
+import { MarginFormat } from '../../publicTypes/format/formatParts/MarginFormat';
 import { parseFormat } from '../utils/parseFormat';
 import { stackFormat } from '../utils/stackFormat';
 
@@ -17,33 +20,58 @@ export const knownElementProcessor: ElementProcessor<HTMLElement> = (group, elem
     stackFormat(
         context,
         {
-            segment: 'shallowClone',
+            segment: isBlock ? 'shallowCloneForBlock' : 'shallowClone',
             paragraph: 'shallowClone',
             link: isLink ? 'empty' : undefined,
         },
         () => {
+            let topDivider: ContentModelDivider | undefined;
+            let bottomDivider: ContentModelDivider | undefined;
+
             if (isLink) {
                 parseFormat(element, context.formatParsers.link, context.link.format, context);
                 parseFormat(element, context.formatParsers.dataset, context.link.dataset, context);
             }
 
             if (isBlock) {
                 parseFormat(element, context.formatParsers.block, context.blockFormat, context);
+                parseFormat(
+                    element,
+                    context.formatParsers.segmentOnBlock,
+                    context.segmentFormat,
+                    context
+                );
+
+                let decorator: ContentModelParagraphDecorator | undefined;
 
-                const paragraph = createParagraph(false /*isImplicit*/, context.blockFormat);
+                switch (element.tagName) {
+                    case 'P':
+                    case 'H1':
+                    case 'H2':
+                    case 'H3':
+                    case 'H4':
+                    case 'H5':
+                    case 'H6':
+                        decorator = createParagraphDecorator(
+                            element.tagName,
+                            context.segmentFormat
+                        );
+                        break;
+                    default:
+                        topDivider = tryCreateDivider(context.blockFormat, 'marginTop');
+                        bottomDivider = tryCreateDivider(context.blockFormat, 'marginBottom');
+
+                        break;
+                }
 
-                if (safeInstanceOf(element, 'HTMLHeadingElement')) {
-                    // For headers, inline format won't go into its child nodes, so we parse its format here and clear the format of context
-                    paragraph.header = headerProcessor(element, context);
+                const paragraph = createParagraph(
+                    false /*isImplicit*/,
+                    context.blockFormat,
+                    decorator
+                );
 
-                    Object.assign(context.segmentFormat, paragraph.header.format);
-                } else {
-                    parseFormat(
-                        element,
-                        context.formatParsers.segmentOnBlock,
-                        context.segmentFormat,
-                        context
-                    );
+                if (topDivider) {
+                    addBlock(group, topDivider);
                 }
 
                 addBlock(group, paragraph);
@@ -55,6 +83,10 @@ export const knownElementProcessor: ElementProcessor<HTMLElement> = (group, elem
             }
 
             context.elementProcessors.child(group, element, context);
+
+            if (bottomDivider) {
+                addBlock(group, bottomDivider);
+            }
         }
     );
 
@@ -63,19 +95,17 @@ export const knownElementProcessor: ElementProcessor<HTMLElement> = (group, elem
     }
 };
 
-function headerProcessor(
-    element: HTMLHeadingElement,
-    context: DomToModelContext
-): ContentModelHeader {
-    // Parse the header level from tag name
-    // e.g. "H1" will return 1
-    const headerLevel = parseInt(element.tagName.substring(1));
-    const result: ContentModelHeader = {
-        format: {},
-        headerLevel,
-    };
-
-    parseFormat(element, context.formatParsers.segmentOnBlock, result.format, context);
+function tryCreateDivider(
+    format: MarginFormat,
+    propName: keyof MarginFormat
+): ContentModelDivider | undefined {
+    const margin = parseInt(format[propName] || '');
+    let result: ContentModelDivider | undefined;
+
+    if (margin > 0) {
+        result = createDivider('div', { [propName]: format[propName] });
+        delete format[propName];
+    }
 
     return result;
 }