The goal today was to get LSP/intellisense/autcomplete working. So I can get tooling over the code. Tsserver is a package maintained by microsoft that lets you create a virtual filesystem in the browser and get diagnostics, completions, linting, refernce trees and basically tooling over your code. I had seen this was possible before but it is a whole task to set this up. So I started by getting this tsserver connected to the editor. This took much longer than I would have wanted it to.
The main issue with connecting the tsserver to the editor was reconciling the splitting of the file. The main function of the editor is to give you components that add up to the file. So a file is split up into smaller self contained chunks. This works all and good till the tsserver returns a {from, to} position for the diagnostics.
Each codemirror instance can work with from and to position only relative to its own state and has no way of knowing what had come before or after it. The way I fixed it was adding start property in each blocks state which the parent of the block manages. So everytime you save a file it increments and assigns a start value to each block.
There was also a whole thing about managing a live version of the file seperate than the file that is saved for iframe to update (can't update iframe at every key press, but need autcomplete response at each key press, so have to maintain two versions..)
So anyways got all of that working and here is a demo of getting a reference to functions defined in another block. And when you mistype it, or don't pass in expected value -> it shows you errors.
I did some writing in it and honestly its pretty helpful and works pretty well, feels quite robust, not as good as neovim obviously but pretty great for a web editor.
Finally, this is something I will work further on tomorrow... but a sneak peak:
I am able to pass the reference of Editor to the iframe, so the code running in the iframe is able to edit the editor. The below video will make it more clear, the editor outputs an iframe with buttons that onclick change the positioning of the editor.
The next one is going to be, creating a file in the editor that will output an interface and have functionality that will read the editor's state and save the state to a file locally using the fs functionality implemented on the local server. So will be writing a js script that will save itself using itself.