This PR adds the functionality to submit and delete benchmarks via the web interface.
Submit Button and Drawer
The submit button is placed at the top right of the benchmark page. We can improve its layout in a future PR.
A drawer opens when the submit button is clicked (just like submitting a new system). After some research, I managed to create a single editor window that users can directly interact with. The editor supports some handy functionalities like indenting selected lines by pressing the tab key and automatic indent on new lines.
This is achieved by combining our existing dependency react-code-blocks with a new package react-simple-code-editor. The new package has a high download count in npm and a moderate maintenance frequency. The reason why I did not choose react-textarea-code-editor is I find its "undo" command buggy (you can try hitting a couple of enters in this official demo and undo to reproduce).
I also tried to remove react-code-blocks and rely only on react-simple-code-editor, but it gets a bit complicated as we need to install a new syntax highlighting package prismjs. It will take some effort to import it and use it in our code, so I think it I think we can explore it in a future PR. We'll also need to manually support the "copy code" functionality provided by react-code-blocks, but that shouldn't be too hard.
I'd also love to take the chance to briefly explain how the editor functionality is created. So please bear with me a bit haha.
Many if not all editor packages actually use the same strategy, which is overlaying an invisible editable textbox on top of highlighted text. The reason for doing so is the text inside the "editable textbox" (which I'll refer to as "textarea" from now on because that's the HTML element used under the hood) cannot be highlighted due to fundamental constraints. This means they must duplicate the text, highlight and enclose it in another HTML element (which I'll refer to as "pre" from now on as that's the element used under the hood). So textarea and pre have the exact same text, except the former being editable and the latter highlighted.
Now the clever part is to make "textarea" invisible and overlay text on top of "pre", so the character position matches perfectly. This creates the illusion that we are editing on highlighted text, but in reality we are editing on invisible text that gets rehighlighted and rendered beneath our text box.
In my implementation, react-code-blocks acts as "pre", and react-simple-code-editor` provides the "textarea" with handy editor functionalities. While I needed to write some explicit CSS to align them together and fix small style issues, there isn't too much overhead and complexity. Open to comments and suggestions!
Delete Button
The delete button is placed at the bottom right of the benchmark card and is disabled for users who are not the owner of the benchmark.
This PR adds the functionality to submit and delete benchmarks via the web interface.
Submit Button and Drawer
The submit button is placed at the top right of the benchmark page. We can improve its layout in a future PR.
A drawer opens when the submit button is clicked (just like submitting a new system). After some research, I managed to create a single editor window that users can directly interact with. The editor supports some handy functionalities like indenting selected lines by pressing the tab key and automatic indent on new lines.
This is achieved by combining our existing dependency
react-code-blockswith a new package react-simple-code-editor. The new package has a high download count in npm and a moderate maintenance frequency. The reason why I did not choosereact-textarea-code-editoris I find its "undo" command buggy (you can try hitting a couple of enters in this official demo and undo to reproduce).I also tried to remove
react-code-blocksand rely only onreact-simple-code-editor, but it gets a bit complicated as we need to install a new syntax highlighting packageprismjs. It will take some effort to import it and use it in our code, so I think it I think we can explore it in a future PR. We'll also need to manually support the "copy code" functionality provided byreact-code-blocks, but that shouldn't be too hard.I'd also love to take the chance to briefly explain how the editor functionality is created. So please bear with me a bit haha.
Many if not all editor packages actually use the same strategy, which is overlaying an invisible editable textbox on top of highlighted text. The reason for doing so is the text inside the "editable textbox" (which I'll refer to as "textarea" from now on because that's the HTML element used under the hood) cannot be highlighted due to fundamental constraints. This means they must duplicate the text, highlight and enclose it in another HTML element (which I'll refer to as "pre" from now on as that's the element used under the hood). So textarea and pre have the exact same text, except the former being editable and the latter highlighted.
Now the clever part is to make "textarea" invisible and overlay text on top of "pre", so the character position matches perfectly. This creates the illusion that we are editing on highlighted text, but in reality we are editing on invisible text that gets rehighlighted and rendered beneath our text box.
In my implementation,
react-code-blocksacts as "pre", and react-simple-code-editor` provides the "textarea" with handy editor functionalities. While I needed to write some explicit CSS to align them together and fix small style issues, there isn't too much overhead and complexity. Open to comments and suggestions!Delete Button
The delete button is placed at the bottom right of the benchmark card and is disabled for users who are not the owner of the benchmark.