Fix #2078 (#2092)

* Fix #2078 * add test
microsoft · Sep 22, 2023 · b69cfbe · b69cfbe
1 parent 018a4b4
commit b69cfbe
Show file tree

Hide file tree

Showing 4 changed files with 58 additions and 16 deletions.
diff --git a/...ages-content-model/roosterjs-content-model-dom/lib/modelToDom/handlers/handleParagraph.ts b/...ages-content-model/roosterjs-content-model-dom/lib/modelToDom/handlers/handleParagraph.ts
@@ -109,6 +109,7 @@ export const handleParagraph: ContentModelBlockHandler<ContentModelParagraph> =
                 }
             } else {
                 unwrap(container);
+                container = undefined;
             }
         });
     }

diff --git a/...content-model/roosterjs-content-model-dom/test/modelToDom/handlers/handleParagraphTest.ts b/...content-model/roosterjs-content-model-dom/test/modelToDom/handlers/handleParagraphTest.ts
@@ -465,6 +465,30 @@ describe('handleParagraph', () => {
         expect(onNodeCreated.calls.argsFor(0)[1]).toBe(parent.querySelector('div'));
     });
 
+    it('With onNodeCreated on implicit paragraph', () => {
+        const parent = document.createElement('div');
+        const segment: ContentModelSegment = {
+            segmentType: 'Text',
+            text: 'test',
+            format: {},
+        };
+        const paragraph: ContentModelParagraph = {
+            blockType: 'Paragraph',
+            segments: [segment],
+            format: {},
+            isImplicit: true,
+        };
+
+        const onNodeCreated = jasmine.createSpy('onNodeCreated');
+
+        context.onNodeCreated = onNodeCreated;
+
+        handleParagraph(document, parent, paragraph, context, null);
+
+        expect(parent.innerHTML).toBe('');
+        expect(onNodeCreated).not.toHaveBeenCalled();
+    });
+
     it('Paragraph with only selection marker and BR', () => {
         const paragraph: ContentModelParagraph = {
             blockType: 'Paragraph',

diff --git a/...odel/roosterjs-content-model-editor/lib/editor/corePlugins/ContentModelCopyPastePlugin.ts b/...odel/roosterjs-content-model-editor/lib/editor/corePlugins/ContentModelCopyPastePlugin.ts
@@ -8,15 +8,10 @@ import { iterateSelections } from '../../modelApi/selection/iterateSelections';
 import {
     contentModelToDom,
     createModelToDomContext,
+    isNodeOfType,
     normalizeContentModel,
 } from 'roosterjs-content-model-dom';
-import type {
-    ContentModelBlock,
-    ContentModelBlockGroup,
-    ContentModelDecorator,
-    ContentModelSegment,
-    ContentModelTableRow,
-} from 'roosterjs-content-model-types';
+import type { OnNodeCreated } from 'roosterjs-content-model-types';
 import {
     addRangeToSelection,
     createElement,
@@ -38,6 +33,7 @@ import {
     SelectionRangeTypes,
     SelectionRangeEx,
     ColorTransformDirection,
+    NodeType,
 } from 'roosterjs-editor-types';
 
 /**
@@ -181,6 +177,8 @@ export default class ContentModelCopyPastePlugin implements PluginWithState<Copy
                         );
                     }
                 });
+            } else {
+                cleanUpAndRestoreSelection(tempDiv);
             }
         }
     }
@@ -276,16 +274,11 @@ function selectionExToRange(
  * @internal
  * Exported only for unit testing
  */
-export const onNodeCreated = (
-    _:
-        | ContentModelBlock
-        | ContentModelBlockGroup
-        | ContentModelSegment
-        | ContentModelDecorator
-        | ContentModelTableRow,
-    node: Node
-): void => {
+export const onNodeCreated: OnNodeCreated = (_, node): void => {
     if (safeInstanceOf(node, 'HTMLTableElement')) {
         wrap(node, 'div');
     }
+    if (isNodeOfType(node, NodeType.Element) && !node.isContentEditable) {
+        node.removeAttribute('contenteditable');
+    }
 };
diff --git a/...del/roosterjs-content-model-editor/test/editor/plugins/ContentModelCopyPastePluginTest.ts b/...del/roosterjs-content-model-editor/test/editor/plugins/ContentModelCopyPastePluginTest.ts
@@ -670,4 +670,28 @@ describe('ContentModelCopyPastePlugin |', () => {
             expect(preventDefaultSpy).toHaveBeenCalledTimes(1);
         });
     });
+
+    it('onNodeCreated with table', () => {
+        const div = document.createElement('div');
+        const table = document.createElement('table');
+
+        div.appendChild(table);
+
+        onNodeCreated(null!, table);
+
+        expect(div.innerHTML).toEqual('<div><table></table></div>');
+    });
+
+    it('onNodeCreated with readonly element', () => {
+        const div = document.createElement('div');
+        div.contentEditable = 'true';
+
+        const span = document.createElement('span');
+        div.appendChild(span);
+        span.contentEditable = 'false';
+
+        onNodeCreated(null!, span);
+
+        expect(div.innerHTML).toBe('<span></span>');
+    });
 });