GitHub Open Source Friday, 22 Mar 2021

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: The toolkit for building cross-platform text editors with remirror - Open Source Friday

Description

remirror was started as a personal challenge. Would it be possible to build an editor that combined great performance with ease of use? It was also important to give users of all frameworks, the ability to build an editor by picking and choosing their desired building blocks.

In order to meet these goals, ProseMirror was picked as the best choice for the core editor layer. The second decision was to base the structure of the editor on blocks of functionality called Extensions. Each extension would be designed to fulfill a specific purpose in the editor. Due to this structure, users would be able to craft a fully custom implementation.

Join @bdougieYO and @ifiokjr in learning the latest in text editor magic with ProseMirror and React.

0:00 - Start
1:25 - What is remirror?
2:42 - Demo
11:53 - Automating pre-releases with GitHub Actions
18:09 - Contributors added to the funding.yml

As always, feel free to leave us a comment below and don't forget to subscribe: http://bit.ly/subgithub

Thanks!

Connect with us.
Facebook: http://fb.com/github
Twitter: http://twitter.com/github
LinkedIn: http://linkedin.com/company/github

About GitHub
GitHub is the best place to share code with friends, co-workers, classmates, and complete strangers. Millions of people use GitHub to build amazing things together. For more info, go to http://github.com

A

uh You know honestly, I've been on some other streams and I think we need to have like some sort of bumper intro um if anybody wants to contribute to that, I do have something ready to go, but I just have not had the time to put it in, but this is open source. Friday is the time for us to talk to open source maintainers about their project. I I have the chat open. So definitely let me know if they're volumes or levels they're good or if they're not good, I can adjust.

A

If you have questions about the project, we're talking about today feel free to drop in the chat. uh Also, a reminder: if you got the pop-up on the chat code of conduct, it's full enforced. So please be respectful respect our guests, respect our other folks in chat and, let's all have a great time, but speaking of great time, uh I'm gonna have a great time with our guests, uh which is iffy iffy. Why don't you introduce yourself if folks aren't familiar with you and what you do and what you maintain.

B

Hey everyone, so my name is italy and I am an open source developer. I'm a developer and happens to do some open source work and, um and the project I'm here to discuss the project. I've been working on, maybe for for the last year, is called remember. So it's kind of like a really you know a really ambitious text, editor built on top of pros, mirror for react and actually supports multiple frameworks. Although right now react is the focus so, um but we've got like react native in the works, so you can.

B

You can deploy the same editor to react as you do to to your um to your mobile apps as well. So, yes, exciting times awesome, so the last time we spoke, I couldn't show you a demo and the reason I couldn't show you the demos. It was still in just just being work on a lot of a lot of things and and the development approach I've taken, maybe isn't probably using the best, but this is my first open source project, so a lot of it was just just discovering okay, what what works for me?

B

How do I yeah so just uh this is an intro like I will, if you're interested in contributing to projects on github. This will actually be great for you, um because uh I'm gonna go through some of the tips on how to contribute to re-mirror some of the maybe uh issues you you can. You can pick up on, I'm just responding to one of her things so, um but but yeah remira is a project for for building text.

B

Editors so say, for example, you wanted to build your own google docs or you wanted to build, maybe something simpler, a chat, app that has mentions or or a markdown text editor or an editor that just exports that gives people a visual representation of what you're typing but allows them to export it to markdown. The remira is just like a toolkit for you and if you're using react, you're going to love it if you're not using react, you may not love it as much, but we all love it soon, so that that's in the works.

B

We uh it's it's like it's already cross-platform. There is no reason why react is the only one you can use. The only thing is I've focused mainly on reactor, because that's my forte, it's better to start where you what you know and then like roll out afterwards, um so so yeah. So I I guess I guess I could jump into just showing showing you some of the some of the code, and this is like really basic stuff.

B

So so what we want to do now, we want to add some ui to to the to the editor and again so uh this um we mirror react comes to the rescue, so in remote react um we're gonna, add so. First we're gonna add some extensions to make this possible. I'm just like finding the extensions I need. So I'm just looking at what extensions I need for this.

B

Okay, so um so here I would say: let's just keep it really simple, so let's say on uh online italic. Whatever things should we add any other extensions, you would be interested in seeing.

A

B

Say heading a strike through something: that's.

A

B

An extension yeah strikethrough strike extension. What else is there um there's bi-directional extensions you can actually like if you, if you need to support languages, you can say okay by direction. Extension will automatically look at the language you're using and set the direction of the editor to what it needs to be, whatever extensions that are um there's an annotation extension which is used really like one of my contributors added this, that's so good. Actually, one of the sponsors out of there.

