Use Vite builder (#2300)

* vite builder initial * save * add displayName * add paragraph from npm * fix postcss apply * remove some packages, fix tests * Update cypress.yml * remove logs * remove unused packages * update path to image * update * Update index.html * Update cypress.yml * Update cypress.yml * Update cypress.yml * remove displayName field * update names * Update index.ts * Update index.ts * update packages * remove packages * postcss preserve: true * Update index.html * Update editor-modules.d.ts * use public dir for static * Update vite.config.js * update modules type * Update CHANGELOG.md
2024-05-03 15:13:22 +02:00 · 2023-04-13 22:25:29 +03:00 · 2023-04-13 22:25:29 +03:00 · aafab1d395
parent 0491155e33
commit aafab1d395
32 changed files with 2419 additions and 4938 deletions
--- a/.babelrc
+++ b/.babelrc
@ -1,19 +0,0 @@
-{
- "presets": [
-    ["@babel/preset-env", {
-      "modules": "umd",
-      "useBuiltIns": "entry",
-      "corejs": 3
-    }]
-  ],
-  "plugins": [
-    "babel-plugin-add-module-exports",
-    "babel-plugin-class-display-name",
-    "@babel/plugin-transform-runtime"
-  ],
-  "env": {
-    "test": {
-      "plugins": [ "istanbul" ]
-    }
-  }
-}
--- a/.github/workflows/cypress.yml
+++ b/.github/workflows/cypress.yml
@ -1,42 +1,21 @@
-name: Tests
+name: Cypress
+
 on: [pull_request]
+
 jobs:
-  firefox:
+  run-tests:
+    strategy:
+      matrix:
+        browser: [firefox, chrome, edge]
+
    runs-on: ubuntu-latest
    steps:
      - uses: actions/setup-node@v3
        with:
          node-version: 16
      - uses: actions/checkout@v3
-      - run: yarn ci:pull_paragraph
      - uses: cypress-io/github-action@v5
        with:
          config: video=false
-          browser: firefox
-          build: yarn build
-  chrome:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/setup-node@v3
-        with:
-          node-version: 16
-      - uses: actions/checkout@v3
-      - run: yarn ci:pull_paragraph
-      - uses: cypress-io/github-action@v5
-        with:
-          config: video=false
-          browser: chrome
-          build: yarn build
-  edge:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/setup-node@v3
-        with:
-          node-version: 16
-      - uses: actions/checkout@v3
-      - run: yarn ci:pull_paragraph
-      - uses: cypress-io/github-action@v5
-        with:
-          config: video=false
-          browser: edge
+          browser: ${{ matrix.browser }}
          build: yarn build
--- a/.github/workflows/eslint.yml
+++ b/.github/workflows/eslint.yml
@ -19,6 +19,5 @@ jobs:
            ${{ runner.OS }}-build-
            ${{ runner.OS }}-

-      - run: yarn install
-
+      - run: yarn
      - run: yarn lint
--- a/.gitmodules
+++ b/.gitmodules
@ -16,9 +16,6 @@
 [submodule "example/tools/simple-image"]
 	path = example/tools/simple-image
 	url = https://github.com/editor-js/simple-image
-[submodule "src/tools/paragraph"]
-	path = src/tools/paragraph
-	url = https://github.com/editor-js/paragraph
 [submodule "example/tools/marker"]
 	path = example/tools/marker
 	url = https://github.com/editor-js/marker
--- a/.postcssrc.yml
+++ b/.postcssrc.yml
@ -1,8 +1,4 @@
 plugins:
-  # Consumes files by @import rule
-  # https://github.com/postcss/postcss-import
-  postcss-import: {}
-
  # Apply custom property sets via @apply rule
  # https://github.com/pascalduez/postcss-apply
  postcss-apply: {}
@ -26,16 +22,6 @@ plugins:
    # https://github.com/csstools/postcss-preset-env#preserve
    preserve: false

-    # Enable or disable specific polyfills
-    # https://github.com/csstools/postcss-preset-env#features
-    #
-    # List of available plugins
-    # https://github.com/csstools/postcss-preset-env/blob/master/src/lib/plugins-by-id.js
-    features:
-      # Modify colors using the color-mod() function in CSS
-      # https://github.com/jonathantneal/postcss-color-mod-function
-      color-mod-function: {}
-
  # Nested rules unwrapper
  # https://github.com/postcss/postcss-nested
  #
@ -43,7 +29,3 @@ plugins:
  # 'postcss-nesting' feature but it does not work with BEM
  # Report: https://github.com/csstools/postcss-preset-env/issues/40
  postcss-nested: {}
-
-  # Compression tool
-  # https://github.com/cssnano/cssnano
-  cssnano: {}
--- a/docs/CHANGELOG.md
+++ b/docs/CHANGELOG.md
@ -14,6 +14,7 @@
 - `Fix` — *ToolsAPI* — `pasteConfig` getter with `false` value could be used to disable paste handling by Editor.js core. Could be useful if your tool has its own paste handler.
 - `Improvement` — *Dependencies* — Upgrade Cypress to v12, upgrade related libraries to latest versions.
 - `CI` — Use Ubuntu container for Edge tests runner.
+- `Improvement` — Use Vite as build system instead of Webpack.

 ### 2.26.5

--- a/example/example-dev.html
+++ b/example/example-dev.html
@ -10,8 +10,8 @@
  <meta charset="UTF-8">
  <title>Editor.js 🤩🧦🤨 example</title>
  <link href="https://fonts.googleapis.com/css?family=PT+Mono" rel="stylesheet">
-  <link href="assets/demo.css" rel="stylesheet">
-  <script src="assets/json-preview.js"></script>
+  <link href="../public/assets/demo.css" rel="stylesheet">
+  <script src="../public/assets/json-preview.js"></script>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
 </head>
 <body>
@ -107,7 +107,7 @@
  <script src="./tools/inline-code/dist/bundle.js"></script><!-- Inline Code -->

  <!-- Load Editor.js's Core -->
-  <script src="../dist/editor.js" onload="document.getElementById('hint-core').hidden = true;"></script>
+  <script src="../dist/editorjs.umd.js" onload="document.getElementById('hint-core').hidden = true;"></script>

  <!-- Initialization -->
  <script>
--- a/example/example-i18n.html
+++ b/example/example-i18n.html
@ -10,8 +10,8 @@
  <meta charset="UTF-8">
  <title>Editor.js 🤩🧦🤨 example</title>
  <link href="https://fonts.googleapis.com/css?family=PT+Mono" rel="stylesheet">
-  <link href="assets/demo.css" rel="stylesheet">
-  <script src="assets/json-preview.js"></script>
+  <link href="../public/assets/demo.css" rel="stylesheet">
+  <script src="../public/assets/json-preview.js"></script>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
 </head>
 <body>
@ -61,7 +61,7 @@
 <script src="https://cdn.jsdelivr.net/npm/@editorjs/inline-code@latest"></script><!-- Inline Code -->

 <!-- Load Editor.js's Core -->
-<script src="../dist/editor.js" onload="document.getElementById('hint-core').hidden = true"></script>
+<script src="../dist/editorjs.umd.js" onload="document.getElementById('hint-core').hidden = true"></script>

 <!-- Initialization -->
 <script>
--- a/example/example-multiple.html
+++ b/example/example-multiple.html
@ -9,7 +9,7 @@
 <head>
   <meta charset="UTF-8">
   <title>Editor.js 🤩🧦🤨 example: Multiple instances</title>
-   <link href="assets/demo.css" rel="stylesheet">
+   <link href="../public/assets/demo.css" rel="stylesheet">
   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
 </head>
 <body>
@ -41,7 +41,7 @@
   </div>

   <!-- Load Editor.js's Core -->
-   <script src="../dist/editor.js" onload="document.getElementById('hint-core').hidden = true"></script>
+   <script src="../dist/editorjs.umd.js" onload="document.getElementById('hint-core').hidden = true"></script>
   <script src="./tools/header/dist/bundle.js"></script><!-- Header -->

   <!-- Initialization -->
--- a/example/example-popup.html
+++ b/example/example-popup.html
@ -9,7 +9,7 @@
 <head>
   <meta charset="UTF-8">
   <title>Editor.js 🤩🧦🤨 example: Popup</title>
-   <link href="assets/demo.css" rel="stylesheet">
+   <link href="../public/assets/demo.css" rel="stylesheet">
   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
 </head>
 <body>
@ -111,7 +111,7 @@
   </div>

   <!-- Load Editor.js's Core -->
-   <script src="../dist/editor.js" onload="document.getElementById('hint-core').hidden = true"></script>
+   <script src="../dist/editorjs.umd.js" onload="document.getElementById('hint-core').hidden = true"></script>
   <script src="./tools/header/dist/bundle.js"></script><!-- Header -->

   <!-- Initialization -->
--- a/example/example-rtl.html
+++ b/example/example-rtl.html
@ -9,8 +9,8 @@
  <meta charset="UTF-8">
  <title>Editor.js RTL example</title>
  <link href="https://fonts.googleapis.com/css?family=PT+Mono" rel="stylesheet">
-  <link href="assets/demo.css" rel="stylesheet">
-  <script src="assets/json-preview.js"></script>
+  <link href="../public/assets/demo.css" rel="stylesheet">
+  <script src="../public/assets/json-preview.js"></script>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
 </head>
 <body>
@ -70,7 +70,7 @@
 <script src="./tools/inline-code/dist/bundle.js"></script><!-- Inline Code -->

 <!-- Load Editor.js's Core -->
-<script src="../dist/editor.js" onload="document.getElementById('hint-core').hidden = true"></script>
+<script src="../dist/editorjs.umd.js" onload="document.getElementById('hint-core').hidden = true"></script>

 <!-- Initialization -->
 <script>
--- a/example/example.html
+++ b/example/example.html
@ -4,8 +4,8 @@
  <meta charset="UTF-8">
  <title>Editor.js 🤩🧦🤨 example</title>
  <link href="https://fonts.googleapis.com/css?family=PT+Mono" rel="stylesheet">
-  <link href="assets/demo.css" rel="stylesheet">
-  <script src="assets/json-preview.js"></script>
+  <link href="../public/assets/demo.css" rel="stylesheet">
+  <script src="../public/assets/json-preview.js"></script>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
 </head>
 <body>
--- a/index.html
+++ b/index.html
@ -0,0 +1,409 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Editor.js 🤩🧦🤨 example</title>
+  <link href="https://fonts.googleapis.com/css?family=PT+Mono" rel="stylesheet">
+  <link href="/assets/demo.css" rel="stylesheet">
+  <script src="/assets/json-preview.js"></script>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
+</head>
+<body>
+  <script>
+    if (localStorage.getItem('theme') === 'dark') {
+      document.body.classList.add("dark-mode");
+    }
+  </script>
+  <div class="ce-example">
+    <div class="ce-example__header">
+      <a class="ce-example__header-logo" href="https://codex.so/editor">Editor.js 🤩🧦🤨</a>
+
+      <div class="ce-example__header-menu">
+        <a href="https://github.com/editor-js" target="_blank">Plugins</a>
+        <a href="https://editorjs.io/usage" target="_blank">Usage</a>
+        <a href="https://editorjs.io/configuration" target="_blank">Configuration</a>
+        <a href="https://editorjs.io/creating-a-block-tool" target="_blank">API</a>
+      </div>
+    </div>
+    <div class="ce-example__content">
+      <div id="editorjs"></div>
+      <div class="ce-example__button" id="saveButton">
+        editor.save()
+      </div>
+      <div class="ce-example__statusbar">
+        <div class="ce-example__statusbar-item">
+          Readonly:
+          <b id="readonly-state">
+            Off
+          </b>
+          &nbsp;
+          <div class="ce-example__statusbar-button" id="toggleReadOnlyButton">
+            toggle
+          </div>
+        </div>
+        <div class="ce-example__statusbar-item">
+          <div class="ce-example__statusbar-button" id="showBlocksBoundariesButton">
+            <span data-toggled-text="Hide">Show</span>
+            blocks boundaries
+          </div>
+        </div>
+        <div class="ce-example__statusbar-item">
+          <div class="ce-example__statusbar-button" id="enableThinModeButton">
+            <span data-toggled-text="Disable">Enable</span>
+            thin mode
+          </div>
+        </div>
+        <div class="ce-example__statusbar-item ce-example__statusbar-item--right">
+          <div class="ce-example__statusbar-toggler" id="darkThemeToggler">
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="ce-example__output">
+      <pre class="ce-example__output-content" id="output"></pre>
+
+      <div class="ce-example__output-footer">
+        <a href="https://codex.so" style="font-weight: bold;">Made by CodeX</a>
+      </div>
+    </div>
+  </div>
+
+
+  <!-- Load Tools -->
+  <!--
+    You can upload Tools to your project's directory and connect them by relative links.
+
+    Also you can load each Tool from CDN or use NPM/Yarn packages.
+
+    Read more at Tools Connection doc:
+    https://editorjs.io/getting-started#tools-connection
+  -->
+  <script src="https://cdn.jsdelivr.net/npm/@editorjs/header@latest"></script><!-- Header -->
+  <script src="https://cdn.jsdelivr.net/npm/@editorjs/simple-image@latest"></script><!-- Image -->
+  <script src="https://cdn.jsdelivr.net/npm/@editorjs/delimiter@latest"></script><!-- Delimiter -->
+  <script src="https://cdn.jsdelivr.net/npm/@editorjs/nested-list@latest"></script><!-- List -->
+  <script src="https://cdn.jsdelivr.net/npm/@editorjs/checklist@latest"></script><!-- Checklist -->
+  <script src="https://cdn.jsdelivr.net/npm/@editorjs/quote@latest"></script><!-- Quote -->
+  <script src="https://cdn.jsdelivr.net/npm/@editorjs/code@latest"></script><!-- Code -->
+  <script src="https://cdn.jsdelivr.net/npm/@editorjs/embed@latest"></script><!-- Embed -->
+  <script src="https://cdn.jsdelivr.net/npm/@editorjs/table@latest"></script><!-- Table -->
+  <script src="https://cdn.jsdelivr.net/npm/@editorjs/link@latest"></script><!-- Link -->
+  <script src="https://cdn.jsdelivr.net/npm/@editorjs/warning@latest"></script><!-- Warning -->
+  <script src="https://cdn.jsdelivr.net/npm/@editorjs/raw@latest"></script><!-- Raw -->
+
+  <script src="https://cdn.jsdelivr.net/npm/@editorjs/marker@latest"></script><!-- Marker -->
+  <script src="https://cdn.jsdelivr.net/npm/@editorjs/inline-code@latest"></script><!-- Inline Code -->
+
+  <!-- Initialization -->
+  <script type="module">
+    import EditorJS from './src/codex.ts';
+
+    /**
+     * To initialize the Editor, create a new instance with configuration object
+     * @see docs/installation.md for mode details
+     */
+    const editorConfig = {
+      /**
+       * Enable/Disable the read only mode
+       */
+      readOnly: false,
+
+      /**
+       * Wrapper of Editor
+       */
+      holder: 'editorjs',
+
+      /**
+       * Common Inline Toolbar settings
+       * - if true (or not specified), the order from 'tool' property will be used
+       * - if an array of tool names, this order will be used
+       */
+      // inlineToolbar: ['link', 'marker', 'bold', 'italic'],
+      // inlineToolbar: true,
+
+      /**
+       * Tools list
+       */
+      tools: {
+        /**
+         * Each Tool is a Plugin. Pass them via 'class' option with necessary settings {@link docs/tools.md}
+         */
+        header: {
+          class: Header,
+          inlineToolbar: ['marker', 'link'],
+          config: {
+            placeholder: 'Header'
+          },
+          shortcut: 'CMD+SHIFT+H'
+        },
+
+        /**
+         * Or pass class directly without any configuration
+         */
+        image: SimpleImage,
+
+        list: {
+          class: NestedList,
+          inlineToolbar: true,
+          shortcut: 'CMD+SHIFT+L'
+        },
+
+        checklist: {
+          class: Checklist,
+          inlineToolbar: true,
+        },
+
+        quote: {
+          class: Quote,
+          inlineToolbar: true,
+          config: {
+            quotePlaceholder: 'Enter a quote',
+            captionPlaceholder: 'Quote\'s author',
+          },
+          shortcut: 'CMD+SHIFT+O'
+        },
+
+        warning: Warning,
+
+        marker: {
+          class:  Marker,
+          shortcut: 'CMD+SHIFT+M'
+        },
+
+        code: {
+          class:  CodeTool,
+          shortcut: 'CMD+SHIFT+C'
+        },
+
+        delimiter: Delimiter,
+
+        inlineCode: {
+          class: InlineCode,
+          shortcut: 'CMD+SHIFT+C'
+        },
+
+        linkTool: LinkTool,
+
+        raw: RawTool,
+
+        embed: Embed,
+
+        table: {
+          class: Table,
+          inlineToolbar: true,
+          shortcut: 'CMD+ALT+T'
+        },
+
+      },
+
+      /**
+       * This Tool will be used as default
+       */
+      // defaultBlock: 'paragraph',
+
+      /**
+       * Initial Editor data
+       */
+      data: {
+        blocks: [
+          {
+            id: "zcKCF1S7X8",
+            type: "header",
+            data: {
+              text: "Editor.js",
+              level: 1
+            }
+          },
+          {
+            id: "b6ji-DvaKb",
+            type: "paragraph",
+            data: {
+              text: "Hey. Meet the new Editor. On this page you can see it in action — try to edit this text. Source code of the page contains the example of connection and configuration."
+            }
+          },
+          {
+            type: "header",
+            id: "7ItVl5biRo",
+            data: {
+              text: "Key features",
+              level: 2
+            }
+          },
+          {
+            type : 'list',
+            id: "SSBSguGvP7",
+            data : {
+              items : [
+                {
+                  content: 'It is a block-styled editor',
+                  items: []
+                },
+                {
+                  content: 'It returns clean data output in JSON',
+                  items: []
+                },
+                {
+                  content: 'Designed to be extendable and pluggable with a simple API',
+                  items: []
+                }
+              ],
+              style: 'unordered'
+            }
+          },
+          {
+            type: "header",
+            id: "QZFox1m_ul",
+            data: {
+              text: "What does it mean «block-styled editor»",
+              level: 2
+            }
+          },
+          {
+            type : 'paragraph',
+            id: "bwnFX5LoX7",
+            data : {
+              text : 'Workspace in classic editors is made of a single contenteditable element, used to create different HTML markups. Editor.js <mark class=\"cdx-marker\">workspace consists of separate Blocks: paragraphs, headings, images, lists, quotes, etc</mark>. Each of them is an independent contenteditable element (or more complex structure) provided by Plugin and united by Editor\'s Core.'
+            }
+          },
+          {
+            type : 'paragraph',
+            id: "mTrPOHAQTe",
+            data : {
+              text : `There are dozens of <a href="https://github.com/editor-js">ready-to-use Blocks</a> and the <a href="https://editorjs.io/creating-a-block-tool">simple API</a> for creation any Block you need. For example, you can implement Blocks for Tweets, Instagram posts, surveys and polls, CTA-buttons and even games.`
+            }
+          },
+          {
+            type: "header",
+            id: "1sYMhUrznu",
+            data: {
+              text: "What does it mean clean data output",
+              level: 2
+            }
+          },
+          {
+            type : 'paragraph',
+            id: "jpd7WEXrJG",
+            data : {
+              text : 'Classic WYSIWYG-editors produce raw HTML-markup with both content data and content appearance. On the contrary, Editor.js outputs JSON object with data of each Block. You can see an example below'
+            }
+          },
+          {
+            type : 'paragraph',
+            id: "0lOGNUKxqt",
+            data : {
+              text : `Given data can be used as you want: render with HTML for <code class="inline-code">Web clients</code>, render natively for <code class="inline-code">mobile apps</code>, create markup for <code class="inline-code">Facebook Instant Articles</code> or <code class="inline-code">Google AMP</code>, generate an <code class="inline-code">audio version</code> and so on.`
+            }
+          },
+          {
+            type : 'paragraph',
+            id: "WvX7kBjp0I",
+            data : {
+              text : 'Clean data is useful to sanitize, validate and process on the backend.'
+            }
+          },
+          {
+            type : 'delimiter',
+            id: "H9LWKQ3NYd",
+            data : {}
+          },
+          {
+            type : 'paragraph',
+            id: "h298akk2Ad",
+            data : {
+              text : 'We have been working on this project more than three years. Several large media projects help us to test and debug the Editor, to make its core more stable. At the same time we significantly improved the API. Now, it can be used to create any plugin for any task. Hope you enjoy. 😏'
+            }
+          },
+          {
+            type: 'image',
+            id: "9802bjaAA2",
+            data: {
+              url: '/assets/codex2x.png',
+              caption: '',
+              stretched: false,
+              withBorder: true,
+              withBackground: false,
+            }
+          },
+        ]
+      },
+      onReady: function(){
+        saveButton.click();
+      },
+      onChange: function(api, event) {
+        console.log('something changed', event);
+      },
+    }
+    /**
+    * To initialize the Editor, create a new instance with configuration object
+    * @see docs/installation.md for mode details
+    */
+    var editor = new EditorJS(editorConfig);
+
+    /**
+    * Saving button
+    */
+    const saveButton = document.getElementById('saveButton');
+
+    /**
+    * Toggle read-only button
+    */
+    const toggleReadOnlyButton = document.getElementById('toggleReadOnlyButton');
+    const readOnlyIndicator = document.getElementById('readonly-state');
+
+    /**
+    * Saving example
+    */
+    saveButton.addEventListener('click', function () {
+      editor.save()
+        .then((savedData) => {
+          cPreview.show(savedData, document.getElementById("output"));
+        })
+        .catch((error) => {
+          console.error('Saving error', error);
+        });
+    });
+
+    /**
+    * Toggle read-only example
+    */
+    toggleReadOnlyButton.addEventListener('click', async () => {
+      const readOnlyState = await editor.readOnly.toggle();
+
+      readOnlyIndicator.textContent = readOnlyState ? 'On' : 'Off';
+    });
+
+    /**
+    * Button for displaying blocks borders. Useful for UI development
+    */
+    const showBlocksBoundariesButton = document.getElementById("showBlocksBoundariesButton");
+
+    showBlocksBoundariesButton.addEventListener('click', () => {
+      document.body.classList.toggle("show-block-boundaries")
+    })
+
+    /**
+    * Button for enabling the 'Thin' mode
+    */
+    const enableThinModeButton = document.getElementById("enableThinModeButton");
+
+    enableThinModeButton.addEventListener('click', () => {
+      document.body.classList.toggle("thin-mode")
+
+      editor.destroy();
+
+      editor = new EditorJS(editorConfig);
+    })
+
+    /**
+    * Toggler for toggling the dark mode
+    */
+    const darkThemeToggler = document.getElementById("darkThemeToggler");
+
+    darkThemeToggler.addEventListener('click', () => {
+      document.body.classList.toggle("dark-mode");
+
+      localStorage.setItem('theme', document.body.classList.contains("dark-mode") ? 'dark' : 'default');
+    })
+  </script>
+</body>
+</html>
--- a/package.json
+++ b/package.json
@ -2,7 +2,8 @@
  "name": "@editorjs/editorjs",
  "version": "2.27.0-rc.4",
  "description": "Editor.js — Native JS, based on API and Open Source",
-  "main": "dist/editor.js",
+  "main": "dist/editorjs.umd.js",
+  "module": "dist/editorjs.mjs",
  "types": "./types/index.d.ts",
  "keywords": [
    "codex editor",
@ -12,16 +13,12 @@
    "editorjs"
  ],
  "scripts": {
-    "clear": "rimraf dist && mkdirp dist",
-    "build": "yarn clear && yarn build:webpack:prod",
-    "build:dev": "yarn clear && yarn build:webpack:dev",
-    "build:webpack:dev": "webpack --mode development --progress --display-error-details --display-entrypoints --watch",
-    "build:webpack:prod": "webpack --mode production",
+    "dev": "vite",
+    "build": "vite build",
    "lint": "eslint src/ --ext .ts && yarn lint:tests",
    "lint:errors": "eslint src/ --ext .ts --quiet",
    "lint:fix": "eslint src/ --ext .ts --fix",
    "lint:tests": "eslint test/ --ext .ts",
-    "ci:pull_paragraph": "git submodule update --init ./src/tools/paragraph",
    "pull_tools": "git submodule update --init --recursive",
    "_tools:checkout": "git submodule foreach \"git checkout master || git checkout main\"",
    "_tools:pull": "git submodule foreach git pull",
@ -40,64 +37,39 @@
    "url": "git+https://github.com/codex-team/editor.js.git"
  },
  "devDependencies": {
-    "@babel/core": "^7.9.0",
-    "@babel/plugin-transform-runtime": "^7.9.0",
-    "@babel/polyfill": "^7.8.7",
-    "@babel/preset-env": "^7.9.5",
-    "@babel/preset-typescript": "^7.13.0",
-    "@babel/register": "^7.9.0",
-    "@babel/runtime": "^7.9.2",
+    "@babel/register": "^7.21.0",
+    "@codexteam/icons": "^0.3.0",
    "@codexteam/shortcuts": "^1.1.1",
-    "@cypress/code-coverage": "^3.10.1",
-    "@cypress/webpack-preprocessor": "^5.17.0",
+    "@cypress/code-coverage": "^3.10.3",
    "@editorjs/code": "^2.7.0",
    "@editorjs/delimiter": "^1.2.0",
    "@editorjs/header": "^2.7.0",
+    "@editorjs/paragraph": "^2.9.0",
    "@editorjs/simple-image": "^1.4.1",
-    "@types/node": "^14.14.35",
-    "@types/webpack": "^4.41.12",
-    "@types/webpack-env": "^1.15.2",
-    "babel-loader": "^8.1.0",
-    "babel-plugin-add-module-exports": "^1.0.0",
-    "babel-plugin-class-display-name": "^2.1.0",
-    "babel-plugin-istanbul": "^6.0.0",
-    "core-js": "3.6.5",
-    "css-loader": "^3.5.3",
-    "cssnano": "^4.1.10",
+    "@types/node": "^18.15.11",
+    "codex-notifier": "^1.1.2",
+    "codex-tooltip": "^1.0.5",
+    "core-js": "3.30.0",
    "cypress": "^12.9.0",
    "cypress-intellij-reporter": "^0.0.7",
-    "eslint": "^8.28.0",
+    "eslint": "^8.37.0",
    "eslint-config-codex": "^1.7.1",
-    "eslint-loader": "^4.0.2",
    "eslint-plugin-chai-friendly": "^0.7.2",
-    "eslint-plugin-cypress": "^2.12.1",
-    "extract-text-webpack-plugin": "^3.0.2",
-    "license-webpack-plugin": "^2.1.4",
-    "mkdirp": "^1.0.4",
+    "eslint-plugin-cypress": "2.12.1",
+    "html-janitor": "^2.0.4",
+    "nanoid": "^4.0.2",
    "postcss-apply": "^0.12.0",
-    "postcss-import": "^12.0.1",
-    "postcss-loader": "^3.0.0",
-    "postcss-nested": "^4.1.2",
-    "postcss-nested-ancestors": "^2.0.0",
-    "postcss-preset-env": "^6.6.0",
-    "rimraf": "^3.0.2",
-    "stylelint": "^13.3.3",
-    "terser-webpack-plugin": "^2.3.6",
-    "ts-loader": "^8.4.0",
+    "postcss-nested": "4.1.2",
+    "postcss-preset-env": "^8.3.0",
+    "rollup-plugin-license": "^3.0.1",
+    "stylelint": "^15.4.0",
    "tslint": "^6.1.1",
-    "typescript": "^5.0.2",
-    "webpack": "^4.43.0",
-    "webpack-cli": "^3.3.11"
+    "typescript": "5.0.3",
+    "vite": "^4.2.1",
+    "vite-plugin-css-injected-by-js": "^3.1.0"
  },
  "collective": {
    "type": "opencollective",
    "url": "https://opencollective.com/editorjs"
-  },
-  "dependencies": {
-    "@codexteam/icons": "0.1.0",
-    "codex-notifier": "^1.1.2",
-    "codex-tooltip": "^1.0.5",
-    "html-janitor": "^2.0.4",
-    "nanoid": "^3.1.22"
  }
 }
