feat(editor): change Ace for CodeMirror - #374

🤔 What is this PR ?

With our current editor (Ace), we have a hard time customizing the style and matching what we want to do with the mode. Bending the Ace css to our will is hard and tricky.

This is why I changed the editor from Ace to CodeMirror! What is nice with this rich editor is that we have more ways to customize it, from the extensions used to the css used inside the editor.

This is a first PR to migrate the editor, and then we will be able to do another PR for updating and adding more CSS!

⚙️ How does it work ?

• Replace Ace with CodeMirror. Since CodeMirror live only inside a tag, I created a specific hook to enable it and handle everything inside EditorView.tsx
• Setup CodeMirror with the minimal setup to have the same feature as Ace
• Setup custom css tags for specifics syntax inside the editor to have the same feature as Ace
• I took the liberty to also move the shake function inside the useCodeMirror hook because it should not be the responsability of the EditorView.

🧪 How to test

• Open the /editor locally and write some code
• Open the prod website and write the same code
• The two should have the same style (approximately) and features
  If you want a code example, I used this bit for my tests :

<html>
  <head>
    <style>
      *, ::before {
        box-sizing: "border-box";
        margin: 14px;
      }
      .content {
        display: flex;
        flex-direction: column;
      }
      #separator {
        content: '';
      }
    </style>
  </head>
  <body>
    <h1>Ceci est un titre</h1>
    <div class="content">
      <span id="separator">coucou</span>
      <edd>Random balise</edd>
    </div>
  </body>
</html>