Skip to content

Commit 13dc0c9

Browse files
gohabereggohabereg
authored
[Release] Version 2.15 (codex-team#826)
1 parent 23a4b2e commit 13dc0c9

54 files changed

Lines changed: 1672 additions & 1260 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -157,7 +157,7 @@ Copy [editor.js](build/editor.js) file to your project and load it.
157157

158158
## Load Tools
159159

160-
Each Block at the Editor.js represented by [Tools](docs/tools.md). There are simple external scripts with own logic. Probably you want to use several Block Tools that should be connected.
160+
Each Block at the Editor.js is represented by [Tools](docs/tools.md). There are simple external scripts with their own logic. Probably you want to use several Block Tools that should be connected.
161161

162162
For example check out our [Header](https://github.com/editor-js/header) Tool that represents heading blocks.
163163

‎dist/editor.js‎

Lines changed: 5 additions & 5 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/sprite.svg‎

Lines changed: 4 additions & 8 deletions
Loading

‎docs/CHANGELOG.md‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,19 @@
11
# Changelog
22

3+
### 2.15
4+
5+
- `New` — New [`blocks.insert()`](api.md) API method [#715](https://github.com/codex-team/editor.js/issues/715).
6+
- `New` *Conversion Toolbar* — Ability to convert one block to another [#704](https://github.com/codex-team/editor.js/issues/704)
7+
- `New` *Cross-block selection* — Ability to select multiple blocks by mouse and with SHIFT+ARROWS [#703](https://github.com/codex-team/editor.js/issues/703)
8+
- `Deprecated` — [`blocks.insertNewBlock()`](api.md) method is deprecated. Use `blocks.insert()` instead.
9+
- `Improvements` — Inline Toolbar now works on mobile devices [#706](https://github.com/codex-team/editor.js/issues/706)
10+
- `Improvements` — Toolbar looks better on mobile devices [#706](https://github.com/codex-team/editor.js/issues/706)
11+
- `Improvements` — Now `pasteConfig` can return `false` to disable paste handling on your Tool [#801](https://github.com/codex-team/editor.js/issues/801)
12+
- `Fix` — EditorConfig's `onChange` callback now fires when native inputs\` content has been changed [#794](https://github.com/codex-team/editor.js/issues/794)
13+
- `Fix` — Resolve bug with deleting leading new lines [#726](https://github.com/codex-team/editor.js/issues/726)
14+
- `Fix` — Fix inline link Tool to support different link types like `mailto` and `tel` [#809](https://github.com/codex-team/editor.js/issues/809)
15+
- `Fix` — Added `typeof` util method to check exact object type [#805](https://github.com/codex-team/editor.js/issues/805)
16+
- `Fix` — Remove internal `enableLineBreaks` option from external Tool settings type description [#825](https://github.com/codex-team/editor.js/pull/825)
317

418
### 2.14
519

‎docs/api.md‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,9 @@ Methods that working with Blocks
3838

3939
`stretchBlock(index: number, status: boolean)` - make Block stretched
4040

41-
`insertNewBlock()` - insert new Block after working place
41+
`insertNewBlock()` - __Deprecated__ insert new Block after working place
42+
43+
`insert(type?: string, data?: BlockToolData, config?: ToolConfig, index?: number, needToFocus?: boolean)` - insert new Block with passed parameters
4244

4345
#### SanitizerAPI
4446

‎docs/tools.md‎

Lines changed: 121 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -58,6 +58,8 @@ Options that Tool can specify. All settings should be passed as static propertie
5858
| `toolbox` | _Object_ | `undefined` | Pass here `icon` and `title` to display this `Tool` in the Editor's `Toolbox` <br /> `icon` - HTML string with icon for Toolbox <br /> `title` - optional title to display in Toolbox |
5959
| `enableLineBreaks` | _Boolean_ | `false` | With this option, Editor.js won't handle Enter keydowns. Can be helpful for Tools like `<code>` where line breaks should be handled by default behaviour. |
6060
| `isInline` | _Boolean_ | `false` | Describes Tool as a [Tool for the Inline Toolbar](tools-inline.md) |
61+
| `sanitize` | _Object_ | `undefined` | Config for automatic sanitizing of saved data. See [Sanitize](#sanitize) section. |
62+
| `conversionConfig` | _Object_ | `undefined` | Config allows Tool to specify how it can be converted into/from another Tool. See [Conversion config](#conversion-config) section. |
6163

6264
## User configuration
6365

@@ -224,7 +226,18 @@ onPaste (event) {
224226
}
225227
```
226228

227-
## Sanitize
229+
### Disable paste handling
230+
231+
If you need to disable paste handling on your Tool for some reason, you can provide `false` as `pasteConfig` value.
232+
That way paste event won't be processed if fired on your Tool:
233+
234+
```javascript
235+
static get pasteConfig {
236+
return false;
237+
}
238+
```
239+
240+
## Sanitize <a name="sanitize"></a>
228241

229242
Editor.js provides [API](sanitizer.md) to clean taint strings.
230243
Use it manually at the `save()` method or or pass `sanitizer` config to do it automatically.
@@ -341,4 +354,111 @@ static get sanitize() {
341354
}
342355
```
343356

357+
## Conversion config <a name="conversion-config"></a>
358+
359+
Editor.js has a Conversion Toolbar that allows user to convert one Block to another.
360+
361+
![](https://capella.pics/6c1f708b-a30c-4ffd-a427-5b59a1a472e0.jpg)
362+
363+
1. You can add ability to your Tool to be converted. Specify «export» property of `conversionConfig`.
364+
2. You can add ability to convert other Tools to your Tool. Specify «import» property of `conversionConfig`.
365+
366+
Conversion Toolbar will be shown only near Blocks that specified an «export» rule, when user selected almost all block's content.
367+
This Toolbar will contain only Tools that specified an «import» rule.
368+
369+
Example:
370+
371+
```js
372+
class Header {
373+
constructor(){
374+
this.data = {
375+
text: '',
376+
level: 2
377+
}
378+
}
379+
380+
/**
381+
* Rules specified how our Tool can be converted to/from other Tool.
382+
*/
383+
static get conversionConfig() {
384+
return {
385+
export: 'text', // this property of tool data will be used as string to pass to other tool
386+
import: 'text' // to this property imported string will be passed
387+
};
388+
}
389+
}
390+
```
391+
392+
### Your Tool -> other Tool
393+
394+
The «export» field specifies how to represent your Tool's data as a string to pass it to other tool.
395+
396+
It can be a `String` or a `Function`.
397+
398+
`String` means a key of your Tool data object that should be used as string to export.
399+
400+
`Function` is a method that accepts your Tool data and compose a string to export from it. See example below:
401+
402+
```js
403+
class ListTool {
404+
constructor(){
405+
this.data = {
406+
items: [
407+
'Fisrt item',
408+
'Second item',
409+
'Third item'
410+
],
411+
type: 'ordered'
412+
}
413+
}
414+
415+
static get conversionConfig() {
416+
return {
417+
export: (data) => {
418+
return data.items.join('.'); // in this example, all list items will be concatenated to an export string
419+
},
420+
// ... import rule
421+
};
422+
}
423+
}
424+
```
425+
426+
### Other Tool -> your Tool
427+
428+
The «import» rule specifies how to create your Tool's data object from the string created by original block.
344429

430+
It can be a `String` or a `Function`.
431+
432+
`String` means the key in tool data that will be filled by an exported string.
433+
For example, `import: 'text'` means that `constructor` of your block will accept a `data` object with `text` property filled with string composed by original block.
434+
435+
`Function` allows you to specify own logic, how a string should be converted to your tool data. For example:
436+
437+
```js
438+
class ListTool {
439+
constructor(data){
440+
this.data = data || {
441+
items: [],
442+
type: 'unordered'
443+
}
444+
}
445+
446+
static get conversionConfig() {
447+
return {
448+
// ... export rule
449+
450+
/**
451+
* In this example, List Tool creates items by splitting original text by a dot symbol.
452+
*/
453+
import: (string) => {
454+
const items = string.split('.');
455+
456+
return {
457+
items: items.filter( (text) => text.trim() !== ''),
458+
type: 'unordered'
459+
};
460+
}
461+
};
462+
}
463+
}
464+
```

‎example/tools/header‎

‎example/tools/list‎

Submodule list updated from 019fe76 to f537cf6

‎example/tools/marker‎

‎example/tools/quote‎

0 commit comments

Comments
 (0)