Pasting image in long tiddler causes import dialog to appear outside viewport; can lead to corrupted tiddler

#1

Hi everyone, I’m new to TiddlyWiki. I’ve been working my way through Soren Bjornstad’s excellent Grok TiddlyWiki tutorial, and I’m quite excited by the potential of TiddlyWiki. Definitely not for the faint of heart, though! :sweat_smile:

I ran into a rather serious problem:

I was editing near the top of a long tiddler and pressed Ctrl+V to paste an image, but the “Import images” dialog didn’t appear. I’m not sure exactly how things went at that point, but I believe I pressed Ctrl+V again, and the import dialog still didn’t appear. At some point I saved and closed the tiddler. From that point on, I could no longer edit it. Eventually I realized that the import dialog had been appearing all along, but I hadn’t realized it because it was appearing below the viewport.

Ever since the tiddler became corrupted, an empty frame appears in the text field, as can be seen in the following screenshot, and the text field can not be edited:

'Indicator Lights' tiddler - Empty frame in the text field
'Indicator Lights' tiddler - Empty frame in the text field789×548 13.9 KB

When I inspect the empty frame in Chrome DevTools, this is what appears:

'Indicator Lights' tiddler - Inspecting the empty frame in the text field
'Indicator Lights' tiddler - Inspecting the empty frame in the text field917×269 12.1 KB

If I delete the html outlined in red, the empty frame disappears and the text field becomes editable again (but only temporarily).

If I change the title of the corrupted tiddler, the problem goes away and I can edit the tiddler again. But if I change its title back to the original title, or if I create a new tiddler with the same original title, the problem returns.

Fortunately, I was able to recover my wiki by exporting all the tiddlers to JSON, then importing them back into a new empty wiki. Of course, that meant I had to set up all my plugins and settings again from scratch.

Here is a stripped-down version of my wiki. The corrupted tiddler is titled “Indicator Lights”.

I also added a tiddler called “Long Tiddler” to the sample wiki. Here’s how to replicate the image pasting issue:

  1. Copy an image to your clipboard.
  2. Edit “Long Tiddler”.
  3. Place your cursor at the top of the “Long Tiddler” text field, and paste the image using Ctrl+V.
  4. You will have to scroll down quite far before the “Import images” dialog becomes visible.

Similarly, if you place your cursor at the bottom of the text field and paste an image, you will have to scroll a long way up to see the import dialog.

Hopefully it’s fairly easy to fix this bug to ensure that the import dialog always appears within the viewport.

Also, I think it is important to ensure that if the tiddler is saved while the import dialog is still open, it will first cancel the import to prevent the tiddler from becoming corrupted.

OS: Windows 11
Browser: Google Chrome
TiddlyWiki version: 5.3.6

#2

I was able to replicate the problem and worked out how to fix it.

to fix it, open Indicator Lights and paste an image. the blank box will be replaced with a new import image box and then click cancel or click import and the box should go away.

The way I replicated the problem was paste an image into a tidder in edit mode. while the import image box was showing, I saved the tiddler.
I then deleted the tiddler matching filter: [prefix[$:/ImportImage--]] and then open the tiddler which had the pending image import and now it is a blank box.

#3

Woohoo, thank you @VikingMage, that worked! :smiling_face_with_three_hearts:

Just to add a clarification to your instructions, after you open the corrupted tiddler for editing, click on the text box (which removes the focus from the title box) before pasting an image.

It’s great to know that this will fix the problem until an update has been issued to prevent it. :+1:

Yes, that worked for me too. Thanks very much for your help in figuring this out and providing a fix! :star_struck: