Remove contentless and irreplaceable (codex-team#535)

* Remove contentless and irreplacable settings

* update version

docs/tools.md

@@ -56,8 +56,6 @@ Options that Tool can specify. All settings should be passed as static propertie
 | `displayInToolbox` | _Boolean_ | `false` | Pass `true` to display this `Tool` in the Editor's `Toolbox` |
 | `toolboxIcon` | _String_ | — | Icon for Toolbox HTML string |
 | `enableLineBreaks` | _Boolean_ | `false` | With this option, CodeX Editor won't handle Enter keydowns. Can be helpful for Tools like `<code>` where line breaks should be handled by default behaviour. |
-| `irreplaceable` | _Boolean_ | `false` | By default, **empty** `Blocks` can be **replaced** by other `Blocks` with the `Toolbox`. Some tools with media-content may prefer another behaviour. Pass `true` and `Toolbox` will add a new block below yours.  |
-| `contentless` | _Boolean_ | `false` | Pass `true` for Tool which represents decorative empty `Blocks` |
 | `isInline` | _Boolean_ | `false` | Describes Tool as a [Tool for the Inline Toolbar](tools-inline.md) |
 
 ### User configuration

package.json

@@ -1,6 +1,6 @@
 {
   "name": "codex.editor",
-  "version": "2.5.4",
+  "version": "2.5.5",
   "description": "Codex Editor. Native JS, based on API and Open Source",
   "main": "build/codex-editor.js",
   "types": "./types/index.d.ts",

src/components/block.ts

@@ -179,14 +179,6 @@ export default class Block {
    * @return {Boolean}
    */
   get isEmpty(): boolean {
-    /**
-     * Allow Tool to represent decorative contentless blocks: for example "* * *"-tool
-     * That Tools are not empty
-     */
-    if (this.class.contentless) {
-      return false;
-    }
-
     const emptyText = $.isEmpty(this.pluginsContent),
       emptyMedia = !this.hasMedia;
 
@@ -218,15 +210,10 @@ export default class Block {
 
   /**
    * Set focused state
-   * We don't need to mark Block as focused when it is empty
    * @param {Boolean} state - 'true' to select, 'false' to remove selection
    */
   set focused(state: boolean) {
-    if (state === true && !this.isEmpty) {
-      this.holder.classList.add(Block.CSS.focused);
-    } else {
-      this.holder.classList.remove(Block.CSS.focused);
-    }
+    this.holder.classList.toggle(Block.CSS.focused, state);
   }
 
   /**

src/components/modules/blockEvents.ts

@@ -114,11 +114,19 @@ export default class BlockEvents extends Module {
     const shiftKey = event.shiftKey,
       direction = shiftKey ? 'left' : 'right';
 
-    if (this.Editor.Toolbar.opened && currentBlock.isEmpty) {
-      this.Editor.Toolbox.open();
-    } else if (currentBlock.isEmpty) {
-      this.Editor.Toolbar.open();
-      this.Editor.Toolbar.plusButton.show();
+    /**
+     * Don't show Plus and Toolbox near not-inital Tools
+     */
+    if (!this.Editor.Tools.isInitial(currentBlock.tool)) {
+      return;
+    }
+
+    if (currentBlock.isEmpty) {
+      if (!this.Editor.Toolbar.opened) {
+        this.Editor.Toolbar.open(false , false);
+        this.Editor.Toolbar.plusButton.show();
+      }
+
       this.Editor.Toolbox.open();
     }
 

src/components/modules/toolbar/index.ts

@@ -190,13 +190,14 @@ export default class Toolbar extends Module {
    * Open Toolbar with Plus Button and Actions
    * @param {boolean} withBlockActions - by default, Toolbar opens with Block Actions.
    *                                     This flag allows to open Toolbar without Actions.
+   * @param {boolean} needToCloseToolbox - by default, Toolbar will be moved with opening
+   *                                      (by click on Block, or by enter)
+   *                                      with closing Toolbox and Block Settings
+   *                                      This flag allows to open Toolbar with Toolbox
    */
-  public open(withBlockActions: boolean = true): void {
-    /**
-     * Wait Block rendering for correct height computing
-     */
+  public open(withBlockActions: boolean = true, needToCloseToolbox: boolean = true): void {
     setTimeout(() => {
-      this.move();
+      this.move(needToCloseToolbox);
       this.nodes.wrapper.classList.add(Toolbar.CSS.toolbarOpened);
 
       if (withBlockActions) {

src/components/modules/toolbar/toolbox.ts

@@ -309,15 +309,9 @@ export default class Toolbox extends Module {
      */
     const currentBlock = this.Editor.BlockManager.currentBlock;
 
-    /**
-     * We do replace if:
-     * - block is empty
-     * - block is not irreplaceable
-     * @type {Array}
-     */
     let newBlock;
 
-    if (!tool[this.Editor.Tools.apiSettings.IS_IRREPLACEBLE_TOOL] && currentBlock.isEmpty) {
+    if (currentBlock.isEmpty) {
       newBlock = this.Editor.BlockManager.replace(toolName);
     } else {
       newBlock = this.Editor.BlockManager.insert(toolName);

src/components/modules/tools.ts

@@ -12,35 +12,6 @@ import LinkInlineTool from '../inline-tools/inline-tool-link';
  * Creates Instances from Plugins and binds external config to the instances
  */
 
-/**
- * Each Tool must contain the following important objects:
- *
- * @typedef {Object} ToolConfig {@link docs/tools.md}
- * @property {String} iconClassname - this a icon in toolbar
- * @property {Boolean} displayInToolbox - will be displayed in toolbox. Default value is TRUE
- * @property {Boolean} enableLineBreaks - inserts new block or break lines. Default value is FALSE
- * @property {Boolean|String[]} inlineToolbar - Pass `true` to enable the Inline Toolbar with all Tools,
- *                                              all pass an array with specified Tools list
- * @property render @todo add description
- * @property save @todo add description
- * @property settings @todo add description
- * @property validate - method that validates output data before saving
- */
-
-/**
- * @typedef {Function} Tool {@link docs/tools.md}
- * @property {Boolean}      displayInToolbox      - By default, tools won't be added in the Toolbox. Pass true to add.
- * @property {String}       iconClassName         - CSS class name for the Toolbox button
- * @property {Boolean}      irreplaceable         - Toolbox behaviour: replace or add new block below
- * @property render
- * @property save
- * @property settings
- * @property validate
- *
- * @todo update according to current API
- * @todo describe Tool in the {@link docs/tools.md}
- */
-
 /**
  * Class properties:
  *
@@ -142,12 +113,10 @@ export default class Tools extends Module {
   public get apiSettings() {
     return {
       CONFIG: 'config',
-      IS_CONTENTLESS: 'contentless',
       IS_DISPLAYED_IN_TOOLBOX: 'displayInToolbox',
       IS_ENABLED_INLINE_TOOLBAR: 'inlineToolbar',
       IS_ENABLED_LINE_BREAKS: 'enableLineBreaks',
       IS_INLINE: 'isInline',
-      IS_IRREPLACEBLE_TOOL: 'irreplaceable',
       IS_PASTE_DISALLOWED: 'disallowPaste',
       SHORTCUT: 'shortcut',
       TOOLBAR_ICON: 'toolboxIcon',

types/tools/block-tool.d.ts

@@ -53,21 +53,11 @@ export interface BlockTool extends Tool {
 }
 
 export interface BlockToolConstructable extends ToolConstructable {
-  /**
-   * Pass `true` if Tool represents decorative empty Block
-   */
-  contentless?: boolean;
-
   /**
    * Should this Tool be displayed in the Editor's Toolbox
    */
   displayInToolbox?: boolean;
 
-  /**
-   * Disable ability to replace empty Block by Toolbox
-   */
-  irreplaceable?: boolean;
-
   /**
    * String with an icon for Toolbox
    */