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 <gohabereg@users.noreply.github.com>

* Update webpack.config.js

Co-Authored-By: gohabereg <gohabereg@users.noreply.github.com>

* Update bundle
This commit is contained in:
George Berezhnoy 2019-02-28 14:01:32 +03:00 committed by GitHub
parent 758c5080df
commit 69a5c21bb6
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
39 changed files with 218 additions and 202 deletions

3
.gitmodules vendored
View file

@ -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

View file

@ -1,13 +1,13 @@
<p align="center"><img src="https://capella.pics/3c0b525b-50d9-4720-8aad-9148114cfa6e.jpg"></p>
[![](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
<script src="codex-editor.js"></script>
<script src="editor.js"></script>
```
## 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
<div id="codex-editor"></div>
<div id="editorjs"></div>
```
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.

45
dist/codex-editor.js vendored

File diff suppressed because one or more lines are too long

45
dist/editor.js vendored Normal file

File diff suppressed because one or more lines are too long

View file

@ -1,5 +1,9 @@
# Changelog
### 2.10.0
- `New` Rename from CodeX Editor to Editor.js
### 2.9.5
- `New` — Toolbox now have beautiful helpers with Tool names and shortcuts
@ -50,7 +54,7 @@
### 2.7.28
- `New` [Tools Validation](https://github.com/codex-team/codex.editor/blob/master/docs/tools.md#validate-optional) is added.
- `New` [Tools Validation](https://github.com/codex-team/editor.js/blob/master/docs/tools.md#validate-optional) is added.
### 2.2.27
@ -75,16 +79,16 @@
### 2.2—2.7
- `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
@ -102,12 +106,12 @@ See a whole [Changelog](/docs/)
### 2.1-beta changelog
- `New` *Tools API* — support pasted content via drag-n-drop or from the Buffer. See [documentation](https://github.com/codex-team/codex.editor/blob/master/docs/tools.md#paste-handling) and [example](https://github.com/codex-editor/simple-image/blob/master/src/index.js#L177) at the Simple Image Tool.
- `New` *Tools API* — new `sanitize` getter for Tools for automatic HTML sanitizing of returned data. See [documentation](https://github.com/codex-team/codex.editor/blob/master/docs/tools.md#sanitize) and [example](https://github.com/codex-editor/paragraph/blob/master/src/index.js#L121) at the Paragraph Tool
- `New` Added `onChange`-callback, fired after any modifications at the Editor. See [documentation](https://github.com/codex-team/codex.editor/blob/master/docs/installation.md#features).
- `New` *Tools API* — support pasted content via drag-n-drop or from the Buffer. See [documentation](https://github.com/codex-team/editor.js/blob/master/docs/tools.md#paste-handling) and [example](https://github.com/codex-editor/simple-image/blob/master/src/index.js#L177) at the Simple Image Tool.
- `New` *Tools API* — new `sanitize` getter for Tools for automatic HTML sanitizing of returned data. See [documentation](https://github.com/codex-team/editor.js/blob/master/docs/tools.md#sanitize) and [example](https://github.com/codex-editor/paragraph/blob/master/src/index.js#L121) at the Paragraph Tool
- `New` Added `onChange`-callback, fired after any modifications at the Editor. See [documentation](https://github.com/codex-team/editor.js/blob/master/docs/installation.md#features).
- `New` New Inline Tool example — [Marker](https://github.com/codex-editor/marker)
- `New` New Inline Tool example — [Code](https://github.com/codex-editor/code)
- `New` New [CodeX Editor PHP](http://github.com/codex-team/codex.editor.backend) — example of server-side implementation with HTML purifying and data validation.
- `New` New [Editor.js PHP](http://github.com/codex-team/codex.editor.backend) — example of server-side implementation with HTML purifying and data validation.
- `Improvements` - Improvements of Toolbar's position calculation.
- `Improvements` — Improved zero-configuration initialization.
- and many little improvements.

View file

@ -1,8 +1,8 @@
# CodeX Editor API
# Editor.js API
Blocks have access to the public methods provided by CodeX Editor API Module. Plugin and Tune Developers
can use Editor API as they want.
Blocks have access to the public methods provided by Editor.js API Module. Plugin and Tune Developers
can use Editor\`s API as they want.
## Api object description
@ -40,7 +40,7 @@ Methods that working with Blocks
`clean(taintString, config)` - method uses HTMLJanitor to clean taint string.
CodeX Editor provides basic config without attributes, but you can inherit by passing your own config.
Editor.js provides basic config without attributes, but you can inherit by passing your own config.
If Tool enables inline-tools, we get it's sanitizing rules and merge with your passed custom rules.
@ -67,7 +67,7 @@ Methods that working with Toolbar
### EventsAPI
Methods that allows to subscribe on CodeX Editor events
Methods that allows to subscribe on Editor.js events
`on(eventName: string, callback: Function)` - subscribe callback on event
@ -117,7 +117,7 @@ If you need to show any messages for success or failure events you can use notif
Call on target Editor:
```javascript
let editor = new CodexEditor({
let editor = new EditorJS({
onReady: () => {
editor.notifier.show({
message: 'Editor is ready!'
@ -142,13 +142,13 @@ Check out [`codex-notifier` package page](https://github.com/codex-team/js-notif
### Destroy API
If there are necessity to remove CodeX Editor instance from the page you can use `destroy()` method.
If there are necessity to remove Editor.js instance from the page you can use `destroy()` method.
It makes following steps:
1. Clear the holder element by setting it\`s innerHTML to empty string
2. Remove all event listeners related to CodeX Editor
2. Remove all event listeners related to Editor.js
3. Delete all properties from instance object and set it\`s prototype to `null`

View file

@ -1,10 +1,10 @@
# CodeX Editor Caret Module
# Editor.js Caret Module
The `Caret` module contains methods working with caret. Uses [Range](https://developer.mozilla.org/en-US/docs/Web/API/Range) methods to navigate caret
between blocks.
Caret class implements basic Module class that holds User configuration
and default CodeX Editor instances
and default Editor.js instances
## Properties

View file

@ -1,4 +1,4 @@
# CodeX Editor Events Module
# Editor.js Events Module
Module allows Developers to subscribe on events or trigger own events
@ -10,7 +10,7 @@ Module allows Developers to subscribe on events or trigger own events
Events.on(eventName, callback)
```
> Method subscribes callback on event. It will be called when CodeX Editor emits this event
> Method subscribes callback on event. It will be called when Editor.js emits this event
#### params

View file

@ -1,6 +1,6 @@
# 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)
@ -8,7 +8,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 minimal available
Firstly you need to get Editor.js itself. It is a [minified script](../dist/editor.js) with minimal available
Choose the most usable method of getting Editor for you.
@ -21,20 +21,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 at 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@2.10.0`
Then require this script.
@ -44,55 +44,55 @@ Then require this script.
### Save sources to project
Copy [codex-editor.js](../build/codex-editor.js) file to your project and load it.
Copy [editorjs.js](../dist/editor.js) file to your project and load it.
```html
<script src="codex-editor.js"></script>
<script src="editor.js"></script>
```
## 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
<script src="https://cdn.jsdelivr.net/npm/codex.editor.header@2.0.4/dist/bundle.js"></script>
<script src="https://cdn.jsdelivr.net/npm/codex.editor.header@2.1.0/dist/bundle.js"></script>
```
## 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
<div id="codex-editor"></div>
<div id="editorjs"></div>
```
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

View file

@ -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)

View file

@ -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

View file

@ -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` <br /> `icon` - HTML string with icon for Toolbox <br /> `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 `<code>` 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 `<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) |
## 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.

View file

@ -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
//...

View file

@ -2,7 +2,7 @@
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CodeX Editor 🤩🧦🤨 example</title>
<title>Editor.js 🤩🧦🤨 example</title>
<link href="https://fonts.googleapis.com/css?family=PT+Mono" rel="stylesheet">
<link href="assets/demo.css" rel="stylesheet">
<script src="assets/json-preview.js"></script>
@ -11,14 +11,14 @@
<body>
<div class="ce-example">
<div class="ce-example__header">
<a class="ce-example__header-logo" href="https://ifmo.su/editor">CodeX Editor 🤩🧦🤨</a>
<a class="ce-example__header-logo" href="https://ifmo.su/editor">Editor.js 🤩🧦🤨</a>
<div class="ce-example__header-menu">
<a href="https://github.com/codex-editor" target="_blank">Plugins</a>
<a href="https://github.com/codex-editor/" target="_blank">Plugins</a>
</div>
</div>
<div class="ce-example__content _ce-example__content--small">
<div id="codex-editor"></div>
<div id="editorjs"></div>
<div class="ce-example__button" id="saveButton">
editor.saver.save()
@ -51,12 +51,13 @@
<script src="./tools/code/dist/bundle.js"></script><!-- Code -->
<script src="./tools/embed/dist/bundle.js"></script><!-- Embed -->
<script src="./tools/table/dist/bundle.js"></script><!-- Table -->
<script src="./tools/link/dist/bundle.js"></script><!-- Link -->
<script src="./tools/marker/dist/bundle.js"></script><!-- Marker -->
<script src="./tools/inline-code/dist/bundle.js"></script><!-- Inline Code -->
<!-- Load CodeX Editor's Core -->
<script src="../dist/codex-editor.js"></script>
<!-- Load Editor.js's Core -->
<script src="../dist/editor.js"></script>
<!-- Initialization -->
<script>
@ -69,11 +70,11 @@
* To initialize the Editor, create a new instance with configuration object
* @see docs/installation.md for mode details
*/
var editor = new CodexEditor({
var editor = new EditorJS({
/**
* Wrapper of Editor
*/
holderId: 'codex-editor',
holderId: 'editorjs',
/**
* Tools list
@ -137,6 +138,8 @@
shortcut: 'CMD+SHIFT+C'
},
link: LinkTool,
embed: Embed,
table: {
@ -160,7 +163,7 @@
{
type: "header",
data: {
text: "CodeX Editor",
text: "Editor.js",
level: 2
}
},
@ -198,7 +201,7 @@
{
type : 'paragraph',
data : {
text : 'Блоки — это структурные элементы, из которых состоит статья. Например <code class="inline-code">Параграф</code>, <code class="inline-code">Заголовок</code>, <code class="inline-code">Изображение</code>, <code class="inline-code">Видео</code> — это все Блоки. В CodeX Editor каждый Блок определяется плагином. Есть много готовых Блоков и простой API для создания новых. Например, вы можете создать Блок для Твиттера, Инстаграма, Опроса, Игры или CTA-кнопки.'
text : 'Блоки — это структурные элементы, из которых состоит статья. Например <code class="inline-code">Параграф</code>, <code class="inline-code">Заголовок</code>, <code class="inline-code">Изображение</code>, <code class="inline-code">Видео</code> — это все Блоки. В Editor.js каждый Блок определяется плагином. Есть много готовых Блоков и простой API для создания новых. Например, вы можете создать Блок для Твиттера, Инстаграма, Опроса, Игры или CTA-кнопки.'
}
},
{
@ -211,7 +214,7 @@
{
type : 'paragraph',
data : {
text : 'В отличие от WYSIWYG-редакторов, CodeX Editor возвращает не сгенерированный HTML-код, включающий и содержание и оформление статьи, а JSON с данными о каждом Блоке. Пример таких данных находится внизу этой страницы.'
text : 'В отличие от WYSIWYG-редакторов, Editor.js возвращает не сгенерированный HTML-код, включающий и содержание и оформление статьи, а JSON с данными о каждом Блоке. Пример таких данных находится внизу этой страницы.'
}
},
{

@ -1 +1 @@
Subproject commit 4e5231ada9633f7cc8a80653d5dd98277da5a87e
Subproject commit d8f0ce863d5982dcfdd6df7b13d7ce4e4422ac05

@ -1 +1 @@
Subproject commit 053304d129d8f5ecb1ba006e4d573a8fb64e7e3e
Subproject commit b17a516480d7b22d1b7f3f7effe811a86b2662d1

@ -1 +1 @@
Subproject commit 93ee8acdb3a57864402c36a53ccacb123075ffa2
Subproject commit ff065f6263cb410fe1f5f9ca2ef1b38037aa2f71

1
example/tools/link Submodule

@ -0,0 +1 @@
Subproject commit a4c69756d72f73e6065719b1cb7cc0c6d6628605

@ -1 +1 @@
Subproject commit df426dc78bb7fee3674d21a178409bef30a04f06
Subproject commit bf49d04b83af94a25a4cfdebddce1987a30723d4

@ -1 +1 @@
Subproject commit 7df206e82fb5d5a87728c7076417118f09ab6d09
Subproject commit 1f51ce71240cafe7848573769f7db9b0f8a28885

@ -1 +1 @@
Subproject commit d026d7d36f1b20e24ea7990b4f629b5b3abb8791
Subproject commit b5e32c589cc20799aaa1f8e992bf3ef44869394f

View file

@ -1,13 +1,20 @@
{
"name": "codex.editor",
"version": "2.9.5",
"description": "CodeX Editor. Native JS, based on API and Open Source",
"main": "dist/codex-editor.js",
"name": "@editorjs/editorjs",
"version": "2.10.0",
"description": "Editor.js — Native JS, based on API and Open Source",
"main": "dist/editor.js",
"types": "./types/index.d.ts",
"keywords": [
"codex editor",
"text editor",
"editor",
"editor.js",
"editorjs"
],
"scripts": {
"build": "rimraf dist/* && yarn svg && yarn build:prod",
"build:win": "rimraf dist && yarn svg:win && yarn build:prod",
"build:dev": "webpack --mode development --progress --display-error-details --display-entrypoints --watch",
"build:dev": "webpack --mode development --progress --display-error-details --display-entrypoints --watch",
"build:prod": "webpack --mode production",
"svg:win": "if not exist dist md dist && yarn svg",
"svg": "svg-sprite-generate -d src/assets/ -o dist/sprite.svg",
@ -17,7 +24,7 @@
"license": "Apache-2.0",
"repository": {
"type": "git",
"url": "git+https://github.com/codex-team/codex.editor.git"
"url": "git+https://github.com/codex-team/editor.js.git"
},
"devDependencies": {
"@babel/core": "^7.1.2",

View file

@ -12,7 +12,7 @@ import 'components/polyfills';
import Core from './components/core';
/**
* Codex Editor
* Editor.js
*
* Short Description (_눈;)
* @version 2.0
@ -20,7 +20,7 @@ import Core from './components/core';
* @licence Apache-2.0
* @author CodeX-Team <https://ifmo.su>
*/
export default class CodexEditor {
export default class EditorJS {
/**
* Promise that resolves when core modules are ready and UI is rendered on the page
*/
@ -56,7 +56,7 @@ export default class CodexEditor {
}
/**
* Create a CodeX Editor instance
* Create a Editor.js instance
*/
const editor = new Core(configuration);

View file

@ -10,7 +10,7 @@ import $ from '../dom';
export default class DeleteTune implements BlockTune {
/**
* Property that contains CodeX Editor API methods
* Property that contains Editor.js API methods
* @see {docs/api.md}
*/
private readonly api: API;

View file

@ -10,7 +10,7 @@ import {API, BlockTune} from '../../../types';
export default class MoveDownTune implements BlockTune {
/**
* Property that contains CodeX Editor API methods
* Property that contains Editor.js API methods
* @see {api.md}
*/
private readonly api: API;

View file

@ -10,7 +10,7 @@ import {API, BlockTune} from '../../../types';
export default class MoveUpTune implements BlockTune {
/**
* Property that contains CodeX Editor API methods
* Property that contains Editor.js API methods
* @see {api.md}
*/
private readonly api: API;

View file

@ -28,7 +28,7 @@ contextRequire.keys().forEach((filename) => {
/**
* @class Core
*
* @classdesc CodeX Editor core class
* @classdesc Editor.js core class
*
* @property this.config - all settings
* @property this.moduleInstances - constructed editor components
@ -58,7 +58,7 @@ export default class Core {
*/
constructor(config?: EditorConfig|string) {
/**
* Ready promise. Resolved if CodeX Editor is ready to work, rejected otherwise
* Ready promise. Resolved if Editor.js is ready to work, rejected otherwise
*/
let onReady, onFail;
@ -96,7 +96,7 @@ export default class Core {
}, 500);
})
.catch((error) => {
_.log(`CodeX Editor does not ready because of ${error}`, 'error');
_.log(`Editor.js is not ready because of ${error}`, 'error');
/**
* Reject this.isReady promise
@ -130,7 +130,7 @@ export default class Core {
* If holderId is empty then set a default value
*/
if (!this.config.holderId || typeof this.config.holderId !== 'string') {
this.config.holderId = 'codex-editor';
this.config.holderId = 'editorjs';
}
/**

View file

@ -91,7 +91,7 @@ export default class LinkInlineTool implements InlineTool {
private notifier: Notifier;
/**
* @param {{api: API}} - CodeX Editor API
* @param {{api: API}} - Editor.js API
*/
constructor({api}) {
this.inlineToolbar = api.toolbar;

View file

@ -3,7 +3,7 @@ import {Sanitizer} from '../../../../types/api';
/**
* @class SanitizerAPI
* Provides CodeX Editor Sanitizer that allows developers to clean their HTML
* Provides Editor.js Sanitizer that allows developers to clean their HTML
*/
export default class SanitizerAPI extends Module {
/**

View file

@ -1,5 +1,4 @@
import Module from '../__module';
import {EditorConfig} from '../../../types';
/**
* Event listener information
@ -29,7 +28,7 @@ export interface ListenerData {
}
/**
* Codex Editor Listeners module
* Editor.js Listeners module
*
* @module Listeners
*

View file

@ -4,7 +4,7 @@ import {BlockToolData} from '../../../types';
import {BlockToolConstructable} from '../../../types/tools';
/**
* Codex Editor Renderer Module
* Editor.js Renderer Module
*
* @module Renderer
* @author CodeX Team
@ -92,7 +92,7 @@ export default class Renderer extends Module {
stub.stretched = true;
_.log(`Tool «${tool}» is not found. Check 'tools' property at your initial CodeX Editor config.`, 'warn');
_.log(`Tool «${tool}» is not found. Check 'tools' property at your initial Editor.js config.`, 'warn');
}
}
}

View file

@ -11,7 +11,7 @@
* 1) When you have an instance
* - this.Editor.Sanitizer.clean(yourTaintString);
* 2) As static method
* - CodexEditor.Sanitizer.clean(yourTaintString, yourCustomConfiguration);
* - EditorJS.Sanitizer.clean(yourTaintString, yourCustomConfiguration);
*
* {@link SanitizerConfig}
*/

View file

@ -1,5 +1,5 @@
/**
* Codex Editor Saver
* Editor.js Saver
*
* @module Saver
* @author Codex Team
@ -9,7 +9,6 @@ import Module from '../__module';
import {OutputData} from '../../../types';
import {ValidatedData} from '../../types-internal/block-data';
import Block from '../block';
import _ from '../utils';
declare const VERSION: string;
@ -68,7 +67,7 @@ export default class Saver extends Module {
let totalTime = 0;
const blocks = [];
console.groupCollapsed('[CodexEditor saving]:');
console.groupCollapsed('[Editor.js saving]:');
allExtractedData.forEach(({tool, data, time, isValid}) => {
totalTime += time;

View file

@ -8,7 +8,7 @@ import LinkInlineTool from '../inline-tools/inline-tool-link';
import Stub from '../tools/stub';
/**
* @module Codex Editor Tools Submodule
* @module Editor.js Tools Submodule
*
* Creates Instances from Plugins and binds external config to the instances
*/

View file

@ -17,7 +17,7 @@ import Selection from '../selection';
/**
* @class
*
* @classdesc Makes CodeX Editor UI:
* @classdesc Makes Editor.js UI:
* <codex-editor>
* <ce-redactor />
* <ce-toolbar />
@ -25,8 +25,8 @@ import Selection from '../selection';
* </codex-editor>
*
* @typedef {UI} UI
* @property {EditorConfig} config - editor configuration {@link CodexEditor#configuration}
* @property {Object} Editor - available editor modules {@link CodexEditor#moduleInstances}
* @property {EditorConfig} config - editor configuration {@link EditorJS#configuration}
* @property {Object} Editor - available editor modules {@link EditorJS#moduleInstances}
* @property {Object} nodes -
* @property {Element} nodes.holder - element where we need to append redactor
* @property {Element} nodes.wrapper - <codex-editor>
@ -35,7 +35,7 @@ import Selection from '../selection';
export default class UI extends Module {
/**
* CodeX Editor UI CSS class names
* Editor.js UI CSS class names
* @return {{editorWrapper: string, editorZone: string}}
*/
public static get CSS(): {
@ -125,12 +125,12 @@ export default class UI extends Module {
}
/**
* Makes CodeX Editor interface
* Makes Editor.js interface
* @return {Promise<void>}
*/
private async make(): Promise<void> {
/**
* Element where we need to append CodeX Editor
* Element where we need to append Editor.js
* @type {Element}
*/
this.nodes.holder = document.getElementById(this.config.holderId);
@ -180,7 +180,7 @@ export default class UI extends Module {
}
/**
* Bind events on the CodeX Editor interface
* Bind events on the Editor.js interface
*/
private bindEvents(): void {
this.Editor.Listeners.on(

@ -1 +1 @@
Subproject commit aae39961e3c806958df3d7cded0cca956b70362f
Subproject commit 405dfd3f5d84210499ecdf09ef7af4346cec8058

View file

@ -20,7 +20,7 @@ export interface ChainData {
}
/**
* Codex Editor Util
* Editor.js utils
*/
export default class Util {
/**

View file

@ -27,13 +27,13 @@ module.exports = (env, argv) => {
return {
entry: {
'codex-editor': ['@babel/polyfill/noConflict', './src/codex.ts']
'editor': ['@babel/polyfill/noConflict', './src/codex.ts']
},
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name].js',
library: [ 'CodexEditor' ],
library: [ 'EditorJS' ],
libraryTarget: 'umd'
},
@ -57,7 +57,7 @@ module.exports = (env, argv) => {
}),
new webpack.BannerPlugin({
banner: `Codex Editor\n\n@version ${VERSION}\n\n@licence Apache-2.0\n@author CodeX-Team <https://ifmo.su>\n\n@uses html-janitor\n@licence Apache-2.0 (https://github.com/guardian/html-janitor/blob/master/LICENSE)`
banner: `Editor.js\n\n@version ${VERSION}\n\n@licence Apache-2.0\n@author CodeX <https://codex.so>\n\n@uses html-janitor\n@licence Apache-2.0 (https://github.com/guardian/html-janitor/blob/master/LICENSE)`
}),
new LicenseWebpackPlugin()