Skip to content

Commit

Permalink
tweak document to remove redundant package use in example
Browse files Browse the repository at this point in the history
  • Loading branch information
rhysd committed May 14, 2024
1 parent 686ee63 commit f4e9a5a
Show file tree
Hide file tree
Showing 2 changed files with 16 additions and 10 deletions.
23 changes: 13 additions & 10 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ remark-emoji
[![npm][npm-badge]][npm]

[remark-emoji][npm] is a [remark](https://github.com/remarkjs/remark) plugin to replace `:emoji:` to real UTF-8
emojis in text. Accessibility support and Emoticon support are optionally available.
emojis in Markdown text. Accessibility support and Emoticon support are optionally available.

## Demo

Expand All @@ -17,15 +17,15 @@ remark().use(emoji [, options]);
```

```javascript
import {remark} from 'remark';
import { remark } from 'remark';
import emoji from 'remark-emoji';

const doc = 'Emojis in this text will be replaced: :dog: :+1:';
const doc = 'Emojis in this text will be replaced: :dog::+1:';
const processor = remark().use(emoji);
const file = await processor.process(doc);

console.log(String(file));
// => Emojis in this text will be replaced: 🐶 👍
// => Emojis in this text will be replaced: 🐶👍
```

Note that this package is [ESM only][esm-only] from v3.0.0 since remark packages migrated to ESM.
Expand All @@ -36,15 +36,17 @@ Note that this package is [ESM only][esm-only] from v3.0.0 since remark packages

Setting to `true` makes the converted emoji text accessible with `role` and `aria-label` attributes. Each emoji
text is wrapped with `<span>` element. The `role` and `aria-label` attribute are not allowed by default. Please
add them to the sanitization schema used by remark's HTML transformer.
add them to the sanitization schema used by remark's HTML transformer. The default sanitization schema is defined
in [hast-util-sanitize](https://www.npmjs.com/package/hast-util-sanitize/v/1.3.1) package.

For example,

```javascript
import {remark} from 'remark';
import remarkParse from 'remark-parse';
import toHtml from 'remark-html';
import {defaultSchema} from 'hast-util-sanitize'
import { defaultSchema } from 'hast-util-sanitize'
import emoji from 'remark-emoji';
import { unified } from 'unified'

// Allow using `role` and `aria-label` attributes in transformed HTML document
const schema = structuredClone(defaultSchema);
Expand All @@ -54,7 +56,8 @@ if ('span' in schema.attributes) {
schema.attributes.span = ['role', 'ariaLabel'];
}

const processor = remark()
const processor = unified()
.use(remarkParse)
.use(emoji, { accessible: true })
.use(toHtml, { sanitize: schema });
const file = await processor.process('Hello :dog:!');
Expand Down Expand Up @@ -95,8 +98,8 @@ Distributed under [the MIT License](LICENSE).



[ci-badge]: https://github.com/rhysd/remark-emoji/workflows/CI/badge.svg?branch=master&event=push
[ci]: https://github.com/rhysd/remark-emoji/actions?query=workflow%3ACI
[ci-badge]: https://github.com/rhysd/remark-emoji/actions/workflows/ci.yml/badge.svg
[ci]: https://github.com/rhysd/remark-emoji/actions/workflows/ci.yml
[npm-badge]: https://badge.fury.io/js/remark-emoji.svg
[npm]: https://www.npmjs.com/package/remark-emoji
[esm-only]: https://gist.github.com/sindresorhus/a39789f98801d908bbc7ff3ecc99d99c
3 changes: 3 additions & 0 deletions index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,9 @@ const RE_EMOJI = /:\+1:|:-1:|:[\w-]+:/g;
const RE_SHORT = /[$@|*'",;.=:\-)([\]\\/<>038BOopPsSdDxXzZ]{2,5}/g;
const RE_PUNCT = /(?:_|-(?!1))/g;

/**
* Configuration of remark-emoji plugin.
*/
export interface RemarkEmojiOptions {
/**
* Makes converted emoji and emoticon texts accessible by wrapping them with
Expand Down

0 comments on commit f4e9a5a

Please sign in to comment.