Plugin: Rich Markdown

I can replicate the issue with the example note you attached. To rule out if there was something else I had configured in Joplin that could be causing the issue, I did a fresh install of Joplin in a VM and did nothing after but install the rich markdown plugin and enable the image rendering option. I still saw the issue happening.

1 Like

@shbach and @CalebJohn, I confirmed the problem happens in Joplin 2.6.10 and Rich Markdown plugin 0.8.1 using long.jex.
Could you open a new bug report issue at Joplin's github about this problem?

2 Likes

@ken1kob and @CalebJohn, I opened one here:

2 Likes

v0.8.2

  • fix: Flickering images/unstable scrolling
    • Thanks to @ken1kob for troubleshooting this and discovering where the mistake was!
    • And thanks to @shbach for reporting the issue and patiently confirming the bug!

This update should be available shortly.

5 Likes

@CalebJohn Unfortunately I'm still seeing the issue with v0.8.2 though it seems to happen less often.

1 Like

v0.8.3

This is another small patch that should actually fix the issues @shbach documented above.

The update is available now.

3 Likes

Definitely seems fixed now, thank you! :slight_smile:

I'm not sure if this is feasible, but similar to displaying images in the editor view, is it possible to add support for displaying mermaid diagrams in the editor view? I make frequent use of mermaid diagrams and adding this would allow me to use the editor view exclusively.

2 Likes

It's definitely on the list. I would like to add support for everything that's rendered. I'm not exactly sure what the implementation will look like, and it's not my number 1 priority for now.

2 Likes

I am not sure who can help me but since I noticed that Richmarkdown can add custom additional css classes I thought it can be used to fix this issue. I notices that a code block does not have a class name assigned to it see the red circled in the image below.

I am trying to get rounded corners in a code block in the markdown editor and although I managed using divs the number of divs can change depending on the note

1 Like

You're not the first to request this. It's unfortunately not possible with the current markdown editor. It doesn't structure elements hierarchically (like is usually done with HTML) but instead handles each line individually. Within this editor it is impossible to to apply a single div element to an entire codeblock.

It might be possible to use some trickery to get different elements for the start and end of a codeblock (which might allow you to get rounded edges), but I'm not sure.

thanks I just thought it was strange that there is a class without any name and thought it could be fixed. Anyways it's not the end of the world. Thanks for your awesome plugin it make Joplin so much better.

1 Like

Feature request:

Would be nice if <kbd></kbd> displayed the contents in a formatted way, like backticks do. Not sure how you would distinguish that - still show the tags, but format the content?

3 Likes

Bug? I've been experiencing this behaviour for months, actually, just hadn't reported it till now.

image

I have noticed that on some lines, trying to highlight the line in order to copy and paste stops at this point, as in the screenshot above. This is even when doing ShiftHome. If I press Home and expect it to be at the start of the line, it actually isn't, it is within the checkbox. If I cut or delete, it leaves behind - [ .

In trying to pinpoint when it happens:

  • Sometimes it is a nested list item, sometimes it is not nested.
  • It seems to be when an item is marked complete. Marking it incomplete allows for selecting the whole row, marking complete again produces the same truncated select.
  • It occurs both if that line is part of a multi-line select or not.
    • For that line, when increasing the select from the line above, it will not select more when reaching the - [ until it gets past it.
    • If increasing the select going up, then likewise it will not select the beginning of the line until you go to the line above.
  • For the lines it occurs on, it seems to not happen if characters are deleted till there are only five, but does occur when a sixth character is added.
  • Changing the indentation of the line seems to make a difference.

Here's a screenshot where the red arrows indicate where this "truncated select" occurs:

The other plugins I have installed are Folding in Code Mirror Editor, Note Tabs, and Simple Backup. Disabling them makes no difference. Disabling Rich Markdown, does fix it. Having Rich Markdown enabled, but disabling "Add additional CSS classes for enhanced customization" also fixes it.

Removing:

/* Checkmark checkboxes: Requires the additional Css option to be enabled */
div.CodeMirror .cm-property.cm-rm-checkbox.cm-rm-checkbox-check {
  display: none;
}
div.CodeMirror .cm-property.cm-rm-checkbox.cm-rm-checkbox-check + .cm-property:before {
    content: "✓";
}

also fixes it, so of course it is an option to just not use this CSS change.

The question though is what could be making this behaviour occur sometimes but not other times?

2 Likes

Not a bug, just a limitation of the editor that Joplin uses (CodeMirror 5). The editor keeps track of everything inside it (including the cursor position), but it doesn't understand everything about css and configuration. What this means is that lines like display: none; can easily confuse the editor. I can't answer why exactly it works on some lines but not on others, but the inexact answer is that it's caused by the CSS tricks that you're using.

I might see if there's something I can do on my end to fix the problem, but it isn't a high priority for me right now. Also at some point Joplin will be moving on to the next version of CodeMirror (6) so this might work itself out then.

Understood, thanks! For now I'll just remove the replacement to the tick character, as it's just a bit of eye candy anyway, and that seems to correct it.

This CSS override was from the help/plugin page, so could be worth adding a note with this one, if anyone else mentions it as an issue.

1 Like

I think I found a bug in 0.8.3:

  • type # text
  • put the cursor like this: # t_ext; press back arrow, the cursor should now be before "t": # _text (for some reason I can't seem to move the cursor there by simply clicking hence this roundabout way)
  • press shift+home and copy to clipboard. I expect the clipboard to now contain # but it looks like the whole line is being copied instead

Noticed this when converting a bullet list to headers

I'm not able to reproduce this on my computer (with and without the additional stylings option).

I tried with some custom CSS that uxamanda shared above, and I was able to reproduce the first issue (not being able to place the cursor by clicking). But for the main issue, it copied nothing instead of copying everything.

I suspect the issue you're seeing is caused by some tricky CSS that is messing up CodeMirror. Can you disable your userchrome and confirm if the bug is still present?

Ah, you're right. I completely forgot I had some custom CSS. Disabling it fixes the problem.
Sorry for the false alert.

1 Like

v0.9.0

  • Revamped context menu
    • Now the context menu will contain specific items (such as "open link") rather than the generic "perform action" (Implemented by @laurent, thank you!)
  • Plugin now supports joplin:// style links, as well as links to other notes with an anchor link (e.g. [link](:/other_note#anchor))
  • Performance improvement when inline images are used
  • Fixed an issue where the extraCSS option was necessary to enable highlight (==) syntax, even when the syntax was enabled in the markdown section
    • From now on, it only needs to be enabled in the Joplin settings to work
11 Likes

That's great. Thanks for all your hard work.