Support thread for Markdown input addon.
Reworking the functionality and adding buttons and badges, most of the rough edges now filed away. Please see addon page for details.
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:
-
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.
-
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;
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.
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.
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:
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.
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
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).
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.
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.