From edfc6f68e8a1699d6b2fa7b337f5ae936fce5b86 Mon Sep 17 00:00:00 2001 From: Tanya Fomina Date: Fri, 18 Nov 2022 18:00:15 +0200 Subject: [PATCH 1/2] Update tunes and icons --- package.json | 5 ++- src/index.js | 96 ++++++++++------------------------------------- webpack.config.js | 19 +++++----- yarn.lock | 5 +++ 4 files changed, 38 insertions(+), 87 deletions(-) diff --git a/package.json b/package.json index 99d30a0..39651d6 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.4" } } diff --git a/src/index.js b/src/index.js index 8230e7c..db08a1f 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 } 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, }, ]; @@ -530,5 +474,3 @@ class Header { }; } } - -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..f7bc34f 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.4": + version "0.0.4" + resolved "https://registry.yarnpkg.com/@codexteam/icons/-/icons-0.0.4.tgz#8b72dcd3f3a1b0d880bdceb2abebd74b46d3ae13" + integrity sha512-V8N/TY2TGyas4wLrPIFq7bcow68b3gu8DfDt1+rrHPtXxcexadKauRJL6eQgfG7Z0LCrN4boLRawR4S9gjIh/Q== + "@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" From 2f59ccee8b072cfe3186592f2d131827c998bd11 Mon Sep 17 00:00:00 2001 From: Tanya Fomina Date: Fri, 25 Nov 2022 00:59:17 +0400 Subject: [PATCH 2/2] Update toolbox icon --- assets/icon.svg | 3 --- package.json | 2 +- src/index.js | 4 ++-- yarn.lock | 8 ++++---- 4 files changed, 7 insertions(+), 10 deletions(-) delete mode 100644 assets/icon.svg 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 39651d6..d4ebf6b 100644 --- a/package.json +++ b/package.json @@ -31,6 +31,6 @@ "webpack-cli": "^3.2.3" }, "dependencies": { - "@codexteam/icons": "^0.0.4" + "@codexteam/icons": "^0.0.5" } } diff --git a/src/index.js b/src/index.js index db08a1f..3e15171 100644 --- a/src/index.js +++ b/src/index.js @@ -3,7 +3,7 @@ */ import './index.css'; -import { IconH1, IconH2, IconH3, IconH4, IconH5, IconH6 } from '@codexteam/icons'; +import { IconH1, IconH2, IconH3, IconH4, IconH5, IconH6, IconHeading } from '@codexteam/icons'; /** * @typedef {object} HeaderData @@ -469,7 +469,7 @@ export default class Header { */ static get toolbox() { return { - icon: require('./../assets/icon.svg').default, + icon: IconHeading, title: 'Heading', }; } diff --git a/yarn.lock b/yarn.lock index f7bc34f..8af3576 100644 --- a/yarn.lock +++ b/yarn.lock @@ -701,10 +701,10 @@ lodash "^4.17.13" to-fast-properties "^2.0.0" -"@codexteam/icons@^0.0.4": - version "0.0.4" - resolved "https://registry.yarnpkg.com/@codexteam/icons/-/icons-0.0.4.tgz#8b72dcd3f3a1b0d880bdceb2abebd74b46d3ae13" - integrity sha512-V8N/TY2TGyas4wLrPIFq7bcow68b3gu8DfDt1+rrHPtXxcexadKauRJL6eQgfG7Z0LCrN4boLRawR4S9gjIh/Q== +"@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"