Fix #2984 Hide caret for shadow edit (#2990)

* Fix #2984

* fix test

* fix build

Author: JiuqingSong

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/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);
         });
     });
 });