Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/dkeeghan/slackformatter.js
Formats messages from the Slack API into HTML
https://github.com/dkeeghan/slackformatter.js
formatter javascript parser slack slack-api
Last synced: 9 days ago
JSON representation
Formats messages from the Slack API into HTML
- Host: GitHub
- URL: https://github.com/dkeeghan/slackformatter.js
- Owner: dkeeghan
- License: bsd-3-clause
- Created: 2017-12-29T00:03:30.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2018-01-06T00:22:46.000Z (about 7 years ago)
- Last Synced: 2025-01-21T22:42:45.542Z (21 days ago)
- Topics: formatter, javascript, parser, slack, slack-api
- Language: JavaScript
- Size: 7.81 KB
- Stars: 0
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# slackformatter.js
Formats messages from the Slack API into HTML
## Prerequisites
This library requires [js-emoji](https://github.com/iamcal/js-emoji).
It can be installed from the git repo, or using `npm install emoji-js` in your project.
## Installation
This library uses the UMD wrapper and can be loaded as a browser global as `SLACKFORMATTER`. The following examples will all use the browser global, switch the terminology to match your import flavour of choice.
## Usage
There are three things you should do to setup slackformatter.js:
1. Configure the options to your liking
2. Add a list of users from the Slack instance so the formatter can parse user IDs into user names
3. Add a list of custom emoji from the Slack instance
### `SLACKFORMATTER.setOptions(options)`
There are four options you can set for slackformatter.
1. `emojiPath` - path to the default emoji images used by emoji-js. _Default `/assets/img/emoji/`_
2. `channelClass` - class name for the channels. _Default `slack-channel`_
3. `userClass` - class name for the users. _Default `slack-user`_
4. `emojiClass` - class name for the emoji. _Default `slack-emoji`_
4. `preClass` - class name for the pre tag. _Default `is-pre`_
You can pass through an object with one or more of these options to update the settings of the plugin. Be sure to do this before anything else.
### `SLACKFORMATTER.addEmoji(emoji)`
Do a Slack API call to `emoji.list` and you'll get an array of objects back from the response (`response[0].emoji`).
Pass this array directly into `SLACKFORMATTER.addEmoji(emoji)`.
```js
doSlackAPICall('emoji.list').then(function(response) {
SLACKFORMATTER.addEmoji(response[0].emoji);
});
```
_You may want to periodically update this is you have new custom emoji added all the time and you have a long running application._
### `SLACKFORMATTER.addUsers(users)`
Do a Slack API call to `users.list` and you'll get an array of objects back from the response (`response[0].members`).
Pass this array directly into `SLACKFORMATTER.addUsers(users)`.
```js
doSlackAPICall('users.list').then(function(response) {
SLACKFORMATTER.addEmoji(response[0].members);
});
```
_You may want to periodically update this is you have new users added all the time and you have a long running application._
### `SLACKFORMATTER.get(text)`
Once you have the custom emoji and users added, now all you need to do is call `SLACKFORMATTER.get(text)` where the text is any Slack formatted text (e.g. `message.text` or `message.file.initial_comment.comment`).
## Output
### General formatting
#### Bold
`*bold text*` becomes `bold text`.
#### Italics
`_italics text_` becomes `italics text`.
#### Strikeout
`~striked text~` becomes `striked text`.
#### Code
``code`` becomes `code`.
#### Preformatted text
````preformatted```` becomes `preformatted`.
Where `is-pre` is the class name you've specified in the options. By default it is `is-pre`.
#### Links
`` becomes `https://github.com/dkeeghan/slackformatter`
#### Combinations
slackformatter also supports combinations, so `*_bold italics_*` becomes `bold italics`.
### Usernames
`<@USER_ID>` becomes `USERNAME`.
Where `slack-user` is the class name you've specified in the options. By default it is `slack-user`.
You can then use CSS pseudo elements to add an @ symbol.
### Channels
`<#CHANNEL_ID|CHANNEL_NAME>` becomes `CHANNEL_NAME`.
Where `slack-channel` is the class name you've specified in the options. By default it is `slack-channel`.
You can then use a CSS psuedo element to add a # symbol.
### Default Emoji
`:smile:` becomes ``
Where `/path/to/emoji` is where you've configured slackformatter to look for the images when you set the options. The default location is `/assets/img/emoji/`.
### Custom Emoji
`:party_parrot:` becomes ``
Where `slack-emoji` is the class name you've specified in the options. By default it is `slack-emoji`.
## Example
You can see an example of slackformatter running on [SlackViz](https://slackviz.com).