B

It's such a good extension, it's really really like advanced, so I can show that to you. I have time later, there's an emoji extension um which actually, in fact, let me put the emoji extension in so.

A

The emoji extension is like one of the things that were the aha moment for me uh when you showed how.

B

A

To to create that functionality, because that feels like a a feature that I would spend way too many weeks trying to build myself, uh but when he showed that off last time, that was what sort of got me hooked.

B

Yeah yeah yeah, so hopefully we get time to look at that, so uh so new heading extension. So let's just uh start with the basics and what we want to do. We want to add like a top top menu to this editor. So what I'm going to do here is I'm going to um yeah. So what I'm gonna do?

B

I'm gonna say: okay, so I'm gonna. So this is gonna be a bit difficult because I'm not doing this with um with uh typescript. So it may look like I'm just doing a bit of magic. So let's say, um but it's not magic, it's just! It's just good! Hopefully good code, yeah yeah.

A

So, let's stretch you.

B

Yeah so also, let's add a history extension, so history adds support for undoing attention. Some of the extension is already included by default in call um so, let's add some cons, toolbar and then equals so we're going to create an array of like what we want. I'm just.

A

Going to copy and paste.

B

It in just because, um if you're using typescript, this kind of is just like really easily done for you and maybe I'll show it to you in touch with after. But um so it's like just configuration, you just configure what you want um and they should just work so.

B

It's a component item so from from the mirror react we can start adding like so so, okay. So what so? What we've done here? Let me just tell you what we've done here: we've um we have like each each toolbar has like a type so, uh and let me let you let me just add it before before I show you so each like we've just configured and said: okay, I want to add a history, um so a history uh uh undo and redo.

B

So, like the label here saying: okay, this toolbar is a grouping and it's gonna be we're gonna, call it history so like when you hover over it. You should see you should see the history um pop up and it's going to have two commands undo and redo, and the great thing about this is because the internationalization is built in into remy. So what what this will do is that it looks at the command each command can define each extension can define the commands it makes available and part of defining that it can.

B

It can define the default icon that uses that's used and it can also define the default label. You can always override this, but if you want to use the defaults, you can just leave it like this, so this will just automatically fill out uh this information for you um and um let me get rid of this tool because copy and paste actually isn't isn't, uh isn't fun. So so what we're going to do? We're going to add that to our toolbar extension.

B

uh So let me just quickly get that going um so so, okay, so what what we're gonna do is gonna be importing the toolbar extension a toolbar component. Sorry from remote react so toolbar, which is just this toolbar yeah.

A

And we're going to.

B

Use it in so within again within this the context you can get with this line, we're in the context because we need access to like we want our bold to have access to all the commands and stuff. So within the context, can you say toolbar um and uh say items equals going to start breaking toolbar and uh yeah? I think that's! Okay, that's that's! It item is equal to bar and that should.

B

Give us something: okay for some reason: it's good! Oh! Yes! Yes, yes, so, okay, it's rendering below and the reason it's rendering below is because I've said auto render okay, so.

A

Yeah, so you can see the toolbar.

B

Is here so if I start adding a text and I say, undo it undoes yeah.

A

So there's two issues here: real quick. um Just to reiterate your error message was blocking everything that was showing so, as you were, adding it folks, probably weren't, getting the correlation what was happening but as you're adding these.

B

A

They they were actually showing up here.

B

Yes, yes, so I just yeah, I added these components and they're showing up they're showing up here. So, for example, uh I can um so just just a number of things, so you can see, as I hover uh like, I can see like the automatic labels that are given again.

B

These are all fully um uh so you can have full internationalization, so bold can be swapped out for whatever language I have set up crowding, but once I set up crowding, if you set the language of the editor to french, it will come up, will show up in french. So this is all kind of built in by default, with room mirror. um So let me get rid of separation, because so, for example, just by changing that I got rid of this little separator at the end um and so yeah.

B

So with just the built-in stock, you get a lot of functionality. The icons are using remix icon, so remix icon, this really cool uh library and I've kind of like taken it. I've, given them full attribution. So every time, if you but like there's just a lot of great icons, so uh please start the repo check it out. It's a great library but- uh and it's helped me a lot um so so just a few things so first um I can undo I can make stuff bold but notice.

B

One thing so when I press bold uh and then I start typing, I've lost focus. So uh one of one of the things that the toolbar- maybe this should be a default please, your suggestions are, are us are welcome.

B

So one of the one of the props is refocus editor. It's a boolean, so focus editor. That means that by default, when I press the command, it will automatically refocus the editor. So now, if I, if I make this unbold and type it it knows to go back to the editor as soon as it's done. Whatever it's doing just.

