fix conflict between CKEditor build content style and externally provided content style (which are not needed when build CSS is available), #1590

src/public/app/widgets/type_widgets/read_only_text.js

@@ -67,6 +67,11 @@ export default class ReadOnlyTextTypeWidget extends AbstractTextTypeWidget {
     }
 
     async doRefresh(note) {
+        // we load CKEditor also for read only notes because they contain content styles required for correct rendering of even read only notes
+        // we could load just ckeditor-content.css but that causes CSS conflicts when both build CSS and this content CSS is loaded at the same time
+        // (see https://github.com/zadam/trilium/issues/1590 for example of such conflict)
+        await libraryLoader.requireLibrary(libraryLoader.CKEDITOR);
+
         const noteComplement = await treeCache.getNoteComplement(note.noteId);
 
         this.$content.html(noteComplement.content);

src/views/desktop.ejs

@@ -63,8 +63,6 @@
 <link href="libraries/bootstrap/css/bootstrap.min.css" rel="stylesheet">
 <script src="libraries/bootstrap/js/bootstrap.bundle.min.js"></script>
 
-<link href="libraries/ckeditor/ckeditor-content.css" rel="stylesheet">
-
 <!-- Include Fancytree skin and library -->
 <link href="libraries/fancytree/skin-win8/ui.fancytree.css" rel="stylesheet">
 <script src="libraries/fancytree/jquery.fancytree-all-deps.min.js"></script>

src/views/mobile.ejs

@@ -127,8 +127,6 @@
 <link href="libraries/bootstrap/css/bootstrap.min.css" rel="stylesheet">
 <script src="libraries/bootstrap/js/bootstrap.bundle.min.js"></script>
 
-<link href="libraries/ckeditor/ckeditor-content.css" rel="stylesheet">
-
 <script src="app/mobile.js" crossorigin type="module"></script>
 
 <link href="stylesheets/themes.css" rel="stylesheet">