Bump version to 8.46.0 (#1760)

* add tests for image edit * fix build * Move getPasteSource from Plugins to Dom (#1708) * init * try fix tests * Content Model minor fix: Change parameter type (#1720) * Content Model: Fix #1702 Hyperlinking a text doesnt trigger ChangeSource.CreateLink event (#1703) * Content Model: Fix #1702 * fix build * fix test * fix build * Fix #1713 (#1718) * Fix Uncaught TypeError: Cannot read properties of undefined (reading 'parentNode') (#1725) * Fix Unhandled exception * fix test * remove unneeded changes * Decouple logic from Table Cell Selection into smaller files. (#1722) * Refactor * Add comment * Allow Content Model API to remove image border (#1733) * Modify API to allow accepting null * New demo button * Testing * Content Model: Fix #1684 (#1730) * Content Model: Improve edit plugin (#1728) * Content Model fidelity 1: Support lineHeight in list (#1731) * [1/3] Enable Strict mode in TableCellSelection Utils + Plugin (#1735) Enable Strict mode in Table Cell Selection Utils and the Plugin class * Content Model fidelity improvement 2: Support size in divider (#1732) * Content Model fidelity 2: Support size in divider * fix test * Content Model: Improve default format state (#1743) * Content Model: Improve default format state * add a test case * Add check for empty selectors, and empty CSS rule insertion (#1744) * add check for empty selectors, and empty cssRule * fix test case * Content Model: Fix #1738 delete space issue (#1740) * Content Model: Fix #1738 delete space issue * enable edit plugin in demo site by default * Fix space issue * fix cache behavior * Make additionalTagReplacements allow `null` value type. (#1745) * Fix additionalTagReplacements type in HtmlSanitizerOptions.ts * Make compiler happy * [2/3] Enable Strict mode on KeyDown Handler (#1736) * Table cell selection strict mode 1 * enable strict mode on handleKeyDown * [3/3] Enable Strict mode in Mouse Down Handler + Add Strict mode files (#1737) * Table cell selection strict mode 1 * enable strict mode on handleKeyDown * enable strict mode on mousedown * merge conflicts * Change from undefined to null * Revert "Paste as image feature" - convertPastedContentFromExcel (#1749) * revert only convertPastedContentFromExcel.ts * Leverage Content Model to insert the Pasted content from clipboard (#1716) In order to start using content model to insert clipboard content to the editor we need to do some refactor on some utilities: Move the createPasteFragment logic from roosterjs-editor-core package to roosterjs-editor-dom, so we can also use the logic in roosterjs-content-model. Add a new property to BeforePasteEvent to let other plugins modify the way we process elements in the paste fragment, this will be used later in another PR. Create a new core api createPasteModel that will use the PasteFragment to create and return a content model document. In the ContentModelEditor Class, override the paste function so, instead of using insertContent, use mergeModel function Bugs that may be fixes by leveraging Content Model with this change: #456 #1065 #1322 partially, only the paste part is fixed, copy needs to fixed in another PR. #920 * Don't return focus to editor when blur on image (#1742) * Don't return focus to editor when blur on image * Comment * Content Model fidelity improvement 3: Block format (#1751) * Content Model fidelity improvement 3: Block format * improve * fix test * Add a experimental feature for paste with ContentModel #1758 * 8.46.0 --------- Co-authored-by: Júlia Roldi <[email protected]> Co-authored-by: Bryan Valverde U <[email protected]> Co-authored-by: Julia Roldi <[email protected]> Co-authored-by: Ian Elizondo <[email protected]> Co-authored-by: Andres-CT98 <[email protected]> Co-authored-by: Ruijun Gao <[email protected]>
microsoft · Apr 27, 2023 · 6ebd1e8 · 6ebd1e8
1 parent a853b07
commit 6ebd1e8
Show file tree

Hide file tree

Showing 190 changed files with 6,721 additions and 2,284 deletions.
diff --git a/demo/scripts/controls/contentModel/components/model/ContentModelListItemView.tsx b/demo/scripts/controls/contentModel/components/model/ContentModelListItemView.tsx
@@ -6,6 +6,7 @@ import { FontFamilyFormatRenderer } from '../format/formatPart/FontFamilyFormatR
 import { FontSizeFormatRenderer } from '../format/formatPart/FontSizeFormatRenderer';
 import { FormatRenderer } from '../format/utils/FormatRenderer';
 import { FormatView } from '../format/FormatView';
+import { LineHeightFormatRenderer } from '../format/formatPart/LineHeightFormatRenderer';
 import { ListMetadataFormatRenderers } from '../format/formatPart/ListMetadataFormatRenderers';
 import { ListThreadFormatRenderers } from '../format/formatPart/ListThreadFormatRenderer';
 import { ListTypeFormatRenderer } from '../format/formatPart/ListTypeFormatRenderer';
@@ -14,6 +15,7 @@ import { TextColorFormatRenderer } from '../format/formatPart/TextColorFormatRen
 import { useProperty } from '../../hooks/useProperty';
 import {
     ContentModelListItem,
+    ContentModelListItemFormat,
     ContentModelListItemLevelFormat,
     ContentModelSegmentFormat,
     hasSelectionInBlockGroup,
@@ -28,7 +30,10 @@ const ListLevelFormatRenders: FormatRenderer<ContentModelListItemLevelFormat>[]
     ...DirectionFormatRenderers,
     MarginFormatRenderer,
 ];
-
+const ListItemFormatRenderers: FormatRenderer<ContentModelListItemFormat>[] = [
+    ...DirectionFormatRenderers,
+    LineHeightFormatRenderer,
+];
 const ListItemFormatHolderRenderers: FormatRenderer<ContentModelSegmentFormat>[] = [
     TextColorFormatRenderer,
     FontSizeFormatRenderer,
@@ -69,6 +74,10 @@ export function ContentModelListItemView(props: { listItem: ContentModelListItem
                     />
                 ))}
                 <hr className={styles.hr} />
+
+                <div>List item format:</div>
+                <FormatView format={listItem.format} renderers={ListItemFormatRenderers} />
+
                 <div>List marker format:</div>
                 <FormatView
                     format={listItem.formatHolder.format}

diff --git a/demo/scripts/controls/ribbonButtons/contentModel/ContentModelRibbon.tsx b/demo/scripts/controls/ribbonButtons/contentModel/ContentModelRibbon.tsx
@@ -18,6 +18,7 @@ import { formatTableButton } from './formatTableButton';
 import { imageBorderColorButton } from './imageBorderColorButton';
 import { imageBorderStyleButton } from './imageBorderStyleButton';
 import { imageBorderWidthButton } from './imageBorderWidthButton';
+import { imageBorderRemoveButton } from './imageBorderRemoveButton';
 import { imageBoxShadowButton } from './imageBoxShadowButton';
 import { increaseFontSizeButton } from './increaseFontSizeButton';
 import { increaseIndentButton } from './increaseIndentButton';
@@ -98,6 +99,7 @@ const buttons = [
     imageBorderColorButton,
     imageBorderWidthButton,
     imageBorderStyleButton,
+    imageBorderRemoveButton,
     changeImageButton,
     imageBoxShadowButton,
     spacingButton,

diff --git a/demo/scripts/controls/ribbonButtons/contentModel/imageBorderRemoveButton.ts b/demo/scripts/controls/ribbonButtons/contentModel/imageBorderRemoveButton.ts
@@ -0,0 +1,19 @@
+import { isContentModelEditor } from 'roosterjs-content-model';
+import { RibbonButton } from 'roosterjs-react';
+import { setImageBorder } from 'roosterjs-content-model';
+
+/**
+ * @internal
+ * "Remove Image Border" button on the format ribbon
+ */
+export const imageBorderRemoveButton: RibbonButton<'buttonNameImageBorderRemove'> = {
+    key: 'buttonNameImageBorderRemove',
+    unlocalizedText: 'Remove Image Border',
+    iconName: 'Cancel',
+    isDisabled: formatState => !formatState.canAddImageAltText,
+    onClick: editor => {
+        if (isContentModelEditor(editor)) {
+            setImageBorder(editor, null);
+        }
+    },
+};
diff --git a/demo/scripts/controls/sidePane/editorOptions/EditorOptionsPlugin.ts b/demo/scripts/controls/sidePane/editorOptions/EditorOptionsPlugin.ts
@@ -22,7 +22,7 @@ const initialState: BuildInPluginState = {
         contextMenu: true,
         autoFormat: true,
         contentModelFormat: true,
-        contentModelEdit: false,
+        contentModelEdit: true,
     },
     contentEditFeatures: getDefaultContentEditFeatureSettings(),
     defaultFormat: {},
@@ -36,6 +36,7 @@ const initialState: BuildInPluginState = {
         ExperimentalFeatures.VariableBasedDarkColor,
         ExperimentalFeatures.ReusableContentModel,
         ExperimentalFeatures.InlineEntityReadOnlyDelimiters,
+        ExperimentalFeatures.DefaultFormatOnContainer,
     ],
     isRtl: false,
 };

diff --git a/demo/scripts/controls/sidePane/editorOptions/ExperimentalFeatures.tsx b/demo/scripts/controls/sidePane/editorOptions/ExperimentalFeatures.tsx
@@ -25,6 +25,8 @@ const FeatureNames: Partial<Record<ExperimentalFeatures, string>> = {
         'Delete a table selected with the table selector pressing Backspace key',
     [ExperimentalFeatures.InlineEntityReadOnlyDelimiters]:
         'Add read entities around read only entities to handle browser edge cases.',
+    [ExperimentalFeatures.DefaultFormatOnContainer]: 'Apply default format on editor container',
+    [ExperimentalFeatures.ContentModelPaste]: 'Paste with content model',
 };
 
 export default class ExperimentalFeaturesPane extends React.Component<

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "roosterjs",
-    "version": "8.45.2",
+    "version": "8.46.0",
     "description": "Framework-independent javascript editor",
     "repository": {
         "type": "git",

diff --git a/packages/roosterjs-content-model/lib/domToModel/context/createDomToModelContext.ts b/packages/roosterjs-content-model/lib/domToModel/context/createDomToModelContext.ts
@@ -35,6 +35,10 @@ export function createDomToModelContext(
         code: {
             format: {},
         },
+        blockDecorator: {
+            format: {},
+            tagName: '',
+        },
 
         elementProcessors: {
             ...defaultProcessorMap,
@@ -59,6 +63,10 @@ export function createDomToModelContext(
         context.alwaysNormalizeTable = true;
     }
 
+    if (options?.allowCacheElement) {
+        context.allowCacheElement = true;
+    }
+
     const range = options?.selectionRange;
     let selectionRoot: Node | undefined;
 

diff --git a/packages/roosterjs-content-model/lib/domToModel/context/defaultProcessors.ts b/packages/roosterjs-content-model/lib/domToModel/context/defaultProcessors.ts
@@ -1,15 +1,18 @@
+import { blockDecoratorProcessor } from '../processors/blockDecoratorProcessor';
 import { brProcessor } from '../processors/brProcessor';
 import { childProcessor } from '../processors/childProcessor';
+import { codeProcessor } from '../processors/codeProcessor';
 import { delimiterProcessor } from '../processors/delimiterProcessor';
 import { elementProcessor } from '../processors/elementProcessor';
 import { ElementProcessorMap } from '../../publicTypes/context/DomToModelSettings';
 import { entityProcessor } from '../processors/entityProcessor';
 import { fontProcessor } from '../processors/fontProcessor';
-import { formatContainerProcessor, quoteProcessor } from '../processors/formatContainerProcessor';
+import { formatContainerProcessor } from '../processors/formatContainerProcessor';
 import { generalProcessor } from '../processors/generalProcessor';
 import { hrProcessor } from '../processors/hrProcessor';
 import { imageProcessor } from '../processors/imageProcessor';
 import { knownElementProcessor } from '../processors/knownElementProcessor';
+import { linkProcessor } from '../processors/linkProcessor';
 import { listItemProcessor } from '../processors/listItemProcessor';
 import { listProcessor } from '../processors/listProcessor';
 import { tableProcessor } from '../processors/tableProcessor';
@@ -19,27 +22,27 @@ import { textProcessor } from '../processors/textProcessor';
  * @internal
  */
 export const defaultProcessorMap: ElementProcessorMap = {
-    a: knownElementProcessor,
+    a: linkProcessor,
     b: knownElementProcessor,
-    blockquote: quoteProcessor,
+    blockquote: knownElementProcessor,
     br: brProcessor,
     center: knownElementProcessor,
-    code: knownElementProcessor,
+    code: codeProcessor,
     div: knownElementProcessor,
     em: knownElementProcessor,
     font: fontProcessor,
     i: knownElementProcessor,
     img: imageProcessor,
-    h1: knownElementProcessor,
-    h2: knownElementProcessor,
-    h3: knownElementProcessor,
-    h4: knownElementProcessor,
-    h5: knownElementProcessor,
-    h6: knownElementProcessor,
+    h1: blockDecoratorProcessor,
+    h2: blockDecoratorProcessor,
+    h3: blockDecoratorProcessor,
+    h4: blockDecoratorProcessor,
+    h5: blockDecoratorProcessor,
+    h6: blockDecoratorProcessor,
     hr: hrProcessor,
     li: listItemProcessor,
     ol: listProcessor,
-    p: knownElementProcessor,
+    p: blockDecoratorProcessor,
     pre: formatContainerProcessor,
     s: knownElementProcessor,
     span: knownElementProcessor,

diff --git a/packages/roosterjs-content-model/lib/domToModel/domToContentModel.ts b/packages/roosterjs-content-model/lib/domToModel/domToContentModel.ts
@@ -7,6 +7,7 @@ import { EditorContext } from '../publicTypes/context/EditorContext';
 import { normalizeContentModel } from '../modelApi/common/normalizeContentModel';
 import { parseFormat } from './utils/parseFormat';
 import { rootDirectionFormatHandler } from '../formatHandlers/root/rootDirectionFormatHandler';
+import { safeInstanceOf } from 'roosterjs-editor-dom';
 import { zoomScaleFormatHandler } from '../formatHandlers/root/zoomScaleFormatHandler';
 
 /**
@@ -17,27 +18,33 @@ import { zoomScaleFormatHandler } from '../formatHandlers/root/zoomScaleFormatHa
  * @returns A ContentModelDocument object that contains all the models created from the give root element
  */
 export default function domToContentModel(
-    root: HTMLElement,
+    root: HTMLElement | DocumentFragment,
     editorContext: EditorContext,
     option: DomToModelOption
 ): ContentModelDocument {
     const model = createContentModelDocument(editorContext.defaultFormat);
     const context = createDomToModelContext(editorContext, option);
 
-    // For root element, use computed style as initial value of segment formats
-    parseFormat(root, [computedSegmentFormatHandler.parse], context.segmentFormat, context);
+    if (safeInstanceOf(root, 'DocumentFragment')) {
+        context.elementProcessors.child(model, root, context);
+    } else {
+        if (!context.defaultFormatOnContainer) {
+            // For root element, use computed style as initial value of segment formats
+            parseFormat(root, [computedSegmentFormatHandler.parse], context.segmentFormat, context);
+        }
 
-    // Need to calculate direction (ltr or rtl), use it as initial value
-    parseFormat(root, [rootDirectionFormatHandler.parse], context.blockFormat, context);
+        // Need to calculate direction (ltr or rtl), use it as initial value
+        parseFormat(root, [rootDirectionFormatHandler.parse], context.blockFormat, context);
 
-    // Need to calculate zoom scale value from root element, use this value to calculate sizes for elements
-    parseFormat(root, [zoomScaleFormatHandler.parse], context.zoomScaleFormat, context);
+        // Need to calculate zoom scale value from root element, use this value to calculate sizes for elements
+        parseFormat(root, [zoomScaleFormatHandler.parse], context.zoomScaleFormat, context);
 
-    const processor = option.includeRoot
-        ? context.elementProcessors.element
-        : context.elementProcessors.child;
+        const processor = option.includeRoot
+            ? context.elementProcessors.element
+            : context.elementProcessors.child;
 
-    processor(model, root, context);
+        processor(model, root, context);
+    }
 
     normalizeContentModel(model);
 

diff --git a/packages/roosterjs-content-model/lib/domToModel/processors/blockDecoratorProcessor.ts b/packages/roosterjs-content-model/lib/domToModel/processors/blockDecoratorProcessor.ts
@@ -0,0 +1,21 @@
+import { ContentModelSegmentFormat } from '../../publicTypes/format/ContentModelSegmentFormat';
+import { createParagraphDecorator } from '../../modelApi/creators/createParagraphDecorator';
+import { ElementProcessor } from '../../publicTypes/context/ElementProcessor';
+import { knownElementProcessor } from './knownElementProcessor';
+import { parseFormat } from '../utils/parseFormat';
+import { stackFormat } from '../utils/stackFormat';
+
+/**
+ * @internal
+ */
+export const blockDecoratorProcessor: ElementProcessor<HTMLElement> = (group, element, context) => {
+    stackFormat(context, { blockDecorator: 'empty' }, () => {
+        const segmentFormat: ContentModelSegmentFormat = {};
+
+        parseFormat(element, context.formatParsers.segmentOnBlock, segmentFormat, context);
+
+        context.blockDecorator = createParagraphDecorator(element.tagName, segmentFormat);
+
+        knownElementProcessor(group, element, context);
+    });
+};
diff --git a/packages/roosterjs-content-model/lib/domToModel/processors/codeProcessor.ts b/packages/roosterjs-content-model/lib/domToModel/processors/codeProcessor.ts
@@ -0,0 +1,15 @@
+import { ElementProcessor } from '../../publicTypes/context/ElementProcessor';
+import { knownElementProcessor } from './knownElementProcessor';
+import { parseFormat } from '../utils/parseFormat';
+import { stackFormat } from '../utils/stackFormat';
+
+/**
+ * @internal
+ */
+export const codeProcessor: ElementProcessor<HTMLElement> = (group, element, context) => {
+    stackFormat(context, { code: 'codeDefault' }, () => {
+        parseFormat(element, context.formatParsers.code, context.code.format, context);
+
+        knownElementProcessor(group, element, context);
+    });
+};