Merge branch 'codex-team:next' into next

Author: GuillaumeOnepilot

README.md

@@ -116,14 +116,17 @@ Take a look at the [example.html](example/example.html) to view more detailed ex
 
 <img align="right" width="342" src="./assets/roadmap.png" style="margin-left: 30px">
 
-- Unified Toolbox
+- Unified Toolbars
   - [x] Block Tunes moved left
   - [x] Toolbox becomes vertical
   - [x] Ability to display several Toolbox buttons by the single Tool
   - [x] Block Tunes become vertical
-  - [ ] Block Tunes support nested menus
-  - [ ] Conversion Toolbar uses Unified Toolbox
-  - [ ] Conversion Toolbar added to the Block Tunes
+  - [x] Block Tunes support nested menus
+  - [x] Block Tunes support separators 
+  - [x] Conversion Menu added to the Block Tunes
+  - [x] Unified Toolbar supports hints 
+  - [x] Conversion Toolbar uses Unified Toolbar
+  - [x] Inline Toolbar uses Unified Toolbar
 - Collaborative editing
   - [ ] Implement Inline Tools JSON format
   - [ ] Operations Observer, Executor, Manager, Transformer

docs/CHANGELOG.md

@@ -1,11 +1,33 @@
 # Changelog
 
+### 2.30.1
+
+- `Fix` – Remove fake selection after multiple "convert to" inline tool toggles
+
 ### 2.30.0
 
 - `New` – Block Tunes now supports nesting items
 - `New` – Block Tunes now supports separator items
+- `New` – *Menu Config* – New item type – HTML
+– `New` – *Menu Config* – Default and HTML items now support hints
+- `New` – Inline Toolbar has new look 💅
+- `New` – Inline Tool's `render()` now supports [Menu Config](https://editorjs.io/menu-config/) format
+- `New` – *ToolsAPI* – All installed block tools now accessible via ToolsAPI `getBlockTools()` method
+- `New` – *SelectionAPI* – Exposed methods `save()` and `restore()` that allow to save selection to be able to temporally move focus away, methods `setFakeBackground()` and `removeFakeBackground()` that allow to immitate selection while focus moved away
+- `New` – *BlocksAPI* – Exposed `getBlockByElement()` method that helps find block by any child html element
 - `New` – "Convert to" control is now also available in Block Tunes
+- `New` — Editor.js now supports contenteditable placeholders out of the box. Just add `data-placeholder` or `data-placeholder-active` attribute to make it work. The first one will work like native placeholder while the second one will show placeholder only when block is current.
+- `Improvement` — Now Paragraph placeholder will be shown for the current paragraph, not only the first one.
+- `Improvment` - The API `blocks.update` now accepts `tunes` data as optional third argument and makes `data` - block data as optional.
 - `Improvement` — The ability to merge blocks of different types (if both tools provide the conversionConfig)
+- `Improvement` - The API `blocks.convert()` now returns the new block API
+- `Improvement` - The API `caret.setToBlock()` now can accept either BlockAPI or block index or block id
+- `Impovement` – *MenuConfig* – `TunesMenuConfig` type is deprecated, use the `MenuConfig` instead
+– `Improvement` — *Types* — `BlockToolConstructorOptions` type improved, `block` and `config` are not optional anymore
+- `Improvement` - The Plus button and Block Tunes toggler are now better aligned with large line-height blocks, such as Headings
+- `Improvement` — Creating links on Android devices: now the mobile keyboard will have an "Enter" key for accepting the inserted link.
+- `Improvement` — Placeholders will stay visible on inputs focus.
+– `Refactoring` – Switched to Vite as Cypress bundler
 - `Fix` — `onChange` will be called when removing the entire text within a descendant element of a block.
 - `Fix` - Unexpected new line on Enter press with selected block without caret
 - `Fix` - Search input autofocus loosing after Block Tunes opening
@@ -14,20 +36,8 @@
 - `Fix` - Unwanted soft line break on Enter press after period and space (". |") on iOS devices
 - `Fix` - Caret lost after block conversion on mobile devices.
 - `Fix` - Caret lost after Backspace at the start of block when previoius block is not convertable
