Made widgets readOnly-compatible

src/editor/Editor.jsx

@@ -82,6 +82,8 @@ const Editor = props => {
     }
   };  
 
+  console.log(props);
+
   return (
     <div ref={element} className="r6o-editor">
       <div className="arrow" />
@@ -89,6 +91,7 @@ const Editor = props => {
         {React.Children.map(props.children, child =>
           React.cloneElement(child, { 
             annotation : currentAnnotation,
+            readOnly : props.readOnly,
             onAppendBody : onAppendBody,
             onUpdateBody : onUpdateBody,
             onRemoveBody : onRemoveBody,

src/editor/widgets/tag/TagWidget.jsx

@@ -38,23 +38,27 @@ const TagWidget = props => {
           <li key={tag.value} onClick={toggle(tag.value)}>
             <span className="label">{tag.value}</span>
 
-            <CSSTransition in={showDelete === tag.value} timeout={200} classNames="delete">
+            {!props.readOnly &&
-              <span className="delete-wrapper" onClick={onDelete(tag)}>
+              <CSSTransition in={showDelete === tag.value} timeout={200} classNames="delete">
-                <span className="delete">
+                <span className="delete-wrapper" onClick={onDelete(tag)}>
-                  <CloseIcon width={12} />
+                  <span className="delete">
+                    <CloseIcon width={12} />
+                  </span>
                 </span>
-              </span>
+              </CSSTransition>
-            </CSSTransition>
+            }
           </li>
         )}
       </ul>
 
-      <input 
+      { !props.readOnly &&
-        type="text" 
+        <input 
-        value={newTag} 
+          type="text" 
-        onChange={evt => setNewTag(evt.target.value)} 
+          value={newTag} 
-        onKeyDown={onKeyDown}
+          onChange={evt => setNewTag(evt.target.value)} 
-        placeholder="Add tag..." />
+          onKeyDown={onKeyDown}
+          placeholder="Add tag..." />
+      }
     </div>
   )
 

themes/default/editor/widgets/_textentry.scss

@@ -1,5 +1,4 @@
 .r6o-editable-text {
-  padding:8px 10px;
   max-height:120px;
   overflow:auto;
   outline:none;

themes/default/editor/widgets/comment/_comment.scss

@@ -3,6 +3,7 @@
   min-height:3em;
   background-color:#fff;
   position:relative;
+  padding:8px 10px;
 
   .arrow-down {
     position:absolute;