feat: toolbar plugin toolbarClassName prop (#604)

mdx-editor · Oct 7, 2024 · dc2bfb3 · dc2bfb3
1 parent d837a1d
commit dc2bfb3
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 5 deletions.
diff --git a/docs/customizing-toolbar.md b/docs/customizing-toolbar.md
@@ -20,6 +20,7 @@ function App() {
       markdown="Hello world"
       plugins={[
         toolbarPlugin({
+          toolbarClassName: 'my-classname',
           toolbarContents: () => (
             <>
               {' '}

diff --git a/src/plugins/toolbar/index.tsx b/src/plugins/toolbar/index.tsx
@@ -9,6 +9,7 @@ import { Root } from './primitives/toolbar'
  * @group Toolbar
  */
 export const toolbarContents$ = Cell<() => React.ReactNode>(() => null)
+export const toolbarClassName$ = Cell<string>('')
 
 const DEFAULT_TOOLBAR_CONTENTS = () => {
   return 'This is an empty toolbar. Pass `{toolbarContents: () => { return <>toolbar components</> }}` to the toolbarPlugin to customize it.'
@@ -18,17 +19,23 @@ const DEFAULT_TOOLBAR_CONTENTS = () => {
  * A plugin that adds a toolbar to the editor.
  * @group Toolbar
  */
-export const toolbarPlugin = realmPlugin<{ toolbarContents: () => React.ReactNode }>({
+export const toolbarPlugin = realmPlugin<{ toolbarContents: () => React.ReactNode; toolbarClassName?: string }>({
   init(realm, params) {
     realm.pubIn({
       [toolbarContents$]: params?.toolbarContents ?? DEFAULT_TOOLBAR_CONTENTS,
+      [toolbarClassName$]: params?.toolbarClassName ?? '',
       [addTopAreaChild$]: () => {
-        const [toolbarContents, readOnly] = useCellValues(toolbarContents$, readOnly$)
-        return <Root readOnly={readOnly}>{toolbarContents()}</Root>
+        const [toolbarContents, readOnly, toolbarClassName] = useCellValues(toolbarContents$, readOnly$, toolbarClassName$)
+        return (
+          <Root className={toolbarClassName} readOnly={readOnly}>
+            {toolbarContents()}
+          </Root>
+        )
       }
     })
   },
   update(realm, params) {
     realm.pub(toolbarContents$, params?.toolbarContents ?? DEFAULT_TOOLBAR_CONTENTS)
+    realm.pub(toolbarClassName$, params?.toolbarClassName ?? '')
   }
 })
diff --git a/src/plugins/toolbar/primitives/toolbar.tsx b/src/plugins/toolbar/primitives/toolbar.tsx
@@ -40,10 +40,10 @@ function addTooltipToChildren<C extends React.ComponentType<{ children: React.Re
 /**
  * @internal
  */
-export const Root: React.FC<{ readOnly: boolean; children: React.ReactNode }> = ({ readOnly, children }) => {
+export const Root: React.FC<{ readOnly: boolean; children: React.ReactNode; className?: string }> = ({ readOnly, children, className }) => {
   return (
     <RadixToolbar.Root
-      className={classNames('mdxeditor-toolbar', styles.toolbarRoot, { [styles.readOnlyToolbarRoot]: readOnly })}
+      className={classNames('mdxeditor-toolbar', styles.toolbarRoot, { [styles.readOnlyToolbarRoot]: readOnly }, className)}
       {...(readOnly ? { tabIndex: -1 } : {})}
     >
       {children}