Merge pull request #3004 from microsoft/u/nguyenvi/versionbump041825

U/nguyenvi/versionbump041825

Author: vinguyen12

README.md

@@ -51,6 +51,9 @@ There are also some extension packages to provide additional functionalities.
 1. [roosterjs-color-utils](https://microsoft.github.io/roosterjs/docs/modules/roosterjs_color_utils.html):
    Provide color transformation utility to make editor work under dark mode.
 
+2. [roosterjs-content-model-markdown](https://microsoft.github.io/roosterjs/docs/modules/roosterjs_content_model_types.html):
+   Defines public APIs to enable conversions between Markdown and ContentModel
+
 To be compatible with old (8.\*) versions, you can use `EditorAdapter` class from the following package which can act as a 8.\* Editor:
 
 1. [roosterjs-editor-adapter](https://microsoft.github.io/roosterjs/docs/modules/roosterjs_editor_adapter.html):

demo/scripts/controlsV2/sidePane/MarkdownPane/MarkdownPane.tsx

@@ -1,6 +1,9 @@
 import * as React from 'react';
-import { convertMarkdownToContentModel } from 'roosterjs-content-model-markdown';
 import { MarkdownPaneProps } from './MarkdownPanePlugin';
+import {
+    convertMarkdownToContentModel,
+    convertContentModelToMarkdown,
+} from 'roosterjs-content-model-markdown';
 import {
     createBr,
     createParagraph,
@@ -44,6 +47,14 @@ export default class MarkdownPane extends React.Component<MarkdownPaneProps> {
         });
     };
 
+    private generateMarkdown = () => {
+        const model = this.props.getEditor().getContentModelCopy('disconnected');
+        if (model) {
+            const content = convertContentModelToMarkdown(model);
+            this.html.current.value = content;
+        }
+    };
+
     render() {
         return (
             <div className={styles.container}>
@@ -62,6 +73,9 @@ export default class MarkdownPane extends React.Component<MarkdownPaneProps> {
                     <button type="button" onClick={this.convert}>
                         Convert
                     </button>
+                    <button type="button" onClick={this.generateMarkdown}>
+                        Create Markdown from editor content
+                    </button>
                 </div>
             </div>
         );

packages/roosterjs-content-model-api/lib/publicApi/format/getFormatState.ts

@@ -1,6 +1,10 @@
 import { reducedModelChildProcessor } from '../../modelApi/common/reducedModelChildProcessor';
 import { retrieveModelFormatState } from 'roosterjs-content-model-dom';
-import type { IEditor, ContentModelFormatState, ConflictFormatSolution } from 'roosterjs-content-model-types';
+import type {
+    IEditor,
+    ContentModelFormatState,
+    ConflictFormatSolution,
+} from 'roosterjs-content-model-types';
 
 /**
  * Get current format state
@@ -21,7 +25,13 @@ export function getFormatState(
 
     editor.formatContentModel(
         model => {
-            retrieveModelFormatState(model, pendingFormat, result, conflictSolution);
+            retrieveModelFormatState(
+                model,
+                pendingFormat,
+                result,
+                conflictSolution,
+                editor.getDOMHelper()
+            );
 
             return false;
         },

packages/roosterjs-content-model-api/test/publicApi/format/getFormatStateTest.ts

@@ -1,9 +1,13 @@
 import * as retrieveModelFormatState from 'roosterjs-content-model-dom/lib/modelApi/editing/retrieveModelFormatState';
-import { ContentModelDocument, ContentModelSegmentFormat } from 'roosterjs-content-model-types';
 import { ContentModelFormatState } from 'roosterjs-content-model-types';
 import { getFormatState } from '../../../lib/publicApi/format/getFormatState';
 import { IEditor } from 'roosterjs-content-model-types';
 import { reducedModelChildProcessor } from '../../../lib/modelApi/common/reducedModelChildProcessor';
+import {
+    ContentModelDocument,
+    ContentModelSegmentFormat,
+    DOMHelper,
+} from 'roosterjs-content-model-types';
 import {
     createContentModelDocument,
     createDomToModelContext,
@@ -23,6 +27,7 @@ describe('getFormatState', () => {
         expectedModel: ContentModelDocument,
         expectedFormat: ContentModelFormatState
     ) {
+        const mockedDOMHelper: DOMHelper = {} as any;
         const editor = ({
             getSnapshotsManager: () => ({
                 hasNewContent: false,
@@ -31,6 +36,7 @@ describe('getFormatState', () => {
             isDarkMode: () => false,
             getZoomScale: () => 1,
             getPendingFormat: () => pendingFormat,
+            getDOMHelper: () => mockedDOMHelper,
             formatContentModel: (callback: Function) => {
                 const model = createContentModelDocument();
                 const editorDiv = document.createElement('div');
@@ -73,7 +79,8 @@ describe('getFormatState', () => {
                 canRedo: false,
                 isDarkMode: false,
             },
-            'remove'
+            'remove',
+            mockedDOMHelper
         );
         expect(result).toEqual(expectedFormat);
     }

packages/roosterjs-content-model-core/lib/coreApi/setDOMSelection/setDOMSelection.ts

@@ -3,6 +3,7 @@ import { areSameSelections } from '../../corePlugin/cache/areSameSelections';
 import { ensureUniqueId } from '../setEditorStyle/ensureUniqueId';
 import { findLastedCoInMergedCell } from './findLastedCoInMergedCell';
 import { findTableCellElement } from './findTableCellElement';
+import { toggleCaret } from './toggleCaret';
 import {
     getSafeIdSelector,
     isNodeOfType,
@@ -17,11 +18,9 @@ import type {
 } from 'roosterjs-content-model-types';
 
 const DOM_SELECTION_CSS_KEY = '_DOMSelection';
-const HIDE_CURSOR_CSS_KEY = '_DOMSelectionHideCursor';
 const HIDE_SELECTION_CSS_KEY = '_DOMSelectionHideSelection';
 const IMAGE_ID = 'image';
 const TABLE_ID = 'table';
-const CARET_CSS_RULE = 'caret-color: transparent';
 const TRANSPARENT_SELECTION_CSS_RULE = 'background-color: transparent !important;';
 const SELECTION_SELECTOR = '*::selection';
 const DEFAULT_SELECTION_BORDER_COLOR = '#DB626C';
@@ -44,9 +43,10 @@ export const setDOMSelection: SetDOMSelection = (core, selection, skipSelectionC
     const isDarkMode = core.lifecycle.isDarkMode;
     core.selection.skipReselectOnFocus = true;
     core.api.setEditorStyle(core, DOM_SELECTION_CSS_KEY, null /*cssRule*/);
-    core.api.setEditorStyle(core, HIDE_CURSOR_CSS_KEY, null /*cssRule*/);
     core.api.setEditorStyle(core, HIDE_SELECTION_CSS_KEY, null /*cssRule*/);
 
+    toggleCaret(core, false /* hide */);
+
     try {
         switch (selection?.type) {
             case 'image':
@@ -137,14 +137,15 @@ export const setDOMSelection: SetDOMSelection = (core, selection, skipSelectionC
                     `background-color:${tableSelectionColor}!important;`,
                     tableSelectors
                 );
-                core.api.setEditorStyle(core, HIDE_CURSOR_CSS_KEY, CARET_CSS_RULE);
                 core.api.setEditorStyle(
                     core,
                     HIDE_SELECTION_CSS_KEY,
                     TRANSPARENT_SELECTION_CSS_RULE,
                     [SELECTION_SELECTOR]
                 );
 
+                toggleCaret(core, true /* hide */);
+
                 const nodeToSelect = firstCell.cell?.firstElementChild || firstCell.cell;
 
                 if (nodeToSelect) {

packages/roosterjs-content-model-core/lib/coreApi/setDOMSelection/toggleCaret.ts

@@ -0,0 +1,13 @@
+import type { EditorCore } from 'roosterjs-content-model-types';
+
+const CARET_CSS_RULE = 'caret-color: transparent';
+const HIDE_CURSOR_CSS_KEY = '_DOMSelectionHideCursor';
+
+/**
+ * @internal Show/Hide caret in editor
+ * @param core The editor core
+ * @param isHiding True to hide caret, false to show caret
+ */
+export function toggleCaret(core: EditorCore, isHiding: boolean) {
+    core.api.setEditorStyle(core, HIDE_CURSOR_CSS_KEY, isHiding ? CARET_CSS_RULE : null);
+}

packages/roosterjs-content-model-core/lib/coreApi/switchShadowEdit/switchShadowEdit.ts

@@ -1,4 +1,5 @@
 import { iterateSelections, moveChildNodes } from 'roosterjs-content-model-dom';
+import { toggleCaret } from '../setDOMSelection/toggleCaret';
 import type { SwitchShadowEdit } from 'roosterjs-content-model-types';
 
 /**
@@ -32,10 +33,14 @@ export const switchShadowEdit: SwitchShadowEdit = (editorCore, isOn): void => {
                 core.cache.cachedModel = model;
             }
 
+            toggleCaret(core, true /* hide */);
+
             core.lifecycle.shadowEditFragment = fragment;
         } else {
             core.lifecycle.shadowEditFragment = null;
 
+            toggleCaret(core, false /* hide */);
+
             core.api.triggerEvent(
                 core,
                 {

packages/roosterjs-content-model-core/lib/corePlugin/entity/entityDelimiterUtils.ts

@@ -284,8 +284,15 @@ function handleInputOnDelimiter(
             });
         } else {
             if (isEnter) {
-                rawEvent.preventDefault();
-                editor.formatContentModel(handleEnterInlineEntity);
+                editor.formatContentModel((model, context) => {
+                    const result = handleEnterInlineEntity(model, context);
+
+                    if (result) {
+                        rawEvent.preventDefault();
+                    }
+
+                    return result;
+                });
             } else {
                 editor.takeSnapshot();
                 editor
@@ -331,10 +338,15 @@ export const handleEnterInlineEntity: ContentModelFormatter = model => {
     iterateSelections(model, (path, _tableContext, block) => {
         if (block?.blockType == 'Paragraph') {
             readonlySelectionBlock = block;
-            selectionBlockParent = path[path.length - 1];
+            selectionBlockParent = path[0];
         }
     });
 
+    if (selectionBlockParent?.blockGroupType == 'ListItem') {
+        // No need to handle list item since it will be handled by common enter handler code
+        return false;
+    }
+
     if (readonlySelectionBlock && selectionBlockParent) {
         const markerIndex = readonlySelectionBlock.segments.findIndex(
             segment => segment.segmentType == 'SelectionMarker'

packages/roosterjs-content-model-core/lib/editor/core/DOMHelperImpl.ts

@@ -1,5 +1,5 @@
 import { isNodeOfType, parseValueWithUnit, toArray } from 'roosterjs-content-model-dom';
-import type { DOMHelper } from 'roosterjs-content-model-types';
+import type { ContentModelSegmentFormat, DOMHelper } from 'roosterjs-content-model-types';
 
 class DOMHelperImpl implements DOMHelper {
     constructor(private contentDiv: HTMLElement) {}
@@ -88,6 +88,31 @@ class DOMHelperImpl implements DOMHelper {
     getClonedRoot(): HTMLElement {
         return this.contentDiv.cloneNode(true /*deep*/) as HTMLElement;
     }
+
+    /**
+     * Get format of the container element
+     */
+    getContainerFormat(): ContentModelSegmentFormat {
+        const window = this.contentDiv.ownerDocument.defaultView;
+
+        const style = window?.getComputedStyle(this.contentDiv);
+
+        return style
+            ? {
+                  fontSize: style.fontSize,
+                  fontFamily: style.fontFamily,
+                  fontWeight: style.fontWeight,
+                  textColor: style.color,
+                  backgroundColor: style.backgroundColor,
+                  italic: style.fontStyle == 'italic',
+                  letterSpacing: style.letterSpacing,
+                  lineHeight: style.lineHeight,
+                  strikethrough: style.textDecoration?.includes('line-through'),
+                  superOrSubScriptSequence: style.verticalAlign,
+                  underline: style.textDecoration?.includes('underline'),
+              }
+            : {};
+    }
 }
 
 /**

packages/roosterjs-content-model-core/test/coreApi/switchShadowEdit/switchShadowEditTest.ts

@@ -1,4 +1,5 @@
 import * as iterateSelections from 'roosterjs-content-model-dom/lib/modelApi/selection/iterateSelections';
+import * as toggleCaret from '../../../lib/coreApi/setDOMSelection/toggleCaret';
 import { EditorCore } from 'roosterjs-content-model-types';
 import { switchShadowEdit } from '../../../lib/coreApi/switchShadowEdit/switchShadowEdit';
 
@@ -11,12 +12,14 @@ describe('switchShadowEdit', () => {
     let setContentModel: jasmine.Spy;
     let getSelectionRange: jasmine.Spy;
     let triggerEvent: jasmine.Spy;
+    let toggleCaretSpy: jasmine.Spy;
 
     beforeEach(() => {
         createContentModel = jasmine.createSpy('createContentModel').and.returnValue(mockedModel);
         setContentModel = jasmine.createSpy('setContentModel');
         getSelectionRange = jasmine.createSpy('getSelectionRange');
         triggerEvent = jasmine.createSpy('triggerEvent');
+        toggleCaretSpy = spyOn(toggleCaret, 'toggleCaret');
 
         const contentDiv = document.createElement('div');
 
@@ -50,6 +53,7 @@ describe('switchShadowEdit', () => {
                 },
                 false
             );
+            expect(toggleCaretSpy).toHaveBeenCalledWith(core, true);
         });
 
         it('with cache, isOn', () => {
@@ -69,6 +73,7 @@ describe('switchShadowEdit', () => {
                 },
                 false
             );
+            expect(toggleCaretSpy).toHaveBeenCalledWith(core, true);
         });
 
         it('no cache, isOff', () => {
@@ -79,6 +84,7 @@ describe('switchShadowEdit', () => {
             expect(core.cache.cachedModel).toBe(undefined);
 
             expect(triggerEvent).not.toHaveBeenCalled();
+            expect(toggleCaretSpy).not.toHaveBeenCalled();
         });
 
         it('with cache, isOff', () => {
@@ -91,6 +97,7 @@ describe('switchShadowEdit', () => {
             expect(core.cache.cachedModel).toBe(mockedCachedModel);
 
             expect(triggerEvent).not.toHaveBeenCalled();
+            expect(toggleCaretSpy).not.toHaveBeenCalled();
         });
     });
 
@@ -107,6 +114,7 @@ describe('switchShadowEdit', () => {
             expect(core.cache.cachedModel).toBe(undefined);
 
             expect(triggerEvent).not.toHaveBeenCalled();
+            expect(toggleCaretSpy).not.toHaveBeenCalled();
         });
 
         it('with cache, isOn', () => {
@@ -119,6 +127,7 @@ describe('switchShadowEdit', () => {
             expect(core.cache.cachedModel).toBe(mockedCachedModel);
 
             expect(triggerEvent).not.toHaveBeenCalled();
+            expect(toggleCaretSpy).not.toHaveBeenCalled();
         });
 
         it('no cache, isOff', () => {
@@ -136,6 +145,7 @@ describe('switchShadowEdit', () => {
                 },
                 false
             );
+            expect(toggleCaretSpy).toHaveBeenCalledWith(core, false);
         });
 
         it('with cache, isOff', () => {
@@ -159,6 +169,7 @@ describe('switchShadowEdit', () => {
                 },
                 false
             );
+            expect(toggleCaretSpy).toHaveBeenCalledWith(core, false);
         });
     });
 });