2024-03-14 21:04:32 +02:00
|
|
|
import * as React from 'react';
|
|
|
|
|
import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
|
|
|
|
|
import { PluginHtmlContents, ViewInfo } from '@joplin/lib/services/plugins/reducer';
|
2024-08-02 15:51:49 +02:00
|
|
|
import ExtendedWebView from '../../ExtendedWebView';
|
|
|
|
|
import { WebViewControl } from '../../ExtendedWebView/types';
|
2024-03-14 21:04:32 +02:00
|
|
|
import { ViewStyle } from 'react-native';
|
2024-06-25 14:59:59 +02:00
|
|
|
import usePlugin from '@joplin/lib/hooks/usePlugin';
|
2024-03-14 21:04:32 +02:00
|
|
|
import shim from '@joplin/lib/shim';
|
|
|
|
|
import useDialogMessenger from './hooks/useDialogMessenger';
|
|
|
|
|
import useWebViewSetup from './hooks/useWebViewSetup';
|
|
|
|
|
import { DialogWebViewApi } from '../types';
|
|
|
|
|
|
|
|
|
|
interface Props {
|
|
|
|
|
themeId: number;
|
|
|
|
|
pluginHtmlContents: PluginHtmlContents;
|
|
|
|
|
viewInfo: ViewInfo;
|
|
|
|
|
style: ViewStyle;
|
|
|
|
|
onLoadEnd: ()=> void;
|
|
|
|
|
setDialogControl: (dialogControl: DialogWebViewApi)=> void;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const PluginUserWebView = (props: Props) => {
|
|
|
|
|
const viewInfo = props.viewInfo;
|
|
|
|
|
const view = viewInfo.view;
|
|
|
|
|
const pluginId = viewInfo.plugin.id;
|
|
|
|
|
const viewId = view.id;
|
|
|
|
|
const plugin = usePlugin(pluginId);
|
|
|
|
|
const [webViewLoadCount, setWebViewLoadCount] = useState(0);
|
|
|
|
|
|
|
|
|
|
const webviewRef = useRef<WebViewControl>(null);
|
|
|
|
|
|
|
|
|
|
const messageChannelId = `dialog-messenger-${pluginId}-${viewId}`;
|
|
|
|
|
const messenger = useDialogMessenger({
|
|
|
|
|
pluginId,
|
|
|
|
|
viewId,
|
|
|
|
|
webviewRef,
|
|
|
|
|
messageChannelId,
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
|
// Because of how messenger.remoteApi handles message forwarding (property names
|
|
|
|
|
// are not known), we need to send methods individually and can't use an object
|
|
|
|
|
// spread or send messenger.remoteApi.
|
|
|
|
|
props.setDialogControl({
|
|
|
|
|
includeCssFiles: messenger.remoteApi.includeCssFiles,
|
|
|
|
|
includeJsFiles: messenger.remoteApi.includeJsFiles,
|
|
|
|
|
setThemeCss: messenger.remoteApi.setThemeCss,
|
|
|
|
|
getFormData: messenger.remoteApi.getFormData,
|
|
|
|
|
getContentSize: messenger.remoteApi.getContentSize,
|
2024-08-02 15:51:49 +02:00
|
|
|
runScript: messenger.remoteApi.runScript,
|
2024-03-14 21:04:32 +02:00
|
|
|
});
|
|
|
|
|
}, [messenger, props.setDialogControl]);
|
|
|
|
|
|
|
|
|
|
useWebViewSetup({
|
|
|
|
|
themeId: props.themeId,
|
|
|
|
|
dialogControl: messenger.remoteApi,
|
|
|
|
|
scriptPaths: view.scripts ?? [],
|
|
|
|
|
pluginBaseDir: plugin.baseDir,
|
|
|
|
|
webViewLoadCount,
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
const htmlContent = props.pluginHtmlContents[pluginId]?.[viewId] ?? '';
|
|
|
|
|
const html = `
|
|
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html>
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="utf-8"/>
|
|
|
|
|
<meta name="viewport" content="width=device-width,initial-scale=1.0"/>
|
|
|
|
|
<title>Plugin Dialog</title>
|
|
|
|
|
<style>
|
|
|
|
|
body {
|
2024-04-03 19:56:54 +02:00
|
|
|
box-sizing: border-box;
|
|
|
|
|
padding: 0;
|
|
|
|
|
margin: 0;
|
2024-03-14 21:04:32 +02:00
|
|
|
color: var(--joplin-color);
|
2024-04-03 19:56:54 +02:00
|
|
|
|
|
|
|
|
/* -apple-system-body allows for correct font scaling on iOS devices */
|
2024-03-29 14:40:54 +02:00
|
|
|
font: -apple-system-body;
|
2024-04-03 19:56:54 +02:00
|
|
|
font-family: var(--joplin-font-family, sans-serif);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* We need "display: flex" in order to accurately get the content size */
|
|
|
|
|
/* including margin and padding of children */
|
|
|
|
|
#joplin-plugin-content {
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
padding: 10px;
|
|
|
|
|
box-sizing: border-box;
|
2024-03-14 21:04:32 +02:00
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
2024-04-03 19:56:54 +02:00
|
|
|
<div id="joplin-plugin-content">
|
2024-03-14 21:04:32 +02:00
|
|
|
${htmlContent}
|
2024-04-03 19:56:54 +02:00
|
|
|
</div>
|
2024-03-14 21:04:32 +02:00
|
|
|
</body>
|
|
|
|
|
</html>
|
|
|
|
|
`;
|
|
|
|
|
|
|
|
|
|
const injectedJs = useMemo(() => {
|
|
|
|
|
return `
|
|
|
|
|
if (!window.backgroundPageLoaded) {
|
|
|
|
|
${shim.injectedJs('pluginBackgroundPage')}
|
|
|
|
|
pluginBackgroundPage.initializeDialogWebView(
|
|
|
|
|
${JSON.stringify(messageChannelId)}
|
|
|
|
|
);
|
|
|
|
|
|
|
|
|
|
window.backgroundPageLoaded = true;
|
|
|
|
|
}
|
|
|
|
|
`;
|
|
|
|
|
}, [messageChannelId]);
|
|
|
|
|
|
|
|
|
|
const onWebViewLoaded = useCallback(() => {
|
|
|
|
|
setWebViewLoadCount(webViewLoadCount + 1);
|
|
|
|
|
props.onLoadEnd();
|
|
|
|
|
messenger.onWebViewLoaded();
|
|
|
|
|
}, [messenger, setWebViewLoadCount, webViewLoadCount, props.onLoadEnd]);
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
<ExtendedWebView
|
|
|
|
|
style={props.style}
|
2024-03-29 14:40:54 +02:00
|
|
|
baseDirectory={plugin.baseDir}
|
2024-03-14 21:04:32 +02:00
|
|
|
webviewInstanceId='joplin__PluginDialogWebView'
|
|
|
|
|
html={html}
|
2024-03-20 12:52:58 +02:00
|
|
|
hasPluginScripts={true}
|
2024-03-14 21:04:32 +02:00
|
|
|
injectedJavaScript={injectedJs}
|
|
|
|
|
onMessage={messenger.onWebViewMessage}
|
|
|
|
|
onLoadEnd={onWebViewLoaded}
|
|
|
|
|
ref={webviewRef}
|
|
|
|
|
/>
|
|
|
|
|
);
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
export default PluginUserWebView;
|
