mirror of
https://github.com/codex-team/editor.js
synced 2024-05-17 05:46:46 +02:00
ac93017c70
* 2.16.0 * [Refactor] Separate internal and external settings (#845) * Enable flipping tools via standalone class (#830) * Enable flipping tools via standalone class * use flipper to refactor (#842) * use flipper to refactor * save changes * update * fix flipper on inline toolbar * ready for testing * requested changes * update doc * updates * destroy flippers * some requested changes * update * update * ready * update * last changes * update docs * Hghl active button of CT, simplify activate/deactivate * separate dom iterator * unhardcode directions * fixed a link in readme.md (#856) * Fix Block selection via CMD+A (#829) * Fix Block selection via CMD+A * Delete editor.js.map * update * update * Update CHANGELOG.md * Improve style of selected blocks (#858) * Cross-block-selection style improved * Update CHANGELOG.md * Fix case when property 'observer' in modificationObserver is not defined (#866) * Bump lodash.template from 4.4.0 to 4.5.0 (#885) Bumps [lodash.template](https://github.com/lodash/lodash) from 4.4.0 to 4.5.0. - [Release notes](https://github.com/lodash/lodash/releases) - [Commits](https://github.com/lodash/lodash/compare/4.4.0...4.5.0) Signed-off-by: dependabot[bot] <support@github.com> * Bump eslint-utils from 1.3.1 to 1.4.2 (#886) Bumps [eslint-utils](https://github.com/mysticatea/eslint-utils) from 1.3.1 to 1.4.2. - [Release notes](https://github.com/mysticatea/eslint-utils/releases) - [Commits](https://github.com/mysticatea/eslint-utils/compare/v1.3.1...v1.4.2) Signed-off-by: dependabot[bot] <support@github.com> * Bump mixin-deep from 1.3.1 to 1.3.2 (#887) Bumps [mixin-deep](https://github.com/jonschlinkert/mixin-deep) from 1.3.1 to 1.3.2. - [Release notes](https://github.com/jonschlinkert/mixin-deep/releases) - [Commits](https://github.com/jonschlinkert/mixin-deep/compare/1.3.1...1.3.2) Signed-off-by: dependabot[bot] <support@github.com> * update bundle and readme * Update README.md * upd codeowners, fix funding * Minor Docs Fix according to main Readme (#916) * Inline Toolbar now contains Conversion Toolbar (#932) * Block lifecycle hooks (#906) * [Fix] Arrow selection (#964) * Fix arrow selection * Add docs * [issue-926]: fix dom iterator leafing when items are empty (#958) * [issue-926]: fix dom iterator leafing when items are empty * update Changelog * Issue 869 (#963) * Fix issue 943 (#965) * [Draft] Feature/tooltip enhancements (#907) * initial * update * make module standalone * use tooltips as external module * update * build via prod mode * add tooltips as external module * add declaration file and options param * add api tooltip * update * removed submodule * removed due to the incorrect setip * setup tooltips again * wip * update tooltip module * toolbox, inline toolbar * Tooltips in block tunes not uses shorthand * shorthand in a plus and block settings * fix doc * Update tools-inline.md * Delete tooltip.css * Update CHANGELOG.md * Update codex.tooltips * Update api.md * [issue-779]: Grammarly conflicts (#956) * grammarly conflicts * update * upd bundle * Submodule Header now on master * Submodule Marker now on master * Submodule Paragraph now on master * Submodule InlineCode now on master * Submodule Simple Image now on master * [issue-868]: Deleting multiple blocks triggers back button in Firefox (#967) * Deleting multiple blocks triggers back button in Firefox @evgenusov * Update editor.js * Update CHANGELOG.md * pass options on removeEventListener (#904) * pass options on removeEventListener by removeAll * rebuild * Merge branch 'release/2.16' into pr/904 * Update CHANGELOG.md * Update inline.ts * [Fix] Selection rangecount (#968) * Fix #952 (#969) * Update codex.tooltips * Selection bugfix (#970) * Selection bugfix * fix cross block selection * close inline toolbar when blocks selected via shift * remove inline toolbar closing on cross block selection mouse up due to the bug (#972) * [Feature] Log levels (#971) * Decrease margins (#973) * Decrease margins * Update editor.licenses.txt * Update src/components/domIterator.ts Co-Authored-By: Murod Khaydarov <murod.haydarov@gmail.com> * [Fix] Fix delete blocks api method (#974) * Update docs/usage.md Co-Authored-By: Murod Khaydarov <murod.haydarov@gmail.com> * rm unused * Update yarn.lock file * upd bundle, changelog
151 lines
3.5 KiB
Markdown
151 lines
3.5 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 next methods.
|
|
|
|
- `render()` — create a button
|
|
- `surround()` — works with selected range
|
|
- `checkState()` — get Tool's activated state by selected range
|
|
|
|
Also, you can provide optional methods
|
|
|
|
- `renderActions()` — create additional element below the buttons
|
|
- `clear()` — clear Tool's stuff on opening/closing of Inline Toolbar
|
|
- `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 button to append at the Inline Toolbar
|
|
|
|
#### Parameters
|
|
|
|
Method does not accept any parameters
|
|
|
|
#### Return value
|
|
|
|
type | description |
|
|
-- | -- |
|
|
`HTMLElement` | element that will be added to the Inline Toolbar |
|
|
|
|
---
|
|
|
|
### surround(range: Range)
|
|
|
|
Method that accepts selected range and wrap it somehow
|
|
|
|
#### Parameters
|
|
|
|
name | type | description |
|
|
-- |-- | -- |
|
|
range | Range | first range of current Selection |
|
|
|
|
#### Return value
|
|
|
|
There is no return value
|
|
|
|
---
|
|
|
|
### checkState(selection: Selection)
|
|
|
|
Get Selection and detect if Tool was applied. For example, after that Tool can highlight button or show some details.
|
|
|
|
#### Parameters
|
|
|
|
name | type | description |
|
|
-- |-- | -- |
|
|
selection | Selection | current Selection |
|
|
|
|
#### Return value
|
|
|
|
type | description |
|
|
-- | -- |
|
|
`Boolean` | `true` if Tool is active, otherwise `false` |
|
|
|
|
---
|
|
|
|
### renderActions()
|
|
|
|
Optional method that returns additional Element with actions.
|
|
For example, input for the 'link' tool or textarea for the 'comment' tool.
|
|
It will be places below the buttons list at Inline Toolbar.
|
|
|
|
#### Parameters
|
|
|
|
Method does not accept any parameters
|
|
|
|
#### Return value
|
|
|
|
type | description |
|
|
-- | -- |
|
|
`HTMLElement` | element that will be added to the Inline Toolbar |
|
|
|
|
---
|
|
|
|
### clear()
|
|
|
|
Optional method that will be called on opening/closing of Inline Toolbar.
|
|
Can contain logic for clearing Tool's stuff, such as inputs, states and other.
|
|
|
|
#### Parameters
|
|
|
|
Method does not accept any parameters
|
|
|
|
#### Return value
|
|
|
|
Method should not return a value.
|
|
|
|
### 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 wrapps 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.
|
|
|
|
![](https://capella.pics/00e7094a-fdb9-429b-8015-9c56f19b4ef5.jpg)
|
|
|
|
```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
|
|
}
|
|
```
|