mirror/slate
1
0
Fork 0
mirror of https://github.com/ianstormtaylor/slate.git synced 2025-08-28 09:29:49 +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

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

@@ -103,27 +103,29 @@ 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>
case 'quote': case 'quote':
return <blockquote>{children}</blockquote> return <blockquote>{children}</blockquote>
case 'code': case 'code':
return ( return (
<pre> <pre>
<code>{children}</code> <code>{children}</code>
</pre> </pre>
) )
}
} }
}, },
}, },
@@ -154,26 +156,28 @@ 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 (
<pre> <pre>
<code>{children}</code> <code>{children}</code>
</pre> </pre>
) )
case 'paragraph': case 'paragraph':
return <p>{children}</p> return <p>{children}</p>
case 'quote': case 'quote':
return <blockquote>{children}</blockquote> return <blockquote>{children}</blockquote>
}
} }
}, },
}, },
@@ -181,22 +185,24 @@ const rules = [
{ {
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>
case 'italic': case 'italic':
return <em>{children}</em> return <em>{children}</em>
case 'underline': case 'underline':
return <u>{children}</u> return <u>{children}</u>
}
} }
}, },
}, },

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

@@ -50,68 +50,73 @@ 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'
? code.childNodes ? code.childNodes
: el.childNodes : el.childNodes
return { return {
object: 'block', object: 'block',
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',
isVoid: true, isVoid: true,
nodes: next(el.childNodes), nodes: next(el.childNodes),
data: { data: {
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',
nodes: next(el.childNodes), nodes: next(el.childNodes),
data: { data: {
href: el.getAttribute('href'), href: el.getAttribute('href'),
}, },
}
} }
}, },
}, },