feat(codeeditor): support to extensions

[danilowoz]

Introduces the ability to load Codemirror extensions in the CodeEditor component, in two ways:

• By SandpackCodeEditor props:

<SandpackProvider template="react">
  <SandpackThemeProvider>
    <SandpackCodeEditor
      extensions={[autocompletion()]}
      extensionsKeymap={[completionKeymap]}
    />
  </SandpackThemeProvider>
</SandpackProvider>

• By Sandpack props:

<Sandpack
  options={{
    codeEditor: {
      extensions: [autocompletion()],
      extensionsKeymap: [completionKeymap],
    },
  }}
  template="react"
/>

Closes #280

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit b4cfdf3:

Sandbox	Source
Sandpack Blog Example 1	Configuration

[jsjoeio]

Looks great! Thanks for adding this so quickly 😄

A couple nits around capitalization of CodeMirror but seems like it's good to go

[jsjoeio]

❓What's the id for? Should we add a comment explaining what it's for? I'm assuming it maps to the id of the CodeEditor so maybe that's obvious.

[danilowoz]

Good question. This is a temp bug fix that I'll approach in another PR soon. It's related to a random id generated in every render, which leads to unmatch values in tests cases. Here's more detail #143

[jsjoeio]

Yes! I was hoping you'd add docs too 🙌

[jsjoeio]

Any ideas on when this will be merged?