laurent22 / joplin

Joplin - the privacy-focused note taking app with sync capabilities for Windows, macOS, Linux, Android and iOS.
https://joplinapp.org
Other
46.03k stars 5.01k forks source link

Toggling between markdown and WYSIWYG editor makes rendered markdown ignore custom stylesheet for rendered markdown #5907

Open NathanAuckett opened 2 years ago

NathanAuckett commented 2 years ago

I have custom CSS style-sheet set for the rendered Markdown only as I needed text to copy and paste out with a white background but I prefer dark theming for everything else. As a result, I'm using a dark theme with a white themed custom stylesheet for the rendered markdown view.

Swapping from the markdown editor, to the WYSIWYG editor, and then back makes the rendered markdown viewer ignore my stylesheet and go back to the dark theming of the rest of the UI. To resolve this I must simply restart Joplin. Then it goes back to using my custom style-sheet.

Not exactly a huge problem but seems like a bug non-the-less

Environment

Joplin version: 2.6.10 Platform: Windows OS specifics: Windows 10 21H1

Steps to reproduce

  1. Set custom stylesheet for markdown renderer only. Ensure it changes something big like the background.
  2. Swap to WYSIWYG editor.
  3. Swap back to markdown editor.

Describe what you expected to happen

I'd expect the markdown editor to load and continue using my custom stylesheet when I swap back to it.

graphit0 commented 2 years ago

Could you provide this custom stylesheet so it would be easier to replicate the behaviour?

NathanAuckett commented 2 years ago

Hi,

Sure thing here you go:

/* Main background and text colour */
body {
    color : #000000;
    background-color : #FFFFFF;
}

/* Bold colour to black */
b, strong{
    color : #000000;
}

/* Link colour */
a {
    color : #0066CC;
}

/* Checkbox highlight colour reversal. Checked should be dark, unchecked should be light*/
.md-checkbox .checkbox-label-checked {
    opacity: 1;
}
.md-checkbox .checkbox-label-unchecked {
    opacity: 0.5;
}
graphit0 commented 2 years ago

I could reproduce it on linux, 2.6.10. I would add to the main description that rich text editor keeps the stylesheet, even though the markdown viewer is ignoring it.

As it is certainly a minor bug, use case is quite niche, the cause is unclear, logs show nothing notable (provided below), we gotta see if there are more users experiencing the same or similar behaviour. I wonder what css exactly are ignored? If you continue to use the same workflow, could you document those css causing the problem?

Thanks for reporting


Here's a small illustration for the history

https://user-images.githubusercontent.com/44114323/147351476-04aa58c2-c585-4762-af28-626a5e52baf1.mp4

Logs

Behaviour: Initial toggle to rich text editor after which the stylesheet is ignored

14:58:59: CommandService::execute: toggleEditors
useMessageHandler.ts:21 Got ipc-message: noteRenderComplete undefined
Logger.ts:217 14:58:59: models/Setting: Saving settings...
Logger.ts:217 14:58:59: PluginRunner: Got message (3): joplin.settings.value inlineImages
Logger.ts:217 14:58:59: PluginRunner: Got message (3): joplin.settings.value imageHover
Logger.ts:217 14:58:59: PluginRunner: Got message (3): joplin.settings.value imageHoverCtrl
Logger.ts:217 14:58:59: PluginRunner: Got message (3): joplin.settings.globalValue markdown.plugin.mark
Logger.ts:217 14:58:59: PluginRunner: Got message (3): joplin.settings.globalValue markdown.plugin.insert
Logger.ts:217 14:58:59: PluginRunner: Got message (3): joplin.settings.globalValue markdown.plugin.sub
Logger.ts:217 14:59:00: PluginRunner: Got message (3): joplin.settings.globalValue markdown.plugin.sup
DevTools failed to load source map: Could not parse content for file:///tmp/.mount_Joplinb204sy/resources/app.asar/gui/note-viewer/pluginAssets/mermaid/mermaid.min.js.map: Unexpected end of JSON input
Logger.ts:217 14:59:00: PluginRunner: Got message (3): joplin.data.get 
['folders']

{fields: Array(2), page: 1}
Logger.ts:217 14:59:00: PluginRunner: Got message (3): joplin.settings.value extraCSS
Logger.ts:217 14:59:00: PluginRunner: Got message (3): joplin.settings.value activeLine
Logger.ts:217 14:59:00: PluginRunner: Got message (3): joplin.data.get 
['folders']

{fields: Array(2), page: 2}
Logger.ts:217 14:59:00: PluginRunner: Got message (3): joplin.settings.value alignIndent
Logger.ts:217 14:59:00: PluginRunner: Got message (3): joplin.settings.value checkbox
Logger.ts:217 14:59:00: PluginRunner: Got message (3): joplin.settings.value links
Logger.ts:217 14:59:00: PluginRunner: Got message (3): joplin.settings.value clickCtrl
Logger.ts:217 14:59:00: PluginRunner: Got message (3): joplin.settings.value clickAlt
Logger.ts:217 14:59:00: PluginRunner: Got message (3): joplin.settings.value scanImgChangePeriod
Logger.ts:217 14:59:00: models/Setting: Settings have been saved.