mirror/slate
1
0
Fork 0
mirror of https://github.com/ianstormtaylor/slate.git synced 2025-08-23 07:22:55 +02:00
Code Issues Releases Wiki Activity

[fix/html-serializer-docs-add-class-name-example] add example to the … (#1863)

Browse Source 
* [fix/html-serializer-docs-add-class-name-example] add example to the HTML serializer docs on how to use element attributes when serializing and deserializing. I spent a lot of time figuring this out myself so hopefully will save others from having to go through the same process!

* [fix/html-serializer-docs-add-class-name-example] Fix linting errors with Prettier
This commit is contained in:
Dominic Eden
2018-06-11 00:41:03 +01:00
committed by Ian Storm Taylor
parent a5e5307578
commit fbd76895b5
1 changed files with 20 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -48,6 +48,9 @@ const rules = [
return { return {
object: 'block', object: 'block',
type: 'paragraph', type: 'paragraph',
data: {
className: el.getAttribute('class'),
},
nodes: next(el.childNodes), nodes: next(el.childNodes),
} }
} }
@@ -68,6 +71,9 @@ const rules = [
return { return {
object: 'block', object: 'block',
type: 'paragraph', type: 'paragraph',
data: {
className: el.getAttribute('class'),
},
nodes: next(el.childNodes), nodes: next(el.childNodes),
} }
} }
@@ -75,7 +81,7 @@ const rules = [
// Add a serializing function property to our rule... // Add a serializing function property to our rule...
serialize(obj, children) { serialize(obj, children) {
if (obj.object == 'block' && obj.type == 'paragraph') { if (obj.object == 'block' && obj.type == 'paragraph') {
return <p>{children}</p> return <p className={obj.data.get('className')}>{children}</p>
} }
}, },
}, },
@@ -107,6 +113,9 @@ const rules = [
return { return {
object: 'block', object: 'block',
type: type, type: type,
data: {
className: el.getAttribute('class'),
},
nodes: next(el.childNodes), nodes: next(el.childNodes),
} }
} }
@@ -116,7 +125,7 @@ const rules = [
if (obj.object == 'block') { if (obj.object == 'block') {
switch (obj.type) { switch (obj.type) {
case 'paragraph': case 'paragraph':
return <p>{children}</p> return <p className={obj.data.get('className')}>{children}</p>
case 'quote': case 'quote':
return <blockquote>{children}</blockquote> return <blockquote>{children}</blockquote>
case 'code': case 'code':
@@ -160,6 +169,9 @@ const rules = [
return { return {
object: 'block', object: 'block',
type: type, type: type,
data: {
className: el.getAttribute('class'),
},
nodes: next(el.childNodes), nodes: next(el.childNodes),
} }
} }
@@ -174,7 +186,7 @@ const rules = [
</pre> </pre>
) )
case 'paragraph': case 'paragraph':
return <p>{children}</p> return <p className={obj.data.get('className')}>{children}</p>
case 'quote': case 'quote':
return <blockquote>{children}</blockquote> return <blockquote>{children}</blockquote>
} }
@@ -260,7 +272,11 @@ class App extends React.Component {
</pre> </pre>
) )
case 'paragraph': case 'paragraph':
return <p {...props.attributes}>{props.children}</p> return (
<p {...props.attributes} className={node.data.get('className')}>
{props.children}
</p>
)
case 'quote': case 'quote':
return <blockquote {...props.attributes}>{props.children}</blockquote> return <blockquote {...props.attributes}>{props.children}</blockquote>
} }