Release: 2.19

.eslintrc

@@ -40,6 +40,7 @@
     "DataTransfer": true,
     "DOMRect": true,
     "ClientRect": true,
-    "ArrayLike": true
+    "ArrayLike": true,
+    "unknown": true
   }
 }

.gitmodules

@@ -46,3 +46,6 @@
 [submodule "example/tools/warning"]
 	path = example/tools/warning
 	url = https://github.com/editor-js/warning
+[submodule "example/tools/underline"]
+	path = example/tools/underline
+	url = https://github.com/editor-js/underline

README.md

@@ -4,7 +4,7 @@
 [![](https://flat.badgen.net/bundlephobia/min/@editorjs/editorjs?color=cyan)](https://www.npmjs.com/package/@editorjs/editorjs)
 [![](https://flat.badgen.net/bundlephobia/minzip/@editorjs/editorjs?color=green)](https://www.npmjs.com/package/@editorjs/editorjs)
 [![Backers on Open Collective](https://opencollective.com/editorjs/backers/badge.svg)](#backers)
-[![Sponsors on Open Collective](https://opencollective.com/editorjs/sponsors/badge.svg)](#sponsors) 
+[![Sponsors on Open Collective](https://opencollective.com/editorjs/sponsors/badge.svg)](#sponsors)
 [![](https://flat.badgen.net/npm/license/@editorjs/editorjs)](https://www.npmjs.com/package/@editorjs/editorjs)
 [![Join the chat at https://gitter.im/codex-team/editor.js](https://badges.gitter.im/codex-team/editor.js.svg)](https://gitter.im/codex-team/editor.js?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
 
@@ -17,24 +17,24 @@
 If you like Editor.js you can support project improvements and development of new features with a donation to our collective.
 
  👉  [https://opencollective.com/editorjs](https://opencollective.com/editorjs)
- 
+
 ### Sponsors
 
 Support this project by becoming a sponsor. Your logo will show up here with a link to your website. [[Become a sponsor](https://opencollective.com/editorjs#sponsor)]
 
 <a href="https://opencollective.com/editorjs/sponsor/0/website" target="_blank"><img src="https://opencollective.com/editorjs/sponsor/0/avatar.svg"></a>
- 
+
  ### Backers
- 
+
  Thank you to all our backers! 🙏 [[Become a backer](https://opencollective.com/editorjs#backer)]
- 
+
  <a href="https://opencollective.com/editorjs#backers" target="_blank"><img src="https://opencollective.com/editorjs/backers.svg?width=890"></a>
- 
+
 ### Contributors
 
 This project exists thanks to all the people who contribute. <img src="https://opencollective.com/editorjs/contributors.svg?width=890&button=false" />
 
-We really welcome new contributors. If you want to make some code with us, please take a look at the [Good First Tasks](https://github.com/codex-team/editor.js/issues?q=is%3Aopen+is%3Aissue+label%3A%22good+first+task%22). You can write to us on `[email protected]` or via special [Telegram chat](https://t.me/editorjsdev), or any other way. 
+We really welcome new contributors. If you want to make some code with us, please take a look at the [Good First Tasks](https://github.com/codex-team/editor.js/issues?q=is%3Aopen+is%3Aissue+label%3A%22good+first+task%22). You can write to us on `[email protected]` or via special [Telegram chat](https://t.me/editorjsdev), or any other way.
 
 ## Documentation
 
@@ -142,7 +142,7 @@ npm i @editorjs/editorjs
 Include module in your application
 
 ```javascript
-const EditorJS = require('@editorjs/editorjs');
+import EditorJS from '@editorjs/editorjs';
 ```
 
 ##### Option B. Use a CDN
@@ -240,11 +240,11 @@ Take a look at the [example.html](example/example.html) to view more detailed ex
 
 ## Credits and references
 
-- We use [HTMLJanitor](https://github.com/guardian/html-janitor) module in our Sanitizer module. 
+- We use [HTMLJanitor](https://github.com/guardian/html-janitor) module in our Sanitizer module.
 
 ## About team
 
-We are CodeX and we build products for developers and makers. 
+We are CodeX and we build products for developers and makers.
 
 Follow us on Twitter: [twitter.com/codex_team](https://twitter.com/codex_team)
 

docs/CHANGELOG.md

@@ -1,5 +1,29 @@
 # Changelog
 
+### 2.19
+
+- `New` - Read-only mode 🥳 [#837](https://github.com/codex-team/editor.js/issues/837)
+- `New` - RTL mode added [#670](https://github.com/codex-team/editor.js/issues/670)
+- `New` - Allows users to provide common `inlineToolbar` property which will be used for all tools whose `inlineToolbar` property is set to `true`. It can be overridden by the tool's own `inlineToolbar` property. Also, inline tools will be ordered according to the order of the inline tools in array provided in the `inlineToolbar` property. [#1056](https://github.com/codex-team/editor.js/issues/1056)
+- `New` - Tool's `reset` static method added to the API to clean up any data added by Tool on initialization
+- `Improvements` - The `initialBlock` property of Editor config is deprecated. Use the `defaultBlock` instead. [#993](https://github.com/codex-team/editor.js/issues/993)
+- `Improvements` - BlockAPI `call()` method now returns the result of calling method, thus allowing it to expose arbitrary data as needed [#1205](https://github.com/codex-team/editor.js/pull/1205)
+- `Improvements` - Unuseful log about missed i18n section has been removed  [#1269](https://github.com/codex-team/editor.js/issues/1269)
+- `Improvements` - Allowed to set `false` as `toolbox` config in order to hide Toolbox button [#1221](https://github.com/codex-team/editor.js/issues/1221)
+- `Fix` — Fix problem with types usage [#1183](https://github.com/codex-team/editor.js/issues/1183)
+- `Fix` - Fixed issue with Spam clicking the "Click to tune" button duplicates the icons on FireFox. [#1273](https://github.com/codex-team/editor.js/issues/1273)
+- `Fix` - Fixed issue with `editor.blocks.delete(index)` method which throws an error when Editor.js is not focused, even after providing a valid index. [#1182](https://github.com/codex-team/editor.js/issues/1182)
+- `Fix` - Fixed the issue of toolbar not disappearing on entering input in Chinese, Hindi and some other languages. [#1196](https://github.com/codex-team/editor.js/issues/1196)
+- `Fix` - Do not stop events propagation if not needed (essential for React synthetic events) [#1051](https://github.com/codex-team/editor.js/issues/1051) [#946](https://github.com/codex-team/editor.js/issues/946)
+- `Fix` - Tool's `destroy` method is not invoked when `editor.destroy()` is called. [#1047](https://github.com/codex-team/editor.js/issues/1047)
+- `Fix` - Fixed issue with enter key in inputs and textareas [#920](https://github.com/codex-team/editor.js/issues/920)
+- `Fix` - blocks.getBlockByIndex() API method now returns void for indexes out of range [#1270](https://github.com/codex-team/editor.js/issues/1270)
+- `Fix` - Fixed the `Tab` key behavior when the caret is not set inside contenteditable element, but the block is selected [#1302](https://github.com/codex-team/editor.js/issues/1302).
+- `Fix` - Fixed the `onChange` callback issue. This method didn't be called for native inputs before some contentedtable element changed [#843](https://github.com/codex-team/editor.js/issues/843)
+- `Fix` - Fixed the `onChange` callback issue. This method didn't be called after the callback throws an exception [#1339](https://github.com/codex-team/editor.js/issues/1339)
+- `Fix` - The internal `shortcut` getter of Tools classes will work now.
+- `Deprecated` — The Inline Tool `clear()` method is deprecated because the new instance of Inline Tools will be created on every showing of the Inline Toolbar
+
 ### 2.18
 
 - `New` *I18n API* — Ability to provide internalization for Editor.js core and tools. [#751](https://github.com/codex-team/editor.js/issues/751)
@@ -24,7 +48,6 @@
 
 >  *Breaking changes* `blocks.getBlockByIndex` method now returns BlockAPI object. To access old value, use BlockAPI.holder property
 
-
 ### 2.17
 
 - `Improvements` - Editor's [onchange callback](https://editorjs.io/configuration#editor-modifications-callback) now accepts an API as a parameter

docs/installation.md

@@ -24,10 +24,10 @@ Install the package via NPM or Yarn
 npm i @editorjs/editorjs
 ```
 
-Include module at your application 
+Include module at your application
 
 ```javascript
-const EditorJS = require('@editorjs/editorjs');
+import EditorJS from '@editorjs/editorjs';
 ```
 
 ### Use from CDN
@@ -68,7 +68,7 @@ Check [Editor.js's community](https://github.com/editor-js/) to see Tools exampl
 
 ## Create Editor instance
 
-Create an instance of Editor.js and pass [Configuration Object](../src/types-internal/editor-config.ts). 
+Create an instance of Editor.js and pass [Configuration Object](../src/types-internal/editor-config.ts).
 At least the `holderId` option is required.
 
 ```html
@@ -119,7 +119,7 @@ Editor.js needs a bit of time to initialize. It is an asynchronous action so it
 
 If you need to know when the editor instance is ready you can use one of the following ways:
 
-##### Pass `onReady` property to the configuration object. 
+##### Pass `onReady` property to the configuration object.
 
 It must be a function:
 
@@ -189,7 +189,7 @@ var editor = new EditorJS({
     * onReady callback
     */
    onReady: () => {console.log('Editor.js is ready to work!')},
-   
+
    /**
     * onChange callback
     */

docs/tools.md

@@ -78,7 +78,7 @@ var editor = new EditorJS({
     },
     header: Header
   },
-  initialBlock : 'text',
+  defaultBlock : 'text',
 });
 ```
 
@@ -89,6 +89,36 @@ There are few options available by Editor.js.
 | `inlineToolbar` | _Boolean/Array_ | `false` | Pass `true` to enable the Inline Toolbar with all Tools, or pass an array with specified Tools list |
 | `config` | _Object_ | `null` | User's configuration for Plugin.
 
+## Tool prepare and reset
+
+If you need to prepare some data for Tool (eg. load external script, create HTML nodes in the document, etc) you can use static prepare method.
+
+It accepts tools config passed on Editor's initialization as an argument:
+
+```javascript
+class Tool {
+  static prepare(config) {
+    loadScript();
+    insertNodes();
+    ...
+  }
+}
+```
+
+On Editor destroy you can use an opposite method `reset` to clean up all prepared data:
+
+```javascript
+class Tool {
+  static reset() {
+    cleanUpScripts();
+    deleteNodes();
+    ...
+  }
+}
+```
+
+Both methods might be async.
+
 ## Paste handling
 
 Editor.js handles paste on Blocks and provides API for Tools to process the pasted data.
@@ -118,7 +148,7 @@ To handle pasted HTML elements object returned from `pasteConfig` getter should
 | -- | -- | -- |
 | `tags` | `String[]` | _Optional_. Should contain all tag names you want to be extracted from pasted data and processed by your `onPaste` method |
 
-For correct work you MUST provide `onPaste` handler at least for `initialBlock` Tool.
+For correct work you MUST provide `onPaste` handler at least for `defaultBlock` Tool.
 
 > Example
 
@@ -144,7 +174,7 @@ Your Tool can analyze text by RegExp patterns to substitute pasted string with d
 
 **Note** Editor will check pattern's full match, so don't forget to handle all available chars in there.
 
-Pattern will be processed only if paste was on `initialBlock` Tool and pasted string length is less than 450 characters.
+Pattern will be processed only if paste was on `defaultBlock` Tool and pasted string length is less than 450 characters.
 
 > Example
 

example/assets/demo.css

@@ -120,6 +120,32 @@ body {
   text-decoration: none;
 }
 
+.ce-example__statusbar {
+  position: fixed;
+  bottom: 10px;
+  right: 10px;
+  background: #fff;
+  border-radius: 8px;
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
+  font-size: 12px;
+  padding: 8px 15px;
+  z-index: 1;
+}
+
+.ce-example__statusbar-button {
+  display: inline-flex;
+  margin-left: 10px;
+  background: #4A9DF8;
+  padding: 6px 12px;
+  box-shadow: 0 7px 8px -4px rgba(137, 207, 255, 0.77);
+  transition: all 150ms ease;
+  cursor: pointer;
+  border-radius: 31px;
+  color: #fff;
+  font-family: 'PT Mono', Menlo, Monaco, Consolas, Courier New, monospace;
+  text-align: center;
+}
+
 @media all and (max-width: 730px){
   .ce-example__header,
   .ce-example__content{

example/example-dev.html

@@ -34,6 +34,15 @@
       <div class="ce-example__button" id="saveButton">
         editor.save()
       </div>
+      <div class="ce-example__statusbar">
+        Readonly:
+        <b id="readonly-state">
+          Off
+        </b>
+        <div class="ce-example__statusbar-button" id="toggleReadOnlyButton">
+          toggle
+        </div>
+      </div>
     </div>
     <div class="ce-example__output">
       <pre class="ce-example__output-content" id="output"></pre>
@@ -74,21 +83,29 @@
 
   <!-- Initialization -->
   <script>
-    /**
-     * Saving button
-     */
-    const saveButton = document.getElementById('saveButton');
-
     /**
      * To initialize the Editor, create a new instance with configuration object
      * @see docs/installation.md for mode details
      */
     var editor = new EditorJS({
+      /**
+       * Enable/Disable the read only mode
+       */
+      readOnly: false,
+
       /**
        * Wrapper of Editor
        */
       holder: 'editorjs',
 
+      /**
+       * Common Inline Toolbar settings
+       * - if true (or not specified), the order from 'tool' property will be used
+       * - if an array of tool names, this order will be used
+       */
+      // inlineToolbar: ['link', 'marker', 'bold', 'italic'],
+      // inlineToolbar: true,
+
       /**
        * Tools list
        */
@@ -98,7 +115,7 @@
          */
         header: {
           class: Header,
-          inlineToolbar: ['link'],
+          inlineToolbar: ['marker', 'link'],
           config: {
             placeholder: 'Header'
           },
@@ -167,7 +184,7 @@
       /**
        * This Tool will be used as default
        */
-      // initialBlock: 'paragraph',
+      // defaultBlock: 'paragraph',
 
       /**
        * Initial Editor data
@@ -279,14 +296,37 @@
       },
     });
 
+    /**
+     * Saving button
+     */
+    const saveButton = document.getElementById('saveButton');
+
+    /**
+     * Toggle read-only button
+     */
+    const toggleReadOnlyButton = document.getElementById('toggleReadOnlyButton');
+    const readOnlyIndicator = document.getElementById('readonly-state');
 
     /**
      * Saving example
      */
     saveButton.addEventListener('click', function () {
-      editor.save().then((savedData) => {
-        cPreview.show(savedData, document.getElementById("output"));
-      });
+      editor.save()
+        .then((savedData) => {
+          cPreview.show(savedData, document.getElementById("output"));
+        })
+        .catch((error) => {
+          console.error('Saving error', error);
+        });
+    });
+
+    /**
+     * Toggle read-only example
+     */
+    toggleReadOnlyButton.addEventListener('click', async () => {
+      const readOnlyState = await editor.readOnly.toggle();
+
+      readOnlyIndicator.textContent = readOnlyState ? 'On' : 'Off';
     });
   </script>
 </body>