Content Model Bug fix: part 1

packages/roosterjs-content-model/lib/domToModel/processors/generalProcessor.ts

@@ -29,14 +29,15 @@ const generalSegmentProcessor: ElementProcessor<HTMLElement> = (group, element,
         segment.isSelected = true;
     }
 
+    addSegment(group, segment);
+
     stackFormat(
         context,
         {
             segment:
                 'empty' /*clearFormat, General segment will include all properties and styles when generate back to HTML, so no need to carry over existing segment format*/,
         },
         () => {
-            addSegment(group, segment);
             context.elementProcessors.child(segment, element, context);
         }
     );

packages/roosterjs-content-model/lib/modelApi/selection/getSelectedParagraphs.ts

@@ -18,9 +18,34 @@ export function getSelectedParagraphs(group: ContentModelBlockGroup): SelectedPa
 
     getSelectedParagraphsInternal([group], result);
 
+    // Remove tail paragraph if first selection marker is the only selection
+    if (result.length > 1 && isOnlySelectionMarkerSelected(result, false /*checkFirstParagraph*/)) {
+        result.pop();
+    }
+
+    // Remove head paragraph if first selection marker is the only selection
+    if (result.length > 1 && isOnlySelectionMarkerSelected(result, true /*checkFirstParagraph*/)) {
+        result.shift();
+    }
+
     return result;
 }
 
