From fbd76895b53ef3e309df4f00d8e44031aecd0c6d Mon Sep 17 00:00:00 2001
From: Dominic Eden <dominiceden@users.noreply.github.com>
Date: Mon, 11 Jun 2018 00:41:03 +0100
Subject: [PATCH] =?UTF-8?q?[fix/html-serializer-docs-add-class-name-exampl?=
 =?UTF-8?q?e]=20add=20example=20to=20the=20=E2=80=A6=20(#1863)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* [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
---
 .../saving-and-loading-html-content.md        | 24 +++++++++++++++----
 1 file changed, 20 insertions(+), 4 deletions(-)

diff --git a/docs/walkthroughs/saving-and-loading-html-content.md b/docs/walkthroughs/saving-and-loading-html-content.md
index 2f1f8d91f..96bff7eaf 100644
--- a/docs/walkthroughs/saving-and-loading-html-content.md
+++ b/docs/walkthroughs/saving-and-loading-html-content.md
@@ -48,6 +48,9 @@ const rules = [
         return {
           object: 'block',
           type: 'paragraph',
+          data: {
+            className: el.getAttribute('class'),
+          },
           nodes: next(el.childNodes),
         }
       }
@@ -68,6 +71,9 @@ const rules = [
         return {
           object: 'block',
           type: 'paragraph',
+          data: {
+            className: el.getAttribute('class'),
+          },
           nodes: next(el.childNodes),
         }
       }
@@ -75,7 +81,7 @@ const rules = [
     // Add a serializing function property to our rule...
     serialize(obj, children) {
       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 {
           object: 'block',
           type: type,
+          data: {
+            className: el.getAttribute('class'),
+          },
           nodes: next(el.childNodes),
         }
       }
@@ -116,7 +125,7 @@ const rules = [
       if (obj.object == 'block') {
         switch (obj.type) {
           case 'paragraph':
-            return <p>{children}</p>
+            return <p className={obj.data.get('className')}>{children}</p>
           case 'quote':
             return <blockquote>{children}</blockquote>
           case 'code':
@@ -160,6 +169,9 @@ const rules = [
         return {
           object: 'block',
           type: type,
+          data: {
+            className: el.getAttribute('class'),
+          },
           nodes: next(el.childNodes),
         }
       }
@@ -174,7 +186,7 @@ const rules = [
               </pre>
             )
           case 'paragraph':
-            return <p>{children}</p>
+            return <p className={obj.data.get('className')}>{children}</p>
           case 'quote':
             return <blockquote>{children}</blockquote>
         }
@@ -260,7 +272,11 @@ class App extends React.Component {
           </pre>
         )
       case 'paragraph':
-        return <p {...props.attributes}>{props.children}</p>
+        return (
+          <p {...props.attributes} className={node.data.get('className')}>
+            {props.children}
+          </p>
+        )
       case 'quote':
         return <blockquote {...props.attributes}>{props.children}</blockquote>
     }