This repository has been archived by the owner on Nov 30, 2024. It is now read-only.
forked from caseywebdev/formatted-text
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
86 lines (76 loc) · 2.55 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
<!doctype html>
<html>
<head>
<title>Formatted Text</title>
</head>
<body>
<div id='main'></div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/react/15.3.0/react.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/react/15.3.0/react-dom.js'></script>
<script src='formatted-text.js'></script>
<script>
(function () {
var React = window.React;
var ReactDOM = window.ReactDOM;
var FormattedText = window.formattedText;
var Test = React.createFactory(React.createClass({
getInitialState: function () {
return {text: this.props.text};
},
handleChange: function (ev) {
this.setState({text: ev.target.value});
},
render: function () {
return React.createElement('div', null,
React.createElement('textarea', {
onChange: this.handleChange,
style: {width: 400, height: 200},
value: this.state.text
}),
React.createElement(FormattedText, {
linkRenderer: function (link) {
var url = link.url;
var text = link.text;
var YT = /^(?:https?:\/\/)?(?:youtu\.be\/(\w+)|(?:www\.)?youtube.com\/watch\?v=(\w+))$/;
var match = url.match(YT);
if (match) {
var id = match[1] || match[2];
return React.createElement('iframe', {
width: 560,
height: 315,
src: 'https://www.youtube.com/embed/' + id,
frameBorder: 0,
allowFullScreen: true
});
}
return React.createElement('a', {href: url}, text);
}
}, this.state.text)
);
}
}));
ReactDOM.render(Test({
text: [
'Single line paragraph',
'',
'Double line',
'paragraph',
'',
'([email protected])',
'[[email protected]].',
'<example.com>?',
'https://example.com!',
'http://localhost',
'foo.bar',
'foo...bar',
'',
'Custom Link Renderer!',
'https://youtu.be/6W6y7YhHdVE'
].join('\n')
}), document.getElementById('main'));
})();
</script>
</body>
</html>