GitLab Create Editor Group, 25 Mar 2021

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Source Editor (ex Editor Lite): Find Out What It Can Do For You!

Description

A brief discussion with an exact example of how to replace a custom editor implementation with the Source Edtor.

A

Okay, now we are live, uh welcome everybody. We are here to talk about source editor and what source editor can do for you, and uh we have an interesting use case on the plate today.

A

uh The threat management threat monitoring team um has has a use case of editing the yaml file, so the editing the policy for threat monitoring and for that they are using uh monaco directly. So monaco is the underlying editor in the source editor. Well, first of all, yes, let's, let's clear this, maybe somebody didn't hear it during the front and weekly call source. Editor is what formerly was known as edited light.

A

So the thing that I was telling about during a year calling it edit light now is calling is called a source editor, so source editor is the editor built on top of monaco editor with some abstractions that are very useful for gitlab and some extensibility capabilities that are not available for monaco editor, at least out of the box uh in.

A

13.9, I think we have finally unified all the editing, like all the known editing experiences in the product, including web ide, to be run on source editor, so snippets file, editing in the browsers in the in the repository. So single file editor pipeline, editor web id. Everything is run on source editor. Now this technically brings us one point of failure. Where we can, we can fix things in one place and all the instances get updated and introduce the new features in one place and then all of the instances get updated.

A

This is uh this is cool, but it as it seems to be.

A

There are still some some instances where, um where uh developers try to reach directly to monaco and uh to be told, this particular case that we are going to talk about today has been introduced in nearly one year ago, when, uh when source editor and editor light were just so so young that nobody would dare to use it, including myself.

A

So I would like to go through this use case and see whether we could uh actually switch it to using source editor and how we could do this and why, in the first place, why we would do we would want to do that. So uh without any further ado. Let me just share my screen and we'll go to um like before we uh uh jump into the code. Do you have any questions now about just general things or no okay, cool, let's jump into the code then so I'm gonna share my desktop number two and.

B

I had no idea threat management were bringing in the editor.

A

Me neither me neither- and I was so alexander pinged me in one of the uh issues where um he actually this this issue or murder quest where um they had the performance issues with pulling in monaco and this merged request. He nicely uh switched to asynchronously loading, the um I'm sorry, yes, alexander, might join us, I'm so sorry. Let me just type in to him.

A

Frontend, yes, yes, and we get slack out of the recording.

A

That was interesting so um in this particular merge request, alexander started merging monaco asynchronously, and that's that was done uh nicely because they do not need uh monaco right away. Monaco is really uh require, like the editor is requested there really on demand, so no need to pull it in uh prematurely.

A

If users, for example, would not even need that editor, so that was smartly done nicely done, and then he was asking me whether source editor could could do any better or like edit light.

A

This is how the network policy editor is implemented at the moment, so there's a diff and uh we jump straight to monaco monaco api. So we import monaco uh and we jump straight into the api and set up the things. Pretty simple thing. No big deal should be should be fine. uh However, we do have source editor, so why would we want to switch to source editor?

A

That's that's a good question. So, let's, first of all, let's see where this editor is used. So if you go to security and compliance threat, monitoring create a new policy or edit an existing one. I assume, and then you switch click. This dot yaml mode button here is what you will get. So you are getting the editor where you can can edit the uh the yaml for your threat, monitoring policy so far so good. This is what is generated by monaco.

A

uh The question is: why would we want to switch to source source editor first source editor provides the support for uh for different extensions right. So those extensions are custom, custom written, but.

A

You could you could write any extension, for example, for yaml uh editor and considering that the pipeline editor working with the same yaml files um as well, could create some some interesting extension to work with yaml files. These two editors might share the same, the same extension for to to share the features that would be pretty nice, but the main thing is that if we start using source editor, you kind of delegate the maintenance burden to the source, editor and maintainers, namely to the edited team.

A

Instead of dealing with monaco api uh yourself in your group. Also, uh you can you can notice here that uh monaco pure monaco comes very. It comes without any understanding of the uh user selected theme right. So if we go to the uh to my preferences here, I do use solarized light theme just for the sake of it, but it's not reflected in this editor.

A

