New: Add support for event handler

Author: thomasthiebaud

src/dom.ts

@@ -1,4 +1,5 @@
 import * as dompurify from 'dompurify'
+
 import { Options } from './options'
 
 export enum NodeType {
@@ -20,7 +21,6 @@ export function getAttributes(elementAttributes: NamedNodeMap) {
   return attributes
 }
 
-export function parse(html: string, options: Options): NodeListOf<Node & ChildNode> {
-  const document = dompurify.sanitize(html, options.dom) as DocumentFragment
-  return document.childNodes
+export function parse(html: string, options: Options): DocumentFragment {
+  return dompurify.sanitize(html, options.dom) as DocumentFragment
 }

src/event.ts

@@ -0,0 +1,35 @@
+/**
+ * A map between an event name and an event handler
+ */
+export interface EventHandlers {
+  [keyof: string]: React.EventHandler<any>
+}
+
+/**
+ * A map between a css selector and one or several event handlers
+ */
+export interface SelectorsToEventHandlers {
+  [keyof: string]: EventHandlers
+}
+
+/**
+ * An internal representation of an element that include event handlers
+ */
+export interface EnrichedElement extends Element {
+  eventHandlers?: EventHandlers
+}
+
+export function addEventHandlers(document: DocumentFragment, selectorsToEventHandlers: SelectorsToEventHandlers) {
+  Object.keys(selectorsToEventHandlers).forEach((selector) => {
+    const eventHandlers = selectorsToEventHandlers[selector]
+    const elements = document.querySelectorAll(selector)
+    for (let i = 0; i < elements.length; i ++) {
+      const element = elements.item(i) as EnrichedElement
+      Object.keys(eventHandlers).forEach((eventName) => {
+        const handler = eventHandlers[eventName]
+        element.eventHandlers = {}
+        element.eventHandlers[eventName] = handler
+      })
+    }
+  })
+}

src/index.ts

@@ -1,4 +1,5 @@
 import * as dom from './dom'
+import { addEventHandlers } from './event'
 import { getOptions, Options } from './options'
 import { render } from './react'
 
@@ -8,6 +9,11 @@ export function parse(html: string, userOptions?: Options): React.ReactNode[] {
   }
 
   const options = getOptions(userOptions)
+  const document = dom.parse(html, options)
 
-  return render(dom.parse(html, options))
+  if (options.eventHandlers) {
+    addEventHandlers(document, options.eventHandlers)
+  }
+
+  return render(document.childNodes)
 }

src/options.ts

@@ -1,3 +1,5 @@
+import { SelectorsToEventHandlers } from './event'
+
 function isObject(item: any) {
   return (item && typeof item === 'object' && !Array.isArray(item))
 }
@@ -51,8 +53,12 @@ export interface DOMOptions {
 
 export interface Options {
   dom?: DOMOptions
+  eventHandlers?: SelectorsToEventHandlers
 }
 
+/**
+ * Options that cannot be overidden by the user because they are used internaly by the library
+ */
 const mandatoryOptions: Options = {
   dom: {
     RETURN_DOM: false,

src/react.ts

@@ -1,10 +1,11 @@
 import * as React from 'react'
 
 import { getAttributes, NodeType } from './dom'
+import { EnrichedElement, EventHandlers } from './event'
 
-export interface Attributes { [keyof: string]: string }
+export interface Attributes { [keyof: string]: string | React.EventHandler<any> }
 
-const reactAttributesMap: Attributes = {
+const reactAttributesMap: { [keyof: string]: string } = {
   acceptcharset: 'acceptCharset',
   accesskey: 'accessKey',
   allowfullscreen: 'allowFullScreen',
@@ -52,10 +53,16 @@ const reactAttributesMap: Attributes = {
   usemap: 'useMap',
 }
 
-function transformAttributes(attributesMap: NamedNodeMap): Attributes {
+function transformAttributes(attributesMap: NamedNodeMap, eventHandlers: EventHandlers): Attributes {
   const attributes = getAttributes(attributesMap)
   const transformedAttributes: Attributes = {}
 
+  if (eventHandlers) {
+    Object.keys(eventHandlers).forEach((eventHandler) => {
+      transformedAttributes[eventHandler] = eventHandlers[eventHandler]
+    })
+  }
+
   Object.keys(attributes).forEach((key) => {
     if (reactAttributesMap[key]) {
       transformedAttributes[reactAttributesMap[key]] = attributes[key]
@@ -71,16 +78,16 @@ function renderTextNode(node: Node & ChildNode) {
 }
 
 function renderElementNode(node: Node & ChildNode) {
-  const element = transform(node as Element)
+  const element = transform(node as EnrichedElement)
   if (element.childNodes) {
     return React.createElement(element.nodeName, element.attributes, render(element.childNodes))
   }
   return React.createElement(element.nodeName, element.attributes)
 }
 
-function transform(element: Element) {
+function transform(element: EnrichedElement) {
   return {
-    attributes: transformAttributes(element.attributes),
+    attributes: transformAttributes(element.attributes, element.eventHandlers),
     childNodes: element.childNodes,
     nodeName: element.nodeName.toLowerCase(),
     nodeType: element.nodeType,

tests/api.spec.ts

@@ -1,4 +1,4 @@
-import { render } from 'enzyme'
+import { render, shallow } from 'enzyme'
 import * as React from 'react'
 
 import * as htmldomToReact from '../src/index'
@@ -24,5 +24,56 @@ describe('Public API', () => {
       expect(wrapper.find('em')).toHaveLength(1)
       expect(wrapper.find('b')).toHaveLength(1)
     })
+
+    it('should accept event handlers', () => {
+      const spy = jest.fn()
+      const elements = htmldomToReact.parse('<em key="1"><b key="2">It\' is working</b></em>', {
+        eventHandlers: {
+          b: {
+            onClick: spy,
+          },
+        },
+      })
+      const wrapper = shallow(React.createElement('div', null, elements))
+      expect(wrapper.text()).toEqual('It\' is working')
+      expect(wrapper.find('em')).toHaveLength(1)
+      expect(wrapper.find('b')).toHaveLength(1)
+      expect(wrapper.find('b').simulate('click'))
+      expect(spy).toHaveBeenCalled()
+    })
+
+    it('should ignore incorrect event handlers', () => {
+      const spy = jest.fn()
+      const elements = htmldomToReact.parse('<em key="1"><b key="2">It\' is working</b></em>', {
+        eventHandlers: {
+          b: {
+            onclick: spy,
+          },
+        },
+      })
+      const wrapper = shallow(React.createElement('div', null, elements))
+      expect(wrapper.text()).toEqual('It\' is working')
+      expect(wrapper.find('em')).toHaveLength(1)
+      expect(wrapper.find('b')).toHaveLength(1)
+      expect(wrapper.find('b').simulate('click'))
+      expect(spy).toHaveBeenCalledTimes(0)
+    })
+
+    it('should ignore incorrect selectors', () => {
+      const spy = jest.fn()
+      const elements = htmldomToReact.parse('<em key="1"><b key="2">It\' is working</b></em>', {
+        eventHandlers: {
+          span: {
+            onClick: spy,
+          },
+        },
+      })
+      const wrapper = shallow(React.createElement('div', null, elements))
+      expect(wrapper.text()).toEqual('It\' is working')
+      expect(wrapper.find('em')).toHaveLength(1)
+      expect(wrapper.find('b')).toHaveLength(1)
+      expect(wrapper.find('b').simulate('click'))
+      expect(spy).toHaveBeenCalledTimes(0)
+    })
   })
 })

tests/dom.spec.ts

@@ -5,15 +5,16 @@ describe('DOM', () => {
   describe('#parse', () => {
     it('should sanitize input', () => {
       const document = parse('This is a <a onclick="console.log(\"WAZAAAA\")">test</a> <script/>', getOptions())
-      expect(document.length).toEqual(3)
-      expect(document.item(0).textContent).toEqual('This is a ')
+      const children = document.childNodes
+      expect(children.length).toEqual(3)
+      expect(children.item(0).textContent).toEqual('This is a ')
 
-      const link = document.item(1) as Element
+      const link = children.item(1) as Element
       expect(link.nodeName).toEqual('A')
       expect(link.textContent).toEqual('test')
       expect(link.getAttribute('onclick')).toBeNull()
 
-      expect(document.item(2).textContent).toEqual(' ')
+      expect(children.item(2).textContent).toEqual(' ')
     })
   })
 })