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 · Dec 2, 2022 · 2db3a4f · 2db3a4f
1 parent b36201b
commit 2db3a4f
Show file tree

Hide file tree

Showing 95 changed files with 1,332 additions and 406 deletions.
diff --git a/.gitignore b/.gitignore
@@ -16,4 +16,3 @@ dist/
 
 # Temp files
 packages/roosterjs-editor-types/lib/compatibleEnum/
-packages/roosterjs-content-model/lib/publicTypes/compatibleEnum/
diff --git a/demo/scripts/controls/contentModel/components/format/BlockFormatView.tsx b/demo/scripts/controls/contentModel/components/format/BlockFormatView.tsx
@@ -7,13 +7,15 @@ import { FormatView } from './FormatView';
 import { LineHeightFormatRenderer } from './formatPart/LineHeightFormatRenderer';
 import { MarginFormatRenderer } from './formatPart/MarginFormatRenderer';
 import { PaddingFormatRenderer } from './formatPart/PaddingFormatRenderer';
+import { WhiteSpaceFormatRenderer } from './formatPart/WhiteSpaceFormatRenderer';
 
 const BlockFormatRenders: FormatRenderer<ContentModelBlockFormat>[] = [
     BackgroundColorFormatRenderer,
     ...DirectionFormatRenderers,
     MarginFormatRenderer,
     PaddingFormatRenderer,
     LineHeightFormatRenderer,
+    WhiteSpaceFormatRenderer,
 ];
 
 export function BlockFormatView(props: { format: ContentModelSegmentFormat }) {

diff --git a/demo/scripts/controls/contentModel/components/format/formatPart/WhiteSpaceFormatRenderer.ts b/demo/scripts/controls/contentModel/components/format/formatPart/WhiteSpaceFormatRenderer.ts
@@ -0,0 +1,8 @@
+import { createTextFormatRenderer } from '../utils/createTextFormatRenderer';
+import { WhiteSpaceFormat } from 'roosterjs-content-model';
+
+export const WhiteSpaceFormatRenderer = createTextFormatRenderer<WhiteSpaceFormat>(
+    'White space',
+    format => format.whiteSpace,
+    (format, value) => (format.whiteSpace = value)
+);
diff --git a/demo/scripts/controls/contentModel/components/model/ContentModelBlockView.tsx b/demo/scripts/controls/contentModel/components/model/ContentModelBlockView.tsx
@@ -1,8 +1,8 @@
 import * as React from 'react';
 import { ContentModelBlock } from 'roosterjs-content-model';
 import { ContentModelBlockGroupView } from './ContentModelBlockGroupView';
+import { ContentModelDividerView } from './ContentModelDividerView';
 import { ContentModelEntityView } from './ContentModelEntityView';
-import { ContentModelHRView } from './ContentModelHRView';
 import { ContentModelParagraphView } from './ContentModelParagraphView';
 import { ContentModelTableView } from './ContentModelTableView';
 
@@ -22,7 +22,7 @@ export function ContentModelBlockView(props: { block: ContentModelBlock }) {
         case 'Entity':
             return <ContentModelEntityView entity={block} />;
 
-        case 'HR':
-            return <ContentModelHRView hr={block} />;
+        case 'Divider':
+            return <ContentModelDividerView divider={block} />;
     }
 }
