Anki-android: "What-You-See-Is-What-You-Get" note editor (no HTML code visible to user)

[hssm]

UPDATE - TEST DOWNLOAD AVAILABLE

We are testing a Visual editor, you can install it to see how it works for you: https://github.com/david-allison-1/Anki-Android/releases/download/v2.10wysiwyg1/AnkiDroid-vised.apk

Originally reported on Google Code with ID 474

I would be a great improvement to have a "What-You-See-Is-What-You-Get" style format
editing in card editor, with format buttons like in Anki Desktop.
Also, in the same UI or editing screen, to have buttons for fonts, "cloze", pictures,
record sound, etc... 

This enhancement, combined with the already pointed issues of playing movies and a
better card browser, would make Ankidroid a software definitely independent (or better
said, non-dependent) from Anki Desktop.

Reported by Villatonil on 2011-02-27 17:29:52

[hssm]

Reported by nicolas.raoul on 2011-02-28 01:59:49

• Status changed: Accepted
• Labels added: Type-Enhancement, Priority-Low
• Labels removed: Type-Defect, Priority-Medium

[hssm]

I like being able to see and edit the HTML directly.

Reported by johanfange on 2011-03-29 08:48:17

[hssm]

Issue 555 has been merged into this issue.

Reported by nicolas.raoul on 2011-04-05 08:52:52

[hssm]

We could reuse the Android code written by Wordpress for their native Android app, which
has a WYSIWYG component, see http://stackoverflow.com/questions/3707788

Still low priority because:
- Users who created their deck with AnkiDroid most probably don't use HTML.
- Users who created their deck with Anki Desktop know that they can always use Anki
Desktop for card edition.

HTML source editing should be possible too, for people like Johan (see comment 2),
either as a different dialog or as a general option.

Reported by nicolas.raoul on 2011-04-05 08:57:54

[hssm]

Reported by nicolas.raoul on 2011-08-16 06:44:10

• Labels added: CardAddition

[hssm]

Issue 912 has been merged into this issue.

Reported by nicolas.raoul on 2011-12-26 15:24:22

[hssm]

Since the editing boxes are small on a phone, the HTML does tend to clutter the screen.
 Also, since some HTML is now WYSIWYG (i.e. <br>), it would be nice to go further.
Perhaps there could be a toggle between the two.

Reported by ottenlips on 2011-12-26 15:33:18

[hssm]

Issue 993 has been merged into this issue.

Reported by nicolas.raoul on 2012-02-06 00:03:16

[hssm]

By gerritsangel:
Maybe it could be implemented in the long click dropdown menu (where copy, cut etc.
is located). So after you select a text in the card editor, and you want to make it
italic or bold or underlined, you make a long click and then select italic. After that,
the html code for italics will be wrapped around the selected text, just like in Anki
desktop.
For larger screens (e.g. tablets), the space may be sufficient to make seperate buttons
for it, in order to save time when wanting to have something in italics.

Reported by nicolas.raoul on 2012-02-06 00:04:05

• Labels added: Priority-Medium
• Labels removed: Priority-Low

[hssm]

If you use Anki desktop and Droid, you're using Android when you haven't got access
to your PC, on the train, at uni, etc. When you're reviewing is when you notice that
a card is cumbersome or needs to be broken into sections, and you want to be able to
effectively edit it then. It's very difficult to do this on Ankidroid without quick
access to bold and other formatting. The html is far too cumbersome, especially on
tablet and phone keyboard and if you're not writing html all the time.

Reported by chris.g.sadler on 2012-05-19 05:06:59

[hssm]

Issue 1684 has been merged into this issue.

Reported by nicolas.raoul on 2013-12-25 06:25:23

[hssm]

Here's a non official solution in the meantime! 

https://code.google.com/p/ankidroid/issues/detail?can=2&start=0&num=100&q=&colspec=ID%20Type%20Priority%20Status%20Milestone%20Owner%20Summary&groupby=&sort=&id=1491

Reported by Ben.Devlieger on 2014-01-04 13:16:30

[hssm]

Reported by Houssam.Salem.Au on 2015-02-11 03:50:22

[hssm]

Issue 2519 has been merged into this issue.

Reported by Houssam.Salem.Au on 2015-02-11 03:50:41

