ShadowEdit selection

microsoft · Apr 4, 2024 · 53e94b0 · 53e94b0
1 parent 1377277
commit 53e94b0
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 0 deletions.
diff --git a/packages/roosterjs-content-model-core/lib/coreApi/setContentModel/setContentModel.ts b/packages/roosterjs-content-model-core/lib/coreApi/setContentModel/setContentModel.ts
@@ -6,6 +6,9 @@ import {
 } from 'roosterjs-content-model-dom';
 import type { SetContentModel } from 'roosterjs-content-model-types';
 
+const SelectionClassName = '__shadowEditSelection';
+const SelectionSelector = '.' + SelectionClassName;
+
 /**
  * @internal
  * Set content with content model
@@ -15,6 +18,16 @@ import type { SetContentModel } from 'roosterjs-content-model-types';
  */
 export const setContentModel: SetContentModel = (core, model, option, onNodeCreated) => {
     const editorContext = core.api.createEditorContext(core, true /*saveIndex*/);
+
+    if (core.lifecycle.shadowEditFragment) {
+        editorContext.selectionClassName = SelectionClassName;
+        core.api.setEditorStyle(core, SelectionClassName, 'background-color: #ddd!important', [
+            SelectionSelector,
+        ]);
+    } else {
+        core.api.setEditorStyle(core, SelectionClassName, null /*rule*/);
+    }
+
     const modelToDomContext = option
         ? createModelToDomContext(
               editorContext,

diff --git a/packages/roosterjs-content-model-dom/lib/modelToDom/utils/handleSegmentCommon.ts b/packages/roosterjs-content-model-dom/lib/modelToDom/utils/handleSegmentCommon.ts
@@ -23,5 +23,9 @@ export function handleSegmentCommon(
 
     applyFormat(containerNode, context.formatAppliers.elementBasedSegment, segment.format, context);
 
+    if (segment.isSelected && context.selectionClassName) {
+        containerNode.className = context.selectionClassName;
+    }
+
     context.onNodeCreated?.(segment, segmentNode);
 }
diff --git a/packages/roosterjs-content-model-types/lib/context/EditorContext.ts b/packages/roosterjs-content-model-types/lib/context/EditorContext.ts
@@ -57,4 +57,6 @@ export interface EditorContext {
      * Root Font size in Px.
      */
     rootFontSize?: number;
+
+    selectionClassName?: string;
 }