chore(ui): components styles bootstrap (#100)

* styles bootstrap

* inject css

* Update tsconfig.json

Author: neSpecc

packages/ui/index.html

@@ -1,4 +1,6 @@
-<div id="editorjs"></div>
+<div class="page">
+  <div id="editorjs"></div>
+</div>
 
 <script type="module">
   import Core from '@editorjs/core';
@@ -28,5 +30,16 @@
   body, html {
     background-color: #222;
     color: #fff;
+    font-size: 16px;
+  }
+
+  .page {
+    max-width: 600px;
+    margin: 0 auto;
+    height: 100%;
+    padding: 100px;
+    display: flex;
+    font-size: 2rem;
+    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
   }
 </style>

packages/ui/package.json

@@ -26,8 +26,11 @@
   "devDependencies": {
     "eslint": "^9.9.1",
     "eslint-config-codex": "^2.0.2",
+    "postcss-apply": "^0.12.0",
+    "postcss-preset-env": "^10.1.5",
     "typescript": "^5.5.4",
     "vite": "^5.1.3",
+    "vite-plugin-css-injected-by-js": "^3.5.2",
     "vite-plugin-dts": "^3.7.3"
   },
   "dependencies": {

packages/ui/postcss.config.js

@@ -0,0 +1,9 @@
+/**
+ * PostCSS configuration
+ */
+export default {
+  plugins: {
+    'postcss-preset-env': {},
+    'postcss-apply': {},
+  },
+};

packages/ui/src/Blocks/Blocks.module.pcss

@@ -0,0 +1,3 @@
+.blocks {
+  outline: none;
+}

packages/ui/src/Blocks/Blocks.ts

@@ -7,6 +7,7 @@ import {
   CoreEventType,
   UiComponentType
 } from '@editorjs/core';
+import Style from './Blocks.module.pcss';
 
 /**
  * Editor's main UI renderer for HTML environment
@@ -20,10 +21,12 @@ export class BlocksUI implements EditorjsPlugin {
    */
   public static readonly type = UiComponentType.Blocks;
 
+
   /**
-   * Editor holder element
+   * Blocks holder element
    */
-  #holder: HTMLElement;
+  #blocksHolder: HTMLElement;
+
   /**
    * Elements of the blocks added to the editor
    */
@@ -39,8 +42,8 @@ export class BlocksUI implements EditorjsPlugin {
    * @param params - Plugin parameters
    */
   constructor(params: EditorjsPluginParams) {
-    this.#holder = params.config.holder;
     this.#eventBus = params.eventBus;
+    this.#blocksHolder = this.#prepareBlocksHolder(params.config.holder);
 
     this.#eventBus.addEventListener(`core:${CoreEventType.BlockAdded}`, (event: BlockAddedCoreEvent<HTMLElement>) => {
       const { ui, index } = event.detail;
@@ -54,7 +57,7 @@ export class BlocksUI implements EditorjsPlugin {
       this.#removeBlock(index);
     });
 
-    this.#holder.addEventListener('keydown', (e) => {
+    this.#blocksHolder.addEventListener('keydown', (e) => {
       if (e.code !== 'KeyZ') {
         return;
       }
@@ -72,24 +75,21 @@ export class BlocksUI implements EditorjsPlugin {
       this.#eventBus.dispatchEvent(new Event('core:undo'));
     });
 
-    this.#prepareBlocksHolder();
-  }
-
-  /**
-   * Renders the editor UI
-   */
-  public render(): void {
   }
 
   /**
    * Prepares blocks holder element
    */
-  #prepareBlocksHolder(): void {
+  #prepareBlocksHolder(editorHolder: HTMLElement): HTMLElement {
     const blocksHolder = document.createElement('div');
 
-    blocksHolder.classList.add('ejs-blocks-holder');
+    blocksHolder.classList.add(Style['blocks']);
+
+    blocksHolder.contentEditable = 'false';
+
+    editorHolder.appendChild(blocksHolder);
 
-    this.#holder.appendChild(blocksHolder);
+    return blocksHolder;
   }
 
   /**
@@ -104,7 +104,7 @@ export class BlocksUI implements EditorjsPlugin {
       this.#blocks[index].insertAdjacentElement('beforebegin', blockElement);
       this.#blocks.splice(index, 0, blockElement);
     } else {
-      this.#holder.appendChild(blockElement);
+      this.#blocksHolder.appendChild(blockElement);
       this.#blocks.push(blockElement);
     }
   }

packages/ui/src/InlineToolbar/InlineToolbar.module.pcss

@@ -0,0 +1,38 @@
+.inline-toolbar {
+  background: var(--color-bg);
+  transform: translateY(-100%);
+  font-size: var(--font-size-ui);
+  padding: var(--size-padding-toolbar);
+
+  button {
+    cursor: pointer;
+
+    &:hover {
+      opacity: 0.8;
+    }
+  }
+
+  button, input {
+    font-size: inherit;
+    background: var(--color-bg-secondary);
+    border: none;
+    outline: none;
+    color: inherit;
+    border-radius: var(--radius-control);
+  }
+
+  input {
+    padding: var(--size-padding-toolbar);
+  }
+  
+}
+
+.inline-toolbar-list {
+  display: flex;
+  flex-direction: row;
+  gap: var(--size-padding-toolbar);
+}
+
+.inline-toolbar-actions {
+  margin-top: var(--size-padding-toolbar);
+}

packages/ui/src/InlineToolbar/InlineToolbar.ts

@@ -11,6 +11,8 @@ import {
 } from '@editorjs/core';
 import type { InlineTool, InlineToolFormatData } from '@editorjs/sdk';
 import type { InlineFragment, InlineToolName, TextRange } from '@editorjs/model';
+import Style from './InlineToolbar.module.pcss';
+
 
 /**
  * Inline Toolbar UI module
@@ -95,18 +97,15 @@ export class InlineToolbarUI implements EditorjsPlugin {
    * Renders the Inline Toolbar UI HTML nodes
    */
   #render(): void {
