fix(slatetohtml): do not add an empty style attribute (thompsonsj#20)

* fix(slatetohtml): do not add an empty style attribute * style(utilities): format
cloudbeds · Dec 6, 2022 · a303806 · a303806
1 parent a35597f
commit a303806
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 7 deletions.
diff --git a/__tests__/serializers/slateToDom/index.spec.ts b/__tests__/serializers/slateToDom/index.spec.ts
@@ -1,8 +1,8 @@
 import { slateToDom } from '../../../src'
 import { selectAll } from 'css-select'
 import { parseDocument } from 'htmlparser2'
-import { replaceElement, textContent } from 'domutils'
-import { Document, Element, isTag, Node } from 'domhandler'
+import { replaceElement } from 'domutils'
+import { Element, Node } from 'domhandler'
 import serializer from 'dom-serializer'
 
 describe('slateToDom expected behaviour', () => {

diff --git a/__tests__/serializers/slateToHtml/slateDemo.spec.ts b/__tests__/serializers/slateToHtml/slateDemo.spec.ts
@@ -1,7 +1,7 @@
 import { slateToHtml, slateDemoSlateToDomConfig } from "../../../src"
 
 describe('slateToHtml expected behaviour', () => {
-  it('encodes HTML entities', () => {
+  it('adds the `text-align:right;` css property/value to style', () => {
     const html = '<p style="text-align:right;">This is a right aligned paragraph.</p>'
     const slate = [
       {
@@ -16,4 +16,19 @@ describe('slateToHtml expected behaviour', () => {
     ]
     expect(slateToHtml(slate, slateDemoSlateToDomConfig)).toEqual(html)
   })
+
+  it('does not add empty style attributes', () => {
+    const html = '<p>This is a right aligned paragraph.</p>'
+    const slate = [
+      {
+        children: [
+          {
+            text: "This is a right aligned paragraph.",
+          },
+        ],
+        type: "paragraph",
+      },
+    ]
+    expect(slateToHtml(slate, slateDemoSlateToDomConfig)).toEqual(html)
+  })
 })
diff --git a/src/serializers/slatetoHtml/index.ts b/src/serializers/slatetoHtml/index.ts
@@ -4,7 +4,7 @@ import { nestedMarkElements } from '../../utilities/domhandler'
 import serializer from 'dom-serializer'
 import { config as defaultConfig } from '../../config/slateToDom/default'
 import { SlateToDomConfig } from '../..'
-import { getNested, styleToString } from '../../utilities'
+import { getNested, isEmptyObject, styleToString } from '../../utilities'
 
 type SlateToHtml = (node: any[], config?: SlateToDomConfig) => string
 type SlateToDom = (node: any[], config?: SlateToDomConfig) => AnyNode | ArrayLike<AnyNode>
@@ -46,9 +46,12 @@ const slateNodeToHtml = (node: any, config = defaultConfig) => {
         styleAttrs[cssProperty] = cssValue
       }
     })
-    attribs = {
-      ...attribs,
-      style: styleToString(styleAttrs),
+
+    if (!isEmptyObject(styleAttrs)) {
+      attribs = {
+        ...attribs,
+        style: styleToString(styleAttrs),
+      }
     }
   }
 

diff --git a/src/utilities/index.ts b/src/utilities/index.ts
@@ -46,6 +46,9 @@ export const styleToString = (style: { [key: string]: string }) => {
   )
 }
 
+export const isEmptyObject = (obj: any) =>
+  obj && Object.keys(obj).length === 0 && Object.getPrototypeOf(obj) === Object.prototype
+
 export const removeEmpty = (obj: {}): {} => {
   return Object.fromEntries(Object.entries(obj).filter(([_, v]) => v != null))
 }