Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Allow file attachment into the comments editor (Markdown) #10559

Open
3 tasks
koppor opened this issue Oct 23, 2023 · 21 comments · May be fixed by #12193
Open
3 tasks

Allow file attachment into the comments editor (Markdown) #10559

koppor opened this issue Oct 23, 2023 · 21 comments · May be fixed by #12193
Assignees
Labels
📍 Assigned Assigned by assign-issue-action (or manually assigned) entry-editor good first issue An issue intended for project-newcomers. Varies in difficulty.

Comments

@koppor
Copy link
Member

koppor commented Oct 23, 2023

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:

@koppor koppor added the good first issue An issue intended for project-newcomers. Varies in difficulty. label Oct 23, 2023
@github-project-automation github-project-automation bot moved this to Free to take in Good First Issues Oct 23, 2023
@DavidCoy77
Copy link

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!

@ThiloteE ThiloteE moved this from Free to take to Reserved in Candidates for University Projects Oct 25, 2023
@ThiloteE ThiloteE moved this from Free to take to Reserved in Good First Issues Oct 25, 2023
@ThiloteE ThiloteE added the FirstTimeCodeContribution Triggers GitHub Greeter Workflow label Oct 25, 2023
@DavidCoy77 DavidCoy77 removed their assignment Oct 27, 2023
@DavidCoy77
Copy link

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.

@ThiloteE ThiloteE moved this from Reserved to Free to take in Candidates for University Projects Oct 27, 2023
@ThiloteE ThiloteE moved this from Reserved to Free to take in Good First Issues Oct 27, 2023
@JabRef JabRef deleted a comment from github-actions bot Oct 27, 2023
@koppor koppor removed the FirstTimeCodeContribution Triggers GitHub Greeter Workflow label Oct 27, 2023
@fyssgo
Copy link

fyssgo commented Oct 28, 2023

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!

@ThiloteE ThiloteE moved this from Free to take to Reserved in Candidates for University Projects Oct 28, 2023
@ThiloteE ThiloteE moved this from Free to take to Reserved in Good First Issues Oct 28, 2023
@ThiloteE ThiloteE added the FirstTimeCodeContribution Triggers GitHub Greeter Workflow label Oct 28, 2023
@JabRef JabRef deleted a comment from github-actions bot Apr 8, 2024
@koppor koppor removed the FirstTimeCodeContribution Triggers GitHub Greeter Workflow label Apr 8, 2024
@koppor koppor moved this from Reserved to Free to take in Candidates for University Projects Apr 8, 2024
@koppor koppor moved this from Reserved to Free to take in Good First Issues Apr 8, 2024
@weronikaulbricht
Copy link

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.

@ThiloteE ThiloteE moved this from Free to take to Reserved in Good First Issues Apr 10, 2024
@ThiloteE ThiloteE added the FirstTimeCodeContribution Triggers GitHub Greeter Workflow label Apr 10, 2024
Copy link
Contributor

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
Copy link
Member

ThiloteE commented May 20, 2024

@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.

@ThiloteE ThiloteE moved this from Reserved to Free to take in Candidates for University Projects May 20, 2024
@ThiloteE ThiloteE moved this from Reserved to Free to take in Good First Issues May 20, 2024
@abimael-turing
Copy link

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

@ThiloteE
Copy link
Member

ThiloteE commented May 20, 2024

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

@ADm1n766
Copy link

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
Copy link
Member

@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
Copy link

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
Copy link
Member

@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
Copy link

ADm1n766 commented Jun 1, 2024

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

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
Copy link
Member

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 koppor removed the FirstTimeCodeContribution Triggers GitHub Greeter Workflow label Jun 17, 2024
@koppor
Copy link
Member Author

koppor commented Jun 17, 2024

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

As picture:

image

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

The class to modify should be

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
Copy link

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?

@ThiloteE ThiloteE moved this from Free to take to Assigned in Candidates for University Projects Oct 7, 2024
@ThiloteE ThiloteE moved this from Free to take to Assigned in Good First Issues Oct 7, 2024
@JorECardenas
Copy link

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:

Image

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 koppor added the 📍 Assigned Assigned by assign-issue-action (or manually assigned) label Oct 16, 2024
@koppor
Copy link
Member Author

koppor commented Oct 16, 2024

* 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
Copy link
Member Author

koppor commented Oct 16, 2024

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
Copy link
Member

@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 JorECardenas linked a pull request Nov 15, 2024 that will close this issue
7 tasks
@JorECardenas
Copy link

JorECardenas commented Nov 15, 2024

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
📍 Assigned Assigned by assign-issue-action (or manually assigned) entry-editor good first issue An issue intended for project-newcomers. Varies in difficulty.
Projects
Status: Assigned
Status: Assigned
Development

Successfully merging a pull request may close this issue.

9 participants