How to correctly gather Editor type with Extension recognition

[ashmoreinc]

I am working on a project where I'm using the editor in a lot of place's with a few different variations which have different controls.

I started making a common component which all of these can use so it's just a matter of providing a flag of what will controls will be enabled.

Something along the lines of this:

<MyTextEditor options={["h1", "h2", "table"]} />

---

I have a wrapper component which initialises the Editor

const EditorController = (options: Option[]) => {
    return (
        <div className="...">
            <EditorProvider
                extensions={extensions}
                content={content}
                slotBefore={<MenuBar options={options} />}
            />
        </div>
    )
}

The MenuBar component iterates through all the available options provided and will show a button to control the tiptap editor. The MenuBar uses the useCurrentEditor hook to access the Editor.

I have some mapping data (EditorOptions shown below) which maps to some of the button data and what to run in the tiptap editor and passes the editor which it is to be run against, it looks something like this with a lot more options

Only issue is, that for the extensions, I get this type error and cannot figure out how to get the type for the Editor which has the information about the available extensions

---

My question's are:

• How can I get the Editor type with understanding of the Extensions it has?
• Is it actually possible?
• Has anyone else done anything along these lines before?
• Should I do it this way?

[ashmoreinc]

Some extra context: Same issue for single commands