diff --git a/package-lock.json b/package-lock.json index c1c862a..25c8d12 100644 --- a/package-lock.json +++ b/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": { diff --git a/src/editor/widgets/index.js b/src/editor/widgets/index.js index d053a97..fc94680 100644 --- a/src/editor/widgets/index.js +++ b/src/editor/widgets/index.js @@ -5,8 +5,8 @@ import WrappedWidget from './WrappedWidget'; /** Standard widgets included by default **/ const BUILTIN_WIDGETS = { - COMMENT: , - TAG: + COMMENT: CommentWidget, + TAG: TagWidget }; /** Defaults to use if there's no overrides from the host app **/ @@ -14,14 +14,39 @@ export const DEFAULT_WIDGETS = [ , ] +/** + * 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]; - } else if (typeof arg === 'function' || arg instanceof Function) { - return - } else if (React.isValidElement(arg)) { - return arg; + + const instantiate = (widget, config) => { + if (typeof widget === 'string' || widget instanceof String) { + return React.createElement(BUILTIN_WIDGETS[widget], config); + } else if (typeof widget === 'function' || widget instanceof Function) { + return + } 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); } } \ No newline at end of file diff --git a/src/editor/widgets/tag/TagWidget.jsx b/src/editor/widgets/tag/TagWidget.jsx index e2240d0..90571d9 100644 --- a/src/editor/widgets/tag/TagWidget.jsx +++ b/src/editor/widgets/tag/TagWidget.jsx @@ -58,7 +58,7 @@ const TagWidget = props => { + vocabulary={props.vocabulary || []} /> } )