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.

[mac]

Two questions

1. Is it possible to display both the markdown editor and the visual editor by default, simultaneously?

2. 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.

[TRIAEIOU]

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()')]
        )

[harshcurious]

Thanks for the awesome add-on, but there were a few issues I want to point out:

1. 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

2. 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.

[TRIAEIOU]

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 and Browser 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 into user_files
  • Edit cm.css in user_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 inside user_files will get overwritten on addon update). There is also mdi.css in the addon directory but that contains layout information so it is not recommended to edit.
• 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 and Browser windows themselves (i.e. everything outside of the Markdown text area) I recommend CSS Injector - Change default editor styles.