add markdown with ReactMarkdown

coderoad · ShMcK · Jul 14, 2019 · Jul 14, 2019 · Jul 14, 2019 · Jul 14, 2019
commit 4d01abe49010b213b9bf9436070c452ae9668c67
diff --git a/package.json b/package.json
@@ -1,73 +1,73 @@
 {
-	"name": "coderoad-vscode",
-	"displayName": "CodeRoad",
-	"description": "Interactive tutorials in your editor",
-	"version": "0.0.1",
-	"engines": {
-		"vscode": "^1.34.0"
-	},
-	"categories": [
-		"Other"
-	],
-	"publisher": "Shawn McKay",
-	"author": {
-		"name": "Shawn McKay <shawn.j.mckay@gmail.com>"
-	},
-	"bugs": {
-		"url": "https://github.com/shmck/coderoad-vscode/issues",
-		"email": "shawn.j.mckay@gmail.com"
-	},
-	"repository": {
-		"type": "git",
-		"url": "https://github.com/shmck/coderoad-vscode.git"
-	},
-	"homepage": "https://github.com/shmck/coderoad-vscode/README.md",
-	"galleryBanner": {
-		"color": "#C80000",
-		"theme": "dark"
-	},
-	"activationEvents": [
-		"onCommand:coderoad.start"
-	],
-	"main": "./build/extension.js",
-	"contributes": {
-		"commands": [
-			{
-				"command": "coderoad.start",
-				"title": "Start",
-				"category": "CodeRoad"
-			},
-			{
-				"command": "coderoad.set_layout",
-				"title": "Set Layout",
-				"category": "CodeRoad"
-			}
-		]
-	},
-	"scripts": {
-		"vscode:prepublish": "npm run build",
-		"machine": "node ./out/state/index.js",
-		"build": "rm -rf build && concurrently \"npm run build:ext\" \"npm run build:web\"",
-		"build:ext": "npm run compile",
-		"build:web": "cd web-app && npm run build",
-		"compile": "tsc -p ./",
-		"watch": "tsc -watch -p ./",
-		"postinstall": "node ./node_modules/vscode/bin/install",
-		"storybook": "cd web-app && npm run storybook",
-		"test": "npm run build && node ./node_modules/vscode/bin/test"
-	},
-	"devDependencies": {
-		"@types/mocha": "^5.2.7",
-		"@types/node": "^12.6.2",
-		"concurrently": "^4.1.1",
-		"prettier": "^1.18.2",
-		"tslint": "^5.18.0",
-		"tslint-config-prettier": "^1.18.0",
-		"typescript": "^3.5.3"
-	},
-	"dependencies": {
-		"vscode": "^1.1.35",
-		"xstate": "^4.6.7"
-	},
-	"license": "SEE LICENSE IN LICENSE.md"
+  "name": "coderoad-vscode",
+  "displayName": "CodeRoad",
+  "description": "Interactive tutorials in your editor",
+  "version": "0.0.1",
+  "engines": {
+    "vscode": "^1.34.0"
+  },
+  "categories": [
+    "Other"
+  ],
+  "publisher": "Shawn McKay",
+  "author": {
+    "name": "Shawn McKay <shawn.j.mckay@gmail.com>"
+  },
+  "bugs": {
+    "url": "https://github.com/shmck/coderoad-vscode/issues",
+    "email": "shawn.j.mckay@gmail.com"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/shmck/coderoad-vscode.git"
+  },
+  "homepage": "https://github.com/shmck/coderoad-vscode/README.md",
+  "galleryBanner": {
+    "color": "#C80000",
+    "theme": "dark"
+  },
+  "activationEvents": [
+    "onCommand:coderoad.start"
+  ],
+  "main": "./build/extension.js",
+  "contributes": {
+    "commands": [
+      {
+        "command": "coderoad.start",
+        "title": "Start",
+        "category": "CodeRoad"
+      },
+      {
+        "command": "coderoad.set_layout",
+        "title": "Set Layout",
+        "category": "CodeRoad"
+      }
+    ]
+  },
+  "scripts": {
+    "vscode:prepublish": "npm run build",
+    "machine": "node ./out/state/index.js",
+    "build": "rm -rf build && concurrently \"npm run build:ext\" \"npm run build:web\"",
+    "build:ext": "npm run compile",
+    "build:web": "cd web-app && npm run build",
+    "compile": "tsc -p ./",
+    "watch": "tsc -watch -p ./",
+    "postinstall": "node ./node_modules/vscode/bin/install",
+    "storybook": "cd web-app && npm run storybook",
+    "test": "npm run build && node ./node_modules/vscode/bin/test"
+  },
+  "devDependencies": {
+    "@types/mocha": "^5.2.7",
+    "@types/node": "^12.6.2",
+    "concurrently": "^4.1.1",
+    "prettier": "^1.18.2",
+    "tslint": "^5.18.0",
+    "tslint-config-prettier": "^1.18.0",
+    "typescript": "^3.5.3"
+  },
+  "dependencies": {
+    "vscode": "^1.1.35",
+    "xstate": "^4.6.7"
+  },
+  "license": "SEE LICENSE IN LICENSE.md"
 }
