-
-
Notifications
You must be signed in to change notification settings - Fork 2.1k
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.
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
[Feature] BlockAPI Interface #1075
Changes from 6 commits
5569965
f172ca3
f126bcd
a6aa989
92506c7
f93383e
fa27828
390004c
0dcdb19
e3225ca
d3afd8f
7d4b4ac
7abed86
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Large diffs are not rendered by default.
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,9 +1,33 @@ | ||
# Editor.js API | ||
|
||
|
||
Blocks have access to the public methods provided by Editor.js API Module. Plugin and Tune Developers | ||
Tools have access to the public methods provided by Editor.js API Module. Plugin and Tune Developers | ||
can use Editor\`s API as they want. | ||
|
||
## Block API | ||
|
||
API for certain Block methods and properties. You can access it through `editor.api.block.getBlockByIndex` method or get it form `block` property of [Tool constructor](../types/tools/block-tool.d.ts) argument. | ||
|
||
`name: string` — Block's Tool name | ||
|
||
`config: ToolConfig` — Tool config passed on Editor initialization | ||
|
||
`holder: HTMLElement` — HTML Element that wraps Tool's HTML content | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. is this an element returned by tools render method? The description is not clear. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. |
||
|
||
`isEmpty: boolean` — `true` if Block has any editable content | ||
|
||
`selected: boolean` - `true` if Block is selected with Cross-Block Selection | ||
|
||
`set stretched(state: boolean)` — set Block's stretch state | ||
|
||
`stretched: boolean` — `true` if Block is stretched | ||
|
||
`call(methodName: string, param?: object): void` — method to call Tool's methods with checks and error handlers under-the-hood | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. what methods? |
||
|
||
`save(): Promise<void|SavedData>` — returns data saved from current Block's state, including Tool name and saving exec time | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
General I agree that we have some inconsistency here, but I think it's out of the scope of this feature. |
||
|
||
`validate(data: BlockToolData): Promise<boolean>` — calls Tool's validate method if exists | ||
|
||
## Api object description | ||
|
||
Common API interface. | ||
|
@@ -36,13 +60,13 @@ use 'move' instead) | |
|
||
`getCurrentBlockIndex()` - current Block index | ||
|
||
`getBlockByIndex(index: Number)` - returns Block with passed index | ||
`getBlockByIndex(index: Number)` - returns Block API object by passed index | ||
|
||
`getBlocksCount()` - returns Blocks count | ||
|
||
`stretchBlock(index: number, status: boolean)` - make Block stretched | ||
`stretchBlock(index: number, status: boolean)` - *Deprecated* make Block stretched | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. what to use instead? |
||
|
||
`insertNewBlock()` - __Deprecated__ insert new Block after working place | ||
`insertNewBlock()` - __Deprecated__ insert new Block after working place | ||
|
||
`insert(type?: string, data?: BlockToolData, config?: ToolConfig, index?: number, needToFocus?: boolean)` - insert new Block with passed parameters | ||
|
||
|
@@ -100,11 +124,11 @@ Each method accept `position` and `offset` parameters. `Offset` should be used t | |
|
||
`Position` can be one of the following values: | ||
|
||
| Value | Description | ||
| --------- | ----------- | ||
| Value | Description | ||
| --------- | ----------- | ||
| `start` | Caret will be set at the Block's beginning | ||
| `end` | Caret will be set at the Block end | ||
| `default` | More or less emulates browser behaviour, in most cases behaves as `start` | ||
| `default` | More or less emulates browser behaviour, in most cases behaves as `start` | ||
|
||
Each method returns `boolean` value: true if caret is set successfully or false otherwise (e.g. when there is no Block at index); | ||
|
||
|
@@ -148,7 +172,7 @@ this.api.notifier.show({ | |
![](https://capella.pics/14fcdbe4-d6eb-41d4-b66e-e0e86ccf1a4b.jpg) | ||
|
||
|
||
Check out [`codex-notifier` package page](https://github.com/codex-team/js-notifier) on GitHub to find docs, params and examples. | ||
Check out [`codex-notifier` package page](https://github.com/codex-team/js-notifier) on GitHub to find docs, params and examples. | ||
|
||
### Destroy API | ||
|
||
|
@@ -173,28 +197,28 @@ Methods for showing Tooltip helper near your elements. Parameters are the same a | |
#### Show | ||
|
||
Method shows tooltip with custom content on passed element | ||
|
||
```js | ||
this.api.tooltip.show(element, content, options); | ||
``` | ||
``` | ||
|
||
| parameter | type | description | | ||
| -- | -- | -- | | ||
| `element` | _HTMLElement_ | Tooltip will be showed near this element | | ||
| `content` | _String_ or _Node_ | Content that will be appended to the Tooltip | | ||
| `options` | _Object_ | Some displaying options, see below | | ||
|
||
Available showing options | ||
Available showing options | ||
|
||
| name | type | action | | ||
| -- | -- | -- | | ||
| placement | `top`, `bottom`, `left`, `right` | Where to place the tooltip. Default value is `bottom' | | ||
| marginTop | _Number_ | Offset above the tooltip with `top` placement | | ||
| marginBottom | _Number_ | Offset below the tooltip with `bottom` placement | | ||
| marginLeft | _Number_ | Offset at left from the tooltip with `left` placement | | ||
| marginRight | _Number_ | Offset at right from the tooltip with `right` placement | | ||
| delay | _Number_ | Delay before showing, in ms. Default is `70` | | ||
| hidingDelay | _Number_ | Delay before hiding, in ms. Default is `0` | | ||
| placement | `top`, `bottom`, `left`, `right` | Where to place the tooltip. Default value is `bottom' | | ||
| marginTop | _Number_ | Offset above the tooltip with `top` placement | | ||
| marginBottom | _Number_ | Offset below the tooltip with `bottom` placement | | ||
| marginLeft | _Number_ | Offset at left from the tooltip with `left` placement | | ||
| marginRight | _Number_ | Offset at right from the tooltip with `right` placement | | ||
| delay | _Number_ | Delay before showing, in ms. Default is `70` | | ||
| hidingDelay | _Number_ | Delay before hiding, in ms. Default is `0` | | ||
|
||
#### Hide | ||
|
||
|
@@ -206,15 +230,15 @@ this.api.tooltip.hide(); | |
|
||
#### onHover | ||
|
||
Decorator for showing tooltip near some element by "mouseenter" and hide by "mouseleave". | ||
Decorator for showing tooltip near some element by "mouseenter" and hide by "mouseleave". | ||
|
||
```js | ||
this.api.tooltip.onHover(element, content, options); | ||
``` | ||
|
||
### API Shorthands | ||
|
||
Editor`s API provides some shorthands for API methods. | ||
Editor`s API provides some shorthands for API methods. | ||
|
||
| Alias | Method | | ||
| ------ | --------------- | | ||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,114 @@ | ||
import Block from './index'; | ||
import { BlockToolData, ToolConfig } from '../../../types/tools'; | ||
import { SavedData } from '../../types-internal/block-data'; | ||
import { BlockAPI as BlockAPIInterface } from '../../../types/api'; | ||
|
||
/** | ||
* Constructs new BlockAPI object | ||
* | ||
* @class | ||
* | ||
* @param {Block} block - Block to expose | ||
*/ | ||
function BlockAPI(block: Block): void { | ||
neSpecc marked this conversation as resolved.
Show resolved
Hide resolved
|
||
const blockAPI: BlockAPIInterface = { | ||
/** | ||
* Tool name | ||
* | ||
* @returns {string} | ||
*/ | ||
get name(): string { | ||
return block.name; | ||
}, | ||
|
||
/** | ||
* Tool config passed on Editor's initialization | ||
* | ||
* @returns {ToolConfig} | ||
*/ | ||
get config(): ToolConfig { | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. There can be a misunderstanding with existed Tool config term. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. That's exactly the ToolConfig object |
||
return block.config; | ||
}, | ||
|
||
/** | ||
* .ce-block element, that wraps plugin contents | ||
* | ||
* @returns {HTMLElement} | ||
*/ | ||
get holder(): HTMLElement { | ||
return block.holder; | ||
}, | ||
|
||
/** | ||
* True if Block content is empty | ||
* | ||
* @returns {boolean} | ||
*/ | ||
get isEmpty(): boolean { | ||
return block.isEmpty; | ||
}, | ||
|
||
/** | ||
* True if Block is selected with Cross-Block selection | ||
* | ||
* @returns {boolean} | ||
*/ | ||
get selected(): boolean { | ||
return block.selected; | ||
}, | ||
|
||
/** | ||
* Set Block's stretch state | ||
* | ||
* @param {boolean} state — state to set | ||
*/ | ||
set stretched(state: boolean) { | ||
block.stretched = state; | ||
}, | ||
|
||
/** | ||
* True if Block is stretched | ||
* | ||
* @returns {boolean} | ||
*/ | ||
get stretched(): boolean { | ||
return block.stretched; | ||
}, | ||
|
||
/** | ||
* Call Tool method with errors handler under-the-hood | ||
* | ||
* @param {string} methodName - method to call | ||
* @param {object} param - object with parameters | ||
* | ||
* @returns {void} | ||
*/ | ||
call(methodName: string, param?: object): void { | ||
block.call(methodName, param); | ||
}, | ||
|
||
/** | ||
* Save Block content | ||
* | ||
* @returns {Promise<void|SavedData>} | ||
*/ | ||
save(): Promise<void|SavedData> { | ||
return block.save(); | ||
}, | ||
|
||
/** | ||
* Validate Block data | ||
* | ||
* @param {BlockToolData} data - data to validate | ||
* | ||
* @returns {Promise<boolean>} | ||
*/ | ||
validate(data: BlockToolData): Promise<boolean> { | ||
return block.validate(data); | ||
}, | ||
}; | ||
|
||
Object.setPrototypeOf(this, blockAPI); | ||
} | ||
|
||
export default BlockAPI; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
what is a tool name?