Block Tunes

[gohabereg]

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

Method	Comment
save()	not required anymore as data should be saved within the Model
render()	should be completely replaced by MenuConfig (maybe even could be a static property
wrap()	this is the most challenging part, covered below
isTune	should be replaced by type property (see other tool interfaces in V3)
sanitize	should not be needed anymore as we store clean data in the model
prepare()	should stay
reset()	should stay

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

[bettysteger]

Hello @gohabereg, can you assign the issue to me? i just had to made a fork so i can push