diff --git a/src/rich_text_editor/index.js b/src/rich_text_editor/index.js
index 934fa0569..3b01f368e 100644
--- a/src/rich_text_editor/index.js
+++ b/src/rich_text_editor/index.js
@@ -1,10 +1,4 @@
/**
- * * [add](#add)
- * * [get](#get)
- * * [getAll](#getall)
- * * [remove](#remove)
- * * [getToolbarEl](#gettoolbarel)
- *
* This module allows to customize the toolbar of the Rich Text Editor and use commands from the HTML Editing APIs.
* For more info about HTML Editing APIs check here:
* https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand
@@ -130,12 +124,28 @@ module.exports = () => {
* });
* rte.add('link', {
* icon: document.getElementById('t'),
- * // Bind the 'result' on 'onclick' listener
- * event: 'click',
* attributes: {title: 'Link',}
* // Example on it's easy to wrap a selected content
* result: rte => rte.insertHTML(`${rte.selection()}`)
* });
+ * // An example with fontSize
+ * rte.add('fontSize', {
+ * icon: ``,
+ * // Bind the 'result' on 'change' listener
+ * event: 'change',
+ * result: (rte, action) => rte.exec('fontSize', action.btn.firstChild.value),
+ * // Callback on any input change (mousedown, keydown, etc..)
+ * update: (rte, action) => {
+ * const value = rte.doc.queryCommandValue(action.name);
+ * if (value != 'false') { // value is a string
+ * action.btn.firstChild.value = value;
+ * }
+ * }
+ * })
*/
add(name, action = {}) {
action.name = name;
diff --git a/src/rich_text_editor/model/RichTextEditor.js b/src/rich_text_editor/model/RichTextEditor.js
index 565376b63..11631fcc5 100644
--- a/src/rich_text_editor/model/RichTextEditor.js
+++ b/src/rich_text_editor/model/RichTextEditor.js
@@ -102,12 +102,18 @@ export default class RichTextEditor {
updateActiveActions() {
this.getActions().forEach(action => {
const btn = action.btn;
+ const update = action.update;
const active = this.classes.active;
+ const name = action.name;
+ const doc = this.doc;
btn.className = btn.className.replace(active, '').trim();
- if (this.doc.queryCommandState(action.name)) {
+ // doc.queryCommandValue(name) != 'false'
+ if (doc.queryCommandState(name)) {
btn.className += ` ${active}`;
}
+
+ update && update(this, action);
})
}
@@ -141,7 +147,7 @@ export default class RichTextEditor {
this.getActions().forEach(action => {
const event = action.event || 'click';
action.btn[`on${event}`] = e => {
- action.result(this);
+ action.result(this, action);
this.updateActiveActions();
};
})