AttachFilePlugin not Working

[sam paul]

Hello Tiddlywiki Classic users,

The AttachFilePlugin in  https://tiddlytools.com/Classic/#AttachFilePlugin doesn'twork properly. It uses netscape.security.privilegemanager function which has been removed in the current version of firefox. This is a really handy plugin. I would appreciate it if anyone fixes it.

Best

[Yakov]

Hello samp17906,

could you explain how you'd like to use the plugin? I think it can be repaired using ContinousSavingPlugin or Timimi, but it may require heavy refactoring since askForFilename and readFile are implemented and used separately while it may be necessary to deal with both operations in a common context. By the way, what saver do you use?

Best regards,

Yakov.

воскресенье, 6 октября 2024 г. в 19:32:44 UTC+3, samp...@gmail.com:

[sam paul]

Hello Yakov,

This plugin allows one to "Store or link binary files (such as jpg, gif, pdf or even mp3) within TiddlyWiki document and then use them as images or links from within tiddler content".

Best

[Yakov]

Yes, I've read the docs :) The question is, what files do you want to try it with: images/sound/video (and want to embed them somewhere)? pdf to show in an iframe? Keep in mind that storing big binaries inside TW is not exactly a good idea, since it will slow down loading the TW (like if you "attach" 50 MB of images inside TW, you will load 50 MB each time you open the TW, before opening any tiddler with those images, so storing them separately is usually a better option). So I'd like to understand what's your usage scenario, what are your expectations.

