From 69a5c21bb6fed2a9fc4089faf26b9a48b42adeb4 Mon Sep 17 00:00:00 2001 From: George Berezhnoy Date: Thu, 28 Feb 2019 14:01:32 +0300 Subject: [PATCH] Rename to Editor.js (#625) * Rename to Editor.js in package, comments and docs * More changes * Done with renaming in code, docs, and comments * Revert renaming of tools org * Update submodules * Changes due comments * Fix double slash * editorjs -> @editorjs/editorjs * Update package.json Co-Authored-By: gohabereg * Update webpack.config.js Co-Authored-By: gohabereg * Update bundle --- .gitmodules | 3 + README.md | 64 +++++++++---------- dist/codex-editor.js | 45 ------------- dist/editor.js | 45 +++++++++++++ ...ditor.licenses.txt => editor.licenses.txt} | 0 docs/CHANGELOG.md | 26 ++++---- docs/api.md | 16 ++--- docs/caret.md | 4 +- docs/events.md | 4 +- docs/installation.md | 58 ++++++++--------- docs/sanitizer.md | 2 +- docs/toolbar-settings.md | 2 +- docs/tools.md | 20 +++--- docs/usage.md | 10 +-- example/example.html | 25 ++++---- example/tools/checklist | 2 +- example/tools/code | 2 +- example/tools/image | 2 +- example/tools/link | 1 + example/tools/list | 2 +- example/tools/quote | 2 +- example/tools/simple-image | 2 +- package.json | 19 ++++-- src/codex.ts | 6 +- .../block-tunes/block-tune-delete.ts | 2 +- .../block-tunes/block-tune-move-down.ts | 2 +- .../block-tunes/block-tune-move-up.ts | 2 +- src/components/core.ts | 8 +-- .../inline-tools/inline-tool-link.ts | 2 +- src/components/modules/api/sanitizer.ts | 2 +- src/components/modules/listeners.ts | 3 +- src/components/modules/renderer.ts | 4 +- src/components/modules/sanitizer.ts | 2 +- src/components/modules/saver.ts | 5 +- src/components/modules/tools.ts | 2 +- src/components/modules/ui.ts | 14 ++-- src/components/tools/paragraph | 2 +- src/components/utils.ts | 2 +- webpack.config.js | 6 +- 39 files changed, 218 insertions(+), 202 deletions(-) delete mode 100644 dist/codex-editor.js create mode 100644 dist/editor.js rename dist/{codex-editor.licenses.txt => editor.licenses.txt} (100%) create mode 160000 example/tools/link diff --git a/.gitmodules b/.gitmodules index 927ec7a3..03ab596f 100644 --- a/.gitmodules +++ b/.gitmodules @@ -37,3 +37,6 @@ [submodule "example/tools/checklist"] path = example/tools/checklist url = https://github.com/codex-editor/checklist +[submodule "example/tools/link"] + path = example/tools/link + url = https://github.com/codex-editor/link diff --git a/README.md b/README.md index 7e23f477..1f4d3467 100644 --- a/README.md +++ b/README.md @@ -1,13 +1,13 @@

-[![](https://flat.badgen.net/npm/v/codex.editor?icon=npm)](https://www.npmjs.com/package/codex.editor) -[![](https://flat.badgen.net/bundlephobia/min/codex.editor?color=cyan)](https://www.npmjs.com/package/codex.editor) -[![](https://flat.badgen.net/bundlephobia/minzip/codex.editor?color=green)](https://www.npmjs.com/package/codex.editor) -[![](https://flat.badgen.net/npm/license/codex.editor)](https://www.npmjs.com/package/codex.editor) +[![](https://flat.badgen.net/npm/v/@editorjs/editorjs?icon=npm)](https://www.npmjs.com/package/@editorjs/editorjs) +[![](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) +[![](https://flat.badgen.net/npm/license/@editorjs/editorjs)](https://www.npmjs.com/package/@editorjs/editorjs) ## Version 2.0-beta is here! -We are glad to introduce the next version of CodeX Editor. Totally new core, structure and plugins — that was an impressive adventure 🤓. +We are glad to introduce the next version of Editor.js. Totally new core, structure and plugins — that was an impressive adventure 🤓. Welcome to testing stage. Please, join a [public Telegram-chat](//t.me/codex_editor) where you always find a support. @@ -27,16 +27,16 @@ Welcome to testing stage. Please, join a [public Telegram-chat](//t.me/codex_edi ### 2.2—2.7 changelog -- `New` *Sanitize API* — [Sanitize Config](https://github.com/codex-team/codex.editor/blob/master/docs/tools.md#automatic-sanitize) of `Block Tools` now automatically extends by tags of `Inline Tools` that is enabled by current Tool by `inlineToolbar` option. You don't need more to specify `a, b, mark, code` manually. This feature will be added to fields that supports inline markup. +- `New` *Sanitize API* — [Sanitize Config](https://github.com/codex-team/editor.js/blob/master/docs/tools.md#automatic-sanitize) of `Block Tools` now automatically extends by tags of `Inline Tools` that is enabled by current Tool by `inlineToolbar` option. You don't need more to specify `a, b, mark, code` manually. This feature will be added to fields that supports inline markup. - `New` *Block Selection* — Ability to select Block by `CMD+A`, and the whole Editor by double `CMD+A`. After that, you can copy (`CMD+C`), remove (`Backspace`) or clear (`Enter`) selected Blocks. -- `New` *[Styles API](https://github.com/codex-team/codex.editor/blob/master/types/api/styles.d.ts)* — Added `button` class for stylization of any buttons provided by Tools with one unified style. -- `New` *[Notifier API](https://github.com/codex-team/codex.editor/blob/master/docs/api.md#notifierapi)* — methods for showing user notifications: on success, errors, warnings, etc. +- `New` *[Styles API](https://github.com/codex-team/editor.js/blob/master/types/api/styles.d.ts)* — Added `button` class for stylization of any buttons provided by Tools with one unified style. +- `New` *[Notifier API](https://github.com/codex-team/editor.js/blob/master/docs/api.md#notifierapi)* — methods for showing user notifications: on success, errors, warnings, etc. - `New` *Block Tool* — [Table](http://github.com/codex-editor/table) constructor 💪 - `New` If one of the Tools is unavailable on Editor initialization, its Blocks will be rendered with *Dummy Block*, describing that user can not edit content of this Block. Dummy Blocks can be moved, removed and saved as normal Blocks. So saved data won't be lost if one of the Tools is failed -- `New` [Public TS-types](https://github.com/codex-team/codex.editor/tree/master/types) are presented. +- `New` [Public TS-types](https://github.com/codex-team/editor.js/tree/master/types) are presented. - `Changes` *Tools API* — options `irreplaceable` and `contentless` was removed. -- `Changes` *Tools API* — [Paste API](https://github.com/codex-team/codex.editor/blob/master/docs/tools.md#paste-handling): tags, patterns and mime-types now should be specified by Tool's `pasteConfig` static property. Custom Paste Event should be handled by `onPaste(event)` that should not be static from now. -- `Changes` *Tools API* — options `displayInToolbox ` and `toolboxIcon` was removed. Use [`toolbox`](https://github.com/codex-team/codex.editor/blob/master/docs/tools.md#internal-tool-settings) instead, that should return object with `icon` and `title` field, or `false` if Tool should not be placed at the Toolbox. Also, there are a way to override `toolbox {icon, title}` settings provided by Tool with you own settings at the Initial Config. +- `Changes` *Tools API* — [Paste API](https://github.com/codex-team/editor.js/blob/master/docs/tools.md#paste-handling): tags, patterns and mime-types now should be specified by Tool's `pasteConfig` static property. Custom Paste Event should be handled by `onPaste(event)` that should not be static from now. +- `Changes` *Tools API* — options `displayInToolbox ` and `toolboxIcon` was removed. Use [`toolbox`](https://github.com/codex-team/editor.js/blob/master/docs/tools.md#internal-tool-settings) instead, that should return object with `icon` and `title` field, or `false` if Tool should not be placed at the Toolbox. Also, there are a way to override `toolbox {icon, title}` settings provided by Tool with you own settings at the Initial Config. - `Improvements` — All Projects code now on TypeScript - `Improvements` — NPM package size decreased from 1300kb to 422kb - `Improvements` — Bundle size decreased from 438kb to 252kb @@ -66,13 +66,13 @@ Sorry if we missed something. You can join a [Telegram-chat](//t.me/codex_editor --- -# So how to use CodeX Editor +# So how to use Editor.js ## Basics -CodeX Editor is a Block-Styled editor. Blocks are structural units, of which the Entry is composed. +Editor.js is a Block-Styled editor. Blocks are structural units, of which the Entry is composed. For example, `Paragraph`, `Heading`, `Image`, `Video`, `List` are Blocks. Each Block is represented by Plugin. -We have [many](http://github.com/codex-editor) ready-to-use Plugins and the [simple API](docs/tools.md) for creation new ones. +We have [many](http://github.com/codex-editor/) ready-to-use Plugins and the [simple API](docs/tools.md) for creation new ones. So how to use the Editor after [Installation](docs/installation.md). @@ -108,7 +108,7 @@ Shortcut | Action | Restrictions Also we support shortcuts on the all type of Tools. Specify a shortcut with the Tools configuration. For example: ```js -var editor = CodexEditor({ +var editor = EditorJS({ //... tools: { header: { @@ -128,7 +128,7 @@ var editor = CodexEditor({ # Installation Guide -There are few steps to run CodeX Editor on your site. +There are few steps to run Editor.js on your site. 1. [Load Editor's core](#load-editors-core) 2. [Load Tools](#load-tools) @@ -136,7 +136,7 @@ There are few steps to run CodeX Editor on your site. ## Load Editor's core -Firstly you need to get CodeX Editor itself. It is a [minified script](build/codex-editor.js) with Editor's core and some default must-have tools. +Firstly you need to get Editor.js itself. It is a [minified script](build/editor.js) with Editor's core and some default must-have tools. Choose the most usable method of getting Editor for you. @@ -149,20 +149,20 @@ Choose the most usable method of getting Editor for you. Install the package via NPM or Yarn ```shell -npm i codex.editor --save-dev +npm i @editorjs/editorjs --save-dev ``` Include module in your application ```javascript -const CodexEditor = require('codex.editor'); +const EditorJS = require('@editorjs/editorjs'); ``` ### Use from CDN -You can load specific version of package from [jsDelivr CDN](https://www.jsdelivr.com/package/npm/codex.editor). +You can load specific version of package from [jsDelivr CDN](https://www.jsdelivr.com/package/npm/@editorjs/editorjs). -`https://cdn.jsdelivr.net/npm/codex.editor@2.0.0` +`https://cdn.jsdelivr.net/npm/@editorjs/editorjs@latest` Then require this script. @@ -172,21 +172,21 @@ Then require this script. ### Save sources to project -Copy [codex-editor.js](build/codex-editor.js) file to your project and load it. +Copy [editor.js](build/editor.js) file to your project and load it. ```html - + ``` ## Load Tools -Each Block at the CodeX Editor 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 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. For example check out our [Header](https://github.com/codex-editor/header) Tool that represents heading blocks. You can install Header Tool by the same way as the Editor (Node.js, CDN, local file). -Check [CodeX Editor's community](https://github.com/codex-editor) to see more ready-to-use Tools. +Check [Editor.js's community](https://github.com/codex-editor/) to see more ready-to-use Tools. **Example:** use Header from CDN @@ -196,30 +196,30 @@ Check [CodeX Editor's community](https://github.com/codex-editor) to see more re ## Create Editor instance -Create an instance of CodeX Editor and pass [Configuration Object](types/configs/editor-config.d.ts) with `holderId` and tools list. +Create an instance of Editor.js and pass [Configuration Object](types/configs/editor-config.d.ts) with `holderId` and tools list. ```html -
+
``` -You can create a simple Editor with only default Paragraph Tool by passing a string with element's Id (wrapper for Editor) as a configuration param. Or use the default `codex-editor` id for wrapper. +You can create a simple Editor with only default Paragraph Tool by passing a string with element's Id (wrapper for Editor) as a configuration param. Or use the default `editorjs` id for wrapper. ```javascript -var editor = new CodexEditor(); /** Zero-configuration */ +var editor = new EditorJS(); /** Zero-configuration */ // equals -var editor = new CodexEditor('codex-editor'); +var editor = new EditorJS('editorjs'); ```` Or pass a whole settings object. ```javascript -var editor = new CodexEditor({ +var editor = new EditorJS({ /** * Create a holder for the Editor and pass its ID */ - holderId : 'codex-editor', + holderId : 'editorjs', /** * Available Tools list. diff --git a/dist/codex-editor.js b/dist/codex-editor.js deleted file mode 100644 index 59c4843d..00000000 --- a/dist/codex-editor.js +++ /dev/null @@ -1,45 +0,0 @@ -/*! - * Codex Editor - * - * @version 2.9.5 - * - * @licence Apache-2.0 - * @author CodeX-Team - * - * @uses html-janitor - * @licence Apache-2.0 (https://github.com/guardian/html-janitor/blob/master/LICENSE) - */ -!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.CodexEditor=e():t.CodexEditor=e()}(window,function(){return function(t){var e={};function n(o){if(e[o])return e[o].exports;var r=e[o]={i:o,l:!1,exports:{}};return t[o].call(r.exports,r,r.exports,n),r.l=!0,r.exports}return n.m=t,n.c=e,n.d=function(t,e,o){n.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:o})},n.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},n.t=function(t,e){if(1&e&&(t=n(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var o=Object.create(null);if(n.r(o),Object.defineProperty(o,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var r in t)n.d(o,r,function(e){return t[e]}.bind(null,r));return o},n.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return n.d(e,"a",e),e},n.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},n.p="",n(n.s=161)}([function(t,e,n){var o=n(9),r=n(16),i=n(22),a=n(19),s=n(31),u=function(t,e,n){var c,l,f,d,p=t&u.F,h=t&u.G,v=t&u.S,g=t&u.P,y=t&u.B,m=h?o:v?o[e]||(o[e]={}):(o[e]||{}).prototype,b=h?r:r[e]||(r[e]={}),k=b.prototype||(b.prototype={});for(c in h&&(n=e),n)f=((l=!p&&m&&void 0!==m[c])?m:n)[c],d=y&&l?s(f,o):g&&"function"==typeof f?s(Function.call,f):f,m&&a(m,c,f,t&u.U),b[c]!=f&&i(b,c,d),g&&k[c]!=f&&(k[c]=f)};o.core=r,u.F=1,u.G=2,u.S=4,u.P=8,u.B=16,u.W=32,u.U=64,u.R=128,t.exports=u},function(t,e){t.exports=function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}},function(t,e){function n(t,e){for(var n=0;n1&&void 0!==arguments[1]?arguments[1]:null,o=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{},r=document.createElement(t);for(var a in Array.isArray(n)?(e=r.classList).add.apply(e,(0,i.default)(n)):n&&r.classList.add(n),o)o.hasOwnProperty(a)&&(r[a]=o[a]);return r}},{key:"text",value:function(t){return document.createTextNode(t)}},{key:"svg",value:function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:14,n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:14,o=document.createElementNS("http://www.w3.org/2000/svg","svg");return o.classList.add("icon","icon--"+t),o.setAttribute("width",e+"px"),o.setAttribute("height",n+"px"),o.innerHTML=''),o}},{key:"append",value:function(t,e){Array.isArray(e)?e.forEach(function(e){return t.appendChild(e)}):t.appendChild(e)}},{key:"prepend",value:function(t,e){Array.isArray(e)?(e=e.reverse()).forEach(function(e){return t.prepend(e)}):t.prepend(e)}},{key:"swap",value:function(t,e){var n=document.createElement("div"),o=t.parentNode;o.insertBefore(n,t),o.insertBefore(t,e),o.insertBefore(e,n),o.removeChild(n)}},{key:"find",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:document,e=arguments.length>1?arguments[1]:void 0;return t.querySelector(e)}},{key:"get",value:function(t){return document.getElementById(t)}},{key:"findAll",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:document,e=arguments.length>1?arguments[1]:void 0;return t.querySelectorAll(e)}},{key:"getDeepestNode",value:function(e){var n=arguments.length>1&&void 0!==arguments[1]&&arguments[1],o=n?"lastChild":"firstChild",r=n?"previousSibling":"nextSibling";if(e&&e.nodeType===Node.ELEMENT_NODE&&e[o]){var i=e[o];if(t.isSingleTag(i)&&!t.isNativeInput(i)&&!t.isLineBreakTag(i))if(i[r])i=i[r];else{if(!i.parentNode[r])return i.parentNode;i=i.parentNode[r]}return this.getDeepestNode(i,n)}return e}},{key:"isElement",value:function(t){return t&&"object"===(0,r.default)(t)&&t.nodeType&&t.nodeType===Node.ELEMENT_NODE}},{key:"isFragment",value:function(t){return t&&"object"===(0,r.default)(t)&&t.nodeType&&t.nodeType===Node.DOCUMENT_FRAGMENT_NODE}},{key:"isContentEditable",value:function(t){return"true"===t.contentEditable}},{key:"isNativeInput",value:function(t){return!(!t||!t.tagName)&&["INPUT","TEXTAREA"].includes(t.tagName)}},{key:"canSetCaret",value:function(e){var n=!0;if(t.isNativeInput(e)){var o=e;switch(o.type){case"file":case"checkbox":case"radio":case"hidden":case"submit":case"button":case"image":case"reset":n=!1}}else n=t.isContentEditable(e);return n}},{key:"isNodeEmpty",value:function(t){return!(this.isSingleTag(t)&&!this.isLineBreakTag(t))&&0===(this.isElement(t)&&this.isNativeInput(t)?t.value:t.textContent.replace("​","")).trim().length}},{key:"isLeaf",value:function(t){return!!t&&0===t.childNodes.length}},{key:"isEmpty",value:function(t){var e=this,n=[],o=[];if(!t)return!0;if(!t.childNodes.length)return this.isNodeEmpty(t);for(n.push(t.firstChild);n.length>0;)if(t=n.shift()){for(this.isLeaf(t)?o.push(t):n.push(t.firstChild);t&&t.nextSibling;)(t=t.nextSibling)&&n.push(t);if(t&&!this.isNodeEmpty(t))return!1}return o.every(function(t){return e.isNodeEmpty(t)})}},{key:"isHTMLString",value:function(e){var n=t.make("div");return n.innerHTML=e,n.childElementCount>0}},{key:"getContentLength",value:function(e){return t.isNativeInput(e)?e.value.length:e.nodeType===Node.TEXT_NODE?e.length:e.textContent.length}},{key:"containsOnlyInlineElements",value:function(e){var n;return"string"==typeof e?(n=document.createElement("div")).innerHTML=e:n=e,Array.from(n.children).every(function e(n){return!t.blockElements.includes(n.tagName.toLowerCase())&&Array.from(n.children).every(e)})}},{key:"getDeepestBlockElements",value:function(e){return t.containsOnlyInlineElements(e)?[e]:Array.from(e.children).reduce(function(e,n){return(0,i.default)(e).concat((0,i.default)(t.getDeepestBlockElements(n)))},[])}},{key:"blockElements",get:function(){return["address","article","aside","blockquote","canvas","div","dl","dt","fieldset","figcaption","figure","footer","form","h1","h2","h3","h4","h5","h6","header","hgroup","hr","li","main","nav","noscript","ol","output","p","pre","ruby","section","table","tr","tfoot","ul","video"]}}]),t}();o.default=c,c.displayName="Dom",t.exports=e.default})?o.apply(e,r):o)||(t.exports=i)},function(t,e,n){var o=n(11),r=n(100),i=n(38),a=Object.defineProperty;e.f=n(15)?Object.defineProperty:function(t,e,n){if(o(t),e=i(e,!0),o(n),r)try{return a(t,e,n)}catch(t){}if("get"in n||"set"in n)throw TypeError("Accessors not supported!");return"value"in n&&(t[e]=n.value),t}},function(t,e,n){t.exports=!n(8)(function(){return 7!=Object.defineProperty({},"a",{get:function(){return 7}}).a})},function(t,e){var n=t.exports={version:"2.5.7"};"number"==typeof __e&&(__e=n)},function(t,e,n){var o=n(35),r=Math.min;t.exports=function(t){return t>0?r(o(t),9007199254740991):0}},function(t,e,n){var o,r,i;r=[e,n(29),n(30),n(1),n(2),n(13)],void 0===(i="function"==typeof(o=function(o,r,i,a,s,u){"use strict";var c=n(3);Object.defineProperty(o,"__esModule",{value:!0}),o.default=void 0,r=c(r),i=c(i),a=c(a),s=c(s),u=c(u);var l=function(){function t(){(0,a.default)(this,t)}var e;return(0,s.default)(t,null,[{key:"log",value:function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"log",n=arguments.length>2?arguments[2]:void 0,o=arguments.length>3&&void 0!==arguments[3]?arguments[3]:"color: inherit";if("console"in window&&window.console[e]){var r="Editor.js ".concat("2.9.5"),i="line-height: 1em;\n color: #006FEA;\n display: inline-block;\n font-size: 11px;\n line-height: 1em;\n background-color: #fff;\n padding: 4px 9px;\n border-radius: 30px;\n border: 1px solid rgba(56, 138, 229, 0.16);\n margin: 4px 5px 4px 0;";try{["time","timeEnd"].includes(e)?console[e]("( ".concat(r," ) ").concat(t)):n?console[e]("%c".concat(r,"%c ").concat(t," %o"),i,o,n):console[e]("%c".concat(r,"%c ").concat(t),i,o)}catch(t){}}}},{key:"sequence",value:(e=(0,i.default)(r.default.mark(function t(e){var n,o,a,s,u=arguments;return r.default.wrap(function(t){for(;;)switch(t.prev=t.next){case 0:return s=function(){return(s=(0,i.default)(r.default.mark(function t(e,n,o){return r.default.wrap(function(t){for(;;)switch(t.prev=t.next){case 0:return t.prev=0,t.next=3,e.function(e.data);case 3:return t.next=5,n(void 0!==e.data?e.data:{});case 5:t.next=10;break;case 7:t.prev=7,t.t0=t.catch(0),o(void 0!==e.data?e.data:{});case 10:case"end":return t.stop()}},t,this,[[0,7]])}))).apply(this,arguments)},a=function(t,e,n){return s.apply(this,arguments)},n=u.length>1&&void 0!==u[1]?u[1]:function(){},o=u.length>2&&void 0!==u[2]?u[2]:function(){},t.next=6,e.reduce(function(){var t=(0,i.default)(r.default.mark(function t(e,i){return r.default.wrap(function(t){for(;;)switch(t.prev=t.next){case 0:return t.next=2,e;case 2:return t.abrupt("return",a(i,n,o));case 3:case"end":return t.stop()}},t,this)}));return function(e,n){return t.apply(this,arguments)}}(),Promise.resolve());case 6:return t.abrupt("return",t.sent);case 7:case"end":return t.stop()}},t,this)})),function(t){return e.apply(this,arguments)})},{key:"array",value:function(t){return Array.prototype.slice.call(t)}},{key:"isFunction",value:function(t){return"function"==typeof t}},{key:"isClass",value:function(t){return"function"==typeof t&&/^\s*class\s+/.test(t.toString())}},{key:"isEmpty",value:function(t){return!t||0===Object.keys(t).length&&t.constructor===Object}},{key:"isPromise",value:function(t){return Promise.resolve(t)===t}},{key:"delay",value:function(t,e){return function(){var n=this,o=arguments;window.setTimeout(function(){return t.apply(n,o)},e)}}},{key:"getFileExtension",value:function(t){return t.name.split(".").pop()}},{key:"isValidMimeType",value:function(t){return/^[-\w]+\/([-+\w]+|\*)$/.test(t)}},{key:"debounce",value:function(t,e,n){var o,r=this,i=arguments;return function(){var a=r,s=i,u=n&&!o;window.clearTimeout(o),o=window.setTimeout(function(){o=null,n||t.apply(a,s)},e),u&&t.apply(a,s)}}},{key:"copyTextToClipboard",value:function(t){var e=u.default.make("div","codex-editor-clipboard",{innerHTML:t});document.body.appendChild(e);var n=window.getSelection(),o=document.createRange();o.selectNode(e),window.getSelection().removeAllRanges(),n.addRange(o),document.execCommand("copy"),document.body.removeChild(e)}},{key:"getUserOS",value:function(){var t={win:!1,mac:!1,x11:!1,linux:!1},e=Object.keys(t).find(function(t){return-1!==navigator.appVersion.toLowerCase().indexOf(t)});return e?(t[e]=!0,t):t}},{key:"capitalize",value:function(t){return t[0].toUpperCase()+t.slice(1)}},{key:"keyCodes",get:function(){return{BACKSPACE:8,TAB:9,ENTER:13,SHIFT:16,CTRL:17,ALT:18,ESC:27,SPACE:32,LEFT:37,UP:38,DOWN:40,RIGHT:39,DELETE:46,META:91}}}]),t}();o.default=l,l.displayName="Util",t.exports=e.default})?o.apply(e,r):o)||(t.exports=i)},function(t,e,n){var o=n(9),r=n(22),i=n(21),a=n(41)("src"),s=Function.toString,u=(""+s).split("toString");n(16).inspectSource=function(t){return s.call(t)},(t.exports=function(t,e,n,s){var c="function"==typeof n;c&&(i(n,"name")||r(n,"name",e)),t[e]!==n&&(c&&(i(n,a)||r(n,a,t[e]?""+t[e]:u.join(String(e)))),t===o?t[e]=n:s?t[e]?t[e]=n:r(t,e,n):(delete t[e],r(t,e,n)))})(Function.prototype,"toString",function(){return"function"==typeof this&&this[a]||s.call(this)})},function(t,e,n){var o=n(0),r=n(8),i=n(34),a=/"/g,s=function(t,e,n,o){var r=String(i(t)),s="<"+e;return""!==n&&(s+=" "+n+'="'+String(o).replace(a,""")+'"'),s+">"+r+""};t.exports=function(t,e){var n={};n[t]=e(s),o(o.P+o.F*r(function(){var e=""[t]('"');return e!==e.toLowerCase()||e.split('"').length>3}),"String",n)}},function(t,e){var n={}.hasOwnProperty;t.exports=function(t,e){return n.call(t,e)}},function(t,e,n){var o=n(14),r=n(40);t.exports=n(15)?function(t,e,n){return o.f(t,e,r(1,n))}:function(t,e,n){return t[e]=n,t}},function(t,e,n){var o=n(56),r=n(34);t.exports=function(t){return o(r(t))}},function(t,e,n){var o=n(34);t.exports=function(t){return Object(o(t))}},function(t,e,n){"use strict";var o=n(8);t.exports=function(t,e){return!!t&&o(function(){e?t.call(null,function(){},1):t.call(null)})}},function(t,e,n){var o=n(57),r=n(40),i=n(23),a=n(38),s=n(21),u=n(100),c=Object.getOwnPropertyDescriptor;e.f=n(15)?c:function(t,e){if(t=i(t),e=a(e,!0),u)try{return c(t,e)}catch(t){}if(s(t,e))return r(!o.f.call(t,e),t[e])}},function(t,e,n){var o=n(0),r=n(16),i=n(8);t.exports=function(t,e){var n=(r.Object||{})[t]||Object[t],a={};a[t]=e(n),o(o.S+o.F*i(function(){n(1)}),"Object",a)}},function(t,e,n){var o=n(31),r=n(56),i=n(24),a=n(17),s=n(256);t.exports=function(t,e){var n=1==t,u=2==t,c=3==t,l=4==t,f=6==t,d=5==t||f,p=e||s;return function(e,s,h){for(var v,g,y=i(e),m=r(y),b=o(s,h,3),k=a(m.length),x=0,S=n?p(e,k):u?p(e,0):void 0;k>x;x++)if((d||x in m)&&(g=b(v=m[x],x,y),t))if(n)S[x]=g;else if(g)switch(t){case 3:return!0;case 5:return v;case 6:return x;case 2:S.push(v)}else if(l)return!1;return f?-1:c||l?l:S}}},function(t,e,n){t.exports=n(331)},function(t,e){function n(t,e,n,o,r,i,a){try{var s=t[i](a),u=s.value}catch(t){return void n(t)}s.done?e(u):Promise.resolve(u).then(o,r)}t.exports=function(t){return function(){var e=this,o=arguments;return new Promise(function(r,i){var a=t.apply(e,o);function s(t){n(a,r,i,s,u,"next",t)}function u(t){n(a,r,i,s,u,"throw",t)}s(void 0)})}}},function(t,e,n){var o=n(32);t.exports=function(t,e,n){if(o(t),void 0===e)return t;switch(n){case 1:return function(n){return t.call(e,n)};case 2:return function(n,o){return t.call(e,n,o)};case 3:return function(n,o,r){return t.call(e,n,o,r)}}return function(){return t.apply(e,arguments)}}},function(t,e){t.exports=function(t){if("function"!=typeof t)throw TypeError(t+" is not a function!");return t}},function(t,e){var n={}.toString;t.exports=function(t){return n.call(t).slice(8,-1)}},function(t,e){t.exports=function(t){if(null==t)throw TypeError("Can't call method on "+t);return t}},function(t,e){var n=Math.ceil,o=Math.floor;t.exports=function(t){return isNaN(t=+t)?0:(t>0?o:n)(t)}},function(t,e,n){"use strict";if(n(15)){var o=n(42),r=n(9),i=n(8),a=n(0),s=n(68),u=n(96),c=n(31),l=n(52),f=n(40),d=n(22),p=n(53),h=n(35),v=n(17),g=n(125),y=n(44),m=n(38),b=n(21),k=n(60),x=n(10),S=n(24),w=n(89),E=n(45),T=n(47),_=n(46).f,C=n(91),B=n(41),O=n(12),I=n(28),N=n(58),L=n(65),M=n(93),A=n(49),P=n(62),R=n(51),j=n(92),F=n(117),D=n(14),U=n(26),H=D.f,z=U.f,W=r.RangeError,G=r.TypeError,V=r.Uint8Array,X=Array.prototype,Y=u.ArrayBuffer,K=u.DataView,Z=I(0),q=I(2),J=I(3),$=I(4),Q=I(5),tt=I(6),et=N(!0),nt=N(!1),ot=M.values,rt=M.keys,it=M.entries,at=X.lastIndexOf,st=X.reduce,ut=X.reduceRight,ct=X.join,lt=X.sort,ft=X.slice,dt=X.toString,pt=X.toLocaleString,ht=O("iterator"),vt=O("toStringTag"),gt=B("typed_constructor"),yt=B("def_constructor"),mt=s.CONSTR,bt=s.TYPED,kt=s.VIEW,xt=I(1,function(t,e){return _t(L(t,t[yt]),e)}),St=i(function(){return 1===new V(new Uint16Array([1]).buffer)[0]}),wt=!!V&&!!V.prototype.set&&i(function(){new V(1).set({})}),Et=function(t,e){var n=h(t);if(n<0||n%e)throw W("Wrong offset!");return n},Tt=function(t){if(x(t)&&bt in t)return t;throw G(t+" is not a typed array!")},_t=function(t,e){if(!(x(t)&> in t))throw G("It is not a typed array constructor!");return new t(e)},Ct=function(t,e){return Bt(L(t,t[yt]),e)},Bt=function(t,e){for(var n=0,o=e.length,r=_t(t,o);o>n;)r[n]=e[n++];return r},Ot=function(t,e,n){H(t,e,{get:function(){return this._d[n]}})},It=function(t){var e,n,o,r,i,a,s=S(t),u=arguments.length,l=u>1?arguments[1]:void 0,f=void 0!==l,d=C(s);if(null!=d&&!w(d)){for(a=d.call(s),o=[],e=0;!(i=a.next()).done;e++)o.push(i.value);s=o}for(f&&u>2&&(l=c(l,arguments[2],2)),e=0,n=v(s.length),r=_t(this,n);n>e;e++)r[e]=f?l(s[e],e):s[e];return r},Nt=function(){for(var t=0,e=arguments.length,n=_t(this,e);e>t;)n[t]=arguments[t++];return n},Lt=!!V&&i(function(){pt.call(new V(1))}),Mt=function(){return pt.apply(Lt?ft.call(Tt(this)):Tt(this),arguments)},At={copyWithin:function(t,e){return F.call(Tt(this),t,e,arguments.length>2?arguments[2]:void 0)},every:function(t){return $(Tt(this),t,arguments.length>1?arguments[1]:void 0)},fill:function(t){return j.apply(Tt(this),arguments)},filter:function(t){return Ct(this,q(Tt(this),t,arguments.length>1?arguments[1]:void 0))},find:function(t){return Q(Tt(this),t,arguments.length>1?arguments[1]:void 0)},findIndex:function(t){return tt(Tt(this),t,arguments.length>1?arguments[1]:void 0)},forEach:function(t){Z(Tt(this),t,arguments.length>1?arguments[1]:void 0)},indexOf:function(t){return nt(Tt(this),t,arguments.length>1?arguments[1]:void 0)},includes:function(t){return et(Tt(this),t,arguments.length>1?arguments[1]:void 0)},join:function(t){return ct.apply(Tt(this),arguments)},lastIndexOf:function(t){return at.apply(Tt(this),arguments)},map:function(t){return xt(Tt(this),t,arguments.length>1?arguments[1]:void 0)},reduce:function(t){return st.apply(Tt(this),arguments)},reduceRight:function(t){return ut.apply(Tt(this),arguments)},reverse:function(){for(var t,e=Tt(this).length,n=Math.floor(e/2),o=0;o1?arguments[1]:void 0)},sort:function(t){return lt.call(Tt(this),t)},subarray:function(t,e){var n=Tt(this),o=n.length,r=y(t,o);return new(L(n,n[yt]))(n.buffer,n.byteOffset+r*n.BYTES_PER_ELEMENT,v((void 0===e?o:y(e,o))-r))}},Pt=function(t,e){return Ct(this,ft.call(Tt(this),t,e))},Rt=function(t){Tt(this);var e=Et(arguments[1],1),n=this.length,o=S(t),r=v(o.length),i=0;if(r+e>n)throw W("Wrong length!");for(;i255?255:255&o),r.v[p](n*e+r.o,o,St)}(this,n,t)},enumerable:!0})};b?(h=n(function(t,n,o,r){l(t,h,c,"_d");var i,a,s,u,f=0,p=0;if(x(n)){if(!(n instanceof Y||"ArrayBuffer"==(u=k(n))||"SharedArrayBuffer"==u))return bt in n?Bt(h,n):It.call(h,n);i=n,p=Et(o,e);var y=n.byteLength;if(void 0===r){if(y%e)throw W("Wrong length!");if((a=y-p)<0)throw W("Wrong length!")}else if((a=v(r)*e)+p>y)throw W("Wrong length!");s=a/e}else s=g(n),i=new Y(a=s*e);for(d(t,"_d",{b:i,o:p,l:a,e:s,v:new K(i)});f2&&void 0!==arguments[2]?arguments[2]:10,o=window.getSelection(),r=null;if(!o||!o.anchorNode||!o.focusNode)return null;var i=[o.anchorNode,o.focusNode];return i.forEach(function(o){for(var i=n;i>0&&o.parentNode&&(o.tagName!==t||(r=o,e&&o.classList&&!o.classList.contains(e)&&(r=null),!r));)o=o.parentNode,i--}),r}},{key:"expandToTag",value:function(t){var e=window.getSelection();e.removeAllRanges();var n=document.createRange();n.selectNodeContents(t),e.addRange(n)}}],[{key:"get",value:function(){return window.getSelection()}},{key:"CSS",get:function(){return{editorWrapper:"codex-editor",editorZone:"codex-editor__redactor"}}},{key:"anchorNode",get:function(){var t=window.getSelection();return t?t.anchorNode:null}},{key:"anchorOffset",get:function(){var t=window.getSelection();return t?t.anchorOffset:null}},{key:"isCollapsed",get:function(){var t=window.getSelection();return t?t.isCollapsed:null}},{key:"isAtEditor",get:function(){var e=t.get(),n=e.anchorNode||e.focusNode;n&&n.nodeType===Node.TEXT_NODE&&(n=n.parentNode);var o=null;return n&&(o=n.closest(".".concat(t.CSS.editorZone))),o&&o.nodeType===Node.ELEMENT_NODE}},{key:"range",get:function(){var t=window.getSelection();return t&&t.rangeCount?t.getRangeAt(0):null}},{key:"rect",get:function(){var t,e=document.selection,n={x:0,y:0,width:0,height:0};if(e&&"Control"!==e.type)return t=(e=e).createRange(),n.x=t.boundingLeft,n.y=t.boundingTop,n.width=t.boundingWidth,n.height=t.boundingHeight,n;if(!window.getSelection)return a.default.log("Method window.getSelection is not supported","warn"),n;if(null===(e=window.getSelection()).rangeCount||isNaN(e.rangeCount))return a.default.log("Method SelectionUtils.rangeCount is not supported","warn"),n;if((t=e.getRangeAt(0).cloneRange()).getBoundingClientRect&&(n=t.getBoundingClientRect()),0===n.x&&0===n.y){var o=document.createElement("span");if(o.getBoundingClientRect){o.appendChild(document.createTextNode("​")),t.insertNode(o),n=o.getBoundingClientRect();var r=o.parentNode;r.removeChild(o),r.normalize()}}return n}},{key:"text",get:function(){return window.getSelection?window.getSelection().toString():""}}]),t}();o.default=u,u.displayName="SelectionUtils",t.exports=e.default})?o.apply(e,r):o)||(t.exports=i)},function(t,e,n){var o=n(10);t.exports=function(t,e){if(!o(t))return t;var n,r;if(e&&"function"==typeof(n=t.toString)&&!o(r=n.call(t)))return r;if("function"==typeof(n=t.valueOf)&&!o(r=n.call(t)))return r;if(!e&&"function"==typeof(n=t.toString)&&!o(r=n.call(t)))return r;throw TypeError("Can't convert object to primitive value")}},function(t,e,n){var o=n(41)("meta"),r=n(10),i=n(21),a=n(14).f,s=0,u=Object.isExtensible||function(){return!0},c=!n(8)(function(){return u(Object.preventExtensions({}))}),l=function(t){a(t,o,{value:{i:"O"+ ++s,w:{}}})},f=t.exports={KEY:o,NEED:!1,fastKey:function(t,e){if(!r(t))return"symbol"==typeof t?t:("string"==typeof t?"S":"P")+t;if(!i(t,o)){if(!u(t))return"F";if(!e)return"E";l(t)}return t[o].i},getWeak:function(t,e){if(!i(t,o)){if(!u(t))return!0;if(!e)return!1;l(t)}return t[o].w},onFreeze:function(t){return c&&f.NEED&&u(t)&&!i(t,o)&&l(t),t}}},function(t,e){t.exports=function(t,e){return{enumerable:!(1&t),configurable:!(2&t),writable:!(4&t),value:e}}},function(t,e){var n=0,o=Math.random();t.exports=function(t){return"Symbol(".concat(void 0===t?"":t,")_",(++n+o).toString(36))}},function(t,e){t.exports=!1},function(t,e,n){var o=n(102),r=n(76);t.exports=Object.keys||function(t){return o(t,r)}},function(t,e,n){var o=n(35),r=Math.max,i=Math.min;t.exports=function(t,e){return(t=o(t))<0?r(t+e,0):i(t,e)}},function(t,e,n){var o=n(11),r=n(103),i=n(76),a=n(75)("IE_PROTO"),s=function(){},u=function(){var t,e=n(72)("iframe"),o=i.length;for(e.style.display="none",n(78).appendChild(e),e.src="javascript:",(t=e.contentWindow.document).open(),t.write(" + ``` ## Load Tools -Each Block at the CodeX Editor represented by [Tools](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 represented by [Tools](tools.md). There are simple external scripts with own logic. Probably you want to use several Block Tools that should be connected. For example check out our [Header](https://github.com/codex-editor/header) Tool that represents heading blocks. You can install Header Tool via the same ways as an Editor (Node.js, CDN, local file). -Check [CodeX Editor's community](https://github.com/codex-editor) to see Tools examples. +Check [Editor.js's community](https://github.com/codex-editor/) to see Tools examples. **Example:** use Header from CDN ```html - + ``` ## Create Editor instance -Create an instance of CodeX Editor 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). Minimal params is a `holderId`, `tools` list and `initialBlock` marker. ```html -
+
``` -You can create a simple Editor only with a default Paragraph Tool by passing a string with element's Id (wrapper for Editor) as a configuration param or use default `codex-editor`. +You can create a simple Editor only with a default Paragraph Tool by passing a string with element's Id (wrapper for Editor) as a configuration param or use default `editorjs`. ```javascript -var editor = new CodexEditor(); /** Zero-configuration */ +var editor = new EditorJS(); /** Zero-configuration */ // equals -var editor = new CodexEditor('codex-editor'); +var editor = new EditorJS('editorjs'); ```` Or pass a whole settings object. ```javascript -var editor = new CodexEditor({ +var editor = new EditorJS({ /** * Create a holder for the Editor and pass its ID */ - holderId : 'codex-editor', + holderId : 'editorjs', /** * Available Tools list. @@ -115,7 +115,7 @@ var editor = new CodexEditor({ ## Ready callback -CodeX Editor needs a bit time to initialize. It is an asynchronous action so it won't block execution of your main script. +Editor.js needs a bit time to initialize. It is an asynchronous action so it won't block execution of your main script. If you need to know when editor instance is ready you can use one of following ways: @@ -124,44 +124,44 @@ If you need to know when editor instance is ready you can use one of following w It must be a function: ```javascript -var editor = new CodexEditor({ +var editor = new EditorJS({ // Other configuration properties /** * onReady callback */ - onReady: () => {console.log('CodeX Editor is ready to work!')} + onReady: () => {console.log('Editor.js is ready to work!')} }); ``` #### Use `isReady` promise. -After you create new `CodexEditor` object it contains `isReady` property. +After you create new `EditorJS` object it contains `isReady` property. It is a Promise object resolved when editor is ready to work and rejected otherwise. If there is an error during initialization `isReady` promise will be rejected with error message. ```javascript -var editor = new CodexEditor(); +var editor = new EditorJS(); editor.isReady .then(() => { /** Do anything you need after editor initialization */ }) .catch((reason) => { - console.log(`CodeX Editor initialization failed because of ${reason}`) + console.log(`Editor.js initialization failed because of ${reason}`) }); ``` You can use `async/await` to keep your code looking synchronous: ```javascript -var editor = new CodexEditor(); +var editor = new EditorJS(); try { await editor.isReady; /** Do anything you need after editor initialization */ } catch (reason) { - console.log(`CodeX Editor initialization failed because of ${reason}`) + console.log(`Editor.js initialization failed because of ${reason}`) } ``` @@ -179,16 +179,16 @@ editor.saver.save() ## Features -Also CodeX Editor provides useful methods to work with Editor's state. +Also Editor.js provides useful methods to work with Editor's state. ```javascript -var editor = new CodexEditor({ +var editor = new EditorJS({ // Other configuration properties /** * onReady callback */ - onReady: () => {console.log('CodeX Editor is ready to work!')}, + onReady: () => {console.log('Editor.js is ready to work!')}, /** * onChange callback diff --git a/docs/sanitizer.md b/docs/sanitizer.md index ced01a2e..ad9230f9 100644 --- a/docs/sanitizer.md +++ b/docs/sanitizer.md @@ -1,4 +1,4 @@ -# CodeX Editor Sanitizer Module +# Editor.js Sanitizer Module The `Sanitizer` module represents a set of methods that clears taint strings. Uses lightweight npm package with simple API [html-janitor](https://www.npmjs.com/package/html-janitor) diff --git a/docs/toolbar-settings.md b/docs/toolbar-settings.md index d3082b75..c62289d2 100644 --- a/docs/toolbar-settings.md +++ b/docs/toolbar-settings.md @@ -1,4 +1,4 @@ -# CodeX Editor Toolbar Block Settings Module +# Editor.js Toolbar Block Settings Module Toolbar Module has space for Block settings. Settings divided into: - space for plugin's settings, that is described by «Plugin»'s Developer diff --git a/docs/tools.md b/docs/tools.md index 3576dc60..4215d968 100644 --- a/docs/tools.md +++ b/docs/tools.md @@ -1,6 +1,6 @@ -# CodeX Editor Tools +# Editor.js Tools -CodeX Editor is a block-oriented editor. It means that entry composed with the list of `Blocks` of different types: `Texts`, `Headers`, `Images`, `Quotes` etc. +Editor.js is a block-oriented editor. It means that entry composed with the list of `Blocks` of different types: `Texts`, `Headers`, `Images`, `Quotes` etc. `Tool` — is a class that provide custom `Block` type. All Tools represented by `Plugins`. @@ -14,7 +14,7 @@ Each Tool's instance called with an params object. | Param | Type | Description | | ------ | ------------------- | ----------------------------------------------- | -| api | [`IAPI`][iapi-link] | CodeX Editor's API methods | +| api | [`IAPI`][iapi-link] | Editor.js's API methods | | config | `object` | Special configuration params passed in «config» | | data | `object` | Data to be rendered in this Tool | @@ -56,7 +56,7 @@ Options that Tool can specify. All settings should be passed as static propertie | Name | Type | Default Value | Description | | -- | -- | -- | -- | | `toolbox` | _Object_ | `undefined` | Pass here `icon` and `title` to display this `Tool` in the Editor's `Toolbox`
`icon` - HTML string with icon for Toolbox
`title` - optional title to display in Toolbox | -| `enableLineBreaks` | _Boolean_ | `false` | With this option, CodeX Editor won't handle Enter keydowns. Can be helpful for Tools like `` where line breaks should be handled by default behaviour. | +| `enableLineBreaks` | _Boolean_ | `false` | With this option, Editor.js won't handle Enter keydowns. Can be helpful for Tools like `` where line breaks should be handled by default behaviour. | | `isInline` | _Boolean_ | `false` | Describes Tool as a [Tool for the Inline Toolbar](tools-inline.md) | ## User configuration @@ -65,8 +65,8 @@ All Tools can be configured by users. You can set up some of available settings to the `tools` property of Editor Config. ```javascript -var editor = new CodexEditor({ - holderId : 'codex-editor', +var editor = new EditorJS({ + holderId : 'editorjs', tools: { text: { class: Text, @@ -79,7 +79,7 @@ var editor = new CodexEditor({ }); ``` -There are few options available by CodeX Editor. +There are few options available by Editor.js. | Name | Type | Default Value | Description | | -- | -- | -- | -- | @@ -88,7 +88,7 @@ There are few options available by CodeX Editor. ## Paste handling -CodeX Editor handles paste on Blocks and provides API for Tools to process the pasted data. +Editor.js handles paste on Blocks and provides API for Tools to process the pasted data. When user pastes content into Editor, pasted content will be splitted into blocks. @@ -226,7 +226,7 @@ onPaste (event) { ## Sanitize -CodeX Editor provides [API](sanitizer.md) to clean taint strings. +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. ### Sanitizer Configuration @@ -298,7 +298,7 @@ save() { ### Automatic sanitize -If you pass the sanitizer config as static getter, CodeX Editor will automatically sanitize your saved data. +If you pass the sanitizer config as static getter, Editor.js will automatically sanitize your saved data. Note that if your Tool is allowed to use the Inline Toolbar, we will get sanitizing rules for each Inline Tool and merge with your passed config. diff --git a/docs/usage.md b/docs/usage.md index 3eabfd2f..600d0514 100644 --- a/docs/usage.md +++ b/docs/usage.md @@ -1,10 +1,10 @@ -# So how to use CodeX Editor +# So how to use Editor.js ## Basics -CodeX Editor is a Block-Styled editor. Blocks is a structural units, of which the Entry is composed. +Editor.js is a Block-Styled editor. Blocks is a structural units, of which the Entry is composed. For example, `Paragraph`, `Heading`, `Image`, `Video`, `List` are Blocks. Each Block is represented by a Plugin. -We have [many](http://github.com/codex-editor) ready-to-use Plugins and the [simple API](tools.md) for creation new ones. +We have [many](http://github.com/codex-editor/) ready-to-use Plugins and the [simple API](tools.md) for creation new ones. So how to use the Editor after [Installation](installation.md). @@ -40,7 +40,7 @@ Action | Shortcut | Restrictions Also we support shortcuts on the all type of Tools. Specify a shortcut with the Tools configuration. For example: ```js -var editor = CodexEditor({ +var editor = EditorJS({ //... tools: { header: { @@ -63,7 +63,7 @@ If you want to focus Editor after page has been loaded, you can enable autofocus ```js -var editor = CodexEditor({ +var editor = EditorJS({ //... autofocus: true //... diff --git a/example/example.html b/example/example.html index 86ec95cc..de43f4d8 100644 --- a/example/example.html +++ b/example/example.html @@ -2,7 +2,7 @@ - CodeX Editor 🤩🧦🤨 example + Editor.js 🤩🧦🤨 example @@ -11,14 +11,14 @@
- +
- Plugins + Plugins
-
+
editor.saver.save() @@ -51,12 +51,13 @@ + - - + +