DataType
/
omi
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

omire - add markdown editor demo

This commit is contained in:
dntzhang 2019-04-26 15:24:09 +08:00
parent 125994a4e5
commit 45a56e9aed
6 changed files with 12962 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12888
packages/omire/examples/markdown/b.js Normal file
View File

File diff suppressed because it is too large Load Diff

1
packages/omire/examples/markdown/b.js.map Normal file
View File

File diff suppressed because one or more lines are too long

10
packages/omire/examples/markdown/index.html Normal file
View File

@ -0,0 +1,10 @@
<html>
<head></head>
<body>
<script src="b.js"></script>
</body>
</html>

20
packages/omire/examples/markdown/main.js Normal file
View File

@ -0,0 +1,20 @@
import { define, render, WeElement } from '../../src/omi'
import MarkdownEditor from './markdown-edit'
define('my-app', class extends WeElement {
render(props, data) {
return (
<div >
<MarkdownEditor />
</div>
)
}
})
render(
<my-app />,
document.body
);

40
packages/omire/examples/markdown/markdown-edit.js Normal file
View File

@ -0,0 +1,40 @@
import React from 'react'
import Remarkable from 'remarkable'
export default class MarkdownEditor extends React.Component {
constructor(props) {
super(props);
this.handleChange = this.handleChange.bind(this);
this.state = { value: 'Hello, **world**!' };
}
handleChange(e) {
this.setState({ value: e.target.value });
}
getRawMarkup() {
const md = new Remarkable();
return { __html: md.render(this.state.value) };
}
render() {
return (
<div className="MarkdownEditor">
<h3>Input</h3>
<label htmlFor="markdown-content">
Enter some markdown
</label><br/>
<textarea
id="markdown-content"
onChange={this.handleChange}
defaultValue={this.state.value}
/>
<h3>Output</h3>
<div
className="content"
dangerouslySetInnerHTML={this.getRawMarkup()}
/>
</div>
);
}
}

5
packages/omire/package.json
View File

@ -14,7 +14,7 @@
"build": "npm-run-all --silent clean transpile copy-typescript-definition strip optimize minify size",
"stateful": "rollup -c config/rollup.example.js --watch",
"todo": "rollup -c config/rollup.example.js --watch",
"decorators": "rollup -c config/rollup.example.js --watch",
"markdown": "rollup -c config/rollup.example.js --watch",
"mobx": "rollup -c config/rollup.example.js --watch",
"todomvc": "rollup -c config/rollup.example.js --watch",
"mvvm": "rollup -c config/rollup.example.js --watch",
@ -152,7 +152,8 @@
"sinon-chai": "^3.0.0",
"typescript": "^2.8.1",
"uglify-js": "^2.7.5",
"webpack": "^4.3.0"
"webpack": "^4.3.0",
"remarkable": "^1.7.1"
},
"greenkeeper": {
"ignore": [