View-Mode: AsciiDoc convert support

aisbergde commented 2 years ago

⚠️ This issue respects the following points: ⚠️

[X] This is a enhancement/feature request. Not a bug or question.
[X] The topic is not already reported at Issues. (I've searched it).
[X] Markor is up to date. See Releases for the latest version. Updates are available from F-Droid and GitHub.
[X] The wanted feature/enhancement is not present in the latest code version (git master). (Please download and try the test version of Markor, named Mordor. Don't worry; Markor and Mordor appear as completely separate applications. You can install both side-by-side, and Markor's settings are not touched. If your desired feature is present, you don't need to open this issue. The change will be part of the next Markor update.)

Description

After the implementation of #808 (new format: AsciiDoc) more features like AsciiDoc Preview should be implemented. For this purpose, there is "AsciidoctorJ: Java Bindings for Asciidoctor": https://docs.asciidoctor.org/asciidoctorj/latest/

And what and how to install a preview (with it, among other things):

Why a separate issue?

808 can be taken off first without overloading the implementation too much with features
you could involve more AsciiDoc-affine developers in the project later.

I am ready to assigned. But maybe some support would be required.

Information

Android version: Device: App Version:

Source

F-Droid

Format / File type

Something else (-> Additional info)

Additional info / Log

gsantner commented 2 years ago

To my understanding, this is a ruby gem and contains native code. Meaning Markor gets from all-architecture-supported-by-one-pure-java-application APK to requiring a own build per platform. Can you please check this?
At Markor I can only see pure java implementations as viable - otherwise it bloats the app highly and it means Markor is not lightweight anymore ... and it should stay lightweight.

aisbergde commented 2 years ago

I have to check.

My idea was

first to get the basic implementation merged.
then to announce this in the AsciiDoc community
then to find some developers to contribute.

Can we keep this issue as a placeholder, until clarification?

IMHO: In General, there would be several ways:

to implement some "light" syntax highlighting
to have a look at what exists (for example asciidoctor)

Also for the preview, I can imagine a light way: the user can install a browser (like kiwi browser), supporting chrome extensions. Then he can implement the AsciiDoc plugin to render AsciiDoc as html. And somehow Markor will make the adoc files in any way available for the browser, but rendering will be an external job.

Currently, I am using "NiM Web Server" on Android, to provide the content to the web browser.

gsantner commented 2 years ago

you can move this new comment to the pull request and remove it here. not really is about the issue itself, but about the goals of the pull request.

aisbergde commented 2 years ago

it could be converted from an issue into a discussion? If it is just a comment to the pull request, it could be lost.

gsantner commented 2 years ago

It won't be lost unless somebody deletes it, which we don't do. Wherever it is written to. And splitting up to discuss something on 5 different places not makes it easier 😄 . So please just write in the merge request 👍🏻

gsantner commented 1 year ago

Suggestion and seemingly the least bloating option without too much dependencies:
Adding a copy of the Asciidoctor.js (as seen at the official Asciidoc website) file to Markor, export text to view mode with a wrapper block and convert on js side directly.

so like <link rel="js"><div id="content">{{ user text }}</div>
<script>var parsed=asciidocjs.parse(content.innerText); content.innerHTML = parsed;</script>

TimReset commented 1 year ago

I have just checked - asciidoctor.js - it's a similar lib as asciidoctorJ - Ruby port for JS. And size is similar. So, @gsantner is your statement about "and it should stay lightweight." still valid? Because I don't see any options to support AsciiDoc in Markor except using Ruby port - either Java or JS.

aisbergde commented 1 year ago

I don't know what to do. I was able to do the Java part, based on the idea, how Markdown support was implemented. But I am overwhelmed with the preview.

TimReset commented 1 year ago

So, I tried to use asciidocj but it uses java.lang.invoke.MethodHandle and java.lang.invoke.SwitchPoint To fix the first requirement - need to increase an android version to 26, but android jvm doesn't have SwitchPoint anyway. And I tried to use asciidoc.js. It works:

I'll make that code more productive ready and create a pull request.

PS size of asciidocjs min is ~700KB

gsantner commented 1 year ago

thanks for trying both. Increasing minimum Android version to 26 (and locking out a huge part of Markor users) is definetley no option.

So as you got asciidoc.js to work, nice! How much (filesize) are the (js/css) files you need to add? And how much does the size of the apk increase by that roughly? As far I understood asciidocjs basically is a ruby-installation-compiled-to-javascript plus the asciidoc stuff (which could be big in terms of size).

Btw dont worry about making about all features (like html export) too much, it's OK to make a merge request with the bare minimum for first :smiley:.

TimReset commented 1 year ago

10569KB

TimReset commented 1 year ago

I have created a pr https://github.com/gsantner/markor/pull/2022

So, actually there is still a problem - need to support dark mode. But to do that need to rewrite asciidoctor.css.

gsantner commented 1 year ago

@TimReset

Regarding dark mode I have a idea.

grafik

So instead of adding multiple files, or manipulating color hex strings by i.e. search+replace at runtime....It might be a good idea to use CSS variables instead. So to i.e. change the most important stuff to i.e. --var(text-color, #fallback) and the colors come then in by generic means - so it also uses Markor's usual text/background/ahref-link colors. For the most part I don't think we need to change up the color/stle (like .blue { #somebluehexcolor doesn't need anything different by light or dark).

What do you think about that? If you think thats a good idea, I can help by taking care of the rather generic stuff and ou would need to take care to change the asciidoctor css file to use --var.

gsantner commented 1 year ago

One of the things that are important to me is that adding asciidoc converter does not blow up the (APK) filesize for users. As far I can see the resulting binary filesize does not blow up as much I thought. Around half megabyte more of course is not nothing, but it's OK I'd say 😄 .

grafik

TimReset commented 1 year ago

@gsantner About dark theme: I agree - I tried to google, how to implement dark theme and the first result is use variables in css. Actually my main problem is how to choose correct colors for dark theme. I'm a server side developer and UI/UX are not my strong skills :-)

About apk size: I don't know android very well and don't know how to find out what the file consists of, what is the biggest part of apk. So, did you research that? Maybe we can remove something? eg, some fat libs.

gsantner commented 1 year ago

Markor has for most things already some standard/default colors, so don't worry too much about it. For many things it might be enough to not specify any color at all at asciidoctor.css (i.e. removing the line).

The point was, due your change of adding asciidocjs the resulting binary file size increased by ~half megabyte. It's not about anything else. And I'd say it's a increase that doesn't hurt.

aisbergde commented 1 year ago

Regarding colors:

I tried to select colors, which are fine for red-green color deficiency individuals, like me. I tried to optimize them for a light and a dark theme. But this was related to the editor for "source code". Final preview could be different.

In General I am fine with the default light theme, but regarding to https://docs.asciidoctor.org/asciidoctor/latest/html-backend/default-stylesheet/#are-there-different-themes dedicated AsciiDoc skins exist https://github.com/darshandsoni/asciidoctor-skins

TimReset commented 1 year ago

Wow. I tried to find something like that but no luck. I'll check, thanks!

TimReset commented 1 year ago

I finally manage to do that with some hacks:

And I added check to net.gsantner.markor.frontend.textview.AutoTextFormatter#autoIndent bcz I had an exception in: indent = source + oLine.line.substring(0, oLine.indent); due to oLine.indent = -1 or -31 Definitely it could be fixed more gracefully but I have no idea how. net.gsantner.markor.frontend.textview.AutoTextFormatter.ListLine#isEmpty = false and I can't rely on this boolean variable

TimReset commented 1 year ago

So, Any ideas what needs to be improved next? I thought about MermaidJS.

gsantner commented 1 year ago

So you would be interested in more contributions? Very welcome!

Generally said, contributors should do what they are interested. Unlike commercial products there is nothing assigned, pre-announced or pre-decided ""this features is worked on and released in next version"" 😄 .

What I suggest to do next is: Make a proper AsciiDoc example document showcasing all of it's features and syntax. Similar to the markdown-reference.md file. Also I can see that the image links in the existing asciidoc sample do not render. But they do at Markdown sample, so should be doable.

I do not use asciidoc (currently). So it would be especially important that AsciiDoc is good wrapped up from all directions by somebody who knows it good, since I probably won't touch it too much.

aisbergde commented 1 year ago

So, Any ideas what needs to be improved next? I thought about MermaidJS.

Light theme for Asciidoc preview 😍

TimReset commented 1 year ago

So, Any ideas what needs to be improved next? I thought about MermaidJS.

Light theme for Asciidoc preview 😍

Oh, my fault - I really thought I implemented it correctly! Here is small pr (I tested - it's dark in dark mode and light in light mode) https://github.com/gsantner/markor/pull/2092

@aisbergde

gsantner / markor