style(*): lint and format (#68)

Release-As: 0.2.0
thompsonsj · Jun 18, 2023 · e800aba · e800aba
1 parent 4dd110f
commit e800aba
Show file tree

Hide file tree

Showing 5 changed files with 60 additions and 52 deletions.
diff --git a/__tests__/serializers/slateToHtml/index.spec.ts b/__tests__/serializers/slateToHtml/index.spec.ts
@@ -175,7 +175,7 @@ describe('custom config', () => {
     const config = {
       ...slateToDomConfig,
       elementMap: {
-        ['heading-one']: 'h1'
+        ['heading-one']: 'h1',
       },
     }
     expect(slateToHtml(slate, config)).toEqual(html)
@@ -223,13 +223,13 @@ describe('custom config', () => {
             text: 'Paragraph',
           },
         ],
-      }
+      },
     ]
     const config = {
       ...slateToDomConfig,
       elementStyleMap: {
         fontSize: 'font-size',
-      }
+      },
     }
     expect(slateToHtml(slate, config)).toEqual(html)
   })
@@ -250,14 +250,14 @@ describe('custom config', () => {
     const config = {
       ...slateToDomConfig,
       markMap: {
-        subScript: ['sub']
+        subScript: ['sub'],
       },
     }
     expect(slateToHtml(slate, config)).toEqual(html)
   })
 
   it('processes a mark transform', () => {
-    const html = '<p><span style=\"font-size:96px;\"><strong>Paragraph</strong></span></p>'
+    const html = '<p><span style="font-size:96px;"><strong>Paragraph</strong></span></p>'
     const slate = [
       {
         type: 'p',
@@ -268,7 +268,7 @@ describe('custom config', () => {
             text: 'Paragraph',
           },
         ],
-      }
+      },
     ]
     const config = {
       ...slateToDomConfig,
@@ -285,7 +285,7 @@ describe('custom config', () => {
   })
 
   it('demo for issue #59', () => {
-    const html = '<p><span style=\"font-size:20px;\"><strong><sub>Paragraph</sub></strong></span></p>'
+    const html = '<p><span style="font-size:20px;"><strong><sub>Paragraph</sub></strong></span></p>'
     const slate = [
       {
         type: 'p',
@@ -299,19 +299,19 @@ describe('custom config', () => {
             text: 'Paragraph',
           },
         ],
-      }
+      },
     ]
     const config = {
       ...slateToDomConfig,
       markMap: {
         ...slateToDomConfig.markMap,
-        subscript: ['sub']
+        subscript: ['sub'],
       },
       markTransforms: {
         ...slateToDomConfig.markTransforms,
         style: ({ node }: { node?: any }) => {
           return new Element('span', {
-            ...(node.style?.fontSize && {style: `font-size:${node.style.fontSize};`}),
+            ...(node.style?.fontSize && { style: `font-size:${node.style.fontSize};` }),
           })
         },
       },
@@ -321,16 +321,20 @@ describe('custom config', () => {
 })
 
 describe('style attribute css transforms with postcss', () => {
-  const transformStyleObjectToString = (style: {[key: string]: any}) => {
+  const transformStyleObjectToString = (style: { [key: string]: any }) => {
     const postcssOptions = {
       parser: postcssJs,
-      from: undefined, 
+      from: undefined,
     }
-    return postcss().process(style, postcssOptions).css.replace(/(\r\n|\n|\r)/gm, " ").replace(/\s\s+/g, ' ')
+    return postcss()
+      .process(style, postcssOptions)
+      .css.replace(/(\r\n|\n|\r)/gm, ' ')
+      .replace(/\s\s+/g, ' ')
   }
 
   it('element transforms', () => {
-    const html = '<p style=\"font-size: 96px; --text-color: #DD3A0A; @media screen { z-index: 1; color: var(--text-color) }\"><strong>Paragraph</strong></p>'
+    const html =
+      '<p style="font-size: 96px; --text-color: #DD3A0A; @media screen { z-index: 1; color: var(--text-color) }"><strong>Paragraph</strong></p>'
     const slate = [
       {
         type: 'p',
@@ -339,33 +343,38 @@ describe('style attribute css transforms with postcss', () => {
           '--text-color': '#DD3A0A',
           '@media screen': {
             zIndex: '1',
-            color: 'var(--text-color)'
-          }
+            color: 'var(--text-color)',
+          },
         },
         children: [
           {
             bold: true,
             text: 'Paragraph',
           },
         ],
-      }
+      },
     ]
     const config = {
       ...slateToDomConfig,
       elementTransforms: {
         ...slateToDomConfig.elementTransforms,
-        p: ({ node, children }: { node?: any, children?: ChildNode[] }) => {
-          return new Element('p', {
-            style: transformStyleObjectToString(node.style),
-          }, children)
+        p: ({ node, children }: { node?: any; children?: ChildNode[] }) => {
+          return new Element(
+            'p',
+            {
+              style: transformStyleObjectToString(node.style),
+            },
+            children,
+          )
         },
       },
     }
     expect(slateToHtml(slate, config)).toEqual(html)
   })
 
   it('mark transforms', () => {
-    const html = '<p><span style=\"font-size: 96px; --text-color: #DD3A0A; @media screen { z-index: 1; color: var(--text-color) }\"><strong>Paragraph</strong></span></p>'
+    const html =
+      '<p><span style="font-size: 96px; --text-color: #DD3A0A; @media screen { z-index: 1; color: var(--text-color) }"><strong>Paragraph</strong></span></p>'
     const slate = [
       {
         type: 'p',
@@ -377,13 +386,13 @@ describe('style attribute css transforms with postcss', () => {
               '--text-color': '#DD3A0A',
               '@media screen': {
                 zIndex: '1',
-                color: 'var(--text-color)'
-              }
+                color: 'var(--text-color)',
+              },
             },
             text: 'Paragraph',
           },
         ],
-      }
+      },
     ]
     const config = {
       ...slateToDomConfig,
@@ -401,7 +410,7 @@ describe('style attribute css transforms with postcss', () => {
 
   it('mark transforms on multiple marks', () => {
     const html =
-      '<p>This is editable <span style=\"font-size: 20px; font-weight: 600; text-decoration: underline dotted\"><strong>rich</strong></span> text, <span style=\"text-decoration: underline\"><i>much</i></span> better than a <span style=\"color: red\"><pre><code>&lt;textarea&gt;</code></pre></span>!</p>'
+      '<p>This is editable <span style="font-size: 20px; font-weight: 600; text-decoration: underline dotted"><strong>rich</strong></span> text, <span style="text-decoration: underline"><i>much</i></span> better than a <span style="color: red"><pre><code>&lt;textarea&gt;</code></pre></span>!</p>'
     const slate = [
       {
         type: 'p',
@@ -413,10 +422,10 @@ describe('style attribute css transforms with postcss', () => {
             text: 'rich',
             bold: true,
             style: {
-              fontSize: "20px",
+              fontSize: '20px',
               fontWeight: 600,
-              textDecoration: "underline dotted",
-            }
+              textDecoration: 'underline dotted',
+            },
           },
           {
             text: ' text, ',
@@ -425,8 +434,8 @@ describe('style attribute css transforms with postcss', () => {
             text: 'much',
             italic: true,
             style: {
-              textDecoration: "underline",
-            }
+              textDecoration: 'underline',
+            },
           },
           {
             text: ' better than a ',
@@ -435,14 +444,14 @@ describe('style attribute css transforms with postcss', () => {
             text: '<textarea>',
             code: true,
             style: {
-              color: "red",
-            }
+              color: 'red',
+            },
           },
           {
             text: '!',
           },
         ],
-      }
+      },
     ]
     const config = {
       ...slateToDomConfig,

diff --git a/__tests__/utilities/domhandler.spec.ts b/__tests__/utilities/domhandler.spec.ts
@@ -1,4 +1,4 @@
-import { Element } from "domhandler"
+import { Element } from 'domhandler'
 import { nestedMarkElementsString } from '../../src/utilities/domhandler'
 
 /**
@@ -13,9 +13,12 @@ describe('nestedMarkElementsString', () => {
   })
 
   it('nests text in 2 mark elements', () => {
-    expect(nestedMarkElementsString([new Element('u', {}), new Element('i', {})], 'Unarticulated Annotation, and Idiomatic Text text')).toEqual(
-      '<u><i>Unarticulated Annotation, and Idiomatic Text text</i></u>',
-    )
+    expect(
+      nestedMarkElementsString(
+        [new Element('u', {}), new Element('i', {})],
+        'Unarticulated Annotation, and Idiomatic Text text',
+      ),
+    ).toEqual('<u><i>Unarticulated Annotation, and Idiomatic Text text</i></u>')
   })
 
   it('nests text in 3 mark elements', () => {

diff --git a/src/config/slateToDom/types.ts b/src/config/slateToDom/types.ts
@@ -1,13 +1,7 @@
 import { ChildNode, Element } from 'domhandler'
 
 interface MarkTagTransform {
-  [key: string]: ({
-    node,
-    attribs,
-  }: {
-    node?: any
-    attribs?: { [key: string]: string }
-  }) => Element
+  [key: string]: ({ node, attribs }: { node?: any; attribs?: { [key: string]: string } }) => Element
 }
 
 interface ElementTagTransform {

diff --git a/src/serializers/slateToHtml/index.ts b/src/serializers/slateToHtml/index.ts
@@ -51,8 +51,7 @@ const slateNodeToHtml = (node: any, config = defaultConfig, isLastNodeInDocument
 
       Object.keys(config.markMap).forEach((key) => {
         if ((node as any)[key]) {
-          const elements: Element[] = config.markMap[key]
-            .map((tagName) => new Element(tagName, {}, []))
+          const elements: Element[] = config.markMap[key].map((tagName) => new Element(tagName, {}, []))
           markElements.push(...elements)
         }
       })

diff --git a/src/utilities/index.ts b/src/utilities/index.ts
@@ -84,11 +84,14 @@ export const encodeBreakingEntities = (str: string) => {
   return str
 }
 
-export const intersection = (o1: {[key: string]: any}, o2: {[key: string]: any}) => {
-  return Object.keys(o1).concat(Object.keys(o2)).sort().reduce(function (r: string[], a, i, aa) {
+export const intersection = (o1: { [key: string]: any }, o2: { [key: string]: any }) => {
+  return Object.keys(o1)
+    .concat(Object.keys(o2))
+    .sort()
+    .reduce((r: string[], a, i, aa) => {
       if (i && aa[i - 1] === a) {
-          r.push(a);
+        r.push(a)
       }
-      return r;
-  }, []);
+      return r
+    }, [])
 }