+function isOnlySelectionMarkerSelected(
+    paragraphs: SelectedParagraphWithPath[],
+    checkFirstParagraph: boolean
+): boolean {
+    const paragraph = paragraphs[checkFirstParagraph ? 0 : paragraphs.length - 1].paragraph;
+    const selectedSegments = paragraph.segments.filter(s => s.isSelected);
+
+    return (
+        selectedSegments.length == 1 &&
+        selectedSegments[0].segmentType == 'SelectionMarker' &&
+        selectedSegments[0] ==
+            paragraph.segments[checkFirstParagraph ? paragraph.segments.length - 1 : 0]
+    );
+}
+
 function getSelectedParagraphsInternal(
     path: ContentModelBlockGroup[],
     result: SelectedParagraphWithPath[],

packages/roosterjs-content-model/lib/modelToDom/context/defaultContentModelHandlers.ts

@@ -2,7 +2,9 @@ import { ContentModelHandlerMap } from '../../publicTypes/context/ModelToDomSett
 import { handleBlock } from '../handlers/handleBlock';
 import { handleBlockGroup } from '../handlers/handleBlockGroup';
 import { handleBlockGroupChildren } from '../handlers/handleBlockGroupChildren';
+import { handleBr } from '../handlers/handleBr';
 import { handleEntity } from '../handlers/handleEntity';
+import { handleGeneralModel } from '../handlers/handleGeneralModel';
 import { handleHR } from '../handlers/handleHr';
 import { handleImage } from '../handlers/handleImage';
 import { handleList } from '../handlers/handleList';
@@ -11,6 +13,7 @@ import { handleParagraph } from '../handlers/handleParagraph';
 import { handleQuote } from '../handlers/handleQuote';
 import { handleSegment } from '../handlers/handleSegment';
 import { handleTable } from '../handlers/handleTable';
+import { handleText } from '../handlers/handleText';
 
 /**
  * @internal
@@ -19,7 +22,9 @@ export const defaultContentModelHandlers: ContentModelHandlerMap = {
     block: handleBlock,
     blockGroup: handleBlockGroup,
     blockGroupChildren: handleBlockGroupChildren,
+    br: handleBr,
     entity: handleEntity,
+    general: handleGeneralModel,
     hr: handleHR,
     image: handleImage,
     list: handleList,
@@ -28,4 +33,5 @@ export const defaultContentModelHandlers: ContentModelHandlerMap = {
     quote: handleQuote,
     segment: handleSegment,
     table: handleTable,
+    text: handleText,
 };

packages/roosterjs-content-model/lib/modelToDom/handlers/handleBlockGroup.ts

@@ -1,11 +1,6 @@
-import { applyFormat } from '../utils/applyFormat';
 import { ContentModelBlockGroup } from '../../publicTypes/block/group/ContentModelBlockGroup';
-import { ContentModelGeneralBlock } from '../../publicTypes/block/group/ContentModelGeneralBlock';
-import { ContentModelGeneralSegment } from '../../publicTypes/segment/ContentModelGeneralSegment';
 import { ContentModelHandler } from '../../publicTypes/context/ContentModelHandler';
-import { isNodeOfType } from '../../domUtils/isNodeOfType';
 import { ModelToDomContext } from '../../publicTypes/context/ModelToDomContext';
-import { NodeType } from 'roosterjs-editor-types';
 
 /**
  * @internal
@@ -18,19 +13,7 @@ export const handleBlockGroup: ContentModelHandler<ContentModelBlockGroup> = (
 ) => {
     switch (group.blockGroupType) {
         case 'General':
-            const newParent = group.element.cloneNode();
-            parent.appendChild(newParent);
-
-            context.modelHandlers.blockGroupChildren(doc, newParent, group, context);
-
-            if (isGeneralSegment(group) && isNodeOfType(newParent, NodeType.Element)) {
-                if (!group.element.firstChild) {
-                    context.regularSelection.current.segment = newParent;
-                }
-
-                applyFormat(newParent, context.formatAppliers.segment, group.format, context);
-            }
-
+            context.modelHandlers.general(doc, parent, group, context);
             break;
 
         case 'Quote':
@@ -46,7 +29,3 @@ export const handleBlockGroup: ContentModelHandler<ContentModelBlockGroup> = (
             break;
     }
 };
-
-function isGeneralSegment(block: ContentModelGeneralBlock): block is ContentModelGeneralSegment {
-    return (block as ContentModelGeneralSegment).segmentType == 'General';
-}

packages/roosterjs-content-model/lib/modelToDom/handlers/handleBr.ts

@@ -0,0 +1,22 @@
+import { applyFormat } from '../utils/applyFormat';
+import { ContentModelBr } from '../../publicTypes/segment/ContentModelBr';
+import { ContentModelHandler } from '../../publicTypes/context/ContentModelHandler';
+import { ModelToDomContext } from '../../publicTypes/context/ModelToDomContext';
+
+/**
+ * @internal
+ */
+export const handleBr: ContentModelHandler<ContentModelBr> = (
+    doc: Document,
+    parent: Node,
+    segment: ContentModelBr,
+    context: ModelToDomContext
+) => {
+    const br = doc.createElement('br');
+    const element = doc.createElement('span');
+    element.appendChild(br);
+    parent.appendChild(element);
+
+    context.regularSelection.current.segment = br;
+    applyFormat(element, context.formatAppliers.segment, segment.format, context);
+};

packages/roosterjs-content-model/lib/modelToDom/handlers/handleGeneralModel.ts

@@ -0,0 +1,34 @@
+import { applyFormat } from '../utils/applyFormat';
+import { ContentModelGeneralBlock } from '../../publicTypes/block/group/ContentModelGeneralBlock';
+import { ContentModelGeneralSegment } from '../../publicTypes/segment/ContentModelGeneralSegment';
+import { ContentModelHandler } from '../../publicTypes/context/ContentModelHandler';
+import { isNodeOfType } from '../../domUtils/isNodeOfType';
+import { ModelToDomContext } from '../../publicTypes/context/ModelToDomContext';
+import { NodeType } from 'roosterjs-editor-types';
+
+/**
+ * @internal
+ */
+export const handleGeneralModel: ContentModelHandler<ContentModelGeneralBlock> = (
+    doc: Document,
+    parent: Node,
+    group: ContentModelGeneralBlock,
+    context: ModelToDomContext
+) => {
+    const newParent = group.element.cloneNode();
+    parent.appendChild(newParent);
+
+    context.modelHandlers.blockGroupChildren(doc, newParent, group, context);
+
+    if (isGeneralSegment(group) && isNodeOfType(newParent, NodeType.Element)) {
+        if (!group.element.firstChild) {
+            context.regularSelection.current.segment = newParent;
+        }
+
+        applyFormat(newParent, context.formatAppliers.segment, group.format, context);
+    }
+};
+
+function isGeneralSegment(block: ContentModelGeneralBlock): block is ContentModelGeneralSegment {
+    return (block as ContentModelGeneralSegment).segmentType == 'General';
+}

packages/roosterjs-content-model/lib/modelToDom/handlers/handleSegment.ts

@@ -1,4 +1,3 @@
-import { applyFormat } from '../utils/applyFormat';
 import { ContentModelHandler } from '../../publicTypes/context/ContentModelHandler';
 import { ContentModelSegment } from '../../publicTypes/segment/ContentModelSegment';
 import { ModelToDomContext } from '../../publicTypes/context/ModelToDomContext';
@@ -21,46 +20,28 @@ export const handleSegment: ContentModelHandler<ContentModelSegment> = (
         };
     }
 
