add block specific classnames in atomic blocks for styling

brijeshb42 · Sep 28, 2016 · 0a7ff30 · 0a7ff30
1 parent c0cbab8
commit 0a7ff30
Show file tree

Hide file tree

Showing 5 changed files with 13 additions and 6 deletions.
diff --git a/.gitignore b/.gitignore
@@ -60,3 +60,4 @@ node_modules
 dist/
 hash.json
 lib/
+wiki/
diff --git a/docs/index.html b/docs/index.html
@@ -47,6 +47,10 @@
         max-width: 50px;
     }
 
+    .md-block-atomic-wrapper.md-block-atomic-wrapper-separator {
+        border-color: transparent;
+    }
+
     .github-fork-ribbon:before {
         background-color: #090;
     }
@@ -300,12 +304,12 @@
   if (blockProps.components[type]) {
     const AtComponent = blockProps.components[type];
     return (
-      <div className="md-block-atomic-wrapper">
+      <div className={`md-block-atomic-wrapper md-block-atomic-wrapper-${type}`}>
         <AtComponent data={data} />
       </div>
     );
   }
-  return <p>Atomic block of type <b>{type}</b> is not supported.</p>;
+  return <p>Block of type <b>{type}</b> is not supported.</p>;
 };
 
 

diff --git a/index.html b/index.html
@@ -39,6 +39,9 @@
         min-height: 3px;
         max-width: 50px;
     }
+    .md-block-atomic-wrapper.md-block-atomic-wrapper-separator {
+        border-color: transparent;
+    }
     </style>
 </head>
 <body>

diff --git a/src/editor.js b/src/editor.js
@@ -349,7 +349,7 @@ class MediumDraftEditor extends React.Component {
             placeholder={this.props.placeholder}
             spellCheck={editorEnabled && this.props.spellCheck}
           />
-          {showAddButton ? (
+          {(showAddButton && this.props.sideButtons.length > 0) ? (
             <AddButton
               editorState={editorState}
               getEditorState={this.getEditorState}

diff --git a/src/example.js b/src/example.js
@@ -242,19 +242,18 @@ const AtomicSeparatorComponent = (props) => (
 
 const AtomicBlock = (props) => {
   const { blockProps, block } = props;
-  console.log(props);
   const entity = Entity.get(block.getEntityAt(0));
   const data = entity.getData();
   const type = entity.getType();
   if (blockProps.components[type]) {
     const AtComponent = blockProps.components[type];
     return (
-      <div className="md-block-atomic-wrapper">
+      <div className={`md-block-atomic-wrapper md-block-atomic-wrapper-${type}`}>
         <AtComponent data={data} />
       </div>
     );
   }
-  return <p>Atomic block of type <b>{type}</b> is not supported.</p>;
+  return <p>Block of type <b>{type}</b> is not supported.</p>;
 };
-Original file line number
+Diff line change
@@ Expand Up / @@ -60,3 +60,4 @@ node_modules @@
     dist/
     hash.json
     lib/
+    wiki/