diff --git a/demo/scripts/controlsV2/sidePane/editorOptions/ExperimentalFeatures.tsx b/demo/scripts/controlsV2/sidePane/editorOptions/ExperimentalFeatures.tsx index 2bd26858972..3a3fcc563ec 100644 --- a/demo/scripts/controlsV2/sidePane/editorOptions/ExperimentalFeatures.tsx +++ b/demo/scripts/controlsV2/sidePane/editorOptions/ExperimentalFeatures.tsx @@ -13,7 +13,6 @@ export class ExperimentalFeatures extends React.Component {this.renderFeature('PersistCache')} {this.renderFeature('HandleEnterKey')} - {this.renderFeature('LegacyImageSelection')} ); } diff --git a/packages/roosterjs-content-model-core/lib/corePlugin/selection/SelectionPlugin.ts b/packages/roosterjs-content-model-core/lib/corePlugin/selection/SelectionPlugin.ts index 420514d1466..57ea5a632d9 100644 --- a/packages/roosterjs-content-model-core/lib/corePlugin/selection/SelectionPlugin.ts +++ b/packages/roosterjs-content-model-core/lib/corePlugin/selection/SelectionPlugin.ts @@ -21,11 +21,9 @@ import type { ParsedTable, TableSelectionInfo, TableCellCoordinate, - MouseUpEvent, } from 'roosterjs-content-model-types'; const MouseLeftButton = 0; -const MouseMiddleButton = 1; const MouseRightButton = 2; const Up = 'ArrowUp'; const Down = 'ArrowDown'; @@ -141,7 +139,7 @@ class SelectionPlugin implements PluginWithState { break; case 'mouseUp': - this.onMouseUp(this.editor, event); + this.onMouseUp(); break; case 'keyDown': @@ -165,46 +163,30 @@ class SelectionPlugin implements PluginWithState { let image: HTMLImageElement | null; // Image selection - if (editor.isExperimentalFeatureEnabled('LegacyImageSelection')) { - if ( - rawEvent.button === MouseRightButton && - (image = - this.getClickingImage(rawEvent) ?? - this.getContainedTargetImage(rawEvent, selection)) && - image.isContentEditable - ) { - this.selectImageWithRange(image, rawEvent); - return; - } else if (selection?.type == 'image' && selection.image !== rawEvent.target) { - this.selectBeforeOrAfterElement(editor, selection.image); - return; - } - } else { - if ( - selection?.type == 'image' && - (rawEvent.button == MouseLeftButton || - (rawEvent.button == MouseRightButton && - !this.getClickingImage(rawEvent) && - !this.getContainedTargetImage(rawEvent, selection))) - ) { - this.setDOMSelection(null /*domSelection*/, null /*tableSelection*/); - } + if ( + selection?.type == 'image' && + (rawEvent.button == MouseLeftButton || + (rawEvent.button == MouseRightButton && + !this.getClickingImage(rawEvent) && + !this.getContainedTargetImage(rawEvent, selection))) + ) { + this.setDOMSelection(null /*domSelection*/, null /*tableSelection*/); + } - if ( - (image = - this.getClickingImage(rawEvent) ?? - this.getContainedTargetImage(rawEvent, selection)) && - image.isContentEditable - ) { - this.setDOMSelection( - { - type: 'image', - image: image, - }, - null - ); - return; - } + if ( + (image = + this.getClickingImage(rawEvent) ?? + this.getContainedTargetImage(rawEvent, selection)) && + image.isContentEditable + ) { + this.setDOMSelection( + { + type: 'image', + image: image, + }, + null + ); + return; } // Table selection @@ -245,25 +227,6 @@ class SelectionPlugin implements PluginWithState { } } - private selectImageWithRange(image: HTMLImageElement, event: Event) { - const range = image.ownerDocument.createRange(); - range.selectNode(image); - - const domSelection = this.editor?.getDOMSelection(); - if (domSelection?.type == 'image' && image == domSelection.image) { - event.preventDefault(); - } else { - this.setDOMSelection( - { - type: 'range', - isReverted: false, - range, - }, - null - ); - } - } - private onMouseMove = (event: Event) => { if (this.editor && this.state.tableSelection) { const hasTableSelection = !!this.state.tableSelection.lastCo; @@ -324,21 +287,7 @@ class SelectionPlugin implements PluginWithState { } }; - private onMouseUp(editor: IEditor, event: MouseUpEvent) { - let image: HTMLImageElement | null; - - if ( - editor.isExperimentalFeatureEnabled('LegacyImageSelection') && - (image = this.getClickingImage(event.rawEvent)) && - image.isContentEditable && - event.rawEvent.button != MouseMiddleButton && - (event.rawEvent.button == - MouseRightButton /* it's not possible to drag using right click */ || - event.isClicking) - ) { - this.selectImageWithRange(image, event.rawEvent); - } - + private onMouseUp() { this.detachMouseEvent(); } diff --git a/packages/roosterjs-content-model-types/lib/editor/ExperimentalFeature.ts b/packages/roosterjs-content-model-types/lib/editor/ExperimentalFeature.ts index 46e58d639df..80ec87a960a 100644 --- a/packages/roosterjs-content-model-types/lib/editor/ExperimentalFeature.ts +++ b/packages/roosterjs-content-model-types/lib/editor/ExperimentalFeature.ts @@ -10,6 +10,7 @@ export type ExperimentalFeature = */ | 'PersistCache' /** + * @deprecated * Workaround for the Legacy Image Edit */ | 'LegacyImageSelection'