fix(domhandler): remove limit on mark transforms (#183)

* fix(domhandler): remove limit on mark transforms

* style(convertslate): keep change request focussed

* test(stylesmixedin): add test for conversion back to slate

* test(stylesmixedin): rename tests

* fix(packagejson): restore

packages/dom/src/lib/utilities/domhandler.ts

@@ -16,48 +16,12 @@ export const nestedMarkElementsString = (els: Element[], text: string) => {
 }
 
 export const nestedMarkElements = (els: Element[], element: Element | Text) => {
-  if (els.length === 0) {
-    return element
-  }
-  const el1 = els.pop()
-  if (el1) {
-    el1.children = [element]
-    element = el1
-  }
-  if (!els || els.length === 0) {
-    return element
-  }
-  const el2 = els.pop()
-  if (el2) {
-    el2.children = [element]
-    element = el2
-  }
-  if (!els || els.length === 0) {
-    return element
-  }
-  const el3 = els.pop()
-  if (el3) {
-    el3.children = [element]
-    element = el3
-  }
-  if (!els || els.length === 0) {
-    return element
-  }
-  const el4 = els.pop()
-  if (el4) {
-    el4.children = [element]
-    element = el4
-  }
-  if (!els || els.length === 0) {
-    return element
-  }
-  const el5 = els.pop()
-  if (el5) {
-    el5.children = [element]
-    element = el5
-  }
-  if (!els || els.length === 0) {
-    return element
+  while (els && els.length > 0) {
+    const el = els.pop()
+    if (el) {
+      el.children = [element]
+      element = el
+    }
   }
   return element
 }

packages/tests/src/lib/fixtures/styles-in-leaf.ts

@@ -0,0 +1,29 @@
+interface Ifixture {
+  name: string
+  html: string
+  slate: object[]
+}
+
+export const fixtures: Ifixture[] = [
+  {
+    name: 'p tag element transform',
+    html: '<p><span style="background-color:#38761D;"><span style="color:#FE9900;"><span style="font-family:arial narrow;"><span style="font-size:20px;"><strong><u><i>some title!</i></u></strong></span></span></span></span></p>',
+    slate: [
+      {
+        type: 'p',
+        children: [
+          {
+            backgroundColor: '#38761D',
+            color: '#FE9900',
+            fontFamily: "arial narrow",
+            fontSize: "20px",
+            text: "some title!",
+            bold: true,
+            italic: true,
+            underline: true,
+          },
+        ]
+      }
+    ]
+  },
+]

packages/tests/src/lib/html/withStylesInLeaf.spec.ts

@@ -0,0 +1,55 @@
+import { slateToHtml, htmlToSlateConfig, HtmlToSlateConfig, htmlToSlate } from '@slate-serializers/html'
+import { Element } from 'domhandler'
+import { SlateToDomConfig, slateToDomConfig } from '@slate-serializers/dom'
+import { transformStyleStringToObject } from '@slate-serializers/utilities'
+import { stylesMixedInFixtures as fixtures } from '../tests'
+
+export const slateToDomConfigStyleObject: SlateToDomConfig = {
+  ...slateToDomConfig,
+  markTransforms: {
+    ...slateToDomConfig.markTransforms,
+    backgroundColor: ({ node }) => {
+      return new Element('span', {
+        style: `background-color:${node.backgroundColor};`
+      })
+    },
+    color: ({ node }) => {
+      return new Element('span', {
+        style: `color:${node.color};`
+      })
+    },
+    fontFamily: ({ node }) => {
+      return new Element('span', {
+        style: `font-family:${node.fontFamily};`
+      })
+    },
+    fontSize: ({ node }) => {
+      return new Element('span', {
+        style: `font-size:${node.fontSize};`
+      })
+    }
+  },
+  defaultTag: 'p',
+}
+
+export const htmlToSlateConfigStyleObject: HtmlToSlateConfig = {
+  ...htmlToSlateConfig,
+  textTags: {
+    ...htmlToSlateConfig.textTags,
+    span: (el) => {
+      const style = el?.attribs && transformStyleStringToObject(el.attribs['style'] || ``)
+      return {
+        ...(style && style)
+      }
+    }
+  },
+}
+
+describe('styles as attributes on a leaf', () => {
+  for (const fixture of fixtures) {
+    it(`${fixture.name}`, () => {
+      expect(slateToHtml(fixture.slate, slateToDomConfigStyleObject )).toEqual(fixture.html)
+      expect(htmlToSlate(fixture.html, htmlToSlateConfigStyleObject)).toEqual(fixture.slate)
+    })
+  }
+})

packages/tests/src/lib/tests.ts

@@ -2,3 +2,4 @@ export { fixtures as combinedFixtures } from './fixtures/combined'
 export { fixtures as elementFixtures } from './fixtures/elementTags'
 export { fixtures as textFixtures } from './fixtures/textTags'
 export { fixtures as styleObjectFixtures } from './fixtures/style-object'
+export { fixtures as stylesMixedInFixtures } from './fixtures/styles-in-leaf'