This gives the discrete editing experience so, for example, users might edit their gitlab yam yaml in the um in the repose stream, and they would get their visual theme, but when they get to this editor, they don't um this this. This is not a big deal right, but this gives the um the discrete user experience.

A

When we, when we deal with uh with monikers directly this, this might allow us might give us uh some uh some benefit of getting straight to the api. The problem is, though, if you want to maintain it and implement something, something interesting and cool, you do need to read the uh api documentation for monaco.

A

Let me tell you: this is not the fun the funniest thing in the world, because the documentation is really really hard to get into and really hard to understand, what's going on and how the things are uh are wired together in monaco. So that being said, I strongly advise if you uh or your group need any editing. Experience uh do check source editor, because you will, you will not need to think about maintaining this, and you would uh simply avoid a lot of headache that uh maintaining custom implementation might bring.

A

So, let's just this is this is the thing that we are going to work with. uh What is cool about source editor again when it comes to this particular implementation? If you uh um so source editor comes in two flavors first, you can get, uh you can use it directly.

A

Just like you use monaco api, but use it through the editor light api right now. It is called editor light still because I didn't rename the things, but you can get straight to that api and build things uh manually. But if you are, that scenario uh suits the needs when you need to implement it in the in the rails. Application source editor is the framework agnostic editor, so it can work both in hamel templates work can work in the view application.

A

It can work in your react application if you will just take it out of gitlab and put it into your react application.

A

um In this particular case, we are dealing with view application and there is the view component for source editor. So let me just get to this um to this component. um I will increase the font size, so this is. This is the same file that we have seen here. So I'm just opening it in my editor, and there are things that that you can notice here. So we deal with this editor and we do this like set value, dispose manually like creation of the things, and we listen to the uh events.

A

So there are a lot of like um low level uh access low level uh calls to the to the monaco api, how we can simplify this with source editor. So, as I said, I've already done this locally, so I will just unshelf my changes that I have here so that we could go through those. So, first of all, instead of importing editor uh from monaco, we are editing. We are importing edited light from uh from edited light.

A

I keep calling to edit the light in the code just for the uh simplicity of refactoring later, when, when I need to find all the instances of edited light and rename them to source editor, so this is the component. This is the view component. How does the view component look like here? Is the view component on this on the right side, so it does all the um all the magic for you, so it abstracts a lot of things.

A

Oh we don't mean this, and this component does reach out to the um to the uh source editor api directly and the source editor api gets directly to monaco api. So there are some some abstractions here that make things a bit simpler, but once we have this editor light component, we can get rid of this custom div and we just use the edit light component. Instead.

A

Yes, so by doing this, we do not need to pass all of this things that we had previously. So we do not need to set up the editor. We do not need to sort of create it. We do not need to listen to on the change modal content, because this is done in this component internally. So you can see this on here on the right side, edit, the light view component does do the thing for you also it um improves comparing to this implementation.

A

It does improve the things that it doesn't. It meets the event in the debounced manner. So while here every type you every time you um type in char in the in the editor, you emit this input event.

A

Here we do debounce it to um to make the editor work more performant, so things small things like this that were thought through in the in the editor uh do help uh help things to to to work a bit smoother, but we still need to pass the um the options that uh some of the options at least some of the options uh to edit the light and edit the light does accept the the options as the editor options parameter, and these editor options are exactly the same as uh one passes to to monaco.

A

So I just copied over all of these things, except for we do not need value, because value is passed as just parameter on the component. We do not we technically, we could use language.

A

The problem is that uh I've I've submitted a bug uh earlier today, uh where source editor doesn't uh doesn't support this particular option of monaco simply because eddie light issue always assumes that you have a path for a file, so you do not work in a silo, but you work on some file that has some path uh that leads to the situations when we have to uh to trick the editor light or source editor into thinking that it works with a file. But in reality we don't care about the file file name itself.

A

We just care about this yaml extension, so that edit, the light would would be able to apply uh correct syntax highlighting to to our um to our instance of the editor. There are also things here that that might need to be revisited, for example, glyph margin. We we might not need this, because glyph margin is false by default, but this is this is different story. You can pass the options to edit a light or source editor as exactly in the same manner as you would pass them to monaco editor.

A

