Skip to content

[Feature] Multiple toolbox items #79

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
TatianaFomina wants to merge 12 commits into
base: master
Choose a base branch
from
Open

[Feature] Multiple toolbox items #79

Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
a6da986
Multiple toolbox entries
TatianaFomina May 4, 2022
e52e47a
Get rid of isToolboxItemActive
TatianaFomina May 10, 2022
55665f4
Get rid of key
TatianaFomina May 12, 2022
32a485d
Update activeToolboxEntry getter
TatianaFomina May 12, 2022
98a6a57
Add check
TatianaFomina May 12, 2022
bed97f4
use data instead of config
neSpecc May 17, 2022
599c6b7
Merge pull request #80 from editor-js/pr-79-data-way
neSpecc May 18, 2022
5f96780
icons updated
neSpecc May 26, 2022
497558b
Update src/index.js
TatianaFomina May 30, 2022
e7120b7
Merge branch 'master' into feat/vertical-toolbox-multiple-items
TatianaFomina Apr 24, 2024
5e6265b
Remove block tunes
TatianaFomina Apr 24, 2024
8328615
Cleanup
TatianaFomina Apr 24, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
66 changes: 39 additions & 27 deletions src/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
*/
import './index.css';

import { IconH1, IconH2, IconH3, IconH4, IconH5, IconH6, IconHeading } from '@codexteam/icons';
import { IconH1, IconH2, IconH3, IconH4, IconH5, IconH6 } from '@codexteam/icons';

/**
* @typedef {object} HeaderData
Expand All @@ -20,6 +20,14 @@ import { IconH1, IconH2, IconH3, IconH4, IconH5, IconH6, IconHeading } from '@co
* @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 {HeaderData} data - tool's data overrides applied with this specific toolbox item
*/

/**
* Header block for the Editor.js.
*
Expand All @@ -32,11 +40,11 @@ export default class Header {
/**
* Render plugin`s main Element and fill it with saved data
*
* @param {{data: HeaderData, config: HeaderConfig, api: object}}
* 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;
Expand All @@ -50,6 +58,7 @@ export default class Header {
this._CSS = {
block: this.api.styles.block,
wrapper: 'ce-header',
tuneButton: 'ce-header__tune-button',
};

/**
Expand Down Expand Up @@ -81,7 +90,6 @@ export default class Header {
* Normalize input data
*
* @param {HeaderData} data - saved data to process
*
* @returns {HeaderData}
* @private
*/
Expand All @@ -108,21 +116,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
*
Expand Down Expand Up @@ -465,12 +458,31 @@ export default 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: IconHeading,
title: 'Heading',
};
return [
Copy link
Contributor

@neSpecc neSpecc Apr 24, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

levels configuration should be supported

{
icon: IconH1,
title: 'Heading 1',
data: {
level: 1,
},
},
{
icon: IconH2,
title: 'Heading 2',
data: {
level: 2,
},
},
{
icon: IconH3,
title: 'Heading 3',
data: {
level: 3,
},
},
];
}
}