A

B

The standards you expect. The second issue we have is that this is below and I actually want it to be above above the editor again. This is all style.css, I'm not going to go into styling. You can, like literally override the css. What this component is doing is giving the default styles, but you don't have to include it. You can literally leave this out and provide your own styles or you can put it in and override your styles as you see fit. So um this this style component.

B

I'm I'm using a motion in this in this in this demo, so there's there's a version for it's a version of promotion, there's also a style components version if you want to see star components and there's also a dom version. If you just want to use a pure dom. So since I'm using emotion- and if you want to use just pure css, you would say import um import.

B

So so you import from here at re, mirror styles, and then it's forward slash four slash all css, so it just imports all the styles. So that's another way of doing it. If your build system supports it, so um there's like this, I try to be flexible as possible in terms of before we we relied fully on emotion, uh but now emotion is just an option. You can use emotion if you use it or not, but so yeah. The other issue is that this is now rendering below.

B

uh So we're just going to make it remember above and the way we do. That is also render so by default, when you auto render it it does it, but let's get rid of auto render. Let's show you like, uh let's quickly put in editor component, so we have an editor component which is kind of what is auto rendered when you want to render, but by importing it you can. Actually, you can actually decide where it goes, so we're going to say. Actually I want the auto render to offer the toolbar.

B

So I want the edits to component to come in after the toolbar. So.

A

Just wanted to sort of round up the the conversation, because we only have like 15 minutes left. um We saw how to sort of integrate and um and touch the code sandbox. I don't know if that is that, if that link is available for folks to also jump into or like how.

B

Can they how.

A

Can they get their hands uh onto a demo so.

B

If you at the moment, if you go to the pull requests tab, so one of the things I've introduced- and this is going to be for contributors and for sponsors, so one of us, so the first pull request, the top one. Oh wait! No, no, not that one interesting one. So this is again one of the so one of one of the new new joiners uh who's helping is uh he's creating like faqs and really doing some good work.

B

So if you've got your baseball beta release, I realized mike mike so the bottom one, my uh my one automatically puts it at the top, so the most recent is at the top um okay. So if you, if you scroll all the way to the bottom, so right down um so yeah, so whenever, whenever um like a releases happens on the pr, you have a sandbox, you can say open in sandbox for javascript or open encode, sandbox typescript.

B

So that's the way you can get like the latest releases energy that will be added to the readme right now. This is purely on on pr, because uh so so one thing I found in some projects um when you, uh when you um yeah so whenever a project is, is released uh or like when a project, sometimes like you, you had there's a change or a fix. That's been done in a branch.

B

um Sometimes maybe the contributors are a bit slow to merge it in or maybe there's other things that that they need to sort out before they can merge it into the code base. But one of the things I want to offer- or I am offering- is that if you see code that you want in a branch you literally can just say: I want this to be published and as soon as you publish it, it's available for you on npm and you can just um use it.

B

So if you look at the versions, so this is taking a long time because you're you're literally the first person to click this link. This is like literally released like 10 minutes ago, so he's obviously doing it for the first time, um but but yeah. If you go, if you go above, if you scroll up, one keeps going up and click the so keep going up until you see the next, the next gif here.

B

So if you open in sandbox, so go back down open code sandbox this one should open quicker because I've opened it before. I think uh code sandbox cache is actually.

A

Caching yeah this one.

B

Is like instant almost um so yeah there's like so this is like an older version, but it kind of shows you.

A

Yeah that that is really interesting uh and I'm that's really awesome. I have so many more questions about how you're making this work, um because I.

B

See you're using.

A

Github actions so.

B

Can we take.

A

A quick detour and uh yeah.

B

Sure check out your actions yeah, because.

A

B

A

A really good use case for actions.

B

Okay, so uh so in workflows, I've got this um published pr. So if you go to just before, yeah publish pull requests so, and I have to give thanks to one of my contributions. Akkavu has actually helped make this better. So before there were some potential bugs and he added he added. Like I didn't know, you could do inline js, so he added this inline js, which um takes the ref and allowed yeah. He made it better. Let's just say, yeah,.

A

Yeah one of my favorite things to talk about to be quite honest,.

B

I had no idea, I was like mind, blown it's really cool, um so so what what what is happening? So this is a um so basically whenever a comment is is posted.

B

So if you type a forward, slash publish if you scroll up just before the script, so whatever yeah, so it looks for the common body in a pull request or whenever publish is typed and you're, either an author, a contributor and eventually I'll add a sponsor as well right now, whenever someone becomes a sponsor and wants to do this, I just add them as a contributor, but if uh like whenever you're one of those things um it can process it like, it will say: okay, this is time to do a release.

