feat(toolbar): toolbar refactored and ui improved #1815

neSpecc · 2021-11-20T16:21:40Z

This PR introduces several updates of the Toolbar code and UI.

This is the first part of updates due to upcoming feature called "Unified menu".

List of changes

Block Tunes toggler moved to the left

Block Actions (BT toggler + Plus Button) will appear on block hovering instead of click

The UI module triggers block-hovered event
Toolbar uses block-hovered for appearing
currentBlock setter added to the BlockManager. We use it to set the Current Block on clicks on the BT Toggler or the Plus Button (and some other cases as well)

Block Tunes toggler icon and Plus button icon updated
Dev Example Page / menu with helpful buttons added to the bottom of the screen

Dev Example Page / 'dark' theme added. Now we can code at night more comfortably.

Rectangle Selection (optimization): the throttling added to the mousemove and scroll handlers
Rectangle Selection (fix): the first click after RS was not clear selection state. Now does.
Blocks API: the getBlockIndex() method added
Blocks API: toolbar moving logic removed from blocks.move() and blocks.swap() methods. Instead, you should use Toolbar API (it was used by MoveUp and MoveDown tunes, they were updated).
Blocks API: the insert() method now has the replace: boolean parameter
Blocks API: the insert() method now returns the inserted Block API
Listeners API: the on() method now returns the listener id.
Listeners API: the new offById() method added
Toolbox became a standalone class instead of a Module. It can be accessed only through the Toolbar module. Block Settings will be refactored the same way in the next updates.
The new UiApi section was added. It allows accessing some editor UI nodes and methods.
Git submodules removed from the CI flow.

Related editor-js/header#72

- 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

…ion state

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

…yId()` method added

neSpecc · 2021-11-20T16:51:18Z

src/components/block-tunes/block-tune-move-down.ts

@@ -109,6 +109,9 @@ export default class MoveDownTune implements BlockTune {
    /** Change blocks positions */


Toolbar moving logic removed from the api.blocks.move() method, so we do it manually.

neSpecc · 2021-11-20T17:26:28Z

src/components/modules/ui.ts

+      /**
+       * Prevent caret jumping (to last block) when clicking between blocks
+       */
+      lastBlockBottomCoord < clickedCoord;


have improved the isClickedBottom statement:

some blocks can have margins, so when a user clicks on such margins between .ce-block, caret was jumping to the bottom of the document. For now, it checks the exact coordinate of the last block bottom.

gohabereg · 2021-11-20T18:13:34Z

src/components/block-tunes/block-tune-move-down.ts

+    this.api.toolbar.open();
+    this.api.toolbar.toggleBlockSettings(true);


Looks not really convenient, maybe we can at least use just one method?

gohabereg · 2021-11-20T18:21:48Z

src/components/modules/toolbar/index.ts

+      this.plusButton.show();
+    } else {
+      this.plusButton.hide();


Might be a good idea to move plus button into toolbox as well

I don't think that it would be better. Toolbox is the list of buttons. It is about to become vertical. And it can be appeared in several ways, not only by Plus Button. And the Plus Button is just a part of Toolbar UI.

gohabereg · 2021-11-20T18:23:31Z

src/components/modules/ui.ts

+     */
+    let blockHoveredEmitted;
+
+    this.readOnlyMutableListeners.on(this.nodes.redactor, 'mousemove', _.throttle((event: MouseEvent | TouchEvent) => {


Why not mouseenter and mousemove. Also would be great to check on pointer devices and mobile devices with connected touchpad/mouse

The mouseenter would have to be bound to every Block, and there can be a large amount of them. I think it's better to use the single event on the redactor node.

Also would be great to check on pointer devices and mobile devices with connected touchpad/mouse

I will test the RC version in CodeX Docs, so I will try to use various hardware.

gohabereg · 2021-11-20T18:26:38Z

src/components/ui/toolbox.ts

+    this.onOpen = onOpen;
+    this.onClose = onClose;
+    this.onBlockAdded = onBlockAdded;


In case API would grow, might be better to just extend EventEmitter interface and provide enum of possible events

toolbox.on(ToolboxEvents.Close, () => {}); toolbox.on(ToolboxEvents.Open, () => {});

Using typescript we can strictly type that

gohabereg · 2021-11-20T18:28:37Z

src/components/ui/toolbox.ts

+      toolName,
+      undefined,
+      undefined,
+      index,
+      undefined,
+      currentBlock.isEmpty


We should go with object here

I've decided not to change the interface of the existed API method. Should I create an overload for that?

gohabereg · 2021-11-20T18:29:44Z

src/components/modules/toolbar/index.ts

+    this.toolboxInstance = new Toolbox({
+      api: this.Editor.API.methods,
+      tools: this.Editor.Tools.blockTools,
+      shortcutsScopeElement: this.Editor.UI.nodes.redactor,


Might be better to provide some nodes from Editor API

editorAPI.nodes.redactor // or editorAPI.ui.redactor

…e same state

codex-team/editor.js#1815

neSpecc added 14 commits September 30, 2021 20:40

chore(block-tune-toggler): toggler moved to the left (draft)

1f6f92a

toolbox ui updated

cdbe9e1

fixd caret jumpling, improved some styles

5ba7743

the dark-theme to the example-dev.html

ae3386d

positioning improved

b313238

fix(rectangle-selection): first click after RS does not clears select…

c64ee97

…ion state

toolbox position fixed

167ecb1

the toolbox module became a standalone class

38a188f

- 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 `offB…