-    let element: HTMLElement | null = null;
-
     switch (segment.segmentType) {
         case 'Text':
-            const txt = doc.createTextNode(segment.text);
-
-            element = doc.createElement('span');
-            element.appendChild(txt);
-            regularSelection.current.segment = txt;
-
-            applyFormat(element, context.formatAppliers.segment, segment.format, context);
-
+            context.modelHandlers.text(doc, parent, segment, context);
             break;
 
         case 'Br':
-            const br = doc.createElement('br');
-            element = doc.createElement('span');
-            element.appendChild(br);
-            regularSelection.current.segment = br;
-
-            applyFormat(element, context.formatAppliers.segment, segment.format, context);
+            context.modelHandlers.br(doc, parent, segment, context);
             break;
 
         case 'Image':
             context.modelHandlers.image(doc, parent, segment, context);
             break;
 
         case 'General':
-            context.modelHandlers.block(doc, parent, segment, context);
+            context.modelHandlers.general(doc, parent, segment, context);
             break;
 
         case 'Entity':
             context.modelHandlers.entity(doc, parent, segment, context);
             break;
     }
 
-    if (element) {
-        parent.appendChild(element);
-    }
-
     // If end position is not set, or it is not finalized, and current segment is still in selection, set end position
     // If there is other selection, we will overwrite regularSelection.end when we process that segment
     if (segment.isSelected && regularSelection.start) {

packages/roosterjs-content-model/lib/modelToDom/handlers/handleText.ts

@@ -0,0 +1,23 @@
+import { applyFormat } from '../utils/applyFormat';
+import { ContentModelHandler } from '../../publicTypes/context/ContentModelHandler';
+import { ContentModelText } from '../../publicTypes/segment/ContentModelText';
+import { ModelToDomContext } from '../../publicTypes/context/ModelToDomContext';
+
+/**
+ * @internal
+ */
+export const handleText: ContentModelHandler<ContentModelText> = (
+    doc: Document,
+    parent: Node,
+    segment: ContentModelText,
+    context: ModelToDomContext
+) => {
+    const txt = doc.createTextNode(segment.text);
+    const element = doc.createElement('span');
+
+    element.appendChild(txt);
+    parent.appendChild(element);
+
+    context.regularSelection.current.segment = txt;
+    applyFormat(element, context.formatAppliers.segment, segment.format, context);
+};

packages/roosterjs-content-model/lib/publicTypes/context/ModelToDomSettings.ts

@@ -1,8 +1,10 @@
 import { ContentModelBlock } from '../block/ContentModelBlock';
 import { ContentModelBlockGroup } from '../block/group/ContentModelBlockGroup';
+import { ContentModelBr } from '../segment/ContentModelBr';
 import { ContentModelEntity } from '../entity/ContentModelEntity';
 import { ContentModelFormatBase } from '../format/ContentModelFormatBase';
 import { ContentModelFormatMap } from '../format/ContentModelFormatMap';
+import { ContentModelGeneralBlock } from '../block/group/ContentModelGeneralBlock';
 import { ContentModelHandler } from './ContentModelHandler';
 import { ContentModelHR } from '../block/ContentModelHR';
 import { ContentModelImage } from '../segment/ContentModelImage';
@@ -11,6 +13,7 @@ import { ContentModelParagraph } from '../block/ContentModelParagraph';
 import { ContentModelQuote } from '../block/group/ContentModelQuote';
 import { ContentModelSegment } from '../segment/ContentModelSegment';
 import { ContentModelTable } from '../block/ContentModelTable';
+import { ContentModelText } from '../segment/ContentModelText';
 import { FormatHandlerTypeMap, FormatKey } from '../format/FormatHandlerTypeMap';
 import { ModelToDomContext } from './ModelToDomContext';
 
@@ -59,11 +62,21 @@ export interface ContentModelHandlerTypeMap {
      */
     blockGroupChildren: ContentModelBlockGroup;
 
+    /**
+     * Content Model type for ContentModelBr
+     */
+    br: ContentModelBr;
+
     /**
      * Content Model type for child models of ContentModelEntity
      */
     entity: ContentModelEntity;
 
+    /**
+     * Content Model type for ContentModelGeneralBlock
+     */
+    general: ContentModelGeneralBlock;
+
     /**
      * Content Model type for ContentModelHR
      */
@@ -103,6 +116,11 @@ export interface ContentModelHandlerTypeMap {
      * Content Model type for ContentModelTable
      */
     table: ContentModelTable;
+
+    /**
+     * Content Model type for ContentModelText
+     */
+    text: ContentModelText;
 }
 
 /**