mirror of
https://github.com/codex-team/editor.js
synced 2024-06-29 02:40:23 +02:00
makeSettings -> renderSettings (#315)
This commit is contained in:
parent
f2ef201a52
commit
835e698e23
|
@ -5936,8 +5936,8 @@ var BlockSettings = function (_Module) {
|
|||
}, {
|
||||
key: 'addToolSettings',
|
||||
value: function addToolSettings() {
|
||||
if (typeof this.Editor.BlockManager.currentBlock.tool.makeSettings === 'function') {
|
||||
$.append(this.nodes.toolSettings, this.Editor.BlockManager.currentBlock.tool.makeSettings());
|
||||
if (typeof this.Editor.BlockManager.currentBlock.tool.renderSettings === 'function') {
|
||||
$.append(this.nodes.toolSettings, this.Editor.BlockManager.currentBlock.tool.renderSettings());
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -7501,11 +7501,18 @@ var UI = function (_Module) {
|
|||
case _.keyCodes.ENTER:
|
||||
this.enterPressed(event);
|
||||
break;
|
||||
|
||||
default:
|
||||
this.defaultBehaviour(event);
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Ignore all other document's keydown events
|
||||
* @param {KeyboardEvent} event
|
||||
*/
|
||||
|
||||
}, {
|
||||
key: 'defaultBehaviour',
|
||||
value: function defaultBehaviour(event) {
|
||||
|
@ -7516,7 +7523,14 @@ var UI = function (_Module) {
|
|||
* clear pointer and close toolbar
|
||||
*/
|
||||
if (!keyDownOnEditor) {
|
||||
/**
|
||||
* Remove all highlights and remove caret
|
||||
*/
|
||||
this.Editor.BlockManager.dropPointer();
|
||||
|
||||
/**
|
||||
* Close Toolbar
|
||||
*/
|
||||
this.Editor.Toolbar.close();
|
||||
}
|
||||
}
|
||||
|
|
File diff suppressed because one or more lines are too long
|
@ -10,52 +10,52 @@ regardless to the plugin's option.
|
|||
|
||||
### Let's look the examples:
|
||||
|
||||
«Plugin»'s Developers need to expand «makeSettings» method that returns HTML.
|
||||
«Plugin»'s Developers need to expand «renderSettings» method that returns HTML.
|
||||
Every user action will be handled by itself. So, you can easily write
|
||||
callbacks that switches your content or makes better. For more information
|
||||
read [Tools](tools.md).
|
||||
|
||||
---
|
||||
|
||||
|
||||
«Tune»'s Developers need to implement core-provided interface to develop
|
||||
tunes that will be appeared in Toolbar default settings zone.
|
||||
|
||||
Tunes must expand two important methods:
|
||||
- `render()` - returns HTML and it is appended to the default settings zone
|
||||
- `save()` - extracts important information to be saved
|
||||
|
||||
|
||||
No restrictions. Handle user action by yourself
|
||||
|
||||
Create Class that implements block-tune.ts
|
||||
|
||||
Your Tune's constructor gets argument as object and it includes:
|
||||
- {Object} api - object contains public methods from modules. @see [API](api.md)
|
||||
- {Object} settings - settings contains block default state.
|
||||
Your Tune's constructor gets argument as object and it includes:
|
||||
- {Object} api - object contains public methods from modules. @see [API](api.md)
|
||||
- {Object} settings - settings contains block default state.
|
||||
This object could have information about cover, anchor and so on.
|
||||
|
||||
Example on TypeScript:
|
||||
Example on TypeScript:
|
||||
|
||||
```js
|
||||
|
||||
import IBlockTune from './block-tune';
|
||||
|
||||
export default class YourCustomTune implements IBlockTune {
|
||||
|
||||
|
||||
public constructor({api, settings}) {
|
||||
this.api = api;
|
||||
this.settings = settings;
|
||||
}
|
||||
|
||||
|
||||
render() {
|
||||
let someHTML = '...';
|
||||
let someHTML = '...';
|
||||
return someHTML;
|
||||
}
|
||||
|
||||
|
||||
save() {
|
||||
// Return the important data that needs to be saved
|
||||
return object
|
||||
}
|
||||
|
||||
|
||||
someMethod() {
|
||||
// moves current block down
|
||||
this.api.blocks.moveDown();
|
||||
|
@ -67,22 +67,22 @@ Example on ES6
|
|||
|
||||
```js
|
||||
export default class YourCustomTune {
|
||||
|
||||
|
||||
constructor({api, settings}) {
|
||||
this.api = api;
|
||||
this.settings = settings;
|
||||
}
|
||||
|
||||
|
||||
render() {
|
||||
let someHTML = '...';
|
||||
let someHTML = '...';
|
||||
return someHTML;
|
||||
}
|
||||
|
||||
|
||||
save() {
|
||||
// Return the important data that needs to be saved
|
||||
return object
|
||||
}
|
||||
|
||||
|
||||
someMethod() {
|
||||
// moves current block down
|
||||
this.api.blocks.moveDown();
|
||||
|
|
|
@ -96,7 +96,7 @@ class Header {
|
|||
*
|
||||
* @return {HTMLElement}
|
||||
*/
|
||||
makeSettings() {
|
||||
renderSettings() {
|
||||
let holder = document.createElement('DIV');
|
||||
|
||||
/** Add type selectors */
|
||||
|
|
|
@ -22,7 +22,7 @@ export interface IBlockTool {
|
|||
* Create Block's settings block
|
||||
* @return {HTMLElement}
|
||||
*/
|
||||
makeSettings(): HTMLElement;
|
||||
renderSettings(): HTMLElement;
|
||||
|
||||
/**
|
||||
* Return Tool's main block-wrapper
|
||||
|
|
|
@ -95,7 +95,7 @@ export default class BlocksAPI extends Module implements IBlocksAPI {
|
|||
if (this.Editor.BlockManager.currentBlockIndex === 0) {
|
||||
this.Editor.Caret.setToBlock(this.Editor.BlockManager.currentBlock);
|
||||
} else {
|
||||
this.Editor.Caret.navigatePrevious(true)
|
||||
this.Editor.Caret.navigatePrevious(true);
|
||||
}
|
||||
|
||||
this.Editor.Toolbar.close();
|
||||
|
|
|
@ -70,8 +70,8 @@ export default class BlockSettings extends Module {
|
|||
* Add Tool's settings
|
||||
*/
|
||||
addToolSettings() {
|
||||
if (typeof this.Editor.BlockManager.currentBlock.tool.makeSettings === 'function') {
|
||||
$.append(this.nodes.toolSettings, this.Editor.BlockManager.currentBlock.tool.makeSettings());
|
||||
if (typeof this.Editor.BlockManager.currentBlock.tool.renderSettings === 'function') {
|
||||
$.append(this.nodes.toolSettings, this.Editor.BlockManager.currentBlock.tool.renderSettings());
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -20,14 +20,14 @@ module.exports = (function (settings) {
|
|||
* Append settings content
|
||||
* It's stored in tool.settings
|
||||
*/
|
||||
if ( !editor.tools[toolType] || !editor.tools[toolType].makeSettings ) {
|
||||
if ( !editor.tools[toolType] || !editor.tools[toolType].renderSettings ) {
|
||||
return;
|
||||
}
|
||||
|
||||
/**
|
||||
* Draw settings block
|
||||
*/
|
||||
var settingsBlock = editor.tools[toolType].makeSettings();
|
||||
var settingsBlock = editor.tools[toolType].renderSettings();
|
||||
|
||||
editor.nodes.pluginSettings.appendChild(settingsBlock);
|
||||
|
||||
|
|
|
@ -38,7 +38,7 @@ module.exports = (function (toolbar) {
|
|||
|
||||
let toolType = editor.content.currentNode.dataset.tool;
|
||||
|
||||
if (!editor.tools[toolType] || !editor.tools[toolType].makeSettings ) {
|
||||
if (!editor.tools[toolType] || !editor.tools[toolType].renderSettings ) {
|
||||
editor.nodes.showSettingsButton.classList.add('hide');
|
||||
} else {
|
||||
editor.nodes.showSettingsButton.classList.remove('hide');
|
||||
|
|
|
@ -170,12 +170,17 @@ export default class UI extends Module {
|
|||
case _.keyCodes.ENTER:
|
||||
this.enterPressed(event);
|
||||
break;
|
||||
|
||||
default:
|
||||
this.defaultBehaviour(event);
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Ignore all other document's keydown events
|
||||
* @param {KeyboardEvent} event
|
||||
*/
|
||||
defaultBehaviour(event) {
|
||||
const keyDownOnEditor = event.target.closest(`.${this.CSS.editorWrapper}`);
|
||||
|
||||
|
@ -184,7 +189,14 @@ export default class UI extends Module {
|
|||
* clear pointer and close toolbar
|
||||
*/
|
||||
if (!keyDownOnEditor) {
|
||||
/**
|
||||
* Remove all highlights and remove caret
|
||||
*/
|
||||
this.Editor.BlockManager.dropPointer();
|
||||
|
||||
/**
|
||||
* Close Toolbar
|
||||
*/
|
||||
this.Editor.Toolbar.close();
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue