mirror of
https://github.com/codex-team/editor.js
synced 2024-06-10 09:52:36 +02:00
Merge branch 'next' into fix_split_custom_event
This commit is contained in:
commit
f66f47dfac
19
.babelrc
19
.babelrc
|
@ -1,19 +0,0 @@
|
|||
{
|
||||
"presets": [
|
||||
["@babel/preset-env", {
|
||||
"modules": "umd",
|
||||
"useBuiltIns": "entry",
|
||||
"corejs": 3
|
||||
}]
|
||||
],
|
||||
"plugins": [
|
||||
"babel-plugin-add-module-exports",
|
||||
"babel-plugin-class-display-name",
|
||||
"@babel/plugin-transform-runtime"
|
||||
],
|
||||
"env": {
|
||||
"test": {
|
||||
"plugins": [ "istanbul" ]
|
||||
}
|
||||
}
|
||||
}
|
39
.github/workflows/cypress.yml
vendored
39
.github/workflows/cypress.yml
vendored
|
@ -1,42 +1,21 @@
|
|||
name: Tests
|
||||
name: Cypress
|
||||
|
||||
on: [pull_request]
|
||||
|
||||
jobs:
|
||||
firefox:
|
||||
run-tests:
|
||||
strategy:
|
||||
matrix:
|
||||
browser: [firefox, chrome, edge]
|
||||
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/setup-node@v3
|
||||
with:
|
||||
node-version: 16
|
||||
- uses: actions/checkout@v3
|
||||
- run: yarn ci:pull_paragraph
|
||||
- uses: cypress-io/github-action@v5
|
||||
with:
|
||||
config: video=false
|
||||
browser: firefox
|
||||
build: yarn build
|
||||
chrome:
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/setup-node@v3
|
||||
with:
|
||||
node-version: 16
|
||||
- uses: actions/checkout@v3
|
||||
- run: yarn ci:pull_paragraph
|
||||
- uses: cypress-io/github-action@v5
|
||||
with:
|
||||
config: video=false
|
||||
browser: chrome
|
||||
build: yarn build
|
||||
edge:
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/setup-node@v3
|
||||
with:
|
||||
node-version: 16
|
||||
- uses: actions/checkout@v3
|
||||
- run: yarn ci:pull_paragraph
|
||||
- uses: cypress-io/github-action@v5
|
||||
with:
|
||||
config: video=false
|
||||
browser: edge
|
||||
browser: ${{ matrix.browser }}
|
||||
build: yarn build
|
||||
|
|
3
.github/workflows/eslint.yml
vendored
3
.github/workflows/eslint.yml
vendored
|
@ -19,6 +19,5 @@ jobs:
|
|||
${{ runner.OS }}-build-
|
||||
${{ runner.OS }}-
|
||||
|
||||
- run: yarn install
|
||||
|
||||
- run: yarn
|
||||
- run: yarn lint
|
||||
|
|
3
.gitmodules
vendored
3
.gitmodules
vendored
|
@ -16,9 +16,6 @@
|
|||
[submodule "example/tools/simple-image"]
|
||||
path = example/tools/simple-image
|
||||
url = https://github.com/editor-js/simple-image
|
||||
[submodule "src/tools/paragraph"]
|
||||
path = src/tools/paragraph
|
||||
url = https://github.com/editor-js/paragraph
|
||||
[submodule "example/tools/marker"]
|
||||
path = example/tools/marker
|
||||
url = https://github.com/editor-js/marker
|
||||
|
|
|
@ -1,8 +1,4 @@
|
|||
plugins:
|
||||
# Consumes files by @import rule
|
||||
# https://github.com/postcss/postcss-import
|
||||
postcss-import: {}
|
||||
|
||||
# Apply custom property sets via @apply rule
|
||||
# https://github.com/pascalduez/postcss-apply
|
||||
postcss-apply: {}
|
||||
|
@ -26,16 +22,6 @@ plugins:
|
|||
# https://github.com/csstools/postcss-preset-env#preserve
|
||||
preserve: false
|
||||
|
||||
# Enable or disable specific polyfills
|
||||
# https://github.com/csstools/postcss-preset-env#features
|
||||
#
|
||||
# List of available plugins
|
||||
# https://github.com/csstools/postcss-preset-env/blob/master/src/lib/plugins-by-id.js
|
||||
features:
|
||||
# Modify colors using the color-mod() function in CSS
|
||||
# https://github.com/jonathantneal/postcss-color-mod-function
|
||||
color-mod-function: {}
|
||||
|
||||
# Nested rules unwrapper
|
||||
# https://github.com/postcss/postcss-nested
|
||||
#
|
||||
|
@ -43,7 +29,3 @@ plugins:
|
|||
# 'postcss-nesting' feature but it does not work with BEM
|
||||
# Report: https://github.com/csstools/postcss-preset-env/issues/40
|
||||
postcss-nested: {}
|
||||
|
||||
# Compression tool
|
||||
# https://github.com/cssnano/cssnano
|
||||
cssnano: {}
|
||||
|
|
|
@ -2,6 +2,7 @@
|
|||
|
||||
### 2.27.0
|
||||
|
||||
- `New` — *Toolbar API* — Toolbox toggling method added.
|
||||
- `Refactoring` — Popover class refactored.
|
||||
- `Improvement` — *Toolbox* — Number of `close()` method calls optimized.
|
||||
- `Improvement` — The `onChange` callback won't be triggered only if all mutations contain nodes with the `data-mutation-free` attributes.
|
||||
|
@ -13,6 +14,7 @@
|
|||
- `Fix` — *ToolsAPI* — `pasteConfig` getter with `false` value could be used to disable paste handling by Editor.js core. Could be useful if your tool has its own paste handler.
|
||||
- `Improvement` — *Dependencies* — Upgrade Cypress to v12, upgrade related libraries to latest versions.
|
||||
- `CI` — Use Ubuntu container for Edge tests runner.
|
||||
- `Improvement` — Use Vite as build system instead of Webpack.
|
||||
|
||||
### 2.26.5
|
||||
|
||||
|
|
|
@ -10,8 +10,8 @@
|
|||
<meta charset="UTF-8">
|
||||
<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>
|
||||
<link href="../public/assets/demo.css" rel="stylesheet">
|
||||
<script src="../public/assets/json-preview.js"></script>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
|
||||
</head>
|
||||
<body>
|
||||
|
@ -107,7 +107,7 @@
|
|||
<script src="./tools/inline-code/dist/bundle.js"></script><!-- Inline Code -->
|
||||
|
||||
<!-- Load Editor.js's Core -->
|
||||
<script src="../dist/editor.js" onload="document.getElementById('hint-core').hidden = true;"></script>
|
||||
<script src="../dist/editorjs.umd.js" onload="document.getElementById('hint-core').hidden = true;"></script>
|
||||
|
||||
<!-- Initialization -->
|
||||
<script>
|
||||
|
|
|
@ -10,8 +10,8 @@
|
|||
<meta charset="UTF-8">
|
||||
<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>
|
||||
<link href="../public/assets/demo.css" rel="stylesheet">
|
||||
<script src="../public/assets/json-preview.js"></script>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
|
||||
</head>
|
||||
<body>
|
||||
|
@ -61,7 +61,7 @@
|
|||
<script src="https://cdn.jsdelivr.net/npm/@editorjs/inline-code@latest"></script><!-- Inline Code -->
|
||||
|
||||
<!-- Load Editor.js's Core -->
|
||||
<script src="../dist/editor.js" onload="document.getElementById('hint-core').hidden = true"></script>
|
||||
<script src="../dist/editorjs.umd.js" onload="document.getElementById('hint-core').hidden = true"></script>
|
||||
|
||||
<!-- Initialization -->
|
||||
<script>
|
||||
|
|
|
@ -9,7 +9,7 @@
|
|||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Editor.js 🤩🧦🤨 example: Multiple instances</title>
|
||||
<link href="assets/demo.css" rel="stylesheet">
|
||||
<link href="../public/assets/demo.css" rel="stylesheet">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
|
||||
</head>
|
||||
<body>
|
||||
|
@ -41,7 +41,7 @@
|
|||
</div>
|
||||
|
||||
<!-- Load Editor.js's Core -->
|
||||
<script src="../dist/editor.js" onload="document.getElementById('hint-core').hidden = true"></script>
|
||||
<script src="../dist/editorjs.umd.js" onload="document.getElementById('hint-core').hidden = true"></script>
|
||||
<script src="./tools/header/dist/bundle.js"></script><!-- Header -->
|
||||
|
||||
<!-- Initialization -->
|
||||
|
|
|
@ -9,7 +9,7 @@
|
|||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Editor.js 🤩🧦🤨 example: Popup</title>
|
||||
<link href="assets/demo.css" rel="stylesheet">
|
||||
<link href="../public/assets/demo.css" rel="stylesheet">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
|
||||
</head>
|
||||
<body>
|
||||
|
@ -111,7 +111,7 @@
|
|||
</div>
|
||||
|
||||
<!-- Load Editor.js's Core -->
|
||||
<script src="../dist/editor.js" onload="document.getElementById('hint-core').hidden = true"></script>
|
||||
<script src="../dist/editorjs.umd.js" onload="document.getElementById('hint-core').hidden = true"></script>
|
||||
<script src="./tools/header/dist/bundle.js"></script><!-- Header -->
|
||||
|
||||
<!-- Initialization -->
|
||||
|
|
|
@ -9,8 +9,8 @@
|
|||
<meta charset="UTF-8">
|
||||
<title>Editor.js RTL 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>
|
||||
<link href="../public/assets/demo.css" rel="stylesheet">
|
||||
<script src="../public/assets/json-preview.js"></script>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
|
||||
</head>
|
||||
<body>
|
||||
|
@ -70,7 +70,7 @@
|
|||
<script src="./tools/inline-code/dist/bundle.js"></script><!-- Inline Code -->
|
||||
|
||||
<!-- Load Editor.js's Core -->
|
||||
<script src="../dist/editor.js" onload="document.getElementById('hint-core').hidden = true"></script>
|
||||
<script src="../dist/editorjs.umd.js" onload="document.getElementById('hint-core').hidden = true"></script>
|
||||
|
||||
<!-- Initialization -->
|
||||
<script>
|
||||
|
|
|
@ -4,8 +4,8 @@
|
|||
<meta charset="UTF-8">
|
||||
<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>
|
||||
<link href="../public/assets/demo.css" rel="stylesheet">
|
||||
<script src="../public/assets/json-preview.js"></script>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
|
||||
</head>
|
||||
<body>
|
||||
|
|
409
index.html
Normal file
409
index.html
Normal file
|
@ -0,0 +1,409 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<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>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
|
||||
</head>
|
||||
<body>
|
||||
<script>
|
||||
if (localStorage.getItem('theme') === 'dark') {
|
||||
document.body.classList.add("dark-mode");
|
||||
}
|
||||
</script>
|
||||
<div class="ce-example">
|
||||
<div class="ce-example__header">
|
||||
<a class="ce-example__header-logo" href="https://codex.so/editor">Editor.js 🤩🧦🤨</a>
|
||||
|
||||
<div class="ce-example__header-menu">
|
||||
<a href="https://github.com/editor-js" target="_blank">Plugins</a>
|
||||
<a href="https://editorjs.io/usage" target="_blank">Usage</a>
|
||||
<a href="https://editorjs.io/configuration" target="_blank">Configuration</a>
|
||||
<a href="https://editorjs.io/creating-a-block-tool" target="_blank">API</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ce-example__content">
|
||||
<div id="editorjs"></div>
|
||||
<div class="ce-example__button" id="saveButton">
|
||||
editor.save()
|
||||
</div>
|
||||
<div class="ce-example__statusbar">
|
||||
<div class="ce-example__statusbar-item">
|
||||
Readonly:
|
||||
<b id="readonly-state">
|
||||
Off
|
||||
</b>
|
||||
|
||||
<div class="ce-example__statusbar-button" id="toggleReadOnlyButton">
|
||||
toggle
|
||||
</div>
|
||||
</div>
|
||||
<div class="ce-example__statusbar-item">
|
||||
<div class="ce-example__statusbar-button" id="showBlocksBoundariesButton">
|
||||
<span data-toggled-text="Hide">Show</span>
|
||||
blocks boundaries
|
||||
</div>
|
||||
</div>
|
||||
<div class="ce-example__statusbar-item">
|
||||
<div class="ce-example__statusbar-button" id="enableThinModeButton">
|
||||
<span data-toggled-text="Disable">Enable</span>
|
||||
thin mode
|
||||
</div>
|
||||
</div>
|
||||
<div class="ce-example__statusbar-item ce-example__statusbar-item--right">
|
||||
<div class="ce-example__statusbar-toggler" id="darkThemeToggler">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ce-example__output">
|
||||
<pre class="ce-example__output-content" id="output"></pre>
|
||||
|
||||
<div class="ce-example__output-footer">
|
||||
<a href="https://codex.so" style="font-weight: bold;">Made by CodeX</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Load Tools -->
|
||||
<!--
|
||||
You can upload Tools to your project's directory and connect them by relative links.
|
||||
|
||||
Also you can load each Tool from CDN or use NPM/Yarn packages.
|
||||
|
||||
Read more at Tools Connection doc:
|
||||
https://editorjs.io/getting-started#tools-connection
|
||||
-->
|
||||
<script src="https://cdn.jsdelivr.net/npm/@editorjs/header@latest"></script><!-- Header -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/@editorjs/simple-image@latest"></script><!-- Image -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/@editorjs/delimiter@latest"></script><!-- Delimiter -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/@editorjs/nested-list@latest"></script><!-- List -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/@editorjs/checklist@latest"></script><!-- Checklist -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/@editorjs/quote@latest"></script><!-- Quote -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/@editorjs/code@latest"></script><!-- Code -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/@editorjs/embed@latest"></script><!-- Embed -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/@editorjs/table@latest"></script><!-- Table -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/@editorjs/link@latest"></script><!-- Link -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/@editorjs/warning@latest"></script><!-- Warning -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/@editorjs/raw@latest"></script><!-- Raw -->
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/@editorjs/marker@latest"></script><!-- Marker -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/@editorjs/inline-code@latest"></script><!-- Inline Code -->
|
||||
|
||||
<!-- Initialization -->
|
||||
<script type="module">
|
||||
import EditorJS from './src/codex.ts';
|
||||
|
||||
/**
|
||||
* To initialize the Editor, create a new instance with configuration object
|
||||
* @see docs/installation.md for mode details
|
||||
*/
|
||||
const editorConfig = {
|
||||
/**
|
||||
* 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
|
||||
*/
|
||||
tools: {
|
||||
/**
|
||||
* Each Tool is a Plugin. Pass them via 'class' option with necessary settings {@link docs/tools.md}
|
||||
*/
|
||||
header: {
|
||||
class: Header,
|
||||
inlineToolbar: ['marker', 'link'],
|
||||
config: {
|
||||
placeholder: 'Header'
|
||||
},
|
||||
shortcut: 'CMD+SHIFT+H'
|
||||
},
|
||||
|
||||
/**
|
||||
* Or pass class directly without any configuration
|
||||
*/
|
||||
image: SimpleImage,
|
||||
|
||||
list: {
|
||||
class: NestedList,
|
||||
inlineToolbar: true,
|
||||
shortcut: 'CMD+SHIFT+L'
|
||||
},
|
||||
|
||||
checklist: {
|
||||
class: Checklist,
|
||||
inlineToolbar: true,
|
||||
},
|
||||
|
||||
quote: {
|
||||
class: Quote,
|
||||
inlineToolbar: true,
|
||||
config: {
|
||||
quotePlaceholder: 'Enter a quote',
|
||||
captionPlaceholder: 'Quote\'s author',
|
||||
},
|
||||
shortcut: 'CMD+SHIFT+O'
|
||||
},
|
||||
|
||||
warning: Warning,
|
||||
|
||||
marker: {
|
||||
class: Marker,
|
||||
shortcut: 'CMD+SHIFT+M'
|
||||
},
|
||||
|
||||
code: {
|
||||
class: CodeTool,
|
||||
shortcut: 'CMD+SHIFT+C'
|
||||
},
|
||||
|
||||
delimiter: Delimiter,
|
||||
|
||||
inlineCode: {
|
||||
class: InlineCode,
|
||||
shortcut: 'CMD+SHIFT+C'
|
||||
},
|
||||
|
||||
linkTool: LinkTool,
|
||||
|
||||
raw: RawTool,
|
||||
|
||||
embed: Embed,
|
||||
|
||||
table: {
|
||||
class: Table,
|
||||
inlineToolbar: true,
|
||||
shortcut: 'CMD+ALT+T'
|
||||
},
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* This Tool will be used as default
|
||||
*/
|
||||
// defaultBlock: 'paragraph',
|
||||
|
||||
/**
|
||||
* Initial Editor data
|
||||
*/
|
||||
data: {
|
||||
blocks: [
|
||||
{
|
||||
id: "zcKCF1S7X8",
|
||||
type: "header",
|
||||
data: {
|
||||
text: "Editor.js",
|
||||
level: 1
|
||||
}
|
||||
},
|
||||
{
|
||||
id: "b6ji-DvaKb",
|
||||
type: "paragraph",
|
||||
data: {
|
||||
text: "Hey. Meet the new Editor. On this page you can see it in action — try to edit this text. Source code of the page contains the example of connection and configuration."
|
||||
}
|
||||
},
|
||||
{
|
||||
type: "header",
|
||||
id: "7ItVl5biRo",
|
||||
data: {
|
||||
text: "Key features",
|
||||
level: 2
|
||||
}
|
||||
},
|
||||
{
|
||||
type : 'list',
|
||||
id: "SSBSguGvP7",
|
||||
data : {
|
||||
items : [
|
||||
{
|
||||
content: 'It is a block-styled editor',
|
||||
items: []
|
||||
},
|
||||
{
|
||||
content: 'It returns clean data output in JSON',
|
||||
items: []
|
||||
},
|
||||
{
|
||||
content: 'Designed to be extendable and pluggable with a simple API',
|
||||
items: []
|
||||
}
|
||||
],
|
||||
style: 'unordered'
|
||||
}
|
||||
},
|
||||
{
|
||||
type: "header",
|
||||
id: "QZFox1m_ul",
|
||||
data: {
|
||||
text: "What does it mean «block-styled editor»",
|
||||
level: 2
|
||||
}
|
||||
},
|
||||
{
|
||||
type : 'paragraph',
|
||||
id: "bwnFX5LoX7",
|
||||
data : {
|
||||
text : 'Workspace in classic editors is made of a single contenteditable element, used to create different HTML markups. Editor.js <mark class=\"cdx-marker\">workspace consists of separate Blocks: paragraphs, headings, images, lists, quotes, etc</mark>. Each of them is an independent contenteditable element (or more complex structure) provided by Plugin and united by Editor\'s Core.'
|
||||
}
|
||||
},
|
||||
{
|
||||
type : 'paragraph',
|
||||
id: "mTrPOHAQTe",
|
||||
data : {
|
||||
text : `There are dozens of <a href="https://github.com/editor-js">ready-to-use Blocks</a> and the <a href="https://editorjs.io/creating-a-block-tool">simple API</a> for creation any Block you need. For example, you can implement Blocks for Tweets, Instagram posts, surveys and polls, CTA-buttons and even games.`
|
||||
}
|
||||
},
|
||||
{
|
||||
type: "header",
|
||||
id: "1sYMhUrznu",
|
||||
data: {
|
||||
text: "What does it mean clean data output",
|
||||
level: 2
|
||||
}
|
||||
},
|
||||
{
|
||||
type : 'paragraph',
|
||||
id: "jpd7WEXrJG",
|
||||
data : {
|
||||
text : 'Classic WYSIWYG-editors produce raw HTML-markup with both content data and content appearance. On the contrary, Editor.js outputs JSON object with data of each Block. You can see an example below'
|
||||
}
|
||||
},
|
||||
{
|
||||
type : 'paragraph',
|
||||
id: "0lOGNUKxqt",
|
||||
data : {
|
||||
text : `Given data can be used as you want: render with HTML for <code class="inline-code">Web clients</code>, render natively for <code class="inline-code">mobile apps</code>, create markup for <code class="inline-code">Facebook Instant Articles</code> or <code class="inline-code">Google AMP</code>, generate an <code class="inline-code">audio version</code> and so on.`
|
||||
}
|
||||
},
|
||||
{
|
||||
type : 'paragraph',
|
||||
id: "WvX7kBjp0I",
|
||||
data : {
|
||||
text : 'Clean data is useful to sanitize, validate and process on the backend.'
|
||||
}
|
||||
},
|
||||
{
|
||||
type : 'delimiter',
|
||||
id: "H9LWKQ3NYd",
|
||||
data : {}
|
||||
},
|
||||
{
|
||||
type : 'paragraph',
|
||||
id: "h298akk2Ad",
|
||||
data : {
|
||||
text : 'We have been working on this project more than three years. Several large media projects help us to test and debug the Editor, to make its core more stable. At the same time we significantly improved the API. Now, it can be used to create any plugin for any task. Hope you enjoy. 😏'
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'image',
|
||||
id: "9802bjaAA2",
|
||||
data: {
|
||||
url: '/assets/codex2x.png',
|
||||
caption: '',
|
||||
stretched: false,
|
||||
withBorder: true,
|
||||
withBackground: false,
|
||||
}
|
||||
},
|
||||
]
|
||||
},
|
||||
onReady: function(){
|
||||
saveButton.click();
|
||||
},
|
||||
onChange: function(api, event) {
|
||||
console.log('something changed', event);
|
||||
},
|
||||
}
|
||||
/**
|
||||
* To initialize the Editor, create a new instance with configuration object
|
||||
* @see docs/installation.md for mode details
|
||||
*/
|
||||
var editor = new EditorJS(editorConfig);
|
||||
|
||||
/**
|
||||
* 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"));
|
||||
})
|
||||
.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';
|
||||
});
|
||||
|
||||
/**
|
||||
* Button for displaying blocks borders. Useful for UI development
|
||||
*/
|
||||
const showBlocksBoundariesButton = document.getElementById("showBlocksBoundariesButton");
|
||||
|
||||
showBlocksBoundariesButton.addEventListener('click', () => {
|
||||
document.body.classList.toggle("show-block-boundaries")
|
||||
})
|
||||
|
||||
/**
|
||||
* Button for enabling the 'Thin' mode
|
||||
*/
|
||||
const enableThinModeButton = document.getElementById("enableThinModeButton");
|
||||
|
||||
enableThinModeButton.addEventListener('click', () => {
|
||||
document.body.classList.toggle("thin-mode")
|
||||
|
||||
editor.destroy();
|
||||
|
||||
editor = new EditorJS(editorConfig);
|
||||
})
|
||||
|
||||
/**
|
||||
* Toggler for toggling the dark mode
|
||||
*/
|
||||
const darkThemeToggler = document.getElementById("darkThemeToggler");
|
||||
|
||||
darkThemeToggler.addEventListener('click', () => {
|
||||
document.body.classList.toggle("dark-mode");
|
||||
|
||||
localStorage.setItem('theme', document.body.classList.contains("dark-mode") ? 'dark' : 'default');
|
||||
})
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
74
package.json
74
package.json
|
@ -2,7 +2,8 @@
|
|||
"name": "@editorjs/editorjs",
|
||||
"version": "2.27.0-rc.4",
|
||||
"description": "Editor.js — Native JS, based on API and Open Source",
|
||||
"main": "dist/editor.js",
|
||||
"main": "dist/editorjs.umd.js",
|
||||
"module": "dist/editorjs.mjs",
|
||||
"types": "./types/index.d.ts",
|
||||
"keywords": [
|
||||
"codex editor",
|
||||
|
@ -12,16 +13,12 @@
|
|||
"editorjs"
|
||||
],
|
||||
"scripts": {
|
||||
"clear": "rimraf dist && mkdirp dist",
|
||||
"build": "yarn clear && yarn build:webpack:prod",
|
||||
"build:dev": "yarn clear && yarn build:webpack:dev",
|
||||
"build:webpack:dev": "webpack --mode development --progress --display-error-details --display-entrypoints --watch",
|
||||
"build:webpack:prod": "webpack --mode production",
|
||||
"dev": "vite",
|
||||
"build": "vite build",
|
||||
"lint": "eslint src/ --ext .ts && yarn lint:tests",
|
||||
"lint:errors": "eslint src/ --ext .ts --quiet",
|
||||
"lint:fix": "eslint src/ --ext .ts --fix",
|
||||
"lint:tests": "eslint test/ --ext .ts",
|
||||
"ci:pull_paragraph": "git submodule update --init ./src/tools/paragraph",
|
||||
"pull_tools": "git submodule update --init --recursive",
|
||||
"_tools:checkout": "git submodule foreach \"git checkout master || git checkout main\"",
|
||||
"_tools:pull": "git submodule foreach git pull",
|
||||
|
@ -40,64 +37,39 @@
|
|||
"url": "git+https://github.com/codex-team/editor.js.git"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.9.0",
|
||||
"@babel/plugin-transform-runtime": "^7.9.0",
|
||||
"@babel/polyfill": "^7.8.7",
|
||||
"@babel/preset-env": "^7.9.5",
|
||||
"@babel/preset-typescript": "^7.13.0",
|
||||
"@babel/register": "^7.9.0",
|
||||
"@babel/runtime": "^7.9.2",
|
||||
"@babel/register": "^7.21.0",
|
||||
"@codexteam/icons": "^0.3.0",
|
||||
"@codexteam/shortcuts": "^1.1.1",
|
||||
"@cypress/code-coverage": "^3.10.1",
|
||||
"@cypress/webpack-preprocessor": "^5.17.0",
|
||||
"@cypress/code-coverage": "^3.10.3",
|
||||
"@editorjs/code": "^2.7.0",
|
||||
"@editorjs/delimiter": "^1.2.0",
|
||||
"@editorjs/header": "^2.7.0",
|
||||
"@editorjs/paragraph": "^2.9.0",
|
||||
"@editorjs/simple-image": "^1.4.1",
|
||||
"@types/node": "^14.14.35",
|
||||
"@types/webpack": "^4.41.12",
|
||||
"@types/webpack-env": "^1.15.2",
|
||||
"babel-loader": "^8.1.0",
|
||||
"babel-plugin-add-module-exports": "^1.0.0",
|
||||
"babel-plugin-class-display-name": "^2.1.0",
|
||||
"babel-plugin-istanbul": "^6.0.0",
|
||||
"core-js": "3.6.5",
|
||||
"css-loader": "^3.5.3",
|
||||
"cssnano": "^4.1.10",
|
||||
"@types/node": "^18.15.11",
|
||||
"codex-notifier": "^1.1.2",
|
||||
"codex-tooltip": "^1.0.5",
|
||||
"core-js": "3.30.0",
|
||||
"cypress": "^12.9.0",
|
||||
"cypress-intellij-reporter": "^0.0.7",
|
||||
"eslint": "^8.28.0",
|
||||
"eslint": "^8.37.0",
|
||||
"eslint-config-codex": "^1.7.1",
|
||||
"eslint-loader": "^4.0.2",
|
||||
"eslint-plugin-chai-friendly": "^0.7.2",
|
||||
"eslint-plugin-cypress": "^2.12.1",
|
||||
"extract-text-webpack-plugin": "^3.0.2",
|
||||
"license-webpack-plugin": "^2.1.4",
|
||||
"mkdirp": "^1.0.4",
|
||||
"eslint-plugin-cypress": "2.12.1",
|
||||
"html-janitor": "^2.0.4",
|
||||
"nanoid": "^4.0.2",
|
||||
"postcss-apply": "^0.12.0",
|
||||
"postcss-import": "^12.0.1",
|
||||
"postcss-loader": "^3.0.0",
|
||||
"postcss-nested": "^4.1.2",
|
||||
"postcss-nested-ancestors": "^2.0.0",
|
||||
"postcss-preset-env": "^6.6.0",
|
||||
"rimraf": "^3.0.2",
|
||||
"stylelint": "^13.3.3",
|
||||
"terser-webpack-plugin": "^2.3.6",
|
||||
"ts-loader": "^8.4.0",
|
||||
"postcss-nested": "4.1.2",
|
||||
"postcss-preset-env": "^8.3.0",
|
||||
"rollup-plugin-license": "^3.0.1",
|
||||
"stylelint": "^15.4.0",
|
||||
"tslint": "^6.1.1",
|
||||
"typescript": "^5.0.2",
|
||||
"webpack": "^4.43.0",
|
||||
"webpack-cli": "^3.3.11"
|
||||
"typescript": "5.0.3",
|
||||
"vite": "^4.2.1",
|
||||
"vite-plugin-css-injected-by-js": "^3.1.0"
|
||||
},
|
||||
"collective": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/editorjs"
|
||||
},
|
||||
"dependencies": {
|
||||
"@codexteam/icons": "0.1.0",
|
||||
"codex-notifier": "^1.1.2",
|
||||
"codex-tooltip": "^1.0.5",
|
||||
"html-janitor": "^2.0.4",
|
||||
"nanoid": "^3.1.22"
|
||||
}
|
||||
}
|
||||
|
|
Before Width: | Height: | Size: 126 KiB After Width: | Height: | Size: 126 KiB |
|
@ -7,7 +7,7 @@ import { EditorConfig } from '../types';
|
|||
*/
|
||||
import '@babel/register';
|
||||
|
||||
import 'components/polyfills';
|
||||
import './components/polyfills';
|
||||
import Core from './components/core';
|
||||
import * as _ from './components/utils';
|
||||
|
||||
|
@ -16,11 +16,9 @@ declare const VERSION: string;
|
|||
/**
|
||||
* Editor.js
|
||||
*
|
||||
* Short Description (눈_눈;)
|
||||
*
|
||||
* @version 2.18.0
|
||||
* @license Apache-2.0
|
||||
* @author CodeX-Team <https://ifmo.su>
|
||||
* @see Editor.js <https://editorjs.io>
|
||||
* @author CodeX Team <https://codex.so>
|
||||
*/
|
||||
export default class EditorJS {
|
||||
/**
|
||||
|
|
|
@ -5,28 +5,7 @@ import { EditorModules } from '../types-internal/editor-modules';
|
|||
import I18n from './i18n';
|
||||
import { CriticalError } from './errors/critical';
|
||||
import EventsDispatcher from './utils/events';
|
||||
|
||||
/**
|
||||
* @typedef {Core} Core - editor core class
|
||||
*/
|
||||
|
||||
/**
|
||||
* Require Editor modules places in components/modules dir
|
||||
*/
|
||||
const contextRequire = require.context('./modules', true);
|
||||
|
||||
const modules = [];
|
||||
|
||||
contextRequire.keys().forEach((filename) => {
|
||||
/**
|
||||
* Include files if:
|
||||
* - extension is .js or .ts
|
||||
* - does not starts with _
|
||||
*/
|
||||
if (filename.match(/^\.\/[^_][\w/]*\.([tj])s$/)) {
|
||||
modules.push(contextRequire(filename));
|
||||
}
|
||||
});
|
||||
import Modules from './modules';
|
||||
|
||||
/**
|
||||
* @class Core
|
||||
|
@ -228,7 +207,7 @@ export default class Core {
|
|||
*
|
||||
* @returns {EditorConfig}
|
||||
*/
|
||||
public get configuration(): EditorConfig|string {
|
||||
public get configuration(): EditorConfig {
|
||||
return this.config;
|
||||
}
|
||||
|
||||
|
@ -325,27 +304,14 @@ export default class Core {
|
|||
* Make modules instances and save it to the @property this.moduleInstances
|
||||
*/
|
||||
private constructModules(): void {
|
||||
modules.forEach((module) => {
|
||||
/**
|
||||
* If module has non-default exports, passed object contains them all and default export as 'default' property
|
||||
*/
|
||||
const Module = _.isFunction(module) ? module : module.default;
|
||||
|
||||
Object.entries(Modules).forEach(([key, module]) => {
|
||||
try {
|
||||
/**
|
||||
* We use class name provided by displayName property
|
||||
*
|
||||
* On build, Babel will transform all Classes to the Functions so, name will always be 'Function'
|
||||
* To prevent this, we use 'babel-plugin-class-display-name' plugin
|
||||
*
|
||||
* @see https://www.npmjs.com/package/babel-plugin-class-display-name
|
||||
*/
|
||||
this.moduleInstances[Module.displayName] = new Module({
|
||||
this.moduleInstances[key] = new module({
|
||||
config: this.configuration,
|
||||
eventsDispatcher: this.eventsDispatcher,
|
||||
});
|
||||
} catch (e) {
|
||||
_.log(`Module ${Module.displayName} skipped because`, 'error', e);
|
||||
_.log('[constructModules]', `Module ${key} skipped because`, 'error', e);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
|
|
@ -16,6 +16,7 @@ export default class ToolbarAPI extends Module {
|
|||
close: (): void => this.close(),
|
||||
open: (): void => this.open(),
|
||||
toggleBlockSettings: (openingState?: boolean): void => this.toggleBlockSettings(openingState),
|
||||
toggleToolbox: (openingState?: boolean): void => this.toggleToolbox(openingState),
|
||||
};
|
||||
}
|
||||
|
||||
|
@ -55,4 +56,27 @@ export default class ToolbarAPI extends Module {
|
|||
this.Editor.BlockSettings.close();
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Open toolbox
|
||||
*
|
||||
* @param {boolean} openingState - Opening state of toolbox
|
||||
*/
|
||||
public toggleToolbox(openingState: boolean): void {
|
||||
if (this.Editor.BlockManager.currentBlockIndex === -1) {
|
||||
_.logLabeled('Could\'t toggle the Toolbox because there is no block selected ', 'warn');
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
const canOpenToolbox = openingState ?? !this.Editor.Toolbar.toolbox.opened;
|
||||
|
||||
if (canOpenToolbox) {
|
||||
this.Editor.Toolbar.moveAndOpen();
|
||||
this.Editor.Toolbar.toolbox.open();
|
||||
} else {
|
||||
this.Editor.Toolbar.toolbox.close();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
81
src/components/modules/index.ts
Normal file
81
src/components/modules/index.ts
Normal file
|
@ -0,0 +1,81 @@
|
|||
/** ./api */
|
||||
import BlocksAPI from './api/blocks';
|
||||
import CaretAPI from './api/caret';
|
||||
import EventsAPI from './api/events';
|
||||
import I18nAPI from './api/i18n';
|
||||
import API from './api/index';
|
||||
import InlineToolbarAPI from './api/inlineToolbar';
|
||||
import ListenersAPI from './api/listeners';
|
||||
import NotifierAPI from './api/notifier';
|
||||
import ReadOnlyAPI from './api/readonly';
|
||||
import SanitizerAPI from './api/sanitizer';
|
||||
import SaverAPI from './api/saver';
|
||||
import SelectionAPI from './api/selection';
|
||||
import StylesAPI from './api/styles';
|
||||
import ToolbarAPI from './api/toolbar';
|
||||
import TooltipAPI from './api/tooltip';
|
||||
import UiAPI from './api/ui';
|
||||
|
||||
/** ./toolbar */
|
||||
import BlockSettings from './toolbar/blockSettings';
|
||||
import ConversionToolbar from './toolbar/conversion';
|
||||
import Toolbar from './toolbar/index';
|
||||
import InlineToolbar from './toolbar/inline';
|
||||
|
||||
/** . */
|
||||
import BlockEvents from './blockEvents';
|
||||
import BlockManager from './blockManager';
|
||||
import BlockSelection from './blockSelection';
|
||||
import Caret from './caret';
|
||||
import CrossBlockSelection from './crossBlockSelection';
|
||||
import DragNDrop from './dragNDrop';
|
||||
import ModificationsObserver from './modificationsObserver';
|
||||
import Paste from './paste';
|
||||
import ReadOnly from './readonly';
|
||||
import RectangleSelection from './rectangleSelection';
|
||||
import Renderer from './renderer';
|
||||
import Saver from './saver';
|
||||
import Tools from './tools';
|
||||
import UI from './ui';
|
||||
|
||||
export default {
|
||||
// API Modules
|
||||
BlocksAPI,
|
||||
CaretAPI,
|
||||
EventsAPI,
|
||||
I18nAPI,
|
||||
API,
|
||||
InlineToolbarAPI,
|
||||
ListenersAPI,
|
||||
NotifierAPI,
|
||||
ReadOnlyAPI,
|
||||
SanitizerAPI,
|
||||
SaverAPI,
|
||||
SelectionAPI,
|
||||
StylesAPI,
|
||||
ToolbarAPI,
|
||||
TooltipAPI,
|
||||
UiAPI,
|
||||
|
||||
// Toolbar Modules
|
||||
BlockSettings,
|
||||
ConversionToolbar,
|
||||
Toolbar,
|
||||
InlineToolbar,
|
||||
|
||||
// Modules
|
||||
BlockEvents,
|
||||
BlockManager,
|
||||
BlockSelection,
|
||||
Caret,
|
||||
CrossBlockSelection,
|
||||
DragNDrop,
|
||||
ModificationsObserver,
|
||||
Paste,
|
||||
ReadOnly,
|
||||
RectangleSelection,
|
||||
Renderer,
|
||||
Saver,
|
||||
Tools,
|
||||
UI,
|
||||
};
|
|
@ -81,7 +81,10 @@ export default class Renderer extends Module {
|
|||
tunes,
|
||||
});
|
||||
} catch (error) {
|
||||
_.log(`Block «${tool}» skipped because of plugins error`, 'warn', data);
|
||||
_.log(`Block «${tool}» skipped because of plugins error`, 'warn', {
|
||||
data,
|
||||
error,
|
||||
});
|
||||
throw Error(error);
|
||||
}
|
||||
} else {
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
import Paragraph from '../../tools/paragraph/dist/bundle';
|
||||
import Paragraph from '@editorjs/paragraph';
|
||||
import Module from '../__module';
|
||||
import * as _ from '../utils';
|
||||
import { SanitizerConfig, ToolConfig, ToolConstructable, ToolSettings } from '../../../types';
|
||||
|
|
|
@ -13,6 +13,7 @@ import Block from '../block';
|
|||
import Flipper from '../flipper';
|
||||
import { mobileScreenBreakpoint } from '../utils';
|
||||
|
||||
import styles from '../../styles/main.css?inline';
|
||||
/**
|
||||
* HTML Elements used for UI
|
||||
*/
|
||||
|
@ -306,7 +307,6 @@ export default class UI extends Module<UINodes> {
|
|||
* Load CSS
|
||||
*/
|
||||
// eslint-disable-next-line @typescript-eslint/no-var-requires
|
||||
const styles = require('../../styles/main.css');
|
||||
const styleTagId = 'editor-js-styles';
|
||||
|
||||
/**
|
||||
|
|
|
@ -70,7 +70,7 @@
|
|||
|
||||
--color-line-gray: #EFF0F1;
|
||||
|
||||
--overlay-pane: {
|
||||
--overlay-pane {
|
||||
position: absolute;
|
||||
background-color: #FFFFFF;
|
||||
border: 1px solid #E8E8EB;
|
||||
|
@ -94,17 +94,17 @@
|
|||
}
|
||||
};
|
||||
|
||||
--button-focused: {
|
||||
--button-focused {
|
||||
box-shadow: inset 0 0 0px 1px rgba(7, 161, 227, 0.08);
|
||||
background: rgba(34, 186, 255, 0.08) !important;
|
||||
};
|
||||
|
||||
--button-active: {
|
||||
--button-active {
|
||||
background: rgba(56, 138, 229, 0.1);
|
||||
color: var(--color-active-icon);
|
||||
};
|
||||
|
||||
--button-disabled: {
|
||||
--button-disabled {
|
||||
color: var(--grayText);
|
||||
cursor: default;
|
||||
pointer-events: none;
|
||||
|
@ -113,7 +113,7 @@
|
|||
/**
|
||||
* Styles for Toolbox Buttons and Plus Button
|
||||
*/
|
||||
--toolbox-button: {
|
||||
--toolbox-button {
|
||||
color: var(--color-dark);
|
||||
cursor: pointer;
|
||||
width: var(--toolbox-buttons-size);
|
||||
|
@ -145,7 +145,7 @@
|
|||
/**
|
||||
* Styles for Settings Button in Toolbar
|
||||
*/
|
||||
--toolbar-button: {
|
||||
--toolbar-button {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
@ -193,7 +193,7 @@
|
|||
/**
|
||||
* Tool icon with border
|
||||
*/
|
||||
--tool-icon: {
|
||||
--tool-icon {
|
||||
display: inline-flex;
|
||||
width: var(--toolbox-buttons-size);
|
||||
height: var(--toolbox-buttons-size);
|
||||
|
|
|
@ -1 +0,0 @@
|
|||
Subproject commit 6e45413ccdfd021f1800eb6e5bf7440184d5ab7c
|
136
src/types-internal/editor-modules.d.ts
vendored
136
src/types-internal/editor-modules.d.ts
vendored
|
@ -1,71 +1,81 @@
|
|||
import UI from '../components/modules/ui';
|
||||
import BlockEvents from '../components/modules/blockEvents';
|
||||
import Toolbar from '../components/modules/toolbar/index';
|
||||
import InlineToolbar from '../components/modules/toolbar/inline';
|
||||
import BlockSettings from '../components/modules/toolbar/blockSettings';
|
||||
import Paste from '../components/modules/paste';
|
||||
import DragNDrop from '../components/modules/dragNDrop';
|
||||
import Renderer from '../components/modules/renderer';
|
||||
import Tools from '../components/modules/tools';
|
||||
import API from '../components/modules/api/index';
|
||||
import Caret from '../components/modules/caret';
|
||||
import BlockManager from '../components/modules/blockManager';
|
||||
/** ./api */
|
||||
import BlocksAPI from '../components/modules/api/blocks';
|
||||
import CaretAPI from '../components/modules/api/caret';
|
||||
import EventsAPI from '../components/modules/api/events';
|
||||
import ListenersAPI from '../components/modules/api/listeners';
|
||||
import SanitizerAPI from '../components/modules/api/sanitizer';
|
||||
import ToolbarAPI from '../components/modules/api/toolbar';
|
||||
import StylesAPI from '../components/modules/api/styles';
|
||||
import SelectionAPI from '../components/modules/api/selection';
|
||||
import NotifierAPI from '../components/modules/api/notifier';
|
||||
import SaverAPI from '../components/modules/api/saver';
|
||||
import Saver from '../components/modules/saver';
|
||||
import BlockSelection from '../components/modules/blockSelection';
|
||||
import RectangleSelection from '../components/modules/RectangleSelection';
|
||||
import InlineToolbarAPI from '../components/modules/api/inlineToolbar';
|
||||
import CrossBlockSelection from '../components/modules/crossBlockSelection';
|
||||
import ConversionToolbar from '../components/modules/toolbar/conversion';
|
||||
import TooltipAPI from '../components/modules/api/tooltip';
|
||||
import ReadOnly from '../components/modules/readonly';
|
||||
import ReadOnlyAPI from '../components/modules/api/readonly';
|
||||
import I18nAPI from '../components/modules/api/i18n';
|
||||
import API from '../components/modules/api/index';
|
||||
import InlineToolbarAPI from '../components/modules/api/inlineToolbar';
|
||||
import ListenersAPI from '../components/modules/api/listeners';
|
||||
import NotifierAPI from '../components/modules/api/notifier';
|
||||
import ReadOnlyAPI from '../components/modules/api/readonly';
|
||||
import SanitizerAPI from '../components/modules/api/sanitizer';
|
||||
import SaverAPI from '../components/modules/api/saver';
|
||||
import SelectionAPI from '../components/modules/api/selection';
|
||||
import StylesAPI from '../components/modules/api/styles';
|
||||
import ToolbarAPI from '../components/modules/api/toolbar';
|
||||
import TooltipAPI from '../components/modules/api/tooltip';
|
||||
import UiAPI from '../components/modules/api/ui';
|
||||
|
||||
/** ./toolbar */
|
||||
import BlockSettings from '../components/modules/toolbar/blockSettings';
|
||||
import ConversionToolbar from '../components/modules/toolbar/conversion';
|
||||
import Toolbar from '../components/modules/toolbar/index';
|
||||
import InlineToolbar from '../components/modules/toolbar/inline';
|
||||
|
||||
/** . */
|
||||
import BlockEvents from '../components/modules/blockEvents';
|
||||
import BlockManager from '../components/modules/blockManager';
|
||||
import BlockSelection from '../components/modules/blockSelection';
|
||||
import Caret from '../components/modules/caret';
|
||||
import CrossBlockSelection from '../components/modules/crossBlockSelection';
|
||||
import DragNDrop from '../components/modules/dragNDrop';
|
||||
import ModificationsObserver from '../components/modules/modificationsObserver';
|
||||
import Paste from '../components/modules/paste';
|
||||
import ReadOnly from '../components/modules/readonly';
|
||||
import RectangleSelection from '../components/modules/rectangleSelection';
|
||||
import Renderer from '../components/modules/renderer';
|
||||
import Saver from '../components/modules/saver';
|
||||
import Tools from '../components/modules/tools';
|
||||
import UI from '../components/modules/ui';
|
||||
|
||||
export interface EditorModules {
|
||||
UI: UI;
|
||||
BlockEvents: BlockEvents;
|
||||
BlockSelection: BlockSelection;
|
||||
RectangleSelection: RectangleSelection;
|
||||
Toolbar: Toolbar;
|
||||
InlineToolbar: InlineToolbar;
|
||||
BlockSettings: BlockSettings;
|
||||
ConversionToolbar: ConversionToolbar;
|
||||
Paste: Paste;
|
||||
DragNDrop: DragNDrop;
|
||||
Renderer: Renderer;
|
||||
Tools: Tools;
|
||||
API: API;
|
||||
Caret: Caret;
|
||||
Saver: Saver;
|
||||
BlockManager: BlockManager;
|
||||
BlocksAPI: BlocksAPI;
|
||||
CaretAPI: CaretAPI;
|
||||
EventsAPI: EventsAPI;
|
||||
ListenersAPI: ListenersAPI;
|
||||
SanitizerAPI: SanitizerAPI;
|
||||
SaverAPI: SaverAPI;
|
||||
SelectionAPI: SelectionAPI;
|
||||
StylesAPI: StylesAPI;
|
||||
ToolbarAPI: ToolbarAPI;
|
||||
InlineToolbarAPI: InlineToolbarAPI;
|
||||
CrossBlockSelection: CrossBlockSelection;
|
||||
NotifierAPI: NotifierAPI;
|
||||
TooltipAPI: TooltipAPI;
|
||||
ReadOnly: ReadOnly;
|
||||
ReadOnlyAPI: ReadOnlyAPI;
|
||||
I18nAPI: I18nAPI;
|
||||
UiAPI: UiAPI;
|
||||
ModificationsObserver: ModificationsObserver;
|
||||
}
|
||||
// API Modules
|
||||
BlocksAPI: BlocksAPI,
|
||||
CaretAPI: CaretAPI,
|
||||
EventsAPI: EventsAPI,
|
||||
I18nAPI: I18nAPI,
|
||||
API: API,
|
||||
InlineToolbarAPI: InlineToolbarAPI,
|
||||
ListenersAPI: ListenersAPI,
|
||||
NotifierAPI: NotifierAPI,
|
||||
ReadOnlyAPI: ReadOnlyAPI,
|
||||
SanitizerAPI: SanitizerAPI,
|
||||
SaverAPI: SaverAPI,
|
||||
SelectionAPI: SelectionAPI,
|
||||
StylesAPI: StylesAPI,
|
||||
ToolbarAPI: ToolbarAPI,
|
||||
TooltipAPI: TooltipAPI,
|
||||
UiAPI: UiAPI,
|
||||
|
||||
// Toolbar Modules
|
||||
BlockSettings: BlockSettings,
|
||||
ConversionToolbar: ConversionToolbar,
|
||||
Toolbar: Toolbar,
|
||||
InlineToolbar: InlineToolbar,
|
||||
|
||||
// Modules
|
||||
BlockEvents: BlockEvents,
|
||||
BlockManager: BlockManager,
|
||||
BlockSelection: BlockSelection,
|
||||
Caret: Caret,
|
||||
CrossBlockSelection: CrossBlockSelection,
|
||||
DragNDrop: DragNDrop,
|
||||
ModificationsObserver: ModificationsObserver,
|
||||
Paste: Paste,
|
||||
ReadOnly: ReadOnly,
|
||||
RectangleSelection: RectangleSelection,
|
||||
Renderer: Renderer,
|
||||
Saver: Saver,
|
||||
Tools: Tools,
|
||||
UI: UI,
|
||||
}
|
|
@ -2,7 +2,7 @@
|
|||
<html lang="en">
|
||||
<body>
|
||||
<!-- Load Editor.js's Core -->
|
||||
<script src="./../../../dist/editor.js"></script>
|
||||
<script src="./../../../dist/editorjs.umd.js"></script>
|
||||
<h1>Editor.js test page</h1>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
@ -1,11 +1,7 @@
|
|||
/* eslint-disable @typescript-eslint/no-var-requires */
|
||||
/* tslint:disable:no-var-requires */
|
||||
/**
|
||||
* This file contains connection of Cypres plugins
|
||||
*/
|
||||
const webpackConfig = require('../../../webpack.config.js');
|
||||
const preprocessor = require('@cypress/webpack-preprocessor');
|
||||
const codeCoverageTask = require('@cypress/code-coverage/task');
|
||||
import * as codeCoverageTask from '@cypress/code-coverage/task';
|
||||
|
||||
module.exports = (on, config): unknown => {
|
||||
/**
|
||||
|
@ -13,26 +9,6 @@ module.exports = (on, config): unknown => {
|
|||
*/
|
||||
codeCoverageTask(on, config);
|
||||
|
||||
/**
|
||||
* Prepare webpack preprocessor options
|
||||
*/
|
||||
const options = preprocessor.defaultOptions;
|
||||
|
||||
/**
|
||||
* Provide path to typescript package
|
||||
*/
|
||||
options.typescript = require.resolve('typescript');
|
||||
|
||||
/**
|
||||
* Provide our webpack config
|
||||
*/
|
||||
options.webpackOptions = webpackConfig({}, { mode: 'test' });
|
||||
|
||||
/**
|
||||
* Register webpack preprocessor
|
||||
*/
|
||||
on('file:preprocessor', preprocessor(options));
|
||||
|
||||
// It's IMPORTANT to return the config object
|
||||
// with any changed environment variables
|
||||
return config;
|
||||
|
|
86
test/cypress/tests/api/toolbar.cy.ts
Normal file
86
test/cypress/tests/api/toolbar.cy.ts
Normal file
|
@ -0,0 +1,86 @@
|
|||
/**
|
||||
* There will be described test cases of 'api.toolbar.*' API
|
||||
*/
|
||||
import EditorJS from '../../../../types';
|
||||
|
||||
describe('api.toolbar', () => {
|
||||
/**
|
||||
* api.toolbar.openToolbox(openingState?: boolean)
|
||||
*/
|
||||
const firstBlock = {
|
||||
id: 'bwnFX5LoX7',
|
||||
type: 'paragraph',
|
||||
data: {
|
||||
text: 'The first block content mock.',
|
||||
},
|
||||
};
|
||||
const editorDataMock = {
|
||||
blocks: [
|
||||
firstBlock,
|
||||
],
|
||||
};
|
||||
|
||||
beforeEach(function () {
|
||||
cy.createEditor({
|
||||
data: editorDataMock,
|
||||
readOnly: false,
|
||||
}).as('editorInstance');
|
||||
});
|
||||
|
||||
afterEach(function () {
|
||||
if (this.editorInstance) {
|
||||
this.editorInstance.destroy();
|
||||
}
|
||||
});
|
||||
|
||||
describe('*.toggleToolbox()', () => {
|
||||
const isToolboxVisible = (): void => {
|
||||
cy.get('[data-cy=editorjs]').find('div.ce-toolbox')
|
||||
.then((toolbox) => {
|
||||
if (toolbox.is(':visible')) {
|
||||
assert.isOk(true, 'Toolbox visible');
|
||||
} else {
|
||||
assert.isNotOk(false, 'Toolbox should be visible');
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const isToolboxNotVisible = (): void => {
|
||||
cy.get('[data-cy=editorjs]').find('div.ce-toolbox')
|
||||
.then((toolbox) => {
|
||||
if (!toolbox.is(':visible')) {
|
||||
assert.isOk(true, 'Toolbox not visible');
|
||||
} else {
|
||||
assert.isNotOk(false, 'Toolbox should not be visible');
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
it('should open the toolbox', function () {
|
||||
cy.get<EditorJS>('@editorInstance').then(async function (editor) {
|
||||
editor.toolbar.toggleToolbox(true);
|
||||
isToolboxVisible();
|
||||
});
|
||||
});
|
||||
|
||||
it('should close the toolbox', function () {
|
||||
cy.get<EditorJS>('@editorInstance').then(async function (editor) {
|
||||
editor.toolbar.toggleToolbox(true);
|
||||
|
||||
isToolboxVisible();
|
||||
|
||||
editor.toolbar.toggleToolbox(false);
|
||||
isToolboxNotVisible();
|
||||
});
|
||||
});
|
||||
it('should toggle the toolbox', function () {
|
||||
cy.get<EditorJS>('@editorInstance').then(async function (editor) {
|
||||
editor.toolbar.toggleToolbox();
|
||||
isToolboxVisible();
|
||||
|
||||
editor.toolbar.toggleToolbox();
|
||||
isToolboxNotVisible();
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
|
@ -5,7 +5,7 @@ import ToolsFactory from '../../../../src/components/tools/factory';
|
|||
import InlineTool from '../../../../src/components/tools/inline';
|
||||
import BlockTool from '../../../../src/components/tools/block';
|
||||
import BlockTune from '../../../../src/components/tools/tune';
|
||||
import Paragraph from '../../../../src/tools/paragraph/dist/bundle';
|
||||
import Paragraph from '@editorjs/paragraph';
|
||||
|
||||
describe('ToolsFactory', (): void => {
|
||||
let factory;
|
||||
|
|
6
types/api/toolbar.d.ts
vendored
6
types/api/toolbar.d.ts
vendored
|
@ -17,4 +17,10 @@ export interface Toolbar {
|
|||
* @param {boolean} openingState — opening state of Block Setting
|
||||
*/
|
||||
toggleBlockSettings(openingState?: boolean): void;
|
||||
|
||||
/**
|
||||
* Toggle toolbox
|
||||
* @param {boolean} openingState — opening state of the toolbox
|
||||
*/
|
||||
toggleToolbox(openingState?: boolean): void;
|
||||
}
|
||||
|
|
68
vite.config.js
Normal file
68
vite.config.js
Normal file
|
@ -0,0 +1,68 @@
|
|||
import path from 'path';
|
||||
|
||||
import cssInjectedByJsPlugin from 'vite-plugin-css-injected-by-js';
|
||||
import license from 'rollup-plugin-license';
|
||||
|
||||
import * as pkg from './package.json';
|
||||
|
||||
const NODE_ENV = process.argv.mode || 'development';
|
||||
const VERSION = pkg.version;
|
||||
|
||||
/**
|
||||
* Trick to use Vite server.open option on macOS
|
||||
* @see https://github.com/facebook/create-react-app/pull/1690#issuecomment-283518768
|
||||
*/
|
||||
process.env.BROWSER = 'open';
|
||||
|
||||
export default {
|
||||
build: {
|
||||
copyPublicDir: false,
|
||||
lib: {
|
||||
entry: path.resolve(__dirname, 'src', 'codex.ts'),
|
||||
name: 'EditorJS',
|
||||
fileName: 'editorjs',
|
||||
},
|
||||
rollupOptions: {
|
||||
plugins: [
|
||||
license({
|
||||
thirdParty: {
|
||||
allow: {
|
||||
test: (dependency) => {
|
||||
// Manually allow html-janitor (https://github.com/guardian/html-janitor/blob/master/LICENSE)
|
||||
// because of missing LICENSE file in published package
|
||||
if (dependency.name === 'html-janitor') {
|
||||
return true;
|
||||
}
|
||||
|
||||
// Return false for unlicensed dependencies.
|
||||
if (!dependency.license) {
|
||||
return false;
|
||||
}
|
||||
|
||||
// Allow MIT and Apache-2.0 licenses.
|
||||
return ['MIT', 'Apache-2.0'].includes(dependency.license);
|
||||
},
|
||||
failOnUnlicensed: true,
|
||||
failOnViolation: true,
|
||||
},
|
||||
output: path.resolve(__dirname, 'dist', 'vendor.LICENSE.txt'),
|
||||
},
|
||||
}),
|
||||
],
|
||||
},
|
||||
},
|
||||
|
||||
define: {
|
||||
'NODE_ENV': JSON.stringify(NODE_ENV),
|
||||
'VERSION': JSON.stringify(VERSION),
|
||||
},
|
||||
|
||||
server: {
|
||||
port: 3303,
|
||||
open: true,
|
||||
},
|
||||
|
||||
plugins: [
|
||||
cssInjectedByJsPlugin(),
|
||||
],
|
||||
};
|
|
@ -1,109 +0,0 @@
|
|||
/**
|
||||
* Webpack configuration
|
||||
*
|
||||
* @author Codex Team
|
||||
* @copyright Khaydarov Murod
|
||||
*/
|
||||
'use strict';
|
||||
|
||||
module.exports = (env, argv) => {
|
||||
const path = require('path');
|
||||
const TerserPlugin = require('terser-webpack-plugin');
|
||||
const { LicenseWebpackPlugin } = require('license-webpack-plugin');
|
||||
const pkg = require('./package.json');
|
||||
|
||||
|
||||
/**
|
||||
* Environment
|
||||
*
|
||||
* @type {any}
|
||||
*/
|
||||
const NODE_ENV = argv.mode || 'development';
|
||||
const VERSION = process.env.VERSION || pkg.version;
|
||||
|
||||
/**
|
||||
* Plugins for bundle
|
||||
*
|
||||
* @type {webpack}
|
||||
*/
|
||||
const webpack = require('webpack');
|
||||
|
||||
return {
|
||||
entry: {
|
||||
editor: ['@babel/polyfill/noConflict', './src/codex.ts'],
|
||||
},
|
||||
|
||||
output: {
|
||||
path: path.resolve(__dirname, 'dist'),
|
||||
filename: '[name].js',
|
||||
library: [ 'EditorJS' ],
|
||||
libraryTarget: 'umd',
|
||||
},
|
||||
|
||||
watchOptions: {
|
||||
aggregateTimeout: 50,
|
||||
},
|
||||
|
||||
/**
|
||||
* Tell webpack what directories should be searched when resolving modules.
|
||||
*/
|
||||
resolve: {
|
||||
modules: [path.join(__dirname, 'src'), 'node_modules'],
|
||||
extensions: ['.js', '.ts'],
|
||||
},
|
||||
|
||||
plugins: [
|
||||
/** Pass variables into modules */
|
||||
new webpack.DefinePlugin({
|
||||
NODE_ENV: JSON.stringify(NODE_ENV),
|
||||
VERSION: JSON.stringify(VERSION),
|
||||
}),
|
||||
|
||||
new webpack.BannerPlugin({
|
||||
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(),
|
||||
],
|
||||
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: /\.ts$/,
|
||||
use: [
|
||||
{
|
||||
loader: 'babel-loader',
|
||||
options: {
|
||||
cacheDirectory: true,
|
||||
},
|
||||
},
|
||||
{
|
||||
loader: 'ts-loader',
|
||||
options: {
|
||||
configFile: NODE_ENV === 'production' ? 'tsconfig.build.json' : 'tsconfig.json',
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
test: /\.css$/,
|
||||
exclude: /node_modules/,
|
||||
use: [
|
||||
'postcss-loader',
|
||||
],
|
||||
}
|
||||
],
|
||||
},
|
||||
|
||||
devtool: NODE_ENV === 'development' ? 'source-map' : false,
|
||||
|
||||
optimization: {
|
||||
minimizer: [
|
||||
new TerserPlugin({
|
||||
cache: true,
|
||||
parallel: true,
|
||||
}),
|
||||
],
|
||||
},
|
||||
};
|
||||
};
|
Loading…
Reference in a new issue