[hssm]

Issue 1724 has been merged into this issue.

Reported by Houssam.Salem.Au on 2015-02-11 03:51:16

[hssm]

Issue 1791 has been merged into this issue.

Reported by perceptualchaos2 on 2015-02-25 23:34:42

[hssm]

CommonsWare has rich edit toolbar
https://github.com/commonsguy/cwac-richedit

http://www.inappsquared.com/img/com.commonsware.cwac.richedit.demo.png

it might almost do what we want

Reported by perceptualchaos2 on 2015-03-20 07:37:26

[hssm]

Issue 2391 has been merged into this issue.

Reported by Houssam.Salem.Au on 2015-04-14 08:52:15

[timrae]

Looks promising
https://github.com/wasabeef/richeditor-android

[mikehardy]

https://play.google.com/store/apps/details?id=com.jkcarino.ankieditor

[NarniaT]

The current WYSIWYG extension on Google Play can only create and not EDIT previously made notes. Well... That's the main problem in the first place.

For anyone else needing this in the future, the steps below might help to some extent:
1_ First locate the card in the card browser.
2_ Don't open it! Instead tap and keep touching on it.
3_ Choose preview.

(It gives you the readable view of the note but it's still not proper for editing)

[mikehardy]

@NarniaT We are always open to PRs https://github.com/ankidroid/Anki-Android/wiki/Contributing

[student2374]

This issue (hide html on anki droid while editing) has been open since 2015. With new betas coming out every week, why hasn't this issue been addressed? Please address this issue, I'm not a coder but I guess its an easy fix.

[timrae]

It's not addressed because we're volunteers and nobody felt sufficiently motivated to do it. If it's an easy fix then I guess it should be easy for you to do even as a non-coder. Anyway, I think there's a third party app that offers WYSIWYG support via the AnkiDroid API.

[student2374]

Sorry, I am new to this community and was just wondering if there's an update every week, Is this fix that complicated that no one attempted it?

Since this is run by volunteers, I am willing to pay to get someone "sufficiently motivated" to fix this, as some other issues that I want seen on Ankidroid app.

Is there a way I can pm you so you can guide me on how to do that.

[mikehardy]

There is a guide here https://github.com/ankidroid/Anki-Android/wiki/Contributing

Please realize that as you're new here you have just effectively entered a virtual office building, come in to the office where all the volunteers congregate when they have time, and started making assumptions about difficulty while requesting things. Read the documentation we provide (equivalent of listening first) and then give it a shot.

This could probably be added as a feature and I've provided a lot of information above. Good luck

[timrae]

FYI, here is the plugin app I was talking about:

https://github.com/jkennethcarino/AnkiEditor

[david-allison-1]

I'm looking to start making headway with this tomorrow.

@mikehardy Is TypeScript an acceptable language for this, or would you prefer pure JS to avoid additional compiler/ecosystem dependencies? I haven't done JS/TS in a few years now (and historically avoided Web Dev) so I'm not fussed.

[mikehardy]

Oh interesting. I'm all typescript for my dayjob now, so if I were going to do anything in javascript, I'd do typescript. I guess I was thinking this would be more of a drop-in android module though - just to start I'd see if there was any way to merge the editor work in AnkiEditor from @jkennethcarino - as far as I know that is tested + working?

[david-allison-1]

Got a proof of concept working: Screenshot

How would you prefer me to get this into a PR with minimal review hassle for you? It's one that I'll struggle to break into reasonable commits for the initial release. Is it fine to hide behind a debug flag for now?

[mikehardy]

Neat! I trust your judgement, do what you can and I'll review sure
I think you had a comment and deleted it prior but I had a related thought in that similar to Mathjax, if there's an editor in upstream already, for web technologies (like mathjax, or a typescript editor) we can actually bundle the exact upstream item with the right containment. For Mathjax we just copied the directory, for instance. You may have already moved well beyond that, but it's just a thought

[david-allison-1]

I was going back and forth on the implementation details as I dug into the code. Did a complete 360 on the deleted comment and it wasn't worth keeping. Current thought process: "recode the custom WebView and Button components and keep the HTML editing as it is".

It's possible, it works. I'll aim to have it up for review around this time next week.

[sudomain]

david is there a TargetAPI for your proof of concept? My recent PR for adding cloze deletions only applies to api 26 (Android 6+) and I would like to contribute code (possibly to your editor) that does the same thing for all api levels

[mikehardy]

@sudomain looks like the cloze action callback stuff is API23 or higher https://github.com/ankidroid/Anki-Android/pull/5950/files#diff-dae57b84b54c26dfe59f24aa91d21e45R1642 - not to discourage features, just to say it's pretty widely applicable - that is Android 6 but I just checked and out of 1.5 million devices or so, only around 75,000 (5%) are between API15-API22 (those excluded).

Quite surprisingly (for me) almost 1 million of our devices are already on Android 9 (600k) and 10 (375k), with the rest being scattered semi-asymptotically down after that, 150k on Android 8, 100k each on 7 and 8.1, on down from there.

All just FYI

[david-allison-1]

david is there a TargetAPI for your proof of concept? My recent PR for adding cloze deletions only applies to api 26 (Android 6+) and I would like to contribute code (possibly to your editor) that does the same thing for all api levels

I saw the PR, a "nice code" doesn't add value to a review, but "nice code" 😺

I'll plan to integrate it directly with the main Anki codebase. Currently targeting API Level 15 with 1 Lollipop and one Nougat-specific API. Getting the Cloze deletion code into the editor is a personal goal, but I'll see if I can make the extensible and will let people go wild (with the plan of opening it up to users/plugins in the future).

Working on this is currently behind the following, I expect I'll get back to polishing the below in an hour or so, and hopefully writing some code for this PR tomorrow:

• https://github.com/ankidroid/Anki-Android/pull/5949

[sudomain]

@mikehardy Good to know. Thank you. I'm relatively new to android dev and correct me if I'm wrong, but I think those cloze actions have a minimum API23 due to the use of ActionMenu.Callback. If David's editor doesn't use ActionMode.Callback then I might be able to reuse the code that handles counting and inserting cloze deletions from that PR.

@david-allison-1 thanks! I'll look out for your PR and see if I can lend a hand

[david-allison-1]

I'll see if I can get this in on tomorrow/Sunday. It's been much less work than I expected.

What features are 'must haves' for the initial commit?

I'm planning:

• Bold/Italic/Underline
• Remove Formatting
• Horizontal Line
• Cloze (if available)
• Lists (bulleted/normal)
• Justify
• Ability to view (but not edit): LaTeX/Image/Audio/Media.
• Keyboard Shortcuts
• View HTML

---

For later:

• Media (probably time to discuss retiring the multi-editor if this goes well, but needs design)
• Font Selection
• Colours (Need to find a reasonable colour picker control)

I'm not the biggest user of media, and the above will do me just fine for now.

I feel the sample editor has too many items in the ScrollView, which hinders usability, so don't want to add them all unless there's a push from the community.

[mikehardy]

Honestly, anything would be great if it were extensible and that list seems amazing.
I would add one thing though - the ability to turn it off and edit raw. I think most people are going to want this (based on popularity + requests) so having it be the default is what I would choose, but having the option to bail out and just use a raw text input is important I think

I'm excited!

[sudomain]

Please let me know if I don't know what I'm talking about, but if I wrap the new code for counting cloze references in a public int, then could it be used by the ActionMode as well as David's editor? That's the idea I was trying to convey in my other messages.

[david-allison-1]

@sudomain

Thanks!

I accept an int, but I won't have a reference to the NoteEditor, so it'll need to be either a class that I can instantiate with data that I have (example: a collection of the fields of the note and their current values, and a Context).

• I'd need to make the ActionModeCallback public static, or a non-nested public class if we want to reuse it
  
  
  
  • Extract isClozeType
  
  
  • Obtain/provide a list of fields instead of using mEditFields, these can't be tied to the NoteEditor UI
  
  
• It would need to act on a custom interface, rather than directly accepting a FieldEditText, I currently have a VisualEditorWebView, but can easily write an adapter to provide you with the data that you need. No need for selection logic, I'll handle that.

---

Spitballing my desires (using functional notation, these aren't hard requirements, but what I'd like from the functionality. Let me know if this is enough to go by):

I want to instantiate the ActionModeCallback and provide a void-> void which you can call at any time to tell me "the user wants to instantiate a cloze at the current position in the editor.

These don't have to be passed in via the constructor, the class could be non-static and I could override some abstract methods with the signatures

I also want a method somewhere with signature: void -> int that I can call to get the index that I can currently use when I want to add a cloze without going through the ActionMode.

Sorry for the brevity in the above, let me know if you need elaboration.
Here's a smiley: 😀 and a unicorn: 🦄.

[david-allison-1]

Quick update: It's coming along nicely. Slowly getting rid of todos.

I don't think "undo" will be able to make it to PROD unless it's under an "Advanced, and known buggy" feature flag. The note editor uses contentEditable internally, and that hasn't got great support for undo. It mostly works, but it's a bit janky (an undo undoes a lot more text than ideal), which isn't a great experience for the users.

I'm not happy with image editing yet, haven't tried audio/media, but it's a start.

[sudomain]

tbh I didn't understand a lot of that, but I guess that's ok. For my next PR, I was hoping to add a keyboard shortcut for in NoteEditor.java around here to add a cloze deletion using CTRL + SHIFT +C like desktop has. If messing with the cloze deletion code of NoteEditor is going to get in your way, then I'll hold off on that.

[david-allison-1]

Do whatever you want! Don't worry about me.

I probably went overboard in the last post, In the most simple terms:

• Have a way to notify me that the user clicks "Cloze Deletion" in from the ActionMode
• Have a way for me to pass in my current state, and get the index of the next cloze as an int

[david-allison-1]

Quick design question (I haven't done JS since jQuery was a thing and consider myself inexperienced):

(Note: jQuery is still a thing, and the editor's JS component uses it 🤷)

---

I have a DOM element (image) and I want to get a reference to this in Android.

Because: If a selection changes in the WebView, I want to avoid a race condition, and perform the action on the item which was selected at the time. Therefore I want to send: action(elementId, data...) back to the JS to execute.

To my understanding, you can't uniquely identify a DOM element by default, and I don't want to modify existing ids on the page.

I'm going to generate a GUID in JS, assign it to the element, and pass that in. Is there a better way that you've encountered?

[mikehardy]

I'm a react/react-native/reactxp person, so all that is hidden from me, sorry ;-). jQuery is still a thing but I don't directly manipulate DOM trees so I've got no feedback sorry

[david-allison-1]

Font selection won't be implemented in V1 due to complications with obtaining available fonts.

I won't be supporting night mode if the .night_mode css class is not defined as there are complexities in handling the colour inversion code.

@mikehardy would you be happy with a second dependency for a native colour picker?

---

At this point, my TODO list stands at:

• [x] Fix Icon
• [x] Test Video
• [x] Test MathJax
• [x] Improve UI code after I fix up #5988
• [x] Fix TransactionTooLargeException via file transfer.
• [x] Night Mode
• [x] Remove undo
• [x] Text background (highlighting) and colour (maybe)

[mikehardy]

Sorry I haven't had time to do design review on this at all - I haven't even looked at it! 😞

• dependencies are okay but ideally they are well-maintained and small in size of course, so it depends on the dependency
• TransactionTooLargeException - maybe this could be generalized I needed the same here (this diff might be unstable unfortunately as I force-push a lot): https://github.com/ankidroid/Anki-Android/pull/5151/commits/956d750c1cd31e3645188f240b8625bd9e1ea7b9 (it's the commit on #5151 with "Save/restore temp Model JSON, use in Previewer if passed" as a commit title anyway - the title is stable)

[david-allison-1]

At this point, I've ticked off all my todo list items, and a few nice-to-haves. It's ready for design review, and I'm happy with it as it is now.

My main "nice to have" are:

• [ ] Image Selection State - Additional testing, determine what we want to occur when text and images are selected (probably move back to normal insertion mode).
• [ ] More Keyboard Shortcuts
• [ ] Persist the color picker selections
• [ ] Cursor positioning when inserting MathJax/Cloze.
• [ ] Bring back undo as a "Known Buggy" advanced preference

If there are any suggestions to make it easier to review, I'll do them. I've started rebasing the changes to bring more of a narrative into the commits, but it'll be large no matter what.

After the review, I'll add appropriate tests to bulletproof the design

[mikehardy]

Awesome! You might try the tools/parallel-release.sh script and generate parallel releases ('.A', '.B' and so forth) and you could maybe attach .E here so people could safely download a thing for a test drive. That would make it easy for me as well (easier than pulling and building). I'd like to play with it while reviewing. Excited to go through it

[david-allison-1]

I'm a little out of my depth here. The .sh files are coming down with CRLF endings.

I've added *.sh text eol=lf. To .gitattributes. Committed and ran git add --renormalize . and nothing is affected.

git config --global core.autocrlf false

I've currently manually fixed the line endings, I presume they work fine on your machine? I'm unsure where to go from here to fix it for the future. The files seem to have CRLF endings in git raw, but that might just be chrome being nice.

[mikehardy]

I've always run that on a macOS or linux machine and they work fine 🤔 🤷‍♂️

[david-allison-1]

It's pretty borked on Windows besides line endings. perl can't delete the .bak files which are created on rename, they're included in the build and fail it.

And parallel-package-release.sh deletes itself on execution

[david-allison-1]

OK, skipped the script and got it working. Is there a version name that you're after? will alpha70b do?

[mikehardy]

Someone needs the linux subsystem for windows ;-), or a Docker ubuntu host

I know I know, you're working on a surface so that's probably a no go. Feel free to do whatever you need in the file to get it to work

how 'bout wysiwyg ?

[david-allison-1]

I think 2020 might be the year of the Linux desktop (for me 🤣).

WSL just doesn't feel 'there' yet. Tried Ubuntu it a few minutes ago and sudo apt install fails.

[mikehardy]

Have thoroughly enjoyed Ubuntu 18 (and now 19) on my Dell XPS15. They support linux formally so the hardware all just works as much the kernel works (I add that last bit because an otherwise standard Intel wireless chip I swapped into it has had some issues but it's not like a Sony laptop where you're always struggling to light up the hardware). 8 cores and 32GB of RAM isn't so crazy to purchase now and lets you use windows (and macos) in a VM easy so everything pretty much is possible and crazy fast

[david-allison-1]

https://github.com/david-allison-1/Anki-Android/releases/download/v2.10wysiwyg1/AnkiDroid-vised.apk

[david-allison-1]

Have thoroughly enjoyed Ubuntu 18 (and now 19) on my Dell XPS15. ...

You're not wrong. I'm cutting costs at the moment due to COVID, will see what can be done when I can be a little more free with money ;)

[david-allison-1]

Main (critical) feedback so far:

• [ ] format-paint would be useful
• [ ] Note types only take css, but not the template, so styling is partially applied. Consider either copying the elements by jsoup (of the first usage of the template), and/or allowing a preview. (DavidA)

[github-actions[bot]]

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

[nicolas-raoul]

FYI: https://www.kickstarter.com/projects/sunnyhirai/add-android-support-for-the-slate-wysiwyg-editor

[mikehardy]

Very interesting (shows the challenges) but looks like they're not going to make the funding goal. I think we have it working here but likely only a subset of what they want, but that's all we need?

[AdrienLemaire]

@david-allison-1 You mentioned markdown in https://github.com/ankidroid/Anki-Android/issues/5430#issuecomment-608480356.
Will it be possible to sync it with markdown cards made with https://ankiweb.net/shared/info/1030875226 ? Not being able to edit cards created in markdown from the phone is my biggest problem at the moment (due to html modifications not being applied to the data-original-markdown attribute value, html modifications are last when I convert back to markdown).

I'm also having issues with anki converting linebreaks to <br> tags within my html tags like ul/li, adding unwanted linebreaks to the result, so Android support for markdown would be really awesome :tada:

[jakabbalint]

Hello guys. I am totally new to open source development. I am a ux designer, and an active user of Anki, and I would like to somehow help to improve Anki's user experience. I have created an interactive prototype to deliver some inspiration about how color picking could work seaminglessly. It is not fully functional, but can showcase the concept. It is available from here.
Please let me know guys what do you think.

[mikehardy]

That does look pretty cool @jakabbalint - nice UX tool too! I boldly just tried clicking + then add card then the field and it all showed up :-). That does not seem too much farther than the current implementation but @david-allison-1 is the master of that thing so he would know best of course

[david-allison-1]

No such thing as a master!

Looks great, let's split it out into a new issue and do it.