mirror/slate
1
0
Fork 0
mirror of https://github.com/ianstormtaylor/slate.git synced 2025-08-28 01:19:52 +02:00
Code Issues Releases Wiki Activity

Make serialize/deserialize friendlier (#1705)

Browse Source
This commit is contained in:
Francesco Agnoletto
2018-03-21 23:34:20 +01:00
committed by Ian Storm Taylor
parent ecc165740d
commit 6ad3aada5b
2 changed files with 95 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
docs/walkthroughs/saving-and-loading-html-content.md
View File

@@ -103,16 +103,17 @@ const rules = [
// Switch deserialize to handle more blocks... // Switch deserialize to handle more blocks...
deserialize(el, next) { deserialize(el, next) {
const type = BLOCK_TAGS[el.tagName.toLowerCase()] const type = BLOCK_TAGS[el.tagName.toLowerCase()]
if (!type) return if (type) {
return { return {
object: 'block', object: 'block',
type: type, type: type,
nodes: next(el.childNodes), nodes: next(el.childNodes),
} }
}
}, },
// Switch serialize to handle more blocks... // Switch serialize to handle more blocks...
serialize(obj, children) { serialize(obj, children) {
if (obj.object != 'block') return if (obj.object == 'block') {
switch (obj.type) { switch (obj.type) {
case 'paragraph': case 'paragraph':
return <p>{children}</p> return <p>{children}</p>
@@ -125,6 +126,7 @@ const rules = [
</pre> </pre>
) )
} }
}
}, },
}, },
] ]
@@ -154,15 +156,16 @@ const rules = [
{ {
deserialize(el, next) { deserialize(el, next) {
const type = BLOCK_TAGS[el.tagName.toLowerCase()] const type = BLOCK_TAGS[el.tagName.toLowerCase()]
if (!type) return if (type) {
return { return {
object: 'block', object: 'block',
type: type, type: type,
nodes: next(el.childNodes), nodes: next(el.childNodes),
} }
}
}, },
serialize(obj, children) { serialize(obj, children) {
if (obj.object != 'block') return if (obj.object == 'block') {
switch (obj.type) { switch (obj.type) {
case 'code': case 'code':
return ( return (
@@ -175,21 +178,23 @@ const rules = [
case 'quote': case 'quote':
return <blockquote>{children}</blockquote> return <blockquote>{children}</blockquote>
} }
}
}, },
}, },
// Add a new rule that handles marks... // Add a new rule that handles marks...
{ {
deserialize(el, next) { deserialize(el, next) {
const type = MARK_TAGS[el.tagName.toLowerCase()] const type = MARK_TAGS[el.tagName.toLowerCase()]
if (!type) return if (type) {
return { return {
object: 'mark', object: 'mark',
type: type, type: type,
nodes: next(el.childNodes), nodes: next(el.childNodes),
} }
}
}, },
serialize(obj, children) { serialize(obj, children) {
if (obj.object != 'mark') return if (obj.object == 'mark') {
switch (obj.type) { switch (obj.type) {
case 'bold': case 'bold':
return <strong>{children}</strong> return <strong>{children}</strong>
@@ -198,6 +203,7 @@ const rules = [
case 'underline': case 'underline':
return <u>{children}</u> return <u>{children}</u>
} }
}
}, },
}, },
] ]

15
examples/paste-html/index.js
View File

@@ -50,29 +50,31 @@ const RULES = [
{ {
deserialize(el, next) { deserialize(el, next) {
const block = BLOCK_TAGS[el.tagName.toLowerCase()] const block = BLOCK_TAGS[el.tagName.toLowerCase()]
if (!block) return if (block) {
return { return {
object: 'block', object: 'block',
type: block, type: block,
nodes: next(el.childNodes), nodes: next(el.childNodes),
} }
}
}, },
}, },
{ {
deserialize(el, next) { deserialize(el, next) {
const mark = MARK_TAGS[el.tagName.toLowerCase()] const mark = MARK_TAGS[el.tagName.toLowerCase()]
if (!mark) return if (mark) {
return { return {
object: 'mark', object: 'mark',
type: mark, type: mark,
nodes: next(el.childNodes), nodes: next(el.childNodes),
} }
}
}, },
}, },
{ {
// Special case for code blocks, which need to grab the nested childNodes. // Special case for code blocks, which need to grab the nested childNodes.
deserialize(el, next) { deserialize(el, next) {
if (el.tagName.toLowerCase() != 'pre') return if (el.tagName.toLowerCase() == 'pre') {
const code = el.childNodes[0] const code = el.childNodes[0]
const childNodes = const childNodes =
code && code.tagName.toLowerCase() == 'code' code && code.tagName.toLowerCase() == 'code'
@@ -84,12 +86,13 @@ const RULES = [
type: 'code', type: 'code',
nodes: next(childNodes), nodes: next(childNodes),
} }
}
}, },
}, },
{ {
// Special case for images, to grab their src. // Special case for images, to grab their src.
deserialize(el, next) { deserialize(el, next) {
if (el.tagName.toLowerCase() != 'img') return if (el.tagName.toLowerCase() == 'img') {
return { return {
object: 'block', object: 'block',
type: 'image', type: 'image',
@@ -99,12 +102,13 @@ const RULES = [
src: el.getAttribute('src'), src: el.getAttribute('src'),
}, },
} }
}
}, },
}, },
{ {
// Special case for links, to grab their href. // Special case for links, to grab their href.
deserialize(el, next) { deserialize(el, next) {
if (el.tagName.toLowerCase() != 'a') return if (el.tagName.toLowerCase() == 'a') {
return { return {
object: 'inline', object: 'inline',
type: 'link', type: 'link',
@@ -113,6 +117,7 @@ const RULES = [
href: el.getAttribute('href'), href: el.getAttribute('href'),
}, },
} }
}
}, },
}, },
] ]