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;
MathJax.Hub.Queue(["Typeset",MathJax.Hub,dom])
}
dom.addEventListener("mousedown", e => {
console.log(dom)
e.preventDefault(); e.stopPropagation()
})
return node.rendered;
}
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.
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.