Modal dialog issue with {{||$:/core/ui/EditTemplate/body}}

#1

Hello all,

Typically I can make a template containing {{||$:/core/ui/EditTemplate/body}} that will transclude the built-in editing field with all the markup buttons.

However, when I called that template with:

<$action-sendmessage $message="tm-modal" $param="edit_template_name" currentTiddler={{!!title}} />

there was an internal error if that edit_template_name tiddler had {{||$:/core/ui/EditTemplate/body}} in it.

Does anyone know why this pops up an error? Is there another simple way to add the markup buttons to an editing field that might work in this case?

Thanks,
/Mike

#2

I guess the internal error you got was TypeError: this.iframeNode.contentWindow is null.

There seem to be two things interacting in a bad way here.

The first thing is that modals are implemented at a lower level in TiddlyWiki’s core, and the header, footer, and body of the modal dialogue are created in an entirely different code path.

The second thing is that the <$edit> meta widget can opt to use a framed editor that appears in an iframe. This happens when the editor is accompanied by a toolbar (as a way to prevent losing the selection when one of the toolbar buttons is clicked).

Somehow the generated iframe of the editor ends up having no contentWindow when the editor is transcluded by a modal dialogue. I suspect this is because the body of the modal dialogue is rendered before it is added to the DOM.

I don’t think there’s a simple way that you can remedy this on your end. This looks like a potential bug or a fundamental limitation.

1 Like
#3

Just noticed that the error does not occur when CodeMirror is installed (CodeMirror doesn’t seem to use iframes).

#4

That sounds like the error that I was getting. Thank you for the explanation, @RolandH . I’ll just use the plain edit-text widget and make a markup cheat sheet available : ]

Thanks again,
/Mike

#5

Digging into this a bit more to try to make to work by recreating the relevent contents of $:/core/ui/EditTemplate/body/editor into my modal template it comes down to one thing. The documentation for the EditWidget (https://tiddlywiki.com/#EditWidget) states:

The content of the <$edit> widget is ignored.

But clearly in the $:/core/ui/EditTemplate/body/editor there is content to that widget that is making the buttons visible and work in some fashion and also crash the modal popup.

Does anyone have any ideas on how to get editor buttons to work in a modal popup such that they can affect the text markup?

Thanks,
\Mike

#6

I was trying manually to create the buttons like:

<$set

  name="targetTiddler"
  value=<<currentTiddler>>
>
{{$:/core/ui/EditorToolbar/bold||$:/core/ui/EditTemplate/body/toolbar/button}}
<$edit field="text" class="customWideTable"/>
</$set>

but that didn’t affect the text selected in the editor which is explained by the tm-edit-text-operation documentation that indicated that “A tm-edit-text-operation invokes one of the available operations on a surrounding text editor.”

However, just including a structure like this:

<$edit field="text">
</$edit>

with nothing in it causes the modal to crash. So there is something going on in the undocumented EditWidget contents that is beyond my skill-set to figure out.

But I guess all that is what @RolandH is pointing out above.

#7

The unieditor does no use an iframe and will work in a popup - it has the standard editors buttons

#8

Thanks, @buggyj . I’ll check it out. My preference is to use vanilla TW as much as possible but your editor substitute looks nice. Is there a simple way of using it as a template as needed without replacing all edit boxes globally?

#9

unieditor is a widget and can be used on its own, but without buttons. The buttons are added in by the edit template.

#10

Ouch, the docs are very out of date; the editor toolbars were introduced in 2016 with v5.1.12. An update would be welcome.