├── .npmignore
├── .gitignore
├── example
    ├── assets
    │   ├── codex2x.png
    │   ├── json-preview.js
    │   └── demo.css
    ├── .bundle.js
    └── example-dev.html
├── webpack.config.js
├── LICENSE
├── src
    ├── font.svg
    ├── toolbox-icon.svg
    ├── index.scss
    └── index.js
├── package.json
├── README.md
└── dist
    └── bundle.js


/.npmignore:
--------------------------------------------------------------------------------
1 | .idea/
2 | src/
3 | webpack.config.js
4 | yarn.lock
5 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules/*
2 | npm-debug.log
3 | .idea/
4 | .DS_Store
5 | 


--------------------------------------------------------------------------------
/example/assets/codex2x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kaaaaaaaaaaai/editorjs-button/master/example/assets/codex2x.png


--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
 1 | const path = require('path');
 2 | 
 3 | module.exports = {
 4 |   entry: './src/index.js',
 5 |   module: {
 6 |     rules: [
 7 |       {
 8 |         test: /\.js$/,
 9 |         exclude: /node_modules/,
10 |         use: [
11 |           {
12 |             loader: 'babel-loader',
13 |             options: {
14 |               presets: [ '@babel/preset-env' ],
15 |             },
16 |           },
17 |         ]
18 |       },
19 |       {
20 |         test: /\.scss$/,
21 |         use: ["style-loader", "css-loader", "sass-loader"]
22 |       },
23 |       {
24 |         test: /\.(svg)$/,
25 |         use: [
26 |           {
27 |             loader: 'raw-loader',
28 |           }
29 |         ]
30 |       }
31 |     ]
32 |   },
33 |   output: {
34 |     path: path.join(__dirname, '/dist'),
35 |     publicPath: '/',
36 |     filename: 'bundle.js',
37 |     library: 'AnyButton',
38 |     libraryExport: 'default',
39 |     libraryTarget: 'umd'
40 |   }
41 | };
42 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2018 CodeX
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/src/font.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" id="Capa_1" enable-background="new 0 0 512 512" height="512" viewBox="0 0 512 512" width="512"><g><path d="m15 114.235c8.284 0 15-6.716 15-15v-69.235h69.235c8.284 0 15-6.716 15-15s-6.716-15-15-15h-84.235c-8.284 0-15 6.716-15 15v84.235c0 8.285 6.716 15 15 15z"/><path d="m497 0h-84.235c-8.284 0-15 6.716-15 15s6.716 15 15 15h69.235v69.235c0 8.284 6.716 15 15 15s15-6.716 15-15v-84.235c0-8.284-6.716-15-15-15z"/><path d="m497 397.765c-8.284 0-15 6.716-15 15v69.235h-69.235c-8.284 0-15 6.716-15 15s6.716 15 15 15h84.235c8.284 0 15-6.716 15-15v-84.235c0-8.285-6.716-15-15-15z"/><path d="m99.235 482h-69.235v-69.235c0-8.284-6.716-15-15-15s-15 6.716-15 15v84.235c0 8.284 6.716 15 15 15h84.235c8.284 0 15-6.716 15-15s-6.715-15-15-15z"/><path d="m419.66 191.38v-94.73c0-4.7-3.81-8.51-8.52-8.51h-155.14-155.14c-4.71 0-8.52 3.81-8.52 8.51v94.73c0 4.71 3.81 8.52 8.52 8.52h45.24c4.7 0 8.51-3.81 8.51-8.52v-32.45c0-4.71 3.82-8.52 8.52-8.52h53.21c4.71 0 8.52 3.81 8.52 8.52v234.14c0 4.71-3.81 8.52-8.52 8.52h-23.27c-4.71 0-8.52 3.81-8.52 8.52v45.24c0 4.7 3.81 8.51 8.52 8.51h62.93 62.93c4.71 0 8.52-3.81 8.52-8.51v-45.24c0-4.71-3.81-8.52-8.52-8.52h-23.27c-4.71 0-8.52-3.81-8.52-8.52v-234.14c0-4.71 3.81-8.52 8.52-8.52h53.21c4.7 0 8.52 3.81 8.52 8.52v32.45c0 4.71 3.81 8.52 8.51 8.52h45.24c4.71 0 8.52-3.81 8.52-8.52z"/></g></svg>


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "editorjs-button",
 3 |   "version": "3.0.3",
 4 |   "keywords": [
 5 |     "codex editor",
 6 |     "button",
 7 |     "tool",
 8 |     "editor.js",
 9 |     "editorjs"
10 |   ],
11 |   "description": "Button to set link and text for Editor.js",
12 |   "license": "MIT",
13 |   "main": "./dist/bundle.js",
14 |   "scripts": {
15 |     "build": "webpack --mode production",
16 |     "build:dev": "webpack --mode development --watch"
17 |   },
18 |   "author": "kaaaaaaaaaaai <kaiogita+npm@gmail.com>",
19 |   "devDependencies": {
20 |     "cross-env": "^7.0.3",
21 |     "raw-loader": "^4.0.1"
22 |   },
23 |   "bugs": {
24 |     "url": "https://github.com/kaaaaaaaaaaai/editorjs-button/issues"
25 |   },
26 |   "homepage": "https://github.com/kaaaaaaaaaaai/editorjs-button#readme",
27 |   "directories": {
28 |     "example": "example"
29 |   },
30 |   "repository": {
31 |     "type": "git",
32 |     "url": "git+https://github.com/kaaaaaaaaaaai/editorjs-button.git"
33 |   },
34 |   "dependencies": {
35 |     "@babel/core": "^7.24.4",
36 |     "@babel/preset-env": "^7.24.4",
37 |     "babel-loader": "^9.1.3",
38 |     "codex-notifier": "^1.1.2",
39 |     "css-loader": "^7.1.1",
40 |     "sass": "^1.75.0",
41 |     "sass-loader": "^14.2.1",
42 |     "style-loader": "^4.0.0",
43 |     "webpack": "^5.91.0",
44 |     "webpack-cli": "^5.1.4"
45 |   }
46 | }
47 | 


--------------------------------------------------------------------------------
/src/toolbox-icon.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 36 36" fill="none">
2 |   <rect x="9" y="9" width="18" height="18" rx="3" fill="black"/>
3 |   <path d="M25 16.2966H20.8875C20.8583 15.9861 20.7806 15.7044 20.6542 15.4515C20.5326 15.1987 20.3625 14.9813 20.1438 14.7994C19.9299 14.6131 19.6698 14.4712 19.3635 14.3736C19.0573 14.2715 18.7097 14.2205 18.3208 14.2205C17.6403 14.2205 17.0642 14.3714 16.5927 14.673C16.126 14.9747 15.7712 15.4072 15.5281 15.9705C15.2899 16.5339 15.1708 17.2104 15.1708 18C15.1708 18.834 15.2924 19.5326 15.5354 20.096C15.7833 20.6549 16.1406 21.0764 16.6073 21.3603C17.074 21.6397 17.6354 21.7795 18.2917 21.7795C18.666 21.7795 19.0014 21.7373 19.2979 21.653C19.5944 21.5643 19.8521 21.4379 20.0708 21.2738C20.2896 21.1096 20.467 20.9122 20.6031 20.6816C20.7441 20.4465 20.8389 20.1825 20.8875 19.8897L25 19.9163C24.9514 20.493 24.774 21.0808 24.4677 21.6797C24.1615 22.2741 23.7264 22.8241 23.1625 23.3298C22.6035 23.8311 21.9108 24.2348 21.0844 24.5409C20.258 24.847 19.2979 25 18.2042 25C16.8333 25 15.6035 24.7316 14.5146 24.1949C13.4306 23.6581 12.5726 22.8685 11.9406 21.826C11.3135 20.7836 11 19.5082 11 18C11 16.4829 11.3208 15.2053 11.9625 14.1673C12.6042 13.1248 13.4694 12.3375 14.5583 11.8051C15.6472 11.2684 16.8625 11 18.2042 11C19.1472 11 20.0149 11.1176 20.8073 11.3527C21.5997 11.5878 22.2948 11.9316 22.8927 12.384C23.4906 12.8321 23.9719 13.3843 24.3365 14.0409C24.701 14.6974 24.9222 15.4493 25 16.2966Z" fill="white"/>
4 | </svg>


--------------------------------------------------------------------------------
/example/assets/json-preview.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Module to compose output JSON preview
 3 |  */
 4 | const cPreview = (function (module) {
 5 |   /**
 6 |    * Shows JSON in pretty preview
 7 |    * @param {object} output - what to show
 8 |    * @param {Element} holder - where to show
 9 |    */
10 |   module.show = function(output, holder) {
11 |     /** Make JSON pretty */
12 |     output = JSON.stringify( output, null, 4 );
13 |     /** Encode HTML entities */
14 |     output = encodeHTMLEntities( output );
15 |     /** Stylize! */
16 |     output = stylize( output );
17 |     holder.innerHTML = output;
18 |   };
19 | 
20 |   /**
21 |    * Converts '>', '<', '&' symbols to entities
22 |    */
23 |   function encodeHTMLEntities(string) {
24 |     return string.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
25 |   }
26 | 
27 |   /**
28 |    * Some styling magic
29 |    */
30 |   function stylize(string) {
31 |     /** Stylize JSON keys */
32 |     string = string.replace( /"(\w+)"\s?:/g, '"<span class=sc_key>$1</span>" :');
33 |     /** Stylize tool names */
34 |     string = string.replace( /"(paragraph|quote|list|header|link|code|image|delimiter|raw|checklist|table|embed|warning)"/g, '"<span class=sc_toolname>$1</span>"');
35 |     /** Stylize HTML tags */
36 |     string = string.replace( /(&lt;[\/a-z]+(&gt;)?)/gi, '<span class=sc_tag>$1</span>' );
37 |     /** Stylize strings */
38 |     string = string.replace( /"([^"]+)"/gi, '"<span class=sc_attr>$1</span>"' );
39 |     /** Boolean/Null */
40 |     string = string.replace( /\b(true|false|null)\b/gi, '<span class=sc_bool>$1</span>' );
41 |     return string;
42 |   }
43 | 
44 |   return module;
45 | })({});
46 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | ![](https://badgen.net/badge/Editor.js/v2.22.3/blue)
  2 | 
  3 | # Set Link and Text and Generate button plugin for Editor.js
  4 | 
  5 | ![画面収録 2020-12-13 16 59 53](https://user-images.githubusercontent.com/2194021/102006852-7a6fb880-3d67-11eb-98d2-20b7e88672df.gif)
  6 | 
  7 | ### change log
  8 | - v2.x
  9 |   - toggle menu button
 10 | - v3.x
 11 |   - delete toggle button, and integration blockTune menu
 12 |   - icon update
 13 | 
 14 | ## Installation
 15 | 
 16 | ### Install via NPM
 17 | 
 18 | Get the package
 19 | 
 20 | ```shell
 21 | npm i --save editorjs-button
 22 | ```
 23 | 
 24 | Include module at your application
 25 | 
 26 | ```javascript
 27 | const anyButton = require('anyButton');
 28 | ```
 29 | 
 30 | ### Download to your project's source dir
 31 | 
 32 | 1. Upload folder `dist` from repository
 33 | 2. Add `dist/bundle.js` file to your page.
 34 | 
 35 | ### Load from CDN
 36 | 
 37 | `https://cdn.jsdelivr.net/npm/editorjs-button@latest`
 38 | 
 39 | ## Usage
 40 | 
 41 | Add a new Tool to the `tools` property of the Editor.js initial config.
 42 | 
 43 | ```javascript
 44 | tools: {
 45 |         AnyButton: {
 46 |           class: AnyButton,
 47 |           inlineToolbar: false,
 48 |           config:{
 49 |             css:{
 50 |               "btnColor": "btn--gray",
 51 |             },
 52 |             textValidation: (text) => {
 53 |               console.log("error!", text)
 54 |               return true;
 55 |             },
 56 |             linkValidation: (text) => {
 57 |               console.log("error!", text)
 58 |               return false;
 59 |             }
 60 |           }
 61 |         },
 62 |       },
 63 |       i18n: {
 64 |         messages: {
 65 |           tools: {
 66 |             "AnyButton": {
 67 |               'Button Text': 'ボタンに表示するテキスト',
 68 |               'Link Url': 'ボタンの飛び先のURL',
 69 |               'Set': "設定する",
 70 |               'Default Button': "デフォルト",
 71 |             }
 72 |           }
 73 |         },
 74 |       },
 75 | }
 76 | ```
 77 | ## input field validation
 78 | 
 79 | if you want to validate input field, you can use `textValidation` and `linkValidation` function.
 80 | 
 81 | 
 82 | 
 83 | 
 84 | ## Config Params
 85 | 
 86 | `i18n` overwrite if want to change default placeholder text,
 87 | 
 88 | ```
 89 | i18n: {
 90 |     messages: {
 91 |       tools: {s
 92 |         "AnyButton": {
 93 |           'Button Text': 'ボタンに表示するテキスト',
 94 |           'Link Url': 'ボタンの飛び先のURL',
 95 |           'Set': "設定する",
 96 |           'Default Button': "デフォルト",
 97 |         }
 98 |       }
 99 |     },
100 | },
101 | ```
102 | 
103 | if customize css, input filed, button design, and etc... 
104 | 
105 | ```
106 | config:{
107 |     css:{
108 |       "btnColor": "btn--gray",
109 |     }
110 | }
111 | ```
112 | 
113 | ## Output data
114 | 
115 | | Field  | Type     | Description      |
116 | | ------ | -------- | ---------------- |
117 | | link   | `string` | Exclusion HTML Tag text |
118 | | text   | `string` | Exclusion HTML Tag text |
119 | 
120 | 
121 | ```json
122 | {
123 |             "type" : "AnyButton",
124 |             "data" : {
125 |                 "link" : "https://editorjs.io/",
126 |                 "text" : "editorjs official"
127 |             }
128 |         }
129 | ```
130 | 
131 | 


--------------------------------------------------------------------------------
/example/.bundle.js:
--------------------------------------------------------------------------------
  1 | var AnyButton =
  2 | /******/ (function(modules) { // webpackBootstrap
  3 | /******/ 	// The module cache
  4 | /******/ 	var installedModules = {};
  5 | /******/
  6 | /******/ 	// The require function
  7 | /******/ 	function __webpack_require__(moduleId) {
  8 | /******/
  9 | /******/ 		// Check if module is in cache
 10 | /******/ 		if(installedModules[moduleId]) {
 11 | /******/ 			return installedModules[moduleId].exports;
 12 | /******/ 		}
 13 | /******/ 		// Create a new module (and put it into the cache)
 14 | /******/ 		var module = installedModules[moduleId] = {
 15 | /******/ 			i: moduleId,
 16 | /******/ 			l: false,
 17 | /******/ 			exports: {}
 18 | /******/ 		};
 19 | /******/
 20 | /******/ 		// Execute the module function
 21 | /******/ 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
 22 | /******/
 23 | /******/ 		// Flag the module as loaded
 24 | /******/ 		module.l = true;
 25 | /******/
 26 | /******/ 		// Return the exports of the module
 27 | /******/ 		return module.exports;
 28 | /******/ 	}
 29 | /******/
 30 | /******/
 31 | /******/ 	// expose the modules object (__webpack_modules__)
 32 | /******/ 	__webpack_require__.m = modules;
 33 | /******/
 34 | /******/ 	// expose the module cache
 35 | /******/ 	__webpack_require__.c = installedModules;
 36 | /******/
 37 | /******/ 	// define getter function for harmony exports
 38 | /******/ 	__webpack_require__.d = function(exports, name, getter) {
 39 | /******/ 		if(!__webpack_require__.o(exports, name)) {
 40 | /******/ 			Object.defineProperty(exports, name, { enumerable: true, get: getter });
 41 | /******/ 		}
 42 | /******/ 	};
 43 | /******/
 44 | /******/ 	// define __esModule on exports
 45 | /******/ 	__webpack_require__.r = function(exports) {
 46 | /******/ 		if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
 47 | /******/ 			Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 48 | /******/ 		}
 49 | /******/ 		Object.defineProperty(exports, '__esModule', { value: true });
 50 | /******/ 	};
 51 | /******/
 52 | /******/ 	// create a fake namespace object
 53 | /******/ 	// mode & 1: value is a module id, require it
 54 | /******/ 	// mode & 2: merge all properties of value into the ns
 55 | /******/ 	// mode & 4: return value when already ns object
 56 | /******/ 	// mode & 8|1: behave like require
 57 | /******/ 	__webpack_require__.t = function(value, mode) {
 58 | /******/ 		if(mode & 1) value = __webpack_require__(value);
 59 | /******/ 		if(mode & 8) return value;
 60 | /******/ 		if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
 61 | /******/ 		var ns = Object.create(null);
 62 | /******/ 		__webpack_require__.r(ns);
 63 | /******/ 		Object.defineProperty(ns, 'default', { enumerable: true, value: value });
 64 | /******/ 		if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));
 65 | /******/ 		return ns;
 66 | /******/ 	};
 67 | /******/
 68 | /******/ 	// getDefaultExport function for compatibility with non-harmony modules
 69 | /******/ 	__webpack_require__.n = function(module) {
 70 | /******/ 		var getter = module && module.__esModule ?
 71 | /******/ 			function getDefault() { return module['default']; } :
 72 | /******/ 			function getModuleExports() { return module; };
 73 | /******/ 		__webpack_require__.d(getter, 'a', getter);
 74 | /******/ 		return getter;
 75 | /******/ 	};
 76 | /******/
 77 | /******/ 	// Object.prototype.hasOwnProperty.call
 78 | /******/ 	__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
 79 | /******/
 80 | /******/ 	// __webpack_public_path__
 81 | /******/ 	__webpack_require__.p = "";
 82 | /******/
 83 | /******/
 84 | /******/ 	// Load entry module and return exports
 85 | /******/ 	return __webpack_require__(__webpack_require__.s = "./example/src/index.js");
 86 | /******/ })
 87 | /************************************************************************/
 88 | /******/ ({
 89 | 
 90 | /***/ "./example/src/index.js":
 91 | /*!******************************!*\
 92 |   !*** ./example/src/index.js ***!
 93 |   \******************************/
 94 | /*! no static exports found */
 95 | /***/ (function(module, exports) {
 96 | 
 97 | eval("\n\n//# sourceURL=webpack://AnyButton/./example/src/index.js?");
 98 | 
 99 | /***/ })
100 | 
101 | /******/ });


