1 import React from 'react' |
1 import React from 'react' |
2 import { Html } from 'slate' |
2 import Html from 'slate-html-serializer' |
3 |
3 |
4 const BLOCK_TAGS = { |
4 const BLOCK_TAGS = { |
5 p: 'paragraph', |
5 p: 'paragraph', |
|
6 ul: 'bulleted-list', |
|
7 ol: 'numbered-list', |
|
8 li: 'list-item', |
6 } |
9 } |
7 |
10 |
8 // Add a dictionary of mark tags. |
11 // Add a dictionary of mark tags. |
9 const MARK_TAGS = { |
12 const MARK_TAGS = { |
10 em: 'italic', |
13 em: 'italic', |
11 strong: 'bold', |
14 strong: 'bold', |
12 u: 'underline', |
15 u: 'underlined', |
13 category: 'span' |
16 category: 'span' |
14 } |
17 } |
15 |
18 |
16 const rules = [ |
19 const rules = [ |
17 // Block rules |
20 // Block rules |
18 { |
21 { |
19 deserialize(el, next) { |
22 deserialize(el, next) { |
20 const type = BLOCK_TAGS[el.tagName] |
23 const type = BLOCK_TAGS[el.tagName] |
21 if (!type) return |
24 if (!type) return |
22 return { |
25 return { |
23 kind: 'block', |
26 object: 'block', |
24 type: type, |
27 type: type, |
25 nodes: next(el.children) |
28 nodes: next(el.childNodes) |
26 } |
29 } |
27 }, |
30 }, |
28 serialize(object, children) { |
31 serialize(obj, children) { |
29 if (object.kind !== 'block') return |
32 if (obj.object !== 'block') return |
30 switch (object.type) { |
33 switch (obj.type) { |
|
34 case 'numbered-list': |
|
35 return <ol>{children}</ol>; |
|
36 case 'bulleted-list': |
|
37 return <ul>{children}</ul>; |
|
38 case 'list-item': |
|
39 return <li>{children}</li>; |
31 case 'paragraph': |
40 case 'paragraph': |
32 case 'line': return <p>{children}</p> |
41 case 'line': |
|
42 return <p>{children}</p> |
33 default: return; |
43 default: return; |
34 } |
44 } |
35 } |
45 } |
36 }, |
46 }, |
37 // Mark rules |
47 // Mark rules |
38 { |
48 { |
39 deserialize(el, next) { |
49 deserialize(el, next) { |
40 const type = MARK_TAGS[el.tagName] |
50 const type = MARK_TAGS[el.tagName] |
41 if (!type) return |
51 if (!type) return |
42 return { |
52 return { |
43 kind: 'mark', |
53 object: 'mark', |
44 type: type, |
54 type: type, |
45 nodes: next(el.children) |
55 nodes: next(el.childNodes) |
46 } |
56 } |
47 }, |
57 }, |
48 serialize(object, children) { |
58 serialize(obj, children) { |
49 if (object.kind !== 'mark') return |
59 if (obj.object !== 'mark') return |
50 switch (object.type) { |
60 switch (obj.type) { |
51 case 'bold': return <strong>{children}</strong> |
61 case 'bold': |
52 case 'italic': return <em>{children}</em> |
62 return <strong>{children}</strong> |
53 case 'underline': return <u>{children}</u> |
63 case 'italic': |
54 case 'category': return <span style={{ backgroundColor: object.data.get('color') }}>{children}</span> |
64 return <em>{children}</em> |
|
65 case 'underlined': |
|
66 return <ins>{children}</ins> |
|
67 case 'category': |
|
68 return <span style={{ backgroundColor: obj.data.get('color') }}>{children}</span> |
55 default: return; |
69 default: return; |
56 } |
70 } |
57 } |
71 } |
58 } |
72 } |
59 ] |
73 ] |