JS: Port Anki note editor to smartphone

[Arthur-Milchior]

Anki uses a webview to edit not content. The webview itself is in svelte. As some of you may now, it means that it generates html+javascript content, that is then displayed in a webview.

The goal of this issue is to consider whether porting this webview to AnkiDroid may make sens. If so, it would ensure a consistent experience on computer and android, and also would allow us to directly benefits from the wonderful work of @hgiesel (this is also a ping, because if you have got feedback, they are extremely welcome. However, this is not a request for you to do the work). Personally, if I can even see my mathjax while I type it on android, I would be delighted!

This issue is an exploratory issue. That is, it may or may not lead to a change in AnkiDroid code. If this idea is impossible to actually use, and you are able to explain to us why it can not work, what you tried (so that we can double-check) and what failed, I personally would consider it similar to a good quality PR merged as far as GSoC and OpenCollectives are concerned (After all, I expect that it will require you to do code anyway)

Concretely, I would like to know how would the page behave on smartphone and tablet. That is, the first goal is to compile the webview, and ensure that any contributor can play with it. Either host it online, or provide a very simple way to open it that don't require the full anki build system. You do not have to deal with loading content from a database nor saving content, however, I'd appreciate if you can provide a version of the webpage with some content by default, so that we can see how a note editor would appear with an already existing note. I would also like that the test indicates that i field is in English and another one in Chinese, and check whether the keyboard adapt appropriately (same way than AnkiDroid note editor will change the keyboard depending on the language)
I'd also like to see, when text is selected in a field, a "cloze" option in the context menu

If the note editor is nice to use on a smartphone, the next issues is to figure out how to automatically add Svelte code to our repo (either compiling svelte ourselves, or importing the compiled result), and ensure that Kotlin and JS communicate data back and forth as in upstream.

[s-deepak-kumar]

Please Assign It To Me.

[Arthur-Milchior]

@s-deepak-kumar Done.
Do you have experience with svelte? JS?

[s-deepak-kumar]

Yeah, i'm well aware of JS, but have little knowledge about svelte. I can fix it, let me try. Thanks!

[Arthur-Milchior]

I let you try of course. I just admit that I was slightly worried because of #10307 (comment) where you asked a question to which I answered just above. So double checking how understandable my request was

[s-deepak-kumar]

Sorry, actually i read your answer few days back. Thats why i did silly mistake.

[david-allison]

Does this want to live in the backend code? I'd be tempted to say yes, as the backend already has access to the Anki submodule, and probably means we can move svelte out of the toolchain that a new user needs before they can contribute.

Can we set the IMEHintLocale (keyboard language) inside a WebView?

[Arthur-Milchior]

What is "anki submodule"?

If you add this to "backend code", then I really really wish you to update the name of the repo, because that's the most front-end code you can ever have.

I perfectly agree that it would be great if we are not requesting all users to install a svelte compiler. I have no idea how your backend repo gets used with ankidroid today. But I realize that it has never required me to install a rust compiler, which is great. If we can use the same technique to avoid a Svelte compiler, that will be wonderful, whether it's the same repo or another one.

I don't see the sens of using the same repo for svelte and rust, because right now there is no tool to communicate between JS and Rust. Upstream, Python is the bridge (which also allow add-on to interact with the note content). In AnkiDroid, we already have means to communicate between JS and Kotlin, and so I assumed it'd be simple to keep using it instead of creating a new system.

But, more importantly, I believe that those questions are really premature. They are important questions if this is the way we decide to work. But first, we just really need to know whether this UI is actually easy to use on android device (or at least can easily be adapted. We may want to change some CSS for example, that would be no big deal)

[dae]

You've kind of jumping in the deep end here. There are other Svelte pages like the card info screen, deck options and graphs that have a smaller API surface and would be easier to experiment with first.

no tool to communicate between JS and Rust

While communication currently goes through the webserver running in Python, for a bunch of requests made in JS, the incoming bytes are simply passed directly on to the backend routines, and the two languages used shared protobuf definitions to communicate. If you wish to understand how it works, the Card Info screen is a good starting place to explore.

[dae]

Also I'm afraid this is probably not something you can tackle in GSoC or a good first issue. It requires AnkiDroid to be up to date with the latest desktop code for one, and that requires a bunch of changes on AnkiDroid's end first.

[Arthur-Milchior]

I was interested by Note editor because this one is more of a pain point for users, while I have less heard that card info was something that users wanted to see improved.

However, thanks for the warning about protobuf. I guess I missed the latest evolution, last time I dealt with the note editor, every request were encoded as json. I admit that if this idea now requires to also add tools to decode protobuf and import the protobuf definition, it suddenly becomes far more complex than I first hoped.

@s-deepak-kumar I added in the top message some information about more tests that are required

[s-deepak-kumar]

Thanks @Arthur-Milchior, i'm trying.

[krmanik]

I have tried this for generating graphs.html, graphs.js and graphs.css. I have clone the anki repository and run the bazel build in web directory in qt/aqt/data/web and ts. I get the generated .js and .html file in .bazel/bin folder.

But how the data related to stats will be sent to graphs page when request sent from the graphs page? I think JavaScript interface will be used or local http server like nanohttpd will be used to get stats data from java/kotlin class.

[krmanik]

Thanks to @dae, I managed to port the graphs (Anki 2.1.34 HTML/JS used). View this PR krmanik#23 for more. Also it is not required server to serve the web files and the fetch have issues with file:/// but the patch provided by @dae is resolved the errors.

I will create refined PR for graphs.

[Arthur-Milchior]

Are those screenshot from an android device'? Seems so cool!

[krmanik]

Those screenshots are from Android device.

[github-actions]

Hello 👋, this issue has been opened for more than 2 months with no activity on it. If the issue is still here, please keep in mind that we need community support and help to fix it! Just comment something like still searching for solutions and if you found one, please open a pull request! You have 7 days until this gets closed automatically