Plugin API: changed the way plugin config works

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@recogito/recogito-client-core",
-  "version": "0.1.10",
+  "version": "0.2.0",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {

src/editor/widgets/index.js

@@ -5,8 +5,8 @@ import WrappedWidget from './WrappedWidget';
 
 /** Standard widgets included by default **/
 const BUILTIN_WIDGETS = {
-  COMMENT: <CommentWidget />,
+  COMMENT: CommentWidget,
-  TAG: <TagWidget />
+  TAG: TagWidget
 };
 
 /** Defaults to use if there's no overrides from the host app **/
@@ -14,14 +14,39 @@ export const DEFAULT_WIDGETS = [
   <CommentWidget />, <TagWidget />
 ]
 
+/**
+ * There are multiple ways in which users can specify widgets:
+ * 
+ * 1. string -> name of a built-in widget
+ * 2. function -> custom JS plugin
+ * 3. React component custom JSX plugin
+ * 4. an object in the following form: { widget: (...), args }
+ * 
+ * In case of 4, the 'widget' property may have the same allowed 
+ * values (string, function, React component). The remaining parameters
+ * are treated as widget configuration, and are passed along to the
+ * widget.
+ */
 export const getWidget = arg => {
-  if (typeof arg === 'string' || arg instanceof String) {
+
-    return BUILTIN_WIDGETS[arg];
+  const instantiate = (widget, config) => {
-  } else if (typeof arg === 'function' || arg instanceof Function) {
+    if (typeof widget === 'string' || widget instanceof String) {
-    return <WrappedWidget widget={arg} />
+      return React.createElement(BUILTIN_WIDGETS[widget], config);
-  } else if (React.isValidElement(arg)) {
+    } else if (typeof widget === 'function' || widget instanceof Function) {
-    return arg;
+      return <WrappedWidget widget={widget} config={config} />
+    } else if (React.isValidElement(widget)) {
+      return React.createElement(widget, config);
+    } else {
+      throw `${widget} is not a valid plugin`
+    } 
+  }
+
+  // First, check 'top-level' vs. 'nested object' case
+  if (arg.widget) {
+    const { widget, ...config } = arg;
+    return instantiate(widget, config);
   } else {
-    throw `${arg} is not a valid plugin`
+    // No object with args -> instantiate arg directly
+    return instantiate(arg);
   }
 }

src/editor/widgets/tag/TagWidget.jsx

@@ -58,7 +58,7 @@ const TagWidget = props => {
         <Autocomplete
           placeholder={i18n.t('Add tag...')}
           onSubmit={onSubmit}
-          vocabulary={props.config.tagVocabulary || []} />
+          vocabulary={props.vocabulary || []} />
       }
     </div>
   )