tmp

example/tools/checklist

@@ -1 +1 @@
-Subproject commit b1367277e070bbbf80b7b14b1963845ba9a71d8c
+Subproject commit d93fc513924909d3b3e17b60cdae4d8e9a326469

example/tools/image

@@ -1 +1 @@
-Subproject commit 927ec04edae75fb2e9a83add24be38d439dc3a19
+Subproject commit 5ee4e1ef338493b82a11fd76a3568844afe1c78b

example/tools/nested-list

@@ -1 +1 @@
-Subproject commit c5c47395516cae0e456881a67a84fd69fec06c47
+Subproject commit 53a12f3d816630e071ef8230c4a5870a7c0d0551

example/tools/simple-image

@@ -1 +1 @@
-Subproject commit 2d411a650afa04f0468f7648ee0b5a765362161c
+Subproject commit e1275bdabbae5d933215bf3cbaeddc0c0fffd9a4

example/tools/table

@@ -1 +1 @@
-Subproject commit 4a94a1592a500ebb6cc570fa1d6216a149b541a0
+Subproject commit ff9bf7d3627b463d88aed99313e87b495a4211fc

example/tools/warning

@@ -1 +1 @@
-Subproject commit 7e706b1cb67655db75d3a154038e4f11e2d00128
+Subproject commit e2726a7b301c960d318aa1ec73bac97f474e3d68

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

@@ -40,11 +40,23 @@ export default class DeleteTune implements BlockTune {
       icon: IconCross,
       title: this.api.i18n.t('Delete'),
       name: 'delete',
-      confirmation: {
-        title: this.api.i18n.t('Click to delete'),
-        onActivate: (): void => this.handleClick(),
-      },
+      children: [
+        {
+          icon: IconCross,
+          title: this.api.i18n.t('Delete'),
+          onActivate: (): void => this.handleClick(),
+        },
+      ],
     };
+    // return {
+    //   icon: IconCross,
+    //   title: this.api.i18n.t('Delete'),
+    //   name: 'delete',
+    //   confirmation: {
+    //     title: this.api.i18n.t('Click to delete'),
+    //     onActivate: (): void => this.handleClick(),
+    //   },
+    // };
   }
 
   /**

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

@@ -84,7 +84,7 @@ export default class MoveUpTune implements BlockTune {
     } else {
       scrollUpOffset = window.innerHeight - Math.abs(currentBlockCoords.top) + Math.abs(previousBlockCoords.top);
     }
-
+    // document.getElementById('editorjs').parentElement.scrollBy(0, -1 * scrollUpOffset);
     window.scrollBy(0, -1 * scrollUpOffset);
 
     /** Change blocks positions */

src/components/utils/popover/index.ts