-    this.#nodes.holder = make('div');
+    this.#nodes.holder = make('div', Style['inline-toolbar']);
 
     this.#nodes.holder.style.display = 'none';
     this.#nodes.holder.style.position = 'absolute';
 
-    this.#nodes.buttons = make('div');
-    this.#nodes.buttons.style.display = 'flex';
-
+    this.#nodes.buttons = make('div', Style['inline-toolbar-list']);
     this.#nodes.holder.appendChild(this.#nodes.buttons);
 
-    this.#nodes.actions = make('div');
-
+    this.#nodes.actions = make('div', Style['inline-toolbar-actions']);
     this.#nodes.holder.appendChild(this.#nodes.actions);
 
     this.#eventBus.dispatchEvent(new InlineToolbarRenderedUIEvent({ toolbar: this.#nodes.holder }));

packages/ui/src/index.ts

@@ -7,6 +7,7 @@ import {
 } from '@editorjs/core';
 import type { ToolboxRenderedUIEvent } from './Toolbox/ToolboxRenderedUIEvent.js';
 import type { InlineToolbarRenderedUIEvent } from './InlineToolbar/InlineToolbarRenderedUIEvent.js';
+import Style from './main.module.pcss';
 
 /**
  * EditorJS UI plugin
@@ -40,6 +41,8 @@ export class EditorjsUI implements EditorjsPlugin {
     this.#eventBus = params.eventBus;
     this.#holder = params.config.holder;
 
+    this.#holder.classList.add(Style['editor']);
+
     this.#eventBus.addEventListener(`ui:toolbox:rendered`, (event: ToolboxRenderedUIEvent) => {
       this.#addToolbox(event.detail.toolbox);
     });

packages/ui/src/main.module.pcss

@@ -0,0 +1,10 @@
+.editor {
+  --color-bg: #202020;
+  --color-bg-secondary:rgb(70, 70, 70);
+
+  --font-size-ui: 16px;
+  --size-padding-toolbar: 4px;
+  --radius-control: 4px;
+
+  width: 100%;
+}

packages/ui/src/types/css.d.ts

@@ -0,0 +1,4 @@
+declare module '*.pcss' {
+  const content: { [className: string]: string };
+  export default content;
+}