chore(ui): ui package bootstrapped

packages/core/src/entities/EditorjsPlugin.ts

@@ -0,0 +1,48 @@
+import type { EventBus } from '../components/EventBus/index.js';
+import type { CoreConfigValidated } from './Config.js';
+import type { EditorAPI } from '../api/index.js';
+
+/**
+ * Parameters for EditorjsPlugin constructor
+ */
+export interface EditorjsPluginParams {
+  /**
+   * EditorJS config
+   */
+  config: CoreConfigValidated;
+
+  /**
+   * EditorAPI instance
+   */
+  api: EditorAPI;
+
+  /**
+   * EventBus instance
+   */
+  eventBus: EventBus;
+}
+
+/**
+ * Base interface for UI plugins
+ */
+export interface EditorjsPlugin {
+  /**
+   * Destroy plugin instance
+   */
+  destroy?(): void;
+}
+
+/**
+ * Constructor type for EditorjsPlugin
+ */
+export interface EditorjsPluginConstructor {
+  /**
+   * Create new EditorjsPlugin instance
+   */
+  new (params: EditorjsPluginParams): EditorjsPlugin;
+
+  /**
+   * Plugin type
+   */
+  type: string;
+}

packages/core/src/entities/Ui.ts

@@ -0,0 +1,24 @@
+/**
+ * List of reserved UI component names
+ */
+export enum UiComponentType {
+  /**
+   * Main wrapper UI element
+   */
+  Shell = 'shell',
+
+  /**
+   * Blocks wrapper
+   */
+  Blocks = 'blocks',
+
+  /**
+   * Inline toolbar wrapper
+   */
+  InlineToolbar = 'inline-toolbar',
+
+  /**
+   * Toolbox wrapper
+   */
+  Toolbox = 'toolbox'
+}

packages/core/src/entities/index.ts

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

packages/core/src/index.ts

@@ -7,10 +7,11 @@ import { CaretAdapter, FormattingAdapter } from '@editorjs/dom-adapters';
 import type { CoreConfigValidated } from './entities/Config.js';
 import type { CoreConfig } from '@editorjs/sdk';
 import { BlocksManager } from './components/BlockManager.js';
-import { EditorUI } from './ui/Editor/index.js';
-import { ToolboxUI } from './ui/Toolbox/index.js';
-import { InlineToolbarUI } from './ui/InlineToolbar/index.js';
 import { SelectionManager } from './components/SelectionManager.js';