-- `Improvement` - The API `blocks.convert()` now returns the new block API
-- `Improvement` - The API `caret.setToBlock()` now can accept either BlockAPI or block index or block id
-- `New` – *Menu Config* – New item type – HTML
-– `Refactoring` – Switched to Vite as Cypress bundler
-– `New` – *Menu Config* – Default and HTML items now support hints
-- `New` – Inline Toolbar has new look 💅
-- `New` – Inline Tool's `render()` now supports [Menu Config](https://editorjs.io/menu-config/) format
-- `New` – *ToolsAPI* – All installed block tools now accessible via ToolsAPI `getBlockTools()` method
-- `New` – *SelectionAPI* – Exposed methods `save()` and `restore()` that allow to save selection to be able to temporally move focus away, methods `setFakeBackground()` and `removeFakeBackground()` that allow to immitate selection while focus moved away
-- `Impovement` – *MenuConfig* – TunesMenuConfig deprecated, use MenuConfig type instead
-- `New` – *BlocksAPI* – Exposed `getBlockByElement()` method that helps find block by any child html element
 – `Fix` — Deleting whitespaces at the start/end of the block
-– `Improvement` — *Types* — `BlockToolConstructorOptions` type improved, `block` and `config` are not optional anymore
-- `Improvement` - The Plus button and Block Tunes toggler are now better aligned with large line-height blocks, such as Headings
+- `Fix` — The problem caused by missed "import type" in block mutation event types resolved
 
 ### 2.29.1
 

docs/api.md

@@ -79,7 +79,7 @@ use 'move' instead)
 
 `insert(type?: string, data?: BlockToolData, config?: ToolConfig, index?: number, needToFocus?: boolean)` - insert new Block with passed parameters
 
-`update(id: string, data: BlockToolData)` - updates data for the block with passed id
+`update(id: string, data?: BlockToolData, tunes?: {[name: string]: BlockTuneData})` - updates block data and block tunes for the block with passed id
 
 #### SanitizerAPI
 

index.html

@@ -203,6 +203,9 @@
        */
       // defaultBlock: 'paragraph',
 
+      placeholder: 'Write something or press / to select a tool',
+      autofocus: true,
+
       /**
        * Initial Editor data
        */

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@editorjs/editorjs",
-  "version": "2.30.0-rc.13",
-  "description": "Editor.js — Native JS, based on API and Open Source",
+  "version": "2.30.1",
+  "description": "Editor.js — open source block-style WYSIWYG editor with JSON output",
   "main": "dist/editorjs.umd.js",
   "module": "dist/editorjs.mjs",
   "types": "./types/index.d.ts",
@@ -10,7 +10,8 @@
     "text editor",
     "editor",
     "editor.js",
-    "editorjs"
+    "editorjs",
+    "wysiwyg"
   ],
   "scripts": {
     "dev": "vite",
@@ -45,7 +46,7 @@
     "@editorjs/code": "^2.7.0",
     "@editorjs/delimiter": "^1.2.0",
     "@editorjs/header": "^2.7.0",
-    "@editorjs/paragraph": "^2.11.4",
+    "@editorjs/paragraph": "^2.11.6",
     "@editorjs/simple-image": "^1.4.1",
     "@types/node": "^18.15.11",
     "chai-subset": "^1.6.0",

src/components/block/index.ts

@@ -10,7 +10,7 @@ import {
 } from '../../../types';
 
 import { SavedData } from '../../../types/data-formats';
-import $ from '../dom';
+import $, { toggleEmptyMark } from '../dom';
 import * as _ from '../utils';
 import ApiModules from '../modules/api';
 import BlockAPI from './api';
@@ -183,11 +183,6 @@ export default class Block extends EventsDispatcher<BlockEvents> {
    */
   private unavailableTunesData: { [name: string]: BlockTuneData } = {};
 
-  /**
-   * Editor`s API module
-   */
-  private readonly api: ApiModules;
-
   /**
    * Focused input index
    *
@@ -223,7 +218,6 @@ export default class Block extends EventsDispatcher<BlockEvents> {
     id = _.generateBlockId(),
     data,
     tool,
-    api,
     readOnly,
     tunesData,
   }: BlockConstructorOptions, eventBus?: EventsDispatcher<EditorEventMap>) {
@@ -232,7 +226,6 @@ export default class Block extends EventsDispatcher<BlockEvents> {
     this.id = id;
     this.settings = tool.settings;
     this.config = tool.settings.config || {};
-    this.api = api;
     this.editorEventBus = eventBus || null;
     this.blockAPI = new BlockAPI(this);
 
@@ -262,6 +255,12 @@ export default class Block extends EventsDispatcher<BlockEvents> {
        * so we need to track focus events to update current input and clear cache.
        */
       this.addInputEvents();
+
+      /**
+       * We mark inputs with [data-empty] attribute
+       * It can be useful for developers, for example for correct placeholder behavior
+       */
+      this.toggleInputsEmptyMark();
     });
   }
 
