How to separate the menubar from the editor?

The question.
I am trying to create a Menubar as shown in picture but I am not able to figure out how to separate the menubar from the editor.

Why and how the question has come up.
The menu bar in editor.js was not matching with my application UI. Therefore I decided to change the menubar.

[ryandunnewold]

What I've done is build a toolbar UI separately and manage the actions through the API and then hiding the toolbar Editor JS provides. It's working well, but not ideal.

[cultulhul]

@ryandunnewold do you mind sharing you code or some pointers on where to start

[ryandunnewold]

@cultulhul here is an example of what I'm doing (using React):

import React from 'react'
import styled from 'styled-components/macro'

import ToolbarIcon from './ToolbarIcon'

const Wrapper = styled.div`
  display: flex;
  margin-left: 15px;
`

function Toolbar({ addBlock, editor, ...rest }) {
  return (
    <Wrapper {...rest}>
      <ToolbarIcon
        icon="EditorHeader"
        onClick={() => addBlock('header')}
        tooltip="Header"
      />
      <ToolbarIcon
        icon="EditorToDo"
        onClick={() => addBlock('checklist')}
        tooltip="To-do"
      />
      <ToolbarIcon
        icon="EditorList"
        onClick={() => addBlock('list')}
        tooltip="List"
      />
      <ToolbarIcon
        icon="EditorImage"
        onClick={() => addBlock('image')}
        tooltip="Image"
      />
    </Wrapper>
  )
}

export default Toolbar

  const addBlock = type => {
    if (editor.current) {
      const index = editor.current.blocks.getBlocksCount() + 1
      editor.current.blocks.insert(type, undefined, undefined, index)
      editor.current.caret.setToLastBlock('start', 0)
    }
  }

And editor is a ref using useRef on the actual editor instance - new EditorJS({...})

Also hiding toolbar like this:

  .ce-toolbox,
  .ce-toolbar__plus {
    display: none;
  }