# Widgets and a custom paramHandler **URL:** \ **Category:** Uncategorized\ **Created:** [January 8, 2016, 11:02pm UTC](https://discuss.prosemirror.net/t/widgets-and-a-custom-paramhandler/122 "2016-01-08T23:02:17Z")\ **Posts on this page:** 13\ **Page:** 1
**Author:** ![peteb](https://discuss.prosemirror.net/user_avatar/discuss.prosemirror.net/peteb/32/155_2.png) [@peteb](https://discuss.prosemirror.net/u/peteb)\ **Post date:** [January 8, 2016, 11:02pm UTC](https://discuss.prosemirror.net/t/widgets-and-a-custom-paramhandler/122/1 "2016-01-08T23:02:17Z")
My experiments with building widgets and a customParamHandler are shown [here](https://pboysen.github.io/) including a link to source. MultipleChoice, Scale and CheckList are definitely a work in progress but form the basis for a Test or Survey schema. Lots of possibilities for ProseMirror. ---
**Author:** ![marijn](https://discuss.prosemirror.net/user_avatar/discuss.prosemirror.net/marijn/32/15_2.png) [@marijn](https://discuss.prosemirror.net/u/marijn)\ **Post date:** [January 11, 2016, 9:05am UTC](https://discuss.prosemirror.net/t/widgets-and-a-custom-paramhandler/122/2 "2016-01-11T09:05:59Z")
Nice! The ‘insert’ dropdown works well for such a set of nodes. I should probably make it easier to use that, or even make it the default. Any painful API limitations you ran into? ---
**Author:** ![johanneswilm](https://discuss.prosemirror.net/user_avatar/discuss.prosemirror.net/johanneswilm/32/19_2.png) [@johanneswilm](https://discuss.prosemirror.net/u/johanneswilm)\ **Post date:** [January 11, 2016, 11:18am UTC](https://discuss.prosemirror.net/t/widgets-and-a-custom-paramhandler/122/3 "2016-01-11T11:18:08Z")
Nice job! It also demonstrates some general issues with block level widgets: One cannot move beyond them using the arrow keys. If one inserts a widget as the very first item, it’s not possible to move above it to insert text there. Not sure, but these could be contentEditable issues. ---
**Author:** ![marijn](https://discuss.prosemirror.net/user_avatar/discuss.prosemirror.net/marijn/32/15_2.png) [@marijn](https://discuss.prosemirror.net/u/marijn)\ **Post date:** [January 11, 2016, 11:34am UTC](https://discuss.prosemirror.net/t/widgets-and-a-custom-paramhandler/122/4 "2016-01-11T11:34:28Z")
Not sure why this doesn’t work in that demo, but if you try it with horizontal rules in my demos (insert them with ctrl-shift-minus), those problems are not present (moving into them selects them, after which you can continue beyond them, and if you select one at the top of the page and press enter, you get a paragraph above it). ---
**Author:** ![peteb](https://discuss.prosemirror.net/user_avatar/discuss.prosemirror.net/peteb/32/155_2.png) [@peteb](https://discuss.prosemirror.net/u/peteb)\ **Post date:** [January 11, 2016, 3:54pm UTC](https://discuss.prosemirror.net/t/widgets-and-a-custom-paramhandler/122/5 "2016-01-11T15:54:38Z")
There are some enhancements to the paramHandler you might want to make. How would you like me to communicate them (here, patch requests)? I waited because you were thinking of redesigning param handling. I don’t think you need to because the changes I used allow you to: - expand the types of input (url, data, regexp text etc.) - validate - provide modal behavior - enable file upload Your current design also doesn’t allow for both params and a customHandler but that is easily fixed. I really like keeping the params structure but using another paramHandler. All the changes are [here](https://github.com/pboysen/prosemirror-widgets/blob/master/src/utils/params.js) ---
**Author:** ![peteb](https://discuss.prosemirror.net/user_avatar/discuss.prosemirror.net/peteb/32/155_2.png) [@peteb](https://discuss.prosemirror.net/u/peteb)\ **Post date:** [January 11, 2016, 4:05pm UTC](https://discuss.prosemirror.net/t/widgets-and-a-custom-paramhandler/122/6 "2016-01-11T16:05:17Z")
The real pain has been designing a MultipleChoice node. It should work just like a bullet list but have radiobutton decoration. (CheckList has a similar structure but with checkboxes). I am still working on that. It has been helpful in understanding the system. There are some additional features of ProseMirror that I have found: - Instructors can build accessible content without knowing accessibility - A survey document schema lets users build a survey without filling out forms - Discipline-specific schemas are easily built. For example, English instructors don’t need math tools but do need grammer tools. - [thinkspace.org](http://thinkspace.org) supports student teams. Collaborative editing of a team document would be awesome. ---
**Author:** ![johanneswilm](https://discuss.prosemirror.net/user_avatar/discuss.prosemirror.net/johanneswilm/32/19_2.png) [@johanneswilm](https://discuss.prosemirror.net/u/johanneswilm)\ **Post date:** [January 11, 2016, 5:44pm UTC](https://discuss.prosemirror.net/t/widgets-and-a-custom-paramhandler/122/7 "2016-01-11T17:44:28Z")
> [@marijn](#): > > Not sure why this doesn’t work in that demo, but if you try it with horizontal rules in my demos (insert them with ctrl-shift-minus), those problems are not present (moving into them selects them, after which you can continue beyond them, and if you select one at the top of the page and press enter, you get a paragraph above it). Thanks for pointing that out! I could get the selection working by adding ``` get contains() { return null } ``` to the block node. It seems that should also work on the block math node in this example. ---
**Author:** ![peteb](https://discuss.prosemirror.net/user_avatar/discuss.prosemirror.net/peteb/32/155_2.png) [@peteb](https://discuss.prosemirror.net/u/peteb)\ **Post date:** [January 11, 2016, 6:15pm UTC](https://discuss.prosemirror.net/t/widgets-and-a-custom-paramhandler/122/8 "2016-01-11T18:15:18Z")
That is good to know. NodeType contains null but Block contains “block”. What is the significance of block containing itself or just that it is not leaf node? ---
**Author:** ![johanneswilm](https://discuss.prosemirror.net/user_avatar/discuss.prosemirror.net/johanneswilm/32/19_2.png) [@johanneswilm](https://discuss.prosemirror.net/u/johanneswilm)\ **Post date:** [January 11, 2016, 6:19pm UTC](https://discuss.prosemirror.net/t/widgets-and-a-custom-paramhandler/122/9 "2016-01-11T18:19:14Z")
Sorry, I meant to the node type that extends the block node. So in this case: ``` class BlockMath extends Block { get attrs() { return { tex: new Attribute({default: ""}) } } get contains() { return null } } ``` ---
**Author:** ![marijn](https://discuss.prosemirror.net/user_avatar/discuss.prosemirror.net/marijn/32/15_2.png) [@marijn](https://discuss.prosemirror.net/u/marijn)\ **Post date:** [January 12, 2016, 1:09pm UTC](https://discuss.prosemirror.net/t/widgets-and-a-custom-paramhandler/122/10 "2016-01-12T13:09:29Z")
> [@peteb](#): > > What is the significance of block containing itself orjust that it is not leaf node? Yes, `contains = null` means that it’s a leaf node. If it returns `"block"` that says that the node can contain anything of type `"block"`, which is definitely not the case here. ---
**Author:** ![marijn](https://discuss.prosemirror.net/user_avatar/discuss.prosemirror.net/marijn/32/15_2.png) [@marijn](https://discuss.prosemirror.net/u/marijn)\ **Post date:** [January 12, 2016, 1:24pm UTC](https://discuss.prosemirror.net/t/widgets-and-a-custom-paramhandler/122/11 "2016-01-12T13:24:05Z")
> [@peteb](#): > > - expand the types of input (url, data, regexp text etc.) > - validate Could we fold those two together and just allow the passing in of a `validate` function? The reason I’m nervous about having a lot of types is that each param handler implementation will have to support them all, which will make it very painful to write new implementations. > [@peteb](#): > > - provide modal behavior I don’t want to do classical modal “you’re trapped in this dialog until we let you out” style, but it’s probably a good idea to autoclose the dialog when the user clicks outside of it. Does that sound reasonable to you? > [@peteb](#): > > - enable file upload Yes, those are definitely necessary. I’ll look into adding them. ---
**Author:** ![peteb](https://discuss.prosemirror.net/user_avatar/discuss.prosemirror.net/peteb/32/155_2.png) [@peteb](https://discuss.prosemirror.net/u/peteb)\ **Post date:** [January 12, 2016, 5:19pm UTC](https://discuss.prosemirror.net/t/widgets-and-a-custom-paramhandler/122/12 "2016-01-12T17:19:39Z")
I am fine with letting the paramHandler developer deal with those issues rather than baking it into PM. There are so many site-specific requirements that it is hard to make it flexible enough in PM. Even the file upload requires hooks to the bigger system. I ran into two issues in building the paramHandler. In command.exec: ``` exec(pm, params) { let run = this.spec.run if (!this.params.length) return run.call(this.self, pm) if (params) return run.call(this.self, pm, ...params) let handler = getParamHandler(pm) if (!handler) return false handler(pm, this, params => { if (params) run.call(this.self, pm, ...params) }) } ``` If I provides params in my command, I can’t use the params attribute and a paramHandler together. Secondly, menu.readParams is called from menu.renderIcon and circumvents my param UI. If you can deal with those issues it should work. ---
**Author:** ![marijn](https://discuss.prosemirror.net/user_avatar/discuss.prosemirror.net/marijn/32/15_2.png) [@marijn](https://discuss.prosemirror.net/u/marijn)\ **Post date:** [January 25, 2016, 1:43pm UTC](https://discuss.prosemirror.net/t/widgets-and-a-custom-paramhandler/122/13 "2016-01-25T13:43:56Z")
See my comments [here](https://github.com/ProseMirror/prosemirror/issues/146#issuecomment-174494319) – I agree the current situation isn’t really working, am interested in suggestions for alternatives.