Plugins: Add support for loading application chrome and note CSS from the plugin

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

@@ -13,18 +13,18 @@ export default class Global {
 
 	private joplin_: Joplin;
 
-	constructor(implementation: any, plugin: Plugin, store: any) {
+	public constructor(implementation: any, plugin: Plugin, store: any) {
 		this.joplin_ = new Joplin(implementation, plugin, store);
 	}
 
-	get joplin(): Joplin {
+	public get joplin(): Joplin {
 		return this.joplin_;
 	}
 
 	// 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 {
+	public get process(): any {
 		return process;
 	}
 

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

@@ -9,6 +9,7 @@ import JoplinInterop from './JoplinInterop';
 import JoplinSettings from './JoplinSettings';
 import JoplinContentScripts from './JoplinContentScripts';
 import JoplinClipboard from './JoplinClipboard';
+import JoplinWindow from './JoplinWindow';
 
 /**
  * This is the main entry point to the Joplin API. You can access various services using the provided accessors.
@@ -37,8 +38,9 @@ export default class Joplin {
 	private settings_: JoplinSettings = null;
 	private contentScripts_: JoplinContentScripts = null;
 	private clipboard_: JoplinClipboard = null;
+	private window_: JoplinWindow = null;
 
-	constructor(implementation: any, plugin: Plugin, store: any) {
+	public constructor(implementation: any, plugin: Plugin, store: any) {
 		this.data_ = new JoplinData();
 		this.plugins_ = new JoplinPlugins(plugin);
 		this.workspace_ = new JoplinWorkspace(store);
@@ -49,25 +51,30 @@ export default class Joplin {
 		this.settings_ = new JoplinSettings(plugin);
 		this.contentScripts_ = new JoplinContentScripts(plugin);
 		this.clipboard_ = new JoplinClipboard(implementation.clipboard, implementation.nativeImage);
+		this.window_ = new JoplinWindow(implementation.window, plugin, store);
 	}
 
-	get data(): JoplinData {
+	public get data(): JoplinData {
 		return this.data_;
 	}
 
-	get clipboard(): JoplinClipboard {
+	public get clipboard(): JoplinClipboard {
 		return this.clipboard_;
 	}
 
-	get plugins(): JoplinPlugins {
+	public get window(): JoplinWindow {
+		return this.window_;
+	}
+
+	public get plugins(): JoplinPlugins {
 		return this.plugins_;
 	}
 
-	get workspace(): JoplinWorkspace {
+	public get workspace(): JoplinWorkspace {
 		return this.workspace_;
 	}
 
-	get contentScripts(): JoplinContentScripts {
+	public get contentScripts(): JoplinContentScripts {
 		return this.contentScripts_;
 	}
 
@@ -77,23 +84,23 @@ export default class Joplin {
 	 * Not sure if it's the best way to hook into the app
 	 * so for now disable filters.
 	 */
-	get filters(): JoplinFilters {
+	public get filters(): JoplinFilters {
 		return this.filters_;
 	}
 
-	get commands(): JoplinCommands {
+	public get commands(): JoplinCommands {
 		return this.commands_;
 	}
 
-	get views(): JoplinViews {
+	public get views(): JoplinViews {
 		return this.views_;
 	}
 
-	get interop(): JoplinInterop {
+	public get interop(): JoplinInterop {
 		return this.interop_;
 	}
 
-	get settings(): JoplinSettings {
+	public get settings(): JoplinSettings {
 		return this.settings_;
 	}
 

packages/lib/services/plugins/api/JoplinWindow.ts

@@ -0,0 +1,45 @@
+import Plugin from '../Plugin';
+import * as fs from 'fs-extra';
+
+export interface Implementation {
+	injectCustomStyles(elementId: string, cssFilePath: string): Promise<void>;
+}
+
+export default class JoplinWindow {
+
+	private plugin_: Plugin;
+	private store_: any;
+	private implementation_: Implementation;
+
+	public constructor(implementation: Implementation, plugin: Plugin, store: any) {
+		this.implementation_ = implementation;
+		this.plugin_ = plugin;
+		this.store_ = store;
+	}
+
+	/**
+	 * Loads a chrome CSS file. It will apply to the window UI elements, except
+	 * for the note viewer. It is the same as the "Custom stylesheet for
+	 * Joplin-wide app styles" setting. See the [Load CSS Demo](https://github.com/laurent22/joplin/tree/dev/packages/app-cli/tests/support/plugins/load_css)
+	 * for an example.
+	 */
+	public async loadChromeCssFile(filePath: string) {
+		await this.implementation_.injectCustomStyles(`pluginStyles_${this.plugin_.id}`, filePath);
+	}
+
+	/**
+	 * Loads a note CSS file. It will apply to the note viewer, as well as any
+	 * exported or printed note. It is the same as the "Custom stylesheet for
+	 * rendered Markdown" setting. See the [Load CSS Demo](https://github.com/laurent22/joplin/tree/dev/packages/app-cli/tests/support/plugins/load_css)
+	 * for an example.
+	 */
+	public async loadNoteCssFile(filePath: string) {
+		const cssString = await fs.readFile(filePath, 'utf8');
+
+		this.store_.dispatch({
+			type: 'CUSTOM_CSS_APPEND',
+			css: cssString,
+		});
+	}
+
+}