2024-03-20 13:01:09 +02:00
|
|
|
import { useMemo } from 'react';
|
2020-11-07 17:59:37 +02:00
|
|
|
import shim from '@joplin/lib/shim';
|
|
|
|
|
import Setting from '@joplin/lib/models/Setting';
|
2024-03-20 13:01:09 +02:00
|
|
|
import { RendererWebViewOptions } from '../bundledJs/types';
|
2024-03-09 13:15:13 +02:00
|
|
|
import { themeStyle } from '../../global-style';
|
2024-08-02 15:51:49 +02:00
|
|
|
import { Platform } from 'react-native';
|
2020-10-16 17:26:19 +02:00
|
|
|
|
2024-03-20 13:01:09 +02:00
|
|
|
const useSource = (tempDirPath: string, themeId: number) => {
|
|
|
|
|
const injectedJs = useMemo(() => {
|
|
|
|
|
const subValues = Setting.subValues('markdown.plugin', Setting.toPlainObject());
|
2024-04-05 13:16:49 +02:00
|
|
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any -- Old code before rule was applied
|
2024-03-20 13:01:09 +02:00
|
|
|
const pluginOptions: any = {};
|
|
|
|
|
for (const n in subValues) {
|
|
|
|
|
pluginOptions[n] = { enabled: subValues[n] };
|
2023-05-03 12:45:19 +02:00
|
|
|
}
|
|
|
|
|
|
2024-03-20 13:01:09 +02:00
|
|
|
const rendererWebViewOptions: RendererWebViewOptions = {
|
|
|
|
|
settings: {
|
|
|
|
|
safeMode: Setting.value('isSafeMode'),
|
|
|
|
|
tempDir: tempDirPath,
|
|
|
|
|
resourceDir: Setting.value('resourceDir'),
|
|
|
|
|
resourceDownloadMode: Setting.value('sync.resourceDownloadMode'),
|
|
|
|
|
},
|
2024-08-02 15:51:49 +02:00
|
|
|
// Web needs files to be transferred manually, since image SRCs can't reference
|
|
|
|
|
// the Origin Private File System.
|
|
|
|
|
useTransferredFiles: Platform.OS === 'web',
|
2024-03-20 13:01:09 +02:00
|
|
|
pluginOptions,
|
2020-10-16 17:26:19 +02:00
|
|
|
};
|
|
|
|
|
|
2024-03-20 13:01:09 +02:00
|
|
|
return `
|
|
|
|
|
window.rendererWebViewOptions = ${JSON.stringify(rendererWebViewOptions)};
|
|
|
|
|
|
|
|
|
|
if (!window.injectedJsLoaded) {
|
|
|
|
|
window.injectedJsLoaded = true;
|
|
|
|
|
|
|
|
|
|
${shim.injectedJs('webviewLib')}
|
|
|
|
|
${shim.injectedJs('noteBodyViewerBundle')}
|
|
|
|
|
}
|
|
|
|
|
`;
|
|
|
|
|
}, [tempDirPath]);
|
|
|
|
|
|
|
|
|
|
const [paddingLeft, paddingRight] = useMemo(() => {
|
|
|
|
|
const theme = themeStyle(themeId);
|
|
|
|
|
return [theme.marginLeft, theme.marginRight];
|
|
|
|
|
}, [themeId]);
|
|
|
|
|
|
|
|
|
|
const html = useMemo(() => {
|
|
|
|
|
// iOS doesn't automatically adjust the WebView's font size to match users'
|
|
|
|
|
// accessibility settings. To do this, we need to tell it to match the system font.
|
|
|
|
|
// See https://github.com/ionic-team/capacitor/issues/2748#issuecomment-612923135
|
|
|
|
|
const iOSSpecificCss = `
|
|
|
|
|
@media screen {
|
|
|
|
|
:root body {
|
|
|
|
|
font: -apple-system-body;
|
2024-02-02 20:10:27 +02:00
|
|
|
}
|
2024-03-20 13:01:09 +02:00
|
|
|
}
|
|
|
|
|
`;
|
|
|
|
|
const defaultCss = `
|
|
|
|
|
code {
|
|
|
|
|
white-space: pre-wrap;
|
|
|
|
|
overflow-x: hidden;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
body {
|
|
|
|
|
padding-left: ${Number(paddingLeft)}px;
|
|
|
|
|
padding-right: ${Number(paddingRight)}px;
|
|
|
|
|
}
|
|
|
|
|
`;
|
|
|
|
|
|
|
|
|
|
return `
|
|
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html>
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="UTF-8">
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
|
|
|
<style>
|
|
|
|
|
${defaultCss}
|
|
|
|
|
${shim.mobilePlatform() === 'ios' ? iOSSpecificCss : ''}
|
|
|
|
|
</style>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
<div id="joplin-container-pluginAssetsContainer"></div>
|
|
|
|
|
<div id="joplin-container-content"></div>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
|
|
|
|
`;
|
|
|
|
|
}, [paddingLeft, paddingRight]);
|
2020-10-16 17:26:19 +02:00
|
|
|
|
2022-09-05 13:46:13 +02:00
|
|
|
return { html, injectedJs };
|
2024-03-20 13:01:09 +02:00
|
|
|
};
|
|
|
|
|
|
|
|
|
|
export default useSource;
|
