Plugins: Added support for content scripts

- For now, supports Markdown-it plugins
- Also fixed slow rendering of notes in some cases
- Simplified how Markdown-It plugins are created and cleaned MdToHtml code

commit 89576de289
Merge: c75aa21f 5292fc14
Author: Laurent Cozic <laurent@cozic.net>
Date:   Wed Oct 21 00:23:00 2020 +0100

    Merge branch 'release-1.3' into plugin_content_scripts

commit c75aa21ffd
Author: Laurent Cozic <laurent@cozic.net>
Date:   Wed Oct 21 00:19:52 2020 +0100

    Fixed tests

commit 075187729d
Author: Laurent Cozic <laurent@cozic.net>
Date:   Wed Oct 21 00:11:53 2020 +0100

    Fixed tests

commit 14696b8c65
Author: Laurent Cozic <laurent@cozic.net>
Date:   Tue Oct 20 23:27:58 2020 +0100

    Fixed slow rendering of note

commit 61c09f5bf8
Author: Laurent Cozic <laurent@cozic.net>
Date:   Tue Oct 20 22:35:21 2020 +0100

    Clean up

commit 9f7ea7d865
Author: Laurent Cozic <laurent@cozic.net>
Date:   Tue Oct 20 20:05:31 2020 +0100

    Updated doc

commit 98bf3bde8d
Author: Laurent Cozic <laurent@cozic.net>
Date:   Tue Oct 20 19:56:34 2020 +0100

    Finished converting plugins

commit fe90d92e01
Author: Laurent Cozic <laurent@cozic.net>
Date:   Tue Oct 20 17:52:02 2020 +0100

    Simplified how Markdown-It plugins are created

commit 47c7b864cb
Author: Laurent Cozic <laurent@cozic.net>
Date:   Mon Oct 19 16:40:11 2020 +0100

    Clean up rules

commit d927a238bb
Author: Laurent Cozic <laurent@cozic.net>
Date:   Mon Oct 19 14:29:40 2020 +0100

    Fixed tests

commit 388a56c5dd
Author: Laurent Cozic <laurent@cozic.net>
Date:   Mon Oct 19 14:00:47 2020 +0100

    Add support for content scripts

ReactNativeClient/lib/services/plugins/Plugin.ts

@@ -2,11 +2,22 @@ import { PluginManifest } from './utils/types';
 import ViewController from './ViewController';
 import shim from 'lib/shim';
 import { ViewHandle } from './utils/createViewHandle';
+import { ContentScriptType } from './api/types';
+import Logger from 'lib/Logger';
 
 interface ViewControllers {
 	[key:string]: ViewController
 }
 
