Issue 354 inline tools filter

example/assets/json-preview.js

@@ -31,7 +31,7 @@ const cPreview = (function (module) {
     /** Stylize JSON keys */
     string = string.replace( /"(\w+)"\s?:/g, '"<span class=sc_key>$1</span>" :');
     /** Stylize tool names */
-    string = string.replace( /"(text|quote|list|header|link|code|image)"/g, '"<span class=sc_toolname>$1</span>"');
+    string = string.replace( /"(text|quote|list|header|link|code|image|delimiter)"/g, '"<span class=sc_toolname>$1</span>"');
     /** Stylize HTML tags */
     string = string.replace( /(&lt;[\/a-z]+(&gt;)?)/gi, '<span class=sc_tag>$1</span>' );
     /** Stylize strings */

example/example.html

@@ -175,13 +175,19 @@
           {
             type : 'text',
             data : {
-              text : 'В отличие от WYSIWYG-редакторов, CodeX Editor возвращает не сгенерированный HTML-код, включающий и содержание и оформление статьи, а JSON с данными о каждом Блоке.'
+              text : 'В отличие от WYSIWYG-редакторов, CodeX Editor возвращает не сгенерированный HTML-код, включающий и содержание и оформление статьи, а JSON с данными о каждом Блоке. Пример таких данных находится внизу этой страницы.'
             }
           },
           {
             type : 'text',
             data : {
-              text : 'Полученные данные можно использовать как угодно: выводить в вебе, рендерить в нативных мобильных приложениях, передавать в Instant Articles или Google AMP, использовать для генерации аудио-версии и тд. Это очень удобно.'
+              text : 'Полученные данные можно использовать как угодно: выводить в вебе, рендерить в нативных мобильных приложениях, передавать в Instant Articles или Google AMP, использовать для генерации аудио-версии и тд.'
+            }
+          },
+          {
+            type : 'text',
+            data : {
+              text : 'Помимо этого, данные о Блоках удобно очищать, фильтровать и обрабатывать на бэкенде.'
             }
           },
           {

src/components/modules/toolbar-inline.ts

@@ -28,6 +28,8 @@ export default class InlineToolbar extends Module {
     inlineToolbarShowed: 'ce-inline-toolbar--showed',
     buttonsWrapper: 'ce-inline-toolbar__buttons',
     actionsWrapper: 'ce-inline-toolbar__actions',
+    inlineToolButton: 'ce-inline-tool',
+    inlineToolButtonLast: 'ce-inline-tool--last',
   };
 
   /**
@@ -155,7 +157,19 @@ export default class InlineToolbar extends Module {
    * Shows Inline Toolbar
    */
   private open() {
+    /**
+     * Filter inline-tools and show only allowed by Block's Tool
+     */
+    this.filterTools();
+
+    /**
+     * Show Inline Toolbar
+     */
     this.nodes.wrapper.classList.add(this.CSS.inlineToolbarShowed);
+
+    /**
+     * Call 'clear' method for Inline Tools (for example, 'link' want to clear input)
+     */
     this.tools.forEach( (toolInstance, toolName) => {
       if (typeof toolInstance.clear === 'function') {
         toolInstance.clear();
@@ -215,6 +229,50 @@ export default class InlineToolbar extends Module {
     return toolSettings && toolSettings[this.Editor.Tools.apiSettings.IS_ENABLED_INLINE_TOOLBAR];
   }
 
+  /**
+   * Show only allowed Tools
+   */
+  private filterTools(): void {
+    const currentSelection = Selection.get(),
+      currentBlock = this.Editor.BlockManager.getBlock(currentSelection.anchorNode);
+
+    const toolSettings = this.Editor.Tools.getToolSettings(currentBlock.name),
+      inlineToolbarSettings = toolSettings && toolSettings[this.Editor.Tools.apiSettings.IS_ENABLED_INLINE_TOOLBAR];
+
+    /**
+     * All Inline Toolbar buttons
+     * @type {HTMLElement[]}
+     */
+    const buttons = Array.from(this.nodes.buttons.querySelectorAll(`.${this.CSS.inlineToolButton}`)) as HTMLElement[];
+
+    /**
+     * Show previously hided
+     */
+    buttons.forEach((button) => {
+      button.hidden = false;
+      button.classList.remove(this.CSS.inlineToolButtonLast);
+    });
+
+    /**
+     * Filter buttons if Block Tool pass config like inlineToolbar=['link']
+     */
+    if (Array.isArray(inlineToolbarSettings)) {
+      buttons.forEach((button) => {
+        button.hidden = !inlineToolbarSettings.includes(button.dataset.tool);
+      });
+    }
+
+    /**
+     * Tick for removing right-margin from last visible button.
+     * Current generation of CSS does not allow to filter :visible elements
+     */
+    const lastVisibleButton = buttons.filter((button) => !button.hidden).pop();
+
+    if (lastVisibleButton) {
+      lastVisibleButton.classList.add(this.CSS.inlineToolButtonLast);
+    }
+  }
+
   /**
    *  Working with Tools
    *  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
@@ -240,6 +298,7 @@ export default class InlineToolbar extends Module {
       return;
     }
 
+    button.dataset.tool = toolName;
     this.nodes.buttons.appendChild(button);
 
     if (typeof tool.renderActions === 'function') {

src/styles/inline-toolbar.css

@@ -10,12 +10,20 @@
   &--showed {
     display: block;
   }
+
+  [hidden] {
+    display: none !important;
+  }
 }
 
 .ce-inline-tool {
   @apply --toolbar-button;
   line-height: normal;
 
+  &--last {
+    margin-right: 0 !important;
+  }
+
   &--link {
     .icon {
       margin-top: -2px;