Selection Management step 1

package.json

@@ -1,6 +1,6 @@
 {
     "name": "roosterjs",
-    "version": "7.2.1",
+    "version": "7.2.2",
     "description": "Framework-independent javascript editor",
     "repository": {
         "type": "git",
@@ -67,4 +67,4 @@
         "sass-loader": "^7.1.0",
         "url-loader": "^1.1.2"
     }
-}
+}

packages/roosterjs-editor-core/lib/coreAPI/focus.ts

@@ -1,5 +1,5 @@
 import EditorCore, { Focus } from '../interfaces/EditorCore';
-import { getFirstLeafNode } from 'roosterjs-editor-dom';
+import { createRange, getFirstLeafNode } from 'roosterjs-editor-dom';
 import { PositionType } from 'roosterjs-editor-types';
 
 const focus: Focus = (core: EditorCore) => {
@@ -11,9 +11,16 @@ const focus: Focus = (core: EditorCore) => {
         // So here we always do a live selection pull on DOM and make it point in Editor. The pitfall is, the cursor could be reset
         // to very begin to of editor since we don't really have last saved selection (created on blur which does not fire in this case).
         // It should be better than the case you cannot type
-        if (!core.cachedSelectionRange || !core.api.select(core, core.cachedSelectionRange)) {
+        if (
+            !core.cachedSelectionRange ||
+            !core.api.selectRange(core, core.cachedSelectionRange, true /*skipSameRange*/)
+        ) {
             let node = getFirstLeafNode(core.contentDiv) || core.contentDiv;
-            core.api.select(core, node, PositionType.Begin);
+            core.api.selectRange(
+                core,
+                createRange(node, PositionType.Begin),
+                true /*skipSameRange*/
+            );
         }
     }
 

packages/roosterjs-editor-core/lib/coreAPI/insertNode.ts

@@ -116,10 +116,11 @@ const insertNode: InsertNode = (core: EditorCore, node: Node, option: InsertOpti
             range = createRange(pos);
             range.insertNode(node);
             if (option.updateCursor && nodeForCursor) {
-                core.api.select(core, new Position(nodeForCursor, PositionType.After).normalize());
-            } else {
-                core.api.select(core, rangeToRestore);
+                rangeToRestore = createRange(
+                    new Position(nodeForCursor, PositionType.After).normalize()
+                );
             }
+            core.api.selectRange(core, rangeToRestore);
 
             break;
         case ContentPosition.Outside:

packages/roosterjs-editor-core/lib/coreAPI/selectRange.ts

@@ -0,0 +1,56 @@
+import EditorCore, { Select, SelectRange } from '../interfaces/EditorCore';
+import hasFocus from './hasFocus';
+import { Browser, contains, createRange } from 'roosterjs-editor-dom';
+
+const selectRange: SelectRange = (core: EditorCore, range: Range, skipSameRange?: boolean) => {
+    if (contains(core.contentDiv, range)) {
+        let selection = core.document.defaultView.getSelection();
+        if (selection) {
+            let needAddRange = true;
+
+            if (selection.rangeCount > 0) {
+                // Workaround IE exception 800a025e
+                try {
+                    let currentRange: Range;
+                    // Do not remove/add range if current selection is the same with target range
+                    // Without this check, execCommand() may fail in Edge since we changed the selection
+                    if (
+                        (skipSameRange || Browser.isEdge) &&
+                        (currentRange =
+                            selection.rangeCount == 1 ? selection.getRangeAt(0) : null) &&
+                        currentRange.startContainer == range.startContainer &&
+                        currentRange.startOffset == range.startOffset &&
+                        currentRange.endContainer == range.endContainer &&
+                        currentRange.endOffset == range.endOffset
+                    ) {
+                        needAddRange = false;
+                    } else {
+                        selection.removeAllRanges();
+                    }
+                } catch (e) {}
+            }
+
+            if (needAddRange) {
+                selection.addRange(range);
+            }
+
+            if (!hasFocus(core)) {
+                core.cachedSelectionRange = range;
+            }
+
+            return true;
+        }
+    }
+
+    return false;
+};
+
+export default selectRange;
+
+/**
+ * @deprecated Only for compatibility with existing code, don't use ths function, use selectRange instead
+ */
+export const select: Select = (core: EditorCore, arg1: any, arg2?: any, arg3?: any, arg4?: any) => {
+    let range = arg1 instanceof Range ? arg1 : createRange(arg1, arg2, arg3, arg4);
+    return core.api.selectRange(core, range);
+};

packages/roosterjs-editor-core/lib/editor/Editor.ts

@@ -1,7 +1,6 @@
 import createEditorCore from './createEditorCore';
 import EditorCore from '../interfaces/EditorCore';
 import EditorOptions from '../interfaces/EditorOptions';
-import { Browser, getRangeFromSelectionPath, getSelectionPath } from 'roosterjs-editor-dom';
 import { GenericContentEditFeature } from '../interfaces/ContentEditFeature';
 import {
     BlockElement,
@@ -22,19 +21,23 @@ import {
     Rect,
 } from 'roosterjs-editor-types';
 import {
-    PositionContentSearcher,
-    ContentTraverser,
-    Position,
+    Browser,
+    collapseNodes,
     contains,
+    ContentTraverser,
+    createRange,
+    findClosestElementAncestor,
     fromHtml,
     getBlockElementAtNode,
-    findClosestElementAncestor,
-    getPositionRect,
     getInlineElementAtNode,
+    getPositionRect,
+    getRangeFromSelectionPath,
+    getSelectionPath,
     getTagOfNode,
     isNodeEmpty,
+    Position,
+    PositionContentSearcher,
     queryElements,
-    collapseNodes,
     wrap,
 } from 'roosterjs-editor-dom';
 
@@ -517,7 +520,8 @@ export default class Editor {
     ): boolean;
 
     public select(arg1: any, arg2?: any, arg3?: any, arg4?: any): boolean {
-        return this.core.api.select(this.core, arg1, arg2, arg3, arg4);
+        let range = arg1 instanceof Range ? arg1 : createRange(arg1, arg2, arg3, arg4);
+        return this.core.api.selectRange(this.core, range);
     }
 
     /**

packages/roosterjs-editor-core/lib/editor/createEditorCore.ts

@@ -12,7 +12,7 @@ import getSelectionRange from '../coreAPI/getSelectionRange';
 import hasFocus from '../coreAPI/hasFocus';
 import insertNode from '../coreAPI/insertNode';
 import MouseUpPlugin from '../corePlugins/MouseUpPlugin';
-import select from '../coreAPI/select';
+import selectRange, { select } from '../coreAPI/selectRange';
 import triggerEvent from '../coreAPI/triggerEvent';
 import TypeInContainerPlugin from '../corePlugins/TypeInContainerPlugin';
 import Undo from '../undo/Undo';
@@ -87,6 +87,7 @@ function createCoreApiMap(map?: Partial<CoreApiMap>): CoreApiMap {
         hasFocus: map.hasFocus || hasFocus,
         insertNode: map.insertNode || insertNode,
         select: map.select || select,
+        selectRange: map.selectRange || selectRange,
         triggerEvent: map.triggerEvent || triggerEvent,
     };
 }

packages/roosterjs-editor-core/lib/index.ts

@@ -16,6 +16,7 @@ export {
     HasFocus,
     InsertNode,
     Select,
+    SelectRange,
     TriggerEvent,
 } from './interfaces/EditorCore';
 export { default as EditorOptions } from './interfaces/EditorOptions';

packages/roosterjs-editor-core/lib/interfaces/EditorCore.ts

@@ -160,11 +160,22 @@ export type HasFocus = (core: EditorCore) => boolean;
 export type InsertNode = (core: EditorCore, node: Node, option: InsertOption) => boolean;
 
 /**
+ * @deprecated Use SelectRange instead
  * Select content
  * @param core The EditorCore object
  */
 export type Select = (core: EditorCore, arg1: any, arg2?: any, arg3?: any, arg4?: any) => boolean;
 
+/**
+ * Change the editor selection to the given range
+ * @param core The EditorCore object
+ * @param range The range to select
+ * @param skipSameRange When set to true, do nothing if the given range is the same with current selection
+ * in editor, otherwise it will always remove current selection ranage and set to the given one.
+ * This parameter is always treat as true in Edge to avoid some weird runtime exception.
+ */
+export type SelectRange = (core: EditorCore, range: Range, skipSameRange?: boolean) => boolean;
+
 /**
  * Trigger a plugin event
  * @param core The EditorCore object
@@ -232,11 +243,22 @@ export interface CoreApiMap {
     insertNode: InsertNode;
 
     /**
+     * @deprecated Use SelectRange instead
      * Select content
      * @param core The EditorCore object
      */
     select: Select;
 
+    /**
+     * Change the editor selection to the given range
+     * @param core The EditorCore object
+     * @param range The range to select
+     * @param skipSameRange When set to true, do nothing if the given range is the same with current selection
+     * in editor, otherwise it will always remove current selection ranage and set to the given one.
+     * This parameter is always treat as true in Edge to avoid some weird runtime exception.
+     */
+    selectRange: SelectRange;
+
     /**
      * Trigger a plugin event
      * @param core The EditorCore object

packages/roosterjs-editor-core/lib/test/coreApi/hasFocusTest.ts

@@ -1,6 +1,7 @@
 import createEditorCore from '../../editor/createEditorCore';
 import EditorCore from '../../interfaces/EditorCore';
 import hasFocus from '../../coreAPI/hasFocus';
+import { createRange } from 'roosterjs-editor-dom';
 
 describe('hasFocus', () => {
     let div: HTMLDivElement;
@@ -44,7 +45,7 @@ describe('hasFocus', () => {
         expect(hasFocus(core)).toBe(false);
 
         let span = core.contentDiv.querySelector('span');
-        core.api.select(core, span.firstChild, 1);
+        core.api.selectRange(core, createRange(span.firstChild, 1));
         expect(hasFocus(core)).toBe(true);
     });
 });

packages/roosterjs-editor-dom/lib/index.ts

@@ -38,10 +38,7 @@ export { getFirstLeafNode, getLastLeafNode } from './utils/getLeafNode';
 export { default as VTable, VCell } from './table/VTable';
 
 export { default as Position } from './selection/Position';
-export { default as createRange } from './selection/createRange';
+export { default as createRange, getRangeFromSelectionPath } from './selection/createRange';
 export { default as getPositionRect } from './selection/getPositionRect';
 export { default as isPositionAtBeginningOf } from './selection/isPositionAtBeginningOf';
-export {
-    default as getSelectionPath,
-    getRangeFromSelectionPath,
-} from './selection/getSelectionPath';
+export { default as getSelectionPath } from './selection/getSelectionPath';