feat(core): implement Clipboard Plugin

.github/workflows/clipboard-plugin.yml

@@ -0,0 +1,20 @@
+name: Clipboard plugin check
+on:
+  pull_request:
+  merge_group:
+
+permissions:
+  contents: read
+  pull-requests: write
+  issues: write
+  actions: read
+
+jobs:
+  package-check:
+    uses: ./.github/workflows/package-check.yml
+    with:
+      package-name: '@editorjs/clipboard-plugin'
+      working-directory: './packages/plugins/clipboard-plugin'
+      include-mutations: true
+    secrets:
+      stryker_dashboard_api_key: ${{ secrets.STRYKER_DASHBOARD_API_KEY }}

package.json

@@ -5,7 +5,8 @@
   "packageManager": "yarn@4.0.1",
   "workspaces": [
     "packages/*",
-    "packages/tools/*"
+    "packages/tools/*",
+    "packages/plugins/*"
   ],
   "scripts": {
     "build": "yarn workspaces foreach -At run build",

packages/core/package.json

@@ -39,6 +39,7 @@
   },
   "dependencies": {
     "@editorjs/bold": "workspace:^",
+    "@editorjs/clipboard-plugin": "workspace:^",
     "@editorjs/collaboration-manager": "workspace:^",
     "@editorjs/dom-adapters": "workspace:^",
     "@editorjs/editorjs": "^2.30.5",

packages/core/src/api/SelectionAPI.ts

@@ -3,7 +3,7 @@ import { inject, injectable } from 'inversify';
 
 import { SelectionManager } from '../components/SelectionManager.js';
 import { Caret, EditorJSModel } from '@editorjs/model';
-import { CaretManagerEvents, CoreConfigValidated, createInlineToolName, EventType, Index, SelectionAPI as SelectionApiInterface } from '@editorjs/sdk';
+import { CaretManagerEvents, CoreConfigValidated, createInlineToolName, EventType, Index, SelectionAPI as SelectionApiInterface, BlockNodeSerialized } from '@editorjs/sdk';
 import { TOKENS } from '../tokens.js';
 
 /**
@@ -88,4 +88,11 @@ export class SelectionAPI implements SelectionApiInterface {
   public getCaret(userId = this.#config.userId): Caret | undefined {
     return this.#model.getCaret(userId);
   }
+
+  /**
+   * Returns array of selected blocks
+   */
+  public get selectedBlocks(): BlockNodeSerialized[] {
+    return this.#selectionManager.selectedBlocks();
+  }
 }

packages/core/src/components/SelectionManager.ts

@@ -1,6 +1,6 @@
 import 'reflect-metadata';
 import { EditorJSModel } from '@editorjs/model';
-import type { InlineFragment } from '@editorjs/sdk';
+import type { BlockNodeSerialized, InlineFragment } from '@editorjs/sdk';
 import {
   CaretManagerCaretUpdatedEvent,
   CaretManagerEvents,
@@ -226,4 +226,31 @@ export class SelectionManager {
       }
     }
   };
+
+  /**
+   * Returns an array of selected blocks using the current selection index
+   */
+  public selectedBlocks(): BlockNodeSerialized[] {
+    const currentSelectionIndex = this.currentSelection;
+
+    if (currentSelectionIndex === null) {
+      return [];
+    }
+
+    if (currentSelectionIndex.isBlockIndex) {
+      const { blockIndex } = currentSelectionIndex;
+
+      return [this.#model.serialized.blocks[blockIndex!]];
+    }
+
+    if (currentSelectionIndex.compositeSegments !== undefined) {
+      return currentSelectionIndex.compositeSegments.map((segment) => {
+        const { blockIndex } = segment;
+
+        return this.#model.serialized.blocks[blockIndex!];
+      });
+    }
+
+    return [];
+  }
 }

packages/core/src/index.ts

@@ -30,6 +30,8 @@ import { BlockRenderer } from './components/BlockRenderer.js';
 import { SelectionManager } from './components/SelectionManager.js';
 import { TOKENS } from './tokens.js';
 import { UndoRedoManager } from './components/UndoRedoManager.js';
+import { ClipboardPlugin } from '@editorjs/clipboard-plugin';
+
 /**
  * If no holder is provided via config, the editor will be appended to the element with this id
  */
