self-hosted/joplin
1
0
Fork 0
mirror of https://github.com/laurent22/joplin.git synced 2024-11-27 08:21:03 +02:00
Code Issues Releases Activity

Desktop: Improved handling of dark and light theme auto-switch

Browse Source
This commit is contained in:
Laurent Cozic 2020-05-20 23:57:59 +00:00
parent a96734f5be
commit f1dbc1d41c
2 changed files with 42 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
ElectronClient/gui/NoteEditor/NoteBody/AceEditor/AceEditor.tsx
View File

@ -515,7 +515,7 @@ function AceEditor(props: NoteBodyEditorProps, ref: any) {
cancelled = true;
clearTimeout(timeoutId);
};
}, [props.content, props.contentMarkupLanguage, props.visiblePanes, props.resourceInfos]);
}, [props.content, props.contentMarkupLanguage, props.visiblePanes, props.resourceInfos, props.markupToHtml]);
useEffect(() => {
if (!webviewReady) return;

50
ElectronClient/gui/NoteEditor/NoteBody/TinyMCE/TinyMCE.tsx
View File

@ -136,7 +136,8 @@ function styles_(props:NoteBodyEditorProps) {
});
}
let loadedAssetFiles_:string[] = [];
let loadedCssFiles_:string[] = [];
let loadedJsFiles_:string[] = [];
let dispatchDidUpdateIID_:any = null;
let changeId_:number = 1;
@ -442,7 +443,7 @@ const TinyMCE = (props:NoteBodyEditorProps, ref:any) => {
return () => {
document.head.removeChild(element);
};
}, [editorReady]);
}, [editorReady, props.theme]);
// -----------------------------------------------------------------------------------------
// Enable or disable the editor
@ -460,7 +461,8 @@ const TinyMCE = (props:NoteBodyEditorProps, ref:any) => {
useEffect(() => {
if (!scriptLoaded) return;
loadedAssetFiles_ = [];
loadedCssFiles_ = [];
loadedJsFiles_ = [];
function contextMenuItemNameWithNamespace(name:string) {
// For unknown reasons, TinyMCE converts all context menu names to
@ -681,6 +683,25 @@ const TinyMCE = (props:NoteBodyEditorProps, ref:any) => {
// -----------------------------------------------------------------------------------------
const loadDocumentAssets = (editor:any, pluginAssets:any[]) => {
// Note: The way files are cached is not correct because it assumes there's only one version
// of each file. However, when the theme change, a new CSS file, specific to the theme, is
// created. That file should not be loaded on top of the previous one, but as a replacement.
// Otherwise it would do this:
// - Try to load CSS for theme 1 => OK
// - Try to load CSS for theme 2 => OK
// - Try to load CSS for theme 1 => Skip because the file is in cache. As a result, theme 2
// incorrectly stay.
// The fix would be to make allAssets() return a name and a version for each asset. Then the loading
// code would check this and either append the CSS or replace.
let docHead_ = null;
function docHead() {
if (docHead_) return docHead_;
docHead_ = editor.getDoc().getElementsByTagName('head')[0];
return docHead_;
}
const cssFiles = [
'node_modules/@fortawesome/fontawesome-free/css/all.min.css',
`gui/note-viewer/pluginAssets/highlight.js/${theme.codeThemeCss}`,
@ -688,20 +709,31 @@ const TinyMCE = (props:NoteBodyEditorProps, ref:any) => {
pluginAssets
.filter((a:any) => a.mime === 'text/css')
.map((a:any) => a.path)
).filter((path:string) => !loadedAssetFiles_.includes(path));
).filter((path:string) => !loadedCssFiles_.includes(path));
const jsFiles = [].concat(
pluginAssets
.filter((a:any) => a.mime === 'application/javascript')
.map((a:any) => a.path)
).filter((path:string) => !loadedAssetFiles_.includes(path));
).filter((path:string) => !loadedJsFiles_.includes(path));
for (const cssFile of cssFiles) loadedAssetFiles_.push(cssFile);
for (const jsFile of jsFiles) loadedAssetFiles_.push(jsFile);
for (const cssFile of cssFiles) loadedCssFiles_.push(cssFile);
for (const jsFile of jsFiles) loadedJsFiles_.push(jsFile);
console.info('loadDocumentAssets: files to load', cssFiles, jsFiles);
if (cssFiles.length) editor.dom.loadCSS(cssFiles.join(','));
if (cssFiles.length) {
for (const cssFile of cssFiles) {
const script = editor.dom.create('link', {
rel: 'stylesheet',
type: 'text/css',
href: cssFile,
class: 'jop-tinymce-css',
});
docHead().appendChild(script);
}
}
if (jsFiles.length) {
const editorElementId = editor.dom.uniqueId();
@ -713,7 +745,7 @@ const TinyMCE = (props:NoteBodyEditorProps, ref:any) => {
src: jsFile,
});
editor.getDoc().getElementsByTagName('head')[0].appendChild(script);
docHead().appendChild(script);
}
}
};