Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/zestia/ember-wrap-urls
:link: Automatically turns URLs into Hyperlinks for user-generated-content
https://github.com/zestia/ember-wrap-urls
ember hyperlinks urls user-generated-content
Last synced: about 2 months ago
JSON representation
:link: Automatically turns URLs into Hyperlinks for user-generated-content
- Host: GitHub
- URL: https://github.com/zestia/ember-wrap-urls
- Owner: zestia
- License: mit
- Created: 2016-03-30T09:30:43.000Z (over 8 years ago)
- Default Branch: main
- Last Pushed: 2024-09-06T09:58:33.000Z (4 months ago)
- Last Synced: 2024-10-31T01:12:15.509Z (about 2 months ago)
- Topics: ember, hyperlinks, urls, user-generated-content
- Language: JavaScript
- Homepage:
- Size: 5.44 MB
- Stars: 7
- Watchers: 17
- Forks: 4
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE.md
Awesome Lists containing this project
README
# @zestia/ember-wrap-urls
[![Ember Observer][ember-observer-badge]][ember-observer-url]
[npm-badge]: https://img.shields.io/npm/v/@zestia/ember-wrap-urls.svg
[npm-badge-url]: https://www.npmjs.com/package/@zestia/ember-wrap-urls
[github-actions-badge]: https://github.com/zestia/ember-wrap-urls/workflows/CI/badge.svg
[github-actions-url]: https://github.com/zestia/ember-wrap-urls/actions
[ember-observer-badge]: https://emberobserver.com/badges/-zestia-ember-wrap-urls.svg
[ember-observer-url]: https://emberobserver.com/addons/@zestia/ember-wrap-urls
This Ember addon takes some text, which may or may not contain URLs and renders the text and each URL as an Ember component.
## Installation
```
ember install @zestia/ember-wrap-urls
```
Add the following to `~/.npmrc` to pull @zestia scoped packages from Github instead of NPM.
```
@zestia:registry=https://npm.pkg.github.com
//npm.pkg.github.com/:_authToken=
```
## Demo
https://zestia.github.io/ember-wrap-urls
## Example
Given the following:
```hbs
```
Will render:
```hbs
Check out my link http://example.com
```
## `WrapUrls`
### Arguments
#### `@text`
Required. The text within which to find URLs.
#### `@Url`
Optional. The component used to display each URL discovered within `@text`. Defaults to `wrap-urls/url`. You can also set it to `wrap-urls/link`, or a component of your choice.
#### `@pattern`
Optional. The regular expression used to find URLs in the `@text`. You may wish to set this to match mailto links for example.
### API
When a URL is found, and a component is rendered in its place, that component will have this API available to it in the template as an argument `@url`.
#### `string`
The URL that this component should render.
#### `start`
The position in the `@text` where the URL starts.
#### `end`
The position in the `@text` where the URL ends.