editor-js · neSpecc · Oct 16, 2025 · Oct 9, 2025 · Oct 15, 2025 · Oct 15, 2025
diff --git a/.github/workflows/lint-and-build.yml b/.github/workflows/lint-and-build.yml
@@ -7,10 +7,10 @@ jobs:
     name: Production build
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
       - name: Cache node modules
         id: cache-node-modules
-        uses: actions/cache@v3
+        uses: actions/cache@v4
         env:
           cache-name: node-modules-cache
         with:

diff --git a/.github/workflows/npm-publish.yml b/.github/workflows/npm-publish.yml
@@ -6,31 +6,8 @@ on:
       - master
 
 jobs:
-  publish:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v2
-      - uses: actions/setup-node@v1
-        with:
-          node-version: 12
-          registry-url: https://registry.npmjs.org/ 
-      - run: yarn
-      - run: yarn build
-      - run: yarn publish --access=public
-        env:
-          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
-  notify:
-    needs: publish
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v2
-      - name: Get package info
-        id: package
-        uses: codex-team/action-nodejs-package-info@v1
-      - name: Send a message
-        uses: codex-team/action-codexbot-notify@v1
-        with:
-          webhook: ${{ secrets.CODEX_BOT_NOTIFY_EDITORJS_PUBLIC_CHAT }}
-          message: '📦 [${{ steps.package.outputs.name }}](${{ steps.package.outputs.npmjs-link }}) ${{ steps.package.outputs.version }} was published'
-          parse_mode: 'markdown'
-          disable_web_page_preview: true
+  publish-and-notify:
+    uses: codex-team/github-workflows/.github/workflows/npm-publish-and-notify-reusable.yml@main
+    secrets:
+      NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
+      CODEX_BOT_NOTIFY_EDITORJS_PUBLIC_CHAT: ${{ secrets.CODEX_BOT_NOTIFY_EDITORJS_PUBLIC_CHAT }}
diff --git a/.npmignore b/.npmignore
@@ -1,5 +1,5 @@
 .idea/
 src/
 .eslintrc
-webpack.config.js
+vite.config.js
 yarn.lock
diff --git a/.nvmrc b/.nvmrc
@@ -0,0 +1 @@
+v20.18.1
diff --git a/dev/index.html b/dev/index.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Attaches Plugin Test | EditorJS</title>
+  </head>
+  <body>
+    <div id="editorjs"></div>
+    <script src="https://cdn.jsdelivr.net/npm/@editorjs/editorjs@latest"></script>
+    <script type="module">
+      import AttachesTool from "../src/index.js";
+      const editor = new EditorJS({
+        holder: "editorjs",
+        data: {
+          time: 1700475383740,
+          blocks: [],
+        },
+
+        tools: {
+          image: {
+            class: AttachesTool,
+            config: {
+              endpoint: "http://localhost:8008/uploadFile"
+            },
+          },
+        },
+      });
+    </script>
+  </body>
+</html>
diff --git a/dev/server.js b/dev/server.js
@@ -13,6 +13,8 @@ const http = require('http');
 const formidable = require('formidable');
 const crypto = require('crypto');
 
+const SERVER_PORT = 8008;
+
 /**
  * Sample server for files upload
  */
