All: Add support for application plugins (#3257)

ReactNativeClient/lib/services/plugins/BasePluginRunner.ts

@@ -0,0 +1,11 @@
+import Plugin from './Plugin';
+import BaseService from '../BaseService';
+import Global from './api/Global';
+
+export default abstract class BasePluginRunner extends BaseService {
+
+	async run(plugin:Plugin, sandbox:Global) {
+		throw new Error(`Not implemented: ${plugin} / ${sandbox}`);
+	}
+
+}

ReactNativeClient/lib/services/plugins/MenuItemController.ts

@@ -0,0 +1,25 @@
+import { MenuItemLocation } from './api/types';
+import ViewController from './ViewController';
+
+export default class MenuItemController extends ViewController {
+
+	constructor(id:string, pluginId:string, store:any, commandName:string, location:MenuItemLocation) {
+		super(id, pluginId, store);
+
+		this.store.dispatch({
+			type: 'PLUGIN_VIEW_ADD',
+			pluginId: pluginId,
+			view: {
+				id: this.handle,
+				type: this.type,
+				commandName: commandName,
+				location: location,
+			},
+		});
+	}
+
+	public get type():string {
+		return 'menuItem';
+	}
+
+}

ReactNativeClient/lib/services/plugins/Plugin.ts

@@ -0,0 +1,59 @@
+import { PluginManifest } from './utils/types';
+import ViewController from './ViewController';
+import shim from 'lib/shim';
+import { ViewHandle } from './utils/createViewHandle';
+
+interface ViewControllers {
+	[key:string]: ViewController
+}
+
+export default class Plugin {
+
+	private id_:string;
+	private baseDir_:string;
+	private manifest_:PluginManifest;
+	private scriptText_:string;
+	private enabled_:boolean = true;
+	// @ts-ignore Should be useful later on
+	private logger_:any = null;
+	private viewControllers_:ViewControllers = {};
+
+	constructor(id:string, baseDir:string, manifest:PluginManifest, scriptText:string, logger:any) {
+		this.id_ = id;
+		this.baseDir_ = shim.fsDriver().resolve(baseDir);
+		this.manifest_ = manifest;
+		this.scriptText_ = scriptText;
+		this.logger_ = logger;
+	}
+
+	public get id():string {
+		return this.id_;
+	}
+
+	public get enabled():boolean {
+		return this.enabled_;
+	}
+
+	public get manifest():PluginManifest {
+		return this.manifest_;
+	}
+
+	public get scriptText():string {
+		return this.scriptText_;
+	}
+
+	public get baseDir():string {
+		return this.baseDir_;
+	}
+
+	public addViewController(v:ViewController) {
+		if (this.viewControllers_[v.handle]) throw new Error(`View already added: ${v.handle}`);
+		this.viewControllers_[v.handle] = v;
+	}
+
+	public viewController(handle:ViewHandle):ViewController {
+		if (!this.viewControllers_[handle]) throw new Error(`View not found: ${handle}`);
+		return this.viewControllers_[handle];
+	}
+
+}

ReactNativeClient/lib/services/plugins/PluginService.ts

@@ -0,0 +1,119 @@
+import Plugin from 'lib/services/plugins/Plugin';
+import manifestFromObject from 'lib/services/plugins/utils/manifestFromObject';
+import Global from 'lib/services/plugins/api/Global';
+import BasePluginRunner from 'lib/services/plugins/BasePluginRunner';
+import BaseService  from '../BaseService';
+import shim from 'lib/shim';
+const { filename } = require('lib/path-utils');
+const nodeSlug = require('slug');
+
+interface Plugins {
+	[key:string]: Plugin
+}
+
+function makePluginId(source:string):string {
+	// https://www.npmjs.com/package/slug#options
+	return nodeSlug(source, nodeSlug.defaults.modes['rfc3986']).substr(0,32);
+}
+
+export default class PluginService extends BaseService {
+
+	private static instance_:PluginService = null;
+
+	public static instance():PluginService {
+		if (!this.instance_) {
+			this.instance_ = new PluginService();
+		}
+
+		return this.instance_;
+	}
+
+	private store_:any = null;
+	private platformImplementation_:any = null;
+	private plugins_:Plugins = {};
+	private runner_:BasePluginRunner = null;
+
+	initialize(platformImplementation:any, runner:BasePluginRunner, store:any) {
+		this.store_ = store;
+		this.runner_ = runner;
+		this.platformImplementation_ = platformImplementation;
+	}
+
+	public get plugins():Plugins {
+		return this.plugins_;
+	}
+
+	public pluginById(id:string):Plugin {
+		if (!this.plugins_[id]) throw new Error(`Plugin not found: ${id}`);
+
+		return this.plugins_[id];
+	}
+
+	async loadPlugin(path:string):Promise<Plugin> {
+		const fsDriver = shim.fsDriver();
+
+		let distPath = path;
+		if (!(await fsDriver.exists(`${distPath}/manifest.json`))) {
+			distPath = `${path}/dist`;
+		}
+
+		this.logger().info(`PluginService: Loading plugin from ${path}`);
+
+		const manifestPath = `${distPath}/manifest.json`;
+		const indexPath = `${distPath}/index.js`;
+		const manifestContent = await fsDriver.readFile(manifestPath);
+		const manifest = manifestFromObject(JSON.parse(manifestContent));
+		const scriptText = await fsDriver.readFile(indexPath);
+		const pluginId = makePluginId(filename(path));
+
+		// After transforming the plugin path to an ID, multiple plugins might end up with the same ID. For
+		// example "MyPlugin" and "myplugin" would have the same ID. Technically it's possible to have two
+		// 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, distPath, manifest, scriptText, this.logger());
+
+		this.store_.dispatch({
+			type: 'PLUGIN_ADD',
+			plugin: {
+				id: pluginId,
+				views: {},
+			},
+		});
+
+		return plugin;
+	}
+
+	async loadAndRunPlugins(pluginDirOrPaths:string | string[]) {
+		let pluginPaths = [];
+
+		if (Array.isArray(pluginDirOrPaths)) {
+			pluginPaths = pluginDirOrPaths;
+		} else {
+			pluginPaths = (await shim.fsDriver().readDirStats(pluginDirOrPaths))
+				.filter((stat:any) => stat.isDirectory())
+				.map((stat:any) => `${pluginDirOrPaths}/${stat.path}`);
+		}
+
+		for (const pluginPath of pluginPaths) {
+			if (pluginPath.indexOf('_') === 0) {
+				this.logger().info(`PluginService: Plugin name starts with "_" and has not been loaded: ${pluginPath}`);
+				continue;
+			}
+
+			try {
+				const plugin = await this.loadPlugin(pluginPath);
+				await this.runPlugin(plugin);
+			} catch (error) {
+				this.logger().error(`PluginService: Could not load plugin: ${pluginPath}`, error);
+			}
+		}
+	}
+
+	async runPlugin(plugin:Plugin) {
+		this.plugins_[plugin.id] = plugin;
+		const pluginApi = new Global(this.logger(), this.platformImplementation_, plugin, this.store_);
+		return this.runner_.run(plugin, pluginApi);
+	}
+
+}

ReactNativeClient/lib/services/plugins/ToolbarButtonController.ts

@@ -0,0 +1,25 @@
+import { ToolbarButtonLocation } from './api/types';
+import ViewController from './ViewController';
+
+export default class ToolbarButtonController extends ViewController {
+
+	constructor(id:string, pluginId:string, store:any, commandName:string, location:ToolbarButtonLocation) {
+		super(id, pluginId, store);
+
+		this.store.dispatch({
+			type: 'PLUGIN_VIEW_ADD',
+			pluginId: pluginId,
+			view: {
+				id: this.handle,
+				type: this.type,
+				commandName: commandName,
+				location: location,
+			},
+		});
+	}
+
+	public get type():string {
+		return 'toolbarButton';
+	}
+
+}

ReactNativeClient/lib/services/plugins/ViewController.ts

@@ -0,0 +1,43 @@
+import { ViewHandle } from './utils/createViewHandle';
+
+export default class ViewController {
+
+	private handle_:ViewHandle;
+	private pluginId_:string;
+	private store_:any;
+
+	constructor(handle:ViewHandle, pluginId:string, store:any) {
+		this.handle_ = handle;
+		this.pluginId_ = pluginId;
+		this.store_ = store;
+	}
+
+	protected get storeView():any {
+		return this.store_.pluginService.plugins[this.pluginId_].views[this.handle];
+	}
+
+	protected get store():any {
+		return this.store_;
+	}
+
+	public get pluginId():string {
+		return this.pluginId_;
+	}
+
+	public get key():string {
+		return this.handle_;
+	}
+
+	public get handle():ViewHandle {
+		return this.handle_;
+	}
+
+	public get type():string {
+		throw new Error('Must be overriden');
+	}
+
+	public emitMessage(event:any) {
+		console.info('Calling ViewController.emitMessage - but not implemented', event);
+	}
+
+}

ReactNativeClient/lib/services/plugins/WebviewController.ts

@@ -0,0 +1,127 @@
+import ViewController from './ViewController';
+import shim from 'lib/shim';
+import { ButtonId, ButtonSpec } from './api/types';
+const { toSystemSlashes } = require('lib/path-utils');
+
+export enum ContainerType {
+	Panel = 'panel',
+	Dialog = 'dialog',
+}
+
+export interface Options {
+	containerType: ContainerType,
+}
+
+interface CloseResponse {
+	resolve: Function;
+	reject: Function;
+}
+
+export default class WebviewController extends ViewController {
+
+	private baseDir_:string;
+	private messageListener_:Function = null;
+	private closeResponse_:CloseResponse = null;
+
+	constructor(id:string, pluginId:string, store:any, baseDir:string) {
+		super(id, pluginId, store);
+		this.baseDir_ = toSystemSlashes(baseDir, 'linux');
+
+		this.store.dispatch({
+			type: 'PLUGIN_VIEW_ADD',
+			pluginId: pluginId,
+			view: {
+				id: this.handle,
+				type: this.type,
+				containerType: ContainerType.Panel,
+				html: '',
+				scripts: [],
+				opened: false,
+				buttons: null,
+			},
+		});
+	}
+
+	public get type():string {
+		return 'webview';
+	}
+
+	private setStoreProp(name:string, value:any) {
+		this.store.dispatch({
+			type: 'PLUGIN_VIEW_PROP_SET',
+			pluginId: this.pluginId,
+			id: this.handle,
+			name: name,
+			value: value,
+		});
+	}
+
+	public get html():string {
+		return this.storeView.html;
+	}
+
+	public set html(html:string) {
+		this.setStoreProp('html', html);
+	}
+
+	public get containerType():ContainerType {
+		return this.storeView.containerType;
+	}
+
+	public set containerType(containerType:ContainerType) {
+		this.setStoreProp('containerType', containerType);
+	}
+
+	public async addScript(path:string) {
+		const fullPath = toSystemSlashes(shim.fsDriver().resolve(`${this.baseDir_}/${path}`), 'linux');
+
+		if (fullPath.indexOf(this.baseDir_) !== 0) throw new Error(`Script appears to be outside of plugin base directory: ${fullPath} (Base dir: ${this.baseDir_})`);
+
+		this.store.dispatch({
+			type: 'PLUGIN_VIEW_PROP_PUSH',
+			pluginId: this.pluginId,
+			id: this.handle,
+			name: 'scripts',
+			value: fullPath,
+		});
+	}
+
+	public emitMessage(event:any) {
+		if (!this.messageListener_) return;
+		this.messageListener_(event.message);
+	}
+
+	public onMessage(callback:any) {
+		this.messageListener_ = callback;
+	}
+
+	// ---------------------------------------------
+	// Specific to dialogs
+	// ---------------------------------------------
+
+	public async open():Promise<ButtonId> {
+		this.setStoreProp('opened', true);
+
+		return new Promise((resolve:Function, reject:Function) => {
+			this.closeResponse_ = { resolve, reject };
+		});
+	}
+
+	public async close() {
+		this.setStoreProp('opened', false);
+	}
+
+	public closeWithResponse(result:ButtonId) {
+		this.close();
+		this.closeResponse_.resolve(result);
+	}
+
+	public get buttons():ButtonSpec[] {
+		return this.storeView.buttons;
+	}
+
+	public set buttons(buttons:ButtonSpec[]) {
+		this.setStoreProp('buttons', buttons);
+	}
+
+}

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

@@ -0,0 +1,88 @@
+import Plugin from '../Plugin';
+import Joplin from './Joplin';
+import Logger from 'lib/Logger';
+
+/**
+ * @ignore
+ */
+const builtinModules = require('builtin-modules');
+
+/**
+ * @ignore
+ */
+export default class Global {
+
+	private joplin_: Joplin;
+	private requireWhiteList_:string[] = null;
+	// private consoleWrapper_:any = null;
+
+	constructor(logger:Logger, implementation:any, plugin: Plugin, store: any) {
+		this.joplin_ = new Joplin(logger, implementation.joplin, plugin, store);
+		// this.consoleWrapper_ = this.createConsoleWrapper(plugin.id);
+	}
+
+	// Wraps console calls to allow prefixing them with "Plugin PLUGIN_ID:"
+	// private createConsoleWrapper(pluginId:string) {
+	// 	const wrapper:any = {};
+
+	// 	for (const n in console) {
+	// 		if (!console.hasOwnProperty(n)) continue;
+	// 		wrapper[n] = (...args:any[]) => {
+	// 			const newArgs = args.slice();
+	// 			newArgs.splice(0, 0, `Plugin "${pluginId}":`);
+	// 			return (console as any)[n](...newArgs);
+	// 		};
+	// 	}
+
+	// 	return wrapper;
+	// }
+
+	get joplin(): Joplin {
+		return this.joplin_;
+	}
+
+	private requireWhiteList():string[] {
+		if (!this.requireWhiteList_) {
+			this.requireWhiteList_ = builtinModules.slice();
+			this.requireWhiteList_.push('fs-extra');
+		}
+		return this.requireWhiteList_;
+	}
+
+	// get console(): any {
+	// 	return this.consoleWrapper_;
+	// }
+
+	require(filePath:string):any {
+		if (!this.requireWhiteList().includes(filePath)) throw new Error(`Path not allowed: ${filePath}`);
+		return require(filePath);
+	}
+
+	// To get webpack to work with Node module we need to set the parameter `target: "node"`, however
+	// when setting this, the code generated by webpack will try to access the `process` global variable,
+	// which won't be defined in the sandbox. So here we simply forward the variable, which makes it all work.
+	get process():any {
+		return process;
+	}
+
+	// setTimeout(fn: Function, interval: number) {
+	// 	return shim.setTimeout(() => {
+	// 		fn();
+	// 	}, interval);
+	// }
+
+	// setInterval(fn: Function, interval: number) {
+	// 	return shim.setInterval(() => {
+	// 		fn();
+	// 	}, interval);
+	// }
+
+	// alert(message:string) {
+	// 	return alert(message);
+	// }
+
+	// confirm(message:string) {
+	// 	return confirm(message);
+	// }
+
+}

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

@@ -0,0 +1,74 @@
+import Plugin from '../Plugin';
+import JoplinData from './JoplinData';
+import JoplinPlugins from './JoplinPlugins';
+import JoplinWorkspace from './JoplinWorkspace';
+import JoplinFilters from './JoplinFilters';
+import JoplinCommands from './JoplinCommands';
+import JoplinViews from './JoplinViews';
+import JoplinInterop from './JoplinInterop';
+import JoplinSettings from './JoplinSettings';
+import Logger from 'lib/Logger';
+
+/**
+ * This is the main entry point to the Joplin API. You can access various services using the provided accessors.
+ */
+export default class Joplin {
+
+	private data_: JoplinData = null;
+	private plugins_: JoplinPlugins = null;
+	private workspace_: JoplinWorkspace = null;
+	private filters_: JoplinFilters = null;
+	private commands_: JoplinCommands = null;
+	private views_: JoplinViews = null;
+	private interop_: JoplinInterop = null;
+	private settings_: JoplinSettings = null;
+
+	constructor(logger:Logger, implementation:any, plugin: Plugin, store: any) {
+		this.data_ = new JoplinData();
+		this.plugins_ = new JoplinPlugins(logger, plugin);
+		this.workspace_ = new JoplinWorkspace(implementation.workspace, store);
+		this.filters_ = new JoplinFilters();
+		this.commands_ = new JoplinCommands();
+		this.views_ = new JoplinViews(implementation.views, plugin, store);
+		this.interop_ = new JoplinInterop();
+		this.settings_ = new JoplinSettings(plugin);
+	}
+
+	get data(): JoplinData {
+		return this.data_;
+	}
+
+	get plugins(): JoplinPlugins {
+		return this.plugins_;
+	}
+
+	get workspace(): JoplinWorkspace {
+		return this.workspace_;
+	}
+
+	/**
+	 * @ignore
+	 *
+	 * Not sure if it's the best way to hook into the app
+	 * so for now disable filters.
+	 */
+	get filters(): JoplinFilters {
+		return this.filters_;
+	}
+
+	get commands(): JoplinCommands {
+		return this.commands_;
+	}
+
+	get views(): JoplinViews {
+		return this.views_;
+	}
+
+	get interop(): JoplinInterop {
+		return this.interop_;
+	}
+
+	get settings(): JoplinSettings {
+		return this.settings_;
+	}
+}

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

@@ -0,0 +1,75 @@
+import CommandService, { CommandDeclaration, CommandRuntime } from 'lib/services/CommandService';
+import { Command } from './types';
+
+/**
+ * This class allows executing or registering new Joplin commands. Commands can be executed or associated with
+ * {@link JoplinViewsToolbarButtons | toolbar buttons} or {@link JoplinViewsMenuItems | menu items}.
+ *
+ * [View the demo plugin](https://github.com/laurent22/joplin/CliClient/tests/support/plugins/register_command)
+ *
+ * ## Executing Joplin's internal commands
+ *
+ * It is also possible to execute internal Joplin's commands which, as of now, are not well documented.
+ * You can find the list directly on GitHub though at the following locations:
+ *
+ * https://github.com/laurent22/joplin/tree/dev/ElectronClient/gui/MainScreen/commands
+ * https://github.com/laurent22/joplin/tree/dev/ElectronClient/commands
+ * https://github.com/laurent22/joplin/tree/dev/ElectronClient/gui/NoteEditor/commands/editorCommandDeclarations.ts
+ *
+ * To view what arguments are supported, you can open any of these files and look at the `execute()` command.
+ */
+export default class JoplinCommands {
+
+	/**
+	 * <span class="platform-desktop">desktop</span> Executes the given command.
+	 * The `props` are the arguments passed to the command, and they vary based on the command
+	 *
+	 * ```typescript
+	 * // Create a new note in the current notebook:
+	 * await joplin.commands.execute('newNote');
+	 *
+	 * // Create a new sub-notebook under the provided notebook
+	 * // Note: internally, notebooks are called "folders".
+	 * await joplin.commands.execute('newFolder', { parent_id: "SOME_FOLDER_ID" });
+	 * ```
+	 */
+	async execute(commandName: string, props: any = null):Promise<any> {
+		return CommandService.instance().execute(commandName, props);
+	}
+
+	/**
+	 * <span class="platform-desktop">desktop</span> Registers a new command.
+	 *
+	 * ```typescript
+	 * // Register a new commmand called "testCommand1"
+	 *
+	 * await joplin.commands.register({
+	 *     name: 'testCommand1',
+	 *     label: 'My Test Command 1',
+	 *     iconName: 'fas fa-music',
+	 *     execute: () => {
+	 *         alert('Testing plugin command 1');
+	 *     },
+	 * });
+	 * ```
+	 */
+	async register(command:Command) {
+		const declaration:CommandDeclaration = {
+			name: command.name,
+			label: command.label,
+		};
+
+		if ('iconName' in command) declaration.iconName = command.iconName;
+
+		const runtime:CommandRuntime = {
+			execute: command.execute,
+		};
+
+		if ('isEnabled' in command) runtime.isEnabled = command.isEnabled;
+		if ('mapStateToProps' in command) runtime.mapStateToProps = command.mapStateToProps;
+
+		CommandService.instance().registerDeclaration(declaration);
+		CommandService.instance().registerRuntime(declaration.name, runtime);
+	}
+
+}

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

@@ -0,0 +1,81 @@
+import Api from 'lib/services/rest/Api';
+import { Path } from './types';
+
+/**
+ * This module provides access to the Joplin data API: https://joplinapp.org/api/
+ * This is the main way to retrieve data, such as notes, notebooks, tags, etc.
+ * or to update them or delete them.
+ *
+ * This is also what you would use to search notes, via the `search` endpoint.
+ *
+ * [View the demo plugin](https://github.com/laurent22/joplin/CliClient/tests/support/plugins/simple)
+ *
+ * In general you would use the methods in this class as if you were using a REST API. There are four methods that map to GET, POST, PUT and DELETE calls.
+ * And each method takes these parameters:
+ *
+ * * `path`: This is an array that represents the path to the resource in the form `["resouceName", "resourceId", "resourceLink"]` (eg. ["tags", ":id", "notes"]). The "resources" segment is the name of the resources you want to access (eg. "notes", "folders", etc.). If not followed by anything, it will refer to all the resources in that collection. The optional "resourceId" points to a particular resources within the collection. Finally, an optional "link" can be present, which links the resource to a collection of resources. This can be used in the API for example to retrieve all the notes associated with a tag.
+ * * `query`: (Optional) The query parameters. In a URL, this is the part after the question mark "?". In this case, it should be an object with key/value pairs.
+ * * `data`: (Optional) Applies to PUT and POST calls only. The request body contains the data you want to create or modify, for example the content of a note or folder.
+ * * `files`: (Optional) Used to create new resources and associate them with files.
+ *
+ * Please refer to the [Joplin API documentation](https://joplinapp.org/api/) for complete details about each call. As the plugin runs within the Joplin application **you do not need an authorisation token** to use this API.
+ *
+ * For example:
+ *
+ * ```typescript
+ * // Get a note ID, title and body
+ * const noteId = 'some_note_id';
+ * const note = await joplin.data.get(['notes', noteId], { fields: ['id', 'title', 'body'] });
+ *
+ * // Get all folders
+ * const folders = await joplin.data.get(['folders']);
+ *
+ * // Set the note body
+ * await joplin.data.put(['notes', noteId], null, { body: "New note body" });
+ *
+ * // Create a new note under one of the folders
+ * await joplin.data.post(['notes'], null, { body: "my new note", title: "some title", parent_id: folders[0].id });
+ * ```
+ */
+export default class JoplinData {
+
+	private api_: any = new Api();
+	private pathSegmentRegex_:RegExp;
+
+	private serializeApiBody(body: any) {
+		if (typeof body !== 'string') { return JSON.stringify(body); }
+		return body;
+	}
+
+	private pathToString(path:Path):string {
+		if (!this.pathSegmentRegex_) {
+			this.pathSegmentRegex_ = /^([a-z0-9]+)$/;
+		}
+
+		if (!Array.isArray(path)) throw new Error(`Path must be an array: ${JSON.stringify(path)}`);
+		if (path.length < 1) throw new Error(`Path must have at least one element: ${JSON.stringify(path)}`);
+		if (path.length > 3) throw new Error(`Path must have no more than 3 elements: ${JSON.stringify(path)}`);
+
+		for (const p of path) {
+			if (!this.pathSegmentRegex_.test(p)) throw new Error(`Path segments must only contain lowercase letters and digits: ${JSON.stringify(path)}`);
+		}
+
+		return path.join('/');
+	}
+
+	async get(path: Path, query: any = null) {
+		return this.api_.route('GET', this.pathToString(path), query);
+	}
+
+	async post(path: Path, query: any = null, body: any = null, files: any[] = null) {
+		return this.api_.route('POST', this.pathToString(path), query, this.serializeApiBody(body), files);
+	}
+
+	async put(path: Path, query: any = null, body: any = null, files: any[] = null) {
+		return this.api_.route('PUT', this.pathToString(path), query, this.serializeApiBody(body), files);
+	}
+
+	async delete(path: Path, query: any = null) {
+		return this.api_.route('DELETE', this.pathToString(path), query);
+	}
+}

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

@@ -0,0 +1,17 @@
+import eventManager from 'lib/eventManager';
+
+/**
+ * @ignore
+ *
+ * Not sure if it's the best way to hook into the app
+ * so for now disable filters.
+ */
+export default class JoplinFilters {
+	async on(name: string, callback: Function) {
+		eventManager.filterOn(name, callback);
+	}
+
+	async off(name: string, callback: Function) {
+		eventManager.filterOff(name, callback);
+	}
+}

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

@@ -0,0 +1,41 @@
+import InteropService from 'lib/services/interop/InteropService';
+import { Module, ModuleType } from 'lib/services/interop/types';
+import { ExportModule, ImportModule } from './types';
+
+/**
+ * Provides a way to create modules to import external data into Joplin or to export notes into any arbitrary format.
+ *
+ * [View the demo plugin](https://github.com/laurent22/joplin/CliClient/tests/support/plugins/json_export)
+ *
+ * To implement an import or export module, you would simply define an object with various event handlers that are called
+ * by the application during the import/export process.
+ *
+ * See the documentation of the [[ExportModule]] and [[ImportModule]] for more information.
+ *
+ * You may also want to refer to the Joplin API documentation to see the list of properties for each item (note, notebook, etc.) - https://joplinapp.org/api/
+ */
+export default class JoplinInterop {
+
+	async registerExportModule(module:ExportModule) {
+		const internalModule:Module = {
+			...module,
+			type: ModuleType.Exporter,
+			isCustom: true,
+			fileExtensions: module.fileExtensions ? module.fileExtensions : [],
+		};
+
+		return InteropService.instance().registerModule(internalModule);
+	}
+
+	async registerImportModule(module:ImportModule) {
+		const internalModule:Module = {
+			...module,
+			type: ModuleType.Importer,
+			isCustom: true,
+			fileExtensions: module.fileExtensions ? module.fileExtensions : [],
+		};
+
+		return InteropService.instance().registerModule(internalModule);
+	}
+
+}

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

@@ -0,0 +1,51 @@
+import Plugin from '../Plugin';
+import Logger from 'lib/Logger';
+import { Script } from './types';
+
+/**
+ * This class provides access to plugin-related features.
+ */
+export default class JoplinPlugins {
+
+	private logger: Logger;
+	private plugin: Plugin;
+
+	constructor(logger:Logger, plugin:Plugin) {
+		this.logger = logger;
+		this.plugin = plugin;
+	}
+
+	/**
+	 * Registers a new plugin. This is the entry point when creating a plugin. You should pass a simple object with an `onStart` method to it.
+	 * That `onStart` method will be executed as soon as the plugin is loaded.
+	 *
+	 * ```typescript
+	 * joplin.plugins.register({
+	 *     onStart: async function() {
+	 *         // Run your plugin code here
+	 *     }
+	 * });
+	 * ```
+	 */
+	async register(script: Script) {
+		if (script.onStart) {
+			const startTime = Date.now();
+
+			this.logger.info(`Starting plugin: ${this.plugin.id}`);
+
+			// We don't use `await` when calling onStart because the plugin might be awaiting
+			// in that call too (for example, when opening a dialog on startup) so we don't
+			// want to get stuck here.
+			script.onStart({}).catch((error:any) => {
+				// For some reason, error thrown from the executed script do not have the type "Error"
+				// but are instead plain object. So recreate the Error object here so that it can
+				// be handled correctly by loggers, etc.
+				const newError:Error = new Error(error.message);
+				newError.stack = error.stack;
+				this.logger.error(`In plugin ${this.plugin.id}:`, newError);
+			}).then(() => {
+				this.logger.info(`Finished running onStart handler: ${this.plugin.id} (Took ${Date.now() - startTime}ms)`);
+			});
+		}
+	}
+}

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

@@ -0,0 +1,76 @@
+import Setting, { SettingItem as InternalSettingItem } from 'lib/models/Setting';
+import Plugin from '../Plugin';
+import { SettingItem, SettingSection } from './types';
+
+/**
+ * This API allows registering new settings and setting sections, as well as getting and setting settings. Once a setting has been registered it will appear in the config screen and be editable by the user.
+ *
+ * Settings are essentially key/value pairs.
+ *
+ * Note: Currently this API does **not** provide access to Joplin's built-in settings. This is by design as plugins that modify user settings could give unexpected results
+ *
+ * [View the demo plugin](https://github.com/laurent22/joplin/CliClient/tests/support/plugins/settings)
+ */
+export default class JoplinSettings {
+	private plugin_:Plugin = null;
+
+	constructor(plugin: Plugin) {
+		this.plugin_ = plugin;
+	}
+
+	// Ensures that the plugin settings and sections are within their own namespace, to prevent them from
+	// overwriting other plugin settings or the default settings.
+	private namespacedKey(key:string):string {
+		return `plugin-${this.plugin_.id}.${key}`;
+	}
+
+	/**
+	 * Registers a new setting. Note that registering a setting item is dynamic and will be gone next time Joplin starts.
+	 * What it means is that you need to register the setting every time the plugin starts (for example in the onStart event).
+	 * The setting value however will be preserved from one launch to the next so there is no risk that it will be lost even if for some
+	 * reason the plugin fails to start at some point.
+	 */
+	async registerSetting(key:string, settingItem:SettingItem) {
+		const internalSettingItem:InternalSettingItem = {
+			key: key,
+			value: settingItem.value,
+			type: settingItem.type,
+			public: settingItem.public,
+			label: () => settingItem.label,
+			description: (_appType:string) => settingItem.description,
+		};
+
+		if ('isEnum' in settingItem) internalSettingItem.isEnum = settingItem.isEnum;
+		if ('section' in settingItem) internalSettingItem.section = this.namespacedKey(settingItem.section);
+		if ('options' in settingItem) internalSettingItem.options = settingItem.options;
+		if ('appTypes' in settingItem) internalSettingItem.appTypes = settingItem.appTypes;
+		if ('secure' in settingItem) internalSettingItem.secure = settingItem.secure;
+		if ('advanced' in settingItem) internalSettingItem.advanced = settingItem.advanced;
+		if ('minimum' in settingItem) internalSettingItem.minimum = settingItem.minimum;
+		if ('maximum' in settingItem) internalSettingItem.maximum = settingItem.maximum;
+		if ('step' in settingItem) internalSettingItem.step = settingItem.step;
+
+		return Setting.registerSetting(this.namespacedKey(key), internalSettingItem);
+	}
+
+	/**
+	 * Registers a new setting section. Like for registerSetting, it is dynamic and needs to be done every time the plugin starts.
+	 */
+	async registerSection(name:string, section:SettingSection) {
+		return Setting.registerSection(this.namespacedKey(name), section);
+	}
+
+	/**
+	 * Gets a setting value (only applies to setting you registered from your plugin)
+	 */
+	async value(key:string):Promise<any> {
+		return Setting.value(this.namespacedKey(key));
+	}
+
+	/**
+	 * Sets a setting value (only applies to setting you registered from your plugin)
+	 */
+	async setValue(key:string, value:any) {
+		return Setting.setValue(this.namespacedKey(key), value);
+	}
+}

ReactNativeClient/lib/services/plugins/api/JoplinUtils.js

@@ -0,0 +1,11 @@
+'use strict';
+Object.defineProperty(exports, '__esModule', { value: true });
+const Entities = require('html-entities').AllHtmlEntities;
+const htmlentities = new Entities().encode;
+class JoplinUtils {
+	escapeHtml(text) {
+		return htmlentities(text);
+	}
+}
+exports.default = JoplinUtils;
+// # sourceMappingURL=JoplinUtils.js.map

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

@@ -0,0 +1,50 @@
+import Plugin from '../Plugin';
+import JoplinViewsDialogs from './JoplinViewsDialogs';
+import JoplinViewsMenuItems from './JoplinViewsMenuItems';
+import JoplinViewsToolbarButtons from './JoplinViewsToolbarButtons';
+import JoplinViewsPanels from './JoplinViewsPanels';
+
+/**
+ * This namespace provides access to view-related services.
+ *
+ * All view services provide a `create()` method which you would use to create the view object, whether it's a dialog, a toolbar button or a menu item.
+ * In some cases, the `create()` method will return a [[ViewHandle]], which you would use to act on the view, for example to set certain properties or call some methods.
+ */
+export default class JoplinViews {
+
+	private store: any;
+	private plugin: Plugin;
+
+	private dialogs_:JoplinViewsDialogs = null;
+	private panels_:JoplinViewsPanels = null;
+	private menuItems_:JoplinViewsMenuItems = null;
+	private toolbarButtons_:JoplinViewsToolbarButtons = null;
+	private implementation_:any = null;
+
+	constructor(implementation:any, plugin: Plugin, store: any) {
+		this.store = store;
+		this.plugin = plugin;
+		this.implementation_ = implementation;
+	}
+
+	public get dialogs():JoplinViewsDialogs {
+		if (!this.dialogs_) this.dialogs_ = new JoplinViewsDialogs(this.implementation_.dialogs, this.plugin, this.store);
+		return this.dialogs_;
+	}
+
+	public get panels():JoplinViewsPanels {
+		if (!this.panels_) this.panels_ = new JoplinViewsPanels(this.plugin, this.store);
+		return this.panels_;
+	}
+
+	public get menuItems():JoplinViewsMenuItems {
+		if (!this.menuItems_) this.menuItems_ = new JoplinViewsMenuItems(this.plugin, this.store);
+		return this.menuItems_;
+	}
+
+	public get toolbarButtons():JoplinViewsToolbarButtons {
+		if (!this.toolbarButtons_) this.toolbarButtons_ = new JoplinViewsToolbarButtons(this.plugin, this.store);
+		return this.toolbarButtons_;
+	}
+
+}

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

@@ -0,0 +1,68 @@
+import Plugin from '../Plugin';
+import createViewHandle from '../utils/createViewHandle';
+import WebviewController, { ContainerType } from '../WebviewController';
+import { ButtonSpec, ViewHandle, ButtonId } from './types';
+
+/**
+ * Allows creating and managing dialogs. A dialog is modal window that contains a webview and a row of buttons. You can update the update the webview using the `setHtml` method.
+ * Dialogs are hidden by default and you need to call `open()` to open them. Once the user clicks on a button, the `open` call will return and provide the button ID that was
+ * clicked on. There is currently no "close" method since the dialog should be thought as a modal one and thus can only be closed by clicking on one of the buttons.
+ *
+ * [View the demo plugin](https://github.com/laurent22/joplin/CliClient/tests/support/plugins/dialog)
+ */
+export default class JoplinViewsDialogs {
+
+	private store: any;
+	private plugin: Plugin;
+	private implementation_:any;
+
+	constructor(implementation:any, plugin: Plugin, store: any) {
+		this.store = store;
+		this.plugin = plugin;
+		this.implementation_ = implementation;
+	}
+
+	private controller(handle:ViewHandle):WebviewController {
+		return this.plugin.viewController(handle) as WebviewController;
+	}
+
+	/**
+	 * Creates a new dialog
+	 */
+	async create():Promise<ViewHandle> {
+		const handle = createViewHandle(this.plugin);
+		const controller = new WebviewController(handle, this.plugin.id, this.store, this.plugin.baseDir);
+		controller.containerType = ContainerType.Dialog;
+		this.plugin.addViewController(controller);
+		return handle;
+	}
+
+	/**
+	 * Displays a message box with OK/Cancel buttons. Returns the button index that was clicked - "0" for OK and "1" for "Cancel"
+	 */
+	async showMessageBox(message:string):Promise<number> {
+		return this.implementation_.showMessageBox(message);
+	}
+
+	/**
+	 * Sets the dialog HTML content
+	 */
+	async setHtml(handle:ViewHandle, html:string) {
+		return this.controller(handle).html = html;
+	}
+
+	/**
+	 * Sets the dialog buttons.
+	 */
+	async setButtons(handle:ViewHandle, buttons:ButtonSpec[]) {
+		return this.controller(handle).buttons = buttons;
+	}
+
+	/**
+	 * Opens the dialog
+	 */
+	async open(handle:ViewHandle):Promise<ButtonId> {
+		return this.controller(handle).open();
+	}
+
+}

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

@@ -0,0 +1,35 @@
+import KeymapService from 'lib/services/KeymapService';
+import { CreateMenuItemOptions, MenuItemLocation } from './types';
+import MenuItemController from '../MenuItemController';
+import Plugin from '../Plugin';
+import createViewHandle from '../utils/createViewHandle';
+
+/**
+ * Allows creating and managing menu items.
+ *
+ * [View the demo plugin](https://github.com/laurent22/joplin/CliClient/tests/support/plugins/register_command)
+ */
+export default class JoplinViewsMenuItems {
+
+	private store: any;
+	private plugin: Plugin;
+
+	constructor(plugin: Plugin, store: any) {
+		this.store = store;
+		this.plugin = plugin;
+	}
+
+	/**
+	 * Creates a new menu item and associate it with the given command. You can specify under which menu the item should appear using the `location` parameter.
+	 */
+	async create(commandName:string, location:MenuItemLocation = MenuItemLocation.Tools, options:CreateMenuItemOptions = null) {
+		const handle = createViewHandle(this.plugin);
+		const controller = new MenuItemController(handle, this.plugin.id, this.store, commandName, location);
+		this.plugin.addViewController(controller);
+
+		if (options && options.accelerator) {
+			KeymapService.instance().registerCommandAccelerator(commandName, options.accelerator);
+		}
+	}
+
+}

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

@@ -0,0 +1,57 @@
+import Plugin from '../Plugin';
+import createViewHandle from '../utils/createViewHandle';
+import WebviewController from '../WebviewController';
+import { ViewHandle } from './types';
+
+/**
+ * Allows creating and managing view panels. View panels currently are displayed at the right of the sidebar and allows displaying any HTML content (within a webview) and update it in real-time. For example
+ * it could be used to display a table of content for the active note, or display various metadata or graph.
+ *
+ * [View the demo plugin](https://github.com/laurent22/joplin/CliClient/tests/support/plugins/toc)
+ */
+export default class JoplinViewsPanels {
+
+	private store: any;
+	private plugin: Plugin;
+
+	constructor(plugin: Plugin, store: any) {
+		this.store = store;
+		this.plugin = plugin;
+	}
+
+	private controller(handle:ViewHandle):WebviewController {
+		return this.plugin.viewController(handle) as WebviewController;
+	}
+
+	/**
+	 * Creates a new panel
+	 */
+	async create():Promise<ViewHandle> {
+		const handle = createViewHandle(this.plugin);
+		const controller = new WebviewController(handle, this.plugin.id, this.store, this.plugin.baseDir);
+		this.plugin.addViewController(controller);
+		return handle;
+	}
+
+	/**
+	 * Sets the panel webview HTML
+	 */
+	async setHtml(handle:ViewHandle, html:string) {
+		return this.controller(handle).html = html;
+	}
+
+	/**
+	 * Adds and loads a new JS or CSS files into the panel.
+	 */
+	async addScript(handle:ViewHandle, scriptPath:string) {
+		return this.controller(handle).addScript(scriptPath);
+	}
+
+	/**
+	 * Called when a message is sent from the webview (using postMessage).
+	 */
+	async onMessage(handle:ViewHandle, callback:Function) {
+		return this.controller(handle).onMessage(callback);
+	}
+
+}

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

@@ -0,0 +1,30 @@
+import { ToolbarButtonLocation } from './types';
+import Plugin from '../Plugin';
+import ToolbarButtonController from '../ToolbarButtonController';
+import createViewHandle from '../utils/createViewHandle';
+
+/**
+ * Allows creating and managing toolbar buttons.
+ *
+ * [View the demo plugin](https://github.com/laurent22/joplin/CliClient/tests/support/plugins/register_command)
+ */
+export default class JoplinViewsToolbarButtons {
+
+	private store: any;
+	private plugin: Plugin;
+
+	constructor(plugin: Plugin, store: any) {
+		this.store = store;
+		this.plugin = plugin;
+	}
+
+	/**
+	 * Creates a new toolbar button and associate it with the given command.
+	 */
+	async create(commandName:string, location:ToolbarButtonLocation) {
+		const handle = createViewHandle(this.plugin);
+		const controller = new ToolbarButtonController(handle, this.plugin.id, this.store, commandName, location);
+		this.plugin.addViewController(controller);
+	}
+
+}

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

@@ -0,0 +1,68 @@
+import eventManager from 'lib/eventManager';
+
+/**
+ * @ignore
+ */
+const Note = require('lib/models/Note');
+
+/**
+ * The workspace service provides access to all the parts of Joplin that are being worked on - i.e. the currently selected notes or notebooks as well
+ * as various related events, such as when a new note is selected, or when the note content changes.
+ *
+ * [View the demo plugin](https://github.com/laurent22/joplin/CliClient/tests/support/plugins)
+ */
+export default class JoplinWorkspace {
+	// TODO: unregister events when plugin is closed or disabled
+
+	private store: any;
+	// private implementation_:any;
+
+	constructor(_implementation:any, store: any) {
+		this.store = store;
+		// this.implementation_ = implementation;
+	}
+
+	/**
+	 * Called when a new note or notes are selected.
+	 */
+	async onNoteSelectionChange(callback: Function) {
+		eventManager.appStateOn('selectedNoteIds', callback);
+	}
+
+	/**
+	 * Called when the content of a note changes.
+	 */
+	async onNoteContentChange(callback: Function) {
+		eventManager.on('noteContentChange', callback);
+	}
+
+	/**
+	 * Called when an alarm associated with a to-do is triggered.
+	 */
+	async onNoteAlarmTrigger(callback:Function) {
+		eventManager.on('noteAlarmTrigger', callback);
+	}
+
+	/**
+	 * Called when the synchronisation process has finished.
+	 */
+	async onSyncComplete(callback:Function) {
+		eventManager.on('syncComplete', callback);
+	}
+
+	/**
+	 * Gets the currently selected note
+	 */
+	async selectedNote():Promise<any> {
+		const noteIds = this.store.getState().selectedNoteIds;
+		if (noteIds.length !== 1) { return null; }
+		return Note.load(noteIds[0]);
+	}
+
+	/**
+	 * Gets the IDs of the selected notes (can be zero, one, or many). Use the data API to retrieve information about these notes.
+	 */
+	async selectedNoteIds():Promise<string[]> {
+		return this.store.getState().selectedNoteIds.slice();
+	}
+}

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

@@ -0,0 +1,252 @@
+// =================================================================
+// Command API types
+// =================================================================
+
+export interface Command {
+	name: string
+	label: string
+	iconName?: string,
+	execute(props:any):Promise<any>
+	isEnabled?(props:any):boolean
+	mapStateToProps?(state:any):any
+}
+
+// =================================================================
+// Interop API types
+// =================================================================
+
+export enum FileSystemItem {
+	File = 'file',
+	Directory = 'directory',
+}
+
+export enum ImportModuleOutputFormat {
+	Markdown = 'md',
+	Html = 'html',
+}
+
+/**
+ * Used to implement a module to export data from Joplin. [View the demo plugin](https://github.com/laurent22/joplin/CliClient/tests/support/plugins/json_export) for an example.
+ *
+ * In general, all the event handlers you'll need to implement take a `context` object as a first argument. This object will contain the export or import path as well as various optional properties, such as which notes or notebooks need to be exported.
+ *
+ * To get a better sense of what it will contain it can be useful to print it using `console.info(context)`.
+ */
+export interface ExportModule {
+	/**
+	 * The format to be exported, eg "enex", "jex", "json", etc.
+	 */
+	format: string,
+
+	/**
+	 * The description that will appear in the UI, for example in the menu item.
+	 */
+	description: string,
+
+	/**
+	 * Whether the module will export a single file or multiple files in a directory. It affects the open dialog that will be presented to the user when using your exporter.
+	 */
+	target: FileSystemItem,
+
+	/**
+	 * Only applies to single file exporters or importers
+	 * It tells whether the format can package multiple notes into one file.
+	 * For example JEX or ENEX can, but HTML cannot.
+	 */
+	isNoteArchive: boolean,
+
+	/**
+	 * The extensions of the files exported by your module. For example, it is `["htm", "html"]` for the HTML module, and just `["jex"]` for the JEX module.
+	 */
+	fileExtensions?: string[],
+
+	/**
+	 * Called when the export process starts.
+	 */
+	onInit(context:ExportContext): Promise<void>;
+
+	/**
+	 * Called when an item needs to be processed. An "item" can be any Joplin object, such as a note, a folder, a notebook, etc.
+	 */
+	onProcessItem(context:ExportContext, itemType:number, item:any):Promise<void>;
+
+	/**
+	 * Called when a resource file needs to be exported.
+	 */
+	onProcessResource(context:ExportContext, resource:any, filePath:string):Promise<void>;
+
+	/**
+	 * Called when the export process is done.
+	 */
+	onClose(context:ExportContext):Promise<void>;
+}
+
+export interface ImportModule {
+	/**
+	 * The format to be exported, eg "enex", "jex", "json", etc.
+	 */
+	format: string,
+
+	/**
+	 * The description that will appear in the UI, for example in the menu item.
+	 */
+	description: string,
+
+	/**
+	 * Only applies to single file exporters or importers
+	 * It tells whether the format can package multiple notes into one file.
+	 * For example JEX or ENEX can, but HTML cannot.
+	 */
+	isNoteArchive: boolean,
+
+	/**
+	 * The type of sources that are supported by the module. Tells whether the module can import files or directories or both.
+	 */
+	sources: FileSystemItem[],
+
+	/**
+	 * Tells the file extensions of the exported files.
+	 */
+	fileExtensions?: string[],
+
+	/**
+	 * Tells the type of notes that will be generated, either HTML or Markdown (default).
+	 */
+	outputFormat?: ImportModuleOutputFormat,
+
+	/**
+	 * Called when the import process starts. There is only one event handler within which you should import the complete data.
+	 */
+	onExec(context:ImportContext): Promise<void>;
+}
+
+export interface ExportOptions {
+	format?: string,
+	path?:string,
+	sourceFolderIds?: string[],
+	sourceNoteIds?: string[],
+	modulePath?:string,
+	target?:FileSystemItem,
+}
+
+export interface ExportContext {
+	destPath: string,
+	options: ExportOptions,
+
+	/**
+	 * You can attach your own custom data using this propery - it will then be passed to each event handler, allowing you to keep state from one event to the next.
+	 */
+	userData?: any,
+}
+
+export interface ImportContext {
+	sourcePath: string,
+	options: any,
+	warnings: string[],
+}
+
+// =================================================================
+// Misc types
+// =================================================================
+
+export interface Script {
+	onStart?(event:any):Promise<void>,
+}
+
+// =================================================================
+// View API types
+// =================================================================
+
+export type ButtonId = string;
+
+export interface ButtonSpec {
+	id: ButtonId,
+	title?: string,
+	onClick?():void,
+}
+
+export interface CreateMenuItemOptions {
+	accelerator: string,
+}
+
+export enum MenuItemLocation {
+	File = 'file',
+	Edit = 'edit',
+	View = 'view',
+	Note = 'note',
+	Tools = 'tools',
+	Help = 'help',
+	Context = 'context',
+}
+
+export enum ToolbarButtonLocation {
+	/**
+	 * This toolbar in the top right corner of the application. It applies to the note as a whole, including its metadata.
+	 */
+	NoteToolbar = 'noteToolbar',
+
+	/**
+	 * This toolbar is right above the text editor. It applies to the note body only.
+	 */
+	EditorToolbar = 'editorToolbar',
+}
+
+export type ViewHandle = string;
+
+export interface EditorCommand {
+	name: string;
+	value?: any;
+}
+
+// =================================================================
+// Settings types
+// =================================================================
+
+export enum SettingItemType {
+	Int = 1,
+	String = 2,
+	Bool = 3,
+	Array = 4,
+	Object = 5,
+	Button = 6,
+}
+
+// Redefine a simplified interface to mask internal details
+// and to remove function calls as they would have to be async.
+export interface SettingItem {
+	value: any,
+	type: SettingItemType,
+	public: boolean,
+	label:string,
+
+	description?:string,
+	isEnum?: boolean,
+	section?: string,
+	options?:any,
+	appTypes?:string[],
+	secure?: boolean,
+	advanced?: boolean,
+	minimum?: number,
+	maximum?: number,
+	step?: number,
+}
+
+export interface SettingSection {
+	label: string,
+	iconName?: string,
+	description?: string,
+	name?: string,
+}
+
+// =================================================================
+// Data API types
+// =================================================================
+
+/**
+ * An array of at least one element and at most three elements.
+ *
+ * [0]: Resource name (eg. "notes", "folders", "tags", etc.)
+ * [1]: (Optional) Resource ID.
+ * [2]: (Optional) Resource link.
+ */
+export type Path = string[];

ReactNativeClient/lib/services/plugins/reducer.ts

@@ -0,0 +1,102 @@
+import { Draft } from 'immer';
+
+export interface ViewInfo {
+	view: any,
+	plugin: any,
+}
+
+interface PluginViewState {
+	id: string,
+	type: string,
+}
+
+interface PluginViewStates {
+	[key:string]: PluginViewState,
+}
+
+interface PluginState {
+	id:string,
+	views:PluginViewStates,
+}
+
+export interface PluginStates {
+	[key:string]: PluginState;
+}
+
+export interface State {
+	plugins: PluginStates,
+}
+
+export const stateRootKey = 'pluginService';
+
+export const defaultState:State = {
+	plugins: {},
+};
+
+export const utils = {
+	viewInfosByType: function(plugins:PluginStates, type:string):ViewInfo[] {
+		const output:ViewInfo[] = [];
+
+		for (const pluginId in plugins) {
+			const plugin = plugins[pluginId];
+			for (const viewId in plugin.views) {
+				const view = plugin.views[viewId];
+				if (view.type !== type) continue;
+
+				output.push({
+					plugin: plugin,
+					view: view,
+				});
+			}
+		}
+
+		return output;
+	},
+
+	commandNamesFromViews: function(plugins:PluginStates, toolbarType:string):string[] {
+		const infos = utils.viewInfosByType(plugins, 'toolbarButton');
+
+		return infos
+			.filter((info:ViewInfo) => info.view.location === toolbarType)
+			.map((info:ViewInfo) => info.view.commandName);
+	},
+};
+
+const reducer = (draft: Draft<any>, action:any) => {
+	if (action.type.indexOf('PLUGIN_') !== 0) return;
+
+	// All actions should be scoped to a plugin, except when adding a new plugin
+	if (!action.pluginId && action.type !== 'PLUGIN_ADD') throw new Error(`action.pluginId is required. Action was: ${JSON.stringify(action)}`);
+
+	try {
+		switch (action.type) {
+
+		case 'PLUGIN_ADD':
+
+			if (draft.pluginService.plugins[action.plugin.id]) throw new Error(`Plugin is already loaded: ${JSON.stringify(action)}`);
+			draft.pluginService.plugins[action.plugin.id] = action.plugin;
+			break;
+
+		case 'PLUGIN_VIEW_ADD':
+
+			draft.pluginService.plugins[action.pluginId].views[action.view.id] = { ...action.view };
+			break;
+
+		case 'PLUGIN_VIEW_PROP_SET':
+
+			draft.pluginService.plugins[action.pluginId].views[action.id][action.name] = action.value;
+			break;
+
+		case 'PLUGIN_VIEW_PROP_PUSH':
+
+			draft.pluginService.plugins[action.pluginId].views[action.id][action.name].push(action.value);
+			break;
+
+		}
+	} catch (error) {
+		error.message = `In plugin reducer: ${error.message} Action: ${JSON.stringify(action)}`;
+		throw error;
+	}
+};
+
+export default reducer;

ReactNativeClient/lib/services/plugins/sandboxProxy.ts

@@ -0,0 +1,42 @@
+export type Target = (name:string, args:any[]) => any;
+
+const handler:any = {};
+
+handler.get = function(target:Target, prop:string) {
+	let t = target as any;
+
+	// There's probably a cleaner way to do this but not sure how. The idea is to keep
+	// track of the calling chain current state. So if the user call `joplin.something.test("bla")`
+	// we know we need to pass "joplin.something.test" with args "bla" to the target.
+	// But also, if the user does this:
+	//
+	// const ns = joplin.view.dialogs;
+	// await ns.create();
+	// await ns.open();
+	//
+	// We need to know what "ns" maps to, so that's why call-specific context needs to be kept,
+	// and the easiest way to do this is to create a new target when the call chain starts,
+	// and attach a custom "__joplinNamespace" property to it.
+	if (!t.__joplinNamespace) {
+		const originalTarget = t;
+		const newTarget:any = (name:string, args:any[]) => {
+			return originalTarget(name, args);
+		};
+		newTarget.__joplinNamespace = [prop];
+		t = newTarget;
+	} else {
+		t.__joplinNamespace.push(prop);
+	}
+
+	return new Proxy(t, handler);
+};
+
+handler.apply = function(target:Target, _thisArg:any, argumentsList:any[]) {
+	const path = (target as any).__joplinNamespace.join('.');
+	(target as any).__joplinNamespace.pop();
+	return target(path, argumentsList);
+};
+
+export default function sandboxProxy(target:Target):any {
+	return new Proxy(target, handler);
+}

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

@@ -0,0 +1,8 @@
+import uuid from 'lib/uuid';
+import Plugin from '../Plugin';
+
+export type ViewHandle = string;
+
+export default function createViewHandle(plugin:Plugin):ViewHandle {
+	return `plugin-view-${plugin.id}-${uuid.createNano()}`;
+}

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

@@ -0,0 +1,45 @@
+import Global from '../api/Global';
+
+type EventHandler = (callbackId:string, args:any[]) => void;
+
+function createEventHandlers(arg:any, eventHandler:EventHandler) {
+	if (Array.isArray(arg)) {
+		for (let i = 0; i < arg.length; i++) {
+			arg[i] = createEventHandlers(arg[i], eventHandler);
+		}
+		return arg;
+	} else if (typeof arg === 'string' && arg.indexOf('___plugin_event_') === 0) {
+		const callbackId = arg;
+		return async (...args:any[]) => {
+			const result = await eventHandler(callbackId, args);
+			return result;
+		};
+	} else if (arg === null || arg === undefined) {
+		return arg;
+	} else if (typeof arg === 'object') {
+		for (const n in arg) {
+			arg[n] = createEventHandlers(arg[n], eventHandler);
+		}
+	}
+
+	return arg;
+}
+
+export default async function executeSandboxCall(pluginId:string, sandbox:Global, path:string, args:any[], eventHandler:EventHandler) {
+	const pathFragments = path.split('.');
+
+	let parent:any = null;
+	let fn:any = sandbox;
+
+	if (!fn) throw new Error(`No sandbox for plugin ${pluginId}`); // Sanity check as normally cannot happen
+
+	for (const pathFragment of pathFragments) {
+		parent = fn;
+		fn = fn[pathFragment];
+		if (!fn) throw new Error(`Property or method "${pathFragment}" does not exist in "${path}"`);
+	}
+
+	const convertedArgs = createEventHandlers(args, eventHandler);
+
+	return fn.apply(parent, convertedArgs);
+}

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

@@ -0,0 +1,37 @@
+import { PluginManifest, PluginPermission } from './types';
+
+export default function manifestFromObject(o:any):PluginManifest {
+
+	const getString = (name:string, required:boolean = true, defaultValue:string = ''):string => {
+		if (required && !o[name]) throw new Error(`Missing required field: ${name}`);
+		if (!o[name]) return defaultValue;
+		if (typeof o[name] !== 'string') throw new Error(`Field must be a string: ${name}`);
+		return o[name];
+	};
+
+	const getNumber = (name:string, required:boolean = true):number => {
+		if (required && !o[name]) throw new Error(`Missing required field: ${name}`);
+		if (!o[name]) return 0;
+		if (typeof o[name] !== 'number') throw new Error(`Field must be a number: ${name}`);
+		return o[name];
+	};
+
+	const permissions:PluginPermission[] = [];
+
+	const manifest = {
+		manifest_version: getNumber('manifest_version', true),
+		name: getString('name', true),
+		version: getString('version', true),
+		description: getString('description', false),
+		homepage_url: getString('homepage_url'),
+		permissions: permissions,
+	};
+
+	if (o.permissions) {
+		for (const p of o.permissions) {
+			manifest.permissions.push(p);
+		}
+	}
+
+	return manifest;
+}

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

@@ -0,0 +1,29 @@
+let eventHandlerIndex_ = 1;
+
+export interface EventHandlers {
+	[key:string]: Function;
+}
+
+export default function mapEventHandlersToIds(arg:any, eventHandlers:EventHandlers) {
+	if (Array.isArray(arg)) {
+		for (let i = 0; i < arg.length; i++) {
+			arg[i] = mapEventHandlersToIds(arg[i], eventHandlers);
+		}
+		return arg;
+	} else if (typeof arg === 'function') {
+		const id = `___plugin_event_${eventHandlerIndex_}`;
+		eventHandlerIndex_++;
+		eventHandlers[id] = arg;
+		return id;
+	} else if (arg === null) {
+		return null;
+	} else if (arg === undefined) {
+		return undefined;
+	} else if (typeof arg === 'object') {
+		for (const n in arg) {
+			arg[n] = mapEventHandlersToIds(arg[n], eventHandlers);
+		}
+	}
+
+	return arg;
+}

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

@@ -0,0 +1,12 @@
+export enum PluginPermission {
+	Model = 'model',
+}
+
+export interface PluginManifest {
+	manifest_version: number,
+	name: string,
+	version: string,
+	description?: string,
+	homepage_url?: string,
+	permissions?: PluginPermission[],
+}

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

@@ -0,0 +1,8 @@
+'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