diff --git a/packages/html2react/src/libraries/__tests__/parse.tests.ts b/packages/html2react/src/libraries/__tests__/parse.tests.ts index 26f68f152..5d9204105 100644 --- a/packages/html2react/src/libraries/__tests__/parse.tests.ts +++ b/packages/html2react/src/libraries/__tests__/parse.tests.ts @@ -26,4 +26,33 @@ describe("parse", () => { expect((result[1].props as any).for).toBeUndefined(); expect(result[1].props.htmlFor).toBe("nothing"); }); + + test("maps from SVG attributes to react props", () => { + const resultOne = parse( + '' + ) as Element[]; + + expect((resultOne[0].props as any)["xmlns:xlink"]).toBeUndefined(); + expect((resultOne[0].props as any).xmlnsXlink).toBe( + "https://www.w3.org/1999/xlink" + ); + + const resultTwo = parse( + '' + ) as Element[]; + + expect((resultTwo[0].props as any)["stroke-width"]).toBeUndefined(); + expect((resultTwo[0].props as any).strokeWidth).toBe("1"); + expect((resultTwo[0].props as any)["fill-rule"]).toBeUndefined(); + expect((resultTwo[0].props as any).fillRule).toBe("evenodd"); + }); + + test("should not map data attributes as SVG attributes", () => { + const result = parse( + '
' + ) as Element[]; + + expect((result[0].props as any)["data-src"]).toBe("https://frontity.org"); + expect((result[0].props as any).dataSrc).toBeUndefined(); + }); }); diff --git a/packages/html2react/src/libraries/parse/attributes/html.json b/packages/html2react/src/libraries/parse/attributes/html.json index 0ace3d80a..d42e0e96c 100644 --- a/packages/html2react/src/libraries/parse/attributes/html.json +++ b/packages/html2react/src/libraries/parse/attributes/html.json @@ -39,5 +39,7 @@ "srcLang", "srcSet", "tabIndex", - "useMap" + "useMap", + "acceptCharset", + "httpEquiv" ] diff --git a/packages/html2react/src/libraries/parse/index.ts b/packages/html2react/src/libraries/parse/index.ts index b6dc7cd48..4b4072c75 100644 --- a/packages/html2react/src/libraries/parse/index.ts +++ b/packages/html2react/src/libraries/parse/index.ts @@ -30,16 +30,14 @@ const adaptNode: AdaptNode = (himalayaNode, parent) => { props.className = value; } else if (key === "for") { props.htmlFor = value; - } else if (key === "accept-charset") { - props["acceptCharset"] = value; - } else if (key === "http-equiv") { - props["httpEquiv"] = value; - - // Add inline styles to the component with `emotion`. + } else if (/^data-/.test(key)) { + props[key] = value; } else if (key === "style") { + // Add inline styles to the component with `emotion`. props.css = css(value); } else if (!/^on/.test(key)) { - const camelCaseKey = attributesMap[key.toLowerCase()]; + const camelCaseKey = + attributesMap[key.replace(/[-:]/, "").toLowerCase()]; // Map keys with no value to `true` booleans. props[camelCaseKey || key] = value === null ? true : value; }