From a6da986e1ebcd05a9e36a6d4152e8dc4a015719b Mon Sep 17 00:00:00 2001 From: Tanya Fomina Date: Wed, 4 May 2022 17:25:11 +0800 Subject: [PATCH 01/10] Multiple toolbox entries --- src/index.js | 60 +++++++++++++++++++++++++++++++++++++++++++++++----- 1 file changed, 55 insertions(+), 5 deletions(-) diff --git a/src/index.js b/src/index.js index 8230e7c..341daea 100644 --- a/src/index.js +++ b/src/index.js @@ -18,6 +18,14 @@ require('./index.css').toString(); * @property {number} defaultLevel — default level */ +/** + * @typedef {object} ToolboxItem + * @description Tool's single toolbox item config + * @property {string} icon - toolbox item icon + * @property {string} title - toolbox item title + * @property {HeaderConfig} config - tool's default config overrides applied with this specific toolbox item + */ + /** * Header block for the Editor.js. * @@ -521,13 +529,55 @@ class Header { * icon - Tool icon's SVG * title - title to show in toolbox * - * @returns {{icon: string, title: string}} + * @returns {ToolboxItem[]} */ static get toolbox() { - return { - icon: require('./../assets/icon.svg').default, - title: 'Heading', - }; + return [ + { + icon: '', + title: 'Header 1', + config: { + defaultLevel: 1, + }, + }, + { + icon: '', + title: 'Header 2', + config: { + defaultLevel: 2, + }, + }, + { + icon: '', + title: 'Header 3', + config: { + defaultLevel: 3, + }, + }, + ]; + } + + /** + * Returns current active toolbox entry + * + * @returns {ToolboxItem} + */ + get activeToolboxEntry() { + return Header.toolbox.find(toolboxItem => toolboxItem.config.defaultLevel === this.currentLevel.number); + } + + /** + * Returns true if specified toolbox item is the active one + * + * @param {ToolboxItem} toolboxItem - toolbox item to check + * @returns {boolean} + */ + isToolboxItemActive(toolboxItem) { + if (!toolboxItem.config) { + return false; + } + + return this.currentLevel.number === toolboxItem.config.defaultLevel; } } From e52e47aea32169289a2edae439d0b24d0ed29c2e Mon Sep 17 00:00:00 2001 From: Tanya Fomina Date: Tue, 10 May 2022 22:56:30 +0800 Subject: [PATCH 02/10] Get rid of isToolboxItemActive --- src/index.js | 18 ++++-------------- 1 file changed, 4 insertions(+), 14 deletions(-) diff --git a/src/index.js b/src/index.js index 341daea..d0b4243 100644 --- a/src/index.js +++ b/src/index.js @@ -23,6 +23,7 @@ require('./index.css').toString(); * @description Tool's single toolbox item config * @property {string} icon - toolbox item icon * @property {string} title - toolbox item title + * @property {string} key - toolbox item key (used to identify a toolbox item) * @property {HeaderConfig} config - tool's default config overrides applied with this specific toolbox item */ @@ -536,6 +537,7 @@ class Header { { icon: '', title: 'Header 1', + key: 'header-1', config: { defaultLevel: 1, }, @@ -543,6 +545,7 @@ class Header { { icon: '', title: 'Header 2', + key: 'header-2', config: { defaultLevel: 2, }, @@ -550,6 +553,7 @@ class Header { { icon: '', title: 'Header 3', + key: 'header-3', config: { defaultLevel: 3, }, @@ -565,20 +569,6 @@ class Header { get activeToolboxEntry() { return Header.toolbox.find(toolboxItem => toolboxItem.config.defaultLevel === this.currentLevel.number); } - - /** - * Returns true if specified toolbox item is the active one - * - * @param {ToolboxItem} toolboxItem - toolbox item to check - * @returns {boolean} - */ - isToolboxItemActive(toolboxItem) { - if (!toolboxItem.config) { - return false; - } - - return this.currentLevel.number === toolboxItem.config.defaultLevel; - } } module.exports = Header; From 55665f4d8caffb099b5733701f2518dae2dc91f3 Mon Sep 17 00:00:00 2001 From: Tanya Fomina Date: Thu, 12 May 2022 13:50:00 +0800 Subject: [PATCH 03/10] Get rid of key --- src/index.js | 4 ---- 1 file changed, 4 deletions(-) diff --git a/src/index.js b/src/index.js index d0b4243..65fa582 100644 --- a/src/index.js +++ b/src/index.js @@ -23,7 +23,6 @@ require('./index.css').toString(); * @description Tool's single toolbox item config * @property {string} icon - toolbox item icon * @property {string} title - toolbox item title - * @property {string} key - toolbox item key (used to identify a toolbox item) * @property {HeaderConfig} config - tool's default config overrides applied with this specific toolbox item */ @@ -537,7 +536,6 @@ class Header { { icon: '', title: 'Header 1', - key: 'header-1', config: { defaultLevel: 1, }, @@ -545,7 +543,6 @@ class Header { { icon: '', title: 'Header 2', - key: 'header-2', config: { defaultLevel: 2, }, @@ -553,7 +550,6 @@ class Header { { icon: '', title: 'Header 3', - key: 'header-3', config: { defaultLevel: 3, }, From 32a485de01b0d94821e462f683e15a864d48a873 Mon Sep 17 00:00:00 2001 From: Tanya Fomina Date: Thu, 12 May 2022 16:06:58 +0800 Subject: [PATCH 04/10] Update activeToolboxEntry getter --- src/index.js | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/src/index.js b/src/index.js index 65fa582..cf26996 100644 --- a/src/index.js +++ b/src/index.js @@ -563,7 +563,14 @@ class Header { * @returns {ToolboxItem} */ get activeToolboxEntry() { - return Header.toolbox.find(toolboxItem => toolboxItem.config.defaultLevel === this.currentLevel.number); + const activeToolboxItem = Header.toolbox.find(toolboxItem => toolboxItem.config.defaultLevel === this.currentLevel.number); + + if (activeToolboxItem) { + return activeToolboxItem; + } + const activeSettingsItem = this.levels.find(level => level.number === this.currentLevel.number); + + return { icon: activeSettingsItem.svg }; } } From 98a6a57a71869bc4564458255e0a3e63047a078a Mon Sep 17 00:00:00 2001 From: Tanya Fomina Date: Thu, 12 May 2022 16:07:57 +0800 Subject: [PATCH 05/10] Add check --- src/index.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/index.js b/src/index.js index cf26996..ecee605 100644 --- a/src/index.js +++ b/src/index.js @@ -570,7 +570,9 @@ class Header { } const activeSettingsItem = this.levels.find(level => level.number === this.currentLevel.number); - return { icon: activeSettingsItem.svg }; + if (activeSettingsItem) { + return { icon: activeSettingsItem.svg }; + } } } From bed97f49c6cccd0075a133836f6e4fae825a2bc1 Mon Sep 17 00:00:00 2001 From: Peter Savchenko Date: Tue, 17 May 2022 22:23:31 +0300 Subject: [PATCH 06/10] use data instead of config --- src/index.js | 30 ++++++------------------------ 1 file changed, 6 insertions(+), 24 deletions(-) diff --git a/src/index.js b/src/index.js index ecee605..9abc60b 100644 --- a/src/index.js +++ b/src/index.js @@ -536,44 +536,26 @@ class Header { { icon: '', title: 'Header 1', - config: { - defaultLevel: 1, + data: { + level: 1, }, }, { icon: '', title: 'Header 2', - config: { - defaultLevel: 2, + data: { + level: 2, }, }, { icon: '', title: 'Header 3', - config: { - defaultLevel: 3, + data: { + level: 3, }, }, ]; } - - /** - * Returns current active toolbox entry - * - * @returns {ToolboxItem} - */ - get activeToolboxEntry() { - const activeToolboxItem = Header.toolbox.find(toolboxItem => toolboxItem.config.defaultLevel === this.currentLevel.number); - - if (activeToolboxItem) { - return activeToolboxItem; - } - const activeSettingsItem = this.levels.find(level => level.number === this.currentLevel.number); - - if (activeSettingsItem) { - return { icon: activeSettingsItem.svg }; - } - } } module.exports = Header; From 5f96780b3677dade95a71388a1e592b83f91aec9 Mon Sep 17 00:00:00 2001 From: Peter Savchenko Date: Thu, 26 May 2022 20:34:22 +0300 Subject: [PATCH 07/10] 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', + }, }; From 497558b0bb88a0a970c0d7280cf2199b4c82e2d1 Mon Sep 17 00:00:00 2001 From: Tanya Date: Mon, 30 May 2022 17:07:01 +0300 Subject: [PATCH 08/10] Update src/index.js Co-authored-by: Peter Savchenko --- src/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/index.js b/src/index.js index 84f8fa7..26552e6 100644 --- a/src/index.js +++ b/src/index.js @@ -30,7 +30,7 @@ import IconH6 from '../assets/icon-h6.svg'; * @description Tool's single toolbox item config * @property {string} icon - toolbox item icon * @property {string} title - toolbox item title - * @property {HeaderConfig} config - tool's default config overrides applied with this specific toolbox item + * @property {HeaderData} data - tool's data overrides applied with this specific toolbox item */ /** From 5e6265bfb65b0359728db320bcb4abc87a34e26c Mon Sep 17 00:00:00 2001 From: Tanya Fomina Date: Wed, 24 Apr 2024 17:43:41 +0300 Subject: [PATCH 09/10] Remove block tunes --- 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 --- src/index.js | 15 --------------- 7 files changed, 33 deletions(-) delete mode 100644 assets/icon-h1.svg delete mode 100644 assets/icon-h2.svg delete mode 100644 assets/icon-h3.svg delete mode 100644 assets/icon-h4.svg delete mode 100644 assets/icon-h5.svg delete mode 100644 assets/icon-h6.svg diff --git a/assets/icon-h1.svg b/assets/icon-h1.svg deleted file mode 100644 index c11fcd6..0000000 --- a/assets/icon-h1.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/assets/icon-h2.svg b/assets/icon-h2.svg deleted file mode 100644 index f18e4eb..0000000 --- a/assets/icon-h2.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/assets/icon-h3.svg b/assets/icon-h3.svg deleted file mode 100644 index 93feee6..0000000 --- a/assets/icon-h3.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/assets/icon-h4.svg b/assets/icon-h4.svg deleted file mode 100644 index 20cb0a9..0000000 --- a/assets/icon-h4.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/assets/icon-h5.svg b/assets/icon-h5.svg deleted file mode 100644 index 688c855..0000000 --- a/assets/icon-h5.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/assets/icon-h6.svg b/assets/icon-h6.svg deleted file mode 100644 index c3da5ca..0000000 --- a/assets/icon-h6.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/src/index.js b/src/index.js index 65a0662..3a120c0 100644 --- a/src/index.js +++ b/src/index.js @@ -120,21 +120,6 @@ export default class Header { return this._element; } - /** - * Returns header block tunes config - * - * @returns {Array} - */ - renderSettings() { - 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, - })); - } - /** * Callback for Block's settings buttons * From 8328615250f681a84573f98af4b1a92deaa94453 Mon Sep 17 00:00:00 2001 From: Tanya Fomina Date: Wed, 24 Apr 2024 17:48:14 +0300 Subject: [PATCH 10/10] Cleanup --- src/index.css | 5 ----- src/index.js | 14 +++++--------- 2 files changed, 5 insertions(+), 14 deletions(-) diff --git a/src/index.css b/src/index.css index 100b070..37e24c5 100644 --- a/src/index.css +++ b/src/index.css @@ -35,8 +35,3 @@ .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 3a120c0..c85163d 100644 --- a/src/index.js +++ b/src/index.js @@ -40,15 +40,11 @@ export default class Header { /** * Render plugin`s main Element and fill it with saved data * - * @param root0 - * @param root0.data - * @param root0.config - * @param root0.api - * @param root0.readOnly - * data — previously saved data - * config - user config for Tool - * api - Editor.js API - * readOnly - read only mode flag + * @param params - constructor params + * @param params.data — previously saved data + * @param params.config - user config for Tool + * @param params.api - Editor.js API + * @param params.readOnly - read only mode flag */ constructor({ data, config, api, readOnly }) { this.api = api;