equal
deleted
inserted
replaced
1 import React from 'react' |
1 import React from 'react' |
2 import { Html } from 'slate' |
2 import { Html } from 'slate' |
3 |
3 |
4 const BLOCK_TAGS = { |
4 const BLOCK_TAGS = { |
5 blockquote: 'quote', |
|
6 p: 'paragraph', |
5 p: 'paragraph', |
7 pre: 'code' |
|
8 } |
6 } |
9 |
7 |
10 // Add a dictionary of mark tags. |
8 // Add a dictionary of mark tags. |
11 const MARK_TAGS = { |
9 const MARK_TAGS = { |
12 em: 'italic', |
10 em: 'italic', |
13 strong: 'bold', |
11 strong: 'bold', |
14 u: 'underline', |
12 u: 'underline', |
|
13 annotation: 'span' |
|
14 } |
|
15 |
|
16 const annotationStyle = { |
|
17 textDecoration: 'underline', |
|
18 textDecorationStyle: 'dotted', |
|
19 backgroundColor: 'yellow' |
15 } |
20 } |
16 |
21 |
17 const rules = [ |
22 const rules = [ |
18 // Block rules |
23 // Block rules |
19 { |
24 { |
25 type: type, |
30 type: type, |
26 nodes: next(el.children) |
31 nodes: next(el.children) |
27 } |
32 } |
28 }, |
33 }, |
29 serialize(object, children) { |
34 serialize(object, children) { |
30 if (object.kind != 'block') return |
35 if (object.kind !== 'block') return |
31 switch (object.type) { |
36 switch (object.type) { |
32 case 'code': return <pre><code>{children}</code></pre> |
|
33 case 'paragraph': |
37 case 'paragraph': |
34 case 'line': return <p>{children}</p> |
38 case 'line': return <p>{children}</p> |
35 case 'quote': return <blockquote>{children}</blockquote> |
39 default: return; |
36 } |
40 } |
37 } |
41 } |
38 }, |
42 }, |
39 // Mark rules |
43 // Mark rules |
40 { |
44 { |
46 type: type, |
50 type: type, |
47 nodes: next(el.children) |
51 nodes: next(el.children) |
48 } |
52 } |
49 }, |
53 }, |
50 serialize(object, children) { |
54 serialize(object, children) { |
51 if (object.kind != 'mark') return |
55 if (object.kind !== 'mark') return |
52 switch (object.type) { |
56 switch (object.type) { |
53 case 'bold': return <strong>{children}</strong> |
57 case 'bold': return <strong>{children}</strong> |
54 case 'italic': return <em>{children}</em> |
58 case 'italic': return <em>{children}</em> |
55 case 'underline': return <u>{children}</u> |
59 case 'underline': return <u>{children}</u> |
|
60 case 'annotation': return <span style={annotationStyle}>{children}</span> |
|
61 default: return; |
56 } |
62 } |
57 } |
63 } |
58 } |
64 } |
59 ] |
65 ] |
60 |
66 |