[Bump RoosterJS] Content-Model: 0.26.1 (#2426)

* Workaround for no mouseUp event (#2423) * bump content model to 0.26.1
microsoft · Feb 20, 2024 · ccc9260 · ccc9260
1 parent 6ab02e6
commit ccc9260
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 3 deletions.
diff --git a/packages-content-model/roosterjs-content-model-core/lib/corePlugin/SelectionPlugin.ts b/packages-content-model/roosterjs-content-model-core/lib/corePlugin/SelectionPlugin.ts
@@ -17,6 +17,7 @@ class SelectionPlugin implements PluginWithState<SelectionPluginState> {
     private state: SelectionPluginState;
     private disposer: (() => void) | null = null;
     private isSafari = false;
+    private isMac = false;
 
     constructor(options: StandaloneEditorOptions) {
         this.state = {
@@ -43,6 +44,7 @@ class SelectionPlugin implements PluginWithState<SelectionPluginState> {
         const document = this.editor.getDocument();
 
         this.isSafari = !!env.isSafari;
+        this.isMac = !!env.isMac;
 
         if (this.isSafari) {
             document.addEventListener('selectionchange', this.onSelectionChangeSafari);
@@ -91,7 +93,9 @@ class SelectionPlugin implements PluginWithState<SelectionPluginState> {
                     (image = this.getClickingImage(event.rawEvent)) &&
                     image.isContentEditable &&
                     event.rawEvent.button != MouseMiddleButton &&
-                    event.isClicking
+                    (event.rawEvent.button ==
+                        MouseRightButton /* it's not possible to drag using right click */ ||
+                        event.isClicking)
                 ) {
                     this.selectImage(this.editor, image);
                 }
@@ -101,7 +105,9 @@ class SelectionPlugin implements PluginWithState<SelectionPluginState> {
                 selection = this.editor.getDOMSelection();
                 if (
                     event.rawEvent.button === MouseRightButton &&
-                    (image = this.getClickingImage(event.rawEvent)) &&
+                    (image =
+                        this.getClickingImage(event.rawEvent) ??
+                        this.getContainedTargetImage(event.rawEvent, selection)) &&
                     image.isContentEditable
                 ) {
                     this.selectImage(this.editor, image);
@@ -168,6 +174,27 @@ class SelectionPlugin implements PluginWithState<SelectionPluginState> {
             : null;
     }
 
+    //MacOS will not create a mouseUp event if contextMenu event is not prevent defaulted.
+    //Make sure we capture image target even if image is wrapped
+    private getContainedTargetImage = (
+        event: MouseEvent,
+        previousSelection: DOMSelection | null
+    ): HTMLImageElement | null => {
+        if (!this.isMac || !previousSelection || previousSelection.type !== 'image') {
+            return null;
+        }
+
+        const target = event.target as Node;
+        if (
+            isNodeOfType(target, 'ELEMENT_NODE') &&
+            isElementOfType(target, 'span') &&
+            target.firstChild === previousSelection.image
+        ) {
+            return previousSelection.image;
+        }
+        return null;
+    };
+
     private onFocus = () => {
         if (!this.state.skipReselectOnFocus && this.state.selection) {
             this.editor?.setDOMSelection(this.state.selection);

diff --git a/versions.json b/versions.json
@@ -1,7 +1,7 @@
 {
     "packages": "8.60.0",
     "packages-ui": "8.55.0",
-    "packages-content-model": "0.26.0",
+    "packages-content-model": "0.26.1",
     "overrides": {
         "roosterjs-editor-plugins": "8.60.2",
         "roosterjs-editor-adapter": "0.26.0"