Basic implementation for Block Tunes

example/example-dev.html

@@ -80,6 +80,7 @@
 
   <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 -->
 
   <!-- Load Editor.js's Core -->
   <script src="../dist/editor.js" onload="document.getElementById('hint-core').hidden = true;"></script>
@@ -113,6 +114,8 @@
        * Tools list
        */
       tools: {
+        favorite: FavoriteTune,
+
         /**
          * Each Tool is a Plugin. Pass them via 'class' option with necessary settings {@link docs/tools.md}
          */
@@ -122,7 +125,8 @@
           config: {
             placeholder: 'Header'
           },
-          shortcut: 'CMD+SHIFT+H'
+          shortcut: 'CMD+SHIFT+H',
+          tunes: ['favorite']
         },
 
         /**
@@ -199,6 +203,9 @@
             data: {
               text: "Editor.js",
               level: 2
+            },
+            tunes: {
+              favorite: true
             }
           },
           {

example/tunes/favorite/index.js

@@ -0,0 +1,59 @@
+class FavoriteTune {
+  static get isTune() {
+    return true
+  }
+
+  constructor({api, block, data = false}) {
+    this.state = data;
+  }
+
+  set state(state) {
+    this._state = state;
+
+    if (this.wrapper) {
+      this.wrapper.style.backgroundColor = this.background;
+    }
+
+    if (this.button) {
+      this.button.innerHTML = this.state ? '<b>F</b>' : 'F';
+    }
+  }
+
+  get state() {
+    return this._state;
+  }
+
+  get background() {
+    return this.state ? 'yellow' : 'unset';
+  }
+
+  render() {
+    this.button = document.createElement('div');
+
+    this.button.classList.add('ce-settings__button');
+
+    this.button.innerHTML = this.state ? '<b>F</b>' : 'F';
+
+    this.button.addEventListener('click', () => this.onClick());
+
+    return this.button;
+  }
+
+  onClick() {
+    this.state = !this.state;
+  }
+
+  wrap(pluginsContent) {
+    this.wrapper = document.createElement('div');
+
+    this.wrapper.style.backgroundColor = this.background;
+
+    this.wrapper.appendChild(pluginsContent);
+
+    return this.wrapper;
+  }
+
+  save() {
+    return this.state;
+  }
+}

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

@@ -11,6 +11,9 @@ import $ from '../dom';
  *
  */
 export default class DeleteTune implements BlockTune {
+
+  public static readonly isTune = true;
+
   /**
    * Property that contains Editor.js API methods
    *

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

@@ -12,6 +12,9 @@ import { API, BlockTune } from '../../../types';
  *
  */
 export default class MoveDownTune implements BlockTune {
+
+  public static readonly isTune = true;
+
   /**
    * Property that contains Editor.js API methods
    *

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

@@ -11,6 +11,10 @@ import { API, BlockTune } from '../../../types';
  *
  */
 export default class MoveUpTune implements BlockTune {
+
+
+  public static readonly isTune = true;
+
   /**
    * Property that contains Editor.js API methods
    *

src/components/block/index.ts

@@ -3,7 +3,7 @@ import {
   BlockTool as IBlockTool,
   BlockToolConstructable,
   BlockToolData,
-  BlockTune,
+  BlockTune as IBlockTune,
   BlockTuneConstructable,
   SanitizerConfig,
   ToolConfig,
@@ -23,16 +23,13 @@ import BlockTool from '../tools/block';
 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";
 
 /**
  * Interface describes Block class constructor argument
  */
 interface BlockConstructorOptions {
-  /**
-   * Tool's name
-   */
-  name: string;
-
   /**
    * Initial Block data
    */
@@ -52,6 +49,10 @@ interface BlockConstructorOptions {
    * This flag indicates that the Block should be constructed in the read-only mode.
    */
   readOnly: boolean;
+
+  tunes: BlockTune[];
+
+  tunesData: {[name: string]: BlockTuneData};
 }
 
 /**
@@ -145,6 +146,8 @@ export default class Block {
    */
   private readonly toolInstance: IBlockTool;
 
+  private readonly tunesInstances: Map<string, IBlockTune> = new Map();
+
   /**
    * Editor`s API module
    */
@@ -195,21 +198,21 @@ export default class Block {
 
   /**
    * @param {object} options - block constructor options
-   * @param {string} options.name - Tool name that passed on initialization
    * @param {BlockToolData} options.data - Tool's initial data
    * @param {BlockToolConstructable} options.Tool — Tool's class
    * @param {ToolSettings} options.settings - default tool's config
    * @param options.api - Editor API module for pass it to the Block Tunes
    * @param {boolean} options.readOnly - Read-Only flag
    */
   constructor({
-    name,
     data,
     tool,
     api,
     readOnly,
+    tunes,
+    tunesData,
   }: BlockConstructorOptions) {
-    this.name = name;
+    this.name = tool.name;
     this.settings = tool.settings;
     this.config = tool.settings.config || {};
     this.api = api;
@@ -220,11 +223,16 @@ export default class Block {
     this.tool = tool;
     this.toolInstance = tool.instance(data, this.blockAPI, readOnly);
 
-    this.holder = this.compose();
     /**
      * @type {BlockTune[]}
      */
-    this.tunes = this.makeTunes();
+    this.tunes = tunes;
+
+    tunes.forEach((tune) => {
+      this.tunesInstances.set(tune.name, tune.instance(tunesData[tune.name], this.blockAPI))
+    });
+
+    this.holder = this.compose();
   }
 
   /**
@@ -526,6 +534,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} = {}
+
+    Array
+      .from(this.tunesInstances.entries())
+      .forEach(([name, tune]) => {
+        if (_.isFunction(tune.save)) {
+          tunesData[name] = tune.save()
+        }
+      });
 
     /**
      * Measuring execution time
@@ -541,6 +558,7 @@ export default class Block {
         return {
           tool: this.name,
           data: finishedExtraction,
+          tunes: tunesData,
           time: measuringEnd - measuringStart,
         };
       })
@@ -574,7 +592,7 @@ export default class Block {
    *
    * @returns {BlockTune[]}
    */
-  public makeTunes(): BlockTune[] {
+  public makeTunes(): IBlockTune[] {
     const tunesList = [
       {
         name: 'moveUp',
@@ -595,6 +613,8 @@ export default class Block {
       return new Tune({
         api: this.api.getMethodsForTool(name, ToolType.Tune),
         settings: this.config,
+        block: this.blockAPI,
+        data: {}
       });
     });
   }
@@ -607,7 +627,7 @@ export default class Block {
   public renderTunes(): DocumentFragment {
     const tunesElement = document.createDocumentFragment();
 
-    this.tunes.forEach((tune) => {
+    this.tunesInstances.forEach((tune) => {
       $.append(tunesElement, tune.render());
     });
 
@@ -690,7 +710,18 @@ export default class Block {
         pluginsContent = this.toolInstance.render();
 
     contentNode.appendChild(pluginsContent);
-    wrapper.appendChild(contentNode);
+
+    let wrappedContentNode: HTMLElement = contentNode;
+
+    Array
+      .from(this.tunesInstances.values())
+      .forEach((tune) => {
+        if (_.isFunction(tune.wrap)) {
+          wrappedContentNode = tune.wrap(wrappedContentNode)
+        }
+      });
+
+    wrapper.appendChild(wrappedContentNode);
 
     return wrapper;
   }

src/components/modules/blockManager.ts

@@ -13,6 +13,7 @@ import * as _ from '../utils';
 import Blocks from '../blocks';
 import { BlockToolConstructable, BlockToolData, PasteEvent } from '../../../types';
 import BlockTool from '../tools/block';
+import {BlockTuneData} from '../../../types/block-tunes/block-tune-data';
 
 /**
  * @typedef {BlockManager} BlockManager
@@ -220,15 +221,21 @@ export default class BlockManager extends Module {
    *
    * @returns {Block}
    */
-  public composeBlock({ tool: name, data = {} }: {tool: string; data?: BlockToolData}): Block {
+  public composeBlock({
+    tool: name,
+    data = {},
+    tunes: tunesData = {}
+  }: {tool: string; data?: BlockToolData, tunes?: {[name: string]: BlockTuneData}}): Block {
     const readOnly = this.Editor.ReadOnly.isEnabled;
     const tool = this.Editor.Tools.block.get(name);
+    const tunes = this.Editor.Tools.getTunesForTool(tool);
     const block = new Block({
-      name,
       data,
       tool,
       api: this.Editor.API,
       readOnly,
+      tunes,
+      tunesData,
     });
 
     if (!readOnly) {
@@ -256,12 +263,14 @@ export default class BlockManager extends Module {
     index,
     needToFocus = true,
     replace = false,
+    tunes = {},
   }: {
     tool?: string;
     data?: BlockToolData;
     index?: number;
     needToFocus?: boolean;
     replace?: boolean;
+    tunes?: {[name: string]: BlockTuneData}
   } = {}): Block {
     let newIndex = index;
 
@@ -272,6 +281,7 @@ export default class BlockManager extends Module {
     const block = this.composeBlock({
       tool,
       data,
+      tunes,
     });
 
     this._blocks.insert(newIndex, block, replace);

src/components/modules/renderer.ts

@@ -64,14 +64,14 @@ export default class Renderer extends Module {
    */
   public async insertBlock(item: OutputBlockData): Promise<void> {
     const { Tools, BlockManager } = this.Editor;
-    const tool = item.type;
-    const data = item.data;
+    const { type: tool, data, tunes } = item;
 
     if (Tools.available.has(tool)) {
       try {
         BlockManager.insert({
           tool,
           data,
+          tunes,
         });
       } catch (error) {
         _.log(`Block «${tool}» skipped because of plugins error`, 'warn', data);

src/components/modules/saver.ts

@@ -78,7 +78,7 @@ export default class Saver extends Module {
 
     _.log('[Editor.js saving]:', 'groupCollapsed');
 
-    allExtractedData.forEach(({ tool, data, time, isValid }) => {
+    allExtractedData.forEach(({ tool, data, tunes, time, isValid }) => {
       totalTime += time;
 
       /**
@@ -104,10 +104,16 @@ export default class Saver extends Module {
         return;
       }
 
-      blocks.push({
+      const output: any = {
         type: tool,
         data,
-      });
+      };
+
+      if (!_.isEmpty(tunes)) {
+        output.tunes = tunes;
+      }
+
+      blocks.push(output);
     });
 
     _.log('Total', 'log', totalTime);