From 5f96780b3677dade95a71388a1e592b83f91aec9 Mon Sep 17 00:00:00 2001 From: Peter Savchenko Date: Thu, 26 May 2022 20:34:22 +0300 Subject: [PATCH] icons updated --- assets/icon-h1.svg | 3 +++ assets/icon-h2.svg | 3 +++ assets/icon-h3.svg | 3 +++ assets/icon-h4.svg | 3 +++ assets/icon-h5.svg | 3 +++ assets/icon-h6.svg | 3 +++ assets/icon.svg | 3 --- package.json | 2 +- src/index.css | 5 +++++ src/index.js | 40 +++++++++++++++++++++++----------------- webpack.config.js | 20 ++++++++++---------- 11 files changed, 57 insertions(+), 31 deletions(-) create mode 100644 assets/icon-h1.svg create mode 100644 assets/icon-h2.svg create mode 100644 assets/icon-h3.svg create mode 100644 assets/icon-h4.svg create mode 100644 assets/icon-h5.svg create mode 100644 assets/icon-h6.svg delete mode 100644 assets/icon.svg diff --git a/assets/icon-h1.svg b/assets/icon-h1.svg new file mode 100644 index 0000000..c11fcd6 --- /dev/null +++ b/assets/icon-h1.svg @@ -0,0 +1,3 @@ + + + diff --git a/assets/icon-h2.svg b/assets/icon-h2.svg new file mode 100644 index 0000000..f18e4eb --- /dev/null +++ b/assets/icon-h2.svg @@ -0,0 +1,3 @@ + + + diff --git a/assets/icon-h3.svg b/assets/icon-h3.svg new file mode 100644 index 0000000..93feee6 --- /dev/null +++ b/assets/icon-h3.svg @@ -0,0 +1,3 @@ + + + diff --git a/assets/icon-h4.svg b/assets/icon-h4.svg new file mode 100644 index 0000000..20cb0a9 --- /dev/null +++ b/assets/icon-h4.svg @@ -0,0 +1,3 @@ + + + diff --git a/assets/icon-h5.svg b/assets/icon-h5.svg new file mode 100644 index 0000000..688c855 --- /dev/null +++ b/assets/icon-h5.svg @@ -0,0 +1,3 @@ + + + diff --git a/assets/icon-h6.svg b/assets/icon-h6.svg new file mode 100644 index 0000000..c3da5ca --- /dev/null +++ b/assets/icon-h6.svg @@ -0,0 +1,3 @@ + + + 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..035cdb0 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", diff --git a/src/index.css b/src/index.css index 37e24c5..100b070 100644 --- a/src/index.css +++ b/src/index.css @@ -35,3 +35,8 @@ .ce-header[contentEditable=true][data-placeholder]:empty:focus::before { display: none; } + +.ce-header__tune-button svg { + width: 16px; + height: 16px; +} diff --git a/src/index.js b/src/index.js index 9abc60b..84f8fa7 100644 --- a/src/index.js +++ b/src/index.js @@ -1,7 +1,14 @@ /** * Build styles */ -require('./index.css').toString(); +import './index.css'; + +import IconH1 from '../assets/icon-h1.svg'; +import IconH2 from '../assets/icon-h2.svg'; +import IconH3 from '../assets/icon-h3.svg'; +import IconH4 from '../assets/icon-h4.svg'; +import IconH5 from '../assets/icon-h5.svg'; +import IconH6 from '../assets/icon-h6.svg'; /** * @typedef {object} HeaderData @@ -34,7 +41,7 @@ require('./index.css').toString(); * @license MIT * @version 2.0.0 */ -class Header { +export default class Heading { /** * Render plugin`s main Element and fill it with saved data * @@ -58,6 +65,7 @@ class Header { settingsButton: this.api.styles.settingsButton, settingsButtonActive: this.api.styles.settingsButtonActive, wrapper: 'ce-header', + tuneButton: 'ce-header__tune-button', }; /** @@ -140,7 +148,7 @@ class Header { this.levels.forEach(level => { const selectTypeButton = document.createElement('SPAN'); - selectTypeButton.classList.add(this._CSS.settingsButton); + selectTypeButton.classList.add(this._CSS.settingsButton, this._CSS.tuneButton); /** * Highlight current level button @@ -429,32 +437,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, }, ]; @@ -534,22 +542,22 @@ class Header { static get toolbox() { return [ { - icon: '', - title: 'Header 1', + icon: IconH1, + title: 'Heading 1', data: { level: 1, }, }, { - icon: '', - title: 'Header 2', + icon: IconH2, + title: 'Heading 2', data: { level: 2, }, }, { - icon: '', - title: 'Header 3', + icon: IconH3, + title: 'Heading 3', data: { level: 3, }, @@ -557,5 +565,3 @@ class Header { ]; } } - -module.exports = Header; diff --git a/webpack.config.js b/webpack.config.js index f7910a3..137c1fc 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -1,5 +1,4 @@ module.exports = { - entry: './src/index.js', module: { rules: [ { @@ -12,30 +11,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' - } + libraryExport: 'default', + libraryTarget: 'umd', + }, };