fix(tunes): make installed tunes render above default tunes (#2204)

* Fix tunes order

* Update version and changelog

* Fix tests

docs/CHANGELOG.md

@@ -1,6 +1,10 @@
 # Changelog
 
 
+### 2.26.2
+
+- `Fix` — *Menu Config* — Installed tunes are rendered above default tunes again.
+
 ### 2.26.1
 - `Improvement` — *Menu Config* — Now it becomes possible to create toggle groups.
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@editorjs/editorjs",
-  "version": "2.26.1",
+  "version": "2.26.2",
   "description": "Editor.js — Native JS, based on API and Open Source",
   "main": "dist/editor.js",
   "types": "./types/index.d.ts",

src/components/block/index.ts

@@ -653,8 +653,8 @@ export default class Block extends EventsDispatcher<BlockEvents> {
 
     /** Common tunes: combination of default tunes (move up, move down, delete) and third-party tunes connected via tunes api */
     const commonTunes = [
-      ...this.defaultTunesInstances.values(),
       ...this.tunesInstances.values(),
+      ...this.defaultTunesInstances.values(),
     ].map(tuneInstance => tuneInstance.render());
 
     [tunesDefinedInTool, commonTunes].flat().forEach(rendered => {

test/cypress/tests/api/tunes.spec.ts

@@ -133,4 +133,56 @@ describe('Editor Tunes Api', () => {
       .get('.ce-popover')
       .should('contain.text', sampleText);
   });
+
+  it('should display installed tunes above default tunes', () => {
+    /** Test tune that should appear be rendered in block tunes menu */
+    class TestTune {
+      /** Set Tool is Tune */
+      public static readonly isTune = true;
+
+      /** Tune's appearance in block settings menu */
+      public render(): TunesMenuConfig {
+        return [
+          {
+            icon: 'ICON',
+            label: 'Tune entry',
+            name: 'test-tune',
+
+            onActivate: (): void => { },
+          },
+        ];
+      }
+
+      /** Save method stub */
+      public save(): void {}
+    }
+
+    cy.createEditor({
+      tools: {
+        testTune: TestTune,
+      },
+      tunes: [ 'testTune' ],
+    }).as('editorInstance');
+
+    cy.get('[data-cy=editorjs]')
+      .get('div.ce-block')
+      .type('some text')
+      .click();
+
+    cy.get('[data-cy=editorjs]')
+      .get('.ce-toolbar__settings-btn')
+      .click();
+
+    /** Check test tune is inserted at index 0 */
+    cy.get('[data-cy=editorjs]')
+      .get('.ce-settings .ce-popover__item')
+      .eq(0)
+      .should('have.attr', 'data-item-name', 'test-tune' );
+
+    /** Check default Move Up tune is inserted below the test tune */
+    cy.get('[data-cy=editorjs]')
+      .get('.ce-settings .ce-popover__item')
+      .eq(1)
+      .should('have.attr', 'data-item-name', 'move-up' );
+  });
 });