slab/quill

[Feature request] Ability to set selection based on pixel offsets

Open

#1415 opened on Apr 20, 2017

View on GitHub
 (17 comments) (5 reactions) (0 assignees)TypeScript (47,108 stars) (3,637 forks)batch import
featurehelp wanted

Description

It is currently possible to getBounds in an editor as well as setSelection based on an index and a length.

I'm currently working on building a Google Docs-like application where each paragraph in the document is made up of it's own Quill RTE. Hitting ENTER in a paragraph splits it into two paragraphs.

Naturally I want to implement keyboard navigation between the paragraphs, e.g. pressing DOWN on the last line of a paragraph will navigate to the same x position on the first line of the paragraph below.

The implementation of this kind of functionality has to be based on pixel offsets. Imagine the cursor is at index 2 of this paragraph:

mm|mmmmmmmm\n

And I press DOWN to navigate to this paragraph:

iiiiiiiiii\n

By using the currently available setSelection it is possible to position the cursor in the same index as before:

ii|iiiiiiii\n

But this would not be the correct position to put the cursor. Depending on letter spacing, letter width and so on, it is not possible to set the desired selection using just an index. To do this correctly it is needed to know the pixel offset of the cursor in the mmm paragraph and set the selection in the same pixel offset in the iii paragraph. Possibly this API could be called setBounds.

keyboard-navigation

Is this a feature anybody has though of before? What do you think about it?

Another use case for this API is drag and drop of image into the RTE.

Contributor guide