@@ -37,10 +37,15 @@ interface PopoverParams {
    */
   searchable?: boolean;
 
+  /**
+   * True if popover is nested inside another popover
+   */
+  nested?: boolean;
+
   /**
    * Popover texts overrides
    */
-  messages?: PopoverMessages
+  messages?: PopoverMessages;
 }
 
 /**
@@ -110,6 +115,7 @@ export default class Popover extends EventsDispatcher<PopoverEvent> {
    */
   private static get CSS(): {
     popover: string;
+    popoverNested: string;
     popoverOpenTop: string;
     popoverOpened: string;
     search: string;
@@ -123,6 +129,7 @@ export default class Popover extends EventsDispatcher<PopoverEvent> {
     } {
     return {
       popover: 'ce-popover',
+      popoverNested: 'ce-popover--nested',
       popoverOpenTop: 'ce-popover--open-top',
       popoverOpened: 'ce-popover--opened',
       search: 'ce-popover__search',
@@ -280,6 +287,8 @@ export default class Popover extends EventsDispatcher<PopoverEvent> {
   private make(): void {
     this.nodes.popover = Dom.make('div', [ Popover.CSS.popover ]);
 
+    if (this.)
+
     this.nodes.nothingFoundMessage = Dom.make('div', [ Popover.CSS.nothingFoundMessage ], {
       textContent: this.messages.nothingFound,
     });
@@ -381,6 +390,13 @@ export default class Popover extends EventsDispatcher<PopoverEvent> {
     /** Cleanup other items state */
     this.items.filter(x => x !== item).forEach(x => x.reset());
 
+    /** If item has children, display them in nested popover */
+    if (item.children.length > 0) {
+      this.showNestedPopoverFor(item);
+
+      return;
+    }
+
     item.handleClick();
 
     this.toggleItemActivenessIfNeeded(item);
@@ -390,6 +406,24 @@ export default class Popover extends EventsDispatcher<PopoverEvent> {
     }
   }
 
+  /**
+   *
+   * @param item
+   */
+  private showNestedPopoverFor(item: PopoverItem): void {
+    const nestedPopover = new Popover({
+      items: item.children,
+    });
+
+    const itemEl = item.getElement();
+
+    console.log(itemEl.offsetTop);
+
+    this.nodes.wrapper.appendChild(nestedPopover.getElement());
+
+    nestedPopover.show();
+  }
+
   /**
    * Creates Flipper instance which allows to navigate between popover items via keyboard
    */

src/components/utils/popover/popover-item.ts

@@ -1,6 +1,7 @@
 import Dom from '../../dom';
 import { IconDotCircle } from '@codexteam/icons';
 import { PopoverItem as PopoverItemParams } from '../../../../types';
+// import Popover from './index';
 
 /**
  * Represents sigle popover item node
@@ -48,6 +49,13 @@ export class PopoverItem {
     return this.nodes.root.classList.contains(PopoverItem.CSS.focused);
   }
 
+  /**
+   * Returns list of item children
+   */
+  public get children(): PopoverItemParams[] {
+    return 'children' in this.params ? this.params.children : [];
+  }
+
   /**
    * Item html elements
    */
@@ -123,6 +131,12 @@ export class PopoverItem {
    * Called on popover item click
    */
   public handleClick(): void {
+    // if ('children' in this.params && this.params.children.length > 0) {
+    //   this.showChildren(this.params.children);
+
+    //   return;
+    // }
+
     if (this.isConfirmationStateEnabled) {
       this.activateOrEnableConfirmationMode(this.confirmationState);
 
@@ -205,6 +219,21 @@ export class PopoverItem {
     return el;
   }
 
+  // /**
+  //  *
+  //  * @param items
+  //  */
+  // private showChildren(items: PopoverItemParams[]): void {
+  //   // if ('children' in this.params && this.params.children.length > 0)
+  //   const nestedPopover = new Popover({
+  //     items,
+  //   });
+
+  //   this.nodes.root.appendChild(nestedPopover.getElement());
+
+  //   nestedPopover.show();
+  // }
+
   /**
    * Activates confirmation mode for the item.
    *
@@ -281,15 +310,18 @@ export class PopoverItem {
    * @param item - item to activate or bring to confirmation mode
    */
   private activateOrEnableConfirmationMode(item: PopoverItemParams): void {
-    if (item.confirmation === undefined) {
+    if (item.confirmation !== undefined) {
+      this.enableConfirmationMode(item.confirmation);
+    } else if ('onActivate' in item) {
       try {
         item.onActivate(item);
-        this.disableConfirmationMode();
+
+        if (this.isConfirmationStateEnabled) {
+          this.disableConfirmationMode();
+        }
       } catch {
         this.animateError();
       }
-    } else {
-      this.enableConfirmationMode(item.confirmation);
     }
   }
 

tsconfig.eslint.json

@@ -0,0 +1,6 @@
+{
+  "extends": "./tsconfig.json",
+  "include": [
+    ".eslintrc.js",
+  ]
+}

types/configs/conversion-config.ts

@@ -1,4 +1,4 @@
-import {BlockToolData} from '../tools';
+import { BlockToolData } from '../tools';
 
 /**
  * Config allows Tool to specify how it can be converted into/from another Tool

types/configs/popover.d.ts

@@ -69,13 +69,22 @@ export interface PopoverItemWithoutConfirmation extends PopoverItemBase {
    * Popover item activation handler
    *
    * @param item - activated item
-   * @param event - event that initiated item activation
    */
-  onActivate: (item: PopoverItem, event?: PointerEvent) => void;
+  onActivate: (item: PopoverItem) => void;
+}
+
+export interface PopoverItemWithChildren extends PopoverItemBase {
+  confirmation?: never;
+  
+  onActivate?: never
+
+  /**
+   * List of nested popover items 
+   */
+  children: PopoverItem[]
 }
 
 /**
  * Represents single popover item
  */
-export type PopoverItem = PopoverItemWithConfirmation | PopoverItemWithoutConfirmation
-
+export type PopoverItem = PopoverItemWithConfirmation | PopoverItemWithoutConfirmation | PopoverItemWithChildren;