Save Tools' order in the Toolbox

docs/CHANGELOG.md

@@ -5,6 +5,7 @@
 - `Improvements` - TSLint (deprecated) replaced with ESLint, old config changed to [CodeX ESLint Config](https://github.com/codex-team/eslint-config).
 - `Improvements` - Fix many code-style issues, add missed annotations.
 - `Improvements` - Adjusted GitHub action for ESLint.
+- `Fix` - Toolbox: Tool's order in Toolbox is now saved in accordance with `tools` object keys order [#1073](https://github.com/codex-team/editor.js/issues/1073)
 
 ### 2.17
 

src/components/modules/tools.ts

@@ -313,6 +313,7 @@ export default class Tools extends Module {
    * @param {object} data - append tool to available list
    */
   public success(data: {toolName: string}): void {
+    console.log(data);
     this.toolsAvailable[data.toolName] = this.toolsClasses[data.toolName];
   }
 
@@ -429,20 +430,30 @@ export default class Tools extends Module {
     for (const toolName in this.toolsClasses) {
       if (Object.prototype.hasOwnProperty.call(this.toolsClasses, toolName)) {
         const toolClass = this.toolsClasses[toolName];
+        const toolConfig = this.toolsSettings[toolName][this.USER_SETTINGS.CONFIG];
 
         if (typeof toolClass.prepare === 'function') {
           toolPreparationList.push({
             function: toolClass.prepare,
             data: {
               toolName,
-              config: this.toolsSettings[toolName][this.USER_SETTINGS.CONFIG],
+              config: toolConfig,
             },
           });
         } else {
           /**
-           * If Tool hasn't a prepare method, mark it as available
+           * If Tool hasn't a prepare method,
+           * still push it to tool preparation list to save tools order in Toolbox.
+           * As Tool's prepare method might be async, _.sequence util helps to save the order.
            */
-          this.toolsAvailable[toolName] = toolClass;
+          toolPreparationList.push({
+            // eslint-disable-next-line @typescript-eslint/no-empty-function
+            function: () => {},
+            data: {
+              toolName,
+              config: toolConfig,
+            },
+          });
         }
       }
     }