self-hosted/joplin
1
0
Fork 0
mirror of https://github.com/laurent22/joplin.git synced 2024-12-21 09:38:01 +02:00
Code Issues Releases Activity

Desktop: Fixes #8723: Update CSS variables in user iframes on theme change (#8724)

Browse Source
This commit is contained in:
Henry Heino 2023-08-25 01:20:44 -07:00 committed by GitHub
parent 7ab197a92b
commit 315baacba7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 30 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.eslintignore
View File

@ -381,6 +381,7 @@ packages/app-desktop/services/plugins/hooks/useContentSize.js
packages/app-desktop/services/plugins/hooks/useHtmlLoader.js
packages/app-desktop/services/plugins/hooks/useScriptLoader.js
packages/app-desktop/services/plugins/hooks/useSubmitHandler.js
packages/app-desktop/services/plugins/hooks/useThemeCss.test.js
packages/app-desktop/services/plugins/hooks/useThemeCss.js
packages/app-desktop/services/plugins/hooks/useViewIsReady.js
packages/app-desktop/services/plugins/hooks/useWebviewToPluginMessages.js

1
.gitignore vendored
View File

@ -367,6 +367,7 @@ packages/app-desktop/services/plugins/hooks/useContentSize.js
packages/app-desktop/services/plugins/hooks/useHtmlLoader.js
packages/app-desktop/services/plugins/hooks/useScriptLoader.js
packages/app-desktop/services/plugins/hooks/useSubmitHandler.js
packages/app-desktop/services/plugins/hooks/useThemeCss.test.js
packages/app-desktop/services/plugins/hooks/useThemeCss.js
packages/app-desktop/services/plugins/hooks/useViewIsReady.js
packages/app-desktop/services/plugins/hooks/useWebviewToPluginMessages.js

21
packages/app-desktop/services/plugins/hooks/useThemeCss.test.ts Normal file
View File

@ -0,0 +1,21 @@
import { renderHook } from '@testing-library/react-hooks';
import useThemeCss from './useThemeCss';
import Setting from '@joplin/lib/models/Setting';
describe('useThemeCss', () => {
it('should return a different path when the theme changes', async () => {
const hookResult = renderHook(useThemeCss, {
initialProps: { pluginId: 'testid', themeId: Setting.THEME_DARK },
});
await hookResult.waitFor(() => {
expect(hookResult.result.current).toContain(`plugin_testid_theme_${Setting.THEME_DARK}.css`);
});
hookResult.rerender({ pluginId: 'testid', themeId: Setting.THEME_LIGHT });
await hookResult.waitFor(() => {
expect(hookResult.result.current).toContain(`plugin_testid_theme_${Setting.THEME_LIGHT}.css`);
});
});
});

8
packages/app-desktop/services/plugins/hooks/useThemeCss.ts
View File

@ -36,16 +36,18 @@ export default function useThemeCss(dep: HookDependencies) {
const [cssFilePath, setCssFilePath] = useState('');
useEffect(() => {
if (cssFilePath) return () => {};
let cancelled = false;
async function createThemeStyleSheet() {
const theme = themeStyle(themeId);
const css = themeToCssVariables(theme);
const filePath = `${Setting.value('tempDir')}/plugin_${pluginId}_theme_${themeId}.css`;
if (!(await shim.fsDriver().exists(filePath))) {
await shim.fsDriver().writeFile(filePath, css, 'utf8');
if (cancelled) return;
}
setCssFilePath(filePath);
}
@ -54,7 +56,7 @@ export default function useThemeCss(dep: HookDependencies) {
return () => {
cancelled = true;
};
}, [pluginId, themeId, cssFilePath]);
}, [pluginId, themeId]);
return cssFilePath;
}