chore(ui,core,sdk,dom-adapters): dom-adapters depends on event bus

packages/core/package.json

@@ -5,7 +5,7 @@
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "scripts": {
-    "build": "tsc --build tsconfig.build.json",
+    "build": "yarn clear && tsc --build tsconfig.build.json",
     "dev": "yarn build --watch",
     "lint": "eslint ./src",
     "lint:ci": "yarn lint --max-warnings 0",

packages/core/src/components/BlockManager.ts

@@ -5,8 +5,8 @@ import { BlockToolAdapter, CaretAdapter, FormattingAdapter } from '@editorjs/dom
 import ToolsManager from '../tools/ToolsManager.js';
 import { BlockAPI, BlockToolData } from '@editorjs/editorjs';
 import { CoreConfigValidated } from '../entities/Config.js';
-import { BlockAddedCoreEvent, BlockRemovedCoreEvent, EventBus } from './EventBus/index.js';
-
+import { BlockAddedCoreEvent, BlockRemovedCoreEvent } from './EventBus/index.js';
+import { EventBus } from '@editorjs/sdk';
 /**
  * Parameters for the BlocksManager.insert() method
  */
@@ -164,6 +164,7 @@ export class BlocksManager {
     const blockToolAdapter = new BlockToolAdapter(
       this.#config,
       this.#model,
+      this.#eventBus,
       this.#caretAdapter,
       index.blockIndex,
       this.#formattingAdapter,

packages/core/src/components/EventBus/index.ts

@@ -1,43 +1,6 @@
-import 'reflect-metadata';
-import { Service } from 'typedi';
-
-export type Event<Channel extends string = string, Name extends string = string> = `${Channel}:${Name}`;
+import type { Event } from '@editorjs/sdk';
 
 export type CoreEvent<Name extends string = string> = Event<'core', Name>;
 
-/**
- * Extension for the EventTarget interface to allow for custom events.
- */
-declare global {
-  /**
-   * EventTarget interface extension
-   */
-  interface EventTarget {
-    /**
-     * Adds an event listener for the specified event type
-     * @param type - a string representing the event type to listen for
-     * @param callback - the function to call when the event is triggered
-     * @param options - an options object that specifies characteristics about the event listener
-     */
-    // eslint-disable-next-line n/no-unsupported-features/node-builtins
-    addEventListener(type: Event, callback: ((event: CustomEvent) => void) | null, options?: AddEventListenerOptions | boolean): void;
-    /**
-     * Removes an event listener for the specified event type
-     * @param type - a string representing the event type to stop listening for
-     * @param callback - the event callback to remove
-     * @param options - an options object that specifies characteristics about the event listener
-     */
-    // eslint-disable-next-line n/no-unsupported-features/node-builtins
-    removeEventListener(type: Event, callback: ((event: CustomEvent) => void) | null, options?: EventListenerOptions | boolean): void;
-  }
-}
-
-/**
- * EventBus class to handle events between components
- * Extends native EventTarget class
- */
-@Service()
-export class EventBus extends EventTarget {}
-
 export * from './core-events/index.js';
 export * from './ui-events/index.js';

packages/core/src/components/SelectionManager.ts

@@ -4,7 +4,8 @@ import type { CaretManagerEvents, InlineFragment, InlineToolName } from '@editor
 import { CaretManagerCaretUpdatedEvent, Index, EditorJSModel, createInlineToolData, createInlineToolName } from '@editorjs/model';
 import { EventType } from '@editorjs/model';
 import { Service } from 'typedi';
-import { CoreEventType, EventBus, ToolLoadedCoreEvent } from './EventBus/index.js';
+import { CoreEventType, ToolLoadedCoreEvent } from './EventBus/index.js';
+import { EventBus } from '@editorjs/sdk';
 import { SelectionChangedCoreEvent } from './EventBus/core-events/SelectionChangedCoreEvent.js';
 import { InlineTool, InlineToolFormatData } from '@editorjs/sdk';
 

packages/core/src/entities/EditorjsPlugin.ts

@@ -1,4 +1,4 @@
-import type { EventBus } from '../components/EventBus/index.js';
+import { EventBus } from '@editorjs/sdk';
 import type { CoreConfigValidated } from './Config.js';
 import type { EditorAPI } from '../api/index.js';
 

packages/core/src/entities/index.ts

@@ -1,4 +1,3 @@
 export * from './Config.js';
 export * from './UnifiedToolConfig.js';
 export * from './EditorjsPlugin.js';
-export * from './Ui.js';

packages/core/src/index.ts

@@ -2,7 +2,8 @@ import { CollaborationManager } from '@editorjs/collaboration-manager';
 import { EditorJSModel, EventType } from '@editorjs/model';
 import type { ContainerInstance } from 'typedi';
 import { Container } from 'typedi';
-import { CoreEventType, EventBus } from './components/EventBus/index.js';
+import { CoreEventType } from './components/EventBus/index.js';
+import { EventBus, UiComponentType } from '@editorjs/sdk';
 import { composeDataFromVersion2 } from './utils/composeDataFromVersion2.js';
 import ToolsManager from './tools/ToolsManager.js';
 import { CaretAdapter, FormattingAdapter } from '@editorjs/dom-adapters';
@@ -12,7 +13,6 @@ import { BlocksManager } from './components/BlockManager.js';
 import { SelectionManager } from './components/SelectionManager.js';
 import type { EditorjsPluginConstructor } from './entities/EditorjsPlugin.js';
 import { EditorAPI } from './api/index.js';
-import { UiComponentType } from './entities/Ui.js';
 import { generateId } from './utils/uid.js';
 
 /**
@@ -79,6 +79,9 @@ export default class Core {
 
     this.#iocContainer.set('EditorConfig', this.#config);
 
+    const eventBus = new EventBus();
+    this.#iocContainer.set(EventBus, eventBus);
+
     this.#model = new EditorJSModel();
     this.#iocContainer.set(EditorJSModel, this.#model);
 
@@ -103,8 +106,6 @@ export default class Core {
       });
     }
 
-    const eventBus = this.#iocContainer.get(EventBus);
-
     eventBus.addEventListener(`core:${CoreEventType.Undo}`, () => {
       this.#collaborationManager.undo();
     });

packages/core/src/tools/ToolsManager.ts

@@ -20,7 +20,8 @@ import type { UnifiedToolConfig } from '../entities/index.js';
 import BoldInlineTool from './internal/inline-tools/bold/index.js';
 import ItalicInlineTool from './internal/inline-tools/italic/index.js';
 import LinkInlineTool from './internal/inline-tools/link/index.js';
-import { EventBus, ToolLoadedCoreEvent } from '../components/EventBus/index.js';
+import { ToolLoadedCoreEvent } from '../components/EventBus/index.js';
+import { EventBus } from '@editorjs/sdk';
 
 /**
  * Works with tools

packages/dom-adapters/package.json

@@ -6,7 +6,7 @@
   "types": "dist/index.d.ts",
   "type": "module",
   "scripts": {
-    "build": "tsc --build tsconfig.build.json",
+    "build": "yarn clear && tsc --build tsconfig.build.json",
     "dev": "yarn build --watch",
     "lint": "eslint ./src",
     "lint:ci": "yarn lint --max-warnings 0",

packages/dom-adapters/src/BlockToolAdapter/index.ts

@@ -22,6 +22,7 @@ import {
 import { InputType } from './types/InputType.js';
 import type { BlockToolAdapter as BlockToolAdapterInterface, CoreConfig } from '@editorjs/sdk';
 import type { FormattingAdapter } from '../FormattingAdapter/index.js';
+import type { EventBus } from '@editorjs/sdk';
 
 /**
  * BlockToolAdapter is using inside Block tools to connect browser DOM elements to the model
@@ -64,12 +65,13 @@ export class BlockToolAdapter implements BlockToolAdapterInterface {
    *
    * @param config - Editor's config
    * @param model - EditorJSModel instance
+   * @param eventBus - Editor EventBus instance
    * @param caretAdapter - CaretAdapter instance
    * @param blockIndex - index of the block that this adapter is connected to
    * @param formattingAdapter - needed to render formatted text
    * @param toolName - tool name of the block
    */
-  constructor(config: CoreConfig, model: EditorJSModel, caretAdapter: CaretAdapter, blockIndex: number, formattingAdapter: FormattingAdapter, toolName: string) {
+  constructor(config: CoreConfig, model: EditorJSModel, eventBus: EventBus, caretAdapter: CaretAdapter, blockIndex: number, formattingAdapter: FormattingAdapter, toolName: string) {
     this.#config = config;
     this.#model = model;
     this.#blockIndex = blockIndex;

packages/dom-adapters/tsconfig.json

@@ -3,7 +3,7 @@
     "composite": true,
     "target": "esnext",
     "module": "esnext",
-    "moduleResolution": "Node",
+    "moduleResolution": "bundler",
     "esModuleInterop": true,
     "forceConsistentCasingInFileNames": true,
     "strict": true,
@@ -21,6 +21,6 @@
   "references": [
     {
       "path": "../sdk/tsconfig.build.json",
-    }
+    },
   ]
 }

packages/playground/tsconfig.json

@@ -29,9 +29,6 @@
     { 
       "path": "./tsconfig.node.json" 
     },
-    {
-      "path": "../ui/tsconfig.json"
-    },
     {
       "path": "../core/tsconfig.json"
     },

packages/playground/vite.config.ts

@@ -2,13 +2,25 @@ import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
 import path from 'node:path';
 
-
-// https://vitejs.dev/config/
 export default defineConfig({
   plugins: [vue()],
   resolve: {
     alias: {
       '@': path.resolve(__dirname, './src'),
     },
   },
+  optimizeDeps: {
+    exclude: [
+      '@editorjs/ui',
+      '@editorjs/core',
+    ]
+  },
+  build: {
+    rollupOptions: {
+      external: [
+        '@editorjs/ui',
+        '@editorjs/core',
+      ]
+    }
+  }
 })

packages/sdk/src/entities/EventBus/Event.ts

@@ -0,0 +1,10 @@
+export type Event<
+  /**
+   * Channel of the event
+   */
+  Channel extends string = string,
+  /**
+   * Name of the event
+   */
+  Name extends string = string
+> = `${Channel}:${Name}`;

packages/sdk/src/entities/EventBus/index.ts

@@ -0,0 +1,36 @@
+import type { Event } from './Event.js';
+
+/**
+ * Extension for the EventTarget interface to allow for custom events.
+ */
+declare global {
+  /**
+   * EventTarget interface extension
+   */
+  interface EventTarget {
+    /**
+     * Adds an event listener for the specified event type
+     * @param type - a string representing the event type to listen for
+     * @param callback - the function to call when the event is triggered
+     * @param options - an options object that specifies characteristics about the event listener
+     */
+    // eslint-disable-next-line n/no-unsupported-features/node-builtins
+    addEventListener(type: Event, callback: ((event: CustomEvent) => void) | null, options?: AddEventListenerOptions | boolean): void;
+    /**
+     * Removes an event listener for the specified event type
+     * @param type - a string representing the event type to stop listening for
+     * @param callback - the event callback to remove
+     * @param options - an options object that specifies characteristics about the event listener
+     */
+    // eslint-disable-next-line n/no-unsupported-features/node-builtins
+    removeEventListener(type: Event, callback: ((event: CustomEvent) => void) | null, options?: EventListenerOptions | boolean): void;
+  }
+}
+
+/**
+ * EventBus class to handle events between components
+ * Extends native EventTarget class
+ */
+export class EventBus extends EventTarget {}
+
+export * from './Event.js';

packages/sdk/src/entities/index.ts

@@ -2,3 +2,5 @@ export * from './InlineTool.js'
 export * from './BlockTool.js'
 export * from './Config.js'
 export * from './BlockToolAdapter.js'
+export * from './EventBus/index.js';
+export * from './Ui.js';

packages/sdk/tsconfig.json

@@ -3,14 +3,18 @@
     "composite": true,
     "target": "esnext",
     "module": "esnext",
-    "moduleResolution": "Node",
+    "moduleResolution": "bundler",
     "esModuleInterop": true,
     "forceConsistentCasingInFileNames": true,
     "strict": true,
     "skipLibCheck": true,
     "experimentalDecorators": true,
     "rootDir": "src",
-    "outDir": "dist"
+    "outDir": "dist",
+    "declaration": true,
+    "declarationMap": true,
+    "sourceMap": true,
+    "preserveConstEnums": true
   },
   "include": ["src/**/*"],
   "exclude": [

packages/ui/package.json

@@ -2,21 +2,22 @@
   "name": "@editorjs/ui",
   "packageManager": "[email protected]",
   "type": "module",
-  "main": "./dist/index.js",
-  "module": "./dist/index.js",
+  "main": "./dist/ui.cjs",
+  "module": "./dist/ui.js",
   "types": "./dist/index.d.ts",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
-      "import": "./dist/index.js",
-      "require": "./dist/index.js"
+      "import": "./dist/ui.js",
+      "require": "./dist/ui.cjs",
+      "default": "./dist/ui.js"
     }
   },
   "files": [
     "dist"
   ],
   "scripts": {
-    "build": "vite build",
+    "build": "yarn clear && vite build",
     "dev": "vite",
     "lint": "eslint ./src",
     "lint:ci": "yarn lint --max-warnings 0",

packages/ui/src/Blocks/BeforeInputUIEvent.ts

@@ -0,0 +1,42 @@
+import { UIEventBase } from '@editorjs/core';
+
+/**
+ * Name of the event
+ */
+export const BeforeInputUIEventName = 'ui:before-input';
+
+/**
+ * Payload of the BeforeInputUIEvent
+ * Contains InlineToolbar HTML element
+ */
+export interface BeforeInputUIEventPayload {
+  /**
+   * A string with the inserted characters.
+   * This may be an empty string if the change doesn't insert text
+   * (for example, when deleting characters).
+   */
+  data: string | null;
+
+  /**
+   * Same as 'beforeinput' event's inputType
+   */
+  inputType: string;
+
+  /**
+   * Same as 'beforeinput' event's isComposing
+   */
+  isComposing: boolean;
+}
+
+/**
+ * Class for event that is being fired after the inline toolbar is rendered
+ */
+export class BeforeInputUIEvent extends UIEventBase<BeforeInputUIEventPayload> {
+  /**
+   * ToolboxRenderedUIEvent constructor function
+   * @param payload - ToolboxRendered event payload
+   */
+  constructor(payload: BeforeInputUIEventPayload) {
+    super(BeforeInputUIEventName, payload);
+  }
+}