Override toolbox settings from editor config

build/codex-editor.js

@@ -1409,7 +1409,7 @@ e.exports=function(){var e=t(6),o=null;return{show:function(t){if(t.message){!fu
 /*!***************************************************!*\
   !*** ./src/components/modules/toolbar/toolbox.ts ***!
   \***************************************************/
-/*! no static exports found */function(e,o,t){var n,s,r;s=[o,t(/*! @babel/runtime/helpers/classCallCheck */"./node_modules/@babel/runtime/helpers/classCallCheck.js"),t(/*! @babel/runtime/helpers/createClass */"./node_modules/@babel/runtime/helpers/createClass.js"),t(/*! @babel/runtime/helpers/possibleConstructorReturn */"./node_modules/@babel/runtime/helpers/possibleConstructorReturn.js"),t(/*! @babel/runtime/helpers/getPrototypeOf */"./node_modules/@babel/runtime/helpers/getPrototypeOf.js"),t(/*! @babel/runtime/helpers/inherits */"./node_modules/@babel/runtime/helpers/inherits.js"),t(/*! ../../__module */"./src/components/__module.ts"),t(/*! ../../dom */"./src/components/dom.ts"),t(/*! ../../utils */"./src/components/utils.ts")],void 0===(r="function"==typeof(n=function(n,s,r,i,l,u,d,a,c){"use strict";var f=t(/*! @babel/runtime/helpers/interopRequireDefault */"./node_modules/@babel/runtime/helpers/interopRequireDefault.js");Object.defineProperty(n,"__esModule",{value:!0}),n.default=void 0,s=f(s),r=f(r),i=f(i),l=f(l),u=f(u),d=f(d),a=f(a),c=f(c);var m=function(e){function o(){var e;return(0,s.default)(this,o),(e=(0,i.default)(this,(0,l.default)(o).apply(this,arguments))).opened=!1,e.nodes={toolbox:null,buttons:[]},e.activeButtonIndex=-1,e.displayedToolsCount=0,e}return(0,u.default)(o,e),(0,r.default)(o,[{key:"make",value:function(){this.nodes.toolbox=a.default.make("div",o.CSS.toolbox),a.default.append(this.Editor.Toolbar.nodes.content,this.nodes.toolbox),this.addTools()}},{key:"toolButtonActivate",value:function(e,o){var t=this.Editor.Tools.toolsClasses[o];this.insertNewBlock(t,o)}},{key:"open",value:function(){this.isEmpty||(this.nodes.toolbox.classList.add(o.CSS.toolboxOpened),this.opened=!0)}},{key:"close",value:function(){this.nodes.toolbox.classList.remove(o.CSS.toolboxOpened),this.opened=!1,this.activeButtonIndex=-1;var e=this.nodes.toolbox.querySelector(".".concat(o.CSS.toolboxButtonActive));e&&e.classList.remove(o.CSS.toolboxButtonActive)}},{key:"toggle",value:function(){this.opened?this.close():this.open()}},{key:"leaf",value:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:o.LEAF_DIRECTIONS.RIGHT,t=this.nodes.toolbox.childNodes;-1===this.activeButtonIndex?this.activeButtonIndex=e===o.LEAF_DIRECTIONS.RIGHT?-1:0:t[this.activeButtonIndex].classList.remove(o.CSS.toolboxButtonActive),e===o.LEAF_DIRECTIONS.RIGHT?this.activeButtonIndex=(this.activeButtonIndex+1)%t.length:this.activeButtonIndex=(t.length+this.activeButtonIndex-1)%t.length,t[this.activeButtonIndex].classList.add(o.CSS.toolboxButtonActive)}},{key:"addTools",value:function(){var e=this.Editor.Tools.available;for(var o in e)e.hasOwnProperty(o)&&this.addTool(o,e[o])}},{key:"addTool",value:function(e,t){var n=this,s=this.Editor.Tools.apiSettings,r=t[s.TOOLBOX];if(!r||r.icon){if(!c.default.isEmpty(r)){var i=a.default.make("li",[o.CSS.toolboxButton],{title:r.title||e});i.dataset.tool=e,i.innerHTML=r.icon,a.default.append(this.nodes.toolbox,i),this.nodes.toolbox.appendChild(i),this.nodes.buttons.push(i),this.Editor.Listeners.on(i,"click",function(o){n.toolButtonActivate(o,e)});var l=this.Editor.Tools.getToolSettings(e);l&&l[this.Editor.Tools.apiSettings.SHORTCUT]&&this.enableShortcut(t,e,l[this.Editor.Tools.apiSettings.SHORTCUT]),this.displayedToolsCount++}}else c.default.log("Toolbar icon is missed. Tool %o skipped","warn",e)}},{key:"enableShortcut",value:function(e,o,t){var n=this;this.Editor.Shortcuts.add({name:t,handler:function(t){t.preventDefault(),n.insertNewBlock(e,o)}})}},{key:"insertNewBlock",value:function(e,o){var t,n=this.Editor.BlockManager.currentBlock;(t=n.isEmpty?this.Editor.BlockManager.replace(o):this.Editor.BlockManager.insert(o)).call("appendCallback",{}),this.Editor.Caret.setToBlock(t),this.Editor.Toolbar.close()}},{key:"getActiveTool",get:function(){var e=this.nodes.toolbox.childNodes;return-1===this.activeButtonIndex?null:e[this.activeButtonIndex].dataset.tool}},{key:"isEmpty",get:function(){return 0===this.displayedToolsCount}}],[{key:"CSS",get:function(){return{toolbox:"ce-toolbox",toolboxButton:"ce-toolbox__button",toolboxButtonActive:"ce-toolbox__button--active",toolboxOpened:"ce-toolbox--opened"}}}]),o}(d.default);n.default=m,m.displayName="Toolbox",m.LEAF_DIRECTIONS={RIGHT:"right",LEFT:"left"},e.exports=o.default})?n.apply(o,s):n)||(e.exports=r)},"./src/components/modules/tools.ts":
+/*! no static exports found */function(e,o,t){var n,s,r;s=[o,t(/*! @babel/runtime/helpers/classCallCheck */"./node_modules/@babel/runtime/helpers/classCallCheck.js"),t(/*! @babel/runtime/helpers/createClass */"./node_modules/@babel/runtime/helpers/createClass.js"),t(/*! @babel/runtime/helpers/possibleConstructorReturn */"./node_modules/@babel/runtime/helpers/possibleConstructorReturn.js"),t(/*! @babel/runtime/helpers/getPrototypeOf */"./node_modules/@babel/runtime/helpers/getPrototypeOf.js"),t(/*! @babel/runtime/helpers/inherits */"./node_modules/@babel/runtime/helpers/inherits.js"),t(/*! ../../__module */"./src/components/__module.ts"),t(/*! ../../dom */"./src/components/dom.ts"),t(/*! ../../utils */"./src/components/utils.ts")],void 0===(r="function"==typeof(n=function(n,s,r,i,l,u,d,a,c){"use strict";var f=t(/*! @babel/runtime/helpers/interopRequireDefault */"./node_modules/@babel/runtime/helpers/interopRequireDefault.js");Object.defineProperty(n,"__esModule",{value:!0}),n.default=void 0,s=f(s),r=f(r),i=f(i),l=f(l),u=f(u),d=f(d),a=f(a),c=f(c);var m=function(e){function o(){var e;return(0,s.default)(this,o),(e=(0,i.default)(this,(0,l.default)(o).apply(this,arguments))).opened=!1,e.nodes={toolbox:null,buttons:[]},e.activeButtonIndex=-1,e.displayedToolsCount=0,e}return(0,u.default)(o,e),(0,r.default)(o,[{key:"make",value:function(){this.nodes.toolbox=a.default.make("div",o.CSS.toolbox),a.default.append(this.Editor.Toolbar.nodes.content,this.nodes.toolbox),this.addTools()}},{key:"toolButtonActivate",value:function(e,o){var t=this.Editor.Tools.toolsClasses[o];this.insertNewBlock(t,o)}},{key:"open",value:function(){this.isEmpty||(this.nodes.toolbox.classList.add(o.CSS.toolboxOpened),this.opened=!0)}},{key:"close",value:function(){this.nodes.toolbox.classList.remove(o.CSS.toolboxOpened),this.opened=!1,this.activeButtonIndex=-1;var e=this.nodes.toolbox.querySelector(".".concat(o.CSS.toolboxButtonActive));e&&e.classList.remove(o.CSS.toolboxButtonActive)}},{key:"toggle",value:function(){this.opened?this.close():this.open()}},{key:"leaf",value:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:o.LEAF_DIRECTIONS.RIGHT,t=this.nodes.toolbox.childNodes;-1===this.activeButtonIndex?this.activeButtonIndex=e===o.LEAF_DIRECTIONS.RIGHT?-1:0:t[this.activeButtonIndex].classList.remove(o.CSS.toolboxButtonActive),e===o.LEAF_DIRECTIONS.RIGHT?this.activeButtonIndex=(this.activeButtonIndex+1)%t.length:this.activeButtonIndex=(t.length+this.activeButtonIndex-1)%t.length,t[this.activeButtonIndex].classList.add(o.CSS.toolboxButtonActive)}},{key:"addTools",value:function(){var e=this.Editor.Tools.available;for(var o in e)e.hasOwnProperty(o)&&this.addTool(o,e[o])}},{key:"addTool",value:function(e,t){var n=this,s=this.Editor.Tools.apiSettings,r=t[s.TOOLBOX];if(!c.default.isEmpty(r))if(!r||r.icon){var i=this.Editor.Tools.getToolSettings(e),l=i.toolbox,u=void 0===l?{}:l,d=a.default.make("li",[o.CSS.toolboxButton],{title:u.title||r.title||e});d.dataset.tool=e,d.innerHTML=u.icon||r.icon,a.default.append(this.nodes.toolbox,d),this.nodes.toolbox.appendChild(d),this.nodes.buttons.push(d),this.Editor.Listeners.on(d,"click",function(o){n.toolButtonActivate(o,e)});var f=this.Editor.Tools.getToolSettings(e);f&&f[this.Editor.Tools.apiSettings.SHORTCUT]&&this.enableShortcut(t,e,f[this.Editor.Tools.apiSettings.SHORTCUT]),this.displayedToolsCount++}else c.default.log("Toolbar icon is missed. Tool %o skipped","warn",e)}},{key:"enableShortcut",value:function(e,o,t){var n=this;this.Editor.Shortcuts.add({name:t,handler:function(t){t.preventDefault(),n.insertNewBlock(e,o)}})}},{key:"insertNewBlock",value:function(e,o){var t,n=this.Editor.BlockManager.currentBlock;(t=n.isEmpty?this.Editor.BlockManager.replace(o):this.Editor.BlockManager.insert(o)).call("appendCallback",{}),this.Editor.Caret.setToBlock(t),this.Editor.Toolbar.close()}},{key:"getActiveTool",get:function(){var e=this.nodes.toolbox.childNodes;return-1===this.activeButtonIndex?null:e[this.activeButtonIndex].dataset.tool}},{key:"isEmpty",get:function(){return 0===this.displayedToolsCount}}],[{key:"CSS",get:function(){return{toolbox:"ce-toolbox",toolboxButton:"ce-toolbox__button",toolboxButtonActive:"ce-toolbox__button--active",toolboxOpened:"ce-toolbox--opened"}}}]),o}(d.default);n.default=m,m.displayName="Toolbox",m.LEAF_DIRECTIONS={RIGHT:"right",LEFT:"left"},e.exports=o.default})?n.apply(o,s):n)||(e.exports=r)},"./src/components/modules/tools.ts":
 /*!*****************************************!*\
   !*** ./src/components/modules/tools.ts ***!
   \*****************************************/

src/components/modules/toolbar/toolbox.ts

@@ -1,7 +1,7 @@
 import Module from '../../__module';
 import $ from '../../dom';
 import _ from '../../utils';
-import {BlockToolConstructable} from '../../../../types';
+import {BlockToolConstructable, ToolboxConfig} from '../../../../types';
 
 /**
  * @class Toolbox
@@ -231,6 +231,13 @@ export default class Toolbox extends Module {
 
     const toolToolboxSettings = tool[api.TOOLBOX];
 
+    /**
+     * Skip tools that don't pass 'toolbox' property
+     */
+    if (_.isEmpty(toolToolboxSettings)) {
+      return;
+    }
+
     if (toolToolboxSettings && !toolToolboxSettings.icon) {
       _.log('Toolbar icon is missed. Tool %o skipped', 'warn', toolName);
       return;
@@ -244,19 +251,14 @@ export default class Toolbox extends Module {
     //   return;
     // }
 
-    /**
-     * Skip tools that don't pass 'toolbox' property
-     */
-    if (_.isEmpty(toolToolboxSettings)) {
-      return;
-    }
+    const {toolbox: userToolboxSettings = {} as ToolboxConfig} = this.Editor.Tools.getToolSettings(toolName);
 
     const button = $.make('li', [ Toolbox.CSS.toolboxButton ], {
-      title: toolToolboxSettings.title || toolName,
+      title: userToolboxSettings.title || toolToolboxSettings.title || toolName,
     });
 
     button.dataset.tool = toolName;
-    button.innerHTML = toolToolboxSettings.icon;
+    button.innerHTML = userToolboxSettings.icon || toolToolboxSettings.icon;
 
     $.append(this.nodes.toolbox, button);
 

src/components/modules/tools.ts

@@ -330,7 +330,7 @@ export default class Tools extends Module {
    * @param {string} toolName
    * @return {ToolSettings}
    */
-  public getToolSettings(toolName) {
+  public getToolSettings(toolName): ToolSettings {
     return this.toolsSettings[toolName];
   }
 

types/index.d.ts

@@ -18,6 +18,7 @@ export {
   BlockToolConstructable,
   BlockTool,
   BlockToolData,
+  ToolboxConfig,
   ToolSettings,
   ToolConfig,
   PasteEvent,

types/tools/tool-settings.d.ts

@@ -1,6 +1,21 @@
 import {ToolConfig} from './tool-config';
 import {ToolConstructable} from './tool';
 
+/**
+ * Tool's Toolbox settings
+ */
+export interface ToolboxConfig {
+  /**
+   * Tool title for Toolbox
+   */
+  title?: string;
+
+  /**
+   * HTML string with an icon for Toolbox
+   */
+  icon?: string;
+}
+
 /**
  * Object passed to the Tool's constructor by {@link EditorConfig#tools}
  */
@@ -31,4 +46,9 @@ export interface ToolSettings {
    * Define shortcut that will render Tool
    */
   shortcut?: string;
+
+  /**
+   * Tool's Toolbox settings
+   */
+  toolbox?: ToolboxConfig;
 }