diff --git a/tsconfig.json b/tsconfig.json
@@ -1,35 +1,26 @@
 {
-	"compilerOptions": {
-		"module": "commonjs",
-		"target": "es6",
-		"outDir": "build",
-		"lib": [
-			"es6",
-			"dom"
-		],
-		"sourceMap": true,
-		"rootDir": "src",
-		"baseUrl": "src",
-		"strict": true,   /* enable all strict type-checking options */
-		/* Additional Checks */
-		"forceConsistentCasingInFileNames": true,
-		"noImplicitReturns": true,
-		"noImplicitThis": true,
-		"noImplicitAny": true,
-		"strictNullChecks": true,
-		"suppressImplicitAnyIndexErrors": true,
-		"noUnusedLocals": false,
-		"experimentalDecorators": true,
-		"emitDecoratorMetadata": true,
-		"paths": {
-			"typings": ["../typings/index.d.ts"]
-		},
-	},
-	"exclude": [
-		"node_modules",
-		".vscode-test",
-		"build",
-		"resources",
-		"web-app"
-	]
+  "compilerOptions": {
+    "module": "commonjs",
+    "target": "es6",
+    "outDir": "build",
+    "lib": ["es6", "dom"],
+    "sourceMap": true,
+    "rootDir": "src",
+    "baseUrl": "src",
+    "strict": true /* enable all strict type-checking options */,
+    /* Additional Checks */
+    "forceConsistentCasingInFileNames": true,
+    "noImplicitReturns": true,
+    "noImplicitThis": true,
+    "noImplicitAny": true,
+    "strictNullChecks": true,
+    "suppressImplicitAnyIndexErrors": true,
+    "noUnusedLocals": false,
+    "experimentalDecorators": true,
+    "emitDecoratorMetadata": true,
+    "paths": {
+      "typings": ["../typings/index.d.ts"]
+    }
+  },
+  "exclude": ["node_modules", ".vscode-test", "build", "resources", "web-app"]
 }
diff --git a/tslint.json b/tslint.json
@@ -1,24 +1,15 @@
 {
-	"extends": [
-		"tslint:latest",
-		"tslint-config-prettier"
-	],
-	"rules": {
-		"no-string-throw": true,
-		"no-unused-expression": true,
-		"no-duplicate-variable": true,
-		"curly": true,
-		"class-name": true,
-		"semicolon": [
-			true,
-			"never"
-		],
-		"triple-equals": true,
-		"interface-name": [
-			true,
-			"never-prefix"
-		]
-	},
-	"defaultSeverity": "warning",
-	"no-submodule-imports": false,
+  "extends": ["tslint:latest", "tslint-config-prettier"],
+  "rules": {
+    "no-string-throw": true,
+    "no-unused-expression": true,
+    "no-duplicate-variable": true,
+    "curly": true,
+    "class-name": true,
+    "semicolon": [true, "never"],
+    "triple-equals": true,
+    "interface-name": [true, "never-prefix"]
+  },
+  "defaultSeverity": "warning",
+  "no-submodule-imports": false
 }
diff --git a/web-app/.storybook/addons.ts b/web-app/.storybook/addons.ts
@@ -1,3 +1,4 @@
 import '@storybook/addon-actions/register'
-import '@storybook/addon-links/register'
 import '@storybook/addon-knobs/register'