--- a/example/assets/codex2x.png
+++ b/example/assets/codex2x.png
--- a/example/assets/demo.css
+++ b/example/assets/demo.css
--- a/example/assets/json-preview.js
+++ b/example/assets/json-preview.js
--- a/src/codex.ts
+++ b/src/codex.ts
@ -7,7 +7,7 @@ import { EditorConfig } from '../types';
 */
 import '@babel/register';

-import 'components/polyfills';
+import './components/polyfills';
 import Core from './components/core';
 import * as _ from './components/utils';

@ -16,11 +16,9 @@ declare const VERSION: string;
 /**
 * Editor.js
 *
- * Short Description (눈_눈;)
- *
- * @version 2.18.0
 * @license Apache-2.0
- * @author CodeX-Team <https://ifmo.su>
+ * @see Editor.js <https://editorjs.io>
+ * @author CodeX Team <https://codex.so>
 */
 export default class EditorJS {
  /**
--- a/src/components/core.ts
+++ b/src/components/core.ts
@ -5,28 +5,7 @@ import { EditorModules } from '../types-internal/editor-modules';
 import I18n from './i18n';
 import { CriticalError } from './errors/critical';
 import EventsDispatcher from './utils/events';
-
-/**
- * @typedef {Core} Core - editor core class
- */
-
-/**
- * Require Editor modules places in components/modules dir
- */
-const contextRequire = require.context('./modules', true);
-
-const modules = [];
-
-contextRequire.keys().forEach((filename) => {
-  /**
-   * Include files if:
-   * - extension is .js or .ts
-   * - does not starts with _
-   */
-  if (filename.match(/^\.\/[^_][\w/]*\.([tj])s$/)) {
-    modules.push(contextRequire(filename));
-  }
-});
+import Modules from './modules';

 /**
 * @class Core
@ -228,7 +207,7 @@ export default class Core {
   *
   * @returns {EditorConfig}
   */
-  public get configuration(): EditorConfig|string {
+  public get configuration(): EditorConfig {
    return this.config;
  }

@ -325,27 +304,14 @@ export default class Core {
   * Make modules instances and save it to the @property this.moduleInstances
   */
  private constructModules(): void {
-    modules.forEach((module) => {
-      /**
-       * If module has non-default exports, passed object contains them all and default export as 'default' property
-       */
-      const Module = _.isFunction(module) ? module : module.default;
-
+    Object.entries(Modules).forEach(([key, module]) => {
      try {
-        /**
-         * We use class name provided by displayName property
-         *
-         * On build, Babel will transform all Classes to the Functions so, name will always be 'Function'
-         * To prevent this, we use 'babel-plugin-class-display-name' plugin
-         *
-         * @see  https://www.npmjs.com/package/babel-plugin-class-display-name
-         */
-        this.moduleInstances[Module.displayName] = new Module({
+        this.moduleInstances[key] = new module({
          config: this.configuration,
          eventsDispatcher: this.eventsDispatcher,
        });
      } catch (e) {
-        _.log(`Module ${Module.displayName} skipped because`, 'error', e);
+        _.log('[constructModules]', `Module ${key} skipped because`, 'error', e);
      }
    });
  }
--- a/src/components/modules/index.ts
+++ b/src/components/modules/index.ts
@ -0,0 +1,81 @@
+/** ./api */
+import BlocksAPI from './api/blocks';
+import CaretAPI from './api/caret';
+import EventsAPI from './api/events';
+import I18nAPI from './api/i18n';
+import API from './api/index';
+import InlineToolbarAPI from './api/inlineToolbar';
+import ListenersAPI from './api/listeners';
+import NotifierAPI from './api/notifier';
+import ReadOnlyAPI from './api/readonly';
+import SanitizerAPI from './api/sanitizer';
+import SaverAPI from './api/saver';
+import SelectionAPI from './api/selection';
+import StylesAPI from './api/styles';
+import ToolbarAPI from './api/toolbar';
+import TooltipAPI from './api/tooltip';
+import UiAPI from './api/ui';
+
+/** ./toolbar */
+import BlockSettings from './toolbar/blockSettings';
+import ConversionToolbar from './toolbar/conversion';
+import Toolbar from './toolbar/index';
+import InlineToolbar from './toolbar/inline';
+
+/** . */
+import BlockEvents from './blockEvents';
+import BlockManager from './blockManager';
+import BlockSelection from './blockSelection';
+import Caret from './caret';
+import CrossBlockSelection from './crossBlockSelection';
+import DragNDrop from './dragNDrop';
+import ModificationsObserver from './modificationsObserver';
+import Paste from './paste';
+import ReadOnly from './readonly';
+import RectangleSelection from './rectangleSelection';
+import Renderer from './renderer';
+import Saver from './saver';
+import Tools from './tools';
+import UI from './ui';
+
+export default {
+  // API Modules
+  BlocksAPI,
+  CaretAPI,
+  EventsAPI,
+  I18nAPI,
+  API,
+  InlineToolbarAPI,
+  ListenersAPI,
+  NotifierAPI,
+  ReadOnlyAPI,
+  SanitizerAPI,
+  SaverAPI,
+  SelectionAPI,
+  StylesAPI,
+  ToolbarAPI,
+  TooltipAPI,
+  UiAPI,
+
+  // Toolbar Modules
+  BlockSettings,
+  ConversionToolbar,
+  Toolbar,
+  InlineToolbar,
+
+  // Modules
+  BlockEvents,
+  BlockManager,
+  BlockSelection,
+  Caret,
+  CrossBlockSelection,
+  DragNDrop,
+  ModificationsObserver,
+  Paste,
+  ReadOnly,
+  RectangleSelection,
+  Renderer,
+  Saver,
+  Tools,
+  UI,
+};
--- a/src/components/modules/renderer.ts
+++ b/src/components/modules/renderer.ts
@ -81,7 +81,10 @@ export default class Renderer extends Module {
          tunes,
        });
      } catch (error) {
-        _.log(`Block «${tool}» skipped because of plugins error`, 'warn', data);
+        _.log(`Block «${tool}» skipped because of plugins error`, 'warn', {
+          data,
+          error,
+        });
        throw Error(error);
      }
    } else {
--- a/src/components/modules/tools.ts
+++ b/src/components/modules/tools.ts
@ -1,4 +1,4 @@
-import Paragraph from '../../tools/paragraph/dist/bundle';
+import Paragraph from '@editorjs/paragraph';
 import Module from '../__module';
 import * as _ from '../utils';
 import { SanitizerConfig, ToolConfig, ToolConstructable, ToolSettings } from '../../../types';
--- a/src/components/modules/ui.ts
+++ b/src/components/modules/ui.ts
@ -13,6 +13,7 @@ import Block from '../block';
 import Flipper from '../flipper';
 import { mobileScreenBreakpoint } from '../utils';

+import styles from '../../styles/main.css?inline';
 /**
 * HTML Elements used for UI
 */
@ -306,7 +307,6 @@ export default class UI extends Module<UINodes> {
     * Load CSS
     */
    // eslint-disable-next-line @typescript-eslint/no-var-requires
-    const styles = require('../../styles/main.css');
    const styleTagId = 'editor-js-styles';

    /**
--- a/src/styles/variables.css
+++ b/src/styles/variables.css
@ -70,7 +70,7 @@

  --color-line-gray: #EFF0F1;

-  --overlay-pane: {
+  --overlay-pane {
    position: absolute;
    background-color: #FFFFFF;
    border: 1px solid #E8E8EB;
@ -94,17 +94,17 @@
    }
  };

-  --button-focused: {
+  --button-focused {
    box-shadow: inset 0 0 0px 1px rgba(7, 161, 227, 0.08);
    background: rgba(34, 186, 255, 0.08) !important;
  };

-  --button-active: {
+  --button-active {
    background: rgba(56, 138, 229, 0.1);
    color:  var(--color-active-icon);
  };

-  --button-disabled: {
+  --button-disabled {
    color: var(--grayText);
    cursor: default;
    pointer-events: none;
@ -113,7 +113,7 @@
  /**
   * Styles for Toolbox Buttons and Plus Button
   */
-  --toolbox-button: {
+  --toolbox-button {
    color: var(--color-dark);
    cursor: pointer;
    width: var(--toolbox-buttons-size);
@ -145,7 +145,7 @@
  /**
   * Styles for Settings Button in Toolbar
   */
-  --toolbar-button: {
+  --toolbar-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
@ -193,7 +193,7 @@
  /**
   * Tool icon with border
   */
-  --tool-icon: {
+  --tool-icon {
    display: inline-flex;
    width: var(--toolbox-buttons-size);
    height: var(--toolbox-buttons-size);
--- a/src/tools/paragraph
+++ b/src/tools/paragraph
@ -1 +0,0 @@
-Subproject commit 6e45413ccdfd021f1800eb6e5bf7440184d5ab7c
--- a/src/types-internal/editor-modules.d.ts
+++ b/src/types-internal/editor-modules.d.ts
@ -1,71 +1,81 @@
-import UI from '../components/modules/ui';
-import BlockEvents from '../components/modules/blockEvents';
-import Toolbar from '../components/modules/toolbar/index';
-import InlineToolbar from '../components/modules/toolbar/inline';
-import BlockSettings from '../components/modules/toolbar/blockSettings';
-import Paste from '../components/modules/paste';
-import DragNDrop from '../components/modules/dragNDrop';
-import Renderer from '../components/modules/renderer';
-import Tools from '../components/modules/tools';
-import API from '../components/modules/api/index';
-import Caret from '../components/modules/caret';
-import BlockManager from '../components/modules/blockManager';
+/** ./api */
 import BlocksAPI from '../components/modules/api/blocks';
 import CaretAPI from '../components/modules/api/caret';
 import EventsAPI from '../components/modules/api/events';
-import ListenersAPI from '../components/modules/api/listeners';
-import SanitizerAPI from '../components/modules/api/sanitizer';
-import ToolbarAPI from '../components/modules/api/toolbar';
-import StylesAPI from '../components/modules/api/styles';
-import SelectionAPI from '../components/modules/api/selection';
-import NotifierAPI from '../components/modules/api/notifier';
-import SaverAPI from '../components/modules/api/saver';
-import Saver from '../components/modules/saver';
-import BlockSelection from '../components/modules/blockSelection';
-import RectangleSelection from '../components/modules/rectangleSelection';
-import InlineToolbarAPI from '../components/modules/api/inlineToolbar';
-import CrossBlockSelection from '../components/modules/crossBlockSelection';
-import ConversionToolbar from '../components/modules/toolbar/conversion';
-import TooltipAPI from '../components/modules/api/tooltip';
-import ReadOnly from '../components/modules/readonly';
-import ReadOnlyAPI from '../components/modules/api/readonly';
 import I18nAPI from '../components/modules/api/i18n';
+import API from '../components/modules/api/index';
+import InlineToolbarAPI from '../components/modules/api/inlineToolbar';
+import ListenersAPI from '../components/modules/api/listeners';
+import NotifierAPI from '../components/modules/api/notifier';
+import ReadOnlyAPI from '../components/modules/api/readonly';
+import SanitizerAPI from '../components/modules/api/sanitizer';
+import SaverAPI from '../components/modules/api/saver';
+import SelectionAPI from '../components/modules/api/selection';
+import StylesAPI from '../components/modules/api/styles';
+import ToolbarAPI from '../components/modules/api/toolbar';
+import TooltipAPI from '../components/modules/api/tooltip';
 import UiAPI from '../components/modules/api/ui';
+
+/** ./toolbar */
+import BlockSettings from '../components/modules/toolbar/blockSettings';
+import ConversionToolbar from '../components/modules/toolbar/conversion';
+import Toolbar from '../components/modules/toolbar/index';
+import InlineToolbar from '../components/modules/toolbar/inline';
+
+/** . */
+import BlockEvents from '../components/modules/blockEvents';
+import BlockManager from '../components/modules/blockManager';
+import BlockSelection from '../components/modules/blockSelection';
+import Caret from '../components/modules/caret';
+import CrossBlockSelection from '../components/modules/crossBlockSelection';
+import DragNDrop from '../components/modules/dragNDrop';
 import ModificationsObserver from '../components/modules/modificationsObserver';
+import Paste from '../components/modules/paste';
+import ReadOnly from '../components/modules/readonly';
+import RectangleSelection from '../components/modules/rectangleSelection';
+import Renderer from '../components/modules/renderer';
+import Saver from '../components/modules/saver';
+import Tools from '../components/modules/tools';
+import UI from '../components/modules/ui';

 export interface EditorModules {
-  UI: UI;
-  BlockEvents: BlockEvents;
-  BlockSelection: BlockSelection;
-  RectangleSelection: RectangleSelection;
-  Toolbar: Toolbar;
-  InlineToolbar: InlineToolbar;
-  BlockSettings: BlockSettings;
-  ConversionToolbar: ConversionToolbar;
-  Paste: Paste;
-  DragNDrop: DragNDrop;
-  Renderer: Renderer;
-  Tools: Tools;
-  API: API;
-  Caret: Caret;
-  Saver: Saver;
-  BlockManager: BlockManager;
-  BlocksAPI: BlocksAPI;
-  CaretAPI: CaretAPI;
-  EventsAPI: EventsAPI;
-  ListenersAPI: ListenersAPI;
-  SanitizerAPI: SanitizerAPI;
-  SaverAPI: SaverAPI;
-  SelectionAPI: SelectionAPI;
-  StylesAPI: StylesAPI;
-  ToolbarAPI: ToolbarAPI;
-  InlineToolbarAPI: InlineToolbarAPI;
-  CrossBlockSelection: CrossBlockSelection;
-  NotifierAPI: NotifierAPI;
-  TooltipAPI: TooltipAPI;
-  ReadOnly: ReadOnly;
-  ReadOnlyAPI: ReadOnlyAPI;
-  I18nAPI: I18nAPI;
-  UiAPI: UiAPI;
-  ModificationsObserver: ModificationsObserver;
-}
+  // API Modules
+  BlocksAPI: BlocksAPI,
+  CaretAPI: CaretAPI,
+  EventsAPI: EventsAPI,
+  I18nAPI: I18nAPI,
+  API: API,
+  InlineToolbarAPI: InlineToolbarAPI,
+  ListenersAPI: ListenersAPI,
+  NotifierAPI: NotifierAPI,
+  ReadOnlyAPI: ReadOnlyAPI,
+  SanitizerAPI: SanitizerAPI,
+  SaverAPI: SaverAPI,
+  SelectionAPI: SelectionAPI,
+  StylesAPI: StylesAPI,
+  ToolbarAPI: ToolbarAPI,
+  TooltipAPI: TooltipAPI,
+  UiAPI: UiAPI,
+
+  // Toolbar Modules
+  BlockSettings: BlockSettings,
+  ConversionToolbar: ConversionToolbar,
+  Toolbar: Toolbar,
+  InlineToolbar: InlineToolbar,
+
+  // Modules
+  BlockEvents: BlockEvents,
+  BlockManager: BlockManager,
+  BlockSelection: BlockSelection,
+  Caret: Caret,
+  CrossBlockSelection: CrossBlockSelection,
+  DragNDrop: DragNDrop,
+  ModificationsObserver: ModificationsObserver,
+  Paste: Paste,
+  ReadOnly: ReadOnly,
+  RectangleSelection: RectangleSelection,
+  Renderer: Renderer,
+  Saver: Saver,
+  Tools: Tools,
+  UI: UI,
+}
--- a/test/cypress/fixtures/test.html
+++ b/test/cypress/fixtures/test.html
@ -2,7 +2,7 @@
 <html lang="en">
 <body>
  <!-- Load Editor.js's Core -->
-  <script src="./../../../dist/editor.js"></script>
+  <script src="./../../../dist/editorjs.umd.js"></script>
  <h1>Editor.js test page</h1>
 </body>
 </html>
--- a/test/cypress/plugins/index.ts
+++ b/test/cypress/plugins/index.ts
@ -1,11 +1,7 @@
-/* eslint-disable @typescript-eslint/no-var-requires */
-/* tslint:disable:no-var-requires */
 /**
 * This file contains connection of Cypres plugins
 */
-const webpackConfig = require('../../../webpack.config.js');
-const preprocessor = require('@cypress/webpack-preprocessor');
-const codeCoverageTask = require('@cypress/code-coverage/task');
+import * as codeCoverageTask from '@cypress/code-coverage/task';

 module.exports = (on, config): unknown => {
  /**
@ -13,26 +9,6 @@ module.exports = (on, config): unknown => {
   */
  codeCoverageTask(on, config);

-  /**
-   * Prepare webpack preprocessor options
-   */
-  const options = preprocessor.defaultOptions;
-
-  /**
-   * Provide path to typescript package
-   */
-  options.typescript = require.resolve('typescript');
-
-  /**
-   * Provide our webpack config
-   */
-  options.webpackOptions = webpackConfig({}, { mode: 'test' });
-
-  /**
-   * Register webpack preprocessor
-   */
-  on('file:preprocessor', preprocessor(options));
-
  // It's IMPORTANT to return the config object
  // with any changed environment variables
  return config;
--- a/test/cypress/tests/tools/ToolsFactory.cy.ts
+++ b/test/cypress/tests/tools/ToolsFactory.cy.ts
@ -5,7 +5,7 @@ import ToolsFactory from '../../../../src/components/tools/factory';
 import InlineTool from '../../../../src/components/tools/inline';
 import BlockTool from '../../../../src/components/tools/block';
 import BlockTune from '../../../../src/components/tools/tune';
-import Paragraph from '../../../../src/tools/paragraph/dist/bundle';
+import Paragraph from '@editorjs/paragraph';

 describe('ToolsFactory', (): void => {
  let factory;
--- a/vite.config.js
+++ b/vite.config.js
@ -0,0 +1,68 @@
+import path from 'path';
+
+import cssInjectedByJsPlugin from 'vite-plugin-css-injected-by-js';
+import license from 'rollup-plugin-license';
+
+import * as pkg from './package.json';
+
+const NODE_ENV = process.argv.mode || 'development';
+const VERSION = pkg.version;
+
+/**
+ * Trick to use Vite server.open option on macOS
+ * @see https://github.com/facebook/create-react-app/pull/1690#issuecomment-283518768
+ */
+process.env.BROWSER = 'open';
+
+export default {
+  build: {
+    copyPublicDir: false,
+    lib: {
+      entry: path.resolve(__dirname, 'src', 'codex.ts'),
+      name: 'EditorJS',
+      fileName: 'editorjs',
+    },
+    rollupOptions: {
+      plugins: [
+        license({
+          thirdParty: {
+            allow: {
+              test: (dependency) => {
+                // Manually allow html-janitor (https://github.com/guardian/html-janitor/blob/master/LICENSE)
+                // because of missing LICENSE file in published package
+                if (dependency.name === 'html-janitor') {
+                  return true;
+                }
+
+                // Return false for unlicensed dependencies.
+                if (!dependency.license) {
+                  return false;
+                }
+
+                // Allow MIT and Apache-2.0 licenses.
+                return ['MIT', 'Apache-2.0'].includes(dependency.license);
+              },
+              failOnUnlicensed: true,
+              failOnViolation: true,
+            },
+            output: path.resolve(__dirname, 'dist', 'vendor.LICENSE.txt'),
+          },
+        }),
+      ],
+    },
+  },
+
+  define: {
+    'NODE_ENV': JSON.stringify(NODE_ENV),
+    'VERSION': JSON.stringify(VERSION),
+  },
+
+  server: {
+    port: 3303,
+    open: true,
+  },
+
+  plugins: [
+    cssInjectedByJsPlugin(),
+  ],
+};
--- a/webpack.config.js
+++ b/webpack.config.js
@ -1,109 +0,0 @@
-/**
- * Webpack configuration
- *
- * @author Codex Team
- * @copyright Khaydarov Murod
- */
-'use strict';
-
-module.exports = (env, argv) => {
-  const path = require('path');
-  const TerserPlugin = require('terser-webpack-plugin');
-  const { LicenseWebpackPlugin } = require('license-webpack-plugin');
-  const pkg = require('./package.json');
-
-
-  /**
-   * Environment
-   *
-   * @type {any}
-   */
-  const NODE_ENV = argv.mode || 'development';
-  const VERSION = process.env.VERSION || pkg.version;
-
-  /**
-   * Plugins for bundle
-   *
-   * @type {webpack}
-   */
-  const webpack = require('webpack');
-
-  return {
-    entry: {
-      editor: ['@babel/polyfill/noConflict', './src/codex.ts'],
-    },
-
-    output: {
-      path: path.resolve(__dirname, 'dist'),
-      filename: '[name].js',
-      library: [ 'EditorJS' ],
-      libraryTarget: 'umd',
-    },
-
-    watchOptions: {
-      aggregateTimeout: 50,
-    },
-
-    /**
-     * Tell webpack what directories should be searched when resolving modules.
-     */
-    resolve: {
-      modules: [path.join(__dirname, 'src'), 'node_modules'],
-      extensions: ['.js', '.ts'],
-    },
-
-    plugins: [
-      /** Pass variables into modules */
-      new webpack.DefinePlugin({
-        NODE_ENV: JSON.stringify(NODE_ENV),
-        VERSION: JSON.stringify(VERSION),
-      }),
-
-      new webpack.BannerPlugin({
-        banner: `Editor.js\n\n@version ${VERSION}\n\n@licence Apache-2.0\n@author CodeX <https://codex.so>\n\n@uses html-janitor\n@licence Apache-2.0 (https://github.com/guardian/html-janitor/blob/master/LICENSE)`,
-      }),
-
-      new LicenseWebpackPlugin(),
-    ],
-
-    module: {
-      rules: [
-        {
-          test: /\.ts$/,
-          use: [
-            {
-              loader: 'babel-loader',
-              options: {
-                cacheDirectory: true,
-              },
-            },
-            {
-              loader: 'ts-loader',
-              options: {
-                configFile: NODE_ENV === 'production' ? 'tsconfig.build.json' : 'tsconfig.json',
-              },
-            },
-          ],
-        },
-        {
-          test: /\.css$/,
-          exclude: /node_modules/,
-          use: [
-            'postcss-loader',
-          ],
-        }
-      ],
-    },
-
-    devtool: NODE_ENV === 'development' ? 'source-map' : false,
-
-    optimization: {
-      minimizer: [
-        new TerserPlugin({
-          cache: true,
-          parallel: true,
-        }),
-      ],
-    },
-  };
-};
--- a/yarn.lock
+++ b/yarn.lock
				`@ -1 +0,0 @@`
				`Subproject commit 6e45413ccdfd021f1800eb6e5bf7440184d5ab7c`