So, and that's that's pretty much it at this moment, we can get rid of all of the watcher of this handlers like mounted before, destroy because it all it's all handled by the editor light component and when we are done with this, let's, uh let's reload the page, to to just make sure that it actually works.

A

Otherwise there is zero point in doing this right, so we click here, and here we go. We have the solarized light theme uh like just to to make things more interesting: let's switch to solarize dark and make sure that it still works here.

A

Yeah it does work. So uh there are some styling things that we might need to remove the padding from the surrounding element, but that's sort of the detail: implementation in general, uh you get things quite some things for free with the source editor and, as I said in the beginning, the beauty of using source editor is that you can extend its functionality without changing the source code of the source. Editor sounds really bizarre, but you do not need to change the code of the editor.

A

Editor light is extensible by extensions and your group. If you need some particular in the editor, you can write an extension apply to your instance of the editor and make it available for any other group out there should they need the same functionality for their editing experiences. This is a really powerful thing. I don't think you need any any real extension here, but you, as I said, uh comparing to the pipeline editor, you might want to benefit from uh schema validation, for example, for the yaml files.

A

That's uh that part is implemented in the pipeline. Editor we might branch it off into uh or actually pipeline. Editor does have the extension for that already and we might just use it here as well. uh That's that's very short and very, um very chaotic explanation of why source editor might be more beneficial for your group, but I would like from from here I would like to switch to some discussion and questions.

A

So um yes, alexander, is here: hey man. I.

C

Am hey, I am so sorry for being late.

A

C

I got caught up in making coffee and reading so okay.

A

Nobody is allowed to interrupt the morning coffee, that's that should be forbidden.

C

But this was a great demonstration. Thank you so much I did not expect you to have already uh converted this for us. I look forward to reviewing that. Mr.

A

uh That there is no, mr, I will, I will push it. I will push it anytime. If you want it's just it's really. uh The point is that uh we um like in the source editor. We thought about a lot of small details and things that uh that allow uh people implementing the editing experiences to avoid this headache and avoid thinking about different edge cases.

A

We just take care of that in the editor and uh we really strive for uh delivering the unified editing experience across the whole product, so that uh people could would not need to to uh constantly specify the particular route or thing where they were editing and bug appeared, so they can say. Okay, I was editing a thing and then this bug happened. So we know that this bug will be available for all the instances and we have to fix it as soon as possible.

A

So that's um because we had this problem with uh web id running on the custom implementation of monaco. Now it runs source editor and we are actually uh we have. We are happy to have it unified and know that okay, we have one solid base for all the editing experience, uh experiences across the product.

C

Yeah makes sense. Thank you.

B

Coming back to earlier on um talking about loading it asynchronously would you would you suggest that the editor like component is always loaded asynchronously? This is.

A

A dependent, very good point: this is a very good point. uh No, I wouldn't suggest it to be always loaded asynchronously, because, if you're landing on the uh repository edit uh file, for example like if we go to to the repository- and let's say we go to edit the yeah, this yaml file- and I click edit- I wouldn't expect editor light or source editor to be loaded asynchronously. I would expect it to be loaded right away, because this is the main functionality of the page, and this is the main element that is visible right away.

A

But in this particular case uh the editor is hidden behind the button that users might not even click, they might not need it like, they might run it in this rule mode and then loading the whole source editor might be a waste of time.

A

The uh the point is that, though, when you use source editor- and you need to download it because your edit, the editor, is main element of the page, there is a high chance that users will have that chunk in their cache already, because, as I said, this is unified, editing experience. So as long as users go to web id or to edit the file in repository, they do get it get the chunk cached and when they get land on your editor instance, there is a high chance that they will have this implemented.

A

There is also one thing that makes editor light nice to use, and we might take a look at this in this particular in this particular implementation. So editor, lighthead or source editor, has the loading state implemented. uh So if you take a look here, so this loading state is bundled in source editor, uh we could not.

A

I could not get it here yet, because, uh simply because the element where the edit, the light or source editor has to to to be loaded, uh isn't high enough when we uh request it, so it's just a matter of us giving proper height to the uh to the element around it.

A

