Widgets: iframe, inlineMath, blockMath

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

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.

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;
    dom.addEventListener("mousedown", e => {
        e.preventDefault(); e.stopPropagation()
    return node.rendered;

Ah I see. Yes, that makes sense.

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

You may also run into issues with iFrames stealing the clicks - https://github.com/vincepare/iframeTracker-jquery may be of use

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.

Possibly better solution for handling iframe click events is set pointer-events: none; on the iframe style.


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?

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.

Has anyone made any prototypes that handle inline and block maths with ProseMirror?

See here

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