How can I customize toolbar buttons?

[danishsjjd]

Hi,
I'm using the Next.js page router from your example. I'm trying to implement a custom toolbar, but I don't know where to update the state.

import type { CodeBlockEditorDescriptor } from "@mdxeditor/editor"
import "@mdxeditor/editor/style.css"

const {
  MDXEditor,
  codeBlockPlugin,
  headingsPlugin,
  listsPlugin,
  linkPlugin,
  quotePlugin,
  markdownShortcutPlugin,
  useCodeBlockEditorContext,
  SingleChoiceToggleGroup,
  toolbarPlugin,
} = await import("@mdxeditor/editor")

const PlainTextCodeEditorDescriptor: CodeBlockEditorDescriptor = {
  match: () => true,
  priority: 0,
  Editor: (props) => {
    const cb = useCodeBlockEditorContext()
    return (
      <div onKeyDown={(e) => e.nativeEvent.stopImmediatePropagation()}>
        <textarea rows={3} cols={20} defaultValue={props.code} onChange={(e) => cb.setCode(e.target.value)} />
      </div>
    )
  },
}

const Editor = () => {
  return (
    <MDXEditor
      onChange={console.log}
      markdown={"Hello world!"}
      plugins={[
        codeBlockPlugin({ codeBlockEditorDescriptors: [PlainTextCodeEditorDescriptor] }),
        headingsPlugin(),
        listsPlugin(),
        linkPlugin(),
        quotePlugin(),
        markdownShortcutPlugin(),
        toolbarPlugin({
          toolbarContents: () => {
            return (
              <div>
                <SingleChoiceToggleGroup
                  value="bullet"
                  items={[{ title: "Bullet List", contents: <span>Bullet list</span>, value: "bullet" }]}
                  onChange={(e) => {
                    // ???
                  }}
                />
              </div>
            )
          },
        }),
      ]}
    />
  )
}

export default Editor

it would be awesome if you can tell me how I can create single button as well in the toolbar?

thanks,

[petyosi]

The best way to figure this out is to browse the source code of the built-in tools. You will need to move this into a separate component, so that you can access the hooks.