Use Markdown in AI Summary tab implemented

[mulla028]

Closes #12233

Description (UPDATED)

As it was pre-requested, I've implemented an option when user is able, using checkbox, to change the formation of the AI Summary. If user checks it, WebView with formatted into html markdown appears, otherwise text stays raw. It is pretty useful new feature that makes AI Summary user-friendly for those, who loves to see formatted text, instead of raw markdown that besides the text contains "weird", in user's opinion characters.

How Code Changed and Why?

1. In the issue discussion, I asked questions, and maintainers came up with an idea that we need a simple toggle, so I decided to add into org/jabref/gui/ai/components/summary/SummaryShowingComponent.fxml a CheckBox that appears one the left below the AI Summary
2. This toggle handled in org/jabref/gui/ai/components/summary/SummaryShowingComponent.javafile's method onMarkdownToggle(). Once user checks the CheckBox the TextArea disappears, and WebView come us.
3. TextArea was wrapped in StackPane to simplify managing and layering of that component.
4. WebView programmatically implemented (lazy initialization) to avoid findMissingLocalizationKeys and findObsoleteLocalizationKeys tests failure.
5. To formate raw text into markdown I used org/jabref/logic/layout/format/MarkdownFormatter.java that has been already implemented.

How to Copy Formatted Content?

Press anywhere in WebView component press ctrl + a/cmd + a then ctrl + c/cmd + c, and paste it in the desired place ^_^

Screenshots

• Markdown CheckBox checked:

• Markdown CheckBox unchecked:

Mandatory checks

• I own the copyright of the code submitted and I licence it under the MIT license
• Change in CHANGELOG.md described in a way that is understandable for the average user (if change is visible to the user)
• Tests created for changes (if applicable)
• Manually tested changed features in running JabRef (always required)
• Screenshots added in PR description (for UI changes)
• Checked developer's documentation: Is the information available and up to date? If not, I outlined it in this pull request.
• Checked documentation: Is the information available and up to date? If not, I created an issue at https://github.com/JabRef/user-documentation/issues or, even better, I submitted a pull request to the documentation repository.

[github-actions]

JUnit tests are failing. In the area "Some checks were not successful", locate "Tests / Unit tests (pull_request)" and click on "Details". This brings you to the test output.

You can then run these tests in IntelliJ to reproduce the failing tests locally. We offer a quick test running howto in the section Final build system checks in our setup guide.

[calixtus]

Well, right now the checkbox looks quite ugly. Please place it somewhere else...

[calixtus]

It's not good style to mix fxmls and hard coded creation of ui elements except in some edge cases. Please place both the text area and the Web view in a StackPane.

[mulla028]

It's not good style to mix fxmls and hard coded creation of ui elements except in some edge cases. Please place both the text area and the Web view in a StackPane.

I tried not to mix them, but I came up with hard coded WebView, otherwise it wasn't passing unit tests

[subhramit]

I tried not to mix them, but I came up with hard coded WebView, otherwise it wasn't passing unit tests

Which unit tests?

[mulla028]

I tried not to mix them, but I came up with hard coded WebView, otherwise it wasn't passing unit tests

Which unit tests?

In LocalizationConsistencyTest two tests didn't pass using WebView via .fxml: findObsoleteLocalizationKeys() and findMissingLocalizationKeys(). However, adding WebView to the UI programmatically, all tests pass.

[subhramit]

In LocalizationConsistencyTest two tests didn't pass using WebView via .fxml: findObsoleteLocalizationKeys() and findMissingLocalizationKeys(). However, adding WebView to the UI programmatically, all tests pass.

Revert it, let us take a look. We'll help you with the tests.

[mulla028]

@subhramit just reverted it, you will witness that 2 unit-tests are not going to pass

[github-actions]

JUnit tests are failing. In the area "Some checks were not successful", locate "Tests / Unit tests (pull_request)" and click on "Details". This brings you to the test output.

You can then run these tests in IntelliJ to reproduce the failing tests locally. We offer a quick test running howto in the section Final build system checks in our setup guide.

[subhramit]

I have requested a few changes.

For the failing localization tests, go through:
https://devdocs.jabref.org/code-howtos/faq.html#orgjabreflogicl10nlocalizationconsistencytest-findmissinglocalizationkeys-failed and the one below it.

Please also avoid force-pushing your changes.

[calixtus]

I thought about it a bit. It is actually not the worst idea to lazy load the WebView for performance reasons. Please place the TextArea inside a StackPane and add the WebView on demand. That way all the managed and visible stuff can be avoided.

[calixtus]

And please move.the checkbox somewhere else.

[mulla028]

And please move.the checkbox somewhere else.

Before I forced push, the previous commit had the changed position of CheckBox

[koppor]

And please move.the checkbox somewhere else.

Before I forced push, the previous commit had the changed position of CheckBox

Therefore, no force push.

Either try to resurrect the commit with "git reflog" or try to re-do it.

[mulla028]

@koppor
Reset commit. Sorry for doing it, I can see how it's driven everyone crazy 😆

[mulla028]

@calixtus
Now, I think it looks way better. CheckBox doesn't seam that ugly(check updated description). May be you have any suggestions on it?

[InAnYan]

Great! Summary looks so much nicer now!

I was thinking: what if we could get rid of TextArea whatsoever?

Can you implement only one WebView that would have different HTMLs: one in plain mode, and other is rendered Markdown? This would greatly simplify the logic.

I also noticed 3 small problems:

• Text is not wrapped.
• WebView does not shrink.
• Text is not styled with JabRef's main font. Can you look at how it's implemented in entry preview? The default font is Sans, but the summary in WebView is Serif.

[mulla028]

@InAnYan
I don't know how to make a plain text shrink there. However, Markdown is getting shrink well!

[InAnYan]

Good, you used WebView for both plain-text mode and rendered Markdown, looks better (however, there is a slight remain of TextArea 😄). Overall, I see these problems:

• It doesn't wrap text in plain text mode. That's strange, because in rendered Markdown mode there is some wrapping (maybe, because of the <pre> tag?)
• In rendered Markdown mode, it wraps the text, but only if the width is bigger than some limit. What I mean is: wrapping doesn't work for all possible width changes. Maybe that's a JavaFX problem, or you need to know a lot of JavaFX internals to solve this problems. If you couldn't find the issue and fix it, it's okay to skip it. (But don't forget about wrapping in plain-text mode).

• Fonts are not handled properly.

[mulla028]

@koppor @subhramit @calixtus
How do you like it now ?

[mulla028]

@InAnYan
Talking about the text wrapper, and it's limit. I think this is JavaFX issue. Unfortunately, it has nothing to do with my changes.