# Develop with Writer

### Getting started

Writer plugin gives you methods to use in your plugin to open articles in Writer application if it's mounted in the same workspace with your plugin, or open an article with the Naviga writer in a new tab.

Writer register it's own methods with [Dashboard Actions](https://docs.infomaker.io/dashboard-plugin/agent/actions)

You can use any of these actions in your plugin.

### Available actions

| ID                            | Descriptions                                                                                                              |
| ----------------------------- | ------------------------------------------------------------------------------------------------------------------------- |
| com.naviga.writer:openArticle | An action to handle open an article in Writer application with article uuid                                               |
| com.naviga.writer:get:article | An action type promise, it will resolve with opened article {url, uuid}, and rejects if Writer application is not mounted |

### openArticle action

If your plugin is running beside Writer plugin in the same workspace openArticle action will open the requested article within Writer plugin by calling openArticle action with passing the article {uuid, url}

### get:article action

If your plugin is running beside Writer plugin in the same workspace get:article action will return the opened article {uuid, url} by resolving a promise.

###

### An example to how to open an article with Writer

In your plugin you can import **useAction** from Dashboard, so you can "import" Writer actions to your plugin.

{% tabs %}
{% tab title="Hook component" %}

```jsx
import { useAction } from 'Dashboard'
import { useRef, useEffect } from 'react'

const MyAwesomeComponent = props => {
    const openArticle = useRef()
    
    useEffect(() => {
        const openArticleAction = useAction('com.naviga.writer:openArticle')
        openArticle.current = openArticleAction
    }, [])
    
    /**
        Now you can use openArticle all around your plugin.
        In order to open an article in Writer you can call
        openArticle.current() with the article uuid, url
        
        const article = {
            uuid: '838d42cf-507a-c701-f46d-6cd0a738cca4',
            url: 'https://writer.tryout.infomaker.io/838d42cf-507a-c701-f46d-6cd0a738cca4'
        }
        
        openArticle.current(article)
    */
}
```

{% endtab %}

{% tab title="Class component" %}

```jsx
import { Component } from 'react'
import { useAction } from 'Dashboard'

class MyAwesomeComponent extends Component {
    constructor(props) {
        super(props)
        
        this.openArticle = null
    }
    
    componentDidMount() {
        const openArticleAction = useAction('com.naviga.writer:openArticle')
        this.openArticle = openArticleAction
    }
    
    /**
        Now you can use openArticle all around your plugin.
        In order to open an article in Writer you can call
        this.openArticle() with the article uuid, url
        
        const article = {
            uuid: '838d42cf-507a-c701-f46d-6cd0a738cca4',
            url: 'https://writer.tryout.infomaker.io/838d42cf-507a-c701-f46d-6cd0a738cca4'
        }
        
        this.openArticle(article)
    */
}
```

{% endtab %}
{% endtabs %}

Here we used `com.naviga.writer:openArticle` action to open the article with given uuid === `838d42cf-507a-c701-f46d-6cd0a738cca4`

{% hint style="info" %}
If you called openArticle action while Writer plugin is not mounted, The requested article will open in a new tab with the Naviga Writer.
{% endhint %}

###

### An example to how to get article from Writer

{% code title="" %}

```jsx
const getArticleAction = useAction('com.naviga.writer:get:article')
const getArticle = getArticleAction

const article = await getArticle()

console.log(article)
/**
    {
        uuid: '838d42cf-507a-c701-f46d-6cd0a738cca4',
        url: 'https://writer.tryout.infomaker.io/838d42cf-507a-c701-f46d-6cd0a738cca4'
    }
*/
```

{% endcode %}

{% hint style="info" %}
If you called get:article action while Writer plugin is not mounted, get:article action will reject the promise
{% endhint %}