+import { EventBus } from './components/EventBus/index.js';
+import type { EditorjsPluginConstructor } from './entities/EditorjsPlugin.js';
+import { EditorAPI } from './api/index.js';
+import { UiComponentType } from './entities/Ui.js';
 
 /**
  * If no holder is provided via config, the editor will be appended to the element with this id
@@ -23,7 +24,6 @@ const DEFAULT_HOLDER_ID = 'editorjs';
  * - subscribes to model updates
  * - creates Adapters for Tools
  * - creates Tools
- * - adds Blocks accodring to model updates
  */
 export default class Core {
   /**
@@ -71,10 +71,7 @@ export default class Core {
 
     this.#iocContainer.set('EditorConfig', this.#config);
 
-    const { blocks } = composeDataFromVersion2(config.data ?? { blocks: [] });
-
     this.#model = new EditorJSModel();
-
     this.#iocContainer.set(EditorJSModel, this.#model);
 
     this.#toolsManager = this.#iocContainer.get(ToolsManager);
@@ -92,8 +89,27 @@ export default class Core {
         config.onModelUpdate?.(this.#model);
       });
     }
+  }
+
+  /**
+   * Initialize and injects Plugin into the container
+   * @param plugin - allows to pass any implementation of editor plugins
+   */
+  public use(plugin: EditorjsPluginConstructor): Core {
+    const pluginType = plugin.type;
+
+    this.#iocContainer.set(pluginType, plugin);
+
+    return this;
+  }
+
+  /**
+   * Initializes the core
+   */
+  public initialize(): void {
+    const { blocks } = composeDataFromVersion2(this.#config.data ?? { blocks: [] });
 
-    this.#prepareUI();
+    this.initializePlugins();
 
     this.#toolsManager.prepareTools()
       .then(() => {
@@ -105,15 +121,36 @@ export default class Core {
   }
 
   /**
-   * Renders Editor`s UI
+   * Initialize all registered UI plugins
    */
-  #prepareUI(): void {
-    const editorUI = this.#iocContainer.get(EditorUI);
+  private initializePlugins(): void {
+    /**
+     * Get all registered plugin types from the container
+     */
+    const pluginTypes = Object.values(UiComponentType) as string[];
+
+    for (const pluginType of pluginTypes) {
+      const plugin = this.#iocContainer.get<EditorjsPluginConstructor>(pluginType);
 
-    this.#iocContainer.get(ToolboxUI);
-    this.#iocContainer.get(InlineToolbarUI);
+      if (plugin !== undefined && typeof plugin === 'function') {
+        this.initializePlugin(plugin);
+      }
+    }
+  }
 
-    editorUI.render();
+  /**
+   * Create instance of plugin
+   * @param plugin - Plugin constructor to initialize
+   */
+  private initializePlugin(plugin: EditorjsPluginConstructor): void {
+    const eventBus = this.#iocContainer.get(EventBus);
+    const api = this.#iocContainer.get(EditorAPI);
+
+    new plugin({
+      config: this.#config,
+      api,
+      eventBus,
+    });
   }
 
   /**
@@ -147,4 +184,10 @@ export default class Core {
   }
 }
 
+/**
+ * @todo move to "sdk" package
+ */
 export * from './entities/index.js';
+export * from './components/EventBus/index.js';
+export * from './api/index.js';
+export * from './tools/facades/index.js';

packages/core/tsconfig.json

@@ -3,7 +3,7 @@
     "composite": true,
     "target": "esnext",
     "module": "esnext",
-    "moduleResolution": "Node",
+    "moduleResolution": "bundler",
     "esModuleInterop": true,
     "forceConsistentCasingInFileNames": true,
     "strict": true,
@@ -12,7 +12,10 @@
     "emitDecoratorMetadata": true,
     "types": ["jest"],
     "rootDir": "src",
-    "outDir": "dist"
+    "outDir": "dist",
+    "declaration": true,
+    "declarationMap": true,
+    "sourceMap": true
   },
   "include": ["src/**/*"],
   "exclude": [

packages/playground/package.json

@@ -14,9 +14,10 @@
     "lint:fix": "yarn lint --fix"
   },
   "dependencies": {
-    "@editorjs/core": "workspace:^",
+    "@editorjs/core": "workspace:*",
     "@editorjs/dom-adapters": "workspace:^",
     "@editorjs/model": "workspace:^",
+    "@editorjs/ui": "workspace:*",
     "vue": "^3.3.4"
   },
   "devDependencies": {

packages/playground/src/App.vue

@@ -3,7 +3,7 @@ import { EditorDocument, EditorJSModel } from '@editorjs/model';
 import Core from '@editorjs/core';
 import { ref, onMounted } from 'vue';
 import { Node } from './components';
-
+import { EditorjsUI, BlocksUI, InlineToolbarUI, ToolboxUI } from '@editorjs/ui';
 /**
  * Editor document for visualizing
  */
@@ -20,7 +20,7 @@ const serialized = ref<EditorDocument['serialized'] | null>(null);
  */
 
 onMounted(() => {
-  new Core({
+  const core = new Core({
     holder: document.getElementById('editorjs') as HTMLElement,
     data: {
       blocks: [ {
@@ -35,6 +35,13 @@ onMounted(() => {
       editorDocument.value = model.devModeGetDocument();
     },
   });
+
+  core
+    .use(EditorjsUI)
+    .use(BlocksUI)
+    .use(InlineToolbarUI)
+    .use(ToolboxUI)
+    .initialize();
 });
 
 </script>

packages/playground/tsconfig.eslint.json

@@ -2,5 +2,10 @@
   "extends": "./tsconfig.json",
   "include": [
     ".eslintrc.cjs"
+  ],
+  "references": [
+    {
+      "path": "../ui/tsconfig.json"
+    }
   ]
 }

packages/playground/tsconfig.json

@@ -28,6 +28,12 @@
   "references": [
     { 
       "path": "./tsconfig.node.json" 
+    },
+    {
+      "path": "../ui/tsconfig.json"
+    },
+    {
+      "path": "../core/tsconfig.json"
     }
   ]
 }

packages/ui/.gitignore

@@ -0,0 +1,24 @@
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/sdks
+!.yarn/versions
+
+# Swap the comments on the following lines if you don't wish to use zero-installs
+# Documentation here: https://yarnpkg.com/features/zero-installs
+#!.yarn/cache
+#.pnp.*
+
+# IDE
+.idea/*
+
+node_modules/*
+dist/*
+
+# tests
+coverage/
+reports/
+
+# stryker temp files
+.stryker-tmp

packages/ui/README.md

@@ -0,0 +1,3 @@
+# @editorjs/ui
+
+Contains in-box EditorJs UI components implementation

packages/ui/eslint.config.mjs

@@ -0,0 +1,26 @@
+import CodeX from 'eslint-config-codex';
+
+export default [
+  ...CodeX,
+
+  {
+    /**
+     * Override path to the tsconfig.json file.
+     */
+    languageOptions: {
+      parserOptions: {
+        project: './tsconfig.json',
+        tsconfigRootDir: './',
+        sourceType: 'module',
+      },
+    },
+    rules: {
+      'n/no-unpublished-import': ['error', {
+        allowModules: [
+          'eslint-config-codex',
+        ],
+        ignoreTypeImport: true,
+      }],
+    },
+  },
+];

packages/ui/index.html

@@ -0,0 +1,32 @@
+<div id="editorjs"></div>
+
+<script type="module">
+  import Core from '@editorjs/core';
+  import { EditorjsUI, BlocksUI, InlineToolbarUI, ToolboxUI } from './src/index.ts';
+
+  const core = new Core({
+    holder: document.getElementById('editorjs'),
+    data: {
+      blocks: [ {
+        type: 'paragraph',
+        data: {
+          text: 'Hello, <b>World</b>!',
+        },
+      } ],
+    },
+  });
+
+  core
+    .use(EditorjsUI)
+    .use(BlocksUI)
+    .use(InlineToolbarUI)
+    .use(ToolboxUI)
+    .initialize();
+</script>
+
+<style>
+  body, html {
+    background-color: #222;
+    color: #fff;
+  }
+</style>