Consistently use toLowerCase in tag name comparisons. (#1001)

* Consistently use toLowerCase in tag name comparisons.

* Add quick note about tagName casing.

docs/walkthroughs/saving-and-loading-html-content.md

@@ -54,7 +54,7 @@ const rules = [
   // Add our first rule with a deserializing function.
   {
     deserialize(el, next) {
-      if (el.tagName == 'P') {
+      if (el.tagName.toLowerCase() == 'p') {
         return {
           kind: 'block',
           type: 'paragraph',
@@ -70,13 +70,15 @@ If you've worked with the [`Raw`](../reference/serializers/raw.md) serializer be
 
 The `el` argument that the `deserialize` function receives is just a DOM element. And the `next` argument is a function that will deserialize any element(s) we pass it, which is how you recurse through each node's children.
 
+A quick note on `el.tagName` -- in browser environments, Slate uses the native `DOMParser` to parse HTML, which returns uppercase tag names. In server-side or node environments, we recommend [providing parse5](https://docs.slatejs.org/reference/serializers/html.html#parsehtml) to parse HTML; however, parse5 returns lowercase tag names due to some subtle complexities in specifications. Consequentially, we recommend using case-insensitive tag comparisons, so your code just works everywhere without having to worry about the parser implementation.
+
 Okay, that's `deserialize`, now let's define the `serialize` property of the paragraph rule as well:
 
 ```js
 const rules = [
   {
     deserialize(el, next) {
-      if (el.tagName == 'P') {
+      if (el.tagName.toLowerCase() == 'p') {
         return {
           kind: 'block',
           type: 'paragraph',
@@ -105,16 +107,16 @@ Let's add the other types of blocks we want:
 ```js
 // Refactor block tags into a dictionary for cleanliness.
 const BLOCK_TAGS = {
-  P: 'paragraph',
+  p: 'paragraph',
-  BLOCKQUOTE: 'quote',
+  blockquote: 'quote',
-  PRE: 'code'
+  pre: 'code'
 }
 
 const rules = [
   {
     // Switch deserialize to handle more blocks...
     deserialize(el, next) {
-      const type = BLOCK_TAGS[el.tagName]
+      const type = BLOCK_TAGS[el.tagName.toLowerCase()]
       if (!type) return
       return {
         kind: 'block',
@@ -144,22 +146,22 @@ Okay. So now our serializer can handle blocks, but we need to add our marks to i
 
 ```js
 const BLOCK_TAGS = {
-  BLOCKQUOTE: 'quote',
+  blockquote: 'quote',
-  P: 'paragraph',
+  p: 'paragraph',
-  PRE: 'code'
+  pre: 'code'
 }
 
 // Add a dictionary of mark tags.
 const MARK_TAGS = {
-  EM: 'italic',
+  em: 'italic',
-  STRONG: 'bold',
+  strong: 'bold',
-  U: 'underline',
+  u: 'underline',
 }
 
 const rules = [
   {
     deserialize(el, next) {
-      const type = BLOCK_TAGS[el.tagName]
+      const type = BLOCK_TAGS[el.tagName.toLowerCase()]
       if (!type) return
       return {
         kind: 'block',
@@ -179,7 +181,7 @@ const rules = [
   // Add a new rule that handles marks...
   {
     deserialize(el, next) {
-      const type = MARK_TAGS[el.tagName]
+      const type = MARK_TAGS[el.tagName.toLowerCase()]
       if (!type) return
       return {
         kind: 'mark',

test/serializers/fixtures/html/deserialize/block-nested/index.js

@@ -3,7 +3,7 @@ export default {
   rules: [
     {
       deserialize(el, next) {
-        switch (el.tagName) {
+        switch (el.tagName.toLowerCase()) {
           case 'p': {
             return {
               kind: 'block',

test/serializers/fixtures/html/deserialize/block-no-children/index.js

@@ -3,7 +3,7 @@ export default {
   rules: [
     {
       deserialize(el, next) {
-        switch (el.tagName) {
+        switch (el.tagName.toLowerCase()) {
           case 'p': {
             return {
               kind: 'block',

test/serializers/fixtures/html/deserialize/block-with-data/index.js

@@ -3,7 +3,7 @@ export default {
   rules: [
     {
       deserialize(el, next) {
-        switch (el.tagName) {
+        switch (el.tagName.toLowerCase()) {
           case 'p': {
             return {
               kind: 'block',

test/serializers/fixtures/html/deserialize/block-with-is-void/index.js

@@ -3,7 +3,7 @@ export default {
   rules: [
     {
       deserialize(el, next) {
-        switch (el.tagName) {
+        switch (el.tagName.toLowerCase()) {
           case 'p': {
             return {
               kind: 'block',

test/serializers/fixtures/html/deserialize/block/index.js

@@ -3,7 +3,7 @@ export default {
   rules: [
     {
       deserialize(el, next) {
-        switch (el.tagName) {
+        switch (el.tagName.toLowerCase()) {
           case 'p': {
             return {
               kind: 'block',

test/serializers/fixtures/html/deserialize/default-block/index.js

@@ -3,7 +3,7 @@ export default {
   rules: [
     {
       deserialize(el, next) {
-        switch (el.tagName) {
+        switch (el.tagName.toLowerCase()) {
           case 'p': {
             return {
               kind: 'block',

test/serializers/fixtures/html/deserialize/html-comment/index.js

@@ -3,7 +3,7 @@ export default {
   rules: [
     {
       deserialize(el, next) {
-        switch (el.tagName) {
+        switch (el.tagName.toLowerCase()) {
           case 'p': {
             return {
               kind: 'block',

test/serializers/fixtures/html/deserialize/inline-nested/index.js

@@ -3,7 +3,7 @@ export default {
   rules: [
     {
       deserialize(el, next) {
-        switch (el.tagName) {
+        switch (el.tagName.toLowerCase()) {
           case 'p': {
             return {
               kind: 'block',

test/serializers/fixtures/html/deserialize/inline-no-children/index.js

@@ -3,7 +3,7 @@ export default {
   rules: [
     {
       deserialize(el, next) {
-        switch (el.tagName) {
+        switch (el.tagName.toLowerCase()) {
           case 'p': {
             return {
               kind: 'block',

test/serializers/fixtures/html/deserialize/inline-with-data/index.js

@@ -3,7 +3,7 @@ export default {
   rules: [
     {
       deserialize(el, next) {
-        switch (el.tagName) {
+        switch (el.tagName.toLowerCase()) {
           case 'p': {
             return {
               kind: 'block',

test/serializers/fixtures/html/deserialize/inline-with-is-void/index.js

@@ -3,7 +3,7 @@ export default {
   rules: [
     {
       deserialize(el, next) {
-        switch (el.tagName) {
+        switch (el.tagName.toLowerCase()) {
           case 'p': {
             return {
               kind: 'block',

test/serializers/fixtures/html/deserialize/inline/index.js

@@ -3,7 +3,7 @@ export default {
   rules: [
     {
       deserialize(el, next) {
-        switch (el.tagName) {
+        switch (el.tagName.toLowerCase()) {
           case 'p': {
             return {
               kind: 'block',

test/serializers/fixtures/html/deserialize/mark-interleaved/index.js

@@ -3,7 +3,7 @@ export default {
   rules: [
     {
       deserialize(el, next) {
-        switch (el.tagName) {
+        switch (el.tagName.toLowerCase()) {
           case 'p': {
             return {
               kind: 'block',

test/serializers/fixtures/html/deserialize/mark-nested/index.js

@@ -3,7 +3,7 @@ export default {
   rules: [
     {
       deserialize(el, next) {
-        switch (el.tagName) {
+        switch (el.tagName.toLowerCase()) {
           case 'p': {
             return {
               kind: 'block',

test/serializers/fixtures/html/deserialize/mark-with-data/index.js

@@ -3,7 +3,7 @@ export default {
   rules: [
     {
       deserialize(el, next) {
-        switch (el.tagName) {
+        switch (el.tagName.toLowerCase()) {
           case 'p': {
             return {
               kind: 'block',

test/serializers/fixtures/html/deserialize/mark/index.js

@@ -3,7 +3,7 @@ export default {
   rules: [
     {
       deserialize(el, next) {
-        switch (el.tagName) {
+        switch (el.tagName.toLowerCase()) {
           case 'p': {
             return {
               kind: 'block',

test/serializers/fixtures/html/deserialize/no-next/index.js

@@ -3,7 +3,7 @@ export default {
   rules: [
     {
       deserialize(el, next) {
-        switch (el.tagName) {
+        switch (el.tagName.toLowerCase()) {
           case 'p': {
             return {
               kind: 'block',

test/serializers/fixtures/html/deserialize/skip-element/index.js

@@ -3,14 +3,14 @@ export default {
   rules: [
     {
       deserialize(el, next) {
-        if (el.tagName == 'div') {
+        if (el.tagName.toLowerCase() == 'div') {
           return null
         }
       }
     },
     {
       deserialize(el, next) {
-        if (el.tagName == 'hr') {
+        if (el.tagName.toLowerCase() == 'hr') {
           return {
             kind: 'block',
             type: 'divider',