# Widgets: iframe, inlineMath, blockMath
**URL:** https://discuss.prosemirror.net/t/widgets-iframe-inlinemath-blockmath/84
**Category:** Uncategorized
**Created:** [November 30, 2015, 5:33pm UTC](https://discuss.prosemirror.net/t/widgets-iframe-inlinemath-blockmath/84 "2015-11-30T17:33:55Z")
**Posts on this page:** 12
**Page:** 1
### Author:  [@peteb](https://discuss.prosemirror.net/u/peteb)
#### Post date: [November 30, 2015, 5:33pm UTC](https://discuss.prosemirror.net/t/widgets-iframe-inlinemath-blockmath/84/1 "2015-11-30T17:33:55Z")
I have been working on an Insert Menu that allows me to insert an iframe, and mathjax widgets for inlineMath and blockMath. I will be sharing these in a git repo once I resolve a problem with setting the attributes.
For iframe and inlineMath, I would like to be able to click on the widget and prompt for the attributes but am not sure how to invoke TooltipDisplay to edit the attributes. I use the code below but am open to other ways of doing this.
```
IFrame.prototype.serializeDOM = node => {
let dom = elt("iframe", {
"src": node.attrs.src,
"width": node.attrs.width,
"height": node.attrs.height,
"content": "text/html;charset=UTF-8",
"frameborder": "1",
"allowfullscreen": "1"
})
dom.addEventListener("mousedown", e => {
e.preventDefault(); e.stopPropagation()
// how do I prompt for attributes?
})
return dom
}
```
---
### Author:  [@johanneswilm](https://discuss.prosemirror.net/u/johanneswilm)
#### Post date: [November 30, 2015, 5:38pm UTC](https://discuss.prosemirror.net/t/widgets-iframe-inlinemath-blockmath/84/2 "2015-11-30T17:38:29Z")
Question: Why would you put these into an iframe? We have been putting them inside a simple noneditable span node and then rendered the contents inside of those whenever needed in the past. But I spoke to P. Krautzberger and he seemed to think it should be pretty simple to turn them into IMGs clientside, and those should be even easier to handle inside an editor.
---
### Author:  [@peteb](https://discuss.prosemirror.net/u/peteb)
#### Post date: [November 30, 2015, 5:47pm UTC](https://discuss.prosemirror.net/t/widgets-iframe-inlinemath-blockmath/84/3 "2015-11-30T17:47:34Z")
iframe is a separate widget from the math widgets. The math widgets can be rendered directly in the editor which is really cool. For the inlineMath widget, I cached the rendered widget because seriallizeDom is called repeatedly for elements in the text.
```
InlineMath.prototype.serializeDOM = node => {
let dom = elt("span", {class: "inlinemath"}, " \\("+node.attrs.tex+"\\) ")
if (node.rendered) {
node.rendered = node.rendered.cloneNode(true)
} else {
node.rendered = dom;
MathJax.Hub.Queue(["Typeset",MathJax.Hub,dom])
}
dom.addEventListener("mousedown", e => {
console.log(dom)
e.preventDefault(); e.stopPropagation()
})
return node.rendered;
}
```
---
### Author:  [@johanneswilm](https://discuss.prosemirror.net/u/johanneswilm)
#### Post date: [November 30, 2015, 7:36pm UTC](https://discuss.prosemirror.net/t/widgets-iframe-inlinemath-blockmath/84/4 "2015-11-30T19:36:21Z")
Ah I see. Yes, that makes sense.
---
### Author:  [@wes-r](https://discuss.prosemirror.net/u/wes-r)
#### Post date: [December 1, 2015, 12:25am UTC](https://discuss.prosemirror.net/t/widgets-iframe-inlinemath-blockmath/84/5 "2015-12-01T00:25:49Z")
Not sure about invoking the tooltip - I’d start by following how links or images work.
But you may find the “clicked” method on block nodes useful: [https://github.com/ProseMirror/prosemirror/blob/28ce1c4feb4ac011341393e3f7e4e23e64ea2324/src/serialize/dom.js#L149](https://github.com/ProseMirror/prosemirror/blob/28ce1c4feb4ac011341393e3f7e4e23e64ea2324/src/serialize/dom.js#L149)
You may also run into issues with iFrames stealing the clicks - [https://github.com/vincepare/iframeTracker-jquery](https://github.com/vincepare/iframeTracker-jquery) may be of use
---
### Author:  [@peteb](https://discuss.prosemirror.net/u/peteb)
#### Post date: [December 1, 2015, 4:31pm UTC](https://discuss.prosemirror.net/t/widgets-iframe-inlinemath-blockmath/84/6 "2015-12-01T16:31:27Z")
I was trying avoid the image behavior: Click to create image, select the image, click the image button again for modifying. However, other editors do that so I may revert back. I may have 10 or more widgets to add so I created a select menu to insert them rather than cluttering the menu with more icons. However this eliminates the image behavior above.
I am going to revert to the default way and see what it looks like.
I will certainly check out the clicked method. Thanks.
---
### Author:  [@wes-r](https://discuss.prosemirror.net/u/wes-r)
#### Post date: [December 3, 2015, 1:24am UTC](https://discuss.prosemirror.net/t/widgets-iframe-inlinemath-blockmath/84/7 "2015-12-03T01:24:16Z")
Possibly better solution for handling iframe click events is set `pointer-events: none;` on the iframe style.
[http://caniuse.com/#feat=pointer-events](http://caniuse.com/#feat=pointer-events)
> **[kmewhort/pointer\_events\_polyfill](https://github.com/kmewhort/pointer_events_polyfill)**
>
> Polyfill to provide support for "pointer-events: none". - kmewhort/pointer\_events\_polyfill
---
### Author:  [@peteb](https://discuss.prosemirror.net/u/peteb)
#### Post date: [December 5, 2015, 5:58pm UTC](https://discuss.prosemirror.net/t/widgets-iframe-inlinemath-blockmath/84/8 "2015-12-05T17:58:34Z")
wes-r, Thanks. That does work within the editor. When you want to use the generated HTML for use in a web page I wonder how you remove it?
---
### Author:  [@wes-r](https://discuss.prosemirror.net/u/wes-r)
#### Post date: [December 8, 2015, 10:54pm UTC](https://discuss.prosemirror.net/t/widgets-iframe-inlinemath-blockmath/84/9 "2015-12-08T22:54:24Z")
I have the `pointer-events: none` css within a `[contenteditable='true']` selector.
Something like: `.ProseMirror-content[contenteditable='true'] iframe { pointer-events: none; }`
That way it only impacts iframes within prosemirror while contenteditable = true.
---
### Author:  [@rgbkrk](https://discuss.prosemirror.net/u/rgbkrk)
#### Post date: [February 14, 2016, 11:52pm UTC](https://discuss.prosemirror.net/t/widgets-iframe-inlinemath-blockmath/84/10 "2016-02-14T23:52:54Z")
Has anyone made any prototypes that handle inline and block maths with ProseMirror?
---
### Author:  [@peteb](https://discuss.prosemirror.net/u/peteb)
#### Post date: [February 15, 2016, 4:38pm UTC](https://discuss.prosemirror.net/t/widgets-iframe-inlinemath-blockmath/84/11 "2016-02-15T16:38:43Z")
See [here](https://discuss.prosemirror.net/t/content-widgets-and-surveys/147?u=peteb)
---
### Author:  [@johanneswilm](https://discuss.prosemirror.net/u/johanneswilm)
#### Post date: [February 17, 2016, 4:46pm UTC](https://discuss.prosemirror.net/t/widgets-iframe-inlinemath-blockmath/84/12 "2016-02-17T16:46:49Z")
Fidus Writer [1] has support for that. It’s not exactly a prototype though, and it doesn’t (yet) follow the recommended prosemirror way of creating such nodes.
[1] [https://github.com/fiduswriter/fiduswriter](https://github.com/fiduswriter/fiduswriter)