Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Arrow keys should activate the magic block when a widget is selected #6693

Closed
oleq opened this issue Apr 28, 2020 · 1 comment · Fixed by #7387
Closed

Arrow keys should activate the magic block when a widget is selected #6693

oleq opened this issue Apr 28, 2020 · 1 comment · Fixed by #7387
Assignees
@oleq
Labels
domain:ui/ux This issue reports a problem related to UI or UX. package:widget squad:magic type:feature This issue reports a feature request (an idea for a new functionality or a missing option).
Milestone
iteration 33 (v20...

Comments

@oleq
Copy link
Member

oleq commented Apr 28, 2020 •
edited
Loading

It should then become ready (active) for inserting content (typing, enter, pasting, etc.), but not be in the model yet to not disrupt track changes or collaboration.

This can be implemented by adding an attribute to the model selection so the model structure is untouched. It comes down to:

  1. A widget is selected (for instance, a last child).
  2. Arrow down key in pressed.
  3. The selection gets an attribute (saying that the block is after).
  4. Conversion for the selection kicks in.
  5. A late listener recognises the selection attribute, removes .ck-selected from a widget and adds a class (?) to the block (the block becomes "active").

On the UI-level

  • the active magic block button should look differently (colors, icon, animation, etc.),
  • the (upper or lower) boundary of a widget related to an active block should be highlighted using an absolutely positioned (blinking) line to give users an idea of what (or where) is going to happen if the start typing.
    • the line should probably be similar (color, thickness) to the current widget outline
  • when the magic block becomes active, the viewport should scroll to the related widget boundary to make sure this whole "activation process" never goes unnoticed by the user (e.g. when the widget is partially cropped by the viewport).

A piece of #407.
@oleq oleq added the domain:ui/ux This issue reports a problem related to UI or UX. label Apr 28, 2020
@oleq oleq added this to the iteration 32 milestone Apr 28, 2020
@Reinmar Reinmar added package:magic-block type:feature This issue reports a feature request (an idea for a new functionality or a missing option). labels May 1, 2020
@Reinmar Reinmar mentioned this issue May 4, 2020
Closed
@oleq oleq changed the title Arrow keys should activate the magic block Arrow keys should activate the magic block when a widget is selected May 5, 2020
@oleq oleq mentioned this issue May 5, 2020
Closed
@Reinmar Reinmar removed this from the iteration 32 milestone May 6, 2020
@Reinmar Reinmar modified the milestones: nice-to-have, iteration 32 May 11, 2020
@oleq oleq self-assigned this May 15, 2020
@Reinmar Reinmar modified the milestones: iteration 32, next, iteration 33 May 19, 2020
@oleq
Copy link
Member Author

oleq commented May 28, 2020

A new idea that makes sense: entering the fake caret mode should be possible on both sides (surrounding content→widget, widget→surrounding content).

This was referenced Jun 5, 2020
Merged
Closed
niegowski added a commit that referenced this issue Jun 10, 2020
@niegowski
Merge pull request #7387 from ckeditor/i/6693
eb8dd9f 
Fix (engine): The model selection post-fixer should not set a new selection if the ranges before and after post-fixing are the same (see #6693).

Tests (image): Aligned image tests to the latest `WidgetTypeAround` plugin API (see #6693).

Other (paragraph): The `InsertParagraphCommand` should split ancestors of the `Position` to find a parent that allows `'paragraph'` (see #6693).

Tests (table): Aligned `Table` plugin tests to the latest `WidgetTypeAround` API. Code refactoring (see #6693).

Feature (theme-lark): Added styles for a "fake caret" brought by the `WidgetTypeAround` plugin (see #6693).

Feature (typing): Created a public `isNonTypingKeystroke()` helper (see #6693).

Feature (utils): Created `isArrowKeyCode()`, `getLocalizedArrowKeyCodeDirection()`, and `isForwardArrowKeyCode()` helpers (see #6693).

Feature (widget): Implemented keyboard support for inserting paragraphs around block widgets using a "fake horizontal caret" (`WidgetTypeAround`). Both "Insert new paragraph" buttons are now always displayed for all block widgets regardless of their location in the document. Closes #6693. Closes #6825. Closes #6694.

Also:

*   code refactoring in the `Widget` plugin,
*   aligned `Widget` tests to the new `WidgetTypeAround` keyboard behavior,
*   moved the `Enter` and `Shift+Enter` support from the `Widget` plugin to the `WidgetTypeAround` plugin.

MINOR BREAKING CHANGE (widget): Removed the `getWidgetTypeAroundPositions()` helper since the "Insert new paragraph" buttons are now visible regardless of the widget location in the document
@oleq oleq mentioned this issue Jun 15, 2020
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@oleq oleq

Labels
domain:ui/ux This issue reports a problem related to UI or UX. package:widget squad:magic type:feature This issue reports a feature request (an idea for a new functionality or a missing option).
Projects
None yet
Milestone
iteration 33 (v20.0.0)
Development

Successfully merging a pull request may close this issue.

#6693: Keyboard support for the widget type around feature ckeditor/ckeditor5
2 participants
@Reinmar @oleq