Skip to content
This repository was archived by the owner on Jun 14, 2023. It is now read-only.
Open
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
43 changes: 43 additions & 0 deletions docs/editor/extensions/view-plugins.md
Original file line number Diff line number Diff line change
Expand Up @@ -57,6 +57,49 @@ 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](decorations.md) from your view plugin to change how to display the document.