From 28ca17d8d87d5c3aa572097decee2af47ebc6160 Mon Sep 17 00:00:00 2001
From: Tanya Fomina <fomina.tatianaaa@yandex.ru>
Date: Tue, 12 Jul 2022 20:55:08 +0800
Subject: [PATCH] Add ability to display rendered custom tunes

---
 src/components/block/index.ts                 | 15 +++++++++-
 .../modules/toolbar/blockSettings.ts          | 30 +++++++++++++++----
 2 files changed, 38 insertions(+), 7 deletions(-)

diff --git a/src/components/block/index.ts b/src/components/block/index.ts
index d38b67ef..7edea34d 100644
--- a/src/components/block/index.ts
+++ b/src/components/block/index.ts
@@ -643,7 +643,20 @@ export default class Block extends EventsDispatcher<BlockEvents> {
   }
 
   /**
-   * Returns list of tunes available for block
+   * Returns rendered custom block tunes
+   */
+  public getTunesRendered(): DocumentFragment {
+    const tunesElement = document.createDocumentFragment();
+
+    this.tunesInstances.forEach((tune) => {
+      $.append(tunesElement, tune.render());
+    });
+
+    return tunesElement;
+  }
+
+  /**
+   * Returns list of tunes available for block as popover items
    */
   public getTunesList(): PopoverItem[] {
     const tunes = Array.from(this.tunesInstances.values());
diff --git a/src/components/modules/toolbar/blockSettings.ts b/src/components/modules/toolbar/blockSettings.ts
index 44448405..145223eb 100644
--- a/src/components/modules/toolbar/blockSettings.ts
+++ b/src/components/modules/toolbar/blockSettings.ts
@@ -12,7 +12,7 @@ import { I18nInternalNS } from '../../i18n/namespace-internal';
  */
 interface BlockSettingsNodes {
   wrapper: HTMLElement;
-  toolSettings: HTMLElement;
+  renderedTunes: HTMLElement;
 }
 
 /**
@@ -97,7 +97,7 @@ export default class BlockSettings extends Module<BlockSettingsNodes> {
     /**
      * Fill Tool's settings
      */
-    this.nodes.toolSettings = targetBlock.renderSettings();
+    this.nodes.renderedTunes = this.composeRenderedTunes(targetBlock);
 
     /** Tell to subscribers that block settings is opened */
     this.eventsDispatcher.emit(this.events.opened);
@@ -110,7 +110,7 @@ export default class BlockSettings extends Module<BlockSettingsNodes> {
       filterLabel: I18n.ui(I18nInternalNS.ui.toolbar.toolbox, 'Filter'),
       nothingFoundLabel: I18n.ui(I18nInternalNS.ui.toolbar.toolbox, 'Nothing found'),
       items: targetBlock.getTunesList(),
-      customContent: this.nodes.toolSettings,
+      customContent: this.nodes.renderedTunes,
       api: this.Editor.API.methods,
     });
     this.popover.on(PopoverEvent.OverlayClicked, this.onOverlayClicked);
@@ -154,8 +154,8 @@ export default class BlockSettings extends Module<BlockSettingsNodes> {
     }
 
     /** Clear settings */
-    if (this.nodes.toolSettings) {
-      this.nodes.toolSettings.innerHTML = '';
+    if (this.nodes.renderedTunes) {
+      this.nodes.renderedTunes.innerHTML = '';
     }
 
     /** Tell to subscribers that block settings is closed */
@@ -168,13 +168,31 @@ export default class BlockSettings extends Module<BlockSettingsNodes> {
     }
   }
 
+  /**
+   * Combines rendered tool settings with custom block tunes
+   *
+   * @param targetBlock - block tunes belong to
+   */
+  private composeRenderedTunes(targetBlock: Block): HTMLElement | undefined {
+    const toolSettings = targetBlock.renderSettings();
+    const customBlockTunes = targetBlock.getTunesRendered();
+    const container = document.createElement('div');
+
+    if (!toolSettings && !customBlockTunes) {
+      return;
+    }
+    container.append(toolSettings, customBlockTunes);
+
+    return container;
+  }
+
   /**
    * Adds special class to rendered tool settings signalising that button should
    * be available for keyboard navigation
    */
   private makeToolTunesButtonsNavigatable(): void {
     const { StylesAPI } = this.Editor;
-    const toolSettings = this.nodes.toolSettings?.querySelectorAll(
+    const toolSettings = this.nodes.renderedTunes?.querySelectorAll(
       // Select buttons and inputs
       `.${StylesAPI.classes.settingsButton}, ${$.allInputsSelector}`
     );