Merge branch 'master' into feat/vertical-toolbox-multiple-items

.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 }}

.npmignore

@@ -1,4 +1,4 @@
 .idea/
 src/
-webpack.config.js
+vite.config.js
 yarn.lock

README.md

@@ -6,36 +6,19 @@ Provides Headings Blocks for the [Editor.js](https://ifmo.su/editor).
 
 ## Installation
 
-### Install via NPM
-
 Get the package
 
 ```shell
-npm i --save @editorjs/header
+yarn add @editorjs/header
 ```
 
 Include module at your application
 
 ```javascript
-const Header = require('@editorjs/header');
+import Header from '@editorjs/header';
 ```
 
-### Download to your project's source dir
-
-1. Upload folder `dist` from repository
-2. Add `dist/bundle.js` file to your page.
-
-### Load from CDN
-
-You can load specific version of package from [jsDelivr CDN](https://www.jsdelivr.com/package/npm/@editorjs/header).
-
-`https://cdn.jsdelivr.net/npm/@editorjs/header@latest`
-
-Then require this script on page with Editor.js.
-
-```html
-<script src="..."></script>
-```
+Optionally, you can load this tool from CDN [JsDelivr CDN](https://cdn.jsdelivr.net/npm/@editorjs/header@latest)
 
 ## Usage
 

package.json

@@ -1,33 +1,39 @@
 {
   "name": "@editorjs/header",
-  "version": "2.7.0",
+  "version": "2.8.1",
   "keywords": [
     "codex editor",
     "header",
-    "tool",
     "editor.js",
     "editorjs"
   ],
   "description": "Header Tool for Editor.js",
   "license": "MIT",
   "repository": "https://github.com/editor-js/header",
-  "main": "./dist/bundle.js",
+  "files": [
+    "dist"
+  ],
+  "main": "./dist/header.umd.js",
+  "module": "./dist/header.mjs",
+  "exports": {
+    ".": {
+      "import": "./dist/header.mjs",
+      "require": "./dist/header.umd.js"
+    }
+  },
   "scripts": {
-    "build": "webpack --mode production",
-    "build:dev": "webpack --mode development --watch"
+    "dev": "vite",
+    "build": "vite build"
   },
   "author": {
     "name": "CodeX",
     "email": "team@codex.so"
   },
   "devDependencies": {
-    "@babel/core": "^7.3.4",
-    "@babel/preset-env": "^7.3.4",
-    "babel-loader": "^8.0.5",
-    "css-loader": "^1.0.0",
-    "raw-loader": "^3.1.0",
-    "style-loader": "^0.21.0",
-    "webpack": "^4.29.5",
-    "webpack-cli": "^3.2.3"
+    "vite": "^4.5.0",
+    "vite-plugin-css-injected-by-js": "^3.3.0"
+  },
+  "dependencies": {
+    "@codexteam/icons": "^0.0.5"
   }
 }

src/index.js

@@ -3,12 +3,7 @@
  */
 import './index.css';
 
-import IconH1 from '../assets/icon-h1.svg';
-import IconH2 from '../assets/icon-h2.svg';
-import IconH3 from '../assets/icon-h3.svg';
-import IconH4 from '../assets/icon-h4.svg';
-import IconH5 from '../assets/icon-h5.svg';
-import IconH6 from '../assets/icon-h6.svg';
+import { IconH1, IconH2, IconH3, IconH4, IconH5, IconH6 } from '@codexteam/icons';
 
 /**
  * @typedef {object} HeaderData
@@ -41,11 +36,15 @@ import IconH6 from '../assets/icon-h6.svg';
  * @license MIT
  * @version 2.0.0
  */
-export default class Heading {
+export default class Header {
   /**
    * Render plugin`s main Element and fill it with saved data
    *
-   * @param {{data: HeaderData, config: HeaderConfig, api: object}}
+   * @param root0
+   * @param root0.data
+   * @param root0.config
+   * @param root0.api
+   * @param root0.readOnly
    *   data — previously saved data
    *   config - user config for Tool
    *   api - Editor.js API
@@ -62,8 +61,6 @@ export default class Heading {
      */
     this._CSS = {
       block: this.api.styles.block,
-      settingsButton: this.api.styles.settingsButton,
-      settingsButtonActive: this.api.styles.settingsButtonActive,
       wrapper: 'ce-header',
       tuneButton: 'ce-header__tune-button',
     };
@@ -84,13 +81,6 @@ export default class Heading {
      */
     this._data = this.normalizeData(data);
 
-    /**
-     * List of settings buttons
-     *
-     * @type {HTMLElement[]}
-     */
-    this.settingsButtons = [];
-
     /**
      * Main Block wrapper
      *
@@ -104,7 +94,6 @@ export default class Heading {
    * Normalize input data
    *
    * @param {HeaderData} data - saved data to process
-   *
    * @returns {HeaderData}
    * @private
    */
@@ -132,60 +121,18 @@ export default class Heading {
   }
 
   /**
-   * Create Block's settings block
+   * Returns header block tunes config
    *
-   * @returns {HTMLElement}
+   * @returns {Array}
    */
   renderSettings() {
-    const holder = document.createElement('DIV');
-
-    // do not add settings button, when only one level is configured
-    if (this.levels.length <= 1) {
-      return holder;
-    }
-
-    /** Add type selectors */
-    this.levels.forEach(level => {
-      const selectTypeButton = document.createElement('SPAN');
-
-      selectTypeButton.classList.add(this._CSS.settingsButton, this._CSS.tuneButton);
-
-      /**
-       * Highlight current level button
-       */
-      if (this.currentLevel.number === level.number) {
-        selectTypeButton.classList.add(this._CSS.settingsButtonActive);
-      }
-
-      /**
-       * Add SVG icon
-       */
-      selectTypeButton.innerHTML = level.svg;
-
-      /**
-       * Save level to its button
-       */
-      selectTypeButton.dataset.level = level.number;
-
-      /**
-       * Set up click handler
-       */
-      selectTypeButton.addEventListener('click', () => {
-        this.setLevel(level.number);
-      });
-
-      /**
-       * Append settings button to holder
-       */
-      holder.appendChild(selectTypeButton);
-
-      /**
-       * Save settings buttons
-       */
-      this.settingsButtons.push(selectTypeButton);
-    });
-
-    return holder;
+    return this.levels.map(level => ({
+      icon: level.svg,
+      label: this.api.i18n.t(`Heading ${level.number}`),
+      onActivate: () => this.setLevel(level.number),
+      closeOnActivate: true,
+      isActive: this.currentLevel.number === level.number,
+    }));
   }
 
   /**
@@ -198,13 +145,6 @@ export default class Heading {
       level: level,
       text: this.data.text,
     };
-
-    /**
-     * Highlight button by selected level
-     */
-    this.settingsButtons.forEach(button => {
-      button.classList.toggle(this._CSS.settingsButtonActive, parseInt(button.dataset.level) === level);
-    });
   }
 
   /**

vite.config.js

@@ -0,0 +1,23 @@
+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: "Header",
+      fileName: "header",
+    },
+  },
+  define: {
+    NODE_ENV: JSON.stringify(NODE_ENV),
+    VERSION: JSON.stringify(VERSION),
+  },
+
+  plugins: [cssInjectedByJsPlugin()],
+};