Data structure editing controls in blocks mode

[amyjko]

What are you trying to do that you can't?

It's hard to edit literals in both text and blocks mode. For example:

• ['a' 'list']
• {'a' 'set'}.
• ⎡a•# table•#⎦⎡1 2⎦

For each, adding and removing values requires a lot of typing and deleting.

What is your idea?

Add direct manipulation controls to the block views of these literals to make it easy to quickly add a bunch of new values, new table columns, new table rows, etc. It will be much faster than typing and teach creators the syntax by example.

[enricopratama]

Hi @amyjko may I be assigned into this issue? May I know how I can get started on this and may I be pointed on where to look in the implementation? Thanks in advance!

[amyjko]

Sure! This is not ready for implementation thought: the needs design tag means that we have to design something first. The high level design problem is how to make data structure editing easier. There are many ways we might achieve this. So the place to start is to understand the problem, and ideate possible designs that would address the problem.

[enricopratama]

Notes:

When in block editing, you can edit via keyboard and edit lists sets keyboard, but in blocks mode you can't edit text. what kind of controls you might want, such as insert a row in this table,etc. that would make it easier to edit.

When the output of the program is that data structure, you get the edit value on stage. you can make that rendered value editable

Think about how to make editing easier (especially on stage)!

[wwihono]

Hey @amyjko can I be assigned to work on this issue alongside @enricopratama?

[amyjko]

Yes! Added.

[wwihono]

Hey @amyjko me and @enricopratama have begun ideating a design for a proposal for this issue.

First, starting with providing more accessibility for editing lists, we propose a change to how elements can be added. In between elements, we propose to add a '+' element when the cursor hovers above the whitespace between elements.

Next, we are proposing a redesign to make stage changes. For example, in the stage view, to change values inside a list, when the cursor hovers over an element, the element will be surrounded in an orange outline as reflected by the corresponding element in the editor.

This is what we currently have, we would love to discuss this with you in person on Wednesday and get your professional input on our proposal.

[enricopratama]

[enricopratama]

Attached is a visual representation of our example, we are happy to discuss it more to you in-person to explain more about this since this is only our first iteration of our design proposal. Thank you in advance @amyjko!

[amyjko]

Great, I look forward to chatting on Wednesday @enricopratama.