But um yes, again getting back to your question mark, I do not advise loading source, editor, asynchronously! It's it's no different to any other uh component like if your component is the primaries is the first class citizen of a router or for you. You do not need to load it asynchronously. Otherwise, please do load it asynchronously. In this particular case again we could improve the loading like uh now it loads instantly right, but if we reload and try to load uh this editor again, the delay in fetching the things is pretty significant.

A

If you get it on the cold cache, I have cache disabled here. So it does take some time. So I would suggest to investigate an interesting, interesting thing that we start pre-loading the editor light component. When user just hovers this yaml mode button, so once user hovers, we start prefetching edit the light or source editor, and then it will reduce this uh wait time or maybe with that like showing the the spinner might might be good enough for the users.

A

I don't know it's it's up to to to you, alexander, probably to decide what how you want this to be presented, but but there is a chance for that and an opportunity to load this faster and nicely.

A

Yes, any any other.

B

Questions um when it comes to testing yeah, um would you uh is it sufficient to sort of just like shallow mount it and say it has like a value prop and an input event and then treat it as a black box? Otherwise,.

A

uh If we're talking about the unit testing, yes, because source editor has extensive test coverage, so all the internals are tested, I think, are tested pretty well so uh yeah. I think it it should be safe to treat it as black box. However, if you want to like we have, we also have in, for example, in uh keep in mind that we also have a lot of features, packs that uh that that uh take source editor in in into consideration right. So we have feature specs for editing files for editing web id for different things.

A

We also have the integration specs for web id, and although those tests do include source editors, so that's um that should be pretty safe to treat it as black box. In the unit testing.

A

That again uh removes removes the burden of uh of the authors implementing the editor editing interface for testing these things, because otherwise uh these custom implementations would need would require uh tests to be written for that uh functionality as well.

A

C

Could we uh look at an example of an instance of source editor that has an extension.

A

C

A

C

A

One this one has the extension, the extension in uh like no, not this particular one. uh The the cool thing about extensions is that.

A

You can use any extension based on the uh on the file you're working with, for example. So when you get to yaml file in repository, for example, you don't get any any extension here.

A

But if you open, let's say.

A

If you open uh markdown file, then you will get the extension uh there to support uh working to support working with the uh with the markdown files. So, for example, all of this uh like functionality behind these buttons, do you introduce some are introduced to the editor through the through the extension, for example, uh you can, uh I think you can do this. Yeah like this um takes and things like um select, uh yeah, quoting and like all these buttons are uh served through the extension. There is.

A

Let me just show this editor a light oops edit.

A

Light extension basis, and then we will jump off there, so there is the base extension that implements some base functionality so for highlighting lines and almost so. This is the new functionality we we have introduced in 13.10.

A

So now you can, while you're editing the things you can link to the uh to a particular line, and you can generate the links uh highlighting, for example, um now 10 to I don't know, 20. so 10 la highlighting 10 lines of this code in the editing mode. You you could do this in the view mode.

A

Now you can do this in the editing mode as well, so uh pretty pretty cool thing, but there is this editor folder with extensions, and then there are some of the extensions and, as I said, pipeline editor uh pipeline authoring group created this uh ci schema extension that you can introduce in your implementation. For example, should you need this?

A

uh There is this file template extension. It's just navigate file start like for for some of the files this is needed uh and the whole uh web id is an extension of source editor. So all the custom web id uh functionality is in this extension.

A

So uh if you remove this extension from web id, it will just be behave like normal repository, editor kind of, and there is this markdown extension where we have methods like get selected text select within selection. It's all to support this functionality related to these buttons so and the extensions can be, can can bring any sort of uh functionality uh one-on-one. So uh I have proof of concepts for for extensions, providing the live preview of markdown files and uh different things like I. I do think I have them somewhere here.

A

Overlay widget with some some some information being overlaid over editor and uh what's that, like inline, editing, snippets.

C

A

Multi multi-files interface can be an extension as well, so there are different things that I just didn't have time to convert into proper, mrs and merge into into product, but this is the. The good thing is that your group can create an extension with a functionality that your particular group needs. Without asking editor group to implement this functionality, you can go on implement this, as an extension apply to your instance of the editor and be done, and then as an additional bonus.

A

