feat(core): implement Clipboard Plugin

packages/core/src/index.ts

@@ -21,6 +21,7 @@ import { EditorAPI } from './api/index.js';
 import { generateId } from './utils/uid.js';
 import { Paragraph, BoldInlineTool, LinkInlineTool, ItalicInlineTool } from './tools/internal';
 import { ShortcutsPlugin } from './plugins/ShortcutsPlugin.js';
+import { ClipboardPlugin } from './plugins/ClipboardPlugin.js';
 
 /**
  * If no holder is provided via config, the editor will be appended to the element with this id
@@ -135,6 +136,7 @@ export default class Core {
     this.use(ItalicInlineTool);
     this.use(LinkInlineTool);
     this.use(ShortcutsPlugin);
+    this.use(ClipboardPlugin);
   }
 
   /**

packages/core/src/plugins/ClipboardPlugin.ts

@@ -0,0 +1,32 @@
+import type { CopyUIEvent, EditorAPI, EditorjsPlugin, EditorjsPluginParams } from '@editorjs/sdk';
+import { CopyUIEventName } from '@editorjs/sdk';
+import { PluginType } from '@editorjs/sdk';
+
+/**
+ * @todo update doc
+ */
+export class ClipboardPlugin implements EditorjsPlugin {
+  public static readonly type = PluginType.Plugin;
+
+  readonly #api: EditorAPI;
+
+  /**
+   * @param params @todo update doc
+   */
+  constructor(params: EditorjsPluginParams) {
+    const { api, eventBus } = params;
+
+    this.#api = api;
+
+    eventBus.addEventListener(`ui:${CopyUIEventName}`, (e: CopyUIEvent) => {
+      console.log('Copied to clipboard plugin', e.detail);
+    });
+  }
+
+  /**
+   * @todo update doc
+   */
+  public destroy(): void {
+    // do nothing
+  }
+}

packages/sdk/src/entities/EventBus/events/ui/CopyUIEvent.ts

@@ -0,0 +1,28 @@
+import { UIEventBase } from './UIEventBase.js';
+
+/**
+ * Name of the copy UI event (dispatched as `ui:copy`)
+ */
+export const CopyUIEventName = 'copy';
+
+/**
+ * Payload @todo update doc
+ */
+export interface CopyUIEventPayload {
+  /**
+   * @todo update doc
+   */
+  nativeEvent: ClipboardEvent;
+}
+
+/**
+ * Delegated copy event from the editor @todo update doc
+ */
+export class CopyUIEvent extends UIEventBase<CopyUIEventPayload> {
+  /**
+   * @param payload - carries the original DOM `ClipboardEvent` as `nativeEvent` for providing rich clipboard data
+   */
+  constructor(payload: CopyUIEventPayload) {
+    super(CopyUIEventName, payload);
+  }
+}

packages/sdk/src/entities/EventBus/events/ui/index.ts

@@ -1,3 +1,4 @@
 export * from './UIEventBase.js';
 export * from './BeforeInputUIEvent.js';
 export * from './KeydownUIEvent.js';
+export * from './CopyUIEvent.js';

packages/ui/src/Blocks/Blocks.ts

@@ -1,13 +1,14 @@
-import type { BlockAddedCoreEvent,
-  BlockRemovedCoreEvent,
-  EditorjsPlugin,
-  EditorjsPluginParams } from '@editorjs/sdk';
+import { CopyUIEvent } from '@editorjs/sdk';
 import {
   CoreEventType,
   UiComponentType,
   BeforeInputUIEvent
 } from '@editorjs/sdk';
-import type { EventBus } from '@editorjs/sdk';
+import type { EventBus,
+  BlockAddedCoreEvent,
+  BlockRemovedCoreEvent, CopyUIEventPayload,
+  EditorjsPlugin,
+  EditorjsPluginParams } from '@editorjs/sdk';
 import Style from './Blocks.module.pcss';
 import { isNativeInput, make } from '@editorjs/dom';
 import { BlocksHolderRenderedUIEvent, BlockSelectedUIEvent } from './events/index.js';
@@ -130,6 +131,16 @@ export class BlocksUI implements EditorjsPlugin {
       e.preventDefault();
     });
 
+    blocksHolder.addEventListener('copy', (e) => {
+      const payload: CopyUIEventPayload = {
+        nativeEvent: e,
+      };
+
+      this.#eventBus.dispatchEvent(new CopyUIEvent(payload));
+
+      e.preventDefault();
+    });
+
     return blocksHolder;
   }