Do not allow dragging readonly element

microsoft · Aug 4, 2023 · f61a076 · f61a076
1 parent bc2225f
commit f61a076
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 17 deletions.
diff --git a/packages/roosterjs-editor-core/lib/corePlugins/DOMEventPlugin.ts b/packages/roosterjs-editor-core/lib/corePlugins/DOMEventPlugin.ts
@@ -84,7 +84,8 @@ export default class DOMEventPlugin implements PluginWithState<DOMEventPluginSta
                 });
             },
 
-            // 4. Drop event
+            // 4. Drag and Drop event
+            dragstart: this.onDragStart,
             drop: this.onDrop,
 
             // 5. Focus management
@@ -146,6 +147,14 @@ export default class DOMEventPlugin implements PluginWithState<DOMEventPluginSta
         return this.state;
     }
 
+    private onDragStart = (e: Event) => {
+        const dragEvent = e as DragEvent;
+        const element = this.editor?.getElementAtCursor('*', dragEvent.target as Node);
+
+        if (element && !element.isContentEditable) {
+            dragEvent.preventDefault();
+        }
+    };
     private onDrop = () => {
         this.editor?.runAsync(editor => {
             editor.addUndoSnapshot(() => {}, ChangeSource.Drop);

diff --git a/packages/roosterjs-editor-core/lib/corePlugins/EntityPlugin.ts b/packages/roosterjs-editor-core/lib/corePlugins/EntityPlugin.ts
@@ -64,7 +64,6 @@ const REMOVE_ENTITY_OPERATIONS: (EntityOperation | CompatibleEntityOperation)[]
 export default class EntityPlugin implements PluginWithState<EntityPluginState> {
     private editor: IEditor | null = null;
     private state: EntityPluginState;
-    private disposer: (() => void) | null = null;
 
     /**
      * Construct a new instance of EntityPlugin
@@ -88,15 +87,12 @@ export default class EntityPlugin implements PluginWithState<EntityPluginState>
      */
     initialize(editor: IEditor) {
         this.editor = editor;
-        this.disposer = this.editor.addDomEventHandler('dragstart', this.onDragStart);
     }
 
     /**
      * Dispose this plugin
      */
     dispose() {
-        this.disposer?.();
-        this.disposer = null;
         this.editor = null;
         this.state.entityMap = {};
     }
@@ -277,18 +273,6 @@ export default class EntityPlugin implements PluginWithState<EntityPluginState>
         });
     }
 
-    private onDragStart = (e: Event) => {
-        const dragEvent = e as DragEvent;
-        const entityWrapper = this.editor?.getElementAtCursor(
-            getEntitySelector(),
-            dragEvent.target as Node
-        );
-
-        if (entityWrapper && getEntityFromElement(entityWrapper)?.isReadonly) {
-            dragEvent.preventDefault();
-        }
-    };
-
     private checkRemoveEntityForRange(event: Event) {
         const editableEntityElements: HTMLElement[] = [];
         const selector = getEntitySelector();