site: update code to be compatible with new deps

site/component/Article/ImagePreview.jsx

@@ -61,17 +61,11 @@ export default class ImagePreview extends React.Component {
   render() {
     const { imgs } = this.props;
     const imgsMeta = imgs.map((img) => {
-      const span = document.createElement('span');
-      span.innerHTML = img;
-      const imgNode = span.children[0];
-      const attributes = imgNode.attributes;
-      const { alt, description, src } = attributes;
-      const imgClassName = attributes.class.nodeValue;
+      const { alt, description, src } = img;
+      const imgClassName = img.class;
       return {
         className: imgClassName,
-        alt: alt && alt.nodeValue,
-        description: description && description.nodeValue,
-        src: src.nodeValue,
+        alt, description, src,
         isGood: isGood(imgClassName),
         isBad: isBad(imgClassName),
       };

site/component/Article/VideoPlayer.jsx

@@ -4,20 +4,17 @@ import SublimeVideo from 'react-sublime-video';
 export default class VideoPlayer extends React.Component {
   render() {
     const video = this.props.video;
-    const span = document.createElement('span');
-    span.innerHTML = video;
-    const attributes = span.children[0].attributes;
-    const { alt, description, src } = attributes;
-    const videoClassName = attributes.class.nodeValue;
+    const { alt, description, src } = video;
+    const videoClassName = video.class;
 
     return (
       <div className={`preview-image-box ${videoClassName}`}>
         <div className={'preview-image-wrapper'}>
-          <SublimeVideo src={src && src.nodeValue} type="video/mp4" />
+          <SublimeVideo src={src} type="video/mp4" />
         </div>
-        <div className="preview-image-title">{alt && alt.nodeValue}</div>
+        <div className="preview-image-title">{alt}</div>
         <div className="preview-image-description"
-          dangerouslySetInnerHTML={{ __html: description && description.nodeValue }} />
+          dangerouslySetInnerHTML={{ __html: description }} />
       </div>
     );
   }

site/component/Article/index.jsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { Link } from 'react-router';
+import toReactComponent from 'jsonml-to-react-component';
 import ImagePreview from './ImagePreview';
 import VideoPlayer from './VideoPlayer';
 import * as utils from '../utils';
@@ -20,28 +21,20 @@ export default class Article extends React.Component {
     utils.setTitle(`${chinese || english} - Ant Design`);
   }
 
-  isPreviewImg(string) {
-    return /^<img\s/i.test(string) && /preview-img/gi.test(string);
-  }
-
   imgToPreview(node) {
     if (node[0] === 'p' &&
-        node[1][0] === 'innerHTML' &&
-        this.isPreviewImg(node[1][1])) {
+        node[1][0] === 'img' &&
+        /preview-img/gi.test(node[1][1].class)) {
       const imgs = node.slice(1)
-              .map((n) => n[1])
-              .filter((img) => img);
+              .filter((img) => img[1])
+              .map((n) => n[1]);
       return <ImagePreview imgs={imgs} />;
     }
     return node;
   }
 
-  isVideo(string) {
-    return /^<video\s/i.test(string);
-  }
-
   enhanceVideo(node) {
-    if (node[0] === 'innerHTML' && this.isVideo(node[1])) {
+    if (node[0] === 'video') {
       return <VideoPlayer video={node[1]} />;
     }
     return node;
@@ -54,8 +47,9 @@ export default class Article extends React.Component {
     }).map((node) => {
       return (
         <li key={node[1]}>
-          <Link to={{ pathname: location.pathname, query: { scrollTo: node[1] } }}
-            dangerouslySetInnerHTML={{ __html: node[1] }} />
+          <Link to={{ pathname: location.pathname, query: { scrollTo: node[1] } }}>
+            {toReactComponent([], node[1])}
+          </Link>
         </li>
       );
     });

site/component/utils.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { Link } from 'react-router';
+import { getTagName, getAttributes, getChildren } from 'jsonml.js/lib/utils';
 import toReactComponent from 'jsonml-to-react-component';
 
 function isHeading(type) {
@@ -15,13 +16,15 @@ export function jsonmlToComponent(pathname, jsonml) {
     [(node) => typeof node === 'function', (node, index) => {
       return React.cloneElement(node(React, ReactDOM), { key: index });
     }],
-    [(node) => isHeading(node[0]), (node, index) => {
-      return React.createElement(node[0], {
+    [(node) => isHeading(getTagName(node)), (node, index) => {
+      const children = getChildren(node);
+      return React.createElement(getTagName(node), {
         key: index,
-        id: node[1],
+        id: children,
+        ...getAttributes(node),
       }, [
-        <span key="title" dangerouslySetInnerHTML={{ __html: node[1] }} />,
-        <Link to={{ pathname, query: { scrollTo: node[1] } }} className="anchor" key="anchor">#</Link>,
+        <span key="title">{ children.map(toReactComponent.bind(null, [])) }</span>,
+        <Link to={{ pathname, query: { scrollTo: children } }} className="anchor" key="anchor">#</Link>,
       ]);
     }],
   ], jsonml);