@@ -80,13 +82,13 @@ class ServerExample {
 
     this.getForm(request)
       .then(({ files }) => {
-        let file = files[this.fieldName] || {};
+        let file = files[this.fieldName][0] || {};
 
         responseJson.success = 1;
         responseJson.file = {
-          url: file.path,
-          name: file.name,
-          size: file.size,
+          url: `http://localhost:${SERVER_PORT}/file/` + file.newFilename,
+          name: file.originalFilename,
+          size: file.size
         };
       })
       .catch((error) => {
@@ -132,8 +134,7 @@ class ServerExample {
   }
 }
 
-
 new ServerExample({
-  port: 8008,
+  port: SERVER_PORT,
   fieldName: 'file'
-});
+});
diff --git a/package.json b/package.json
@@ -1,47 +1,48 @@
 {
   "name": "@editorjs/attaches",
-  "version": "1.3.1",
-  "repository": "https://github.com/editor-js/attaches",
-  "license": "MIT",
-  "scripts": {
-    "build": "webpack --mode production",
-    "build:dev": "webpack --mode development --watch",
-    "server": "node ./dev/server.js"
-  },
+  "version": "1.3.2",
   "keywords": [
     "codex editor",
-    "tool",
     "attaches",
     "editor.js",
     "editorjs"
   ],
+  "description": "Attaches Tool for Editor.js",
+  "license": "MIT",
+  "repository": "https://github.com/editor-js/attaches",
+  "files": [
+    "dist"
+  ],
+  "main": "./dist/attaches.umd.js",
+  "module": "./dist/attaches.mjs",
+  "exports": {
+    ".": {
+      "import": "./dist/attaches.mjs",
+      "require": "./dist/attaches.umd.js"
+    }
+  },
+  "scripts": {
+    "dev": "concurrently \"vite\" \"node ./dev/server.js\"",
+    "build": "vite build"
+  },
   "author": {
     "name": "CodeX",
     "email": "team@codex.so"
   },
-  "main": "./dist/bundle.js",
   "devDependencies": {
-    "@babel/core": "^7.14.2",
-    "@babel/preset-env": "^7.14.2",
-    "@codexteam/ajax": "^4.0.1",
-    "babel-loader": "^8.2.2",
-    "css-loader": "^1.0.0",
-    "eslint": "^7.32.0",
-    "eslint-config-codex": "^1.6.4",
-    "eslint-webpack-plugin": "^3.2.0",
-    "file-loader": "^4.1.0",
-    "formidable": "^1.2.1",
-    "postcss-loader": "^3.0.0",
-    "postcss-nested": "^4.1.1",
-    "postcss-nested-ancestors": "^2.0.0",
-    "request": "^2.88.0",
-    "style-loader": "^0.21.0",
-    "svg-inline-loader": "^0.8.2",
-    "to-string-loader": "^1.2.0",
-    "webpack": "^4.29.6",
-    "webpack-cli": "^3.3.0"
+    "@editorjs/editorjs": "2.30.0-rc.12",
+    "concurrently": "^9.0.1",
+    "formidable": "^3.5.1",
+    "postcss-nested": "^7.0.2",
+    "postcss-nested-ancestors": "^3.0.0",
+    "vite": "^5.3.1",
+    "vite-plugin-css-injected-by-js": "^3.5.1"
   },
   "dependencies": {
-    "@codexteam/icons": "^0.0.4"
+    "@codexteam/ajax": "^4.2.0",
+    "@codexteam/icons": "^0.3.0"
+  },
+  "engines": {
+    "node": ">=20.0.0"
   }
 }
diff --git a/postcss.config.js b/postcss.config.js
@@ -0,0 +1,6 @@
+module.exports = {
+    plugins: [
+      require('postcss-nested-ancestors'),
+      require('postcss-nested'),
+    ],
+  };
diff --git a/src/index.pcss → src/index.css b/src/index.pcss → src/index.css
@@ -28,6 +28,7 @@
       padding: 6px;
       border-radius: 6px;
       margin: auto 0 auto auto;
+      color: inherit;
 
       &:hover {
         background: var(--color-bg-secondary--hover);

diff --git a/src/index.js b/src/index.js
@@ -1,4 +1,4 @@
-import './index.pcss';
+import './index.css';
 
 import Uploader from './uploader';
 import { make, moveCaretToTheEnd, isEmpty } from './utils/dom';

diff --git a/vite.config.js b/vite.config.js
@@ -0,0 +1,26 @@
+import path from "path";
+import cssInjectedByJsPlugin from "vite-plugin-css-injected-by-js";
+import * as pkg from "./package.json";
+
+const NODE_ENV = process.argv.mode || "development";
+const VERSION = pkg.version;
+
+export default {
+  build: {
+    copyPublicDir: false,
+    lib: {
+      entry: path.resolve(__dirname, "src", "index.js"),
+      name: "AttachesTool",
+      fileName: "attaches",
+    },
+  },
+  server: {
+    open: './dev/index.html',
+  },
+  define: {
+    NODE_ENV: JSON.stringify(NODE_ENV),
+    VERSION: JSON.stringify(VERSION),
+  },
+
+  plugins: [cssInjectedByJsPlugin()],
+};
diff --git a/webpack.config.js b/webpack.config.js