mirror of
https://github.com/penpot/penpot-plugins.git
synced 2025-01-08 07:50:44 -05:00
78 lines
1.2 KiB
Markdown
78 lines
1.2 KiB
Markdown
# Plugin usage
|
|
|
|
If you want your plugin to be opened in a modal, then use open UI:
|
|
|
|
```ts
|
|
penpot.ui.open('Plugin name', 'http://localhost:4201', {
|
|
width: 500,
|
|
height: 600,
|
|
});
|
|
```
|
|
|
|
Get state:
|
|
|
|
```ts
|
|
// file file state
|
|
penpot.ui.getFileState();
|
|
|
|
// file page state
|
|
penpot.ui.getPageState();
|
|
|
|
// selection id
|
|
penpot.ui.getSelection();
|
|
|
|
// current theme (dark/light)
|
|
penpot.ui.getTheme();
|
|
```
|
|
|
|
### Messages
|
|
|
|
Receive message from iframe:
|
|
|
|
```ts
|
|
penpot.ui.onMessage((message) => {
|
|
console.log('Received message:', message);
|
|
});
|
|
```
|
|
|
|
Send message from iframe:
|
|
|
|
```ts
|
|
parent.postMessage({ content: 'text' }, '*');
|
|
```
|
|
|
|
Send message from plugin
|
|
|
|
```ts
|
|
penpot.ui.sendMessage({ type: 'hello' });
|
|
```
|
|
|
|
Send message from plugin:
|
|
|
|
```ts
|
|
window.addEventListener('message', function (event) {
|
|
console.log('Message received from plugin: ', event.data);
|
|
});
|
|
```
|
|
|
|
### Events
|
|
|
|
Current events `pagechange`, `filechange`,`selectionchange` and `themechange`.
|
|
|
|
```ts
|
|
const event = (page) => {
|
|
console.log(page.name);
|
|
};
|
|
|
|
penpot.on('pagechange', event);
|
|
|
|
penpot.off('pagechange', event);
|
|
```
|
|
|
|
### Requests
|
|
|
|
Same as the browser fetch API.
|
|
|
|
```ts
|
|
penpot.fetch('http://example.com/movies.json');
|
|
```
|