 the more time we spend complaining about only having a job, the less time we actually have. Okay, so hi everyone, I'm Nha, I'm from the Talkworks, which is here. So today I will talk a little bit about my side project, which is a matte editor, Ok, it's working Cool So why I build this one So if you know the matter out there So usually that when you want to tie some symbol Usually you need to click, click, click, click or something like that, which is low Or if you don't want to click something like that you can use latex Which is quite, I mean you must know about latex So I want to build this one that have people you don't need to know latex but you can tie matte quickly So why you can tie matte quickly So I borrow idea from our code editor Which if we press base slash It will showing something for you to search on For example that I want to insert matte I select matte container And I can input something like this Ok, so let's say I want to input alpha So I can do something like that I search on alpha I can input alpha I can input matrix So something like that So let's say that you want to search on something you can select categories Which is you can select here So you can choose something like this Or even you can drawing Let's say I draw alpha Ok cool Let's say you don't know alpha So you can draw it It's not working So this is how you tie matte editor So that the flow up you tie is very quickly instead of select on something like that So outside of that we can have insert a diagram So that inside one editor you can insert a diagram draw a diagram and tie a mathematics here It's a normal diagram And this is the thing I already done So you can draw very complicated mathematics draw very complicated diagrams So this is about the demo So I will show a little bit about structure So this is everything based on react.js And the whole editor is immutable tree It's the immutable tree Why I'm using react.js immutable Because if you use immutable you can undo and redo for free So you don't need to care about undo and redo something like that It just work out the box And the structure So we have this a little bit about the tree So you have editor Inside editor you have multiple lines Each line you have multiple blocks And each block you have multiple editors So that's how you can insert, let's for example I can insert square root It's an editor Inside square root I can insert another square root I can insert another square root So you need to deal with a lot because you need to handle model or recursion a lot to handle this kind of situation Another thing The thing I'm using in this project is both JavaScript and TypeScript So JavaScript is most for react component rendering and for TypeScript for model processing The reason is it's quite a complicated model processing in this project For latex parsing I use this library If you see here our you can also import from latex So I need to parse the latex and you can import here So for much symbol recognition You can draw it So I'm using this library Which is quite This is machine learning Machine learning So I got the data from network from outside and then I use this library to train the data and then build symbol recognition So that you can draw and see it Thank you I see it Any question? For now you can export to back to latex but just format not for the normal text So you can export back to latex Or you can bring it So let's say that you want to bring out that you can bring out and send Or you can share with other people So you have a link you copy the link and you can share with Yeah Did you have any performance issues with using react for the text editing layer Like one here is a lot that you know all atom was slow because they were using react for the text editing Yeah actually Usually if you run if you build an editor on web it's always slow So I need to do a lot of performance in react.js Like if you look here I just open a very long document So you need to handle like every time people type something or it's not typeable because yeah let's see this one I think So every time you type something you might just make sure that it needs to respond in a certain time If not then it's very slow So even a very long document you want to make sure that every typing need to be fast So you need to have a lot of optimized performance for the editor Every new feature, every thing people type need to think about performance Yeah Even just like scrolling right it is pretty smooth So are you using some kind of virtualized view? No no no not for this view because the reason we need to bring So when you bring you must show the whole document I'm thinking about that Yeah Can not How do you create all the symbols Are they all unicode or are you using something as they draw a square root Yeah cool question So for the normal symbol we have unicode for the common symbol actually we call this if you click here we have common symbol which is we need to build I need to build by myself So for symbol square root or matrix fraction The good thing about ReactJS is everything is component So I just need to add a more component I just take it out That's the reason I very love ReactJS Fast, flexible and easy to work with Yeah So Yeah you can see here So like I said we have editor here I don't know whether you see it I think you can come on plus that So you see this editor this line So inside line we have block So you may search another app So you send a common block So the whole thing is look like editor but actually it's just a dump tree So you need to manage a lot of selection cursor or everything Yeah In the future do you plan to convert MATLAB code into those mathematical equations and vice versa? MATLAB code I don't know So if there is a way to convert the code into a readable mathematical formula then Yeah that's a good idea That's a good idea actually But I'm thinking about it It has the potential of commercializing Yeah I'm thinking because proxying is it has the potential of commercializing I'm thinking because proxying is the hard part Even proxying latex It's not so very easy Let me remember Yeah Even just for latex This one proxying we have some other proxying Yeah Okay Thank you