+import '@storybook/addon-links/register'
+
diff --git a/web-app/.storybook/config.ts b/web-app/.storybook/config.ts
@@ -1,5 +1,5 @@
-import { configure } from '@storybook/react'
 import '@alifd/next/dist/next.css'
+import { configure } from '@storybook/react'
 
 // automatically import all files ending in *.stories.tsx
 const req = require.context('../stories', true, /\.stories\.tsx$/)

diff --git a/web-app/package-lock.json b/web-app/package-lock.json
diff --git a/web-app/package.json b/web-app/package.json
@@ -11,6 +11,7 @@
     "moment": "^2.24.0",
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
+    "react-markdown": "^4.1.0",
     "react-scripts": "3.0.1",
     "typescript": "^3.5.1"
   },

diff --git a/web-app/src/components/Level/index.tsx b/web-app/src/components/Level/index.tsx
@@ -2,6 +2,8 @@ import * as React from 'react'
 import { Button, Card } from '@alifd/next'
 import CR from 'typings'
 
+import Markdown from '../Markdown'
+
 const styles = {
   card: {
     // width: '20rem',
@@ -24,7 +26,7 @@ const Level = ({ level, stages, onNext, onBack }: Props) => {
   const { title, text } = level.content
   return (
     <Card style={styles.card} title={title} showTitleBullet={false} contentHeight="auto">
-      <p>{text}</p>
+      <Markdown>{text}</Markdown>
       <div>
         {level.stageList.map((stageId: string) => {
           const stage = stages[stageId]

diff --git a/web-app/src/components/Markdown/index.tsx b/web-app/src/components/Markdown/index.tsx
@@ -0,0 +1,10 @@
+import * as React from 'react'
+import ReactMarkdown from 'react-markdown'
+
+interface Props {
+  children: string
+}
+
+const Markdown = (props: Props) => <ReactMarkdown source={props.children} />
+
+export default Markdown
diff --git a/web-app/src/components/Stage/index.tsx b/web-app/src/components/Stage/index.tsx
@@ -2,6 +2,7 @@ import * as React from 'react'
 import { Button, Card } from '@alifd/next'
 import CR from 'typings'
 
+import Markdown from '../Markdown'
 import Step from '../Step'
 
 const styles = {
@@ -23,7 +24,7 @@ const Stage = ({ stage, steps, onNextStage, complete }: Props) => {
   const { title, text } = stage.content
   return (
     <Card style={styles.card} title={title} showTitleBullet={false} contentHeight="auto">
-      <p>{text}</p>
+      <Markdown>{text}</Markdown>
       <div>
         {stage.stepList.map((stepId: string) => {
           const step = steps[stepId]

diff --git a/web-app/src/components/Step/index.tsx b/web-app/src/components/Step/index.tsx
@@ -1,4 +1,5 @@
 import * as React from 'react'
+import Markdown from '../Markdown'
 import { Checkbox } from '@alifd/next'
 // import CC from '../../typings/client'
 import CR from 'typings'
@@ -36,7 +37,9 @@ const Step = ({ content, status }: Props) => {
       <div style={styles.left}>
         <Checkbox checked={status.complete} />
       </div>
-      <div style={styles.right}>{content.text}</div>
+      <div style={styles.right}>
+        <Markdown>{content.text}</Markdown>
+      </div>
     </div>
   )
 }

diff --git a/web-app/tsconfig.paths.json b/web-app/tsconfig.paths.json
@@ -1,21 +1,11 @@
 {
-    "compilerOptions": {
-        "baseUrl": "src",
-        "rootDirs": [
-            "src",
-            "stories"
-        ],
-        "paths": {
-            "typings": [
-                "../../typings/index.d.ts"
-            ]
-        }
+  "compilerOptions": {
+    "baseUrl": "src",
+    "rootDirs": ["src", "stories"],
+    "paths": {
+      "typings": ["../../typings/index.d.ts"]
     },
-    "exclude": [
-        "node_modules",
-        "build",
-        "scripts",
-        "jest",
-        "public"
-    ]
-}
+    "allowSyntheticDefaultImports": true
+  },
+  "exclude": ["node_modules", "build", "scripts", "jest", "public"]
+}