Add support for wrapping with text

[ijgnd]

Add support for wrapping with text

[ijgnd]

Today I worked on "editor: apply font color, background color, custom class, custom style". One reason (besides using the js library rangy for applying classes) was that I wanted better night mode support so for each class you can now enter a regular style and a night mode style. Accordingly the main table in the settings window has two columns for this. Two columns works well for "text before" and "text after".

So I also added an option for text wrapping, see this commit.

So you were right all along. Maybe it's still interesting for you?

If you are interested: You would have to check if special characters like backslashes are properly handled. I save the text from the guis to a python dict that I store in a pickle file. When inserting into the editor I use json.dumps(), see here.

If you want to test it: an ankiaddon-file is here. (only works on 2.1.22 or higher).

for building the add-on I use my own short build-script from here. This might be useful because 9 ui-files need to be processed for this add-on.

Applying the text wrapper option was quite easy after I had re-understood my original code. The code is still mostly unchanged because cleaning it up properly would have taken even longer - if you look at the commits history you'll see many changes from today but it's mostly cosmetic like more clear function names or file names. So I need to live with the limitations of my old config and that values are stored in keys with unexpected names ...

If you find bugs or have good ideas for the defaultconfig please let me know.

btw: Do you still have the problem described in #5?

[ijgnd]

I only tested on my main computer (linux) and just saw that my way of loading/initializing rangy doesn't work in windows. So maybe it also doesn't work on macos either or on other computers at all. So don't waste your time with the current version.

[hgiesel]

Hi,

I just tested it. It works... I think?

When creating I only have three options:

• Backcolor (via class)
• Forecolor
• class (other)
  I cannot create any new Text wrappers.

However i noticed that there are already two present (which use some Set Randomizer syntax, haha).
I tested them and they work perfectly.

[ijgnd]

tldr: new version to test is here. Does this work for you? Thanks for testing & feedback.

 

When creating I only have three options:

Thanks. I forgot to update the list that's loaded into the listwidget where you can select which category to create. This was a quick fix.

 

rangy problems ...

"rangy" refers to this js library which among other things offers to apply classes to selected text.

When I run Anki in Windows from the console with the add-on version from last night when I open a window with an editor I get these error messages:

JS error /_addons/1899278645/web/rangy-classapplier.js:15 Uncaught TypeError: Cannot read property 'createModule' of undefined
JS error /_addons/1899278645/web/rangy-core.js:10 Uncaught Error: required module 'ClassApplier' not found
JS error :41 Uncaught TypeError: rangy.createHighlighter is not a function
JS error :41 Uncaught TypeError: rangy.createHighlighter is not a function
JS error :41 Uncaught TypeError: rangy.createHighlighter is not a function
....

Last night I added the rangy js files into the webview with the 2.1.22-webview_will_set_content-hook, see here. The js that prepares rangy was here.

Because of my limited js knowledge today I decided that it's probably quicker to just work around the problem by extending aqt.editor._html. Side effect: It works in most old Anki 2.1 versions. If you have an idea all your fixes are still welcome.

 

Today I also made two small fixes and I split up the file that held the code for GUIs into separate files. Some things are still missing for a finished version like a sensible default config, better updating of the templates, etc. (apart from the need of a general reorganization ...)

I'm also thinking about extending the text wrapper function so that you can directly set the values for "before" and "after" for all entries in one separate dialog that avoids the main config dialog. Then it should be more useful for less permanent entries.

[ijgnd]

I felt bad about the solution from last night to load the js library. So I changed the code again. This time I'm using an async js function that's called from a python function that's called by a new style hook. So hopefully this is futureproof and works. Probably the last sentence was unclear. I'm referring to this code.

Maybe you can quickly see if this is a real solution or if this just works by accident ... I'll upload a compiled version later.

[hgiesel]

I'll be happy to test, but I'm afraid I also don't know about best practices for such a scenario. Just a few thoughts:

1. I remember trying to include some JavaScript into note templates before. I tried this using the collection folder.
2. As I see it, this new solution would only work on Desktop? Or am I wrong?

[ijgnd]

The new solution should still work on mobile. My changes only concerned how the custom css and js is loaded into the editor. I uploaded an ankiaddon file here of the version I talked about yesterday that contains some more enhancements and doesn't discourage you from using inline styling anymore. Maybe you could test if it works on your Mac? Thanks.