docs(inline-toolbar): update stories

Author: freedomlang

draft-js-inline-toolbar-plugin/src/components/Toolbar/index.js

@@ -134,7 +134,7 @@ export default class Toolbar extends React.Component {
       >
         {OverrideContent
           ? <OverrideContent {...childrenProps} />
-          : this.props.children({...childrenProps})}
+          : this.props.children(childrenProps)}
       </div>
     );
   }

stories/inline-toolbar-custom-buttons/src/App.js

@@ -76,22 +76,7 @@ class HeadlinesButton extends Component {
   }
 }
 
-const inlineToolbarPlugin = createInlineToolbarPlugin({
-  structure: [
-    BoldButton,
-    ItalicButton,
-    UnderlineButton,
-    SubButton,
-    SupButton,
-    CodeButton,
-    Separator,
-    HeadlinesButton,
-    UnorderedListButton,
-    OrderedListButton,
-    BlockquoteButton,
-    CodeBlockButton,
-  ],
-});
+const inlineToolbarPlugin = createInlineToolbarPlugin();
 const { InlineToolbar } = inlineToolbarPlugin;
 const plugins = [inlineToolbarPlugin];
 const text =
@@ -123,7 +108,25 @@ export default class CustomInlineToolbarEditor extends Component {
             this.editor = element;
           }}
         />
-        <InlineToolbar />
+        <InlineToolbar>{
+          // may be use React.Fragment instead of div to improve perfomance after React 16
+          (externalProps) => (
+            <div>
+              <BoldButton {...externalProps} />
+              <ItalicButton {...externalProps} />
+              <UnderlineButton {...externalProps} />
+              <SubButton {...externalProps} />
+              <SupButton {...externalProps} />
+              <CodeButton {...externalProps} />
+              <Separator {...externalProps} />
+              <HeadlinesButton {...externalProps} />
+              <UnorderedListButton {...externalProps} />
+              <OrderedListButton {...externalProps} />
+              <BlockquoteButton {...externalProps} />
+              <CodeBlockButton {...externalProps} />
+            </div>
+          )
+        }</InlineToolbar>
       </div>
     );
   }

stories/inline-toolbar-with-anchor-plugin/src/App.js

@@ -6,14 +6,7 @@ import { ItalicButton, BoldButton, UnderlineButton } from 'draft-js-buttons';
 import editorStyles from './editorStyles.css';
 
 const linkPlugin = createLinkPlugin();
-const inlineToolbarPlugin = createInlineToolbarPlugin({
-  structure: [
-    BoldButton,
-    ItalicButton,
-    UnderlineButton,
-    linkPlugin.LinkButton
-  ]
-});
+const inlineToolbarPlugin = createInlineToolbarPlugin();
 const { InlineToolbar } = inlineToolbarPlugin;
 const plugins = [inlineToolbarPlugin, linkPlugin];
 const text = 'Try selecting a part of this text and click on the link button in the toolbar that appears …';
@@ -38,7 +31,17 @@ export default class SimpleLinkPluginEditor extends Component {
           plugins={plugins}
           ref={(element) => { this.editor = element; }}
         />
-        <InlineToolbar />
+        <InlineToolbar>{
+          // may be use React.Fragment instead of div to improve perfomance after React 16
+          (externalProps) => (
+            <div>
+              <BoldButton {...externalProps} />
+              <ItalicButton {...externalProps} />
+              <UnderlineButton {...externalProps} />
+              <linkPlugin.LinkButton {...externalProps} />
+            </div>
+          )
+        }</InlineToolbar>
       </div>
     );
   }