convert span frames into Span components

lib/extract/extractText.js

@@ -1,7 +1,8 @@
 import SerializablePath from '../SerializablePath';
 import _ from 'lodash';
-import {Children} from 'react';
+import React, {Children} from 'react';
 import {fontAndRenderPropsKeys} from '../props';
+import Span from '../../elements/Span';
 
 const fontRegExp = /^\s*((?:(?:normal|bold|italic)\s+)*)(?:(\d+(?:\.\d+)?)[ptexm%]*(?:\s*\/.*?)?\s+)?\s*"?([^"]*)/i;
 const fontFamilyPrefix = /^[\s"']*/;
@@ -162,11 +163,11 @@ function parseDelta(delta) {
 }
 
 export default function(props) {
-    let frame = parseText(props);
+    let frames = parseText(props);
     let alignment;
 
-    if (frame[0]) {
-        let firstSpan = frame[0];
+    if (frames[0]) {
+        let firstSpan = frames[0];
 
         if (firstSpan.positionX === null && props.hasOwnProperty('x')) {
             firstSpan.positionX = props.x;
@@ -187,14 +188,32 @@ export default function(props) {
         }
     }
 
-    return {
-        alignment,
-        frame,
-        children : null,
+    let font = {
         fontFamily: 'Helvetica Neue',
         fontSize: 12,
         fontStyle: 'normal',
         fontWeight: 'normal',
         ...extractFont(props)
     }
+
+
+    let children = frames.map(frame => {
+        let spanProps = {
+            content: frame.content,
+            dx: frame.deltaX,
+            dy: frame.deltaY,
+            px: frame.positionX,
+            py: frame.positionY,
+            font: {
+                ...font,
+                ...extractFont(frame.props)
+            }
+        };
+        return <Span {...spanProps} />
+    })
+    // TODO: format children
+    return {
+        alignment,
+        children
+    }
 }