diff --git a/.../components/model/ContentModelHRView.scss → ...onents/model/ContentModelDividerView.scss b/.../components/model/ContentModelHRView.scss → ...onents/model/ContentModelDividerView.scss
@@ -1,3 +1,3 @@
-.modelHR {
+.modelDivider {
     background-color: #ccf;
 }
diff --git a/demo/scripts/controls/contentModel/components/model/ContentModelDividerView.tsx b/demo/scripts/controls/contentModel/components/model/ContentModelDividerView.tsx
@@ -0,0 +1,45 @@
+import * as React from 'react';
+import { BlockFormatView } from '../format/BlockFormatView';
+import { ContentModelDivider } from 'roosterjs-content-model';
+import { ContentModelView } from '../ContentModelView';
+import { useProperty } from '../../hooks/useProperty';
+
+const styles = require('./ContentModelDividerView.scss');
+
+export function ContentModelDividerView(props: { divider: ContentModelDivider }) {
+    const { divider } = props;
+    const [tagName, setTagName] = useProperty(divider.tagName);
+    const tagNameDropDown = React.useRef<HTMLSelectElement>(null);
+    const onTagNameChange = React.useCallback(() => {
+        const newValue = tagNameDropDown.current.value as 'hr' | 'div';
+        divider.tagName = newValue;
+        setTagName(newValue);
+    }, [divider, setTagName]);
+
+    const getContent = React.useCallback(() => {
+        return (
+            <div>
+                TagName:
+                <select value={tagName} ref={tagNameDropDown} onChange={onTagNameChange}>
+                    <option value="hr">HR</option>
+                    <option value="div">DIV</option>
+                </select>
+            </div>
+        );
+    }, [tagName]);
+
+    const getFormat = React.useCallback(() => {
+        return <BlockFormatView format={divider.format} />;
+    }, [divider.format]);
+
+    return (
+        <ContentModelView
+            title="Divider"
+            className={styles.modelDivider}
+            isSelected={divider.isSelected}
+            jsonSource={divider}
+            getContent={getContent}
+            getFormat={getFormat}
+        />
+    );
+}
diff --git a/demo/scripts/controls/contentModel/components/model/ContentModelHRView.tsx b/demo/scripts/controls/contentModel/components/model/ContentModelHRView.tsx
diff --git a/demo/scripts/controls/contentModel/components/model/ContentModelParagraphView.scss b/demo/scripts/controls/contentModel/components/model/ContentModelParagraphView.scss
@@ -1,3 +1,7 @@
 .modelParagraph {
     background-color: #bdf;
 }
+
+.modelDecorator {
+    background-color: #ccf;
+}
diff --git a/demo/scripts/controls/contentModel/components/model/ContentModelParagraphView.tsx b/demo/scripts/controls/contentModel/components/model/ContentModelParagraphView.tsx
@@ -1,35 +1,28 @@
 import * as React from 'react';
 import { BlockFormatView } from '../format/BlockFormatView';
-import { ContentModelParagraph, hasSelectionInBlock } from 'roosterjs-content-model';
 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 headerLevelDropDown = React.useRef<HTMLSelectElement>(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 (
             <>
@@ -42,29 +35,19 @@ 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} />
                 ))}
             </>
         );
-    }, [paragraph, value, headerLevel]);
+    }, [
+        paragraph,
+        value,
+        // headerLevel
+    ]);
 
     const getFormat = React.useCallback(() => {
         return <BlockFormatView format={paragraph.format} />;
@@ -83,3 +66,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
@@ -23,6 +23,7 @@ export const defaultProcessorMap: ElementProcessorMap = {
     blockquote: quoteProcessor,
     br: brProcessor,
     center: knownElementProcessor,
+    code: knownElementProcessor,
     div: knownElementProcessor,
     em: knownElementProcessor,
     font: fontProcessor,
@@ -38,6 +39,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
@@ -4,6 +4,7 @@ import { createEntity } from '../../modelApi/creators/createEntity';
 import { ElementProcessor } from '../../publicTypes/context/ElementProcessor';
 import { getEntityFromElement } from 'roosterjs-editor-dom';
 import { isBlockElement } from '../utils/isBlockElement';
+import { stackFormat } from '../utils/stackFormat';
 
 /**
  * @internal
@@ -12,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/hrProcessor.ts b/packages/roosterjs-content-model/lib/domToModel/processors/hrProcessor.ts
@@ -1,5 +1,5 @@
 import { addBlock } from '../../modelApi/common/addBlock';
-import { createHR } from '../../modelApi/creators/createHR';
+import { createDivider } from '../../modelApi/creators/createDivider';
 import { ElementProcessor } from '../../publicTypes/context/ElementProcessor';
 import { parseFormat } from '../utils/parseFormat';
 import { stackFormat } from '../utils/stackFormat';
@@ -16,7 +16,7 @@ export const hrProcessor: ElementProcessor<HTMLHRElement> = (group, element, con
         () => {
             parseFormat(element, context.formatParsers.block, context.blockFormat, context);
 
-            const hr = createHR(context.blockFormat);
+            const hr = createDivider('hr', context.blockFormat);
 
             if (context.isInSelection) {
                 hr.isSelected = true;

diff --git a/packages/roosterjs-content-model/lib/domToModel/processors/imageProcessor.ts b/packages/roosterjs-content-model/lib/domToModel/processors/imageProcessor.ts
@@ -18,7 +18,7 @@ export const imageProcessor: ElementProcessor<HTMLImageElement> = (group, elemen
     stackFormat(
         context,
         {
-            segment: 'shallowClone',
+            segment: isBlock ? 'shallowCloneForBlock' : 'shallowClone',
             paragraph: isBlock ? 'empty' : 'shallowClone',
         },
         () => {
Original file line number	Diff line number	Diff line change
Expand Up		@@ -16,4 +16,3 @@ dist/

		# Temp files
		packages/roosterjs-editor-types/lib/compatibleEnum/
		packages/roosterjs-content-model/lib/publicTypes/compatibleEnum/