diff --git a/assets/icon.svg b/assets/icon.svg
deleted file mode 100644
index 2e2bbf6..0000000
--- a/assets/icon.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
diff --git a/package.json b/package.json
index 99d30a0..d4ebf6b 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "@editorjs/header",
- "version": "2.6.2",
+ "version": "2.7.0",
"keywords": [
"codex editor",
"header",
@@ -29,5 +29,8 @@
"style-loader": "^0.21.0",
"webpack": "^4.29.5",
"webpack-cli": "^3.2.3"
+ },
+ "dependencies": {
+ "@codexteam/icons": "^0.0.5"
}
}
diff --git a/src/index.js b/src/index.js
index 8230e7c..3e15171 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,7 +1,9 @@
/**
* Build styles
*/
-require('./index.css').toString();
+import './index.css';
+
+import { IconH1, IconH2, IconH3, IconH4, IconH5, IconH6, IconHeading } from '@codexteam/icons';
/**
* @typedef {object} HeaderData
@@ -26,7 +28,7 @@ require('./index.css').toString();
* @license MIT
* @version 2.0.0
*/
-class Header {
+export default class Header {
/**
* Render plugin`s main Element and fill it with saved data
*
@@ -47,8 +49,6 @@ class Header {
*/
this._CSS = {
block: this.api.styles.block,
- settingsButton: this.api.styles.settingsButton,
- settingsButtonActive: this.api.styles.settingsButtonActive,
wrapper: 'ce-header',
};
@@ -68,13 +68,6 @@ class Header {
*/
this._data = this.normalizeData(data);
- /**
- * List of settings buttons
- *
- * @type {HTMLElement[]}
- */
- this.settingsButtons = [];
-
/**
* Main Block wrapper
*
@@ -116,60 +109,18 @@ class Header {
}
/**
- * Create Block's settings block
+ * Returns header block tunes config
*
- * @returns {HTMLElement}
+ * @returns {Array}
*/
renderSettings() {
- const holder = document.createElement('DIV');
-
- // do not add settings button, when only one level is configured
- if (this.levels.length <= 1) {
- return holder;
- }
-
- /** Add type selectors */
- this.levels.forEach(level => {
- const selectTypeButton = document.createElement('SPAN');
-
- selectTypeButton.classList.add(this._CSS.settingsButton);
-
- /**
- * Highlight current level button
- */
- if (this.currentLevel.number === level.number) {
- selectTypeButton.classList.add(this._CSS.settingsButtonActive);
- }
-
- /**
- * Add SVG icon
- */
- selectTypeButton.innerHTML = level.svg;
-
- /**
- * Save level to its button
- */
- selectTypeButton.dataset.level = level.number;
-
- /**
- * Set up click handler
- */
- selectTypeButton.addEventListener('click', () => {
- this.setLevel(level.number);
- });
-
- /**
- * Append settings button to holder
- */
- holder.appendChild(selectTypeButton);
-
- /**
- * Save settings buttons
- */
- this.settingsButtons.push(selectTypeButton);
- });
-
- return holder;
+ return this.levels.map(level => ({
+ icon: level.svg,
+ label: this.api.i18n.t(`Heading ${level.number}`),
+ onActivate: () => this.setLevel(level.number),
+ closeOnActivate: true,
+ isActive: this.currentLevel.number === level.number,
+ }));
}
/**
@@ -182,13 +133,6 @@ class Header {
level: level,
text: this.data.text,
};
-
- /**
- * Highlight button by selected level
- */
- this.settingsButtons.forEach(button => {
- button.classList.toggle(this._CSS.settingsButtonActive, parseInt(button.dataset.level) === level);
- });
}
/**
@@ -421,32 +365,32 @@ class Header {
{
number: 1,
tag: 'H1',
- svg: '',
+ svg: IconH1,
},
{
number: 2,
tag: 'H2',
- svg: '',
+ svg: IconH2,
},
{
number: 3,
tag: 'H3',
- svg: '',
+ svg: IconH3,
},
{
number: 4,
tag: 'H4',
- svg: '',
+ svg: IconH4,
},
{
number: 5,
tag: 'H5',
- svg: '',
+ svg: IconH5,
},
{
number: 6,
tag: 'H6',
- svg: '',
+ svg: IconH6,
},
];
@@ -525,10 +469,8 @@ class Header {
*/
static get toolbox() {
return {
- icon: require('./../assets/icon.svg').default,
+ icon: IconHeading,
title: 'Heading',
};
}
}
-
-module.exports = Header;
diff --git a/webpack.config.js b/webpack.config.js
index f7910a3..0055d92 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -12,30 +12,31 @@ module.exports = {
presets: [ '@babel/preset-env' ],
},
},
- ]
+ ],
},
{
test: /\.css$/,
use: [
'style-loader',
- 'css-loader'
- ]
+ 'css-loader',
+ ],
},
{
test: /\.(svg)$/,
use: [
{
loader: 'raw-loader',
- }
- ]
- }
- ]
+ },
+ ],
+ },
+ ],
},
output: {
path: __dirname + '/dist',
publicPath: '/',
filename: 'bundle.js',
library: 'Header',
- libraryTarget: 'umd'
- }
+ libraryTarget: 'umd',
+ libraryExport: 'default',
+ },
};
diff --git a/yarn.lock b/yarn.lock
index dc7c895..8af3576 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -701,6 +701,11 @@
lodash "^4.17.13"
to-fast-properties "^2.0.0"
+"@codexteam/icons@^0.0.5":
+ version "0.0.5"
+ resolved "https://registry.yarnpkg.com/@codexteam/icons/-/icons-0.0.5.tgz#d17f39b6a0497c6439f57dd42711817a3dd3679c"
+ integrity sha512-s6H2KXhLz2rgbMZSkRm8dsMJvyUNZsEjxobBEg9ztdrb1B2H3pEzY6iTwI4XUPJWJ3c3qRKwV4TrO3J5jUdoQA==
+
"@types/json-schema@^7.0.4":
version "7.0.4"
resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.4.tgz#38fd73ddfd9b55abb1e1b2ed578cb55bd7b7d339"