| author | Alexandre Segura <mex.zktk@gmail.com> |
| Tue, 06 Jun 2017 15:56:41 +0200 | |
| changeset 19 | f1b125b95fe9 |
| parent 17 | 877d8796b86d |
| child 21 | 284e866f55c7 |
| permissions | -rw-r--r-- |
|
17
877d8796b86d
Store serialized HTML in note.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
1 |
import React from 'react' |
|
877d8796b86d
Store serialized HTML in note.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
2 |
import { Html } from 'slate' |
|
877d8796b86d
Store serialized HTML in note.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
3 |
|
|
877d8796b86d
Store serialized HTML in note.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
4 |
const BLOCK_TAGS = { |
|
877d8796b86d
Store serialized HTML in note.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
5 |
p: 'paragraph', |
|
877d8796b86d
Store serialized HTML in note.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
6 |
} |
|
877d8796b86d
Store serialized HTML in note.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
7 |
|
|
877d8796b86d
Store serialized HTML in note.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
8 |
// Add a dictionary of mark tags. |
|
877d8796b86d
Store serialized HTML in note.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
9 |
const MARK_TAGS = { |
|
877d8796b86d
Store serialized HTML in note.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
10 |
em: 'italic', |
|
877d8796b86d
Store serialized HTML in note.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
11 |
strong: 'bold', |
|
877d8796b86d
Store serialized HTML in note.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
12 |
u: 'underline', |
|
19
f1b125b95fe9
Introduce "annotation" plugin.
Alexandre Segura <mex.zktk@gmail.com>
parents:
17
diff
changeset
|
13 |
annotation: 'span' |
|
f1b125b95fe9
Introduce "annotation" plugin.
Alexandre Segura <mex.zktk@gmail.com>
parents:
17
diff
changeset
|
14 |
} |
|
f1b125b95fe9
Introduce "annotation" plugin.
Alexandre Segura <mex.zktk@gmail.com>
parents:
17
diff
changeset
|
15 |
|
|
f1b125b95fe9
Introduce "annotation" plugin.
Alexandre Segura <mex.zktk@gmail.com>
parents:
17
diff
changeset
|
16 |
const annotationStyle = { |
|
f1b125b95fe9
Introduce "annotation" plugin.
Alexandre Segura <mex.zktk@gmail.com>
parents:
17
diff
changeset
|
17 |
textDecoration: 'underline', |
|
f1b125b95fe9
Introduce "annotation" plugin.
Alexandre Segura <mex.zktk@gmail.com>
parents:
17
diff
changeset
|
18 |
textDecorationStyle: 'dotted', |
|
f1b125b95fe9
Introduce "annotation" plugin.
Alexandre Segura <mex.zktk@gmail.com>
parents:
17
diff
changeset
|
19 |
backgroundColor: 'yellow' |
|
17
877d8796b86d
Store serialized HTML in note.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
20 |
} |
|
877d8796b86d
Store serialized HTML in note.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
21 |
|
|
877d8796b86d
Store serialized HTML in note.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
22 |
const rules = [ |
|
877d8796b86d
Store serialized HTML in note.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
23 |
// Block rules |
|
877d8796b86d
Store serialized HTML in note.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
24 |
{ |
|
877d8796b86d
Store serialized HTML in note.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
25 |
deserialize(el, next) { |
|
877d8796b86d
Store serialized HTML in note.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
26 |
const type = BLOCK_TAGS[el.tagName] |
|
877d8796b86d
Store serialized HTML in note.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
27 |
if (!type) return |
|
877d8796b86d
Store serialized HTML in note.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
28 |
return { |
|
877d8796b86d
Store serialized HTML in note.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
29 |
kind: 'block', |
|
877d8796b86d
Store serialized HTML in note.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
30 |
type: type, |
|
877d8796b86d
Store serialized HTML in note.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
31 |
nodes: next(el.children) |
|
877d8796b86d
Store serialized HTML in note.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
32 |
} |
|
877d8796b86d
Store serialized HTML in note.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
33 |
}, |
|
877d8796b86d
Store serialized HTML in note.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
34 |
serialize(object, children) { |
|
19
f1b125b95fe9
Introduce "annotation" plugin.
Alexandre Segura <mex.zktk@gmail.com>
parents:
17
diff
changeset
|
35 |
if (object.kind !== 'block') return |
|
17
877d8796b86d
Store serialized HTML in note.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
36 |
switch (object.type) { |
|
877d8796b86d
Store serialized HTML in note.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
37 |
case 'paragraph': |
|
877d8796b86d
Store serialized HTML in note.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
38 |
case 'line': return <p>{children}</p> |
|
19
f1b125b95fe9
Introduce "annotation" plugin.
Alexandre Segura <mex.zktk@gmail.com>
parents:
17
diff
changeset
|
39 |
default: return; |
|
17
877d8796b86d
Store serialized HTML in note.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
40 |
} |
|
877d8796b86d
Store serialized HTML in note.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
41 |
} |
|
877d8796b86d
Store serialized HTML in note.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
42 |
}, |
|
877d8796b86d
Store serialized HTML in note.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
43 |
// Mark rules |
|
877d8796b86d
Store serialized HTML in note.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
44 |
{ |
|
877d8796b86d
Store serialized HTML in note.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
45 |
deserialize(el, next) { |
|
877d8796b86d
Store serialized HTML in note.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
46 |
const type = MARK_TAGS[el.tagName] |
|
877d8796b86d
Store serialized HTML in note.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
47 |
if (!type) return |
|
877d8796b86d
Store serialized HTML in note.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
48 |
return { |
|
877d8796b86d
Store serialized HTML in note.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
49 |
kind: 'mark', |
|
877d8796b86d
Store serialized HTML in note.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
50 |
type: type, |
|
877d8796b86d
Store serialized HTML in note.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
51 |
nodes: next(el.children) |
|
877d8796b86d
Store serialized HTML in note.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
52 |
} |
|
877d8796b86d
Store serialized HTML in note.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
53 |
}, |
|
877d8796b86d
Store serialized HTML in note.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
54 |
serialize(object, children) { |
|
19
f1b125b95fe9
Introduce "annotation" plugin.
Alexandre Segura <mex.zktk@gmail.com>
parents:
17
diff
changeset
|
55 |
if (object.kind !== 'mark') return |
|
17
877d8796b86d
Store serialized HTML in note.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
56 |
switch (object.type) { |
|
877d8796b86d
Store serialized HTML in note.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
57 |
case 'bold': return <strong>{children}</strong> |
|
877d8796b86d
Store serialized HTML in note.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
58 |
case 'italic': return <em>{children}</em> |
|
877d8796b86d
Store serialized HTML in note.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
59 |
case 'underline': return <u>{children}</u> |
|
19
f1b125b95fe9
Introduce "annotation" plugin.
Alexandre Segura <mex.zktk@gmail.com>
parents:
17
diff
changeset
|
60 |
case 'annotation': return <span style={annotationStyle}>{children}</span> |
|
f1b125b95fe9
Introduce "annotation" plugin.
Alexandre Segura <mex.zktk@gmail.com>
parents:
17
diff
changeset
|
61 |
default: return; |
|
17
877d8796b86d
Store serialized HTML in note.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
62 |
} |
|
877d8796b86d
Store serialized HTML in note.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
63 |
} |
|
877d8796b86d
Store serialized HTML in note.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
64 |
} |
|
877d8796b86d
Store serialized HTML in note.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
65 |
] |
|
877d8796b86d
Store serialized HTML in note.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
66 |
|
|
877d8796b86d
Store serialized HTML in note.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
67 |
const serializer = new Html({ rules }) |
|
877d8796b86d
Store serialized HTML in note.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
68 |
|
|
877d8796b86d
Store serialized HTML in note.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
69 |
export default serializer |