Skip to content
This repository was archived by the owner on May 31, 2020. It is now read-only.

Commit c6b9cc8

Browse files
freedomlangfreedomlang
committed
add linkify-example
1 parent 69fffee commit c6b9cc8

File tree

8 files changed

+13498
-0
lines changed

8 files changed

+13498
-0
lines changed

‎examples/linkify-example/README.md‎

Lines changed: 2164 additions & 0 deletions
Large diffs are not rendered by default.

‎examples/linkify-example/package-lock.json‎

Lines changed: 11160 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎examples/linkify-example/package.json‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
{
2+
"name": "@djsp/linkify-example",
3+
"homepage": "https://github.com/draft-js-plugins/next#readme",
4+
"version": "0.1.5",
5+
"private": true,
6+
"license": "MIT",
7+
"dependencies": {
8+
"@djsp/core": "^0.1.5",
9+
"linkify-it": "^2.0.3",
10+
"react": "^16.2.0",
11+
"react-dom": "^16.2.0",
12+
"react-scripts": "^1.1.1",
13+
"tlds": "^1.203.1"
14+
},
15+
"scripts": {
16+
"start": "react-scripts start",
17+
"build": "react-scripts build",
18+
"test": "react-scripts test --env=jsdom",
19+
"eject": "react-scripts eject"
20+
},
21+
"devDependencies": {
22+
"draft-js": "^0.10.5"
23+
}
24+
}

‎examples/linkify-example/public/index.html‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
6+
<meta name="theme-color" content="#000000">
7+
8+
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
9+
10+
<title>@djsp/hashtag-example</title>
11+
</head>
12+
13+
<body>
14+
<noscript>
15+
You need to enable JavaScript to run this app.
16+
</noscript>
17+
18+
<div id="root"></div>
19+
</body>
20+
</html>

‎examples/linkify-example/src/Link.js‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
import React, { Component } from 'react'
2+
import linkifyIt from 'linkify-it';
3+
import tlds from 'tlds';
4+
5+
const linkify = linkifyIt();
6+
linkify.tlds(tlds);
7+
8+
export default class Hashtag extends Component {
9+
render() {
10+
const {
11+
decoratedText, // eslint-disable-line no-unused-vars
12+
target = '_self',
13+
rel = 'noreferrer noopener',
14+
dir, // eslint-disable-line no-unused-vars
15+
entityKey, // eslint-disable-line no-unused-vars
16+
offsetKey, // eslint-disable-line no-unused-vars
17+
contentState, // eslint-disable-line no-unused-vars
18+
...otherProps
19+
} = this.props // eslint-disable-line no-use-before-define
20+
21+
const links = linkify.match(decoratedText);
22+
const href = links && links[0] ? links[0].url : '';
23+
24+
const props = {
25+
...otherProps,
26+
href,
27+
target,
28+
rel,
29+
className: 'link',
30+
};
31+
32+
return <a {...props} />
33+
}
34+
}

‎examples/linkify-example/src/index.js‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
import React, { Component } from 'react'
2+
import ReactDOM from 'react-dom'
3+
4+
import { EditorState, convertFromRaw } from 'draft-js'
5+
import { EditorContainer, Editor, Plugin } from '@djsp/core'
6+
import linkStrategy from './linkStrategy'
7+
import Link from './Link'
8+
import './styles.css'
9+
10+
const rawContent = {
11+
blocks: [
12+
{
13+
text: 'Type some website address.',
14+
},
15+
],
16+
entityMap: {},
17+
}
18+
19+
class App extends Component {
20+
state = {
21+
editorState: EditorState.createWithContent(convertFromRaw(rawContent)),
22+
}
23+
24+
onChange = editorState => this.setState({ editorState })
25+
26+
render() {
27+
return (
28+
<div>
29+
<EditorContainer
30+
editorState={this.state.editorState}
31+
onChange={this.onChange}>
32+
<Editor />
33+
<Plugin
34+
decorators={[
35+
{
36+
strategy: linkStrategy,
37+
component: Link,
38+
},
39+
]}
40+
/>
41+
</EditorContainer>
42+
</div>
43+
)
44+
}
45+
}
46+
47+
ReactDOM.render(<App />, document.getElementById('root'))

‎examples/linkify-example/src/linkStrategy.js‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
// @flow
2+
3+
import linkifyIt from 'linkify-it';
4+
import tlds from 'tlds';
5+
6+
const linkify = linkifyIt();
7+
linkify.tlds(tlds);
8+
9+
// Gets all the links in the text, and returns them via the callback
10+
const linkStrategy = (contentBlock: Object, callback: Function) => {
11+
const links = linkify.match(contentBlock.get('text'));
12+
if (typeof links !== 'undefined' && links !== null) {
13+
for (let i = 0; i < links.length; i += 1) {
14+
callback(links[i].index, links[i].lastIndex);
15+
}
16+
}
17+
};
18+
19+
export default linkStrategy;

‎examples/linkify-example/src/styles.css‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
body {
2+
font-family: sans-serif;
3+
font-size: 1.8em;
4+
padding: 1em;
5+
background: #12312e;
6+
}
7+
8+
.public-DraftEditor-content {
9+
padding: 2em;
10+
border-radius: 5px;
11+
color: #fff;
12+
border: #555;
13+
background: #244a46;
14+
}
15+
16+
17+
.link, .link:visited {
18+
color: #5e93c5;
19+
text-decoration: none;
20+
}
21+
22+
.link:hover, .link:focus {
23+
color: #7eadda;
24+
outline: 0; /* reset for :focus */
25+
cursor: pointer;
26+
}
27+
28+
.link:active {
29+
color: #4a7bab;
30+
}

0 commit comments

Comments
 (0)