[Release] Version 2.15 (codex-team#826)

README.md

@@ -157,7 +157,7 @@ Copy [editor.js](build/editor.js) file to your project and load it.
 
 ## Load Tools
 
-Each Block at the Editor.js represented by [Tools](docs/tools.md). There are simple external scripts with own logic. Probably you want to use several Block Tools that should be connected.
+Each Block at the Editor.js is represented by [Tools](docs/tools.md). There are simple external scripts with their own logic. Probably you want to use several Block Tools that should be connected.
 
 For example check out our [Header](https://github.com/editor-js/header) Tool that represents heading blocks.
 

docs/CHANGELOG.md

@@ -1,5 +1,19 @@
 # Changelog
 
+### 2.15
+
+- `New` — New [`blocks.insert()`](api.md) API method [#715](https://github.com/codex-team/editor.js/issues/715).  
+- `New` *Conversion Toolbar* — Ability to convert one block to another [#704](https://github.com/codex-team/editor.js/issues/704)
+- `New` *Cross-block selection* — Ability to select multiple blocks by mouse and with SHIFT+ARROWS [#703](https://github.com/codex-team/editor.js/issues/703)
+- `Deprecated` — [`blocks.insertNewBlock()`](api.md) method is deprecated. Use `blocks.insert()` instead.  
+- `Improvements` — Inline Toolbar now works on mobile devices [#706](https://github.com/codex-team/editor.js/issues/706)
+- `Improvements` — Toolbar looks better on mobile devices [#706](https://github.com/codex-team/editor.js/issues/706)
+- `Improvements` — Now `pasteConfig` can return `false` to disable paste handling on your Tool [#801](https://github.com/codex-team/editor.js/issues/801)
+- `Fix` — EditorConfig's `onChange` callback now fires when native inputs\` content has been changed [#794](https://github.com/codex-team/editor.js/issues/794)
+- `Fix` — Resolve bug with deleting leading new lines [#726](https://github.com/codex-team/editor.js/issues/726)
+- `Fix` — Fix inline link Tool to support different link types like `mailto` and `tel` [#809](https://github.com/codex-team/editor.js/issues/809)
+- `Fix` — Added `typeof` util method to check exact object type [#805](https://github.com/codex-team/editor.js/issues/805)
+- `Fix` — Remove internal `enableLineBreaks` option from external Tool settings type description [#825](https://github.com/codex-team/editor.js/pull/825)
 
 ### 2.14
 

docs/api.md

@@ -38,7 +38,9 @@ Methods that working with Blocks
 
 `stretchBlock(index: number, status: boolean)` - make Block stretched
 
-`insertNewBlock()` - insert new Block after working place
+`insertNewBlock()` - __Deprecated__ insert new Block after working place 
+
+`insert(type?: string, data?: BlockToolData, config?: ToolConfig, index?: number, needToFocus?: boolean)` - insert new Block with passed parameters
 
 #### SanitizerAPI
 

docs/tools.md

@@ -58,6 +58,8 @@ Options that Tool can specify. All settings should be passed as static propertie
 | `toolbox` | _Object_ | `undefined` | Pass here `icon` and `title` to display this `Tool` in the Editor's `Toolbox` <br /> `icon` - HTML string with icon for Toolbox <br /> `title` - optional title to display in Toolbox |
 | `enableLineBreaks` | _Boolean_ | `false` | With this option, Editor.js won't handle Enter keydowns. Can be helpful for Tools like `<code>` where line breaks should be handled by default behaviour. |
 | `isInline` | _Boolean_ | `false` | Describes Tool as a [Tool for the Inline Toolbar](tools-inline.md) |
+| `sanitize` | _Object_ | `undefined` | Config for automatic sanitizing of saved data. See [Sanitize](#sanitize) section. |
+| `conversionConfig` | _Object_ | `undefined` | Config allows Tool to specify how it can be converted into/from another Tool. See [Conversion config](#conversion-config) section. |
 
 ## User configuration
 
@@ -224,7 +226,18 @@ onPaste (event) {
 }
 ```
 
-## Sanitize
+### Disable paste handling
+
+If you need to disable paste handling on your Tool for some reason, you can provide `false` as `pasteConfig` value. 
+That way paste event won't be processed if fired on your Tool:
+
+```javascript
+static get pasteConfig {
+  return false;
+}
+```  
+
+## Sanitize <a name="sanitize"></a>
 
 Editor.js provides [API](sanitizer.md) to clean taint strings.
 Use it manually at the `save()` method or or pass `sanitizer` config to do it automatically.
@@ -341,4 +354,111 @@ static get sanitize() {
 }
 ```
 
+## Conversion config <a name="conversion-config"></a>
+
+Editor.js has a Conversion Toolbar that allows user to convert one Block to another.
+
+![](https://capella.pics/6c1f708b-a30c-4ffd-a427-5b59a1a472e0.jpg)
+
+1. You can add ability to your Tool to be converted. Specify «export» property of `conversionConfig`.
+2. You can add ability to convert other Tools to your Tool. Specify «import» property of `conversionConfig`.
+
+Conversion Toolbar will be shown only near Blocks that specified an «export» rule, when user selected almost all block's content.
+This Toolbar will contain only Tools that specified an «import» rule. 
+
+Example:
+
+```js
+class Header {
+  constructor(){
+    this.data = {
+       text: '',
+       level: 2
+    }
+  }
+
+  /**
+   * Rules specified how our Tool can be converted to/from other Tool.
+   */
+  static get conversionConfig() {
+    return {
+      export: 'text', // this property of tool data will be used as string to pass to other tool
+      import: 'text' // to this property imported string will be passed
+    };
+  }
+}
+```
+
+### Your Tool -> other Tool
+
+The «export» field specifies how to represent your Tool's data as a string to pass it to other tool. 
+
+It can be a `String` or a `Function`.
+
+`String` means a key of your Tool data object that should be used as string to export. 
+
+`Function` is a method that accepts your Tool data and compose a string to export from it. See example below:
+
+```js
+class ListTool {
+  constructor(){
+    this.data = {
+      items: [
+        'Fisrt item',
+        'Second item',
+        'Third item'
+      ],
+      type: 'ordered'
+    }
+  }
+
+  static get conversionConfig() {
+    return {
+      export: (data) => {
+        return data.items.join('.'); // in this example, all list items will be concatenated to an export string
+      },
+      // ... import rule
+    };
+  }
+}
+```
+
+### Other Tool -> your Tool
+
+The «import» rule specifies how to create your Tool's data object from the string created by original block. 
 
+It can be a `String` or a `Function`. 
+
+`String` means the key in tool data that will be filled by an exported string. 
+For example, `import: 'text'` means that `constructor` of your block will accept a `data` object with `text` property filled with string composed by original block.
+
+`Function` allows you to specify own logic, how a string should be converted to your tool data. For example:
+
+```js
+class ListTool {
+  constructor(data){
+    this.data = data || {
+      items: [],
+      type: 'unordered'
+    }
+  }
+
+  static get conversionConfig() {
+    return {
+      // ... export rule 
+
+      /**
+       * In this example, List Tool creates items by splitting original text by a dot symbol. 
+       */
+      import: (string) => {
+        const items = string.split('.');
+
+        return {
+          items: items.filter( (text) => text.trim() !== ''),
+          type: 'unordered'
+        };
+      }
+    };
+  }
+}
+```

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@editorjs/editorjs",
-  "version": "2.14.0",
+  "version": "2.15.0",
   "description": "Editor.js — Native JS, based on API and Open Source",
   "main": "dist/editor.js",
   "types": "./types/index.d.ts",

src/components/block.ts

@@ -162,13 +162,13 @@ export default class Block {
 
   /**
    * Returns Plugins content
-   * @return {Node}
+   * @return {HTMLElement}
    */
-  get pluginsContent(): Node {
+  get pluginsContent(): HTMLElement {
     const pluginsContent = this.holder.querySelector(`.${Block.CSS.content}`);
 
     if (pluginsContent && pluginsContent.childNodes.length) {
-      return pluginsContent.childNodes[0];
+      return pluginsContent.childNodes[0] as HTMLElement;
     }
 
     return null;

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

@@ -56,7 +56,7 @@ export default class BoldInlineTool implements InlineTool {
     this.nodes.button = document.createElement('button') as HTMLButtonElement;
     this.nodes.button.type = 'button';
     this.nodes.button.classList.add(this.CSS.button, this.CSS.buttonModifier);
-    this.nodes.button.appendChild($.svg('bold', 13, 15));
+    this.nodes.button.appendChild($.svg('bold', 12, 14));
     return this.nodes.button;
   }
 

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

@@ -56,7 +56,7 @@ export default class ItalicInlineTool implements InlineTool {
     this.nodes.button = document.createElement('button') as HTMLButtonElement;
     this.nodes.button.type = 'button';
     this.nodes.button.classList.add(this.CSS.button, this.CSS.buttonModifier);
-    this.nodes.button.appendChild($.svg('italic', 6, 15));
+    this.nodes.button.appendChild($.svg('italic', 34, 34));
     return this.nodes.button;
   }
 

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

@@ -112,7 +112,7 @@ export default class LinkInlineTool implements InlineTool {
     this.nodes.button = document.createElement('button') as HTMLButtonElement;
     this.nodes.button.type = 'button';
     this.nodes.button.classList.add(this.CSS.button, this.CSS.buttonModifier);
-    this.nodes.button.appendChild($.svg('link', 15, 14));
+    this.nodes.button.appendChild($.svg('link', 34, 34));
     this.nodes.button.appendChild($.svg('unlink', 16, 18));
     return this.nodes.button;
   }
@@ -330,7 +330,7 @@ export default class LinkInlineTool implements InlineTool {
     /**
      * If protocol already exists, do nothing
      */
-    if (/^(\w+):\/\//.test(link)) {
+    if (/^(\w+):(\/\/)?/.test(link)) {
       return link;
     }
 

src/components/modules/api/blocks.ts

@@ -1,9 +1,8 @@
 import Module from '../../__module';
 
 import {Blocks} from '../../../../types/api';
-import {OutputData} from '../../../../types';
-import Block from '../../block';
-import {ModuleConfig} from '../../../types-internal/module-config';
+import {BlockToolData, OutputData, ToolConfig} from '../../../../types';
+import _ from './../../utils';
 
 /**
  * @class BlocksAPI
@@ -26,6 +25,7 @@ export default class BlocksAPI extends Module {
       getBlocksCount: () => this.getBlocksCount(),
       stretchBlock: (index: number, status: boolean = true) => this.stretchBlock(index, status),
       insertNewBlock: () => this.insertNewBlock(),
+      insert: this.insert,
     };
   }
 
@@ -140,12 +140,42 @@ export default class BlocksAPI extends Module {
     block.stretched = status;
   }
 
+  /**
+   * Insert new Block
+   *
+   * @param {string} type — Tool name
+   * @param {BlockToolData} data — Tool data to insert
+   * @param {ToolConfig} config — Tool config
+   * @param {number?} index — index where to insert new Block
+   * @param {boolean?} needToFocus - flag to focus inserted Block
+   */
+  public insert = (
+    type: string = this.config.initialBlock,
+    data: BlockToolData = {},
+    config: ToolConfig = {},
+    index?: number,
+    needToFocus?: boolean,
+  ): void => {
+    this.Editor.BlockManager.insert(
+      type,
+      data,
+      config,
+      index,
+      needToFocus,
+    );
+  }
+
   /**
    * Insert new Block
    * After set caret to this Block
+   *
+   * @todo: remove in 3.0.0
+   *
+   * @deprecated with insert() method
    */
-  public insertNewBlock() {
-    const newBlock = this.Editor.BlockManager.insert();
-    this.Editor.Caret.setToBlock(newBlock);
+  public insertNewBlock(): void {
+    _.log('Method blocks.insertNewBlock() is deprecated and it will be removed in next major release. ' +
+      'Use blocks.insert() instead.', 'warn');
+    this.insert();
   }
 }