+export interface ContentScript {
+	id: string,
+	path: string,
+}
+
+interface ContentScripts {
+	[type:string]: ContentScript[];
+}
+
 export default class Plugin {
 
 	private id_:string;
@@ -14,16 +25,18 @@ export default class Plugin {
 	private manifest_:PluginManifest;
 	private scriptText_:string;
 	private enabled_:boolean = true;
-	// @ts-ignore Should be useful later on
-	private logger_:any = null;
+	private logger_:Logger = null;
 	private viewControllers_:ViewControllers = {};
+	private contentScripts_:ContentScripts = {};
+	private dispatch_:Function;
 
-	constructor(id:string, baseDir:string, manifest:PluginManifest, scriptText:string, logger:any) {
+	constructor(id:string, baseDir:string, manifest:PluginManifest, scriptText:string, logger:Logger, dispatch:Function) {
 		this.id_ = id;
 		this.baseDir_ = shim.fsDriver().resolve(baseDir);
 		this.manifest_ = manifest;
 		this.scriptText_ = scriptText;
 		this.logger_ = logger;
+		this.dispatch_ = dispatch;
 	}
 
 	public get id():string {
@@ -46,6 +59,30 @@ export default class Plugin {
 		return this.baseDir_;
 	}
 
+	public registerContentScript(type:ContentScriptType, id:string, path:string) {
+		if (!this.contentScripts_[type]) this.contentScripts_[type] = [];
+
+		const absolutePath = shim.fsDriver().resolveRelativePathWithinDir(this.baseDir, path);
+
+		this.contentScripts_[type].push({ id, path: absolutePath });
+
+		this.logger_.debug(`Plugin: ${this.id}: Registered content script: ${type}: ${id}: ${absolutePath}`);
+
+		this.dispatch_({
+			type: 'PLUGIN_CONTENT_SCRIPTS_ADD',
+			pluginId: this.id,
+			contentScript: {
+				type: type,
+				id: id,
+				path: absolutePath,
+			},
+		});
+	}
+
+	public contentScriptsByType(type:ContentScriptType):ContentScript[] {
+		return this.contentScripts_[type] ? this.contentScripts_[type] : [];
+	}
+
 	public addViewController(v:ViewController) {
 		if (this.viewControllers_[v.handle]) throw new Error(`View already added: ${v.handle}`);
 		this.viewControllers_[v.handle] = v;

ReactNativeClient/lib/services/plugins/PluginService.ts

@@ -117,13 +117,14 @@ export default class PluginService extends BaseService {
 		// such folders but to keep things sane we disallow it.
 		if (this.plugins_[pluginId]) throw new Error(`There is already a plugin with this ID: ${pluginId}`);
 
-		const plugin = new Plugin(pluginId, baseDir, manifest, scriptText, this.logger());
+		const plugin = new Plugin(pluginId, baseDir, manifest, scriptText, this.logger(), (action:any) => this.store_.dispatch(action));
 
 		this.store_.dispatch({
 			type: 'PLUGIN_ADD',
 			plugin: {
 				id: pluginId,
 				views: {},
+				contentScripts: {},
 			},
 		});
 

ReactNativeClient/lib/services/plugins/api/JoplinPlugins.ts

@@ -1,6 +1,6 @@
 import Plugin from '../Plugin';
 import Logger from 'lib/Logger';
-import { Script } from './types';
+import { ContentScriptType, Script } from './types';
 
 /**
  * This class provides access to plugin-related features.
@@ -48,4 +48,21 @@ export default class JoplinPlugins {
 			});
 		}
 	}
+
+	/**
+	 * Registers a new content script. Unlike regular plugin code, which runs in a separate process, content scripts run within the main process code
+	 * and thus allow improved performances and more customisations in specific cases. It can be used for example to load a Markdown or editor plugin.
+	 *
+	 * Note that registering a content script in itself will do nothing - it will only be loaded in specific cases by the relevant app modules
+	 * (eg. the Markdown renderer or the code editor). So it is not a way to inject and run arbitrary code in the app, which for safety and performance reasons is not supported.
+	 *
+	 * [View the demo plugin](https://github.com/laurent22/joplin/tree/dev/CliClient/tests/support/plugins/content_script)
+	 *
+	 * @param type Defines how the script will be used. See the type definition for more information about each supported type.
+	 * @param id A unique ID for the content script.
+	 * @param scriptPath Must be a path relative to the plugin main script. For example, if your file content_script.js is next to your index.ts file, you would set `scriptPath` to `"./content_script.js`.
+	 */
+	async registerContentScript(type:ContentScriptType, id:string, scriptPath:string) {
+		return this.plugin.registerContentScript(type, id, scriptPath);
+	}
 }

ReactNativeClient/lib/services/plugins/api/types.ts

@@ -312,3 +312,54 @@ export interface SettingSection {
  * [2]: (Optional) Resource link.
  */
 export type Path = string[];
+
+// =================================================================
+// Plugins type
+// =================================================================
+
+export enum ContentScriptType {
+	/**
+	 * Registers a new Markdown-It plugin, which should follow this template:
+	 *
+	 * ```javascript
+	 * // The module should export an object as below:
+	 *
+	 * module.exports = {
+	 *
+	 *     // The "context" variable is currently unused but could be used later on to provide
+	 *     // access to your own plugin so that the content script and plugin can communicate.
+	 *     default: function(context) {
+	 *         return {
+	 *
+	 *             // This is the actual Markdown-It plugin - check the [official doc](https://github.com/markdown-it/markdown-it) for more information
+	 *             // The `options` parameter is of type [RuleOptions](https://github.com/laurent22/joplin/blob/dev/ReactNativeClient/lib/joplin-renderer/MdToHtml.ts), which
+	 *             // contains a number of options, mostly useful for Joplin's internal code.
+	 *             plugin: function(markdownIt, options) {
+	 *                 // ...
+	 *             },
+	 *
+	 *             // You may also specify additional assets such as JS or CSS that should be loaded in the rendered HTML document.
+	 *             // Check for example the Joplin [Mermaid plugin](https://github.com/laurent22/joplin/blob/dev/ReactNativeClient/lib/joplin-renderer/MdToHtml/rules/mermaid.ts) to
+	 *             // see how the data should be structured.
+	 *             assets: {},
+	 *         }
+	 *     }
+	 * }
+	 * ```
+	 *
+	 * To include a regular Markdown-It plugin, that doesn't make use of any Joplin-specific feature, you
+	 * would simply create a file such as this:
+	 *
+	 * ```javascript
+	 * module.exports = {
+	 *     default: function(context) {
+	 *         return {
+	 *             plugin: require('markdown-it-toc-done-right');
+	 *         }
+	 *     }
+	 * }
+	 * ```
+	 */
+	MarkdownItPlugin = 'markdownItPlugin',
+	CodeMirrorPlugin = 'codeMirrorPlugin',
+}

ReactNativeClient/lib/services/plugins/reducer.ts

@@ -14,8 +14,18 @@ interface PluginViewStates {
 	[key:string]: PluginViewState,
 }
 
+interface PluginContentScriptState {
+	id: string,
+	path: string,
+}
+
+interface PluginContentScriptStates {
+	[type:string]: PluginContentScriptState[];
+}
+
 interface PluginState {
 	id:string,
+	contentScripts: PluginContentScriptStates,
 	views:PluginViewStates,
 }
 
@@ -111,6 +121,18 @@ const reducer = (draft: Draft<any>, action:any) => {
 			draft.pluginService.plugins[action.pluginId].views[action.id][action.name].push(action.value);
 			break;
 
+		case 'PLUGIN_CONTENT_SCRIPTS_ADD': {
+
+			const type = action.contentScript.type;
+			if (!draft.pluginService.plugins[action.pluginId].contentScripts[type]) draft.pluginService.plugins[action.pluginId].contentScripts[type] = [];
+
+			draft.pluginService.plugins[action.pluginId].contentScripts[type].push({
+				id: action.contentScript.id,
+				path: action.contentScript.path,
+			});
+			break;
+		}
+
 		}
 	} catch (error) {
 		error.message = `In plugin reducer: ${error.message} Action: ${JSON.stringify(action)}`;

ReactNativeClient/lib/services/plugins/utils/contentScriptsToRendererRules.ts

@@ -0,0 +1,24 @@
+import { PluginStates } from '../reducer';
+import { ExtraRendererRule } from 'lib/joplin-renderer/MdToHtml';
+
+export default function contentScriptsToRendererRules(plugins:PluginStates):ExtraRendererRule[] {
+	const output:ExtraRendererRule[] = [];
+
+	for (const pluginId in plugins) {
+		const plugin = plugins[pluginId];
+		for (const scriptType in plugin.contentScripts) {
+			const contentScripts = plugin.contentScripts[scriptType];
+			for (const contentScript of contentScripts) {
+
+				const loadedModule = require(contentScript.path).default;
+
+				output.push({
+					id: contentScript.id,
+					module: loadedModule({}),
+				});
+			}
+		}
+	}
+
+	return output;
+}

ReactNativeClient/lib/services/plugins/utils/viewIdGen.js

@@ -1,8 +0,0 @@
-'use strict';
-Object.defineProperty(exports, '__esModule', { value: true });
-const uuid_1 = require('lib/uuid');
-function viewIdGen(plugin) {
-	return `plugin-view-${plugin.id}-${uuid_1.default.createNano()}`;
-}
-exports.default = viewIdGen;
-// # sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidmlld0lkR2VuLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsidmlld0lkR2VuLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7O0FBQ0EsbUNBQTRCO0FBRTVCLFNBQXdCLFNBQVMsQ0FBQyxNQUFhO0lBQzlDLE9BQU8sZUFBZSxNQUFNLENBQUMsRUFBRSxJQUFJLGNBQUksQ0FBQyxVQUFVLEVBQUUsRUFBRSxDQUFBO0FBQ3ZELENBQUM7QUFGRCw0QkFFQyJ9