Desktop: Resolves #8931: Improve support for plugins in the Rich Text Editor (implement webviewApi.postMesage) (#10158)

packages/app-desktop/gui/NoteEditor/NoteBody/TinyMCE/TinyMCE.tsx

@@ -31,6 +31,7 @@ import { Options as NoteStyleOptions } from '@joplin/renderer/noteStyle';
 import markupRenderOptions from '../../utils/markupRenderOptions';
 import { DropHandler } from '../../utils/useDropHandler';
 import Logger from '@joplin/utils/Logger';
+import useWebViewApi from './utils/useWebViewApi';
 const md5 = require('md5');
 const { clipboard } = require('electron');
 const supportedLocales = require('./supportedLocales');
@@ -348,6 +349,8 @@ const TinyMCE = (props: NoteBodyEditorProps, ref: any) => {
 		};
 	}, []);
 
+	useWebViewApi(editor);
+
 	useEffect(() => {
 		const theme = themeStyle(props.themeId);
 		const backgroundColor = props.whiteBackgroundNoteRendering ? lightTheme.backgroundColor : theme.backgroundColor;

packages/app-desktop/gui/NoteEditor/NoteBody/TinyMCE/utils/useWebViewApi.ts

@@ -0,0 +1,72 @@
+import PluginService from '@joplin/lib/services/plugins/PluginService';
+import { useEffect } from 'react';
+import { Editor } from 'tinymce';
+
+const useWebViewApi = (editor: Editor) => {
+	useEffect(() => {
+		if (!editor) return ()=>{};
+
+		const scriptElement = document.createElement('script');
+		const channelId = `plugin-post-message-${Math.random()}`;
+		scriptElement.appendChild(document.createTextNode(`
+			window.webviewApi = {
+				postMessage: (contentScriptId, message) => {
+					const channelId = ${JSON.stringify(channelId)};
+					const messageId = Math.random();
+					window.parent.postMessage({
+						channelId,
+						messageId,
+						contentScriptId,
+						message,
+					}, '*');
+
+					const waitForResponse = async () => {
+						while (true) {
+							const messageEvent = await new Promise(resolve => {
+								window.addEventListener('message', event => {
+									resolve(event);
+								}, {once: true});
+							});
+	
+							if (messageEvent.source !== window.parent || messageEvent.data.messageId !== messageId) {
+								continue;
+							}
+	
+							const data = messageEvent.data;
+							return data.response;
+						}
+					};
+
+					return waitForResponse();
+				},
+			};
+		`));
+		const editorWindow = editor.getWin();
+		editorWindow.document.head.appendChild(scriptElement);
+
+		const onMessageHandler = async (event: MessageEvent) => {
+			if (event.source !== editorWindow || event.data.channelId !== channelId) {
+				return;
+			}
+
+			const contentScriptId = event.data.contentScriptId;
+			const pluginService = PluginService.instance();
+			const plugin = pluginService.pluginById(
+				pluginService.pluginIdByContentScriptId(contentScriptId),
+			);
+			const result = await plugin.emitContentScriptMessage(contentScriptId, event.data.message);
+			editorWindow.postMessage({
+				messageId: event.data.messageId,
+				response: result,
+			}, '*');
+		};
+		window.addEventListener('message', onMessageHandler);
+
+		return () => {
+			window.removeEventListener('message', onMessageHandler);
+			scriptElement.remove();
+		};
+	}, [editor]);
+};
+
+export default useWebViewApi;