feat(playground): register Header tool

Header wasn't wired into the playground, so there was no way to see its config-driven toolbox running in the actual editor rather than only in its own unit tests. Registered with all six levels enabled via config.levels.

Getting it to actually work surfaced two bugs: BlockManager.insert flattened a block's data onto its top-level properties instead of nesting it under data, dropping every tool's data on insert; and ToolboxUI.addTool only added one toolbox entry for a tool with several, instead of iterating all of them.

Author: Reversean

packages/core/src/components/BlockManager.spec.ts

@@ -142,6 +142,22 @@ describe('BlocksManager (unit, mocked deps)', () => {
       );
     });
 
+    it('should nest data under a data property instead of flattening it onto the block', () => {
+      blocksManager.insert({
+        type: 'header',
+        data: { level: 2 }
+      });
+
+      expect(model.addBlock).toHaveBeenCalledWith(
+        USER_ID,
+        expect.objectContaining({
+          name: 'header',
+          data: { level: 2 }
+        }),
+        BLOCKS_COUNT
+      );
+    });
+
     it('should use model.length as insertion/removal index when replace is true and index is omitted', () => {
       blocksManager.insert({
         replace: true

packages/core/src/components/BlockManager.ts

@@ -144,7 +144,7 @@ export class BlocksManager {
     }
 
     this.#model.addBlock(userId, {
-      ...data,
+      data,
       id,
       name: type,
     }, newIndex);

packages/playground/package.json

@@ -19,6 +19,7 @@
     "@editorjs/collaboration-manager": "workspace:^",
     "@editorjs/core": "workspace:^",
     "@editorjs/dom-adapters": "workspace:^",
+    "@editorjs/header": "workspace:^",
     "@editorjs/model": "workspace:^",
     "@editorjs/sdk": "workspace:^",
     "@editorjs/ui": "workspace:*",

packages/playground/src/App.vue

@@ -5,6 +5,7 @@ import Core from '@editorjs/core';
 import { ref, onMounted } from 'vue';
 import { Node } from './components';
 import { EditorjsUI, BlocksUI, InlineToolbarUI, ToolboxUI, ToolbarUI } from '@editorjs/ui';
+import { Header } from '@editorjs/header';
 /**
  * Editor document for visualizing
  */
@@ -68,6 +69,7 @@ onMounted(() => {
     .use(InlineToolbarUI)
     .use(ToolbarUI)
     .use(ToolboxUI)
+    .use(Header, { config: { levels: [1, 2, 3, 4, 5, 6] } })
     .initialize();
 });
 

packages/playground/tsconfig.json

@@ -44,6 +44,9 @@
     },
     {
       "path": "../ui/tsconfig.json"
+    },
+    {
+      "path": "../tools/header/tsconfig.json"
     }
   ]
 }

packages/playground/vite.config.ts

@@ -9,6 +9,11 @@ export default defineConfig({
       '@': path.resolve(__dirname, './src'),
     },
   },
+  server: {
+    fs: {
+      allow: [path.resolve(__dirname, '../..')],
+    },
+  },
   optimizeDeps: {
     exclude: [
       '@editorjs/ui',

packages/ui/src/Toolbox/Toolbox.ts

@@ -14,7 +14,6 @@ import {
 import { PopoverDesktop, PopoverEvent } from '@editorjs/ui-kit';
 import type { BlockSelectedUIEvent } from '../Blocks/events/index.js';
 import { ToolboxRenderedUIEvent, ToolboxClosedUIEvent, ToolboxOpenedUIEvent } from './events/index.js';
-import type { ToolboxOptionsEntry } from './ToolboxConfigEntry.js';
 
 /**
  * UI module responsible for rendering the toolbox
@@ -136,23 +135,29 @@ export class ToolboxUI implements EditorjsPlugin {
    * @param tool - Block tool to add to the toolbox
    */
   public addTool(tool: BlockToolFacade): void {
-    const toolbox = (tool.options.toolbox ?? {}) as ToolboxOptionsEntry;
-
-    this.#popover.addItem(
-      {
-        title: tool.name,
-        ...toolbox,
-        closeOnActivate: true,
-        onActivate: () => {
-          void this.#api.blocks.insert({
-            type: tool.name,
-            data: toolbox.data ?? {},
-            index: this.#selectedBlockIndex === -1 ? undefined : this.#selectedBlockIndex + 1,
-            focus: true,
-          });
-        },
-      }
-    );
+    const entries = tool.toolbox;
+
+    if (entries === undefined) {
+      return;
+    }
+
+    for (const entry of entries) {
+      this.#popover.addItem(
+        {
+          title: tool.name,
+          ...entry,
+          closeOnActivate: true,
+          onActivate: () => {
+            void this.#api.blocks.insert({
+              type: tool.name,
+              data: entry.data ?? {},
+              index: this.#selectedBlockIndex === -1 ? undefined : this.#selectedBlockIndex + 1,
+              focus: true,
+            });
+          },
+        }
+      );
+    }
   }
 
   /**

yarn.lock

@@ -2368,6 +2368,7 @@ __metadata:
     "@editorjs/collaboration-manager": "workspace:^"
     "@editorjs/core": "workspace:^"
     "@editorjs/dom-adapters": "workspace:^"
+    "@editorjs/header": "workspace:^"
     "@editorjs/model": "workspace:^"
     "@editorjs/sdk": "workspace:^"
     "@editorjs/ui": "workspace:*"
@@ -2440,14 +2441,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@editorjs/header@workspace:packages/tools/header":
+"@editorjs/header@workspace:^, @editorjs/header@workspace:packages/tools/header":
   version: 0.0.0-use.local
   resolution: "@editorjs/header@workspace:packages/tools/header"
   dependencies:
     "@codexteam/icons": "npm:^0.3.3"
     "@editorjs/dom-adapters": "workspace:^"
     "@editorjs/editorjs": "npm:^2.30.8"
-    "@editorjs/model": "workspace:^"
     "@editorjs/sdk": "workspace:^"
     "@jest/globals": "npm:^29.7.0"
     "@types/jest": "npm:^29.5.1"