For instance, what I would like to do with images in TW is to support "press ctrl+v with image in clipboard and cursor in tiddler editor → the image is saved outside the TW and the link to it is inserted in the editor" (I have some ideas/drafts for that, but haven't implemented it since it requires several components, including the saver, so may be somewhat tricky to implement and put all the things together).

понедельник, 7 октября 2024 г. в 13:08:48 UTC+3, samp...@gmail.com:

[sam paul]

I will probably embed some low resolution images or one pdf. Embedding files would be faster to load and better for offline usage.

[Yakov]

Right, one more question: do you want to embed images from files, from clipboard, both, or it doesn't matter? I think I'd be interested to implement inserting from clipboard, as this can be later extended to a solution that stores outside TW, but it seems to be quite useful by itself, too.

понедельник, 7 октября 2024 г. в 14:57:22 UTC+3, samp...@gmail.com:

[sam paul]

I think embedding from files will be much more of a basic functionality and should be easier to implement. TW5 has included this in its core. (See https://groktiddlywiki.com/static/Images%2520and%2520Attachments.html)

[Yakov]

Hello Sam,

I'm not sure if attaching from files is easier to implement; anyway, today I've created a prototype plugin that implements inserting images from clipboard, and you can try an early version below. I think it's a good idea to add this functionality to the core, but it requires some more testing and adjusting first (handling ctrl+z, extendable storage which can be in a file, or in base64, or in a separate tiddler using base64, etc). After installation, copy an image and press ctrl+v in a tiddler editor to get [img[...]] inserted.

Best regards,

Yakov.

PS viva ChatGPT, it hugely accelerated creating this one, did this in an hour or a half :)

/***
|Name   |AttachImagePlugin|
|Version|0.2.2|
|Author |Yakov Litvin|
***/
//{{{
config.macros.attachImage = {
fileToBase64: function(file) {
return new Promise((resolve, reject) => {
const reader = new FileReader()
reader.onload = () => resolve(reader.result)
reader.onerror = error => reject(error)
reader.readAsDataURL(file)
})
},
insertImageBase64MarkupOnPaste: async function(event) {
const imgItem = Array.from(event.clipboardData.items)
.find(item => item.type.startsWith('image'))
if(!imgItem) return

const file = imgItem.getAsFile()
const base64Data = await config.macros.attachImage.fileToBase64(file)

const imgMarkup = `[img[${base64Data}]]`

const editor = event.target
const currentText = editor.value

const startPos = editor.selectionStart
const endPos = editor.selectionEnd
const textBefore = currentText.substring(0, startPos)
const textAfter = currentText.substring(endPos, currentText.length)

editor.value = textBefore + imgMarkup + textAfter
const cursorPosition = startPos + imgMarkup.length
editor.selectionStart = editor.selectionEnd = cursorPosition
},

init: function() {
const orig_editHandler = config.macros.edit.handler
config.macros.edit.handler = function() {
const editor = orig_editHandler.apply(this, arguments)
editor.addEventListener('paste', config.macros.attachImage.insertImageBase64MarkupOnPaste)
return editor
}
}
}
//}}}

понедельник, 7 октября 2024 г. в 18:24:32 UTC+3, samp...@gmail.com:

[Yakov]

FYI, I've added the plugin to Github and slightly refactored the prototype. Maybe I'll also add the functionality to prefer inserting an url instead of base64 when the image is copied from web (but there's a problem as an attempt to read potential url for some reason "empties" the binary part of the clipboard). I'll probably test this with CSP so that one can paste and save the image as a file at once, although I'm not sure yet if a smooth UX can be delivered.

Best regards,

Yakov.

пятница, 25 октября 2024 г. в 13:20:35 UTC+3, Yakov:

[sam paul]

Hi, Yakov. I tried this plugin. But when I edit a tiddler, it says "Error in macro <<edit>>".

[Yakov]

Hi Sam,

oh, that's unexpected. Could you click on the error pill? If there's a red pill instead of the editor, it should be clickable and show a dropdown with error text on click – please copy the error or at least share a screenshot.

On the other hand, there indeed was an error in 0.2.4, so I've made a fix and pushed 0.2.5 to the repo – but that one prevented the pasting, not showing the editor itself, so I'm puzzled a bit. Also please let me know what browser you use and its version, and TW version.

Best regards,

Yakov.

понедельник, 4 ноября 2024 г. в 18:02:24 UTC+3, samp...@gmail.com:

[sam paul]

 tiddlywiki version:  2.10.1

AttachImagePlugin: version 0.2.2

Error message: TypeError: Error while executing macro <<edit>>:TypeError: can't access property "addEventListener", editor is undefined

The pasteup doesn't work. Maybe this is due to some other plugins I used. This plugin works fine on a fresh tiddlywiki. I am trying to solve this problem. I would appreciate it If you could give some hints.

[Yakov]

Right, looks like a plugin conflict indeed. Do you use any plugin that deals with the editor, like CodeMirror, Ace.js, or maybe EditFieldPlugin? A more direct thing to find out: search for plugins that modify config.macros.edit.handler (may contain config.macros.edit.handler =, config.macros.edit.handler=; also .handler = and .handler=, but such search will give many false positives). As a quick workaround, you can try adding |Requires|InsertImagePlugin| (sorry for the confusion, I've renamed the plugin when publishing on Github, please rename it and use the latest version, which is 0.2.5 now) to such plugins.

Let me know what you find, the problematic plugins should be fixed (EditFieldPlugin from TiddlyTools definitely breaks compatibility with other plugins enhancing the editor).

вторник, 5 ноября 2024 г. в 11:49:42 UTC+3, samp...@gmail.com:

[sam paul]

It is EditFieldPlugin that caused the conflict. I test 0.2.5. It works fine.

[Yakov]

Great, so have you fixed the conflict by adding |Requires|InsertImagePlugin| to EditFieldPlugin or somehow else?

вторник, 5 ноября 2024 г. в 18:35:35 UTC+3, samp...@gmail.com:

[sam paul]

No, I just disabled EditFieldPlugin.

By the way, It would be so nice if the InsertImagePlugin could build a gallery like the FancyBox plugin.

[Yakov]

Yeah, that's something that I wanted long time ago, when I worked with microscopic images and other science stuff.

Honestly, I'm not sure I will have spare time for this soon, because in fact this should be analyzed in a larger context, i.e. good UX of using images in TW:

• inserting and saving (aside base64: separate tiddler, maybe compatible with AttachFilePlugin/AttachFilePluginFormatters; separate file, support by different savers);
  • ideally, image optimization and something tool to handle attachments;
• handling size (probably compatible with ImageSizePlugin), margins, other layouts (like full bleed), nice defaults for the core;
• handling pathes: intercompatibility with SharedTiddlersPlugin and maybe ImagePathPlugin;
• handling several images at a time (intercompatibility with FancyBox2Plugin galleries or a newer library/plugin, also requires nicer thumbs layout);
• undoing inserting/saving;
• maybe resuming WYSIWYG implementation (I have a prototype for that, but it requires much work).
  

Maybe I'll do some smaller iterations, like support of inserting into a separate tiddler + undoing, we'll see. I'll be glad to receive some help here.

вторник, 19 ноября 2024 г. в 16:25:59 UTC+3, samp...@gmail.com:

[sam paul]

Hi, Yakov. I am afraid I might use editfieldplugin somedays. So I test it again by adding |Requires|InsertImagePlugin| to EditFieldPlugin and tag it as systemConfig. The insertimageplugin doesn't work after that.

[Yakov]

Hi, Sam, in this case you'll need to tweak EditFieldPlugin a bit. I'm trying to initiate updating TiddlyTools, but Eric seems to be busy for now (perhaps if you comment there as well, he'll see that there's some demand), so we need to tweak it separately for now.

Like some TT plugins, it decorates a TWC method, config.macros.edit.handler, incorrectly (well, it works, but limits compatibility) when it uses the original method (config.macros.edit.editFieldPlugin_savedHandler) but doesn't return its result further (probably because older versions of TW didn't return it either). What we need to do is to return it everywhere the  config.macros.edit.handler returns and we also can get it in a simpler manner. I suppose the following changes will fix things:

1. simplify getting the editor element (e): change
   config.macros.edit.editFieldPlugin_savedHandler.apply(this,arguments);
   var fieldType=params[0]=="text"||params[1]?'textarea':'input';
   var elems=place.getElementsByTagName(fieldType); var e=elems[elems.length-1];
   to
   var e = config.macros.edit.editFieldPlugin_savedHandler.apply(this, arguments);
   var fieldType = params[0] == "text" || params[1] ? 'textarea' : 'input';
2. return the element: substitute every return (4 of them) with return e and add return e to the end of config.macros.edit.handler = , i.e.
   now there's
   };
   }
   }
   which should become
   };
   }
   return e;
   }

This way, it should work.

Best regads,

Yakov.

PS I got it why Requires didn't help: InsertImagePlugin decorates config.macros.edit.handler not on plugin execution, but on macro init, which happens later, after all the plugins are executed, so EditFieldPlugin still changes config.macros.edit.handler in a non-compatible way before InsertImagePlugin does. We can amend InsertImagePlugin to prevent this, but the method above is more consistent and will help you avoid further conflicts, so let's try it for now.

среда, 18 декабря 2024 г. в 18:32:41 UTC+3, samp...@gmail.com: