Splitting out ExtensionManager init and injecting it

[gzuidhof]

Hi Tom,

Moving the editor styles out of index.tsx was a good first step, but there's still some stuff going on in there that I think we can split up. I'm happy to contribute / help out, but before I put in the effort I want to make sure you agree!

I'd like to propose the following:

1. We move the editor to its own file (maybe editor.tsx? Or maybe components/editor.tsx?).
   Currently the index.tsx has side effects due to it exporting server.ts, which initializes a bunch of extensions which we probably will never use (and there is some bundle size + init time cost to that)
2. We initialize the default ExtensionManager in some to-be-created file. Right now there is duplication between server.ts and index.tsx.
3. We change the prop in the editor called extensions to take an ExtensionManager. The end-user is now responsible for injecting their own ExtensionManager. This is a breaking change (but the migration should be very straightforward - two lines to change or so).

The last change especially allows us to remove the extensions and disableExtensions prop and logic entirely and it will reduce the bundle size for those not using all the extensions. Also it allows for multiple editors on the same page (or when destroying and re-creating) to re-use the same instances of extensions.

The new usage would look something like this:

import {setupDefaultExtensionManager, ExtensionManager, Editor} from "rich-markdown-editor"

// OPTION A: Using the defaults - this has the same API as what is now in the editor props
const extensions = setupExtensionManager({disableExtensions: ["emoji"], extensions: [...]});
// OPTION B: creating my own for more advanced users
const extensions = new ExtensionManager([...]};

<Editor
  defaultValue="Hello world!"
  extensions=extensions 
/>

Let me know what you think!

[tommoor]

Hey @gzuidhof, I like this proposal for the potential to lower bundle size and combine the extension management for both server and client. I'd imagine the client API could be wrapped in a useExtensions hook or similar to make it more typical.

I think the main problem is that the extensions api was never designed for this level of pluggability, the project was originally very opinionated. So many of the extensions need initializing with extra props that hook them into handlers in index.tsx 🤔