From 9e1189f48b38d81710df01917d7bf8198ea980a7 Mon Sep 17 00:00:00 2001 From: Cass C Date: Tue, 20 Jun 2023 16:53:19 -0400 Subject: [PATCH 1/2] Add example of passing settings to view plugin --- en/Plugins/Editor/View plugins.md | 44 +++++++++++++++++++++++++++++++ 1 file changed, 44 insertions(+) diff --git a/en/Plugins/Editor/View plugins.md b/en/Plugins/Editor/View plugins.md index deceb503..98ea8b33 100644 --- a/en/Plugins/Editor/View plugins.md +++ b/en/Plugins/Editor/View plugins.md @@ -49,6 +49,50 @@ The three methods of the view plugin control its lifecycle: While the view plugin in the example works, it doesn't do much. If you want to better understand what causes the plugin to update, you can add a `console.log(update);` line to the `update()` method to print all updates to the console. +## Passing parent plugin settings to a view plugin + +The example above can be modified by using a class expression instead of a class declaration in order to bind your plugin settings to the view plugin. Here's an example pulled from [Dataview](https://github.com/blacksmithgu/obsidian-dataview). + + +```JS +export function inlinePlugin(index: FullIndex, settings: DataviewSettings, api: DataviewApi) { + return ViewPlugin.fromClass( + class { + decorations: DecorationSet; + constructor(view: EditorView) { + this.decorations = + inlineRender(view, index, settings, api) ?? + Decoration.none; + } + + update(update: ViewUpdate) { + // only activate in LP and not source mode + // @ts-ignore + if (!update.state.field(editorLivePreviewField)) { + this.decorations = Decoration.none; + return; + } + if (update.docChanged || update.viewportChanged || update.selectionSet) { + this.decorations = + inlineRender(update.view, index, settings, api) ?? + Decoration.none; + } + } + }, + { decorations: v => v.decorations } + ); +} +``` + ++ + +`onload()` +```JS +// editor extension for inline queries +this.cmExtension = [inlinePlugin(this.index, this.settings, this.api)]; +this.registerEditorExtension(this.cmExtension); +``` + ## Next steps Provide [[Decorations]] from your view plugin to change how to display the document. From e046897d36ce2a15dbdfbc7850e6013a5f00f633 Mon Sep 17 00:00:00 2001 From: Cass C Date: Tue, 4 Jul 2023 16:12:50 -0400 Subject: [PATCH 2/2] Update View plugins.md --- en/Plugins/Editor/View plugins.md | 47 ++++++------------------------- 1 file changed, 8 insertions(+), 39 deletions(-) diff --git a/en/Plugins/Editor/View plugins.md b/en/Plugins/Editor/View plugins.md index 98ea8b33..6b9fd337 100644 --- a/en/Plugins/Editor/View plugins.md +++ b/en/Plugins/Editor/View plugins.md @@ -49,50 +49,19 @@ The three methods of the view plugin control its lifecycle: While the view plugin in the example works, it doesn't do much. If you want to better understand what causes the plugin to update, you can add a `console.log(update);` line to the `update()` method to print all updates to the console. -## Passing parent plugin settings to a view plugin - -The example above can be modified by using a class expression instead of a class declaration in order to bind your plugin settings to the view plugin. Here's an example pulled from [Dataview](https://github.com/blacksmithgu/obsidian-dataview). +## Passing root plugin's settings to a view plugin +If you need to reference your plugin's settings inside of a view plugin, define the view plugin class in a location where the settings are in scope (e.g. inside the root's `onload()` instead of the top-level scope) so the definition can enclose them. ```JS -export function inlinePlugin(index: FullIndex, settings: DataviewSettings, api: DataviewApi) { - return ViewPlugin.fromClass( - class { - decorations: DecorationSet; - constructor(view: EditorView) { - this.decorations = - inlineRender(view, index, settings, api) ?? - Decoration.none; - } - - update(update: ViewUpdate) { - // only activate in LP and not source mode - // @ts-ignore - if (!update.state.field(editorLivePreviewField)) { - this.decorations = Decoration.none; - return; - } - if (update.docChanged || update.viewportChanged || update.selectionSet) { - this.decorations = - inlineRender(update.view, index, settings, api) ?? - Decoration.none; - } - } - }, - { decorations: v => v.decorations } - ); -} -``` +const viewPlugin = ViewPlugin.fromClass( + class { + // use settings wherever needed + } +); -+ - -`onload()` -```JS -// editor extension for inline queries -this.cmExtension = [inlinePlugin(this.index, this.settings, this.api)]; -this.registerEditorExtension(this.cmExtension); +this.registerEditorExtension(viewPlugin); ``` - ## Next steps Provide [[Decorations]] from your view plugin to change how to display the document.