Prepare for BeforeCutCopyEvent

demo/scripts/controls/sidePane/eventViewer/EventViewPane.tsx

@@ -33,6 +33,7 @@ const EventTypeMap = {
     [PluginEventType.PendingFormatStateChanged]: 'PendingFormatStateChanged',
     [PluginEventType.DarkModeChanged]: 'DarkModeChanged',
     [PluginEventType.Scroll]: 'Scroll',
+    [PluginEventType.BeforeCutCopy]: 'BeforeCutCopy',
 };
 
 export default class EventViewPane extends React.Component<
@@ -183,8 +184,14 @@ export default class EventViewPane extends React.Component<
                         Operation={operation} Type={type}; Id={id}
                     </span>
                 );
+
+            case PluginEventType.BeforeCutCopy:
+                const { isCut } = event;
+                return <span>isCut={isCut ? 'true' : 'false'}</span>;
+
+            default:
+                return null;
         }
-        return null;
     }
 
     private clear = () => {

packages/roosterjs-editor-core/lib/corePlugins/corePaste/CorePastePlugin.ts → packages/roosterjs-editor-core/lib/corePlugins/copyPaste/CopyPastePlugin.ts

@@ -6,17 +6,17 @@ const CONTAINER_HTML =
 
 /**
  * @internal
- * Core paste plugin for handling onPaste event and extract the pasted content
+ * Copy and paste plugin for handling onCopy and onPaste event
  */
-export default class CorePastePlugin implements EditorPlugin {
+export default class CopyPastePlugin implements EditorPlugin {
     private editor: IEditor;
     private disposer: () => void;
 
     /**
      * Get a friendly name of  this plugin
      */
     getName() {
-        return 'CorePaste';
+        return 'CopyPaste';
     }
 
     /**

packages/roosterjs-editor-core/lib/corePlugins/darkMode/DarkModePlugin.ts

@@ -10,7 +10,7 @@ import {
 
 /**
  * @internal
- * Copy plugin, hijacks copy events to normalize the content to the clipboard.
+ * Dark mode plugin, handles dark mode related color transform events
  */
 export default class DarkModePlugin implements PluginWithState<DarkModePluginState> {
     private editor: IEditor;
@@ -32,7 +32,7 @@ export default class DarkModePlugin implements PluginWithState<DarkModePluginSta
      * Get a friendly name of  this plugin
      */
     getName() {
-        return 'Copy';
+        return 'DarkMode';
     }
 
     /**

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

@@ -1,5 +1,5 @@
 import AutoCompletePlugin from '../corePlugins/autoComplete/AutoCompletePlugin';
-import CorePastePlugin from '../corePlugins/corePaste/CorePastePlugin';
+import CopyPastePlugin from '../corePlugins/copyPaste/CopyPastePlugin';
 import DarkModePlugin from '../corePlugins/darkMode/DarkModePlugin';
 import DOMEventPlugin from '../corePlugins/domEvent/DOMEventPlugin';
 import EditPlugin from '../corePlugins/edit/EditPlugin';
@@ -71,7 +71,7 @@ function createCorePlugins(
         pendingFormatState: map.pendingFormatState || new PendingFormatStatePlugin(),
         mouseUp: map.mouseUp || new MouseUpPlugin(),
         darkMode: map.darkMode || new DarkModePlugin(options),
-        paste: map.paste || new CorePastePlugin(),
+        copyPaste: map.copyPaste || new CopyPastePlugin(),
         entity: map.entity || new EntityPlugin(),
         lifecycle: map.lifecycle || new LifecyclePlugin(options, contentDiv),
     };

packages/roosterjs-editor-core/test/corePlugins/corePastePluginTest.ts → packages/roosterjs-editor-core/test/corePlugins/copyPastePluginTest.ts

@@ -1,9 +1,9 @@
 import * as dom from 'roosterjs-editor-dom';
-import CorePastePlugin from '../../lib/corePlugins/corePaste/CorePastePlugin';
+import CopyPastePlugin from '../../lib/corePlugins/copyPaste/CopyPastePlugin';
 import { ClipboardData, IEditor } from 'roosterjs-editor-types';
 
-describe('CorePastePlugin', () => {
-    let plugin: CorePastePlugin;
+describe('CopyPastePlugin', () => {
+    let plugin: CopyPastePlugin;
     let handler: (event: Event) => void;
     let paste: jasmine.Spy;
     let tempNode: HTMLElement = null;
@@ -19,7 +19,7 @@ describe('CorePastePlugin', () => {
 
     beforeEach(() => {
         handler = null;
-        plugin = new CorePastePlugin();
+        plugin = new CopyPastePlugin();
         spyOn(addDomEventHandler, 'default').and.callThrough();
         paste = jasmine.createSpy('paste');
 

packages/roosterjs-editor-types/lib/event/BeforeCutCopyEvent.ts

@@ -0,0 +1,27 @@
+import BasePluginEvent from './BasePluginEvent';
+import { PluginEventType } from './PluginEventType';
+
+/**
+ * Provides a chance for plugin to change the content before it is copied from editor.
+ */
+export default interface BeforeCutCopyEvent extends BasePluginEvent<PluginEventType.BeforeCutCopy> {
+    /**
+     * Raw DOM event
+     */
+    rawEvent: ClipboardEvent;
+
+    /**
+     * An object contains all related data for pasting
+     */
+    clonedRoot: HTMLDivElement;
+
+    /**
+     * The selection range under cloned root
+     */
+    range: Range;
+
+    /**
+     * Whether this is a cut event
+     */
+    isCut: boolean;
+}

packages/roosterjs-editor-types/lib/event/PluginEvent.ts

@@ -1,3 +1,4 @@
+import BeforeCutCopyEvent from './BeforeCutCopyEvent';
 import BeforeDisposeEvent from './BeforeDisposeEvent';
 import BeforePasteEvent from './BeforePasteEvent';
 import ContentChangedEvent from './ContentChangedEvent';
@@ -12,6 +13,7 @@ import { PluginDomEvent } from './PluginDomEvent';
  * Editor plugin event interface
  */
 export type PluginEvent =
+    | BeforeCutCopyEvent
     | BeforePasteEvent
     | ContentChangedEvent
     | EntityOperationEvent

packages/roosterjs-editor-types/lib/event/PluginEventType.ts

@@ -5,83 +5,88 @@ export const enum PluginEventType {
     /**
      * HTML KeyDown event
      */
-    KeyDown,
+    KeyDown = 0,
 
     /**
      * HTML KeyPress event
      */
-    KeyPress,
+    KeyPress = 1,
 
     /**
      * HTML KeyUp event
      */
-    KeyUp,
+    KeyUp = 2,
+
+    /**
+     * HTML Input / TextInput event
+     */
+    Input = 3,
 
     /**
      * HTML CompositionEnd event
      */
-    CompositionEnd,
+    CompositionEnd = 4,
 
     /**
      * HTML MouseDown event
      */
-    MouseDown,
+    MouseDown = 5,
 
     /**
      * HTML MouseUp event
      */
-    MouseUp,
+    MouseUp = 6,
 
     /**
      * Content changed event
      */
-    ContentChanged,
+    ContentChanged = 7,
 
     /**
      * Extract Content with a DOM tree event
      * This event is triggered when getContent() is called with triggerExtractContentEvent = true
      * Plugin can handle this event to remove the UI only markups to return clean HTML
      * by operating on a cloned DOM tree
      */
-    ExtractContentWithDom,
+    ExtractContentWithDom = 8,
 
     /**
-     * Before Paste event, provide a chance to change paste content
+     * Before Paste event, provide a chance to change copied content
      */
-    BeforePaste,
+    BeforeCutCopy = 9,
 
     /**
-     * Let plugin know editor is ready now
+     * Before Paste event, provide a chance to change paste content
      */
-    EditorReady,
+    BeforePaste = 10,
 
     /**
-     * Let plugin know editor is about to dispose
+     * Let plugin know editor is ready now
      */
-    BeforeDispose,
+    EditorReady = 11,
 
     /**
-     * HTML Input / TextInput event
+     * Let plugin know editor is about to dispose
      */
-    Input,
+    BeforeDispose = 12,
 
     /**
      * Pending format state (bold, italic, underline, ... with collapsed selection) is changed
      */
-    PendingFormatStateChanged,
+    PendingFormatStateChanged = 13,
 
     /**
      * Dark mode state is changed
      */
-    DarkModeChanged,
+    DarkModeChanged = 14,
 
     /**
      * Scroll event triggered by scroll container
      */
-    Scroll,
+    Scroll = 15,
 
     /**
      * Operating on an entity. See enum EntityOperation for more details about each operation
      */
-    EntityOperation,
+    EntityOperation = 16,
 }

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

@@ -22,6 +22,7 @@ export { RegionType } from './enum/RegionType';
 export { TableOperation } from './enum/TableOperation';
 
 // Event
+export { default as BeforeCutCopyEvent } from './event/BeforeCutCopyEvent';
 export { default as BasePluginEvent } from './event/BasePluginEvent';
 export { default as BeforeDisposeEvent } from './event/BeforeDisposeEvent';
 export { default as BeforePasteEvent } from './event/BeforePasteEvent';

packages/roosterjs-editor-types/lib/interface/CorePlugins.ts

@@ -62,9 +62,9 @@ export default interface CorePlugins {
     readonly darkMode: PluginWithState<DarkModePluginState>;
 
     /**
-     * Core paste plugin for handling onPaste event and extract the pasted content
+     * Copy and paste plugin for handling onCopy and onPaste event
      */
-    readonly paste: EditorPlugin;
+    readonly copyPaste: EditorPlugin;
 
     /**
      * Entity Plugin handles all operations related to an entity and generate entity specified events