Another group can come up uh with with the need for exactly the same functionality and they then they can just reuse. Your extension or your group can reuse extension created by another group, and in this case you are the owners of that code. You um you can do whatever you want with that code, really without messing up with the core of source. Editor.

B

The markdown extension is that applied um specifically by this uh in this editing page or is that, like um automatically added whenever you edit, a markdown file in editor like source, editor.

A

No, it's not automatically it's it's for this particular for repository. uh So if we take a look at the uh um eddie blob, I guess yes oops. No, not this one edit uh blob js!

A

Yes, so there is uh the method configure monica editor and then we request we're technically request, request file, template extension here this is uh for this is like I don't know why I called it file template extension. That's that's beyond this discussion. uh Apparently I wanted to put more things for supporting the the work with with the templates. When you select a file type that supports templates, then we have to negate to the file start after applying this extension.

A

This was not part of like the templates are not part of the editor, so we have to build this bridge somehow and then um this is, but this is the extension that we import by default because it it is needed for pretty much all of the files. But if you take a look uh further in the code, um I think where is this markdown wait? A second right, so uh this is. This is the cool thing about the extensions, so you do not need to pull them in right away.

A

So this is the part that that is interesting, so we identify whether we are on the markdown file, so whether we need the markdown functionality at all. If we are, then we dynamically import the extension for markdown files and apply it so the dot use is like, as the resemblance of uh view plugins. So we just use this dot use and uh we apply the markdown extension to this particular instance of the editor. If we are talking about markdown file, so that's that's pretty flexible.

B

And how would how would this look if you were using, because this is uh a javascript file which looks like it's sort of instantiating, the editor, not via the view component? So how would this look using the view component.

A

With view component right, uh this is a very good question, so view component does support extensions array, so you can pass extensions as an array for for the view component. So you would we we support string. If you need one just one, one extension you can pass just string and the string would be the name of the file. So, for example, if I would like, if I need to apply let's say, editor ci schema, x, dot, gs extension, I would simply write here, extensions, oops and then I would write editor ci schema x.

A

So technically, this is the name of the file in this editor extensions, folder or you can make it dynamic and generate the array of the extensions you want to to be applied to this instance of the editor light. uh We do not support dynamically importing the uh the extensions in view component.

A

Unfortunately, but if you need uh that part edit, the light uh component exposes the. Where is it? It exposes the get editor method.

A

So, technically you in order to load the extension dynamically you can get access to the edit to the uh raw editor in the view component and then load extensions dynamically uh directly on that editor, without, like bypassing the the view component, does it answer the the question.

B

Yes, it does thank you, cool.

A

Cool, yes, but uh we also have the documentation on. Let me just show this editor light. We have the documentation, it is a bit outdated and also it doesn't support.

A

It doesn't provide the things that uh that we still need to implement. uh I have uh for this milestone. I have the work on re-building. The way we apply extensions to make it more flexible, but that's that's going to be reflected in the documentation, so we have a separate section in, and development guidelines called edited light going to be renamed to source editor at some point uh again, and that's uh that's the thing that that's going on here and I think where is it creating an extension so yeah? There are some things, I'm not sure.

A

Do I write about the view component here? Oh actually, I don't. I think, okay yeah, so I don't cover the view component here, because view component is like it's a bit raw thing still and it it's not very flexible, but I will of course, yes.

A

Yeah yeah and yes, if you need any help, if you want to discuss any particular case where you need, you would need the editing experience just reach out to me anytime, and I will be happy to jump on a call and and discuss the things uh regarding that or another implementation potential implementation.

A

So that's um that's! um That's it uh do we have any any other questions.

C

No, it doesn't seem like it. Thank you so much for the demonstration.

A

No, you are welcome. It's um I'm, I'm I'm very passionate about uh this. uh This editor so anytime. You have questions about uh about this, I'm happy to to jump and see the implementation and help with um with different different potential uh improvements. So yeah awesome. Thank you. Thank you and yes, then we are a bit of overtime, but thank you very much for joining and thank you very much for listening for me mumbling about this thing.

A

It's uh sometimes I have more ideas than I can express, but I try to speak very fast in order to compress all that information.

A

uh So thank you very much for joining and I'm looking forward to talk to to talk more about uh about source editor. Should you need any help cool. Thank.

B

A

Have a nice day bye.