fix: toolbar re-renders with state changes

Fixes #248
mdx-editor · Jan 13, 2024 · 73a87f3 · 73a87f3
1 parent 148ac50
commit 73a87f3
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 36 deletions.
diff --git a/src/examples/toolbar.tsx b/src/examples/toolbar.tsx
@@ -79,43 +79,49 @@ export const CustomTheming = () => {
 }
 
 export const ConditionalToolbar = () => {
+  const [outsideState, setOutsideState] = React.useState('foo')
   return (
-    <MDXEditor
-      markdown={'hello world'}
-      plugins={[
-        toolbarPlugin({
-          toolbarContents: () => (
-            <>
-              <DiffSourceToggleWrapper>
-                <UndoRedo />
-                <BoldItalicUnderlineToggles />
-                <ListsToggle />
-                <Separator />
-                <BlockTypeSelect />
-                <CreateLink />
-                <InsertImage />
-                <Separator />
-              </DiffSourceToggleWrapper>
-            </>
-          )
-        }),
-        listsPlugin(),
-        quotePlugin(),
-        headingsPlugin(),
-        linkPlugin(),
-        linkDialogPlugin(),
-        imagePlugin(),
-        tablePlugin(),
-        thematicBreakPlugin(),
-        frontmatterPlugin(),
-        // codeBlockPlugin({ defaultCodeBlockLanguage: 'txt' }),
-        // sandpackPlugin({ sandpackConfig: virtuosoSampleSandpackConfig }),
-        // codeMirrorPlugin({ codeBlockLanguages: { js: 'JavaScript', css: 'CSS', txt: 'text' } }),
-        directivesPlugin({ directiveDescriptors: [YoutubeDirectiveDescriptor, AdmonitionDirectiveDescriptor] }),
-        diffSourcePlugin({ viewMode: 'rich-text', diffMarkdown: 'boo' }),
-        markdownShortcutPlugin()
-      ]}
-    />
+    <>
+      <button onClick={() => setOutsideState('bar')}>Toggle outside state</button>
+      {outsideState}
+      <MDXEditor
+        markdown={'hello world'}
+        plugins={[
+          toolbarPlugin({
+            toolbarContents: () => (
+              <>
+                <DiffSourceToggleWrapper>
+                  {outsideState}
+                  <UndoRedo />
+                  <BoldItalicUnderlineToggles />
+                  <ListsToggle />
+                  <Separator />
+                  <BlockTypeSelect />
+                  <CreateLink />
+                  <InsertImage />
+                  <Separator />
+                </DiffSourceToggleWrapper>
+              </>
+            )
+          }),
+          listsPlugin(),
+          quotePlugin(),
+          headingsPlugin(),
+          linkPlugin(),
+          linkDialogPlugin(),
+          imagePlugin(),
+          tablePlugin(),
+          thematicBreakPlugin(),
+          frontmatterPlugin(),
+          // codeBlockPlugin({ defaultCodeBlockLanguage: 'txt' }),
+          // sandpackPlugin({ sandpackConfig: virtuosoSampleSandpackConfig }),
+          // codeMirrorPlugin({ codeBlockLanguages: { js: 'JavaScript', css: 'CSS', txt: 'text' } }),
+          directivesPlugin({ directiveDescriptors: [YoutubeDirectiveDescriptor, AdmonitionDirectiveDescriptor] }),
+          diffSourcePlugin({ viewMode: 'rich-text', diffMarkdown: 'boo' }),
+          markdownShortcutPlugin()
+        ]}
+      />
+    </>
   )
 }
 

diff --git a/src/plugins/toolbar/index.tsx b/src/plugins/toolbar/index.tsx
@@ -27,5 +27,8 @@ export const toolbarPlugin = realmPlugin<{ toolbarContents: () => React.ReactNod
         return <Root readOnly={readOnly}>{toolbarContents()}</Root>
       }
     })
+  },
+  update(realm, params) {
+    realm.pub(toolbarContents$, params?.toolbarContents ?? DEFAULT_TOOLBAR_CONTENTS)
   }
 })