Allow file attachment into the comments editor (Markdown)

[koppor]

How to reproduce

1. Create a library with the file directory is .
2. Firefox: Visit https://www.sequoiacap.com/article/ai-powered-developer-tools/
3. Firefox: Import into JabRef
4. Go to the tab "Comments"
5. From Firefox: drag'n'drop the image onto the comment field

Expectation:

1. ![](dev-ai-wide-10.png) appears in the editor
2. dev-ai-wide-10.png exists next to the .bib file (which is the file directory configured for the bib file)

Actual behavior

File is attached

Additional Info

Note: Deep link to the image: https://www.sequoiacap.com/wp-content/uploads/sites/6/2023/03/dev-ai-wide-10.png?resize=1440,1400

TODOs

• 1. Use JabRef's download functionality
• 2. Add link into comment field (next to cursor)
• 3. Change "Find unlinked files" to ignore files linked in the comment fields

Background:

• Feature in VS.Code: https://code.visualstudio.com/updates/v1_79#_editor

[DavidCoy77]

Hello, I'm an undergraduate programming major that's eager to make my first GitHub contribution. Would I be able to claim this issue? Thanks!

[DavidCoy77]

I'm thoroughly occupied with the other issue I claimed (#10558), so I "unassigned" myself on this one. I'm not going to work on it at all, so it is completely free for someone else to claim.

[fyssgo]

Hi, I'm looking for an issue for my project. Would you mind assigning this issue to me? I will try to fix it. Thanks!

[weronikaulbricht]

Hello there, would you be able to assign this project to me?
I am supposed to work on an beginner - friendly issue for my Software Engineering Class.

[github-actions]

As a general advice for newcomers: check out Contributing for a start. Also, guidelines for setting up a local workspace is worth having a look at.

Feel free to ask here at GitHub, if you have any issue related questions. If you have questions about how to setup your workspace use JabRef's Gitter chat. Try to open a (draft) pull-request early on, so that people can see you are working on the issue and so that they can see the direction the pull request is heading towards. This way, you will likely receive valuable feedback.

[ThiloteE]

@weronikaulbricht Since there has not been any activity, I assume you have given up on this project, therefore will unassign you to make this issue available to other contributors. If you are still on it, just leave a message.

[abimael-turing]

@ThiloteE If you would like, you can assign this issue to me!

[ThiloteE]

I already assigned you to another good first issue today. Are you sure? Don't overload yourself.

[ADm1n766]

Hey, I'm looking for a good first issue and want to work at this one. I already have installed the jabref-Program working on intellij. Currently I try to reproduce the issue and need more information about the guideline.

At first what is important about the file directory, named: "."?

How to reproduce

1. Create a library with the file directory is .
2. Firefox: Visit https://www.sequoiacap.com/article/ai-powered-developer-tools/
3. Firefox: Import into JabRef
   ...

[Siedlerchr]

@ADm1n766 create a new library in JabRef , then right click on the library properties -> General file directory set to "."
this means it will take the relative path of the library, the location of the .bib file

[ADm1n766]

Probably I've reproduced the Issue completely:
At first I created a new library, then put some information in required fields from the website and copied the image "03/dev-ai-wide-10.png?w=1024" and if I have a connection to a network the image is displayed.

But if I want to put the image per drag and drop from the website without saving in a file directory I get the exception:

