Add common tunes and ToolsCollection class

example/example-dev.html

@@ -80,7 +80,8 @@
 
   <script src="./tools/marker/dist/bundle.js"></script><!-- Marker -->
   <script src="./tools/inline-code/dist/bundle.js"></script><!-- Inline Code -->
-  <script src="./tunes/favorite/index.js"></script><!-- Inline Code -->
+  <script src="./tunes/favorite/index.js"></script>
+  <script src="./tunes/anchor/index.js"></script>
 
   <!-- Load Editor.js's Core -->
   <script src="../dist/editor.js" onload="document.getElementById('hint-core').hidden = true;"></script>
@@ -115,6 +116,7 @@
        */
       tools: {
         favorite: FavoriteTune,
+        anchor: AnchorTune,
 
         /**
          * Each Tool is a Plugin. Pass them via 'class' option with necessary settings {@link docs/tools.md}
@@ -126,7 +128,7 @@
             placeholder: 'Header'
           },
           shortcut: 'CMD+SHIFT+H',
-          tunes: ['favorite']
+          tunes: ['favorite', 'anchor']
         },
 
         /**
@@ -187,6 +189,7 @@
         },
 
       },
+      tunes: ['favorite'],
 
       /**
        * This Tool will be used as default

example/tunes/anchor/index.js

@@ -0,0 +1,72 @@
+class AnchorTune {
+  static get isTune() {
+    return true
+  }
+
+  constructor({api, block, data = false}) {
+    this.anchor = data;
+    this.api = api;
+    this.indicator = this.makeIndicator()
+  }
+
+  render() {
+    this.button = document.createElement('div');
+
+    this.button.classList.add('ce-settings__button');
+
+    this.button.innerHTML = '🔗';
+
+    this.button.addEventListener('click', () => this.onClick());
+
+    return this.button;
+  }
+
+  onClick() {
+    const defaultAnchor = this.wrapper
+      .textContent
+      .replace(/[^a-zA-Z0-9]+/g, '-')
+      .substr(0, 50)
+      .toLowerCase();
+
+    this.anchor = prompt('Please enter an anchor for this block', defaultAnchor) || this.anchor;
+
+    if (!this.anchor) {
+      this.indicator.remove();
+
+      return;
+    }
+
+    this.indicator.innerHTML = `#${this.anchor}`;
+
+    this.wrapper.appendChild(this.indicator);
+  }
+
+  wrap(pluginsContent) {
+    this.wrapper = document.createElement('div');
+
+    this.wrapper.style.position = 'relative';
+
+    this.wrapper.appendChild(pluginsContent);
+
+    if (this.anchor) {
+      this.wrapper.appendChild(this.indicator);
+    }
+
+    return this.wrapper;
+  }
+
+  makeIndicator() {
+    const indicator = document.createElement('div')
+
+    indicator.style.position = 'absolute';
+    indicator.style.top = '40%';
+
+    indicator.innerHTML = `#${this.anchor}`;
+
+    return indicator;
+  }
+
+  save() {
+    return this.anchor;
+  }
+}

src/components/block-tunes/block-tune-delete.ts

@@ -11,7 +11,9 @@ import $ from '../dom';
  *
  */
 export default class DeleteTune implements BlockTune {
-
+  /**
+   * Set Tool is Tune
+   */
   public static readonly isTune = true;
 
   /**

src/components/block-tunes/block-tune-move-down.ts

@@ -12,7 +12,9 @@ import { API, BlockTune } from '../../../types';
  *
  */
 export default class MoveDownTune implements BlockTune {
-
+  /**
+   * Set Tool is Tune
+   */
   public static readonly isTune = true;
 
   /**

src/components/block-tunes/block-tune-move-up.ts

@@ -11,8 +11,9 @@ import { API, BlockTune } from '../../../types';
  *
  */
 export default class MoveUpTune implements BlockTune {
-
-
+  /**
+   * Set Tool is Tune
+   */
   public static readonly isTune = true;
 
   /**

src/components/block/index.ts

@@ -4,7 +4,6 @@ import {
   BlockToolConstructable,
   BlockToolData,
   BlockTune as IBlockTune,
-  BlockTuneConstructable,
   SanitizerConfig,
   ToolConfig,
   ToolSettings
@@ -15,16 +14,13 @@ import $ from '../dom';
 import * as _ from '../utils';
 import ApiModules from '../modules/api';
 import BlockAPI from './api';
-import { ToolType } from '../modules/tools';
 import SelectionUtils from '../selection';
 import BlockTool from '../tools/block';
 
 /** Import default tunes */
-import MoveUpTune from '../block-tunes/block-tune-move-up';
-import DeleteTune from '../block-tunes/block-tune-delete';
-import MoveDownTune from '../block-tunes/block-tune-move-down';
 import BlockTune from '../tools/tune';
-import {BlockTuneData} from "../../../types/block-tunes/block-tune-data";
+import { BlockTuneData } from '../../../types/block-tunes/block-tune-data';
+import ToolsCollection from '../tools/collection';
 
 /**
  * Interface describes Block class constructor argument
@@ -50,8 +46,14 @@ interface BlockConstructorOptions {
    */
   readOnly: boolean;
 
-  tunes: BlockTune[];
+  /**
+   * Tunes for current Block
+   */
+  tunes: ToolsCollection<BlockTune>;
 
+  /**
+   * Tunes data for current Block
+   */
   tunesData: {[name: string]: BlockTuneData};
 }
 
@@ -127,7 +129,7 @@ export default class Block {
   /**
    * Tunes used by Tool
    */
-  public readonly tunes: BlockTune[];
+  public readonly tunes: ToolsCollection<BlockTune>;
 
   /**
    * Tool's user configuration
@@ -147,6 +149,8 @@ export default class Block {
   private readonly toolInstance: IBlockTool;
 
   private readonly tunesInstances: Map<string, IBlockTune> = new Map();
+  private readonly defaultTunesInstances: Map<string, IBlockTune> = new Map();
+  private unavailableTunesData: {[name: string]: BlockTuneData} = {};
 
   /**
    * Editor`s API module
@@ -228,9 +232,7 @@ export default class Block {
      */
     this.tunes = tunes;
 
-    tunes.forEach((tune) => {
-      this.tunesInstances.set(tune.name, tune.instance(tunesData[tune.name], this.blockAPI))
-    });
+    this.composeTunes(tunesData);
 
     this.holder = this.compose();
   }
@@ -534,13 +536,15 @@ export default class Block {
    */
   public async save(): Promise<void|SavedData> {
     const extractedBlock = await this.toolInstance.save(this.pluginsContent as HTMLElement);
-    const tunesData: {[name: string]: BlockTuneData} = {}
+    const tunesData: {[name: string]: BlockTuneData} = this.unavailableTunesData;
 
-    Array
-      .from(this.tunesInstances.entries())
+    [
+      ...this.tunesInstances.entries(),
+      ...this.defaultTunesInstances.entries(),
+    ]
       .forEach(([name, tune]) => {
         if (_.isFunction(tune.save)) {
-          tunesData[name] = tune.save()
+          tunesData[name] = tune.save();
         }
       });
 
@@ -586,52 +590,23 @@ export default class Block {
     return isValid;
   }
 
-  /**
-   * Make an array with default settings
-   * Each block has default tune instance that have states
-   *
-   * @returns {BlockTune[]}
-   */
-  public makeTunes(): IBlockTune[] {
-    const tunesList = [
-      {
-        name: 'moveUp',
-        Tune: MoveUpTune,
-      },
-      {
-        name: 'delete',
-        Tune: DeleteTune,
-      },
-      {
-        name: 'moveDown',
-        Tune: MoveDownTune,
-      },
-    ];
-
-    // Pluck tunes list and return tune instances with passed Editor API and settings
-    return tunesList.map(({ name, Tune }: {name: string; Tune: BlockTuneConstructable}) => {
-      return new Tune({
-        api: this.api.getMethodsForTool(name, ToolType.Tune),
-        settings: this.config,
-        block: this.blockAPI,
-        data: {}
-      });
-    });
-  }
-
   /**
    * Enumerates initialized tunes and returns fragment that can be appended to the toolbars area
    *
    * @returns {DocumentFragment}
    */
-  public renderTunes(): DocumentFragment {
+  public renderTunes(): [DocumentFragment, DocumentFragment] {
     const tunesElement = document.createDocumentFragment();
+    const defaultTunesElement = document.createDocumentFragment();
 
     this.tunesInstances.forEach((tune) => {
       $.append(tunesElement, tune.render());
     });
+    this.defaultTunesInstances.forEach((tune) => {
+      $.append(defaultTunesElement, tune.render());
+    });
 
-    return tunesElement;
+    return [tunesElement, defaultTunesElement];
   }
 
   /**
@@ -713,11 +688,10 @@ export default class Block {
 
     let wrappedContentNode: HTMLElement = contentNode;
 
-    Array
-      .from(this.tunesInstances.values())
+    [...this.tunesInstances.values(), ...this.defaultTunesInstances.values()]
       .forEach((tune) => {
         if (_.isFunction(tune.wrap)) {
-          wrappedContentNode = tune.wrap(wrappedContentNode)
+          wrappedContentNode = tune.wrap(wrappedContentNode);
         }
       });
 
@@ -726,6 +700,32 @@ export default class Block {
     return wrapper;
   }
 
+  /**
+   * Instantiate Block Tunes
+   *
+   * @param tunesData - current Block tunes data
+   * @private
+   */
+  private composeTunes(tunesData: {[name: string]: BlockTuneData}): void {
+    [
+      ...this.tunes.external.values(),
+      ...this.tunes.internal.values(),
+    ].forEach((tune) => {
+      const collection = tune.isInternal ? this.defaultTunesInstances : this.tunesInstances;
+
+      collection.set(tune.name, tune.instance(tunesData[tune.name], this.blockAPI));
+    });
+
+    /**
+     * Check if there is some data for not available tunes
+     */
+    Object.entries(tunesData).forEach(([name, data]) => {
+      if (!this.tunesInstances.has(name)) {
+        this.unavailableTunesData[name] = data;
+      }
+    });
+  }
+
   /**
    * Is fired when text input or contentEditable is focused
    */

src/components/modules/api/i18n.ts

@@ -1,8 +1,8 @@
 import { I18n } from '../../../../types/api';
 import I18nInternal from '../../i18n';
-import { ToolType } from '../tools';
 import { logLabeled } from '../../utils';
 import Module from '../../__module';
+import { ToolClass } from '../../tools/collection';
 
 /**
  * Provides methods for working with i18n
@@ -11,17 +11,14 @@ export default class I18nAPI extends Module {
   /**
    * Return namespace section for tool or block tune
    *
-   * @param toolName - name of tool. Used to provide dictionary only for this tool
-   * @param toolType - 'block' for Block Tool, 'inline' for Inline Tool, 'tune' for Block Tunes
+   * @param tool - tool object
    */
-  private static getNamespace(toolName: string, toolType: ToolType): string {
-    switch (toolType) {
-      case ToolType.Block:
-      case ToolType.Inline:
-        return `tools.${toolName}`;
-      case ToolType.Tune:
-        return `blockTunes.${toolName}`;
+  private static getNamespace(tool: ToolClass): string {
+    if (tool.isTune) {
+      return `blockTunes.${tool.name}`;
     }
+
+    return `tools.${tool.name}`;
   }
 
   /**
@@ -40,15 +37,14 @@ export default class I18nAPI extends Module {
   /**
    * Return I18n API methods with tool namespaced dictionary
    *
-   * @param toolName - name of tool. Used to provide dictionary only for this tool
-   * @param toolType - 'block' for Block Tool, 'inline' for Inline Tool, 'tune' for Block Tunes
+   * @param tool - Tool object
    */
-  public getMethodsForTool(toolName: string, toolType: ToolType): I18n {
+  public getMethodsForTool(tool: ToolClass): I18n {
     return Object.assign(
       this.methods,
       {
         t: (dictKey: string): string => {
-          return I18nInternal.t(I18nAPI.getNamespace(toolName, toolType), dictKey);
+          return I18nInternal.t(I18nAPI.getNamespace(tool), dictKey);
         },
       });
   }