feat(core): implement Clipboard Plugin

packages/core/src/api/SelectionAPI.ts

@@ -2,7 +2,7 @@
 import { injectable } from 'inversify';
 
 import { SelectionManager } from '../components/SelectionManager.js';
-import { createInlineToolName } from '@editorjs/model';
+import { createInlineToolName, BlockNodeSerialized } from '@editorjs/model';
 import { InlineToolFormatData } from '@editorjs/sdk';
 import { SelectionAPI as SelectionApiInterface } from '@editorjs/sdk';
 
@@ -32,4 +32,11 @@
   public applyInlineToolForCurrentSelection(toolName: string, data?: InlineToolFormatData): void {
     this.#selectionManager.applyInlineToolForCurrentSelection(createInlineToolName(toolName), data);
   }
+
+  /**
+   *
+   */
+  public get selectedBlocks(): BlockNodeSerialized[] | null {
+    return this.#selectionManager.selectedBlocks();
+  }
 }

packages/core/src/components/SelectionManager.ts

@@ -4,7 +4,7 @@
   createInlineToolData,
   FormattingAction,
   InlineFragment,
-  InlineToolName
+  InlineToolName, BlockNodeSerialized
 } from '@editorjs/model';
 import { CaretManagerCaretUpdatedEvent, Index, EditorJSModel, createInlineToolName } from '@editorjs/model';
 import { EventType } from '@editorjs/model';
@@ -177,4 +177,32 @@
       }
     }
   };
+
+  /**
+   *
+   */
+  public selectedBlocks(): BlockNodeSerialized[] | null {
+    const userCaret = this.#model.getCaret(this.#config.userId);
+    const index = userCaret?.index ?? null;
+
+    if (index === null) {
+      return null;
+    }
+
+    if (index.isBlockIndex) {
+      const { blockIndex } = index;
+
+      return [this.#model.serialized.blocks[blockIndex!]];
+    }
+
+    if (index.compositeSegments !== undefined) {
+      return index.compositeSegments.map((segment) => {
+        const { blockIndex } = segment;
+
+        return this.#model.serialized.blocks[blockIndex!];
+      });
+    }
+
+    return null;
+  }
 }

packages/core/src/index.ts

@@ -22,6 +22,8 @@ import { BlocksManager } from './components/BlockManager.js';
 import { BlockRenderer } from './components/BlockRenderer.js';
 import { SelectionManager } from './components/SelectionManager.js';
 import { TOKENS } from './tokens.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
  */
@@ -121,6 +123,7 @@ export default class Core {
     this.use(LinkInlineTool);
     this.use(ShortcutsPlugin);
     this.use(DOMAdapters);
+    this.use(ClipboardPlugin);
   }
 
   /**

packages/core/src/plugins/ClipboardPlugin.ts

@@ -0,0 +1,76 @@
+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) => {
+      const { nativeEvent } = e.detail;
+
+      const selectedBlocks = this.#api.selection.selectedBlocks;
+
+      /**
+       * Don't override native event if there are no blocks selected
+       */
+      if (selectedBlocks === null || selectedBlocks.length === 0) {
+        return;
+      }
+
+      nativeEvent.preventDefault();
+
+      const currentDOMSelection = window.getSelection();
+
+      if (!currentDOMSelection) {
+        return;
+      }
+
+      const selectionAsPlainText = currentDOMSelection?.toString() ?? '';
+      const selectionAsHTML = this.#parseDOMSelectionToHTML(currentDOMSelection);
+
+      nativeEvent.clipboardData?.setData('text/plain', selectionAsPlainText);
+      nativeEvent.clipboardData?.setData('text/html', selectionAsHTML);
+      nativeEvent.clipboardData?.setData('application/x-editor-js', JSON.stringify(selectedBlocks));
+    });
+  }
+
+  /**
+   * @todo update doc
+   */
+  public destroy(): void {
+    // do nothing
+  }
+
+  /**
+   *
+   * @param selection
+   */
+  #parseDOMSelectionToHTML(selection: Selection): string {
+    if (selection.rangeCount === 0) {
+      return '';
+    }
+
+    const container = document.createElement('div');
+
+    for (let i = 0; i < selection.rangeCount; i++) {
+      const range = selection.getRangeAt(i);
+
+      container.appendChild(range.cloneContents());
+    }
+
+    return container.innerHTML;
+  }
+}

packages/model/src/entities/Index/index.ts

@@ -279,4 +279,12 @@
     /* Stryker disable next-line ConditionalExpression, LogicalOperator -- compound data-index predicate; .isDataIndex specs cover field combinations */
     return this.blockIndex !== undefined && this.tuneName === undefined && this.dataKey !== undefined && this.textRange === undefined;
   }
+
+  /**
+   *
+   */
+  public get isCompositeIndex(): boolean {
+    /* Stryker disable next-line ConditionalExpression, LogicalOperator -- compound data-index predicate; .isDataIndex specs cover field combinations */
+    return this.compositeSegments !== undefined && this.compositeSegments.length > 0 && this.blockIndex === undefined && this.tuneName === undefined && this.dataKey === undefined && this.textRange === undefined;
+  }
 }

packages/sdk/src/api/SelectionAPI.ts

@@ -1,4 +1,4 @@
-import type { InlineToolName } from '@editorjs/model';
+import type { BlockNodeSerialized, InlineToolName } from '@editorjs/model';
 
 /**
  * Selection API interface
@@ -11,4 +11,9 @@ export interface SelectionAPI {
    * @param data - optional data for the inline tool
    */
   applyInlineToolForCurrentSelection(tool: InlineToolName, data?: Record<string, unknown>): void;
+
+  /**
+   *
+   */
+  get selectedBlocks(): BlockNodeSerialized[] | null;
 }

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

@@ -0,0 +1,29 @@
+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 {
+  /**
+   * Native ClipboardEvent
+   * UI does not call .preventDefault() for this event
+   */
+  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,14 @@ export class BlocksUI implements EditorjsPlugin {
       e.preventDefault();
     });
 
+    blocksHolder.addEventListener('copy', (e) => {
+      const payload: CopyUIEventPayload = {
+        nativeEvent: e,
+      };
+
+      this.#eventBus.dispatchEvent(new CopyUIEvent(payload));
+    });
+
     return blocksHolder;
   }