Add textarea popup for pasting code

[zickgraf]

This is a first attempt at implementing a popup (textarea), in which code can be pasted which in turn is parsed into a diagram. The function fromTeX is not yet polished (in particular w.r.t. code style). Nevertheless, I already upload this to discuss the popup functionality.

Currently, the functionality is very basic: clicking on the new button in the toolbar (which still lacks a unique icon) opens a popup. The style of the popup is taken mainly from the input for arrow labels. The popup can be closed again by clicking in the area not covered by the popup. If code is pasted into the popup, it gets parsed and the popup is closed.

[yishn]

Sounds good so far! 👍 But I don't think we should close the popup automatically, so the user can check their pasted code and/or make further adjustments.

[zickgraf]

I have just pushed an update:

1. The fromTeX function should now adhere to the code style and parse any piece of code generated by tikzcd-editor, with the following exceptions: if a node or arrow label contains special characters like & or ], unexpected things might happen. However, since these can be escaped by simply defining some LaTeX commands as aliases, this is not a big problem I think.
2. The popup is not closed automatically anymore. However, typing in it triggers hotkeys. Is there a way do disable hotkeys globally and enable them again later?
3. I have no experience with creating svgs. How did you create the icons?

[yishn]

Regarding 1: I might be looking into that.

Regarding 3: I'm getting my icons from iconmonstr. Maybe you can find a fitting icon?

Regarding 2: Hotkeys for changing arrow properties are handled in Properties.js and will not be triggered when the properties toolbox is hidden. We can just not show the properties toolbox when the code popup is shown. You can change the logic here in App.js.

[zickgraf]

Regarding the icon: I would suggest a "clipboard" icon. What do you think about https://iconmonstr.com/clipboard-8-svg/?

Regarding hotkeys: Thanks for the pointers! Now I simply deselect the edge before opening the popup instead of after the paste. Note: to be able to properly write in the textarea, I also had to change the value of user-select to text in CSS.

[yishn]

Now that I think about it, do we really still need the button for 'Copy code to clipboard'? One can open the code popup and copy the code from there. We can make it so all text will be selected when the code popup opens. What do you think?

Note: to be able to properly write in the textarea, I also had to change the value of user-select to text in CSS.

Does user-select: all not work?

[zickgraf]

For my workflow, there is no reason to keep the 'Copy code to clipboard' button, so I agree that we can remove it.

My problem with user-select seems to be browser specific. In Firefox, I get the following behaviour with -moz-user-select: all on a textarea: I cannot move the cursor using the mouse. Using the arrow keys, I can only move the cursor to the beginning of a line. I cannot select text using the mouse and can only select a whole line when using the keyboard. On the other hand, Opera and Chromium seem to ignore user-select on textareas completely, i.e. user-select: none still lets me select text. I'm not sure which behaviour is correct since the specification is quite confusing for me and still a draft. Is there a reason not to use user-select: text (which seems to work in all three browsers)?

[yishn]

Is there a reason not to use user-select: text (which seems to work in all three browsers)?

No, I was just wondering; if text helps with all browsers, please keep the change. Thanks for the thorough research!

For my workflow, there is no reason to keep the 'Copy code to clipboard' button, so I agree that we can remove it.

Yes, let's remove the copy button; it would only cause confusion when there's a clipboard icon which shows code and a code icon which copies into the clipboard. Then we can use the code icon for the code popover as well.

[zickgraf]

Perfect, I have replaced the 'Copy code to clipboard' button.

Now this should be ready for review :-)

[yishn]

I try to find some time on the weekend to test everything out, but it looks pretty good 👍