72774fa

…yId()` method added

fix bug with Tab pressing on hovered but not focused block

efcd617

mobile version improved

6a22d94

upd example dev

6445d83

small updaets

9035227

neSpecc requested review from gohabereg and khaydarov as code owners November 20, 2021 16:21

neSpecc added 2 commits November 20, 2021 19:32

add nested-list

5138560

linting

54d7b7f

neSpecc commented Nov 20, 2021

View reviewed changes

gohabereg requested changes Nov 20, 2021

View reviewed changes

neSpecc added 6 commits November 22, 2021 13:02

(api.toolbar): toggleBlockSettings now fires toggling event with th…

d9f9c1c

…e same state

EventDispatcher used instead of callbacks for the Toolbox

d0aff29

UIApi added

27042e0

fix ci

35461ed

git submodules removed from the ci flow

5442321

branch updated

8cc4cb6

gohabereg approved these changes Nov 24, 2021

View reviewed changes

neSpecc added 3 commits November 24, 2021 19:29

add paragraph submodule to the ci flow

13813ff

Update CHANGELOG.md

ce991b6

Update package.json

4e465ab

use ubuntu-latest for chrome ci

27f377c

neSpecc merged commit ff91466 into next Nov 24, 2021

neSpecc deleted the feature/block-tune-left branch November 24, 2021 18:14

jschanker added a commit to navgurukul/bhanwari-devi that referenced this pull request Nov 11, 2022

Move toolbox left

e943646

codex-team/editor.js#1815

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(toolbar): toolbar refactored and ui improved #1815

feat(toolbar): toolbar refactored and ui improved #1815

neSpecc commented Nov 20, 2021 •

edited

Loading

neSpecc Nov 20, 2021

neSpecc Nov 20, 2021

gohabereg Nov 20, 2021

neSpecc Nov 23, 2021

gohabereg Nov 20, 2021

neSpecc Nov 22, 2021

gohabereg Nov 20, 2021

neSpecc Nov 22, 2021 •

edited

Loading

gohabereg Nov 20, 2021

neSpecc Nov 23, 2021

gohabereg Nov 20, 2021

neSpecc Nov 23, 2021 •

edited

Loading

gohabereg Nov 20, 2021

neSpecc Nov 23, 2021

		@@ -109,6 +109,9 @@ export default class MoveDownTune implements BlockTune {
		/** Change blocks positions */

		this.api.toolbar.open();
		this.api.toolbar.toggleBlockSettings(true);

feat(toolbar): toolbar refactored and ui improved #1815

feat(toolbar): toolbar refactored and ui improved #1815

Conversation

neSpecc commented Nov 20, 2021 • edited Loading

List of changes

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

neSpecc Nov 22, 2021 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

neSpecc Nov 23, 2021 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

neSpecc commented Nov 20, 2021 •

edited

Loading

neSpecc Nov 22, 2021 •

edited

Loading

neSpecc Nov 23, 2021 •

edited

Loading