Simple text interactions

[azaozz]

All of these come "built-in" the single editor (because contenteditable). They also work in pretty much all text editors (including textareas). None of them currently works in the "per-block" editor. If decided to build that editor, all of these can be considered blockers. Also, most/all of these interactions are essential for accessibility.

To test: add four text blocks: paragraph, a list with 3-4 items, a blockquote, another paragraph. Select some of the text in the middle of the paragraphs and make it different color (add spans). Select some other text and make it a link.

• 1. Click in the middle of the first block and drag to the middle of the second. Should select the bottom half of the first and top half of the second.

• 2. Click in the middle of the first block and drag to the middle of the fourth. Should select the bottom half of the first, all of the second and third, and the top half of the fourth.

• 3. Click in the middle of the first block. Hold down Shift and click in the middle of the second. Should select the bottom half of the first and top half of the second.

• 4. Click in the middle of the first block. Hold down Shift and click in the middle of the fourth. Should select the bottom half of the first, all of the second and third, and the top half of the fourth.

• 5. Click in the middle of the first block. Hold down Shift and press the down arrow until you reach the middle of the second. Should select the bottom half of the first and top half of the second. Repeat and use the right arrow, then click in the second block and use the up and left arrows.

• 6. Click in the middle of the first block. Hold down Shift and press the down arrow until you reach the middle of the fourth. Should select the bottom half of the first, all of the second and third, and the top half of the fourth.

• 7. Select from the middle of the colored text in the first paragraph to the middle of the colored text in the last paragraph. Press Backspace. The selection should be deleted and the unselected parts of the colored text should be next to one another (colors should still be there).

• 8. Repeat 7 but instead of Backspace type one letter. The letter should be in the middle of the colored text with the top paragraph color (in the top span).

• 9. Repeat 7 but paste one word. The word should be between the colored text with the top paragraph color (in the top span).

• 10. Repeat 7 and paste 2-3 more paragraphs (copied from another wen page). The selection should be deleted, and the paragraphs should be inserted splitting the top and bottom paragraphs.

• 11. Select from the middle of the top paragraph to the second list item. Press Backspace. The top paragraph and the list should be truncated but stay separate blocks.

• 12. Select from the second list item to the middle of the blockquote. Press Backspace. The selection should be deleted and the remaining text from blockquote should be merged with the list item. The blockquote should be removed.

• 13. Select from the middle of the blockquote to the middle of the following paragraph. Press Backspace. The remaining text from the paragraph should be merged with the text in the blockquote.

• 14. Place the caret at the beginning of the list. Press Backspace. The first list item should be merged with the above paragraph and removed from the list.

• 15. Place the caret at the end of the last item in the list. Press Delete. The text from the blockquote should be merged with the last list item and the blockquote block removed.

• 16. Place the caret in the middle of the top paragraph. Press Enter. The paragraph should be split into two paragraphs. Repeat with the blockquote, should be split in two.

• 17. Copy few paragraphs from another web page (can also contain headers). Place the caret in the middle of the top paragraph. Paste. The top paragraph should be split into two and the pasted paragraphs should be between. Repeat with the blockquote.

• 18. Copy few paragraphs from another web page (can also contain headers). Place the caret in the middle of the blockquote. Paste. The text of the blockquote should be split into two and the pasted paragraphs should be between. All should still be inside the blockquote.

• 19. Copy few paragraphs from another web page (can also contain headers). Place the caret in the middle of one of the list items. Paste. The text of the list item should be split into two and the pasted paragraphs should be between. All should still be inside the list item. (By default in HTML blockquotes and list items are blocks that can contain other blocks.)

• 20. Select some text in one of the paragraphs. Drag it to a list item or the blockquote. The text should be removed from the paragraph and added to the other block.

There may be cases that I've missed. Please add them in the comments.

[afercia]

About basic navigation through text and selection of text using only the keyboard, I'd totally second that anything that works in a textarea should work exactly in the same way in the editor. Also, some screen readers have additional features to navigate through text, for example VoiceOver allows to navigate text by paragraph and by sentence, in addition to the more "classical" navigation by line, by word, and by character. The more the implementation is closer to native HTML elements, the more all this will work.

[swissspidy]

Another thing that needs to be considered: Select all content using Cmd+A / Ctrl+A. Right now, this doesn't work.

[ellatrix]

See #3 and #1211.