Configurable editor widgets

src/editor/Editor.jsx

@@ -70,17 +70,15 @@ const Editor = props => {
     <div ref={element} className="r6o-editor">
       <div className="arrow" />
       <div className="inner">
-        <CommentWidget 
-          annotation={currentAnnotation}
-          onAppendBody={onAppendBody}
-          onUpdateBody={onUpdateBody}
-          onRemoveBody={onRemoveBody}
-          onSaveAndClose={onOk} />
-
-        <TagWidget 
-          annotation={currentAnnotation} 
-          onAppendBody={onAppendBody}
-          onRemoveBody={onRemoveBody} />
+        {React.Children.map(props.children, child =>
+          React.cloneElement(child, { 
+            annotation : currentAnnotation,
+            onAppendBody : onAppendBody,
+            onUpdateBody : onUpdateBody,
+            onRemoveBody : onRemoveBody,
+            onSaveAndClose : onOk              
+          }))
+        }
         
         { props.readOnly ? (
           <div className="footer">

src/editor/widgets/tag/TagWidget.jsx

@@ -20,12 +20,12 @@ const TagWidget = props => {
 
   const onDelete = tag => evt => { 
     evt.stopPropagation();
-    props.onRemoveTag(tag);
+    props.onRemoveBody(tag);
   }
 
   const onKeyDown = evt => {
     if (evt.which === 13) { // Enter
-      props.onAddTag({ type: 'TextualBody', purpose: 'tagging', value: newTag.trim() });
+      props.onAppendBody({ type: 'TextualBody', purpose: 'tagging', value: newTag.trim() });
       setNewTag(''); // Clear the input
     }
   }