diff --git a/src/components/Line.js b/src/components/Line.js index 137a839..4cc94dc 100644 --- a/src/components/Line.js +++ b/src/components/Line.js @@ -1,5 +1,5 @@ import React, { useRef, useEffect } from 'react'; -import {isBlock} from '../utils/util' +import {isBlock, parseBlock, getLines} from '../utils/util' export const Line = (props) => { const ref = useRef(); @@ -91,13 +91,40 @@ export const Line = (props) => { return result } + const csvToTable = (body) => { + let rows = [] + console.log(body) + let lines = getLines(body) + lines.forEach((l) => { + let cellElms = [] + let cells = l.split(/\s*,\s*/) + cells.forEach((cell) => { + cellElms.push({cell}) + }) + rows.push({cellElms}) + }) + return ( + {rows}
+ ) + } + + const makeBlock = (type, body) => { + switch(type){ + case "table": + return csvToTable(body) + default: + return ( +
+            {body}
+          
+ ) + } + } + const makeHtml = (s) => { if(isBlock(s)){ - return ( -
-          {s}
-        
- ) + let parts = parseBlock(s) + return makeBlock(parts[0], parts[1]) }else{ let clist = ["elm"]; let m = s.match(/^(\s*)-( .*)$/); diff --git a/src/index.css b/src/index.css index 563a751..288d7dc 100644 --- a/src/index.css +++ b/src/index.css @@ -22,6 +22,13 @@ pre{ border: dashed 1px; padding: 1em; } +table{ + border: solid 1px; +} +td{ + border: solid 1px; + padding: 0.3em; +} .hide{ display: none; } diff --git a/src/utils/util.js b/src/utils/util.js index b6db928..1f7f8a2 100644 --- a/src/utils/util.js +++ b/src/utils/util.js @@ -37,3 +37,10 @@ export const isFirstLine = (index, text) => { let pos = getCursorPos(index, text) return pos[1] === 0 } + +export const parseBlock = (text) => { + let m = text.match(/^`{3}(.*)/) //` + let blockBody = getLines(text).slice(1).join("\n") + let blockType = m[1] + return [blockType, blockBody] +}