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.
Two questions
-
Is it possible to display both the markdown editor and the visual editor by default, simultaneously?
-
The prev/next keyboard shortcuts are not working for me. Iâm referring to these:
{
"Field input": {
"Next field": "Ctrl+PgDown",
"Previous field": "Ctrl+PgUp"
}
}
For more context:
- Iâm on MacOS and using the external magic keyboard
- Iâm pressing Ctrl + fn + up (or down)
- And Iâm doing this while focused on a field in markdown mode
Iâve tried using a different shortcut value, but still canât get it to work.
At the moment there is no setting for showing both Markdown and rich text per default, adding that setting is simple enough though. However the focusing is a bit trickier, but probably solvable, but without some trickery the focus ends up in the rich text edit. I can upload a version with config option to have both open per default, however focus will be in the rich text edit.
Regarding the next/prev field - could you run Anki from the command line and see if you get any error output? Or install AnkiWebView Inspector and see if you get any errors in the javascript console? The shortcuts themselves should fire as they are on the python side:
shortcuts.append(
[QKeySequence(cfg[FIELD_INPUT][SC_NEXT]),
lambda _ed=ed: ed.web.eval('MarkdownInput.cycle_next()')]
)
shortcuts.append(
[QKeySequence(cfg[FIELD_INPUT][SC_PREV]),
lambda _ed=ed: ed.web.eval('MarkdownInput.cycle_prev()')]
)
Thanks for the awesome add-on, but there were a few issues I want to point out:
- When I first installed the add-on I couldnât figure out how to make it work. While the details you provide on the addon page is great for a regular user, I almost gave up on it trying to figure out where to start. My suggestion would be a step-by-step tutorial, with the following:
- How to install the add-on
- What changes will happen in the application because of the addon?
- The difference between the Rich-text editor, markdown editor and HTML editor. Which one to use when.
- Styling. Anki has separate CSS styling for the codemirror, editor and note types. What to do with each of them
- I couldnât figure out how to get code highlighting in my cards. What should I add to my card styling section? I tried adding:
@import url("_styles_for_syntax_highlighting.css");
which was used in the older Syntax Highlighting addon.
Hi, thanks for the feedback!
When you say âcode highlighting in my cardsâ where do you mean?? Do you mean when editing in a âMarkdown input fieldâ or when reviewing?
- For the actual Markdown input fields/dialog in the
Add
andBrowser
windows, syntax highlighting (i.e. Markdown syntax) should be enabled by default (if it isnât something is wrong, if so please let me know). You can change the âshippedâ styling by:- Create a subdirectory in the addon folder named
user_files
- Copy
cm.css
in the addon directory intouser_files
- Edit
cm.css
inuser_files
(the addon will look for<addon dir>/user_files/cm.css
and if that doesnât exist it will load<addon dir>/cm.css
, note that anything that is not insideuser_files
will get overwritten on addon update). There is alsomdi.css
in the addon directory but that contains layout information so it is not recommended to edit.
- Create a subdirectory in the addon folder named
- If you mean syntax highlighting for code blocks in the Markdown editor at the moment that isnât implemented but I note that it shouldnât be too hard to add, from the CM dingus
Markdown code block highlighting
import {basicSetup, EditorView} from "codemirror" import {markdown} from "@codemirror/lang-markdown" import {languages} from "@codemirror/language-data" // The Markdown parser will dynamically load parsers // for code blocks, using @codemirror/language-data to // look up the appropriate dynamic import. let view = new EditorView({ doc: "Hello\n\n```javascript\nlet x = 'y'\n```", extensions: [ basicSetup, markdown({codeLanguages: languages}) ], parent: document.body })
- For the styling of the HTML on reviewing you should modify the note template you are using.
- For the styling of the
Add
andBrowser
windows themselves (i.e. everything outside of the Markdown text area) I recommend CSS Injector - Change default editor styles.