Uncaught exception occurred in Thread[#53, JavaFX Application Thread, 5, main] ReferenceError: Can´t find variable: Mark

and much more detailed information. Thats the issue right?

[Siedlerchr]

@ADm1n766 Would be great if you could post the whole stackrace and if you have some local stuff already then go create a PR. Without seeing any code or the complete stacktrace it's hard to identify the root cause

[ADm1n766]

Of course, with pleasure! Here is a screenshot from my exception:

ReferenceError: Can´t find the variable: Mark
The whole exception stacktrace was:
netscape.javascript.JSException: ReferenceError: Can't find variable: Mark
at [email protected]/com.sun.webkit.dom.JSObject.fwkMakeException(JSObject.java:160)
at [email protected]/com.sun.webkit.WebPage.twkExecuteScript(Native Method)
at [email protected]/com.sun.webkit.WebPage.executeScript(WebPage.java:1576)
at [email protected]/javafx.scene.web.WebEngine.executeScript(WebEngine.java:985)
at [email protected]/org.jabref.gui.preview.PreviewViewer.highlightSearchPattern(PreviewViewer.java:211)
at [email protected]/org.jabref.gui.preview.PreviewViewer.lambda$new$2(PreviewViewer.java:176)
at [email protected]/com.sun.javafx.binding.ExpressionHelper$SingleChange.fireValueChangedEvent(ExpressionHelper.java:192)
at [email protected]/com.sun.javafx.binding.ExpressionHelper.fireValueChangedEvent(ExpressionHelper.java:91)
at [email protected]/javafx.beans.property.ReadOnlyObjectPropertyBase.fireValueChangedEvent(ReadOnlyObjectPropertyBase.java:80)
at [email protected]/javafx.beans.property.ReadOnlyObjectWrapper.fireValueChangedEvent(ReadOnlyObjectWrapper.java:102)
at [email protected]/javafx.beans.property.ObjectPropertyBase.markInvalid(ObjectPropertyBase.java:113)
at [email protected]/javafx.beans.property.ObjectPropertyBase.set(ObjectPropertyBase.java:147)
at [email protected]/javafx.scene.web.WebEngine$LoadWorker.updateState(WebEngine.java:1264)
at [email protected]/javafx.scene.web.WebEngine$LoadWorker.dispatchLoadEvent(WebEngine.java:1379)
at [email protected]/javafx.scene.web.WebEngine$PageLoadListener.dispatchLoadEvent(WebEngine.java:1244)
at [email protected]/com.sun.webkit.WebPage.fireLoadEvent(WebPage.java:2577)
at [email protected]/com.sun.webkit.WebPage.fwkFireLoadEvent(WebPage.java:2421)
at [email protected]/com.sun.webkit.network.URLLoaderBase.twkDidFinishLoading(Native Method)
at [email protected]/com.sun.webkit.network.HTTP2Loader.notifyDidFinishLoading(HTTP2Loader.java:566)
at [email protected]/com.sun.webkit.network.HTTP2Loader.lambda$callBackIfNotCanceled$10(HTTP2Loader.java:429)
at [email protected]/com.sun.javafx.application.PlatformImpl.lambda$runLater$10(PlatformImpl.java:456)
at java.base/java.security.AccessController.doPrivileged(AccessController.java:400)
at [email protected]/com.sun.javafx.application.PlatformImpl.lambda$runLater$11(PlatformImpl.java:455)
at [email protected]/com.sun.glass.ui.InvokeLaterDispatcher$Future.run(InvokeLaterDispatcher.java:95)
at [email protected]/com.sun.glass.ui.win.WinApplication._runLoop(Native Method)
at [email protected]/com.sun.glass.ui.win.WinApplication.lambda$runLoop$3(WinApplication.java:184)
at java.base/java.lang.Thread.run(Thread.java:1583)

[Siedlerchr]

Ah interesting, that is coming from the javascript that is used for the search highlighting:

at [email protected]/org.jabref.gui.preview.PreviewViewer.highlightSearchPattern(PreviewViewer.java:211)

[koppor]

The issue at hand is about the Markdown editor (!) , not the preview.

As picture:

Please try to focus on that and not to find other issues.

The class to modify should be

jabref/src/main/java/org/jabref/gui/fieldeditors/MarkdownEditor.java

Line 15 in f570a2d

public class MarkdownEditor extends SimpleEditor {

.

Note for developers: The preview is discussed in an internal issue https://github.com/JabRef/jabref-issue-melting-pot/issues/452.

[JorECardenas]

Hello I've been looking for a good first issue and I would like to implement this one. I just wanted to ask for more information on how to reproduce the issue:

• Like the way you can add an image from the website, is this done with the extension or you drag and drop from the web browser on to JabRef?
• Or does this issue apply to when you copy and paste an image from a website or also from the file explorer?

[JorECardenas]

Hi, I've been working for a bit on this issue and I managed to add the functionalities to drag-and-drop and also copy-paste images on the markdown editor and insert the text in the format, the next challenge is that the way I found to access files is by using "file://" with the absolute path of the image so it ends up looking like this:

For the next part I'm planning to make it so that the markdown editor shows only the image name instead of the full path but then the preview adds the "file://" so it can access the image, there is also a few other details here that maybe aren't inside the scope of the issue but here they are:

• The images are shown with their actual size so they end up mostly looking too big for the preview pane
• I'm still not able to check if the image is on the default directory or able to move/copy images that aren't in this directory (for now I'm planning to at least check if the image is on the folder)

So it would help me if you could at least point me in the right direction so I can solve this in the best way possible

[koppor]

* Like the way you can add an image from the website, is this done with the extension or you drag and drop from the web browser on to JabRef?

See step 5 on the issue description: Drag'n'drop from web browser.

Additionally: drag''drop from the file system should also be possible.

When drag'n'drop of a file, the ususal file attachment handling should be made. (which moves the file if it is outside, the functionality is there)

Moreover, I think, it would be good if drag'n'drop from firefox, the file should also be linked. Then, one does not have issues at find-unlinked-files.

* Or does this issue apply to when you copy and paste an image from a website

This is an additional wish, you can also implement that.

*  or also from the file explorer?

This is an additional wish, you can also implement that.

[koppor]

Hi, I've been working for a bit on this issue and I managed to add the functionalities to drag-and-drop and also copy-paste images on the markdown editor and insert the text in the format,

Nice! You can open a PR if you want. It might be hard to discuss things with screenshots only.

the next challenge is that the way I found to access files is by using "file://" with the absolute path of the image so it ends up looking like this:

file:// is wrong.

See how it works in markdown: https://github.com/JabRef/jabref/blob/main/README.md. Click on "Raw" and see

![main table](docs/images/jabref-mainscreen.png)

no file://.

For the next part I'm planning to make it so that the markdown editor shows only the image name instead of the full path

The path needs to be relative. See also the handling of linked files. - Maybe, it is good to re-use the linked files functionality.

but then the preview adds the "file://" so it can access the image, there is also a few other details here that maybe aren't inside the scope of the issue but here they are:

The images are shown with their actual size so they end up mostly looking too big for the preview pane

There is Resizable Image Extension

I'm still not able to check if the image is on the default directory or able to move/copy images that aren't in this directory (for now I'm planning to at least check if the image is on the folder)

org.jabref.logic.util.io.FileUtil#find(java.lang.String, java.util.List<java.nio.file.Path>) is your friend here.

[ThiloteE]

@JorECardenas even if you have dropped this issue, opening a pull-request would be nice, since you say you have solved the issue at least partially. Other people might pick it up from there.

[JorECardenas]

Hi, I made the PR draft #12193 of my attempt to add this feature, I hope it is helpful to the next person that works on this issue