mirror of
https://github.com/codex-team/editor.js
synced 2026-03-16 15:45:47 +01:00
c48898bb5b
- Refactored inline tool interfaces to use MenuConfig directly. - Removed deprecated methods and properties from InlineTool and related types. - Updated tests to reflect changes in inline tool handling and ensure proper functionality. - Enhanced test coverage for inline tools, including link and italic tools. - Cleaned up unused code and improved overall test structure.
96 lines
2.2 KiB
Markdown
96 lines
2.2 KiB
Markdown
# Tools for the Inline Toolbar
|
|
|
|
Similar with [Tools](tools.md) represented Blocks, you can create Tools for the Inline Toolbar. It will work with
|
|
selected fragment of text. The simplest example is `bold` or `italic` Tools.
|
|
|
|
## Base structure
|
|
|
|
First of all, Tool's class should have a `isInline` property (static getter) set as `true`.
|
|
|
|
After that Inline Tool should implement the `render` method.
|
|
|
|
- `render()` — returns Tool's visual representation and logic
|
|
|
|
Also, you can provide optional methods:
|
|
|
|
- `sanitize()` — sanitizer configuration
|
|
|
|
At the constructor of Tool's class exemplar you will accept an object with the [API](api.md) as a parameter.
|
|
|
|
---
|
|
|
|
### render()
|
|
|
|
Method that returns Menu Config for the Inline Toolbar
|
|
|
|
#### Parameters
|
|
|
|
Method does not accept any parameters
|
|
|
|
#### Return value
|
|
|
|
type | description |
|
|
-- | -- |
|
|
`MenuConfig` | configuration object for the tool's button and behavior |
|
|
|
|
#### Example
|
|
|
|
```typescript
|
|
render(): MenuConfig {
|
|
return {
|
|
icon: '<svg>...</svg>',
|
|
title: 'Bold',
|
|
isActive: () => {
|
|
// check if current selection is bold
|
|
},
|
|
onActivate: () => {
|
|
// toggle bold state
|
|
}
|
|
};
|
|
}
|
|
```
|
|
|
|
---
|
|
|
|
### static get sanitize()
|
|
|
|
We recommend to specify the Sanitizer config that corresponds with inline tags that is used by your Tool.
|
|
In that case, your config will be merged with sanitizer configuration of Block Tool
|
|
that is using the Inline Toolbar with your Tool.
|
|
|
|
Example:
|
|
|
|
If your Tool wraps selected text with `<b>` tag, the sanitizer config should looks like this:
|
|
|
|
```js
|
|
static get sanitize() {
|
|
return {
|
|
b: {} // {} means clean all attributes. true — leave all attributes
|
|
}
|
|
}
|
|
```
|
|
|
|
Read more about Sanitizer configuration at the [Tools#sanitize](tools.md#sanitize)
|
|
|
|
### Specifying a title
|
|
|
|
You can pass your Tool's title via `title` static getter. It can be used, for example, in the Tooltip with
|
|
icon description that appears by hover.
|
|
|
|
```ts
|
|
export default class BoldInlineTool implements InlineTool {
|
|
/**
|
|
* Specifies Tool as Inline Toolbar Tool
|
|
*
|
|
* @return {boolean}
|
|
*/
|
|
public static isInline = true;
|
|
|
|
/**
|
|
* Title for hover-tooltip
|
|
*/
|
|
public static title: string = 'Bold';
|
|
|
|
// ... other methods
|
|
}
|
|
```
|