Block Tunes

Block Tunes is type of Tool that can enhance a Block within the editor. It's either could just a functional feature (like moving/removing blocks) or some UI enhancement (e.g. Block background, Spoiler for a Block, etc.)

Tunes are integrated in the UI within the Block Settings

In v2 the functional side of the Tune works via EditorAPI. The UI side works by wrapping the Block content with an element that Tune has control of.
For example:

<div class="background-tune"> <!-- Tune element -->
  <div class="block-content">...</div>
</div>

V2 BlockTune and it's constructable interfaces:

export interface BlockTune {
  /**
   * Returns BlockTune's UI.
   * Should return either MenuConfig (recommended) (@see https://editorjs.io/menu-config/)
   * or HTMLElement (UI consitency is not guaranteed)
   */
  render(): HTMLElement | MenuConfig;

  /**
   * Method called on Tool render. Pass Tool content as an argument.
   *
   * You can wrap Tool's content with any wrapper you want to provide Tune's UI
   *
   * @param {HTMLElement} pluginsContent — Tool's content wrapper
   */
  wrap?(pluginsContent: HTMLElement): HTMLElement;

  /**
   * Called on Tool's saving. Should return any data Tune needs to save
   *
   * @return {BlockTuneData}
   */
  save?(): BlockTuneData;
}

export interface BlockTuneConstructable {

  /**
   * Flag show Tool is Block Tune
   */
  isTune: boolean;

  /**
   * Tune's sanitize configuration
   */
  sanitize?: SanitizerConfig;

  /**
   * @constructor
   *
   * @param config - Block Tune config
   */
  new(config: {
    api: API,
    config?: ToolConfig,
    block: BlockAPI,
    data: BlockTuneData,
  }): BlockTune;

  /**
   * Tune`s prepare method. Can be async
   * @param data
   */
  prepare?(): Promise<void> | void;

  /**
   * Tune`s reset method to clean up anything set by prepare. Can be async
   */
  reset?(): void | Promise<void>;
}

For V3 there are going to be changes

Block wrapping problem

In V3 UI is a set of external plugins. Therefore, neither the core nor adapter would have direct access there. However, BlockManager has access to the Tool content (at least for now), so maybe we can intercept the event and wrap the UI there. The task here is to investigate different options to wrap the Block contents (or maybe even use some other concept to change Block's UI)

High level requirements

1. BlockTune interface should be described
2. BlockTuneAdapter should be added to DOMAdapter to be able to update tune's data and subscribe to its external updates
3. Tunes instantiation for the block should be implemented (providing the API and Adapter to the Tune)
4. Methods to update BlockTunes' data should be added to the EditorAPI
5. Internal Tunes to be implemented: RemoveBlock, MoveBlock