@@ -115,6 +117,7 @@ export default class Core {
     this.use(ShortcutsPlugin);
     this.use(CollaborationManager);
     this.use(DOMAdapters);
+    this.use(ClipboardPlugin);
   }
 
   /**

packages/core/tsconfig.build.json

@@ -27,6 +27,9 @@
     },
     {
       "path": "../tools/inline-link/tsconfig.build.json"
+    },
+    {
+      "path": "../plugins/clipboard-plugin/tsconfig.build.json"
     }
   ]
 }

packages/core/tsconfig.json

@@ -46,6 +46,9 @@
     },
     {
       "path": "../tools/inline-link/tsconfig.build.json"
+    },
+    {
+      "path": "../plugins/clipboard-plugin/tsconfig.build.json"
     }
   ]
 }

packages/plugins/clipboard-plugin/.gitignore

@@ -0,0 +1,24 @@
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/sdks
+!.yarn/versions
+
+# Swap the comments on the following lines if you don't wish to use zero-installs
+# Documentation here: https://yarnpkg.com/features/zero-installs
+#!.yarn/cache
+#.pnp.*
+
+# IDE
+.idea/*
+
+node_modules/*
+dist/*
+
+# tests
+coverage/
+reports/
+
+# stryker temp files
+.stryker-tmp

packages/plugins/clipboard-plugin/README.md

@@ -0,0 +1,3 @@
+# Clipboard Plugin
+
+Built-in Editor.js Plugin for rich clipboard copy support.

packages/plugins/clipboard-plugin/eslint.config.mjs

@@ -0,0 +1,39 @@
+import CodeX from 'eslint-config-codex';
+
+export default [
+  ...CodeX,
+  {
+    languageOptions: {
+      parserOptions: {
+        project: './tsconfig.eslint.json',
+        tsconfigRootDir: import.meta.dirname,
+        sourceType: 'module',
+      },
+    },
+    rules: {
+      'n/no-unpublished-import': ['error', {
+        allowModules: [
+          'eslint-config-codex',
+        ],
+        ignoreTypeImport: true,
+      }],
+      'n/no-missing-import': 'off',
+      '@typescript-eslint/unbound-method': 'off',
+      'n/no-unsupported-features/node-builtins': ['error', {
+        version: '>=24.0.0',
+        ignores: [],
+      }],
+    },
+  },
+  {
+    files: ['**/*.spec.ts'],
+    rules: {
+      /**
+       * For test files allow dev dependencies imports
+       */
+      'n/no-unpublished-import': ['error', {
+        allowModules: ['@jest/globals'],
+      }],
+    },
+  },
+];

packages/plugins/clipboard-plugin/jest.config.ts

@@ -0,0 +1,31 @@
+import type { JestConfigWithTsJest } from 'ts-jest';
+
+export default {
+  preset: 'ts-jest',
+  testEnvironment: 'node',
+  testMatch: [ '<rootDir>/src/**/*.spec.ts' ],
+  extensionsToTreatAsEsm: [ '.ts' ],
+  moduleNameMapper: {
+    '^(\\.{1,2}/.*)\\.js$': '$1',
+  },
+  coverageReporters: ['lcov', 'json-summary', 'text-summary'],
+  transform: {
+    '^.+\\.tsx?$': [
+      'ts-jest',
+      {
+        useESM: true,
+      },
+    ],
+    '^.+\\.jsx?$': [
+      'babel-jest',
+      {
+        presets: [
+          ['@babel/preset-env', { targets: { node: 'current' } }],
+        ],
+      },
+    ],
+  },
+  transformIgnorePatterns: [
+    'node_modules/(?!@editorjs)',
+  ],
+} as JestConfigWithTsJest;

packages/plugins/clipboard-plugin/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "@editorjs/clipboard-plugin",
+  "version": "0.0.0",
+  "packageManager": "yarn@4.0.1",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "type": "module",
+  "scripts": {
+    "build": "yarn clear && tsc --build tsconfig.build.json",
+    "build:declaration": "yarn build --emitDeclarationOnly",
+    "lint": "eslint ./src",
+    "lint:ci": "yarn lint --max-warnings 0",
+    "lint:fix": "yarn lint --fix",
+    "test": "node --experimental-vm-modules $(yarn bin jest)",
+    "test:coverage": "yarn test --coverage=true",
+    "test:mutations": "NODE_OPTIONS=\"$NODE_OPTIONS --experimental-vm-modules\" stryker run",
+    "clear": "rm -rf dist && rm -f tsconfig.build.tsbuildinfo && rm -f tsconfig.tsbuildinfo"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.29.0",
+    "@babel/preset-env": "^7.29.2",
+    "@jest/globals": "^29.7.0",
+    "@stryker-mutator/core": "^7.0.2",
+    "@stryker-mutator/jest-runner": "^7.0.2",
+    "@stryker-mutator/typescript-checker": "^7.0.2",
+    "@types/eslint": "^9.6.1",
+    "@types/jest": "^29.5.12",
+    "@types/node": "^22.10.2",
+    "babel-jest": "^29.7.0",
+    "eslint": "^9.24.0",
+    "eslint-config-codex": "^2.0.3",
+    "eslint-plugin-import": "^2.31.0",
+    "jest": "^29.7.0",
+    "stryker-cli": "^1.0.2",
+    "ts-jest": "^29.2.5",
+    "ts-node": "^10.9.2",
+    "typescript": "^5.5.4"
+  },
+  "dependencies": {
+    "@editorjs/sdk": "workspace:^"
+  }
+}