wordplaydev / wordplay

An accessible, language-inclusive programming language and IDE for creating interactive typography on the web.
Other
63 stars 44 forks source link

Text selections #264

Open amyjko opened 1 year ago

amyjko commented 1 year ago

What's the problem?

There are a variety of cases where it's helpful to edit a subpart of a text literal or name, and using text editor selection conventions would be helpful. For example, suppose someone wants to delete the extra hello in the text literal: 'hello hello world. They'd have to backspace over the letters individually rather than selecting hello and pressing backspace. Instead, users only have the option to drag and drop (🐲) singular nodes of text. Users are not able to move to move multiple nodes at once which makes it inefficient when editing.

What's the design idea?

We could define the Caret type to allow a range, and then apply restrictions on ranges to only allow selections up to text literal boundaries. That would prevent syntax errors, but also create a limitation that could be annoying.

Our inspiration for the behavior of this feature comes from Visual Studio Code. We want the skills learned from wordplay to be applicable in professional/industry settings and vice versa. We want users to be able to highlight their desired amount of text literals and drag and drop that, instead of singular pre-defined nodes. Users should also have the option to delete the desired amount of text with this feature.

Who benefits?

Anyone wanting to do more efficient text editing. We want to make this universal as possible to lower the learning curve. Since users are familiar with highlighting on other websites, we want to implement something similar.

Design Specification

When the user clicks and highlights their desired length of text, the highlighted text will be shown in a different color to indicate that it has been selected. The user should then be able to copy, paste, and drag this selected text to another area or line in the stage. The nodes should not interfere with the ability to select text.

OnDrag, the dragon emoji will appear. Otherwise, it will not.

katieshi413 commented 8 months ago

Hey @amyjko , would love some feedback on our design proposal when you get the chance!

amyjko commented 8 months ago

Thanks for the good start @katieshi413! A few comments:

amyjko commented 8 months ago

@katieshi413 Oh, and one more question: what would the selections look like? In a standard text editor, a simple highlight rectangle would suffice, but this is not a standard editor. We have node selections (e.g, press escape many times on some code to see them). And so introducing a second kind of selection into the design requires a choice about whether to use the same visual highlighting --- which could cause confusion, since it's a different type of selection --- or to use a different kind of highlighting --- which could cause confusion, because now there are two distinct kinds of highlighting to learn.

amyjko commented 8 months ago

It's the end of Winter! Please provide an update on this issue, including:

If you do plan to continue work on it, carry on. Otherwise, thank you for your contributions!

amyjko commented 7 months ago

No reply :( Unassigning @katieshi413 @emilychoi1.