--------------------------------------------------------------------------------
/example/assets/demo.css:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * Styles for the example page
  3 |  */
  4 | body {
  5 |   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
  6 |   font-size: 14px;
  7 |   line-height: 1.5em;
  8 |   margin: 0;
  9 | }
 10 | 
 11 | .ce-example {
 12 |   font-size: 16.2px;
 13 | }
 14 | 
 15 | .ce-example__header {
 16 |   border-bottom: 1px solid #E8E8EB;
 17 |   height: 50px;
 18 |   line-height: 50px;
 19 |   display: flex;
 20 |   padding: 0 30px;
 21 |   margin-bottom: 30px;
 22 |   flex-wrap: wrap;
 23 | }
 24 | 
 25 | .ce-example__header a {
 26 |   color: inherit;
 27 |   text-decoration: none;
 28 | }
 29 | 
 30 | .ce-example__header-logo {
 31 |   font-weight: bold;
 32 | }
 33 | 
 34 | .ce-example__header-menu {
 35 |   margin-left: auto;
 36 | }
 37 | 
 38 | @media all and (max-width: 730px){
 39 |   .ce-example__header-menu {
 40 |     margin-left: 0;
 41 |     margin-top: 10px;
 42 |     flex-basis: 100%;
 43 |     font-size: 14px;
 44 |   }
 45 | }
 46 | 
 47 | .ce-example__header-menu a {
 48 |   margin-left: 20px;
 49 | }
 50 | 
 51 | @media all and (max-width: 730px){
 52 |   .ce-example__header-menu a {
 53 |     margin-left: 0;
 54 |     margin-right: 15px;
 55 |   }
 56 | }
 57 | 
 58 | .ce-example__content {
 59 |   max-width: 1100px;
 60 |   margin: 0 auto;
 61 |   -webkit-font-smoothing: antialiased;
 62 |   -moz-osx-font-smoothing: grayscale;
 63 | }
 64 | 
 65 | .ce-example__content--small {
 66 |   max-width: 500px;
 67 |   border-left: 1px solid #eee;
 68 |   border-right: 1px solid #eee;
 69 |   padding: 0 15px;
 70 | }
 71 | 
 72 | .ce-example__output {
 73 |   background: #1B202B;
 74 |   overflow-x: auto;
 75 |   padding: 0 30px;
 76 | }
 77 | 
 78 | .ce-example__output-content {
 79 |   max-width: 650px;
 80 |   margin: 30px auto;
 81 |   color: #ABADC3;
 82 |   font-family: 'PT Mono', Menlo, Monaco, Consolas, Courier New, monospace;
 83 |   font-size: 13.3px;
 84 | }
 85 | 
 86 | .ce-example__output-content:empty {
 87 |   display: none;
 88 | }
 89 | 
 90 | .ce-example__button {
 91 |   display: block;
 92 |   margin: 50px auto;
 93 |   max-width: 180px;
 94 |   background: #4A9DF8;
 95 |   padding: 17px 30px;
 96 |   box-shadow: 0 22px 18px -4px rgba(137, 207, 255, 0.77);
 97 |   transition: all 150ms ease;
 98 |   cursor: pointer;
 99 |   border-radius: 31px;
100 |   color: #fff;
101 |   font-family: 'PT Mono', Menlo, Monaco, Consolas, Courier New, monospace;
102 |   text-align: center;
103 | }
104 | 
105 | .ce-example__button:hover {
106 |   background: #3D8DE5;
107 |   transform: translateY(2px);
108 |   box-shadow: 0 20px 15px -4px rgba(137, 207, 255, 0.77);
109 | }
110 | 
111 | .ce-example__output-footer {
112 |   padding: 30px 0;
113 |   font-size: 14.2px;
114 |   letter-spacing: 0.3px;
115 |   text-align: center;
116 | }
117 | 
118 | .ce-example__output-footer a {
119 |   color: #fff;
120 |   text-decoration: none;
121 | }
122 | 
123 | 
124 | .ce-example__statusbar {
125 |   position: fixed;
126 |   bottom: 10px;
127 |   right: 10px;
128 |   background: #fff;
129 |   border-radius: 8px;
130 |   box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
131 |   font-size: 12px;
132 |   padding: 8px 15px;
133 |   z-index: 1;
134 | }
135 | 
136 | .ce-example__statusbar-button {
137 |   display: inline-flex;
138 |   margin-left: 10px;
139 |   background: #4A9DF8;
140 |   padding: 6px 12px;
141 |   box-shadow: 0 7px 8px -4px rgba(137, 207, 255, 0.77);
142 |   transition: all 150ms ease;
143 |   cursor: pointer;
144 |   border-radius: 31px;
145 |   color: #fff;
146 |   font-family: 'PT Mono', Menlo, Monaco, Consolas, Courier New, monospace;
147 |   text-align: center;
148 | }
149 | 
150 | @media all and (max-width: 730px){
151 |   .ce-example__header,
152 |   .ce-example__content{
153 |     padding: 0 20px;
154 |   }
155 | }
156 | 
157 | /**
158 |  * JSON highlighter
159 |  */
160 | .sc_attr {
161 |   color: rgb(148, 162, 192);
162 | }
163 | .sc_key {
164 |   color: rgb(190, 213, 255);
165 | }
166 | .sc_toolname {
167 |   color: rgb(15, 205, 251);
168 | }
169 | .sc_tag {
170 |   color: rgb(4, 131, 216);
171 | }
172 | .sc_bool {
173 |   color: rgb(247, 60, 173);
174 | }
175 | 
176 | .ce-example .ce-block:first-of-type h2.ce-header{
177 |   font-size: 50px;
178 | }
179 | 
180 | .ce-example h2.ce-header{
181 |   font-size: 30px;
182 | }
183 | 
184 | .ce-example h3.ce-header {
185 |   font-size: 24px;
186 | }
187 | 
188 | .ce-example h4.ce-header {
189 |   font-size: 18px;
190 | }
191 | 


--------------------------------------------------------------------------------
/src/index.scss:
--------------------------------------------------------------------------------
  1 | .hide{
  2 |     display: none !important;
  3 | }
  4 | 
  5 | .anyButtonContainer{
  6 |     position: relative;
  7 | }
  8 | 
  9 | .anyButtonContainer__registerButton{
 10 |     display: block;
 11 |     margin: auto;
 12 | }
 13 | 
 14 | .anyButtonContainer__inputHolder{}
 15 | 
 16 | .anyButtonContainer__inputHolder > * {
 17 |     margin-bottom: 10px;
 18 | }
 19 | 
 20 | .anyButtonContainer__input {
 21 |     padding-left: 38px;
 22 |     background-repeat: no-repeat;
 23 |     background-position: 10px;
 24 |     white-space: nowrap;
 25 |     text-overflow: ellipsis;
 26 |     overflow: hidden;
 27 | }
 28 | 
 29 | .anyButtonContainer__input--link{
 30 |     background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"> <path d="M7.69998 12.6L7.67896 12.62C6.53993 13.7048 6.52012 15.5155 7.63516 16.625V16.625C8.72293 17.7073 10.4799 17.7102 11.5712 16.6314L13.0263 15.193C14.0703 14.1609 14.2141 12.525 13.3662 11.3266L13.22 11.12" stroke="black" stroke-width="2" stroke-linecap="round"/> <path d="M16.22 11.12L16.3564 10.9805C17.2895 10.0265 17.3478 8.5207 16.4914 7.49733V7.49733C15.5691 6.39509 13.9269 6.25143 12.8271 7.17675L11.3901 8.38588C10.0935 9.47674 9.95706 11.4241 11.0888 12.6852L11.12 12.72" stroke="black" stroke-width="2" stroke-linecap="round"/> </svg>')
 31 |     }
 32 | .anyButtonContainer__input--text{
 33 |     background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"> <path d="M8 9V7.2C8 7.08954 8.08954 7 8.2 7L12 7M16 9V7.2C16 7.08954 15.9105 7 15.8 7L12 7M12 7L12 17M12 17H10M12 17H14" stroke="black" stroke-width="2" stroke-linecap="round"/> </svg>')
 34 |     }
 35 | .anyButtonContainer__input[contentEditable=true][data-placeholder]::before {
 36 |      position: absolute;
 37 |      content: attr(data-placeholder);
 38 |      color: #707684;
 39 |      font-weight: normal;
 40 |      opacity: 0;
 41 | }
 42 | 
 43 | .anyButtonContainer__input[contentEditable=true][data-placeholder]:empty::before {
 44 |      opacity: 1;
 45 | }
 46 | 
 47 | .anyButtonContainer__input[contentEditable=true][data-placeholder]:empty:focus::before {
 48 |      opacity: 0;
 49 | }
 50 | 
 51 | 
 52 | .cdx-button{
 53 |     white-space: nowrap;
 54 | }
 55 | 
 56 | .anyButtonContainer__anyButtonHolder{
 57 |     text-align: center;
 58 | }
 59 | 
 60 | 
 61 | 
 62 | .anyButton__btn{
 63 |     display: inline-block;
 64 |     font-weight: 400;
 65 |     line-height: 1.5;
 66 |     color: #212529;
 67 |     text-align: center;
 68 |     text-decoration: none !important;
 69 |     vertical-align: middle;
 70 |     cursor: pointer;
 71 |     -webkit-user-select: none;
 72 |     -moz-user-select: none;
 73 |     user-select: none;
 74 |     background-color: transparent;
 75 |     border: 1px solid transparent;
 76 |     padding: .375rem .75rem;
 77 |     font-size: 1rem;
 78 |     border-radius: .25rem;
 79 |     transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
 80 |     word-break: break-all;
 81 |     overflow-wrap: break-word;
 82 |     &--default{
 83 |         color: #fff;
 84 |         background-color: #0d6efd;
 85 |         border-color: #0d6efd;
 86 |     }
 87 | 
 88 |     &--gray{
 89 |         color: #fff;
 90 |         background-color: #7c7c7c;
 91 |         border-color: #7c7c7c;
 92 |     }
 93 | }
 94 | 
 95 | 
 96 | 
 97 | .toggle-input {
 98 |     position: absolute;
 99 |     z-index: 5;
100 |     opacity: 0;
101 |     cursor: pointer;
102 |     width: 40px;
103 |     height: 20px;
104 |     margin: 0;
105 | }
106 | 
107 | .toggle-label {
108 |     width: 40px;
109 |     height: 20px;
110 |     background: #ccc;
111 |     position: relative;
112 |     display: inline-block;
113 |     border-radius: 46px;
114 |     transition: 0.4s;
115 |     box-sizing: border-box;
116 | }
117 | .toggle-label:after {
118 |     content: "";
119 |     position: absolute;
120 |     width: 20px;
121 |     height: 20px;
122 |     border-radius: 100%;
123 |     left: 0;
124 |     top: 0;
125 |     z-index: 2;
126 |     background: #fff;
127 |     box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
128 |     transition: 0.4s;
129 | }
130 | 
131 | .toggle-input:checked + .toggle-label {
132 |     background-color: #4BD865;
133 | }
134 | .toggle-input:checked + .toggle-label:after {
135 |     left: 20px;
136 | }
137 | 
138 | .toggle-switch {
139 |     width: 40px;
140 |     margin-left: auto;
141 |     padding: 10px 0;
142 | }


