🤖 Iteration to refactor editor

[riccardoperra]

Note

This document is currently wip

I've started to work on CodeImage in April 2022 for the solidjs hackathon. Most of the updates have always been related to the "style" of the code, and none concerned the customization of the editor.

I have a lot of ideas for CodeImage in 2024. This project is growing a lot but currently upgrading the editor is painful due how everything is connected.

I'm currently rendering two editors: one updatable by the user and one used for exporting the image. Each one relies on my solid-codemirror lib which currently exports some primitives.

Each change (by user input or by external one) will be reflected to the preview editor via codemirror transactions. This was done recently to fix a bug that prevented too long images from being rendered, because codemirror only renders what you see in the viewport (#532), but in reality it then allowed us to have a customizable editor that the user could view, and another exclusive preview used to generate the image. This is useful in case we want to show, for example, controls to modify something that should not be visible once generating the image.

The problem is that listening to all these transactions right now is difficult due to rendering timing. This management is very critical because for any error on the CodeMirror side, the generated image could break or not show its correct state.

This part of code needs to be reviewed and handled in a better way. Furthermore, the backend must be able to persist the state of the editor so that it can support features that extend it.

Here a list of features that I want to deploy before the end of 2024:

Note

That list will be updated with the related issue and tracking

• Code Diff (example 🚀 - Diff style #616)
• Line highlightning
• Line focus
• Text formatting (example 🚀 - Red Underline Text Formatting #569).
• Autocomplete/linting support (for example add typescript lsp would be awesome :D)
• Format code with customizable options by the user (currently there is prettier with a standard configuration)

However, there are some necessary core activities:

Note

That list will be updated with the related issue and tracking

• Backend api should support the persistence of the editor state
• Editor component should have a manageable and clean way to handle the extension management and the transaction listening
• Add a structure to debug easily the editor state