B

So um if you scroll down the whole like the release, is using an internal action so like I do the installation, I build a project. So this is normal stuff. That's just installing and auditing the dependencies just to make sure you're not like adding any weird stuff to the build and then um uh yeah. So then the next one is to mutate the package.json file. So so what what I'm basically doing is wait? What is it if you scroll up scroll up?

B

If you, I think I've missed where oh, no, no scroll scroll down yeah it is, it is there it is there. It is so the action is um pm that installs it and what yeah? Oh. This is the one. So this one uses an internal, um an internal uh script, which is in forward slash support forward, slash actions forward, slash pr, so you go to that file.

B

uh It's in support, support, yeah and then then actions and then pr. So if you go to source, don't go to pr. This is like it's, uh you go to source, and then you go to pr here. So it builds to that pr for a little bit. So, okay.

A

So this is a just a just a quick script to exactly.

B

Just power the.

A

Sort of printing to.

B

Exactly that it takes a pr number, does it release to npm for for for you, but I I think it's so powerful because I I've especially with mono response. It's so like there's a fix that you just need. You just need this one fix and it's like it's just they're sitting there in some branch someone's done and you have nowhere to get into it. So so what what this will allow us for, like I'm, going to completely stop using pre-releases? This is how I'm going to do. Pre-Releases pre-releases from now will be a long-lived branch.

B

uh Maybe has the latest code and once it's ready to be merged, it gets merged back in. Oh can I also say I I know you work for github github actions, it's just it's beautiful. It's like I. I was saying before recall that I really believe github is cornering the market in terms of just producing great developer. Tooling, like the code spaces have been, my laptop sometimes starts lifting off.

B

I just found that if I use code spaces, I can code without having I'm looking forward to getting a more powerful laptop, but I can code without having to worry about. You know the fans blowing up, because it's kind of being done in the cloud. It's just there's so many tools that github is introducing that just really work well for developers and yeah. I'm I'm happy to I just enjoy using it like. I just enjoy uh your ecosystem.

A

Yeah- and I would say, everybody uh click the sponsor link, so that way, if you can get a new laptop so that way he doesn't have to worry about it, taking off on them as well. Oh.

B

That's you've just spotted something. So oh one, one thing, I'm also making um a change to so, um oh okay, so I guess some users aren't enrolled. So I like I, I should have checked before I did that so um one thing I've done so anyone who's contributed to remember in the last six months. I add them to the sponsors, the list because I just feel like it's not just it's not just me who's working on this.

B

So if you want to work on a project and want to have the opportunity to you know, put it on your profile and be sponsored for yeah literally come on just just just kind of like. For me, the most important part remember isn't isn't me and my code is actually like the community that's being built around it. I've been so impressed with some of the contributions I've been so impressed.

B

uh Benji has just been like, like just amazing and like so yeah he's there like. If you, if you want to sponsor and sponsor him will hawker is maybe a bit less well known in the community, but he's been doing some really good. Work he's actually recently added a list, uh checkbox extension, so I'm going to check over that next week and hopefully manage that uh eventually um and there's there's also another a few others that I put in, but I don't think they have sponsorship profiles yet. So that's why.

A

They're not showing up, they might have to sign up for it um yeah to get.

B

A

Which is so, are you doing that manually? So when you get a contributor, are you then adding them to the sponsors list at the moment.

B

I was gonna also, do it again. Sometimes you automate too much this right now, there's not many but like I was gonna, do it, so it will look to see um anyone. Who's contributed in the last six months. Just add them to that list, and- and so like that's that's kind of what what I wanna have going. Yeah.

A

And that's uh super honorable for you to do that too, as well, and it's also a great way to sort of dig up the people who are helping to keep the project moving forward and like supporting it as well. So, like um awesome idea, uh I'm pretty sure I'm gonna actually talk to github about this. uh The folks who are managing the sponsors program uh because that's a great feature that should be built into the platform and it shouldn't be a manual thing awesome, I think, um can I.

B

Go for it yeah as well. Thank you yeah. I just want to say, like brian has been super helpful to me, he's one of my first sponsors and he's just doing like a lot of good work in the community like this, like your channel is doing great and like the stuff you do on github, I'm just just really annoying for people like you who just opened the door for us. So I really appreciate you just looking out for me and helping me on this journey. So thank you. I.

A

Appreciate the kind words too and I'm just always trying to pay it forward. So that's what I do all right. Thanks man.