--------------------------------------------------------------------------------
/example/example-dev.html:
--------------------------------------------------------------------------------
  1 | <!--
  2 |  Use this page for debugging purposes.
  3 | 
  4 |  Editor Tools are loaded as git-submodules.
  5 |  You can pull modules by running `yarn pull_tools` and start experimenting.
  6 |  -->
  7 | <!DOCTYPE html>
  8 | <html lang="en">
  9 | <head>
 10 |   <meta charset="UTF-8">
 11 |   <title>Editor.js 🤩🧦🤨 example</title>
 12 |   <link href="https://fonts.googleapis.com/css?family=PT+Mono" rel="stylesheet">
 13 |   <link href="assets/demo.css" rel="stylesheet">
 14 |   <script src="assets/json-preview.js"></script>
 15 |   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
 16 | </head>
 17 | <body>
 18 |   <div class="ce-example">
 19 |     <div class="ce-example__header">
 20 |       <a class="ce-example__header-logo" href="https://codex.so/editor">Editor.js 🤩🧦🤨</a>
 21 | 
 22 |       <div class="ce-example__header-menu">
 23 |         <a href="https://github.com/editor-js" target="_blank">Plugins</a>
 24 |         <a href="https://editorjs.io/usage" target="_blank">Usage</a>
 25 |         <a href="https://editorjs.io/configuration" target="_blank">Configuration</a>
 26 |         <a href="https://editorjs.io/creating-a-block-tool" target="_blank">API</a>
 27 |       </div>
 28 |     </div>
 29 |     <div class="ce-example__content _ce-example__content--small">
 30 |       <div id="editorjs"></div>
 31 |       <div id="hint" style="text-align: center;">
 32 |         No submodules found. Run <code class="inline-code">yarn pull_tools</code>
 33 |       </div>
 34 |       <div class="ce-example__button" id="saveButton">
 35 |         editor.save()
 36 |       </div>
 37 |       <div class="ce-example__statusbar">
 38 |         Readonly:
 39 |         <b id="readonly-state">
 40 |           Off
 41 |         </b>
 42 |         <div class="ce-example__statusbar-button" id="toggleReadOnlyButton">
 43 |           toggle
 44 |         </div>
 45 |       </div>
 46 |     </div>
 47 |     <div class="ce-example__output">
 48 |       <pre class="ce-example__output-content" id="output"></pre>
 49 | 
 50 |       <div class="ce-example__output-footer">
 51 |         <a href="https://codex.so" style="font-weight: bold;">Made by CodeX</a>
 52 |       </div>
 53 |     </div>
 54 |   </div>
 55 | 
 56 |   <!-- Load Tools -->
 57 |   <!--
 58 |    You can upload Tools to your project's directory and use as in example below.
 59 | 
 60 |    Also you can load each Tool from CDN or use NPM/Yarn packages.
 61 | 
 62 |    Read more in Tool's README file. For example:
 63 |    https://github.com/editor-js/header#installation
 64 |    -->
 65 |   <script src="https://cdn.jsdelivr.net/npm/@editorjs/editorjs@latest"></script>
 66 |   <script src="../dist/bundle.js" onload="document.getElementById('hint').hidden = true"></script><!-- Header -->
 67 | <!--  <script src="../src/index.js" onload="document.getElementById('hint').hidden = true"></script>&lt;!&ndash; Header &ndash;&gt;-->
 68 | 
 69 |   <!-- Initialization -->
 70 |   <script>
 71 | 
 72 |     const saveButton = document.getElementById('saveButton');
 73 | 
 74 |     /**
 75 |      * To initialize the Editor, create a new instance with configuration object
 76 |      * @see docs/installation.md for mode details
 77 |      */
 78 |     var editor = new EditorJS({
 79 |       readOnly: false,
 80 |       /**
 81 |        * Wrapper of Editor
 82 |        */
 83 |       holder: 'editorjs',
 84 |       logLevel: 'VERBOSE',
 85 | 
 86 |       /**
 87 |        * Tools list
 88 |        */
 89 |       tools: {
 90 |         AnyButton: {
 91 |           class: AnyButton,
 92 |           inlineToolbar: false,
 93 |         },
 94 |       },
 95 |       i18n: {
 96 |         messages: {
 97 |           tools: {
 98 |             "AnyButton": {
 99 |               'Button Text': 'ボタンに表示するテキスト',
100 |               'Link Url': 'ボタンの飛び先のURL',
101 |               'Set': "設定する",
102 |               'Default Button': "デフォルト",
103 |               "ボタンを編集":"ボタンを編集"
104 |             }
105 |           },
106 |         },
107 |       },
108 |       /**
109 |        * Previously saved data that should be rendered
110 |        */
111 |       data:{ "time" : 1609681433283, "blocks" : [ { "type" : "AnyButton", "data" : { "link" : "https://editorjs.io/", "text" : "editorjs official" } }, { "type" : "paragraph", "data" : { "text" : "readonly paragraph" } } ], "version" : "2.19.1" },
112 | 
113 |       /**
114 |        * This Tool will be used as default
115 |        */
116 |       // initialBlock: 'paragraph',
117 | 
118 |       /**
119 |        * Initial Editor data
120 |        */
121 | 
122 |       onReady: function(){
123 |         saveButton.click();
124 |       },
125 |       onChange: function() {
126 |         console.log('something changed');
127 |       },
128 |     });
129 | 
130 |     editor.isReady.then(() => {
131 | 
132 |     })
133 | 
134 |     /**
135 |      * Saving example
136 |      */
137 |     saveButton.addEventListener('click', function () {
138 |       editor.save().then((savedData) => {
139 |         cPreview.show(savedData, document.getElementById("output"));
140 |       });
141 |     });
142 | 
143 |     /**
144 |      * Toggle read-only button
145 |      */
146 |     const toggleReadOnlyButton = document.getElementById('toggleReadOnlyButton');
147 |     const readOnlyIndicator = document.getElementById('readonly-state');
148 |     /**
149 |      * Toggle read-only example
150 |      */
151 |     toggleReadOnlyButton.addEventListener('click', async () => {
152 |       const readOnlyState = await editor.readOnly.toggle();
153 |       readOnlyIndicator.textContent = readOnlyState ? 'On' : 'Off';
154 |     });
155 |   </script>
156 | </body>
157 | </html>
158 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
  1 | import css from './index.scss';
  2 | import svg from './toolbox-icon.svg'
  3 | import notifier from "codex-notifier";
  4 | export default class AnyButton {
  5 |     /**
  6 |      *
  7 |      * @returns {{icon: string, title: string}}
  8 |      */
  9 |     static get toolbox(){
 10 |         return {
 11 |             title:"Button",
 12 |             icon:svg
 13 |         }
 14 |     }
 15 | 
 16 |     static get tunes() {
 17 |         return [
 18 |             {
 19 |                 name: 'edit_mode',
 20 |                 icon: svg,
 21 |                 title: 'ボタンを編集',
 22 |             }
 23 |         ]
 24 |     }
 25 |     renderSettings() {
 26 |         const tunes = AnyButton.tunes;
 27 | 
 28 |         return tunes.map(tune => ({
 29 |             icon: tune.icon,
 30 |             label: this.api.i18n.t(tune.title),
 31 |             name: tune.name,
 32 |             onActivate: () => {
 33 |                 this.data = {
 34 |                     "link": this.nodes.linkInput.textContent,
 35 |                     "text": this.nodes.textInput.textContent
 36 |                 }
 37 |                 this.show(Number(AnyButton.STATE.EDIT))
 38 |             }
 39 |         }));
 40 |     }
 41 | 
 42 |     /**
 43 |      * Returns true to notify the core that read-only mode is supported
 44 |      *
 45 |      * @return {boolean}
 46 |      */
 47 |     static get isReadOnlySupported() {
 48 |         return true;
 49 |     }
 50 |     /**
 51 |      *
 52 |      * @returns {boolean}
 53 |      */
 54 |     static get enableLineBreaks() {
 55 |         return false;
 56 |     }
 57 | 
 58 | 
 59 |     /**
 60 |      *
 61 |      * @returns {{EDIT: number, VIEW: number}}
 62 |      * @constructor
 63 |      */
 64 |     static get STATE() {
 65 |         return {
 66 |             EDIT:0,
 67 |             VIEW:1
 68 |         };
 69 |     }
 70 |     /**
 71 |      *
 72 |      * @param data
 73 |      */
 74 |     set data(data) {
 75 |         this._data = Object.assign({}, {
 76 |             link: this.api.sanitizer.clean(data.link || "", AnyButton.sanitize),
 77 |             text: this.api.sanitizer.clean(data.text || "", AnyButton.sanitize)
 78 |         });
 79 |     }
 80 |     /**
 81 |      *
 82 |      * @returns {{text: string, link: string}}
 83 |      */
 84 |     get data() {
 85 |         return this._data;
 86 |     }
 87 | 
 88 |     /**
 89 |      * セーブ時のバリデーション
 90 |      * @param savedData
 91 |      * @returns {boolean}
 92 |      */
 93 |     validate(savedData){
 94 |         if(this._data.link === "" || this._data.text === ""){
 95 |             return false;
 96 |         }
 97 | 
 98 |         return true;
 99 |     }
100 |     /**
101 |      *
102 |      * @param block
103 |      * @returns {{caption: string, text: string, alignment: string}}
104 |      */
105 |     save(block){
106 |         return this._data;
107 |     }
108 | 
109 |     /**
110 |      * タグを全部削除する
111 |      * @returns {{link: boolean, text: boolean}}
112 |      */
113 |     static get sanitize(){
114 |         return {
115 |             text: false,
116 |             link: false
117 |         }
118 |     }
119 | 
120 |     defaultLinkValidation(text){
121 |         //全ての文字列が渡されるがURLのみ許可する. URLじゃない文字列も考慮する
122 |         let url = null;
123 |         try {
124 |             url = new URL(text);
125 |         }catch (e){
126 |             notifier.show({
127 |                 message: "URLが間違っています",
128 |                 style: 'error'
129 |             })
130 |             return false;
131 |         }
132 |         //httpsかhttpが入っていなければエラー
133 |         if(url.protocol !== "https:" && url.protocol !== "http:"){
134 |             notifier.show({
135 |                 message: "正しいURLを入力してください",
136 |                 style: 'error'
137 |             })
138 |             return false;
139 |         }
140 |         return true;
141 |     }
142 | 
143 |     defaultTextValidation(text){
144 |         if(text === ""){
145 |             notifier.show({
146 |                 message: "ボタンのテキストを入力してください",
147 |                 style: 'error'
148 |             })
149 |             return false;
150 |         }
151 |         return true;
152 |     }
153 |     /**
154 |      *
155 |      * @param data
156 |      * @param config
157 |      * @param api
158 |      * @param readOnly
159 |      */
160 |     constructor({ data, config, api, readOnly }) {
161 |         this.api = api;
162 |         this.readOnly = readOnly;
163 | 
164 |         this.nodes = {
165 |             wrapper: null,
166 |             container: null,
167 |             inputHolder: null,
168 |             toggleHolder: null,
169 |             anyButtonHolder: null,
170 |             textInput: null,
171 |             linkInput: null,
172 |             registButton: null,
173 |             anyButton: null,
174 |         }
175 |         //css overwrite
176 |         const _CSS = {
177 |             baseClass: this.api.styles.block,
178 |             hide: "hide",
179 |             btn: "anyButton__btn",
180 |             container: "anyButtonContainer",
181 |             input: "anyButtonContainer__input",
182 | 
183 |             inputHolder: "anyButtonContainer__inputHolder",
184 |             inputText: "anyButtonContainer__input--text",
185 |             inputLink: "anyButtonContainer__input--link",
186 |             registButton: "anyButtonContainer__registerButton",
187 |             anyButtonHolder: "anyButtonContainer__anyButtonHolder",
188 |             btnColor: "anyButton__btn--default",
189 |         }
190 | 
191 |         this.CSS = Object.assign(_CSS, config.css)
192 |         this.linkValidation = config.linkValidation || this.defaultLinkValidation.bind(this)
193 |         this.textValidation = config.textValidation || this.defaultTextValidation.bind(this)
194 | 
195 |         this.data = {
196 |             link: "",
197 |             text: ""
198 |         };
199 |         this.data = data;
200 | 
201 |     }
202 | 
203 |     render(){
204 |         this.nodes.wrapper = this.make('div', this.CSS.baseClass);
205 |         this.nodes.container = this.make('div', this.CSS.container); //twitter-embed-tool
206 | 
207 |         //入力用
208 |         this.nodes.inputHolder = this.makeInputHolder();
209 |         //display button
210 |         this.nodes.anyButtonHolder = this.makeAnyButtonHolder();
211 | 
212 | 
213 |         this.nodes.container.appendChild(this.nodes.inputHolder);
214 |         this.nodes.container.appendChild(this.nodes.anyButtonHolder);
215 | 
216 |         if (this._data.link !== "") {
217 |             this.init()
218 |             this.show(AnyButton.STATE.VIEW)
219 |         }
220 | 
221 |         this.nodes.wrapper.appendChild(this.nodes.container);
222 | 
223 |         return this.nodes.wrapper;
224 |     }
225 | 
226 | 
227 |     makeInputHolder() {
228 |         const inputHolder = this.make('div', [this.CSS.inputHolder]);
229 |         this.nodes.textInput = this.make('div', [this.api.styles.input, this.CSS.input, this.CSS.inputText], {
230 |             contentEditable: !this.readOnly,
231 |         });
232 |         this.nodes.textInput.dataset.placeholder = this.api.i18n.t('Button Text');
233 | 
234 |         this.nodes.linkInput = this.make('div', [this.api.styles.input, this.CSS.input,  this.CSS.inputLink], {
235 |             contentEditable: !this.readOnly,
236 |         })
237 |         this.nodes.linkInput.dataset.placeholder = this.api.i18n.t('Link Url');
238 | 
239 |         this.nodes.registButton = this.make('button',[this.api.styles.button, this.CSS.registButton]);
240 |         this.nodes.registButton.type = 'button';
241 |         this.nodes.registButton.textContent = this.api.i18n.t('Set');
242 | 
243 | 
244 |         this.nodes.registButton.addEventListener('click', (event) => {
245 | 
246 |             if(!this.linkValidation(this.nodes.linkInput.textContent)){
247 |                 return;
248 |             }
249 |             if(!this.textValidation(this.nodes.textInput.textContent)){
250 |                 return;
251 |             }
252 |             this.data = {
253 |                 "link": this.nodes.linkInput.textContent,
254 |                 "text": this.nodes.textInput.textContent
255 |             }
256 |             this.show(AnyButton.STATE.VIEW);
257 |         });
258 | 
259 |         inputHolder.appendChild(this.nodes.textInput);
260 |         inputHolder.appendChild(this.nodes.linkInput);
261 |         inputHolder.appendChild(this.nodes.registButton);
262 | 
263 |         return inputHolder;
264 |     }
265 | 
266 |     init(){
267 |         this.nodes.textInput.textContent = this._data.text;
268 |         this.nodes.linkInput.textContent = this._data.link;
269 |     }
270 | 
271 |     show(state){
272 |         this.nodes.anyButton.textContent = this._data.text;
273 |         this.nodes.anyButton.setAttribute("href", this._data.link);
274 |         this.changeState(state);
275 |     }
276 | 
277 |     makeAnyButtonHolder(){
278 |         const anyButtonHolder = this.make('div', [this.CSS.hide, this.CSS.anyButtonHolder]);
279 |         this.nodes.anyButton = this.make('a',[this.CSS.btn, this.CSS.btnColor],{
280 |             target: '_blank',
281 |             rel: 'nofollow noindex noreferrer',
282 |         });
283 |         this.nodes.anyButton.textContent = this.api.i18n.t("Default Button");
284 |         anyButtonHolder.appendChild(this.nodes.anyButton);
285 |         return anyButtonHolder;
286 |     }
287 | 
288 |     changeState(state){
289 |         switch (state) {
290 |             case AnyButton.STATE.EDIT:
291 |                 this.nodes.inputHolder.classList.remove(this.CSS.hide);
292 |                 this.nodes.anyButtonHolder.classList.add(this.CSS.hide);
293 | 
294 |                 break;
295 |             case AnyButton.STATE.VIEW:
296 |                 this.nodes.inputHolder.classList.add(this.CSS.hide);
297 |                 this.nodes.anyButtonHolder.classList.remove(this.CSS.hide);
298 |                 break;
299 |         }
300 |     }
301 | 
302 |     /**
303 |      * node 作成用
304 |      * @param tagName
305 |      * @param classNames
306 |      * @param attributes
307 |      * @returns {*}
308 |      */
309 |     make(tagName, classNames = null, attributes = {}) {
310 |         const el = document.createElement(tagName);
311 | 
312 |         if (Array.isArray(classNames)) {
313 |             el.classList.add(...classNames);
314 |         } else if (classNames) {
315 |             el.classList.add(classNames);
316 |         }
317 | 
318 |         for (const attrName in attributes) {
319 |             el[attrName] = attributes[attrName];
320 |         }
321 | 
322 |         return el;
323 |     }
324 | }