@@ -938,6 +937,11 @@ export default class Block extends EventsDispatcher<BlockEvents> {
      */
     this.updateCurrentInput();
 
+    /**
+     * We mark inputs with 'data-empty' attribute, so new inputs should be marked as well
+     */
+    this.toggleInputsEmptyMark();
+
     this.call(BlockToolAPI.UPDATED);
 
     /**
@@ -1000,4 +1004,11 @@ export default class Block extends EventsDispatcher<BlockEvents> {
   private dropInputsCache(): void {
     this.cachedInputs = [];
   }
+
+  /**
+   * Mark inputs with 'data-empty' attribute with the empty state
+   */
+  private toggleInputsEmptyMark(): void {
+    this.inputs.forEach(toggleEmptyMark);
+  }
 }

src/components/dom.ts

@@ -662,3 +662,13 @@ export function calculateBaseline(element: Element): number {
 
   return baselineY;
 }
+
+/**
+ * Toggles the [data-empty] attribute on element depending on its emptiness
+ * Used to mark empty inputs with a special attribute for placeholders feature
+ *
+ * @param element - The element to toggle the [data-empty] attribute on
+ */
+export function toggleEmptyMark(element: HTMLElement): void {
+  element.dataset.empty = Dom.isEmpty(element) ? 'true' : 'false';
+}

src/components/inline-tools/inline-tool-convert.ts

@@ -1,6 +1,6 @@
 import { IconReplace } from '@codexteam/icons';
 import { InlineTool, API } from '../../../types';
-import { MenuConfig } from '../../../types/tools';
+import { MenuConfig, MenuConfigItem } from '../../../types/tools';
 import * as _ from '../utils';
 import { Blocks, Selection, Tools, I18n, Caret } from '../../../types/api';
 import SelectionUtils from '../selection';
@@ -57,15 +57,20 @@ export default class ConvertInlineTool implements InlineTool {
   public async render(): Promise<MenuConfig> {
     const currentSelection = SelectionUtils.get();
     const currentBlock = this.blocksAPI.getBlockByElement(currentSelection.anchorNode as HTMLElement);
+
+    if (currentBlock === undefined) {
+      return [];
+    }
+
     const allBlockTools = this.toolsAPI.getBlockTools();
     const convertibleTools = await getConvertibleToolsForBlock(currentBlock, allBlockTools);
 
     if (convertibleTools.length === 0) {
       return [];
     }
 
-    const convertToItems = convertibleTools.reduce((result, tool) => {
-      tool.toolbox.forEach((toolboxItem) => {
+    const convertToItems = convertibleTools.reduce<MenuConfigItem[]>((result, tool) => {
+      tool.toolbox?.forEach((toolboxItem) => {
         result.push({
           icon: toolboxItem.icon,
           title: toolboxItem.title,

src/components/inline-tools/inline-tool-link.ts

@@ -134,6 +134,7 @@ export default class LinkInlineTool implements InlineTool {
   public renderActions(): HTMLElement {
     this.nodes.input = document.createElement('input') as HTMLInputElement;
     this.nodes.input.placeholder = this.i18n.t('Add a link');
+    this.nodes.input.enterKeyHint = 'done';
     this.nodes.input.classList.add(this.CSS.input);
     this.nodes.input.addEventListener('keydown', (event: KeyboardEvent) => {
       if (event.keyCode === this.ENTER_KEY) {

src/components/modules/api/blocks.ts

@@ -4,7 +4,8 @@ import * as _ from './../../utils';
 import BlockAPI from '../../block/api';
 import Module from '../../__module';
 import Block from '../../block';
-import { capitalize } from './../../utils';
+import { capitalize } from '../../utils';
+import { BlockTuneData } from '../../../../types/block-tunes/block-tune-data';
 
 /**
  * @class BlocksAPI
@@ -320,17 +321,18 @@ export default class BlocksAPI extends Module {
    * Updates block data by id
    *
    * @param id - id of the block to update
-   * @param data - the new data
+   * @param data - (optional) the new data
+   * @param tunes - (optional) tune data
    */
-  public update = async (id: string, data: Partial<BlockToolData>): Promise<BlockAPIInterface> => {
+  public update = async (id: string, data?: Partial<BlockToolData>, tunes?: {[name: string]: BlockTuneData}): Promise<BlockAPIInterface> => {
     const { BlockManager } = this.Editor;
     const block = BlockManager.getBlockById(id);
 
     if (block === undefined) {
       throw new Error(`Block with id "${id}" not found`);
     }
 
-    const updatedBlock = await BlockManager.update(block, data);
+    const updatedBlock = await BlockManager.update(block, data, tunes);
 
     // we cast to any because our BlockAPI has no "new" signature
     // eslint-disable-next-line @typescript-eslint/no-explicit-any