Markdown input [support thread]

[TRIAEIOU]

Support thread for Markdown input addon.

[TRIAEIOU]

Reworking the functionality and adding buttons and badges, most of the rough edges now filed away. Please see addon page for details.

[kvn1351]

First of all, thanks a lot for this addon. It’s something I’ve really missed and I planned on doing it myself this summer. So thanks a lot.

There’s one thing that’s broken and another that I don’t like:

1. As you can see in the screenshot, the buttons aren’t not placed correctly. I’ve fixed it by placing the button in the correct spot and I’ve added some padding (the first button in the screenshot).
   So instead of adding the MD button to .rich-text-badge (which is a button btw) it should be added to .field-state.
   

2. Changing this wasn’t fun, because you’ve minified everything in one single js file. Please keep your addon’s code unminified and only minify libraries etc. Or, if possible, leave the source so that we can minify it after changing stuff.

Thanks.

Edit:
css used for the outermost span of the md button:
padding-top:0.21em;
margin-left:-0.1em;

[kvn1351]

This happens quite often too. i.e. that the editor can’t load because of this error.

For my own addons, I’ve simply used setTimeout() with 50-150ms to fix this issue. This works great because it will set it really far back in the JS event queue.

A more elegant solution I suppose would be to use an observer.

Otherwise, you could use the exposed Svelte runtime with lifecycle.onMount. But there’s really no reason to.

[TRIAEIOU]

Thanks

The source is available on GitHub, linked in the addon description, granted the link in the addon description doesn’t say “GitHub” so I’ll update that later.

Regarding the badge - the whole insertion is rather “hacky” (there is also some significant “hackyness” to the focus handling as well). The current placement “inside the rich text badge” is the result of trying to get the shading to sort of work while at the mean time keeping alignment to the right (I can’t remember the exact details, I just remember I mucked about a bit). It seems to work fine on my Windows machine so I am guessing it’s a setup or possibly OS thing (which is interesting since it’s all JS so there shouldn’t be that much of a difference):

Current version on my machine:

Moving the badge into focus-field, no other changes

The same goes for the badge alignment, the first add window screenshot above is with the badge inside .rich-text-badge, the second with the badge inside .focus-field, no changes made to the shipped alignment.

Preferably I would understand hot to properly interface with the Svelte code, I see you suggested lifecycle.onMount below, I’ll look into that when I have some time.

In the mean time if you are knowledgeable in Svelte I am very open to hints on how to “correctly” interface with the Svelte code (mainly in editor.ts) as the current hacks are less than ideal for both elegance and maintainability.

[TRIAEIOU]

This seems to be either a setup/OS/machine issue or some other addon interaction? I have been running the recently released version for almost a month on my own computer and haven’t experienced anything like the error you are presenting. The error seems to be occurring in the Svelte code (I don’t ever call context.get() so the origin of the error should be somewhere else). The addon doesn’t create or insert the CodeMirror instances until they are about to be shown, i.e. on load only the badges and shortcuts are inserted into the DOM reduce unnecessary overhead. Are you running with "Default field state": "Markdown"? Which version of Anki are you running? I don’t get the same source tree at all:

[TRIAEIOU]

For info I have reworked some of the interface with the Svelte code to make it work on *nix. It also seems to work in a macOS VM but if it’s a timing question I may not catch that given the snail pace of the VM. Badge alignment I leave aside until I get some useful input.

[kvn1351]

Sorry for not getting back to you. I’m having exams soon.

Anyways, I’ve tested the new version and it’s much better. Thanks a lot. As for the alignment, I got it perfect with this CSS (some of your inline styles like margins etc have to be removed):

.markdown-input-badge span.badge {
    top: 0.09em; <<<<<< This is because I find that it looks better when slightly lower than center.
    position: relative;
    vertical-align: var(--icon-align, middle);
}

.markdown-input-badge svg{
    margin: 0 0.35em;
    fill: currentColor;
    vertical-align: unset;
}

instead of

One thing that might account for the alignment issues is that the parent of this bar uses flexbox. Thus the SVG can get squeezed. Hence the vertical-align: unset; to stop this from happening.

Also, it’s still bugging the editor from loading sometimes but as you’ve stated. It’s possibly some addon interaction. However, that would be the only one out of 10+ editor add-ons.

System:
Version ⁨2.1.54 (b6a7760c)⁩
Python 3.9.7 Qt 6.3.1 PyQt 6.3.1
MacOS

[TRIAEIOU]

Ok, here’s an non-tersed version of field_input.js, if you use that version we may be able to get some more info on the source of the error (the large size is since it contains CM6 and unified.js with extensions to convert HTML ⇔ MD).

[TRIAEIOU]

I have reworked the badge insertion (cloning the rich text badge and changing only the necessary things, it seems to play well with the Svelte generated badges), for me this works well on Windows, Ubuntu (VM) and macOS (VM). I have also updated the non-tersed gist. Let me know if this version causes alignment issues, also I would be interested on more info regarding the failure to load if it happens again.

[kvn1351]

Hi, sorry for the late reply as usual. I’ve tested the new version, the badges are perfect now.

It still doesn’t always let the editor load. I’ll test the gist tomorrow I hope.

Thanks a lot for your efforts and skill.