diff --git a/docs/walkthroughs/saving-and-loading-html-content.md b/docs/walkthroughs/saving-and-loading-html-content.md index 8f962accc..86bf9218c 100644 --- a/docs/walkthroughs/saving-and-loading-html-content.md +++ b/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', - BLOCKQUOTE: 'quote', - PRE: 'code' + p: 'paragraph', + blockquote: 'quote', + 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', - P: 'paragraph', - PRE: 'code' + blockquote: 'quote', + p: 'paragraph', + pre: 'code' } // Add a dictionary of mark tags. const MARK_TAGS = { - EM: 'italic', - STRONG: 'bold', - U: 'underline', + em: 'italic', + strong: 'bold', + 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', diff --git a/test/serializers/fixtures/html/deserialize/block-nested/index.js b/test/serializers/fixtures/html/deserialize/block-nested/index.js index 5bf54b16c..c3d264d8f 100644 --- a/test/serializers/fixtures/html/deserialize/block-nested/index.js +++ b/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', diff --git a/test/serializers/fixtures/html/deserialize/block-no-children/index.js b/test/serializers/fixtures/html/deserialize/block-no-children/index.js index 99840a59a..ce785b570 100644 --- a/test/serializers/fixtures/html/deserialize/block-no-children/index.js +++ b/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', diff --git a/test/serializers/fixtures/html/deserialize/block-with-data/index.js b/test/serializers/fixtures/html/deserialize/block-with-data/index.js index 27c9795e0..4dd34186c 100644 --- a/test/serializers/fixtures/html/deserialize/block-with-data/index.js +++ b/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', diff --git a/test/serializers/fixtures/html/deserialize/block-with-is-void/index.js b/test/serializers/fixtures/html/deserialize/block-with-is-void/index.js index 4e66b7664..d230a36fb 100644 --- a/test/serializers/fixtures/html/deserialize/block-with-is-void/index.js +++ b/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', diff --git a/test/serializers/fixtures/html/deserialize/block/index.js b/test/serializers/fixtures/html/deserialize/block/index.js index cd58f29f1..1d4463f48 100644 --- a/test/serializers/fixtures/html/deserialize/block/index.js +++ b/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', diff --git a/test/serializers/fixtures/html/deserialize/default-block/index.js b/test/serializers/fixtures/html/deserialize/default-block/index.js index eb4df3feb..629589d5d 100644 --- a/test/serializers/fixtures/html/deserialize/default-block/index.js +++ b/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', diff --git a/test/serializers/fixtures/html/deserialize/html-comment/index.js b/test/serializers/fixtures/html/deserialize/html-comment/index.js index cd58f29f1..1d4463f48 100644 --- a/test/serializers/fixtures/html/deserialize/html-comment/index.js +++ b/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', diff --git a/test/serializers/fixtures/html/deserialize/inline-nested/index.js b/test/serializers/fixtures/html/deserialize/inline-nested/index.js index 38ea4dba5..dcd9a84bf 100644 --- a/test/serializers/fixtures/html/deserialize/inline-nested/index.js +++ b/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', diff --git a/test/serializers/fixtures/html/deserialize/inline-no-children/index.js b/test/serializers/fixtures/html/deserialize/inline-no-children/index.js index 99840a59a..ce785b570 100644 --- a/test/serializers/fixtures/html/deserialize/inline-no-children/index.js +++ b/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', diff --git a/test/serializers/fixtures/html/deserialize/inline-with-data/index.js b/test/serializers/fixtures/html/deserialize/inline-with-data/index.js index da3ad984d..bb3f58098 100644 --- a/test/serializers/fixtures/html/deserialize/inline-with-data/index.js +++ b/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', diff --git a/test/serializers/fixtures/html/deserialize/inline-with-is-void/index.js b/test/serializers/fixtures/html/deserialize/inline-with-is-void/index.js index 6eaa6a19f..3266243c8 100644 --- a/test/serializers/fixtures/html/deserialize/inline-with-is-void/index.js +++ b/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', diff --git a/test/serializers/fixtures/html/deserialize/inline/index.js b/test/serializers/fixtures/html/deserialize/inline/index.js index 99840a59a..ce785b570 100644 --- a/test/serializers/fixtures/html/deserialize/inline/index.js +++ b/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', diff --git a/test/serializers/fixtures/html/deserialize/mark-interleaved/index.js b/test/serializers/fixtures/html/deserialize/mark-interleaved/index.js index c07bd4303..858504d46 100644 --- a/test/serializers/fixtures/html/deserialize/mark-interleaved/index.js +++ b/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', diff --git a/test/serializers/fixtures/html/deserialize/mark-nested/index.js b/test/serializers/fixtures/html/deserialize/mark-nested/index.js index c07bd4303..858504d46 100644 --- a/test/serializers/fixtures/html/deserialize/mark-nested/index.js +++ b/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', diff --git a/test/serializers/fixtures/html/deserialize/mark-with-data/index.js b/test/serializers/fixtures/html/deserialize/mark-with-data/index.js index 9de13046f..0d315a532 100644 --- a/test/serializers/fixtures/html/deserialize/mark-with-data/index.js +++ b/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', diff --git a/test/serializers/fixtures/html/deserialize/mark/index.js b/test/serializers/fixtures/html/deserialize/mark/index.js index a63641657..bc72784ff 100644 --- a/test/serializers/fixtures/html/deserialize/mark/index.js +++ b/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', diff --git a/test/serializers/fixtures/html/deserialize/no-next/index.js b/test/serializers/fixtures/html/deserialize/no-next/index.js index aa395c531..af904874b 100644 --- a/test/serializers/fixtures/html/deserialize/no-next/index.js +++ b/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', diff --git a/test/serializers/fixtures/html/deserialize/skip-element/index.js b/test/serializers/fixtures/html/deserialize/skip-element/index.js index d56247802..0b7c17153 100644 --- a/test/serializers/fixtures/html/deserialize/skip-element/index.js +++ b/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',