[UI] Drag-n-drop entire pod/scope

[senwang86]

Summary

• Drag-n-drop the entire pod by dragging anywhere within the pod
• "Double click" to enter Edit mode.
• Bug: Monaco editor's cursor can't be hidden in CMD mode

Test

[lihebi]

Nice! A few issues:

1. In Edit mode, we should disable dragging, so that we can move cursor or select text.
2. In Edit mode of the Rich pod, I cannot chick to move the cursor or select text. This is related to 1.
3. There's a console warning that seems to be a rendering dependency issue.

[senwang86]

Nice! A few issues:

1. In Edit mode, we should disable dragging, so that we can move cursor or select text.
2. In Edit mode of the Rich pod, I cannot chick to move the cursor or select text. This is related to 1.

Nice catch, 136479f fixed 1 and 2.

3. There's a console warning that seems to be a rendering dependency issue.

It says that certain changes in Rich.tsx breaks different components(RepoImpl, SyncStatus, etc) occasionally, but I didn't figure out the reason yet.

[lihebi]

Cool. I'll examine the console warning and the Monaco editor's cursor issue.

[lihebi]

Fixed a few issues.

1. we need to show some visual differences when a pod is selected
2. fix the Monaco cursor & selection using an overlay.
   • Note: This not only "hides the cursor"
   • but also makes the code pod "selectable".
     • E.g., it is now possible to (a) click on a rich pod, (b) hold , then (c) click on the code pod. It wasn't possible without this overlay.
3. the console warning is caused by editable=fasle not compatible with YjsExtension
4. avoid un-needed moveIntoScope (there were console warnings)

[lihebi]

Fixed a few issues.

2. fix the Monaco cursor & selection using an overlay.
3. the console warning is caused by editable=fasle not compatible with YjsExtension

It turns out that editable=false+selectively load YjsExtension solution will prevent Yjs from syncing. Now I'm using the same overlay in both code & rich pods. See commit f4d9892 in #440