Fix for improper HTML Rendering style upon note switching

packages/app-desktop/gui/NoteEditor/NoteBody/CodeMirror/CodeMirror.tsx

@@ -671,6 +671,7 @@ function CodeMirror(props: NoteBodyEditorProps, ref: any) {
  if (!webviewReady) return;
 
  const options: any = {
+ noteId: props.noteId,
  pluginAssets: renderedBody.pluginAssets,
  downloadResources: Setting.value('sync.resourceDownloadMode'),
  markupLineCount: editorRef.current?.lineCount() || 0,

packages/app-desktop/gui/note-viewer/index.html

@@ -78,6 +78,7 @@
  }
 
  let pluginAssetsAdded_ = {};
+ let currentNoteId = ''
 
  try {
  const contentElement = document.getElementById('joplin-container-content');
@@ -154,15 +155,25 @@
  setPercentScroll(percentScroll_);
  }
 
- // Note that this function keeps track of what's been added so as not to
- // add the same CSS files multiple times.
- function addPluginAssets(assets) {
+ // This function now keeps a track of the css or javascript files loaded as well switching of notes. 
+ // Recreating of div#joplin-container-pluginAssetsContainer on loading a new note ensures that plugin
+ // assets belonging to current note are only loaded into view to avoid css styling conflict issue.
+ function addPluginAssets(noteId, assets) {
  if (!assets) return;
 
- const pluginAssetsContainer = document.getElementById('joplin-container-pluginAssetsContainer');
-
- const processedAssetIds = [];
-
+ let pluginAssetsContainer = document.getElementById('joplin-container-pluginAssetsContainer');
+
+ if (currentNoteId !== noteId) {
+ pluginAssetsContainer.remove();
+ currentNoteId = noteId;
+ pluginAssetsAdded_ = {};
+ const joplinContainerBody = document.getElementById('joplin-container-body');
+ const newPluginAssetsContainer = document.createElement('div');
+ newPluginAssetsContainer.id = 'joplin-container-pluginAssetsContainer';
+ joplinContainerBody.insertBefore(newPluginAssetsContainer, joplinContainerBody.firstChild);
+ pluginAssetsContainer = newPluginAssetsContainer;
+ }
+
  for (let i = 0; i < assets.length; i++) {
  const asset = assets[i];
 
@@ -385,7 +396,9 @@
  setPercentScroll(event.options.percent);
  }
 
- addPluginAssets(event.options.pluginAssets);
+ if (currentNoteId === '') currentNoteId = event.options.noteId
+
+ addPluginAssets(event.options.noteId, event.options.pluginAssets);
 
  if (event.options.downloadResources === 'manual') {
  webviewLib.setupResourceManualDownload();

packages/renderer/MdToHtml.ts

@@ -378,12 +378,13 @@ export default class MdToHtml {
  }
 
  private async outputAssetsToExternalAssets_(output: any) {
- for (const cssString of output.cssStrings) {
+ const newOutput = { ...output, pluginAssets: output.pluginAssets.slice() };
+ for (const cssString of newOutput.cssStrings) {
  const filePath = await this.fsDriver().cacheCssToFile(cssString);
- output.pluginAssets.push(filePath);
+ newOutput.pluginAssets.push(filePath);
  }
- delete output.cssStrings;
- return output;
+ delete newOutput.cssStrings;
+ return newOutput;
  }
 
  // The string we are looking for is: <p></p>\n
@@ -582,7 +583,6 @@ export default class MdToHtml {
  let cssStrings = noteStyle(options.theme, {
  contentMaxWidth: options.contentMaxWidth,
  });
-
  let output = { ...this.allProcessedAssets(allRules, options.theme, options.codeTheme) };
  cssStrings = cssStrings.concat(output.cssStrings);