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

Commit e6dab96

Browse files
juliankrispeljuliankrispel
authored
Merge pull request #48 from draft-js-plugins/example/linkify
Add example for reproduce linkify-plugin
2 parents b2f3fc3 + 331f7d6 commit e6dab96

File tree

8 files changed

+13509
-0
lines changed

8 files changed

+13509
-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: 11159 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.5.0",
11+
"react-dom": "16.5.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/linkify-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: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
// @flow
2+
3+
import React, { Component } from 'react'
4+
import { Plugin } from '@djsp/core'
5+
import linkStrategy from './linkStrategy'
6+
import linkifyIt from 'linkify-it'
7+
import tlds from 'tlds'
8+
import type { DraftDecoratorComponentProps } from 'draft-js'
9+
10+
const linkify = linkifyIt()
11+
linkify.tlds(tlds)
12+
13+
type Props = DraftDecoratorComponentProps & {
14+
target?: string,
15+
rel?: string,
16+
}
17+
18+
class LinkComponent extends Component<Props> {
19+
render() {
20+
const {
21+
decoratedText,
22+
target = '_self',
23+
rel = 'noreferrer noopener',
24+
children,
25+
} = this.props
26+
27+
const links = linkify.match(decoratedText)
28+
const href = links && links[0] ? links[0].url : ''
29+
30+
const props = {
31+
href,
32+
children,
33+
target,
34+
rel,
35+
className: 'link',
36+
}
37+
38+
return <a {...props} />
39+
}
40+
}
41+
42+
export default function Link() {
43+
return (
44+
<Plugin
45+
decorators={[
46+
{
47+
strategy: linkStrategy,
48+
component: LinkComponent,
49+
},
50+
]}
51+
/>
52+
)
53+
}

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

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

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

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
// @flow
2+
// This strategy is from https://github.com/draft-js-plugins/draft-js-plugins/blob/master/draft-js-linkify-plugin/src/linkStrategy.js
3+
import { ContentBlock } from 'draft-js'
4+
import linkifyIt from 'linkify-it'
5+
import tlds from 'tlds'
6+
7+
const linkify = linkifyIt()
8+
linkify.tlds(tlds)
9+
10+
// Gets all the links in the text, and returns them via the callback
11+
const linkStrategy = (contentBlock: ContentBlock, callback: Function): void => {
12+
const links = linkify.match(contentBlock.get('text'))
13+
if (typeof links !== 'undefined' && links !== null) {
14+
for (let i = 0; i < links.length; i += 1) {
15+
callback(links[i].index, links[i].lastIndex)
16+
}
17+
}
18+
}
19+
20+
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)