GitLab Create Editor Group, 3 Aug 2021

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Source Editor: mobile support

Description

The walkthrough mobile support in Source Editor

A

Hello, my name is denis I'm the front-end engineer on the create editor team, and today I would like to talk to you about the source editor.

A

uh This is the main editor that powers up all of our editing experiences in the product and, in particular, I'd like to talk to you today about the mobile support in this editor.

A

uh Historically, a lot of users complain about lack of proper mobile support in in our editor, because the monaco, the underlying editor in the source header, uh didn't have any, but recently we have upgraded to the one of the latest versions of monaco and from what we've seen the mobile experience should have been improved at least a bit and that's what we are going to talk today about. We are going to check what works, what doesn't work and how the things work on the mobiles on the mobile devices.

A

For that I will be using my ipad that I have in front of me and let's just jump on it. So we are. uh We have the gitlab ciamo in front of us on our ipad device and this it works just it just works, because this is the viewer. This is not the source editor, so, let's click the edit button.

A

Today we will test the editing of the files in source editor using two types of interaction. First, it will be bluetooth, keyboard and magic trackpad, because some people complain that you cannot even scroll with the external trackpad or mouse in the source editor or in the monaco.

A

So that's what we are going to check first to have this out of our way. So I'm using my trackpad now you can see the cursor on the screen and what can we do? We can select the things we can remove the things now, I'm using my keyboard. We can type in new things, so what people were complaining was about lack of scrolling support. Here I am scrolling with the things with the with the trackpad no problem whatsoever. Here I can select the things I can remove.

A

I can type in youth new text, so this does work. So, let's, let's just cancel this operation and get back to this file using no keyboard and no trackpad, just the touch gestures.

A

So now we are back to our file without keyboard and without the trackpad I have uh unpaired those devices from my ipad so that we could interact just using the touch gestures. So we are on the view, let's go and edit this file.

A

The gestures are not shown on the screen, but you can notice that scrolling is smooth. Now, let's try and add some information. We we're going to add something here like fubar. This works totally fine. We can hide the keyboard. We can enable the keyboard. You know you see this um small keyboard icon in the top right corner of the editor.

A

That's exactly the thing that I'm clicking in order to get the keyboard uh on the screen. So what about the backspace? Some people? Some users complained that there was no support for the backspace, so the delete button works totally. Fine, no problem whatsoever selection, you can click, click, double click, a word it gets highlighted you remove it, no, no, no, no! No! No! No! ah Now! This is the no no part.

A

What doesn't work on the mobile devices is multi-selection, so you can select one word, but you cannot select, um select multiple lines with multiple words, so you double click one word and you don't have those handlers that usually ios provides you with where you can extend or contract the selection part that part doesn't work on the ios, I'm I don't have android device, unfortunately, but on ios it doesn't work and with the touch gestures, you can still make it work with the external device like the touchpad or the mouse, but not with the touch gestures.

A

Unfortunately, uh what about menu like if you uh double tap on the editor the menu shows up, so that that thing does work? uh I'm. I think that the state of the mobile support is pretty manageable. It's pretty! Okay, oh right. By the way. We also have this since the source editor also powers up the validity.

A

It probably makes sense to test this to test the support there as well. So, but there are no um no surprises things work or not work in exactly the same manner.

A

Again, you can select the word and remove it, but you don't even if the handler is shown for it for for a short period of time. You cannot drag it around the page to select to make the um expanded, extended selection. Unfortunately, uh there was one particular complaint that in the webinary in particular in the webinary one could not scroll with an external mouse. I don't have the external mouse, but I do have the touchpad. So let's go back and reconnect um this device.

A

So now I'm using my trackpad and it does allow you to to scroll it- does allow you to oops to make the selection it does allow you to make the there are. There are some glitches right all right. There are some glitches uh with the selection, unfortunately, but in general.

A

It it's interesting if you cro overcome some certain number of lines. That's where things get interesting, so I'm trying to come to combine the.

A

Right, okay: this is one thing that doesn't work when you have your keyboard opened on a mobile device. You cannot even select with select even with the external mouse or trackpad. You can again select one word, but multiple word selection doesn't work. So if we hide the the keyboard, then we cancel make the multiple selection mult line, selection or multi word selection.

A

So that's um that's pretty much it uh in essence, things look to be look like they just work and the only thing that doesn't really work properly is the multi-word selection, both in the touch only scenario and in the combination of virtual keyboard with external mouse. Apart from that things seem to be working, so please reach out if you find any bug or any uh interaction that doesn't work in the source editor and I will be happy to look into it and maybe we'll find a solution for that. Thank you.