diff --git a/docs/plugins.md b/docs/plugins.md new file mode 100644 index 0000000000000000000000000000000000000000..58af6267784516957b43981226f5e22bbd95820e --- /dev/null +++ b/docs/plugins.md @@ -0,0 +1,82 @@ +# Plugin Integration with Minerva + +To seamlessly integrate your plugin with Minerva, follow these guidelines to ensure smooth registration, HTML structure creation, and interaction with Minerva. + +## Registering plugin with Minerva + +Your plugin should utilize the `window.minerva.plugins.registerPlugin` method for plugin registration. When the plugin is initialized, this method should be called inside plugin initialization method. The function `window.minerva.plugins.registerPlugin` takes an object as an argument: + +```ts +{ + pluginName: string; + pluginVersion: string; + pluginUrl: string; +} +``` + +##### Usage example: + +```javascript +window.minerva.plugins.registerPlugin({ + pluginName: 'Your Plugin Name', + pluginVersion: '1.8.3', + pluginUrl: 'https://example.com/plugins/plugin.js', +}); +``` + +## Creating Plugin's HTML Structure + +The `window.minerva.plugins.registerPlugin` method returns object with `element` property which is a DOM element, allowing your plugin to append its HTML content to the DOM. Use this element to create and modify the HTML structure of your plugin. + +``` +// Plugin registration +const { element } = window.minerva.plugins.registerPlugin({ + pluginName: "Your Plugin Name", + pluginVersion: "1.0.0", + pluginUrl: "your-plugin-url", +}); + +// Modify plugin's HTML structure +const yourContent = document.createElement('div'); +yourContent.textContent = "Your Plugin Content"; +element.appendChild(yourContent); +``` + +## Interacting with Minerva + +All interactions with Minerva should happen through the `window.minerva` object. This object includes: + +- configuration: includes information about available types of elements, reactions, miriam types, configuration options, map types and so on +- methods will be added in the future + +## Example of plugin code before bundling: + +```javascript +require('../css/styles.css'); +const $ = require('jquery'); + +let pluginContainer; + +const createStructure = () => { + $( + `<div class="flex flex-col items-center p-2.5"> + <h1 class="text-lg">My plugin ${minerva.configuration.overlayTypes[0].name}</h1> + <input class="mt-2.5 p-2.5 rounded-s font-semibold outline-none border border-[#cacaca] bg-[#f7f7f8]" value="https://minerva-dev.lcsb.uni.lu/minerva"> + </div>`, + ).appendTo(pluginContainer); +}; + +function initPlugin() { + const { element } = window.minerva.plugins.registerPlugin({ + pluginName: 'perfect-plugin', + pluginVersion: '9.9.9', + pluginUrl: 'https://example.com/plugins/perfect-plugin.js', + }); + + pluginContainer = element; + + createStructure(); +} + +initPlugin(); +```