--------------------------------------------------------------------------------
/dist/bundle.js:
--------------------------------------------------------------------------------
  1 | /*
  2 |  * ATTENTION: The "eval" devtool has been used (maybe by default in mode: "development").
  3 |  * This devtool is neither made for production nor for readable output files.
  4 |  * It uses "eval()" calls to create a separate source file in the browser devtools.
  5 |  * If you are trying to read the output file, select a different devtool (https://webpack.js.org/configuration/devtool/)
  6 |  * or disable the default devtool with "devtool: false".
  7 |  * If you are looking for production-ready output files, see mode: "production" (https://webpack.js.org/configuration/mode/).
  8 |  */
  9 | (function webpackUniversalModuleDefinition(root, factory) {
 10 | 	if(typeof exports === 'object' && typeof module === 'object')
 11 | 		module.exports = factory();
 12 | 	else if(typeof define === 'function' && define.amd)
 13 | 		define([], factory);
 14 | 	else if(typeof exports === 'object')
 15 | 		exports["AnyButton"] = factory();
 16 | 	else
 17 | 		root["AnyButton"] = factory();
 18 | })(self, () => {
 19 | return /******/ (() => { // webpackBootstrap
 20 | /******/ 	var __webpack_modules__ = ({
 21 | 
 22 | /***/ "./src/index.js":
 23 | /*!**********************!*\
 24 |   !*** ./src/index.js ***!
 25 |   \**********************/
 26 | /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 27 | 
 28 | "use strict";
 29 | eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (/* binding */ AnyButton)\n/* harmony export */ });\n/* harmony import */ var _index_scss__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./index.scss */ \"./src/index.scss\");\n/* harmony import */ var _toolbox_icon_svg__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./toolbox-icon.svg */ \"./src/toolbox-icon.svg\");\n/* harmony import */ var codex_notifier__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! codex-notifier */ \"./node_modules/codex-notifier/dist/bundle.js\");\n/* harmony import */ var codex_notifier__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(codex_notifier__WEBPACK_IMPORTED_MODULE_2__);\nfunction _typeof(o) { \"@babel/helpers - typeof\"; return _typeof = \"function\" == typeof Symbol && \"symbol\" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && \"function\" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? \"symbol\" : typeof o; }, _typeof(o); }\nfunction _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }\nfunction _nonIterableSpread() { throw new TypeError(\"Invalid attempt to spread non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.\"); }\nfunction _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === \"string\") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === \"Object\" && o.constructor) n = o.constructor.name; if (n === \"Map\" || n === \"Set\") return Array.from(o); if (n === \"Arguments\" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }\nfunction _iterableToArray(iter) { if (typeof Symbol !== \"undefined\" && iter[Symbol.iterator] != null || iter[\"@@iterator\"] != null) return Array.from(iter); }\nfunction _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }\nfunction _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\nfunction _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }\nfunction _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, \"prototype\", { writable: false }); return Constructor; }\nfunction _toPropertyKey(t) { var i = _toPrimitive(t, \"string\"); return \"symbol\" == _typeof(i) ? i : i + \"\"; }\nfunction _toPrimitive(t, r) { if (\"object\" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || \"default\"); if (\"object\" != _typeof(i)) return i; throw new TypeError(\"@@toPrimitive must return a primitive value.\"); } return (\"string\" === r ? String : Number)(t); }\n\n\n\nvar AnyButton = /*#__PURE__*/function () {\n  /**\n   *\n   * @param data\n   * @param config\n   * @param api\n   * @param readOnly\n   */\n  function AnyButton(_ref) {\n    var data = _ref.data,\n      config = _ref.config,\n      api = _ref.api,\n      readOnly = _ref.readOnly;\n    _classCallCheck(this, AnyButton);\n    this.api = api;\n    this.readOnly = readOnly;\n    this.nodes = {\n      wrapper: null,\n      container: null,\n      inputHolder: null,\n      toggleHolder: null,\n      anyButtonHolder: null,\n      textInput: null,\n      linkInput: null,\n      registButton: null,\n      anyButton: null\n    };\n    //css overwrite\n    var _CSS = {\n      baseClass: this.api.styles.block,\n      hide: \"hide\",\n      btn: \"anyButton__btn\",\n      container: \"anyButtonContainer\",\n      input: \"anyButtonContainer__input\",\n      inputHolder: \"anyButtonContainer__inputHolder\",\n      inputText: \"anyButtonContainer__input--text\",\n      inputLink: \"anyButtonContainer__input--link\",\n      registButton: \"anyButtonContainer__registerButton\",\n      anyButtonHolder: \"anyButtonContainer__anyButtonHolder\",\n      btnColor: \"anyButton__btn--default\"\n    };\n    this.CSS = Object.assign(_CSS, config.css);\n    this.linkValidation = config.linkValidation || this.defaultLinkValidation.bind(this);\n    this.textValidation = config.textValidation || this.defaultTextValidation.bind(this);\n    this.data = {\n      link: \"\",\n      text: \"\"\n    };\n    this.data = data;\n  }\n  return _createClass(AnyButton, [{\n    key: \"renderSettings\",\n    value: function renderSettings() {\n      var _this = this;\n      var tunes = AnyButton.tunes;\n      return tunes.map(function (tune) {\n        return {\n          icon: tune.icon,\n          label: _this.api.i18n.t(tune.title),\n          name: tune.name,\n          onActivate: function onActivate() {\n            _this.data = {\n              \"link\": _this.nodes.linkInput.textContent,\n              \"text\": _this.nodes.textInput.textContent\n            };\n            _this.show(Number(AnyButton.STATE.EDIT));\n          }\n        };\n      });\n    }\n\n    /**\n     * Returns true to notify the core that read-only mode is supported\n     *\n     * @return {boolean}\n     */\n  }, {\n    key: \"data\",\n    get:\n    /**\n     *\n     * @returns {{text: string, link: string}}\n     */\n    function get() {\n      return this._data;\n    }\n\n    /**\n     * セーブ時のバリデーション\n     * @param savedData\n     * @returns {boolean}\n     */,\n    set:\n    /**\n     *\n     * @param data\n     */\n    function set(data) {\n      this._data = Object.assign({}, {\n        link: this.api.sanitizer.clean(data.link || \"\", AnyButton.sanitize),\n        text: this.api.sanitizer.clean(data.text || \"\", AnyButton.sanitize)\n      });\n    }\n  }, {\n    key: \"validate\",\n    value: function validate(savedData) {\n      if (this._data.link === \"\" || this._data.text === \"\") {\n        return false;\n      }\n      return true;\n    }\n    /**\n     *\n     * @param block\n     * @returns {{caption: string, text: string, alignment: string}}\n     */\n  }, {\n    key: \"save\",\n    value: function save(block) {\n      return this._data;\n    }\n\n    /**\n     * タグを全部削除する\n     * @returns {{link: boolean, text: boolean}}\n     */\n  }, {\n    key: \"defaultLinkValidation\",\n    value: function defaultLinkValidation(text) {\n      //全ての文字列が渡されるがURLのみ許可する. URLじゃない文字列も考慮する\n      var url = null;\n      try {\n        url = new URL(text);\n      } catch (e) {\n        codex_notifier__WEBPACK_IMPORTED_MODULE_2___default().show({\n          message: \"URLが間違っています\",\n          style: 'error'\n        });\n        return false;\n      }\n      //httpsかhttpが入っていなければエラー\n      if (url.protocol !== \"https:\" && url.protocol !== \"http:\") {\n        codex_notifier__WEBPACK_IMPORTED_MODULE_2___default().show({\n          message: \"正しいURLを入力してください\",\n          style: 'error'\n        });\n        return false;\n      }\n      return true;\n    }\n  }, {\n    key: \"defaultTextValidation\",\n    value: function defaultTextValidation(text) {\n      if (text === \"\") {\n        codex_notifier__WEBPACK_IMPORTED_MODULE_2___default().show({\n          message: \"ボタンのテキストを入力してください\",\n          style: 'error'\n        });\n        return false;\n      }\n      return true;\n    }\n  }, {\n    key: \"render\",\n    value: function render() {\n      this.nodes.wrapper = this.make('div', this.CSS.baseClass);\n      this.nodes.container = this.make('div', this.CSS.container); //twitter-embed-tool\n\n      //入力用\n      this.nodes.inputHolder = this.makeInputHolder();\n      //display button\n      this.nodes.anyButtonHolder = this.makeAnyButtonHolder();\n      this.nodes.container.appendChild(this.nodes.inputHolder);\n      this.nodes.container.appendChild(this.nodes.anyButtonHolder);\n      if (this._data.link !== \"\") {\n        this.init();\n        this.show(AnyButton.STATE.VIEW);\n      }\n      this.nodes.wrapper.appendChild(this.nodes.container);\n      return this.nodes.wrapper;\n    }\n  }, {\n    key: \"makeInputHolder\",\n    value: function makeInputHolder() {\n      var _this2 = this;\n      var inputHolder = this.make('div', [this.CSS.inputHolder]);\n      this.nodes.textInput = this.make('div', [this.api.styles.input, this.CSS.input, this.CSS.inputText], {\n        contentEditable: !this.readOnly\n      });\n      this.nodes.textInput.dataset.placeholder = this.api.i18n.t('Button Text');\n      this.nodes.linkInput = this.make('div', [this.api.styles.input, this.CSS.input, this.CSS.inputLink], {\n        contentEditable: !this.readOnly\n      });\n      this.nodes.linkInput.dataset.placeholder = this.api.i18n.t('Link Url');\n      this.nodes.registButton = this.make('button', [this.api.styles.button, this.CSS.registButton]);\n      this.nodes.registButton.type = 'button';\n      this.nodes.registButton.textContent = this.api.i18n.t('Set');\n      this.nodes.registButton.addEventListener('click', function (event) {\n        if (!_this2.linkValidation(_this2.nodes.linkInput.textContent)) {\n          return;\n        }\n        if (!_this2.textValidation(_this2.nodes.textInput.textContent)) {\n          return;\n        }\n        _this2.data = {\n          \"link\": _this2.nodes.linkInput.textContent,\n          \"text\": _this2.nodes.textInput.textContent\n        };\n        _this2.show(AnyButton.STATE.VIEW);\n      });\n      inputHolder.appendChild(this.nodes.textInput);\n      inputHolder.appendChild(this.nodes.linkInput);\n      inputHolder.appendChild(this.nodes.registButton);\n      return inputHolder;\n    }\n  }, {\n    key: \"init\",\n    value: function init() {\n      this.nodes.textInput.textContent = this._data.text;\n      this.nodes.linkInput.textContent = this._data.link;\n    }\n  }, {\n    key: \"show\",\n    value: function show(state) {\n      this.nodes.anyButton.textContent = this._data.text;\n      this.nodes.anyButton.setAttribute(\"href\", this._data.link);\n      this.changeState(state);\n    }\n  }, {\n    key: \"makeAnyButtonHolder\",\n    value: function makeAnyButtonHolder() {\n      var anyButtonHolder = this.make('div', [this.CSS.hide, this.CSS.anyButtonHolder]);\n      this.nodes.anyButton = this.make('a', [this.CSS.btn, this.CSS.btnColor], {\n        target: '_blank',\n        rel: 'nofollow noindex noreferrer'\n      });\n      this.nodes.anyButton.textContent = this.api.i18n.t(\"Default Button\");\n      anyButtonHolder.appendChild(this.nodes.anyButton);\n      return anyButtonHolder;\n    }\n  }, {\n    key: \"changeState\",\n    value: function changeState(state) {\n      switch (state) {\n        case AnyButton.STATE.EDIT:\n          this.nodes.inputHolder.classList.remove(this.CSS.hide);\n          this.nodes.anyButtonHolder.classList.add(this.CSS.hide);\n          break;\n        case AnyButton.STATE.VIEW:\n          this.nodes.inputHolder.classList.add(this.CSS.hide);\n          this.nodes.anyButtonHolder.classList.remove(this.CSS.hide);\n          break;\n      }\n    }\n\n    /**\n     * node 作成用\n     * @param tagName\n     * @param classNames\n     * @param attributes\n     * @returns {*}\n     */\n  }, {\n    key: \"make\",\n    value: function make(tagName) {\n      var classNames = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;\n      var attributes = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};\n      var el = document.createElement(tagName);\n      if (Array.isArray(classNames)) {\n        var _el$classList;\n        (_el$classList = el.classList).add.apply(_el$classList, _toConsumableArray(classNames));\n      } else if (classNames) {\n        el.classList.add(classNames);\n      }\n      for (var attrName in attributes) {\n        el[attrName] = attributes[attrName];\n      }\n      return el;\n    }\n  }], [{\n    key: \"toolbox\",\n    get:\n    /**\n     *\n     * @returns {{icon: string, title: string}}\n     */\n    function get() {\n      return {\n        title: \"Button\",\n        icon: _toolbox_icon_svg__WEBPACK_IMPORTED_MODULE_1__[\"default\"]\n      };\n    }\n  }, {\n    key: \"tunes\",\n    get: function get() {\n      return [{\n        name: 'edit_mode',\n        icon: _toolbox_icon_svg__WEBPACK_IMPORTED_MODULE_1__[\"default\"],\n        title: 'ボタンを編集'\n      }];\n    }\n  }, {\n    key: \"isReadOnlySupported\",\n    get: function get() {\n      return true;\n    }\n    /**\n     *\n     * @returns {boolean}\n     */\n  }, {\n    key: \"enableLineBreaks\",\n    get: function get() {\n      return false;\n    }\n\n    /**\n     *\n     * @returns {{EDIT: number, VIEW: number}}\n     * @constructor\n     */\n  }, {\n    key: \"STATE\",\n    get: function get() {\n      return {\n        EDIT: 0,\n        VIEW: 1\n      };\n    }\n  }, {\n    key: \"sanitize\",\n    get: function get() {\n      return {\n        text: false,\n        link: false\n      };\n    }\n  }]);\n}();\n\n\n//# sourceURL=webpack://AnyButton/./src/index.js?");
 30 | 
 31 | /***/ }),
 32 | 
 33 | /***/ "./node_modules/codex-notifier/dist/bundle.js":
 34 | /*!****************************************************!*\
 35 |   !*** ./node_modules/codex-notifier/dist/bundle.js ***!
 36 |   \****************************************************/
 37 | /***/ ((module) => {
 38 | 
 39 | eval("!function(t,e){ true?module.exports=e():0}(window,function(){return function(t){var e={};function n(o){if(e[o])return e[o].exports;var r=e[o]={i:o,l:!1,exports:{}};return t[o].call(r.exports,r,r.exports,n),r.l=!0,r.exports}return n.m=t,n.c=e,n.d=function(t,e,o){n.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:o})},n.r=function(t){\"undefined\"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:\"Module\"}),Object.defineProperty(t,\"__esModule\",{value:!0})},n.t=function(t,e){if(1&e&&(t=n(t)),8&e)return t;if(4&e&&\"object\"==typeof t&&t&&t.__esModule)return t;var o=Object.create(null);if(n.r(o),Object.defineProperty(o,\"default\",{enumerable:!0,value:t}),2&e&&\"string\"!=typeof t)for(var r in t)n.d(o,r,function(e){return t[e]}.bind(null,r));return o},n.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return n.d(e,\"a\",e),e},n.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},n.p=\"/\",n(n.s=0)}([function(t,e,n){\"use strict\";n(1),\n/*!\n * Codex JavaScript Notification module\n * https://github.com/codex-team/js-notifier\n */\nt.exports=function(){var t=n(6),e=\"cdx-notify--bounce-in\",o=null;return{show:function(n){if(n.message){!function(){if(o)return!0;o=t.getWrapper(),document.body.appendChild(o)}();var r=null,i=n.time||8e3;switch(n.type){case\"confirm\":r=t.confirm(n);break;case\"prompt\":r=t.prompt(n);break;default:r=t.alert(n),window.setTimeout(function(){r.remove()},i)}o.appendChild(r),r.classList.add(e)}}}}()},function(t,e,n){var o=n(2);\"string\"==typeof o&&(o=[[t.i,o,\"\"]]);var r={hmr:!0,transform:void 0,insertInto:void 0};n(4)(o,r);o.locals&&(t.exports=o.locals)},function(t,e,n){(t.exports=n(3)(!1)).push([t.i,'.cdx-notify--error{background:#fffbfb!important}.cdx-notify--error::before{background:#fb5d5d!important}.cdx-notify__input{max-width:130px;padding:5px 10px;background:#f7f7f7;border:0;border-radius:3px;font-size:13px;color:#656b7c;outline:0}.cdx-notify__input:-ms-input-placeholder{color:#656b7c}.cdx-notify__input::placeholder{color:#656b7c}.cdx-notify__input:focus:-ms-input-placeholder{color:rgba(101,107,124,.3)}.cdx-notify__input:focus::placeholder{color:rgba(101,107,124,.3)}.cdx-notify__button{border:none;border-radius:3px;font-size:13px;padding:5px 10px;cursor:pointer}.cdx-notify__button:last-child{margin-left:10px}.cdx-notify__button--cancel{background:#f2f5f7;box-shadow:0 2px 1px 0 rgba(16,19,29,0);color:#656b7c}.cdx-notify__button--cancel:hover{background:#eee}.cdx-notify__button--confirm{background:#34c992;box-shadow:0 1px 1px 0 rgba(18,49,35,.05);color:#fff}.cdx-notify__button--confirm:hover{background:#33b082}.cdx-notify__btns-wrapper{display:-ms-flexbox;display:flex;-ms-flex-flow:row nowrap;flex-flow:row nowrap;margin-top:5px}.cdx-notify__cross{position:absolute;top:5px;right:5px;width:10px;height:10px;padding:5px;opacity:.54;cursor:pointer}.cdx-notify__cross::after,.cdx-notify__cross::before{content:\\'\\';position:absolute;left:9px;top:5px;height:12px;width:2px;background:#575d67}.cdx-notify__cross::before{transform:rotate(-45deg)}.cdx-notify__cross::after{transform:rotate(45deg)}.cdx-notify__cross:hover{opacity:1}.cdx-notifies{position:fixed;z-index:2;bottom:20px;left:20px;font-family:-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Oxygen,Ubuntu,Cantarell,\"Fira Sans\",\"Droid Sans\",\"Helvetica Neue\",sans-serif}.cdx-notify{position:relative;width:220px;margin-top:15px;padding:13px 16px;background:#fff;box-shadow:0 11px 17px 0 rgba(23,32,61,.13);border-radius:5px;font-size:14px;line-height:1.4em;word-wrap:break-word}.cdx-notify::before{content:\\'\\';position:absolute;display:block;top:0;left:0;width:3px;height:calc(100% - 6px);margin:3px;border-radius:5px;background:0 0}@keyframes bounceIn{0%{opacity:0;transform:scale(.3)}50%{opacity:1;transform:scale(1.05)}70%{transform:scale(.9)}100%{transform:scale(1)}}.cdx-notify--bounce-in{animation-name:bounceIn;animation-duration:.6s;animation-iteration-count:1}.cdx-notify--success{background:#fafffe!important}.cdx-notify--success::before{background:#41ffb1!important}',\"\"])},function(t,e){t.exports=function(t){var e=[];return e.toString=function(){return this.map(function(e){var n=function(t,e){var n=t[1]||\"\",o=t[3];if(!o)return n;if(e&&\"function\"==typeof btoa){var r=(a=o,\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,\"+btoa(unescape(encodeURIComponent(JSON.stringify(a))))+\" */\"),i=o.sources.map(function(t){return\"/*# sourceURL=\"+o.sourceRoot+t+\" */\"});return[n].concat(i).concat([r]).join(\"\\n\")}var a;return[n].join(\"\\n\")}(e,t);return e[2]?\"@media \"+e[2]+\"{\"+n+\"}\":n}).join(\"\")},e.i=function(t,n){\"string\"==typeof t&&(t=[[null,t,\"\"]]);for(var o={},r=0;r<this.length;r++){var i=this[r][0];\"number\"==typeof i&&(o[i]=!0)}for(r=0;r<t.length;r++){var a=t[r];\"number\"==typeof a[0]&&o[a[0]]||(n&&!a[2]?a[2]=n:n&&(a[2]=\"(\"+a[2]+\") and (\"+n+\")\"),e.push(a))}},e}},function(t,e,n){var o,r,i={},a=(o=function(){return window&&document&&document.all&&!window.atob},function(){return void 0===r&&(r=o.apply(this,arguments)),r}),c=function(t){var e={};return function(t){if(\"function\"==typeof t)return t();if(void 0===e[t]){var n=function(t){return document.querySelector(t)}.call(this,t);if(window.HTMLIFrameElement&&n instanceof window.HTMLIFrameElement)try{n=n.contentDocument.head}catch(t){n=null}e[t]=n}return e[t]}}(),s=null,f=0,d=[],u=n(5);function l(t,e){for(var n=0;n<t.length;n++){var o=t[n],r=i[o.id];if(r){r.refs++;for(var a=0;a<r.parts.length;a++)r.parts[a](o.parts[a]);for(;a<o.parts.length;a++)r.parts.push(h(o.parts[a],e))}else{var c=[];for(a=0;a<o.parts.length;a++)c.push(h(o.parts[a],e));i[o.id]={id:o.id,refs:1,parts:c}}}}function p(t,e){for(var n=[],o={},r=0;r<t.length;r++){var i=t[r],a=e.base?i[0]+e.base:i[0],c={css:i[1],media:i[2],sourceMap:i[3]};o[a]?o[a].parts.push(c):n.push(o[a]={id:a,parts:[c]})}return n}function b(t,e){var n=c(t.insertInto);if(!n)throw new Error(\"Couldn't find a style target. This probably means that the value for the 'insertInto' parameter is invalid.\");var o=d[d.length-1];if(\"top\"===t.insertAt)o?o.nextSibling?n.insertBefore(e,o.nextSibling):n.appendChild(e):n.insertBefore(e,n.firstChild),d.push(e);else if(\"bottom\"===t.insertAt)n.appendChild(e);else{if(\"object\"!=typeof t.insertAt||!t.insertAt.before)throw new Error(\"[Style Loader]\\n\\n Invalid value for parameter 'insertAt' ('options.insertAt') found.\\n Must be 'top', 'bottom', or Object.\\n (https://github.com/webpack-contrib/style-loader#insertat)\\n\");var r=c(t.insertInto+\" \"+t.insertAt.before);n.insertBefore(e,r)}}function m(t){if(null===t.parentNode)return!1;t.parentNode.removeChild(t);var e=d.indexOf(t);e>=0&&d.splice(e,1)}function x(t){var e=document.createElement(\"style\");return void 0===t.attrs.type&&(t.attrs.type=\"text/css\"),y(e,t.attrs),b(t,e),e}function y(t,e){Object.keys(e).forEach(function(n){t.setAttribute(n,e[n])})}function h(t,e){var n,o,r,i;if(e.transform&&t.css){if(!(i=e.transform(t.css)))return function(){};t.css=i}if(e.singleton){var a=f++;n=s||(s=x(e)),o=_.bind(null,n,a,!1),r=_.bind(null,n,a,!0)}else t.sourceMap&&\"function\"==typeof URL&&\"function\"==typeof URL.createObjectURL&&\"function\"==typeof URL.revokeObjectURL&&\"function\"==typeof Blob&&\"function\"==typeof btoa?(n=function(t){var e=document.createElement(\"link\");return void 0===t.attrs.type&&(t.attrs.type=\"text/css\"),t.attrs.rel=\"stylesheet\",y(e,t.attrs),b(t,e),e}(e),o=function(t,e,n){var o=n.css,r=n.sourceMap,i=void 0===e.convertToAbsoluteUrls&&r;(e.convertToAbsoluteUrls||i)&&(o=u(o));r&&(o+=\"\\n/*# sourceMappingURL=data:application/json;base64,\"+btoa(unescape(encodeURIComponent(JSON.stringify(r))))+\" */\");var a=new Blob([o],{type:\"text/css\"}),c=t.href;t.href=URL.createObjectURL(a),c&&URL.revokeObjectURL(c)}.bind(null,n,e),r=function(){m(n),n.href&&URL.revokeObjectURL(n.href)}):(n=x(e),o=function(t,e){var n=e.css,o=e.media;o&&t.setAttribute(\"media\",o);if(t.styleSheet)t.styleSheet.cssText=n;else{for(;t.firstChild;)t.removeChild(t.firstChild);t.appendChild(document.createTextNode(n))}}.bind(null,n),r=function(){m(n)});return o(t),function(e){if(e){if(e.css===t.css&&e.media===t.media&&e.sourceMap===t.sourceMap)return;o(t=e)}else r()}}t.exports=function(t,e){if(\"undefined\"!=typeof DEBUG&&DEBUG&&\"object\"!=typeof document)throw new Error(\"The style-loader cannot be used in a non-browser environment\");(e=e||{}).attrs=\"object\"==typeof e.attrs?e.attrs:{},e.singleton||\"boolean\"==typeof e.singleton||(e.singleton=a()),e.insertInto||(e.insertInto=\"head\"),e.insertAt||(e.insertAt=\"bottom\");var n=p(t,e);return l(n,e),function(t){for(var o=[],r=0;r<n.length;r++){var a=n[r];(c=i[a.id]).refs--,o.push(c)}t&&l(p(t,e),e);for(r=0;r<o.length;r++){var c;if(0===(c=o[r]).refs){for(var s=0;s<c.parts.length;s++)c.parts[s]();delete i[c.id]}}}};var v,g=(v=[],function(t,e){return v[t]=e,v.filter(Boolean).join(\"\\n\")});function _(t,e,n,o){var r=n?\"\":o.css;if(t.styleSheet)t.styleSheet.cssText=g(e,r);else{var i=document.createTextNode(r),a=t.childNodes;a[e]&&t.removeChild(a[e]),a.length?t.insertBefore(i,a[e]):t.appendChild(i)}}},function(t,e){t.exports=function(t){var e=\"undefined\"!=typeof window&&window.location;if(!e)throw new Error(\"fixUrls requires window.location\");if(!t||\"string\"!=typeof t)return t;var n=e.protocol+\"//\"+e.host,o=n+e.pathname.replace(/\\/[^\\/]*$/,\"/\");return t.replace(/url\\s*\\(((?:[^)(]|\\((?:[^)(]+|\\([^)(]*\\))*\\))*)\\)/gi,function(t,e){var r,i=e.trim().replace(/^\"(.*)\"$/,function(t,e){return e}).replace(/^'(.*)'$/,function(t,e){return e});return/^(#|data:|http:\\/\\/|https:\\/\\/|file:\\/\\/\\/|\\s*$)/i.test(i)?t:(r=0===i.indexOf(\"//\")?i:0===i.indexOf(\"/\")?n+i:o+i.replace(/^\\.\\//,\"\"),\"url(\"+JSON.stringify(r)+\")\")})}},function(t,e,n){\"use strict\";var o,r,i,a,c,s,f,d,u;t.exports=(o=\"cdx-notifies\",r=\"cdx-notify\",i=\"cdx-notify__cross\",a=\"cdx-notify__button--confirm\",c=\"cdx-notify__button--cancel\",s=\"cdx-notify__input\",f=\"cdx-notify__button\",d=\"cdx-notify__btns-wrapper\",{alert:u=function(t){var e=document.createElement(\"DIV\"),n=document.createElement(\"DIV\"),o=t.message,a=t.style;return e.classList.add(r),a&&e.classList.add(r+\"--\"+a),e.innerHTML=o,n.classList.add(i),n.addEventListener(\"click\",e.remove.bind(e)),e.appendChild(n),e},confirm:function(t){var e=u(t),n=document.createElement(\"div\"),o=document.createElement(\"button\"),r=document.createElement(\"button\"),s=e.querySelector(\".\"+i),l=t.cancelHandler,p=t.okHandler;return n.classList.add(d),o.innerHTML=t.okText||\"Confirm\",r.innerHTML=t.cancelText||\"Cancel\",o.classList.add(f),r.classList.add(f),o.classList.add(a),r.classList.add(c),l&&\"function\"==typeof l&&(r.addEventListener(\"click\",l),s.addEventListener(\"click\",l)),p&&\"function\"==typeof p&&o.addEventListener(\"click\",p),o.addEventListener(\"click\",e.remove.bind(e)),r.addEventListener(\"click\",e.remove.bind(e)),n.appendChild(o),n.appendChild(r),e.appendChild(n),e},prompt:function(t){var e=u(t),n=document.createElement(\"div\"),o=document.createElement(\"button\"),r=document.createElement(\"input\"),c=e.querySelector(\".\"+i),l=t.cancelHandler,p=t.okHandler;return n.classList.add(d),o.innerHTML=t.okText||\"Ok\",o.classList.add(f),o.classList.add(a),r.classList.add(s),t.placeholder&&r.setAttribute(\"placeholder\",t.placeholder),t.default&&(r.value=t.default),t.inputType&&(r.type=t.inputType),l&&\"function\"==typeof l&&c.addEventListener(\"click\",l),p&&\"function\"==typeof p&&o.addEventListener(\"click\",function(){p(r.value)}),o.addEventListener(\"click\",e.remove.bind(e)),n.appendChild(r),n.appendChild(o),e.appendChild(n),e},getWrapper:function(){var t=document.createElement(\"DIV\");return t.classList.add(o),t}})}])});\n\n//# sourceURL=webpack://AnyButton/./node_modules/codex-notifier/dist/bundle.js?");
 40 | 
 41 | /***/ }),
 42 | 
 43 | /***/ "./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/index.scss":
 44 | /*!*****************************************************************************************************!*\
 45 |   !*** ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/index.scss ***!
 46 |   \*****************************************************************************************************/
 47 | /***/ ((module, __webpack_exports__, __webpack_require__) => {
 48 | 
 49 | "use strict";
 50 | eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../node_modules/css-loader/dist/runtime/noSourceMaps.js */ \"./node_modules/css-loader/dist/runtime/noSourceMaps.js\");\n/* harmony import */ var _node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../node_modules/css-loader/dist/runtime/api.js */ \"./node_modules/css-loader/dist/runtime/api.js\");\n/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var _node_modules_css_loader_dist_runtime_getUrl_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../node_modules/css-loader/dist/runtime/getUrl.js */ \"./node_modules/css-loader/dist/runtime/getUrl.js\");\n/* harmony import */ var _node_modules_css_loader_dist_runtime_getUrl_js__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_getUrl_js__WEBPACK_IMPORTED_MODULE_2__);\n// Imports\n\n\n\nvar ___CSS_LOADER_URL_IMPORT_0___ = new URL(/* asset import */ __webpack_require__(/*! data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\"> <path d=\"M7.69998 12.6L7.67896 12.62C6.53993 13.7048 6.52012 15.5155 7.63516 16.625V16.625C8.72293 17.7073 10.4799 17.7102 11.5712 16.6314L13.0263 15.193C14.0703 14.1609 14.2141 12.525 13.3662 11.3266L13.22 11.12\" stroke=\"black\" stroke-width=\"2\" stroke-linecap=\"round\"/> <path d=\"M16.22 11.12L16.3564 10.9805C17.2895 10.0265 17.3478 8.5207 16.4914 7.49733V7.49733C15.5691 6.39509 13.9269 6.25143 12.8271 7.17675L11.3901 8.38588C10.0935 9.47674 9.95706 11.4241 11.0888 12.6852L11.12 12.72\" stroke=\"black\" stroke-width=\"2\" stroke-linecap=\"round\"/> </svg> */ \"data:image/svg+xml,<svg xmlns=\\\"http://www.w3.org/2000/svg\\\" width=\\\"24\\\" height=\\\"24\\\" viewBox=\\\"0 0 24 24\\\" fill=\\\"none\\\"> <path d=\\\"M7.69998 12.6L7.67896 12.62C6.53993 13.7048 6.52012 15.5155 7.63516 16.625V16.625C8.72293 17.7073 10.4799 17.7102 11.5712 16.6314L13.0263 15.193C14.0703 14.1609 14.2141 12.525 13.3662 11.3266L13.22 11.12\\\" stroke=\\\"black\\\" stroke-width=\\\"2\\\" stroke-linecap=\\\"round\\\"/> <path d=\\\"M16.22 11.12L16.3564 10.9805C17.2895 10.0265 17.3478 8.5207 16.4914 7.49733V7.49733C15.5691 6.39509 13.9269 6.25143 12.8271 7.17675L11.3901 8.38588C10.0935 9.47674 9.95706 11.4241 11.0888 12.6852L11.12 12.72\\\" stroke=\\\"black\\\" stroke-width=\\\"2\\\" stroke-linecap=\\\"round\\\"/> </svg>\"), __webpack_require__.b);\nvar ___CSS_LOADER_URL_IMPORT_1___ = new URL(/* asset import */ __webpack_require__(/*! data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\"> <path d=\"M8 9V7.2C8 7.08954 8.08954 7 8.2 7L12 7M16 9V7.2C16 7.08954 15.9105 7 15.8 7L12 7M12 7L12 17M12 17H10M12 17H14\" stroke=\"black\" stroke-width=\"2\" stroke-linecap=\"round\"/> </svg> */ \"data:image/svg+xml,<svg xmlns=\\\"http://www.w3.org/2000/svg\\\" width=\\\"24\\\" height=\\\"24\\\" viewBox=\\\"0 0 24 24\\\" fill=\\\"none\\\"> <path d=\\\"M8 9V7.2C8 7.08954 8.08954 7 8.2 7L12 7M16 9V7.2C16 7.08954 15.9105 7 15.8 7L12 7M12 7L12 17M12 17H10M12 17H14\\\" stroke=\\\"black\\\" stroke-width=\\\"2\\\" stroke-linecap=\\\"round\\\"/> </svg>\"), __webpack_require__.b);\nvar ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default()((_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default()));\nvar ___CSS_LOADER_URL_REPLACEMENT_0___ = _node_modules_css_loader_dist_runtime_getUrl_js__WEBPACK_IMPORTED_MODULE_2___default()(___CSS_LOADER_URL_IMPORT_0___);\nvar ___CSS_LOADER_URL_REPLACEMENT_1___ = _node_modules_css_loader_dist_runtime_getUrl_js__WEBPACK_IMPORTED_MODULE_2___default()(___CSS_LOADER_URL_IMPORT_1___);\n// Module\n___CSS_LOADER_EXPORT___.push([module.id, `.hide {\n  display: none !important;\n}\n\n.anyButtonContainer {\n  position: relative;\n}\n\n.anyButtonContainer__registerButton {\n  display: block;\n  margin: auto;\n}\n\n.anyButtonContainer__inputHolder > * {\n  margin-bottom: 10px;\n}\n\n.anyButtonContainer__input {\n  padding-left: 38px;\n  background-repeat: no-repeat;\n  background-position: 10px;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden;\n}\n\n.anyButtonContainer__input--link {\n  background-image: url(${___CSS_LOADER_URL_REPLACEMENT_0___});\n}\n\n.anyButtonContainer__input--text {\n  background-image: url(${___CSS_LOADER_URL_REPLACEMENT_1___});\n}\n\n.anyButtonContainer__input[contentEditable=true][data-placeholder]::before {\n  position: absolute;\n  content: attr(data-placeholder);\n  color: #707684;\n  font-weight: normal;\n  opacity: 0;\n}\n\n.anyButtonContainer__input[contentEditable=true][data-placeholder]:empty::before {\n  opacity: 1;\n}\n\n.anyButtonContainer__input[contentEditable=true][data-placeholder]:empty:focus::before {\n  opacity: 0;\n}\n\n.cdx-button {\n  white-space: nowrap;\n}\n\n.anyButtonContainer__anyButtonHolder {\n  text-align: center;\n}\n\n.anyButton__btn {\n  display: inline-block;\n  font-weight: 400;\n  line-height: 1.5;\n  color: #212529;\n  text-align: center;\n  text-decoration: none !important;\n  vertical-align: middle;\n  cursor: pointer;\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  user-select: none;\n  background-color: transparent;\n  border: 1px solid transparent;\n  padding: 0.375rem 0.75rem;\n  font-size: 1rem;\n  border-radius: 0.25rem;\n  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;\n  word-break: break-all;\n  overflow-wrap: break-word;\n}\n.anyButton__btn--default {\n  color: #fff;\n  background-color: #0d6efd;\n  border-color: #0d6efd;\n}\n.anyButton__btn--gray {\n  color: #fff;\n  background-color: #7c7c7c;\n  border-color: #7c7c7c;\n}\n\n.toggle-input {\n  position: absolute;\n  z-index: 5;\n  opacity: 0;\n  cursor: pointer;\n  width: 40px;\n  height: 20px;\n  margin: 0;\n}\n\n.toggle-label {\n  width: 40px;\n  height: 20px;\n  background: #ccc;\n  position: relative;\n  display: inline-block;\n  border-radius: 46px;\n  transition: 0.4s;\n  box-sizing: border-box;\n}\n\n.toggle-label:after {\n  content: \"\";\n  position: absolute;\n  width: 20px;\n  height: 20px;\n  border-radius: 100%;\n  left: 0;\n  top: 0;\n  z-index: 2;\n  background: #fff;\n  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);\n  transition: 0.4s;\n}\n\n.toggle-input:checked + .toggle-label {\n  background-color: #4BD865;\n}\n\n.toggle-input:checked + .toggle-label:after {\n  left: 20px;\n}\n\n.toggle-switch {\n  width: 40px;\n  margin-left: auto;\n  padding: 10px 0;\n}`, \"\"]);\n// Exports\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);\n\n\n//# sourceURL=webpack://AnyButton/./src/index.scss?./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js");
 51 | 
 52 | /***/ }),
 53 | 
 54 | /***/ "./node_modules/css-loader/dist/runtime/api.js":
 55 | /*!*****************************************************!*\
 56 |   !*** ./node_modules/css-loader/dist/runtime/api.js ***!
 57 |   \*****************************************************/
 58 | /***/ ((module) => {
 59 | 
 60 | "use strict";
 61 | eval("\n\n/*\n  MIT License http://www.opensource.org/licenses/mit-license.php\n  Author Tobias Koppers @sokra\n*/\nmodule.exports = function (cssWithMappingToString) {\n  var list = [];\n\n  // return the list of modules as css string\n  list.toString = function toString() {\n    return this.map(function (item) {\n      var content = \"\";\n      var needLayer = typeof item[5] !== \"undefined\";\n      if (item[4]) {\n        content += \"@supports (\".concat(item[4], \") {\");\n      }\n      if (item[2]) {\n        content += \"@media \".concat(item[2], \" {\");\n      }\n      if (needLayer) {\n        content += \"@layer\".concat(item[5].length > 0 ? \" \".concat(item[5]) : \"\", \" {\");\n      }\n      content += cssWithMappingToString(item);\n      if (needLayer) {\n        content += \"}\";\n      }\n      if (item[2]) {\n        content += \"}\";\n      }\n      if (item[4]) {\n        content += \"}\";\n      }\n      return content;\n    }).join(\"\");\n  };\n\n  // import a list of modules into the list\n  list.i = function i(modules, media, dedupe, supports, layer) {\n    if (typeof modules === \"string\") {\n      modules = [[null, modules, undefined]];\n    }\n    var alreadyImportedModules = {};\n    if (dedupe) {\n      for (var k = 0; k < this.length; k++) {\n        var id = this[k][0];\n        if (id != null) {\n          alreadyImportedModules[id] = true;\n        }\n      }\n    }\n    for (var _k = 0; _k < modules.length; _k++) {\n      var item = [].concat(modules[_k]);\n      if (dedupe && alreadyImportedModules[item[0]]) {\n        continue;\n      }\n      if (typeof layer !== \"undefined\") {\n        if (typeof item[5] === \"undefined\") {\n          item[5] = layer;\n        } else {\n          item[1] = \"@layer\".concat(item[5].length > 0 ? \" \".concat(item[5]) : \"\", \" {\").concat(item[1], \"}\");\n          item[5] = layer;\n        }\n      }\n      if (media) {\n        if (!item[2]) {\n          item[2] = media;\n        } else {\n          item[1] = \"@media \".concat(item[2], \" {\").concat(item[1], \"}\");\n          item[2] = media;\n        }\n      }\n      if (supports) {\n        if (!item[4]) {\n          item[4] = \"\".concat(supports);\n        } else {\n          item[1] = \"@supports (\".concat(item[4], \") {\").concat(item[1], \"}\");\n          item[4] = supports;\n        }\n      }\n      list.push(item);\n    }\n  };\n  return list;\n};\n\n//# sourceURL=webpack://AnyButton/./node_modules/css-loader/dist/runtime/api.js?");
 62 | 
 63 | /***/ }),
 64 | 
 65 | /***/ "./node_modules/css-loader/dist/runtime/getUrl.js":
 66 | /*!********************************************************!*\
 67 |   !*** ./node_modules/css-loader/dist/runtime/getUrl.js ***!
 68 |   \********************************************************/
 69 | /***/ ((module) => {
 70 | 
 71 | "use strict";
 72 | eval("\n\nmodule.exports = function (url, options) {\n  if (!options) {\n    options = {};\n  }\n  if (!url) {\n    return url;\n  }\n  url = String(url.__esModule ? url.default : url);\n\n  // If url is already wrapped in quotes, remove them\n  if (/^['\"].*['\"]$/.test(url)) {\n    url = url.slice(1, -1);\n  }\n  if (options.hash) {\n    url += options.hash;\n  }\n\n  // Should url be wrapped?\n  // See https://drafts.csswg.org/css-values-3/#urls\n  if (/[\"'() \\t\\n]|(%20)/.test(url) || options.needQuotes) {\n    return \"\\\"\".concat(url.replace(/\"/g, '\\\\\"').replace(/\\n/g, \"\\\\n\"), \"\\\"\");\n  }\n  return url;\n};\n\n//# sourceURL=webpack://AnyButton/./node_modules/css-loader/dist/runtime/getUrl.js?");
 73 | 
 74 | /***/ }),
 75 | 
 76 | /***/ "./node_modules/css-loader/dist/runtime/noSourceMaps.js":
 77 | /*!**************************************************************!*\
 78 |   !*** ./node_modules/css-loader/dist/runtime/noSourceMaps.js ***!
 79 |   \**************************************************************/
 80 | /***/ ((module) => {
 81 | 
 82 | "use strict";
 83 | eval("\n\nmodule.exports = function (i) {\n  return i[1];\n};\n\n//# sourceURL=webpack://AnyButton/./node_modules/css-loader/dist/runtime/noSourceMaps.js?");
 84 | 
 85 | /***/ }),
 86 | 
 87 | /***/ "./src/toolbox-icon.svg":
 88 | /*!******************************!*\
 89 |   !*** ./src/toolbox-icon.svg ***!
 90 |   \******************************/
 91 | /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 92 | 
 93 | "use strict";
 94 | eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (\"<svg xmlns=\\\"http://www.w3.org/2000/svg\\\" width=\\\"36\\\" height=\\\"36\\\" viewBox=\\\"0 0 36 36\\\" fill=\\\"none\\\">\\n  <rect x=\\\"9\\\" y=\\\"9\\\" width=\\\"18\\\" height=\\\"18\\\" rx=\\\"3\\\" fill=\\\"black\\\"/>\\n  <path d=\\\"M25 16.2966H20.8875C20.8583 15.9861 20.7806 15.7044 20.6542 15.4515C20.5326 15.1987 20.3625 14.9813 20.1438 14.7994C19.9299 14.6131 19.6698 14.4712 19.3635 14.3736C19.0573 14.2715 18.7097 14.2205 18.3208 14.2205C17.6403 14.2205 17.0642 14.3714 16.5927 14.673C16.126 14.9747 15.7712 15.4072 15.5281 15.9705C15.2899 16.5339 15.1708 17.2104 15.1708 18C15.1708 18.834 15.2924 19.5326 15.5354 20.096C15.7833 20.6549 16.1406 21.0764 16.6073 21.3603C17.074 21.6397 17.6354 21.7795 18.2917 21.7795C18.666 21.7795 19.0014 21.7373 19.2979 21.653C19.5944 21.5643 19.8521 21.4379 20.0708 21.2738C20.2896 21.1096 20.467 20.9122 20.6031 20.6816C20.7441 20.4465 20.8389 20.1825 20.8875 19.8897L25 19.9163C24.9514 20.493 24.774 21.0808 24.4677 21.6797C24.1615 22.2741 23.7264 22.8241 23.1625 23.3298C22.6035 23.8311 21.9108 24.2348 21.0844 24.5409C20.258 24.847 19.2979 25 18.2042 25C16.8333 25 15.6035 24.7316 14.5146 24.1949C13.4306 23.6581 12.5726 22.8685 11.9406 21.826C11.3135 20.7836 11 19.5082 11 18C11 16.4829 11.3208 15.2053 11.9625 14.1673C12.6042 13.1248 13.4694 12.3375 14.5583 11.8051C15.6472 11.2684 16.8625 11 18.2042 11C19.1472 11 20.0149 11.1176 20.8073 11.3527C21.5997 11.5878 22.2948 11.9316 22.8927 12.384C23.4906 12.8321 23.9719 13.3843 24.3365 14.0409C24.701 14.6974 24.9222 15.4493 25 16.2966Z\\\" fill=\\\"white\\\"/>\\n</svg>\");\n\n//# sourceURL=webpack://AnyButton/./src/toolbox-icon.svg?");
 95 | 
 96 | /***/ }),
 97 | 
 98 | /***/ "./src/index.scss":
 99 | /*!************************!*\
100 |   !*** ./src/index.scss ***!
101 |   \************************/
102 | /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
103 | 
104 | "use strict";
105 | eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _node_modules_style_loader_dist_runtime_injectStylesIntoStyleTag_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! !../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js */ \"./node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js\");\n/* harmony import */ var _node_modules_style_loader_dist_runtime_injectStylesIntoStyleTag_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_style_loader_dist_runtime_injectStylesIntoStyleTag_js__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _node_modules_style_loader_dist_runtime_styleDomAPI_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! !../node_modules/style-loader/dist/runtime/styleDomAPI.js */ \"./node_modules/style-loader/dist/runtime/styleDomAPI.js\");\n/* harmony import */ var _node_modules_style_loader_dist_runtime_styleDomAPI_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_node_modules_style_loader_dist_runtime_styleDomAPI_js__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var _node_modules_style_loader_dist_runtime_insertBySelector_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! !../node_modules/style-loader/dist/runtime/insertBySelector.js */ \"./node_modules/style-loader/dist/runtime/insertBySelector.js\");\n/* harmony import */ var _node_modules_style_loader_dist_runtime_insertBySelector_js__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_node_modules_style_loader_dist_runtime_insertBySelector_js__WEBPACK_IMPORTED_MODULE_2__);\n/* harmony import */ var _node_modules_style_loader_dist_runtime_setAttributesWithoutAttributes_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! !../node_modules/style-loader/dist/runtime/setAttributesWithoutAttributes.js */ \"./node_modules/style-loader/dist/runtime/setAttributesWithoutAttributes.js\");\n/* harmony import */ var _node_modules_style_loader_dist_runtime_setAttributesWithoutAttributes_js__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_node_modules_style_loader_dist_runtime_setAttributesWithoutAttributes_js__WEBPACK_IMPORTED_MODULE_3__);\n/* harmony import */ var _node_modules_style_loader_dist_runtime_insertStyleElement_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! !../node_modules/style-loader/dist/runtime/insertStyleElement.js */ \"./node_modules/style-loader/dist/runtime/insertStyleElement.js\");\n/* harmony import */ var _node_modules_style_loader_dist_runtime_insertStyleElement_js__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(_node_modules_style_loader_dist_runtime_insertStyleElement_js__WEBPACK_IMPORTED_MODULE_4__);\n/* harmony import */ var _node_modules_style_loader_dist_runtime_styleTagTransform_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! !../node_modules/style-loader/dist/runtime/styleTagTransform.js */ \"./node_modules/style-loader/dist/runtime/styleTagTransform.js\");\n/* harmony import */ var _node_modules_style_loader_dist_runtime_styleTagTransform_js__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(_node_modules_style_loader_dist_runtime_styleTagTransform_js__WEBPACK_IMPORTED_MODULE_5__);\n/* harmony import */ var _node_modules_css_loader_dist_cjs_js_node_modules_sass_loader_dist_cjs_js_index_scss__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! !!../node_modules/css-loader/dist/cjs.js!../node_modules/sass-loader/dist/cjs.js!./index.scss */ \"./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/index.scss\");\n\n      \n      \n      \n      \n      \n      \n      \n      \n      \n\nvar options = {};\n\noptions.styleTagTransform = (_node_modules_style_loader_dist_runtime_styleTagTransform_js__WEBPACK_IMPORTED_MODULE_5___default());\noptions.setAttributes = (_node_modules_style_loader_dist_runtime_setAttributesWithoutAttributes_js__WEBPACK_IMPORTED_MODULE_3___default());\noptions.insert = _node_modules_style_loader_dist_runtime_insertBySelector_js__WEBPACK_IMPORTED_MODULE_2___default().bind(null, \"head\");\noptions.domAPI = (_node_modules_style_loader_dist_runtime_styleDomAPI_js__WEBPACK_IMPORTED_MODULE_1___default());\noptions.insertStyleElement = (_node_modules_style_loader_dist_runtime_insertStyleElement_js__WEBPACK_IMPORTED_MODULE_4___default());\n\nvar update = _node_modules_style_loader_dist_runtime_injectStylesIntoStyleTag_js__WEBPACK_IMPORTED_MODULE_0___default()(_node_modules_css_loader_dist_cjs_js_node_modules_sass_loader_dist_cjs_js_index_scss__WEBPACK_IMPORTED_MODULE_6__[\"default\"], options);\n\n\n\n\n       /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (_node_modules_css_loader_dist_cjs_js_node_modules_sass_loader_dist_cjs_js_index_scss__WEBPACK_IMPORTED_MODULE_6__[\"default\"] && _node_modules_css_loader_dist_cjs_js_node_modules_sass_loader_dist_cjs_js_index_scss__WEBPACK_IMPORTED_MODULE_6__[\"default\"].locals ? _node_modules_css_loader_dist_cjs_js_node_modules_sass_loader_dist_cjs_js_index_scss__WEBPACK_IMPORTED_MODULE_6__[\"default\"].locals : undefined);\n\n\n//# sourceURL=webpack://AnyButton/./src/index.scss?");
106 | 
107 | /***/ }),
108 | 
109 | /***/ "./node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js":
110 | /*!****************************************************************************!*\
111 |   !*** ./node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js ***!
112 |   \****************************************************************************/
113 | /***/ ((module) => {
114 | 
115 | "use strict";
116 | eval("\n\nvar stylesInDOM = [];\nfunction getIndexByIdentifier(identifier) {\n  var result = -1;\n  for (var i = 0; i < stylesInDOM.length; i++) {\n    if (stylesInDOM[i].identifier === identifier) {\n      result = i;\n      break;\n    }\n  }\n  return result;\n}\nfunction modulesToDom(list, options) {\n  var idCountMap = {};\n  var identifiers = [];\n  for (var i = 0; i < list.length; i++) {\n    var item = list[i];\n    var id = options.base ? item[0] + options.base : item[0];\n    var count = idCountMap[id] || 0;\n    var identifier = \"\".concat(id, \" \").concat(count);\n    idCountMap[id] = count + 1;\n    var indexByIdentifier = getIndexByIdentifier(identifier);\n    var obj = {\n      css: item[1],\n      media: item[2],\n      sourceMap: item[3],\n      supports: item[4],\n      layer: item[5]\n    };\n    if (indexByIdentifier !== -1) {\n      stylesInDOM[indexByIdentifier].references++;\n      stylesInDOM[indexByIdentifier].updater(obj);\n    } else {\n      var updater = addElementStyle(obj, options);\n      options.byIndex = i;\n      stylesInDOM.splice(i, 0, {\n        identifier: identifier,\n        updater: updater,\n        references: 1\n      });\n    }\n    identifiers.push(identifier);\n  }\n  return identifiers;\n}\nfunction addElementStyle(obj, options) {\n  var api = options.domAPI(options);\n  api.update(obj);\n  var updater = function updater(newObj) {\n    if (newObj) {\n      if (newObj.css === obj.css && newObj.media === obj.media && newObj.sourceMap === obj.sourceMap && newObj.supports === obj.supports && newObj.layer === obj.layer) {\n        return;\n      }\n      api.update(obj = newObj);\n    } else {\n      api.remove();\n    }\n  };\n  return updater;\n}\nmodule.exports = function (list, options) {\n  options = options || {};\n  list = list || [];\n  var lastIdentifiers = modulesToDom(list, options);\n  return function update(newList) {\n    newList = newList || [];\n    for (var i = 0; i < lastIdentifiers.length; i++) {\n      var identifier = lastIdentifiers[i];\n      var index = getIndexByIdentifier(identifier);\n      stylesInDOM[index].references--;\n    }\n    var newLastIdentifiers = modulesToDom(newList, options);\n    for (var _i = 0; _i < lastIdentifiers.length; _i++) {\n      var _identifier = lastIdentifiers[_i];\n      var _index = getIndexByIdentifier(_identifier);\n      if (stylesInDOM[_index].references === 0) {\n        stylesInDOM[_index].updater();\n        stylesInDOM.splice(_index, 1);\n      }\n    }\n    lastIdentifiers = newLastIdentifiers;\n  };\n};\n\n//# sourceURL=webpack://AnyButton/./node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js?");
117 | 
118 | /***/ }),
119 | 
120 | /***/ "./node_modules/style-loader/dist/runtime/insertBySelector.js":
121 | /*!********************************************************************!*\
122 |   !*** ./node_modules/style-loader/dist/runtime/insertBySelector.js ***!
123 |   \********************************************************************/
124 | /***/ ((module) => {
125 | 
126 | "use strict";
127 | eval("\n\nvar memo = {};\n\n/* istanbul ignore next  */\nfunction getTarget(target) {\n  if (typeof memo[target] === \"undefined\") {\n    var styleTarget = document.querySelector(target);\n\n    // Special case to return head of iframe instead of iframe itself\n    if (window.HTMLIFrameElement && styleTarget instanceof window.HTMLIFrameElement) {\n      try {\n        // This will throw an exception if access to iframe is blocked\n        // due to cross-origin restrictions\n        styleTarget = styleTarget.contentDocument.head;\n      } catch (e) {\n        // istanbul ignore next\n        styleTarget = null;\n      }\n    }\n    memo[target] = styleTarget;\n  }\n  return memo[target];\n}\n\n/* istanbul ignore next  */\nfunction insertBySelector(insert, style) {\n  var target = getTarget(insert);\n  if (!target) {\n    throw new Error(\"Couldn't find a style target. This probably means that the value for the 'insert' parameter is invalid.\");\n  }\n  target.appendChild(style);\n}\nmodule.exports = insertBySelector;\n\n//# sourceURL=webpack://AnyButton/./node_modules/style-loader/dist/runtime/insertBySelector.js?");
128 | 
129 | /***/ }),
130 | 
131 | /***/ "./node_modules/style-loader/dist/runtime/insertStyleElement.js":
132 | /*!**********************************************************************!*\
133 |   !*** ./node_modules/style-loader/dist/runtime/insertStyleElement.js ***!
134 |   \**********************************************************************/
135 | /***/ ((module) => {
136 | 
137 | "use strict";
138 | eval("\n\n/* istanbul ignore next  */\nfunction insertStyleElement(options) {\n  var element = document.createElement(\"style\");\n  options.setAttributes(element, options.attributes);\n  options.insert(element, options.options);\n  return element;\n}\nmodule.exports = insertStyleElement;\n\n//# sourceURL=webpack://AnyButton/./node_modules/style-loader/dist/runtime/insertStyleElement.js?");
139 | 
140 | /***/ }),
141 | 
142 | /***/ "./node_modules/style-loader/dist/runtime/setAttributesWithoutAttributes.js":
143 | /*!**********************************************************************************!*\
144 |   !*** ./node_modules/style-loader/dist/runtime/setAttributesWithoutAttributes.js ***!
145 |   \**********************************************************************************/
146 | /***/ ((module, __unused_webpack_exports, __webpack_require__) => {
147 | 
148 | "use strict";
149 | eval("\n\n/* istanbul ignore next  */\nfunction setAttributesWithoutAttributes(styleElement) {\n  var nonce =  true ? __webpack_require__.nc : 0;\n  if (nonce) {\n    styleElement.setAttribute(\"nonce\", nonce);\n  }\n}\nmodule.exports = setAttributesWithoutAttributes;\n\n//# sourceURL=webpack://AnyButton/./node_modules/style-loader/dist/runtime/setAttributesWithoutAttributes.js?");
150 | 
151 | /***/ }),
152 | 
153 | /***/ "./node_modules/style-loader/dist/runtime/styleDomAPI.js":
154 | /*!***************************************************************!*\
155 |   !*** ./node_modules/style-loader/dist/runtime/styleDomAPI.js ***!
156 |   \***************************************************************/
157 | /***/ ((module) => {
158 | 
159 | "use strict";
160 | eval("\n\n/* istanbul ignore next  */\nfunction apply(styleElement, options, obj) {\n  var css = \"\";\n  if (obj.supports) {\n    css += \"@supports (\".concat(obj.supports, \") {\");\n  }\n  if (obj.media) {\n    css += \"@media \".concat(obj.media, \" {\");\n  }\n  var needLayer = typeof obj.layer !== \"undefined\";\n  if (needLayer) {\n    css += \"@layer\".concat(obj.layer.length > 0 ? \" \".concat(obj.layer) : \"\", \" {\");\n  }\n  css += obj.css;\n  if (needLayer) {\n    css += \"}\";\n  }\n  if (obj.media) {\n    css += \"}\";\n  }\n  if (obj.supports) {\n    css += \"}\";\n  }\n  var sourceMap = obj.sourceMap;\n  if (sourceMap && typeof btoa !== \"undefined\") {\n    css += \"\\n/*# sourceMappingURL=data:application/json;base64,\".concat(btoa(unescape(encodeURIComponent(JSON.stringify(sourceMap)))), \" */\");\n  }\n\n  // For old IE\n  /* istanbul ignore if  */\n  options.styleTagTransform(css, styleElement, options.options);\n}\nfunction removeStyleElement(styleElement) {\n  // istanbul ignore if\n  if (styleElement.parentNode === null) {\n    return false;\n  }\n  styleElement.parentNode.removeChild(styleElement);\n}\n\n/* istanbul ignore next  */\nfunction domAPI(options) {\n  if (typeof document === \"undefined\") {\n    return {\n      update: function update() {},\n      remove: function remove() {}\n    };\n  }\n  var styleElement = options.insertStyleElement(options);\n  return {\n    update: function update(obj) {\n      apply(styleElement, options, obj);\n    },\n    remove: function remove() {\n      removeStyleElement(styleElement);\n    }\n  };\n}\nmodule.exports = domAPI;\n\n//# sourceURL=webpack://AnyButton/./node_modules/style-loader/dist/runtime/styleDomAPI.js?");
161 | 
162 | /***/ }),
163 | 
164 | /***/ "./node_modules/style-loader/dist/runtime/styleTagTransform.js":
165 | /*!*********************************************************************!*\
166 |   !*** ./node_modules/style-loader/dist/runtime/styleTagTransform.js ***!
167 |   \*********************************************************************/
168 | /***/ ((module) => {
169 | 
170 | "use strict";
171 | eval("\n\n/* istanbul ignore next  */\nfunction styleTagTransform(css, styleElement) {\n  if (styleElement.styleSheet) {\n    styleElement.styleSheet.cssText = css;\n  } else {\n    while (styleElement.firstChild) {\n      styleElement.removeChild(styleElement.firstChild);\n    }\n    styleElement.appendChild(document.createTextNode(css));\n  }\n}\nmodule.exports = styleTagTransform;\n\n//# sourceURL=webpack://AnyButton/./node_modules/style-loader/dist/runtime/styleTagTransform.js?");
172 | 
173 | /***/ }),
174 | 
175 | /***/ "data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\"> <path d=\"M7.69998 12.6L7.67896 12.62C6.53993 13.7048 6.52012 15.5155 7.63516 16.625V16.625C8.72293 17.7073 10.4799 17.7102 11.5712 16.6314L13.0263 15.193C14.0703 14.1609 14.2141 12.525 13.3662 11.3266L13.22 11.12\" stroke=\"black\" stroke-width=\"2\" stroke-linecap=\"round\"/> <path d=\"M16.22 11.12L16.3564 10.9805C17.2895 10.0265 17.3478 8.5207 16.4914 7.49733V7.49733C15.5691 6.39509 13.9269 6.25143 12.8271 7.17675L11.3901 8.38588C10.0935 9.47674 9.95706 11.4241 11.0888 12.6852L11.12 12.72\" stroke=\"black\" stroke-width=\"2\" stroke-linecap=\"round\"/> </svg>":
176 | /*!***************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
177 |   !*** data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"> <path d="M7.69998 12.6L7.67896 12.62C6.53993 13.7048 6.52012 15.5155 7.63516 16.625V16.625C8.72293 17.7073 10.4799 17.7102 11.5712 16.6314L13.0263 15.193C14.0703 14.1609 14.2141 12.525 13.3662 11.3266L13.22 11.12" stroke="black" stroke-width="2" stroke-linecap="round"/> <path d="M16.22 11.12L16.3564 10.9805C17.2895 10.0265 17.3478 8.5207 16.4914 7.49733V7.49733C15.5691 6.39509 13.9269 6.25143 12.8271 7.17675L11.3901 8.38588C10.0935 9.47674 9.95706 11.4241 11.0888 12.6852L11.12 12.72" stroke="black" stroke-width="2" stroke-linecap="round"/> </svg> ***!
178 |   \***************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
179 | /***/ ((module) => {
180 | 
181 | "use strict";
182 | eval("module.exports = \"data:image/svg+xml,<svg xmlns=\\\"http://www.w3.org/2000/svg\\\" width=\\\"24\\\" height=\\\"24\\\" viewBox=\\\"0 0 24 24\\\" fill=\\\"none\\\"> <path d=\\\"M7.69998 12.6L7.67896 12.62C6.53993 13.7048 6.52012 15.5155 7.63516 16.625V16.625C8.72293 17.7073 10.4799 17.7102 11.5712 16.6314L13.0263 15.193C14.0703 14.1609 14.2141 12.525 13.3662 11.3266L13.22 11.12\\\" stroke=\\\"black\\\" stroke-width=\\\"2\\\" stroke-linecap=\\\"round\\\"/> <path d=\\\"M16.22 11.12L16.3564 10.9805C17.2895 10.0265 17.3478 8.5207 16.4914 7.49733V7.49733C15.5691 6.39509 13.9269 6.25143 12.8271 7.17675L11.3901 8.38588C10.0935 9.47674 9.95706 11.4241 11.0888 12.6852L11.12 12.72\\\" stroke=\\\"black\\\" stroke-width=\\\"2\\\" stroke-linecap=\\\"round\\\"/> </svg>\";\n\n//# sourceURL=webpack://AnyButton/data:image/svg+xml,%3Csvg_xmlns=%22http://www.w3.org/2000/svg%22_width=%2224%22_height=%2224%22_viewBox=%220_0_24_24%22_fill=%22none%22%3E_%3Cpath_d=%22M7.69998_12.6L7.67896_12.62C6.53993_13.7048_6.52012_15.5155_7.63516_16.625V16.625C8.72293_17.7073_10.4799_17.7102_11.5712_16.6314L13.0263_15.193C14.0703_14.1609_14.2141_12.525_13.3662_11.3266L13.22_11.12%22_stroke=%22black%22_stroke-width=%222%22_stroke-linecap=%22round%22/%3E_%3Cpath_d=%22M16.22_11.12L16.3564_10.9805C17.2895_10.0265_17.3478_8.5207_16.4914_7.49733V7.49733C15.5691_6.39509_13.9269_6.25143_12.8271_7.17675L11.3901_8.38588C10.0935_9.47674_9.95706_11.4241_11.0888_12.6852L11.12_12.72%22_stroke=%22black%22_stroke-width=%222%22_stroke-linecap=%22round%22/%3E_%3C/svg%3E?");
183 | 
184 | /***/ }),
185 | 
186 | /***/ "data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\"> <path d=\"M8 9V7.2C8 7.08954 8.08954 7 8.2 7L12 7M16 9V7.2C16 7.08954 15.9105 7 15.8 7L12 7M12 7L12 17M12 17H10M12 17H14\" stroke=\"black\" stroke-width=\"2\" stroke-linecap=\"round\"/> </svg>":
187 | /*!*******************************************************************************************************************************************************************************************************************************************************************************************************************!*\
188 |   !*** data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"> <path d="M8 9V7.2C8 7.08954 8.08954 7 8.2 7L12 7M16 9V7.2C16 7.08954 15.9105 7 15.8 7L12 7M12 7L12 17M12 17H10M12 17H14" stroke="black" stroke-width="2" stroke-linecap="round"/> </svg> ***!
189 |   \*******************************************************************************************************************************************************************************************************************************************************************************************************************/
190 | /***/ ((module) => {
191 | 
192 | "use strict";
193 | eval("module.exports = \"data:image/svg+xml,<svg xmlns=\\\"http://www.w3.org/2000/svg\\\" width=\\\"24\\\" height=\\\"24\\\" viewBox=\\\"0 0 24 24\\\" fill=\\\"none\\\"> <path d=\\\"M8 9V7.2C8 7.08954 8.08954 7 8.2 7L12 7M16 9V7.2C16 7.08954 15.9105 7 15.8 7L12 7M12 7L12 17M12 17H10M12 17H14\\\" stroke=\\\"black\\\" stroke-width=\\\"2\\\" stroke-linecap=\\\"round\\\"/> </svg>\";\n\n//# sourceURL=webpack://AnyButton/data:image/svg+xml,%3Csvg_xmlns=%22http://www.w3.org/2000/svg%22_width=%2224%22_height=%2224%22_viewBox=%220_0_24_24%22_fill=%22none%22%3E_%3Cpath_d=%22M8_9V7.2C8_7.08954_8.08954_7_8.2_7L12_7M16_9V7.2C16_7.08954_15.9105_7_15.8_7L12_7M12_7L12_17M12_17H10M12_17H14%22_stroke=%22black%22_stroke-width=%222%22_stroke-linecap=%22round%22/%3E_%3C/svg%3E?");
194 | 
195 | /***/ })
196 | 
197 | /******/ 	});
198 | /************************************************************************/
199 | /******/ 	// The module cache
200 | /******/ 	var __webpack_module_cache__ = {};
201 | /******/ 	
202 | /******/ 	// The require function
203 | /******/ 	function __webpack_require__(moduleId) {
204 | /******/ 		// Check if module is in cache
205 | /******/ 		var cachedModule = __webpack_module_cache__[moduleId];
206 | /******/ 		if (cachedModule !== undefined) {
207 | /******/ 			return cachedModule.exports;
208 | /******/ 		}
209 | /******/ 		// Create a new module (and put it into the cache)
210 | /******/ 		var module = __webpack_module_cache__[moduleId] = {
211 | /******/ 			id: moduleId,
212 | /******/ 			// no module.loaded needed
213 | /******/ 			exports: {}
214 | /******/ 		};
215 | /******/ 	
216 | /******/ 		// Execute the module function
217 | /******/ 		__webpack_modules__[moduleId](module, module.exports, __webpack_require__);
218 | /******/ 	
219 | /******/ 		// Return the exports of the module
220 | /******/ 		return module.exports;
221 | /******/ 	}
222 | /******/ 	
223 | /******/ 	// expose the modules object (__webpack_modules__)
224 | /******/ 	__webpack_require__.m = __webpack_modules__;
225 | /******/ 	
226 | /************************************************************************/
227 | /******/ 	/* webpack/runtime/compat get default export */
228 | /******/ 	(() => {
229 | /******/ 		// getDefaultExport function for compatibility with non-harmony modules
230 | /******/ 		__webpack_require__.n = (module) => {
231 | /******/ 			var getter = module && module.__esModule ?
232 | /******/ 				() => (module['default']) :
233 | /******/ 				() => (module);
234 | /******/ 			__webpack_require__.d(getter, { a: getter });
235 | /******/ 			return getter;
236 | /******/ 		};
237 | /******/ 	})();
238 | /******/ 	
239 | /******/ 	/* webpack/runtime/define property getters */
240 | /******/ 	(() => {
241 | /******/ 		// define getter functions for harmony exports
242 | /******/ 		__webpack_require__.d = (exports, definition) => {
243 | /******/ 			for(var key in definition) {
244 | /******/ 				if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {
245 | /******/ 					Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });
246 | /******/ 				}
247 | /******/ 			}
248 | /******/ 		};
249 | /******/ 	})();
250 | /******/ 	
251 | /******/ 	/* webpack/runtime/hasOwnProperty shorthand */
252 | /******/ 	(() => {
253 | /******/ 		__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))
254 | /******/ 	})();
255 | /******/ 	
256 | /******/ 	/* webpack/runtime/make namespace object */
257 | /******/ 	(() => {
258 | /******/ 		// define __esModule on exports
259 | /******/ 		__webpack_require__.r = (exports) => {
260 | /******/ 			if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
261 | /******/ 				Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
262 | /******/ 			}
263 | /******/ 			Object.defineProperty(exports, '__esModule', { value: true });
264 | /******/ 		};
265 | /******/ 	})();
266 | /******/ 	
267 | /******/ 	/* webpack/runtime/jsonp chunk loading */
268 | /******/ 	(() => {
269 | /******/ 		__webpack_require__.b = document.baseURI || self.location.href;
270 | /******/ 		
271 | /******/ 		// object to store loaded and loading chunks
272 | /******/ 		// undefined = chunk not loaded, null = chunk preloaded/prefetched
273 | /******/ 		// [resolve, reject, Promise] = chunk loading, 0 = chunk loaded
274 | /******/ 		var installedChunks = {
275 | /******/ 			"main": 0
276 | /******/ 		};
277 | /******/ 		
278 | /******/ 		// no chunk on demand loading
279 | /******/ 		
280 | /******/ 		// no prefetching
281 | /******/ 		
282 | /******/ 		// no preloaded
283 | /******/ 		
284 | /******/ 		// no HMR
285 | /******/ 		
286 | /******/ 		// no HMR manifest
287 | /******/ 		
288 | /******/ 		// no on chunks loaded
289 | /******/ 		
290 | /******/ 		// no jsonp function
291 | /******/ 	})();
292 | /******/ 	
293 | /******/ 	/* webpack/runtime/nonce */
294 | /******/ 	(() => {
295 | /******/ 		__webpack_require__.nc = undefined;
296 | /******/ 	})();
297 | /******/ 	
298 | /************************************************************************/
299 | /******/ 	
300 | /******/ 	// startup
301 | /******/ 	// Load entry module and return exports
302 | /******/ 	// This entry module can't be inlined because the eval devtool is used.
303 | /******/ 	var __webpack_exports__ = __webpack_require__("./src/index.js");
304 | /******/ 	__webpack_exports__ = __webpack_exports__["default"];
305 | /******/ 	
306 | /******/ 	return __webpack_exports__;
307 | /******/ })()
308 | ;
309 | });


--------------------------------------------------------------------------------