mirror of
https://github.com/codex-team/editor.js
synced 2026-03-15 07:05:48 +01:00
feat(toolbar): toolbar refactored and ui improved (#1815)
* chore(block-tune-toggler): toggler moved to the left (draft) * toolbox ui updated * fixd caret jumpling, improved some styles * toolbar moving by block-hover - UI module triggers 'block-hovered' event - Toolbar uses 'block-hovered' for appearing - `currentBlock` setter added to the BlockManager - (reactangle-selection): the throttling added to the mousemove and scroll handlers - `getBlockIndex` method added to the Api - (api-blocks): toolbar moving logic removed from `blocks.move()` and `blocks.swap()` methods. Instead, MoveUp and MoveDown tunes uses Toolbar API * the dark-theme to the example-dev.html * positioning improved * fix(rectangle-selection): first click after RS does not clears selection state * toolbox position fixed * the toolbox module became a standalone class - Toolbox became a standalone class from the editor module. It can be accessed only via the owner (the Toolbar module) - (api.blocks) the insert() method now has the `replace` param. Also, it returns inserted Block API now. * new(api.listeners): `on()` now returns the listener id. The new `offById()` method added * fix bug with Tab pressing on hovered but not focused block * mobile version improved * upd example dev * small updaets * add nested-list * linting * (api.toolbar): `toggleBlockSettings` now fires toggling event with the same state * EventDispatcher used instead of callbacks for the Toolbox * UIApi added * fix ci * git submodules removed from the ci flow * add paragraph submodule to the ci flow * Update CHANGELOG.md * Update package.json * use ubuntu-latest for chrome ci
This commit is contained in:
Peter Savchenko
GitHub
parent
acdd1f5b4e
commit
ff91466b14
50 changed files with 1123 additions and 790 deletions
|
|
@ -1,5 +1,5 @@
|
|||
<!--
|
||||
Use this page for debugging purposes.
|
||||
Use this page is for debugging purposes.
|
||||
|
||||
Editor Tools are loaded as git-submodules.
|
||||
You can pull modules by running `yarn pull_tools` and start experimenting.
|
||||
|
|
@ -15,6 +15,11 @@
|
|||
<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>
|
||||
|
|
@ -26,7 +31,7 @@
|
|||
<a href="https://editorjs.io/creating-a-block-tool" target="_blank">API</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ce-example__content _ce-example__content--small">
|
||||
<div class="ce-example__content">
|
||||
<div id="editorjs"></div>
|
||||
<div id="hint-core" style="text-align: center;">
|
||||
No core bundle file found. Run <code class="inline-code">yarn build</code>
|
||||
|
|
@ -38,12 +43,31 @@
|
|||
editor.save()
|
||||
</div>
|
||||
<div class="ce-example__statusbar">
|
||||
Readonly:
|
||||
<b id="readonly-state">
|
||||
Off
|
||||
</b>
|
||||
<div class="ce-example__statusbar-button" id="toggleReadOnlyButton">
|
||||
toggle
|
||||
<div 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>
|
||||
|
|
@ -68,7 +92,7 @@
|
|||
<script src="./tools/header/dist/bundle.js" onload="document.getElementById('hint-tools').hidden = true"></script><!-- Header -->
|
||||
<script src="./tools/simple-image/dist/bundle.js"></script><!-- Image -->
|
||||
<script src="./tools/delimiter/dist/bundle.js"></script><!-- Delimiter -->
|
||||
<!-- <script src="./tools/list/dist/bundle.js"></script> List -->
|
||||
<!-- <script src="./tools/list/dist/bundle.js"></script> List-->
|
||||
<script src="./tools/nested-list/dist/nested-list.js"></script><!-- Nested List -->
|
||||
<script src="./tools/checklist/dist/bundle.js"></script><!-- Checklist -->
|
||||
<script src="./tools/quote/dist/bundle.js"></script><!-- Quote -->
|
||||
|
|
@ -88,10 +112,10 @@
|
|||
<!-- Initialization -->
|
||||
<script>
|
||||
/**
|
||||
* To initialize the Editor, create a new instance with configuration object
|
||||
* @see docs/installation.md for mode details
|
||||
* Editor init config
|
||||
* @see https://editorjs.io/configuration
|
||||
*/
|
||||
var editor = new EditorJS({
|
||||
const editorConfig = {
|
||||
/**
|
||||
* Enable/Disable the read only mode
|
||||
*/
|
||||
|
|
@ -200,7 +224,7 @@
|
|||
type: "header",
|
||||
data: {
|
||||
text: "Editor.js",
|
||||
level: 2
|
||||
level: 1
|
||||
}
|
||||
},
|
||||
{
|
||||
|
|
@ -215,7 +239,7 @@
|
|||
id: "7ItVl5biRo",
|
||||
data: {
|
||||
text: "Key features",
|
||||
level: 3
|
||||
level: 2
|
||||
}
|
||||
},
|
||||
{
|
||||
|
|
@ -244,7 +268,7 @@
|
|||
id: "QZFox1m_ul",
|
||||
data: {
|
||||
text: "What does it mean «block-styled editor»",
|
||||
level: 3
|
||||
level: 2
|
||||
}
|
||||
},
|
||||
{
|
||||
|
|
@ -266,7 +290,7 @@
|
|||
id: "1sYMhUrznu",
|
||||
data: {
|
||||
text: "What does it mean clean data output",
|
||||
level: 3
|
||||
level: 2
|
||||
}
|
||||
},
|
||||
{
|
||||
|
|
@ -321,7 +345,12 @@
|
|||
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
|
||||
|
|
@ -355,6 +384,39 @@
|
|||
|
||||
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>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue