/
CodeSnippet.js
67 lines (56 loc) · 1.76 KB
/
CodeSnippet.js
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
import { HtmlElement } from 'cx/widgets';
import { Widget, VDOM } from 'cx/ui';
import {removeCommonIndent} from './removeCommonIndent';
import {addLanguage, highlight} from "illuminate-js";
import {jsx} from 'illuminate-js/lib/languages';
console.log(jsx);
addLanguage('jsx', jsx);
function lazyHighlight(text, lang) {
var cache;
return () => {
if (typeof cache == 'undefined') {
var withoutIndent = removeCommonIndent(text);
cache = highlight(withoutIndent, lang);
}
return cache;
}
}
export class CodeSnippet extends HtmlElement {
render(context, instance, key) {
let {data} = instance,
fiddleLink;
if (this.fiddle) {
fiddleLink = (
<a
href={`https://cxjs.io/fiddle/?f=${this.fiddle}`}
className={this.CSS.element(this.baseClass, 'link')}
target="_blank"
>
Cx Fiddle
</a>
)
}
return (
<div key={key} className={data.classNames}>
<pre className={`language-${this.lang}`}>
{this.renderChildren(context, instance)}
</pre>
{fiddleLink}
</div>);
}
add(text) {
if (typeof text != 'string')
return super.add(...arguments);
super.add({
type: HtmlElement,
innerHtml: lazyHighlight(text, this.lang),
tag: 'code',
class: `language-${this.lang}`
});
}
}
CodeSnippet.prototype.plainText = true;
CodeSnippet.prototype.tag = 'pre';
CodeSnippet.prototype.lang = 'jsx';
CodeSnippet.prototype.baseClass = 'codesnippet';
CodeSnippet.prototype.CSS = 'cx';