update

Author: kaaaaaaaaaaai

dist/bundle.js

@@ -76,7 +76,7 @@
      * @see docs/installation.md for mode details
      */
     var editor = new EditorJS({
-      readOnly: false,
+      readOnly: true,
       /**
        * Wrapper of Editor
        */

example/example-dev.html

@@ -17,18 +17,8 @@
   },
   "author": "kaaaaaaaaaaai <[email protected]>",
   "devDependencies": {
-    "@babel/core": "^7.10.2",
-    "@babel/preset-env": "^7.10.2",
-    "@editorjs/editorjs": "^2.19.1",
-    "babel-loader": "^8.1.0",
     "cross-env": "^7.0.3",
-    "css-loader": "^3.5.3",
-    "raw-loader": "^4.0.1",
-    "sass": "^1.30.0",
-    "sass-loader": "^10.1.0",
-    "style-loader": "^1.2.1",
-    "webpack": "^4.43.0",
-    "webpack-cli": "^3.3.11"
+    "raw-loader": "^4.0.1"
   },
   "bugs": {
     "url": "https://github.com/kaaaaaaaaaaai/editorjs-button/issues"
@@ -37,9 +27,19 @@
   "directories": {
     "example": "example"
   },
-  "dependencies": {},
   "repository": {
     "type": "git",
     "url": "git+https://github.com/kaaaaaaaaaaai/editorjs-button.git"
+  },
+  "dependencies": {
+    "@babel/core": "^7.24.4",
+    "@babel/preset-env": "^7.24.4",
+    "babel-loader": "^9.1.3",
+    "css-loader": "^7.1.1",
+    "sass": "^1.75.0",
+    "sass-loader": "^14.2.1",
+    "style-loader": "^4.0.0",
+    "webpack": "^5.91.0",
+    "webpack-cli": "^5.1.4"
   }
 }

package-lock.json

@@ -1,7 +1,6 @@
-import css from './index.css';
+import css from './index.scss';
 
 export default class AnyButton {
-
     /**
      *
      * @returns {{icon: string, title: string}}
@@ -117,7 +116,7 @@ export default class AnyButton {
         const _CSS = {
             baseClass: this.api.styles.block,
             hide: "hide",
-            btn: "btn",
+            btn: "anyButton__btn",
             container: "anyButtonContainer",
             input: "anyButtonContainer__input",
 
@@ -126,7 +125,7 @@ export default class AnyButton {
             inputLink: "anyButtonContainer__input--link",
             registButton: "anyButtonContainer__registerButton",
             anyButtonHolder: "anyButtonContainer__anyButtonHolder",
-            btnColor: "btn--default",
+            btnColor: "anyButton__btn--default",
             toggleSwitch: "toggle-switch",
             toggleInput: "toggle-input",
             toggleLabel: "toggle-label",

package.json

@@ -59,7 +59,7 @@
 
 
 
-.btn{
+.anyButton__btn{
     display: inline-block;
     font-weight: 400;
     line-height: 1.5;
@@ -77,21 +77,22 @@
     font-size: 1rem;
     border-radius: .25rem;
     transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
-}
 
-.btn--default{
-    color: #fff;
-    background-color: #0d6efd;
-    border-color: #0d6efd;
-}
+    &--default{
+        color: #fff;
+        background-color: #0d6efd;
+        border-color: #0d6efd;
+    }
 
-.btn--gray{
-    color: #fff;
-    background-color: #7c7c7c;
-    border-color: #7c7c7c;
+    &--gray{
+        color: #fff;
+        background-color: #7c7c7c;
+        border-color: #7c7c7c;
+    }
 }
 
 
+
 .toggle-input {
     position: absolute;
     z-index: 5;

src/index.js

@@ -10,18 +10,15 @@ module.exports = {
         use: [
           {
             loader: 'babel-loader',
-            query: {
+            options: {
               presets: [ '@babel/preset-env' ],
             },
           },
         ]
       },
       {
-        test: /\.css$/,
-        use: [
-          'style-loader',
-          'css-loader'
-        ]
+        test: /\.scss$/,
+        use: ["style-loader", "css-loader", "sass-loader"]
       },
       {
         test: /\.(svg)$/,