├── .babelrc ├── .eslintignore ├── .eslintrc ├── .gitignore ├── README.md ├── config.js ├── demo ├── App.jsx ├── bootstrap.min.css ├── browser.js ├── index.dev.html ├── index.html ├── markdown.less ├── server.js └── site.less ├── dist ├── react-markdown.css ├── react-markdown.css.map ├── react-markdown.js ├── react-markdown.js.map ├── react-markdown.min.js └── react-markdown.min.js.map ├── lib ├── editor.jsx └── editor.less ├── package.json ├── webpack.config.js ├── webpack.dev.config.js ├── webpack.min.config.js └── webpack ├── baseConfig.js ├── webpack.dev.js └── webpack.js /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "optional": [ 3 | "es7.objectRestSpread" 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | dist 2 | -------------------------------------------------------------------------------- /.eslintrc: -------------------------------------------------------------------------------- 1 | --- 2 | env: 3 | es6: true 4 | browser: true 5 | node: true 6 | 7 | parser: babel-eslint 8 | 9 | plugins: 10 | - "react" 11 | 12 | ecmaFeatures: 13 | modules: true 14 | jsx: true 15 | experimentalObjectRestSpread: true 16 | 17 | rules: 18 | # Stylistic issue 19 | indent: [1, 2] 20 | array-bracket-spacing: [1, always] 21 | comma-spacing: 1 22 | key-spacing: 1 23 | object-curly-spacing: [1, always] 24 | semi: [1, never] 25 | spaced-comment: [1, always] 26 | space-before-function-paren: [1, always] 27 | space-before-blocks: [1, always] 28 | space-after-keywords: [1, always] 29 | 30 | # Best practice 31 | curly: [2, multi-line] 32 | eqeqeq: [1, smart] 33 | no-loop-func: 2 34 | no-alert: 2 35 | yoda: [2, never] 36 | 37 | # ES6 38 | arrow-spacing : 2 39 | no-var: 2 40 | prefer-const: 2 41 | object-shorthand: 1 42 | constructor-super: 2 43 | no-this-before-super: 2 44 | generator-star-spacing: 2 45 | 46 | # Variables 47 | no-use-before-define: [2, nofunc] 48 | 49 | # React plugin 50 | react/display-name: 0 51 | react/jsx-boolean-value: 1 52 | react/jsx-curly-spacing: 1 53 | react/jsx-max-props-per-line: 0 54 | react/jsx-no-duplicate-props: 1 55 | react/jsx-no-undef: 1 56 | react/jsx-quotes: 1 57 | react/jsx-sort-prop-types: 0 58 | react/jsx-sort-props: 0 59 | react/jsx-uses-react: 1 60 | react/jsx-uses-vars: 1 61 | react/no-danger: 0 62 | react/no-did-mount-set-state: 0 63 | react/no-did-update-set-state: 1 64 | react/no-multi-comp: 1 65 | react/no-unknown-property: 1 66 | react/prop-types: 1 67 | react/react-in-jsx-scope: 1 68 | react/require-extension: 1 69 | react/self-closing-comp: 1 70 | react/sort-comp: 0 71 | react/wrap-multilines: 1 72 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .babel-cache 3 | .DS_Store 4 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ## React markdown 2 | 3 | [Demo here.](http://leozdgao.github.io/react-markdown/) 4 | 5 | A markdown text editor written in [React](https://facebook.github.io/react/). The markdown syntax parser is the [marked](https://github.com/chjj/marked). 6 | I try to use ES6 with Babel to write source code, but not use React ES6. 7 | [Webpack](https://webpack.github.io) is used to bundle source code. 8 | 9 | #### Introduction 10 | 11 | The reusable editor component is `src/js/components/editor.react.jsx`, the content of this component is passed through prop, and the change of content will invoke the method `refreshState`, which should be a function passed as a prop, and update the state of the parent component of this editor. 12 | 13 | 3 modes are provided: 14 | 15 | - Edit mode 16 | - Split mode 17 | - Preview mode 18 | 19 | This editor support full screen editting! 20 | 21 | #### TODO 22 | 23 | - Make it responsive. 24 | - Adjust it to fit as a comment editor, in this status, only provide 2 modes: edit, preview. And the initial height will be smaller. 25 | -------------------------------------------------------------------------------- /config.js: -------------------------------------------------------------------------------- 1 | import path from 'path' 2 | 3 | export default { 4 | publishPath: path.join(__dirname, './dist/'), 5 | webpackDevPort: 3000 6 | } 7 | -------------------------------------------------------------------------------- /demo/App.jsx: -------------------------------------------------------------------------------- 1 | import React, { PropTypes } from 'react' 2 | import Editor from '../lib/editor' 3 | 4 | const App = React.createClass({ 5 | render () { 6 | return ( 7 |
8 | 9 | 10 | 11 |
12 | ) 13 | }, 14 | _handleClick () { 15 | /* eslint-disable no-alert */ 16 | alert('这个是自定义按钮') 17 | /* eslint-enable no-alert */ 18 | } 19 | }) 20 | 21 | export default App 22 | -------------------------------------------------------------------------------- /demo/bootstrap.min.css: -------------------------------------------------------------------------------- 1 | /*! 2 | * Bootstrap v3.3.5 (http://getbootstrap.com) 3 | * Copyright 2011-2015 Twitter, Inc. 4 | * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) 5 | */ 6 | 7 | /*! 8 | * Generated using the Bootstrap Customizer (http://getbootstrap.com/customize/?id=ed2ab82ab4eae3d17c34) 9 | * Config saved to config.json and https://gist.github.com/ed2ab82ab4eae3d17c34 10 | *//*! 11 | * Bootstrap v3.3.5 (http://getbootstrap.com) 12 | * Copyright 2011-2015 Twitter, Inc. 13 | * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) 14 | *//*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background-color:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:bold}dfn{font-style:italic}h1{font-size:2em;margin:0.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box;height:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace, monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type="checkbox"],input[type="radio"]{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;padding:0}input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{height:auto}input[type="search"]{-webkit-appearance:textfield;-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em}legend{border:0;padding:0}textarea{overflow:auto}optgroup{font-weight:bold}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}*:before,*:after{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}html{font-size:10px;-webkit-tap-highlight-color:rgba(0,0,0,0)}body{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:14px;line-height:1.42857143;color:#333;background-color:#fff}input,button,select,textarea{font-family:inherit;font-size:inherit;line-height:inherit}a{color:#337ab7;text-decoration:none}a:hover,a:focus{color:#23527c;text-decoration:underline}a:focus{outline:thin dotted;outline:5px auto -webkit-focus-ring-color;outline-offset:-2px}figure{margin:0}img{vertical-align:middle}.img-responsive{display:block;max-width:100%;height:auto}.img-rounded{border-radius:6px}.img-thumbnail{padding:4px;line-height:1.42857143;background-color:#fff;border:1px solid #ddd;border-radius:4px;-webkit-transition:all .2s ease-in-out;-o-transition:all .2s ease-in-out;transition:all .2s ease-in-out;display:inline-block;max-width:100%;height:auto}.img-circle{border-radius:50%}hr{margin-top:20px;margin-bottom:20px;border:0;border-top:1px solid #eee}.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}.sr-only-focusable:active,.sr-only-focusable:focus{position:static;width:auto;height:auto;margin:0;overflow:visible;clip:auto}[role="button"]{cursor:pointer}.container{margin-right:auto;margin-left:auto;padding-left:15px;padding-right:15px}@media (min-width:768px){.container{width:750px}}@media (min-width:992px){.container{width:970px}}@media (min-width:1200px){.container{width:1170px}}.container-fluid{margin-right:auto;margin-left:auto;padding-left:15px;padding-right:15px}.row{margin-left:-15px;margin-right:-15px}.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12, .col-xs-13, .col-sm-13, .col-md-13, .col-lg-13, .col-xs-14, .col-sm-14, .col-md-14, .col-lg-14, .col-xs-15, .col-sm-15, .col-md-15, .col-lg-15, .col-xs-16, .col-sm-16, .col-md-16, .col-lg-16{position:relative;min-height:1px;padding-left:15px;padding-right:15px}.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-13, .col-xs-14, .col-xs-15, .col-xs-16{float:left}.col-xs-16{width:100%}.col-xs-15{width:93.75%}.col-xs-14{width:87.5%}.col-xs-13{width:81.25%}.col-xs-12{width:75%}.col-xs-11{width:68.75%}.col-xs-10{width:62.5%}.col-xs-9{width:56.25%}.col-xs-8{width:50%}.col-xs-7{width:43.75%}.col-xs-6{width:37.5%}.col-xs-5{width:31.25%}.col-xs-4{width:25%}.col-xs-3{width:18.75%}.col-xs-2{width:12.5%}.col-xs-1{width:6.25%}.col-xs-pull-16{right:100%}.col-xs-pull-15{right:93.75%}.col-xs-pull-14{right:87.5%}.col-xs-pull-13{right:81.25%}.col-xs-pull-12{right:75%}.col-xs-pull-11{right:68.75%}.col-xs-pull-10{right:62.5%}.col-xs-pull-9{right:56.25%}.col-xs-pull-8{right:50%}.col-xs-pull-7{right:43.75%}.col-xs-pull-6{right:37.5%}.col-xs-pull-5{right:31.25%}.col-xs-pull-4{right:25%}.col-xs-pull-3{right:18.75%}.col-xs-pull-2{right:12.5%}.col-xs-pull-1{right:6.25%}.col-xs-pull-0{right:auto}.col-xs-push-16{left:100%}.col-xs-push-15{left:93.75%}.col-xs-push-14{left:87.5%}.col-xs-push-13{left:81.25%}.col-xs-push-12{left:75%}.col-xs-push-11{left:68.75%}.col-xs-push-10{left:62.5%}.col-xs-push-9{left:56.25%}.col-xs-push-8{left:50%}.col-xs-push-7{left:43.75%}.col-xs-push-6{left:37.5%}.col-xs-push-5{left:31.25%}.col-xs-push-4{left:25%}.col-xs-push-3{left:18.75%}.col-xs-push-2{left:12.5%}.col-xs-push-1{left:6.25%}.col-xs-push-0{left:auto}.col-xs-offset-16{margin-left:100%}.col-xs-offset-15{margin-left:93.75%}.col-xs-offset-14{margin-left:87.5%}.col-xs-offset-13{margin-left:81.25%}.col-xs-offset-12{margin-left:75%}.col-xs-offset-11{margin-left:68.75%}.col-xs-offset-10{margin-left:62.5%}.col-xs-offset-9{margin-left:56.25%}.col-xs-offset-8{margin-left:50%}.col-xs-offset-7{margin-left:43.75%}.col-xs-offset-6{margin-left:37.5%}.col-xs-offset-5{margin-left:31.25%}.col-xs-offset-4{margin-left:25%}.col-xs-offset-3{margin-left:18.75%}.col-xs-offset-2{margin-left:12.5%}.col-xs-offset-1{margin-left:6.25%}.col-xs-offset-0{margin-left:0}@media (min-width:768px){.col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-13, .col-sm-14, .col-sm-15, .col-sm-16{float:left}.col-sm-16{width:100%}.col-sm-15{width:93.75%}.col-sm-14{width:87.5%}.col-sm-13{width:81.25%}.col-sm-12{width:75%}.col-sm-11{width:68.75%}.col-sm-10{width:62.5%}.col-sm-9{width:56.25%}.col-sm-8{width:50%}.col-sm-7{width:43.75%}.col-sm-6{width:37.5%}.col-sm-5{width:31.25%}.col-sm-4{width:25%}.col-sm-3{width:18.75%}.col-sm-2{width:12.5%}.col-sm-1{width:6.25%}.col-sm-pull-16{right:100%}.col-sm-pull-15{right:93.75%}.col-sm-pull-14{right:87.5%}.col-sm-pull-13{right:81.25%}.col-sm-pull-12{right:75%}.col-sm-pull-11{right:68.75%}.col-sm-pull-10{right:62.5%}.col-sm-pull-9{right:56.25%}.col-sm-pull-8{right:50%}.col-sm-pull-7{right:43.75%}.col-sm-pull-6{right:37.5%}.col-sm-pull-5{right:31.25%}.col-sm-pull-4{right:25%}.col-sm-pull-3{right:18.75%}.col-sm-pull-2{right:12.5%}.col-sm-pull-1{right:6.25%}.col-sm-pull-0{right:auto}.col-sm-push-16{left:100%}.col-sm-push-15{left:93.75%}.col-sm-push-14{left:87.5%}.col-sm-push-13{left:81.25%}.col-sm-push-12{left:75%}.col-sm-push-11{left:68.75%}.col-sm-push-10{left:62.5%}.col-sm-push-9{left:56.25%}.col-sm-push-8{left:50%}.col-sm-push-7{left:43.75%}.col-sm-push-6{left:37.5%}.col-sm-push-5{left:31.25%}.col-sm-push-4{left:25%}.col-sm-push-3{left:18.75%}.col-sm-push-2{left:12.5%}.col-sm-push-1{left:6.25%}.col-sm-push-0{left:auto}.col-sm-offset-16{margin-left:100%}.col-sm-offset-15{margin-left:93.75%}.col-sm-offset-14{margin-left:87.5%}.col-sm-offset-13{margin-left:81.25%}.col-sm-offset-12{margin-left:75%}.col-sm-offset-11{margin-left:68.75%}.col-sm-offset-10{margin-left:62.5%}.col-sm-offset-9{margin-left:56.25%}.col-sm-offset-8{margin-left:50%}.col-sm-offset-7{margin-left:43.75%}.col-sm-offset-6{margin-left:37.5%}.col-sm-offset-5{margin-left:31.25%}.col-sm-offset-4{margin-left:25%}.col-sm-offset-3{margin-left:18.75%}.col-sm-offset-2{margin-left:12.5%}.col-sm-offset-1{margin-left:6.25%}.col-sm-offset-0{margin-left:0}}@media (min-width:992px){.col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-md-13, .col-md-14, .col-md-15, .col-md-16{float:left}.col-md-16{width:100%}.col-md-15{width:93.75%}.col-md-14{width:87.5%}.col-md-13{width:81.25%}.col-md-12{width:75%}.col-md-11{width:68.75%}.col-md-10{width:62.5%}.col-md-9{width:56.25%}.col-md-8{width:50%}.col-md-7{width:43.75%}.col-md-6{width:37.5%}.col-md-5{width:31.25%}.col-md-4{width:25%}.col-md-3{width:18.75%}.col-md-2{width:12.5%}.col-md-1{width:6.25%}.col-md-pull-16{right:100%}.col-md-pull-15{right:93.75%}.col-md-pull-14{right:87.5%}.col-md-pull-13{right:81.25%}.col-md-pull-12{right:75%}.col-md-pull-11{right:68.75%}.col-md-pull-10{right:62.5%}.col-md-pull-9{right:56.25%}.col-md-pull-8{right:50%}.col-md-pull-7{right:43.75%}.col-md-pull-6{right:37.5%}.col-md-pull-5{right:31.25%}.col-md-pull-4{right:25%}.col-md-pull-3{right:18.75%}.col-md-pull-2{right:12.5%}.col-md-pull-1{right:6.25%}.col-md-pull-0{right:auto}.col-md-push-16{left:100%}.col-md-push-15{left:93.75%}.col-md-push-14{left:87.5%}.col-md-push-13{left:81.25%}.col-md-push-12{left:75%}.col-md-push-11{left:68.75%}.col-md-push-10{left:62.5%}.col-md-push-9{left:56.25%}.col-md-push-8{left:50%}.col-md-push-7{left:43.75%}.col-md-push-6{left:37.5%}.col-md-push-5{left:31.25%}.col-md-push-4{left:25%}.col-md-push-3{left:18.75%}.col-md-push-2{left:12.5%}.col-md-push-1{left:6.25%}.col-md-push-0{left:auto}.col-md-offset-16{margin-left:100%}.col-md-offset-15{margin-left:93.75%}.col-md-offset-14{margin-left:87.5%}.col-md-offset-13{margin-left:81.25%}.col-md-offset-12{margin-left:75%}.col-md-offset-11{margin-left:68.75%}.col-md-offset-10{margin-left:62.5%}.col-md-offset-9{margin-left:56.25%}.col-md-offset-8{margin-left:50%}.col-md-offset-7{margin-left:43.75%}.col-md-offset-6{margin-left:37.5%}.col-md-offset-5{margin-left:31.25%}.col-md-offset-4{margin-left:25%}.col-md-offset-3{margin-left:18.75%}.col-md-offset-2{margin-left:12.5%}.col-md-offset-1{margin-left:6.25%}.col-md-offset-0{margin-left:0}}@media (min-width:1200px){.col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-13, .col-lg-14, .col-lg-15, .col-lg-16{float:left}.col-lg-16{width:100%}.col-lg-15{width:93.75%}.col-lg-14{width:87.5%}.col-lg-13{width:81.25%}.col-lg-12{width:75%}.col-lg-11{width:68.75%}.col-lg-10{width:62.5%}.col-lg-9{width:56.25%}.col-lg-8{width:50%}.col-lg-7{width:43.75%}.col-lg-6{width:37.5%}.col-lg-5{width:31.25%}.col-lg-4{width:25%}.col-lg-3{width:18.75%}.col-lg-2{width:12.5%}.col-lg-1{width:6.25%}.col-lg-pull-16{right:100%}.col-lg-pull-15{right:93.75%}.col-lg-pull-14{right:87.5%}.col-lg-pull-13{right:81.25%}.col-lg-pull-12{right:75%}.col-lg-pull-11{right:68.75%}.col-lg-pull-10{right:62.5%}.col-lg-pull-9{right:56.25%}.col-lg-pull-8{right:50%}.col-lg-pull-7{right:43.75%}.col-lg-pull-6{right:37.5%}.col-lg-pull-5{right:31.25%}.col-lg-pull-4{right:25%}.col-lg-pull-3{right:18.75%}.col-lg-pull-2{right:12.5%}.col-lg-pull-1{right:6.25%}.col-lg-pull-0{right:auto}.col-lg-push-16{left:100%}.col-lg-push-15{left:93.75%}.col-lg-push-14{left:87.5%}.col-lg-push-13{left:81.25%}.col-lg-push-12{left:75%}.col-lg-push-11{left:68.75%}.col-lg-push-10{left:62.5%}.col-lg-push-9{left:56.25%}.col-lg-push-8{left:50%}.col-lg-push-7{left:43.75%}.col-lg-push-6{left:37.5%}.col-lg-push-5{left:31.25%}.col-lg-push-4{left:25%}.col-lg-push-3{left:18.75%}.col-lg-push-2{left:12.5%}.col-lg-push-1{left:6.25%}.col-lg-push-0{left:auto}.col-lg-offset-16{margin-left:100%}.col-lg-offset-15{margin-left:93.75%}.col-lg-offset-14{margin-left:87.5%}.col-lg-offset-13{margin-left:81.25%}.col-lg-offset-12{margin-left:75%}.col-lg-offset-11{margin-left:68.75%}.col-lg-offset-10{margin-left:62.5%}.col-lg-offset-9{margin-left:56.25%}.col-lg-offset-8{margin-left:50%}.col-lg-offset-7{margin-left:43.75%}.col-lg-offset-6{margin-left:37.5%}.col-lg-offset-5{margin-left:31.25%}.col-lg-offset-4{margin-left:25%}.col-lg-offset-3{margin-left:18.75%}.col-lg-offset-2{margin-left:12.5%}.col-lg-offset-1{margin-left:6.25%}.col-lg-offset-0{margin-left:0}}.btn{display:inline-block;margin-bottom:0;font-weight:normal;text-align:center;vertical-align:middle;-ms-touch-action:manipulation;touch-action:manipulation;cursor:pointer;background-image:none;border:1px solid transparent;white-space:nowrap;padding:6px 12px;font-size:14px;line-height:1.42857143;border-radius:4px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.btn:focus,.btn:active:focus,.btn.active:focus,.btn.focus,.btn:active.focus,.btn.active.focus{outline:thin dotted;outline:5px auto -webkit-focus-ring-color;outline-offset:-2px}.btn:hover,.btn:focus,.btn.focus{color:#333;text-decoration:none}.btn:active,.btn.active{outline:0;background-image:none;-webkit-box-shadow:inset 0 3px 5px rgba(0,0,0,0.125);box-shadow:inset 0 3px 5px rgba(0,0,0,0.125)}.btn.disabled,.btn[disabled],fieldset[disabled] .btn{cursor:not-allowed;opacity:.65;filter:alpha(opacity=65);-webkit-box-shadow:none;box-shadow:none}a.btn.disabled,fieldset[disabled] a.btn{pointer-events:none}.btn-default{color:#333;background-color:#fff;border-color:#ccc}.btn-default:focus,.btn-default.focus{color:#333;background-color:#e6e6e6;border-color:#8c8c8c}.btn-default:hover{color:#333;background-color:#e6e6e6;border-color:#adadad}.btn-default:active,.btn-default.active,.open>.dropdown-toggle.btn-default{color:#333;background-color:#e6e6e6;border-color:#adadad}.btn-default:active:hover,.btn-default.active:hover,.open>.dropdown-toggle.btn-default:hover,.btn-default:active:focus,.btn-default.active:focus,.open>.dropdown-toggle.btn-default:focus,.btn-default:active.focus,.btn-default.active.focus,.open>.dropdown-toggle.btn-default.focus{color:#333;background-color:#d4d4d4;border-color:#8c8c8c}.btn-default:active,.btn-default.active,.open>.dropdown-toggle.btn-default{background-image:none}.btn-default.disabled,.btn-default[disabled],fieldset[disabled] .btn-default,.btn-default.disabled:hover,.btn-default[disabled]:hover,fieldset[disabled] .btn-default:hover,.btn-default.disabled:focus,.btn-default[disabled]:focus,fieldset[disabled] .btn-default:focus,.btn-default.disabled.focus,.btn-default[disabled].focus,fieldset[disabled] .btn-default.focus,.btn-default.disabled:active,.btn-default[disabled]:active,fieldset[disabled] .btn-default:active,.btn-default.disabled.active,.btn-default[disabled].active,fieldset[disabled] .btn-default.active{background-color:#fff;border-color:#ccc}.btn-default .badge{color:#fff;background-color:#333}.btn-primary{color:#fff;background-color:#337ab7;border-color:#2e6da4}.btn-primary:focus,.btn-primary.focus{color:#fff;background-color:#286090;border-color:#122b40}.btn-primary:hover{color:#fff;background-color:#286090;border-color:#204d74}.btn-primary:active,.btn-primary.active,.open>.dropdown-toggle.btn-primary{color:#fff;background-color:#286090;border-color:#204d74}.btn-primary:active:hover,.btn-primary.active:hover,.open>.dropdown-toggle.btn-primary:hover,.btn-primary:active:focus,.btn-primary.active:focus,.open>.dropdown-toggle.btn-primary:focus,.btn-primary:active.focus,.btn-primary.active.focus,.open>.dropdown-toggle.btn-primary.focus{color:#fff;background-color:#204d74;border-color:#122b40}.btn-primary:active,.btn-primary.active,.open>.dropdown-toggle.btn-primary{background-image:none}.btn-primary.disabled,.btn-primary[disabled],fieldset[disabled] .btn-primary,.btn-primary.disabled:hover,.btn-primary[disabled]:hover,fieldset[disabled] .btn-primary:hover,.btn-primary.disabled:focus,.btn-primary[disabled]:focus,fieldset[disabled] .btn-primary:focus,.btn-primary.disabled.focus,.btn-primary[disabled].focus,fieldset[disabled] .btn-primary.focus,.btn-primary.disabled:active,.btn-primary[disabled]:active,fieldset[disabled] .btn-primary:active,.btn-primary.disabled.active,.btn-primary[disabled].active,fieldset[disabled] .btn-primary.active{background-color:#337ab7;border-color:#2e6da4}.btn-primary .badge{color:#337ab7;background-color:#fff}.btn-success{color:#fff;background-color:#5cb85c;border-color:#4cae4c}.btn-success:focus,.btn-success.focus{color:#fff;background-color:#449d44;border-color:#255625}.btn-success:hover{color:#fff;background-color:#449d44;border-color:#398439}.btn-success:active,.btn-success.active,.open>.dropdown-toggle.btn-success{color:#fff;background-color:#449d44;border-color:#398439}.btn-success:active:hover,.btn-success.active:hover,.open>.dropdown-toggle.btn-success:hover,.btn-success:active:focus,.btn-success.active:focus,.open>.dropdown-toggle.btn-success:focus,.btn-success:active.focus,.btn-success.active.focus,.open>.dropdown-toggle.btn-success.focus{color:#fff;background-color:#398439;border-color:#255625}.btn-success:active,.btn-success.active,.open>.dropdown-toggle.btn-success{background-image:none}.btn-success.disabled,.btn-success[disabled],fieldset[disabled] .btn-success,.btn-success.disabled:hover,.btn-success[disabled]:hover,fieldset[disabled] .btn-success:hover,.btn-success.disabled:focus,.btn-success[disabled]:focus,fieldset[disabled] .btn-success:focus,.btn-success.disabled.focus,.btn-success[disabled].focus,fieldset[disabled] .btn-success.focus,.btn-success.disabled:active,.btn-success[disabled]:active,fieldset[disabled] .btn-success:active,.btn-success.disabled.active,.btn-success[disabled].active,fieldset[disabled] .btn-success.active{background-color:#5cb85c;border-color:#4cae4c}.btn-success .badge{color:#5cb85c;background-color:#fff}.btn-info{color:#fff;background-color:#5bc0de;border-color:#46b8da}.btn-info:focus,.btn-info.focus{color:#fff;background-color:#31b0d5;border-color:#1b6d85}.btn-info:hover{color:#fff;background-color:#31b0d5;border-color:#269abc}.btn-info:active,.btn-info.active,.open>.dropdown-toggle.btn-info{color:#fff;background-color:#31b0d5;border-color:#269abc}.btn-info:active:hover,.btn-info.active:hover,.open>.dropdown-toggle.btn-info:hover,.btn-info:active:focus,.btn-info.active:focus,.open>.dropdown-toggle.btn-info:focus,.btn-info:active.focus,.btn-info.active.focus,.open>.dropdown-toggle.btn-info.focus{color:#fff;background-color:#269abc;border-color:#1b6d85}.btn-info:active,.btn-info.active,.open>.dropdown-toggle.btn-info{background-image:none}.btn-info.disabled,.btn-info[disabled],fieldset[disabled] .btn-info,.btn-info.disabled:hover,.btn-info[disabled]:hover,fieldset[disabled] .btn-info:hover,.btn-info.disabled:focus,.btn-info[disabled]:focus,fieldset[disabled] .btn-info:focus,.btn-info.disabled.focus,.btn-info[disabled].focus,fieldset[disabled] .btn-info.focus,.btn-info.disabled:active,.btn-info[disabled]:active,fieldset[disabled] .btn-info:active,.btn-info.disabled.active,.btn-info[disabled].active,fieldset[disabled] .btn-info.active{background-color:#5bc0de;border-color:#46b8da}.btn-info .badge{color:#5bc0de;background-color:#fff}.btn-warning{color:#fff;background-color:#f0ad4e;border-color:#eea236}.btn-warning:focus,.btn-warning.focus{color:#fff;background-color:#ec971f;border-color:#985f0d}.btn-warning:hover{color:#fff;background-color:#ec971f;border-color:#d58512}.btn-warning:active,.btn-warning.active,.open>.dropdown-toggle.btn-warning{color:#fff;background-color:#ec971f;border-color:#d58512}.btn-warning:active:hover,.btn-warning.active:hover,.open>.dropdown-toggle.btn-warning:hover,.btn-warning:active:focus,.btn-warning.active:focus,.open>.dropdown-toggle.btn-warning:focus,.btn-warning:active.focus,.btn-warning.active.focus,.open>.dropdown-toggle.btn-warning.focus{color:#fff;background-color:#d58512;border-color:#985f0d}.btn-warning:active,.btn-warning.active,.open>.dropdown-toggle.btn-warning{background-image:none}.btn-warning.disabled,.btn-warning[disabled],fieldset[disabled] .btn-warning,.btn-warning.disabled:hover,.btn-warning[disabled]:hover,fieldset[disabled] .btn-warning:hover,.btn-warning.disabled:focus,.btn-warning[disabled]:focus,fieldset[disabled] .btn-warning:focus,.btn-warning.disabled.focus,.btn-warning[disabled].focus,fieldset[disabled] .btn-warning.focus,.btn-warning.disabled:active,.btn-warning[disabled]:active,fieldset[disabled] .btn-warning:active,.btn-warning.disabled.active,.btn-warning[disabled].active,fieldset[disabled] .btn-warning.active{background-color:#f0ad4e;border-color:#eea236}.btn-warning .badge{color:#f0ad4e;background-color:#fff}.btn-danger{color:#fff;background-color:#d9534f;border-color:#d43f3a}.btn-danger:focus,.btn-danger.focus{color:#fff;background-color:#c9302c;border-color:#761c19}.btn-danger:hover{color:#fff;background-color:#c9302c;border-color:#ac2925}.btn-danger:active,.btn-danger.active,.open>.dropdown-toggle.btn-danger{color:#fff;background-color:#c9302c;border-color:#ac2925}.btn-danger:active:hover,.btn-danger.active:hover,.open>.dropdown-toggle.btn-danger:hover,.btn-danger:active:focus,.btn-danger.active:focus,.open>.dropdown-toggle.btn-danger:focus,.btn-danger:active.focus,.btn-danger.active.focus,.open>.dropdown-toggle.btn-danger.focus{color:#fff;background-color:#ac2925;border-color:#761c19}.btn-danger:active,.btn-danger.active,.open>.dropdown-toggle.btn-danger{background-image:none}.btn-danger.disabled,.btn-danger[disabled],fieldset[disabled] .btn-danger,.btn-danger.disabled:hover,.btn-danger[disabled]:hover,fieldset[disabled] .btn-danger:hover,.btn-danger.disabled:focus,.btn-danger[disabled]:focus,fieldset[disabled] .btn-danger:focus,.btn-danger.disabled.focus,.btn-danger[disabled].focus,fieldset[disabled] .btn-danger.focus,.btn-danger.disabled:active,.btn-danger[disabled]:active,fieldset[disabled] .btn-danger:active,.btn-danger.disabled.active,.btn-danger[disabled].active,fieldset[disabled] .btn-danger.active{background-color:#d9534f;border-color:#d43f3a}.btn-danger .badge{color:#d9534f;background-color:#fff}.btn-link{color:#337ab7;font-weight:normal;border-radius:0}.btn-link,.btn-link:active,.btn-link.active,.btn-link[disabled],fieldset[disabled] .btn-link{background-color:transparent;-webkit-box-shadow:none;box-shadow:none}.btn-link,.btn-link:hover,.btn-link:focus,.btn-link:active{border-color:transparent}.btn-link:hover,.btn-link:focus{color:#23527c;text-decoration:underline;background-color:transparent}.btn-link[disabled]:hover,fieldset[disabled] .btn-link:hover,.btn-link[disabled]:focus,fieldset[disabled] .btn-link:focus{color:#777;text-decoration:none}.btn-lg{padding:10px 16px;font-size:18px;line-height:1.3333333;border-radius:6px}.btn-sm{padding:5px 10px;font-size:12px;line-height:1.5;border-radius:3px}.btn-xs{padding:1px 5px;font-size:12px;line-height:1.5;border-radius:3px}.btn-block{display:block;width:100%}.btn-block+.btn-block{margin-top:5px}input[type="submit"].btn-block,input[type="reset"].btn-block,input[type="button"].btn-block{width:100%}.label{display:inline;padding:.2em .6em .3em;font-size:75%;font-weight:bold;line-height:1;color:#fff;text-align:center;white-space:nowrap;vertical-align:baseline;border-radius:.25em}a.label:hover,a.label:focus{color:#fff;text-decoration:none;cursor:pointer}.label:empty{display:none}.btn .label{position:relative;top:-1px}.label-default{background-color:#777}.label-default[href]:hover,.label-default[href]:focus{background-color:#5e5e5e}.label-primary{background-color:#337ab7}.label-primary[href]:hover,.label-primary[href]:focus{background-color:#286090}.label-success{background-color:#5cb85c}.label-success[href]:hover,.label-success[href]:focus{background-color:#449d44}.label-info{background-color:#5bc0de}.label-info[href]:hover,.label-info[href]:focus{background-color:#31b0d5}.label-warning{background-color:#f0ad4e}.label-warning[href]:hover,.label-warning[href]:focus{background-color:#ec971f}.label-danger{background-color:#d9534f}.label-danger[href]:hover,.label-danger[href]:focus{background-color:#c9302c}.badge{display:inline-block;min-width:10px;padding:3px 7px;font-size:12px;font-weight:bold;color:#fff;line-height:1;vertical-align:middle;white-space:nowrap;text-align:center;background-color:#777;border-radius:10px}.badge:empty{display:none}.btn .badge{position:relative;top:-1px}.btn-xs .badge,.btn-group-xs>.btn .badge{top:0;padding:1px 5px}a.badge:hover,a.badge:focus{color:#fff;text-decoration:none;cursor:pointer}.list-group-item.active>.badge,.nav-pills>.active>a>.badge{color:#337ab7;background-color:#fff}.list-group-item>.badge{float:right}.list-group-item>.badge+.badge{margin-right:5px}.nav-pills>li>a>.badge{margin-left:3px}.close{float:right;font-size:21px;font-weight:bold;line-height:1;color:#000;text-shadow:0 1px 0 #fff;opacity:.2;filter:alpha(opacity=20)}.close:hover,.close:focus{color:#000;text-decoration:none;cursor:pointer;opacity:.5;filter:alpha(opacity=50)}button.close{padding:0;cursor:pointer;background:transparent;border:0;-webkit-appearance:none}.clearfix:before,.clearfix:after,.container:before,.container:after,.container-fluid:before,.container-fluid:after,.row:before,.row:after{content:" ";display:table}.clearfix:after,.container:after,.container-fluid:after,.row:after{clear:both}.center-block{display:block;margin-left:auto;margin-right:auto}.pull-right{float:right !important}.pull-left{float:left !important}.hide{display:none !important}.show{display:block !important}.invisible{visibility:hidden}.text-hide{font:0/0 a;color:transparent;text-shadow:none;background-color:transparent;border:0}.hidden{display:none !important}.affix{position:fixed}@-ms-viewport{width:device-width}.visible-xs,.visible-sm,.visible-md,.visible-lg{display:none !important}.visible-xs-block,.visible-xs-inline,.visible-xs-inline-block,.visible-sm-block,.visible-sm-inline,.visible-sm-inline-block,.visible-md-block,.visible-md-inline,.visible-md-inline-block,.visible-lg-block,.visible-lg-inline,.visible-lg-inline-block{display:none !important}@media (max-width:767px){.visible-xs{display:block !important}table.visible-xs{display:table !important}tr.visible-xs{display:table-row !important}th.visible-xs,td.visible-xs{display:table-cell !important}}@media (max-width:767px){.visible-xs-block{display:block !important}}@media (max-width:767px){.visible-xs-inline{display:inline !important}}@media (max-width:767px){.visible-xs-inline-block{display:inline-block !important}}@media (min-width:768px) and (max-width:991px){.visible-sm{display:block !important}table.visible-sm{display:table !important}tr.visible-sm{display:table-row !important}th.visible-sm,td.visible-sm{display:table-cell !important}}@media (min-width:768px) and (max-width:991px){.visible-sm-block{display:block !important}}@media (min-width:768px) and (max-width:991px){.visible-sm-inline{display:inline !important}}@media (min-width:768px) and (max-width:991px){.visible-sm-inline-block{display:inline-block !important}}@media (min-width:992px) and (max-width:1199px){.visible-md{display:block !important}table.visible-md{display:table !important}tr.visible-md{display:table-row !important}th.visible-md,td.visible-md{display:table-cell !important}}@media (min-width:992px) and (max-width:1199px){.visible-md-block{display:block !important}}@media (min-width:992px) and (max-width:1199px){.visible-md-inline{display:inline !important}}@media (min-width:992px) and (max-width:1199px){.visible-md-inline-block{display:inline-block !important}}@media (min-width:1200px){.visible-lg{display:block !important}table.visible-lg{display:table !important}tr.visible-lg{display:table-row !important}th.visible-lg,td.visible-lg{display:table-cell !important}}@media (min-width:1200px){.visible-lg-block{display:block !important}}@media (min-width:1200px){.visible-lg-inline{display:inline !important}}@media (min-width:1200px){.visible-lg-inline-block{display:inline-block !important}}@media (max-width:767px){.hidden-xs{display:none !important}}@media (min-width:768px) and (max-width:991px){.hidden-sm{display:none !important}}@media (min-width:992px) and (max-width:1199px){.hidden-md{display:none !important}}@media (min-width:1200px){.hidden-lg{display:none !important}}.visible-print{display:none !important}@media print{.visible-print{display:block !important}table.visible-print{display:table !important}tr.visible-print{display:table-row !important}th.visible-print,td.visible-print{display:table-cell !important}}.visible-print-block{display:none !important}@media print{.visible-print-block{display:block !important}}.visible-print-inline{display:none !important}@media print{.visible-print-inline{display:inline !important}}.visible-print-inline-block{display:none !important}@media print{.visible-print-inline-block{display:inline-block !important}}@media print{.hidden-print{display:none !important}} -------------------------------------------------------------------------------- /demo/browser.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import marked from 'marked' 3 | import App from './App' 4 | 5 | import './site.less' 6 | import './markdown.less' 7 | 8 | const mount = document.getElementById('editor') 9 | React.render(, mount) 10 | 11 | // async init highlight.js 12 | const script = document.getElementById('hlscript') 13 | script.onload = () => { 14 | window.hljs.initHighlightingOnLoad() 15 | } 16 | -------------------------------------------------------------------------------- /demo/index.dev.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | React Markdown Editor 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /demo/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | React Markdown Editor 10 | 11 | 12 |
13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /demo/markdown.less: -------------------------------------------------------------------------------- 1 | @color: steelblue; 2 | @lightColor: #0081FF; 3 | @borderColor: #ccc; 4 | 5 | .markdown { 6 | line-height: 1.5; 7 | 8 | h1, h2, h3, h4, h5, h6 { 9 | margin: 12px 0; 10 | // padding-bottom: 8px; 11 | // border-bottom: 1px dotted #ccc; 12 | } 13 | 14 | h1, h2 { 15 | margin-top: 20px; 16 | padding-bottom: 8px; 17 | border-bottom: 1px dotted @borderColor; 18 | } 19 | 20 | a { 21 | color: @color; 22 | text-decoration: none; 23 | 24 | &:hover { 25 | color: @lightColor; 26 | } 27 | } 28 | 29 | pre { 30 | background-color: #eee; 31 | color: #555; 32 | border-radius: 3px; 33 | padding: 10px; 34 | max-height: 700px; 35 | overflow: auto; 36 | border: none; 37 | font-size: 0.9em; 38 | line-height: 1.33; 39 | 40 | code { 41 | font-size: inherit; 42 | color: inherit; 43 | padding: 0; 44 | background-color: transparent; 45 | } 46 | } 47 | 48 | code { 49 | color: #d82451; 50 | background-color: #f6f6f6; 51 | font-size: 0.9em; 52 | padding: 2px 4px; 53 | margin: 0 2px; 54 | } 55 | 56 | blockquote { 57 | margin: 0; 58 | padding: 5px 10px 5px 15px; 59 | border-left: 5px solid @color; 60 | background-color: #eee; 61 | } 62 | 63 | table { 64 | border: 1px solid @borderColor; 65 | 66 | thead tr { background-color: #eee; } 67 | tbody tr { 68 | border-top: 1px solid @borderColor; 69 | background-color: #fff; 70 | } 71 | th, td { 72 | padding: 8px; 73 | border-left: 1px solid @borderColor; 74 | } 75 | } 76 | 77 | hr { 78 | border-style: solid; 79 | border-color: #ccc; 80 | } 81 | 82 | img { max-width: 80%; } 83 | } 84 | -------------------------------------------------------------------------------- /demo/server.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable */ 2 | require("babel-core/register") 3 | 4 | var webpack = require('webpack') 5 | var WebpackDevServer = require('webpack-dev-server') 6 | var webpackDevConfig = require('../webpack/webpack.dev') 7 | var config = require('../config') 8 | var webpackDevPort = config.webpackDevPort 9 | 10 | new WebpackDevServer(webpack(webpackDevConfig), { 11 | contentBase: './demo', 12 | publicPath: webpackDevConfig.output.publicPath, 13 | hot: true, 14 | historyApiFallback: true 15 | }).listen(webpackDevPort, 'localhost', function (err, result) { 16 | if (err) console.log(err) 17 | else console.log('Listening at localhost:' + webpackDevPort) 18 | }) 19 | -------------------------------------------------------------------------------- /demo/site.less: -------------------------------------------------------------------------------- 1 | * { box-sizing: border-box; } 2 | html { font-size: 16px; height: 100%; } 3 | body { 4 | font-family: "Helvetica Neue", Helvetica, "Microsoft YaHei", Arial, sans-serif; 5 | color: #555; 6 | height: 100%; 7 | margin: 0; 8 | } 9 | a, a:hover, a:focus { text-decoration: none; outline: 0; } 10 | input { outline: 0; } 11 | -------------------------------------------------------------------------------- /dist/react-markdown.css: -------------------------------------------------------------------------------- 1 | .editor-title{font-size:1pc}.md-editor textarea,.md-preview,.tag-input input{line-height:1.5}.md-panel{display:block;position:relative;margin-top:40px;border:1px solid #ccc;border-radius:3px;font-size:14px;overflow:hidden}.md-panel.fullscreen{position:absolute;top:0;bottom:0;left:0;right:0;margin:0;z-index:500}.md-panel.fullscreen .md-editor{height:100%}.md-panel.disabled .tb-btn a,.md-panel.disabled textarea{cursor:default}.md-panel.disabled .tb-btn a:hover{color:#aaa;background-color:#fff}.md-panel.disabled .tb-btn a:active{box-shadow:none}.md-menubar{position:absolute;top:0;left:0;width:100%;height:37px;border-bottom:1px solid #ccc;box-shadow:0 0 1px #ccc;z-index:10;background-color:#fff}.md-modebar,.md-toolbar{margin:0}.md-toolbar{padding:0 5px;background-color:#fff}.tb-btn,.tb-func-btn{float:left;font-size:14px;list-style:none;margin:0 2px}.tb-btn.spliter,.tb-func-btn.spliter{border-left:1px solid #ccc;margin:6px 2px;height:24px}.tb-btn a,.tb-func-btn a{display:inline-block;position:relative;width:36px;height:36px;text-align:center;padding:9px 0;cursor:pointer;color:#aaa}.tb-btn a.active,.tb-btn a:hover,.tb-func-btn a.active,.tb-func-btn a:hover{color:#0081ff;background-color:#eee}.tb-btn a:active,.tb-func-btn a:active{box-shadow:inset 0 1px 5px rgba(0,0,0,.2)}.tb-btn input[type=file],.tb-func-btn input[type=file]{display:none}.tb-btn .badge,.tb-func-btn .badge{position:absolute;padding:1px 5px;right:0;bottom:0}.md-editor{width:50%;height:auto;transition:width .3s;background-color:#fff}.md-editor.expand{width:100%}.md-editor textarea{display:block;border-style:none;resize:none;outline:0;height:100%;min-height:540px;width:100%;padding:47px 15px 0}.md-preview{position:absolute;width:50%;height:100%;left:50%;top:0;background-color:#f6f6f6;padding:45px 20px 20px;border-left:1px solid #ccc;overflow:auto;transition:left .3s,width .3s}.md-preview.expand{left:0;width:100%;border-left-style:none}.md-preview.shrink{left:100%;width:0}.md-spliter{position:absolute;top:0;left:50%;height:37px;border-left:1px solid #ccc;z-index:105}.md-btngroup{margin-top:20px}.md-btngroup .help-text{margin-left:15px}.markdown{line-height:1.5}.markdown h1,.markdown h2,.markdown h3,.markdown h4,.markdown h5,.markdown h6{margin:9pt 0}.markdown h1,.markdown h2{margin-top:20px;padding-bottom:8px;border-bottom:1px dotted #ccc}.markdown a{color:#4682b4;text-decoration:none}.markdown a:hover{color:#0081ff}.markdown pre{background-color:#eee;color:#555;border-radius:3px;padding:10px;max-height:700px;overflow:auto;border:none;font-size:.9em;line-height:1.33}.markdown pre code{font-size:inherit;color:inherit;padding:0;background-color:transparent}.markdown code{color:#d82451;background-color:#f6f6f6;font-size:.9em;padding:2px 4px;margin:0 2px}.markdown blockquote{margin:0;padding:5px 10px 5px 15px;border-left:5px solid #4682b4;background-color:#eee}.markdown table{border:1px solid #ccc}.markdown table thead tr{background-color:#eee}.markdown table tbody tr{border-top:1px solid #ccc;background-color:#fff}.markdown table td,.markdown table th{padding:8px;border-left:1px solid #ccc}.markdown hr{border-style:solid;border-color:#ccc}.markdown img{max-width:80%}*{box-sizing:border-box}html{font-size:1pc}body,html{height:100%}body{font-family:Helvetica Neue,Helvetica,Microsoft YaHei,Arial,sans-serif;color:#555;margin:0}a,a:focus,a:hover{text-decoration:none;outline:0}input{outline:0}.pull-right{float:right} 2 | /*# sourceMappingURL=react-markdown.css.map*/ -------------------------------------------------------------------------------- /dist/react-markdown.css.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":[],"names":[],"mappings":"","file":"react-markdown.css","sourceRoot":""} -------------------------------------------------------------------------------- /dist/react-markdown.js: -------------------------------------------------------------------------------- 1 | /******/ (function(modules) { // webpackBootstrap 2 | /******/ // The module cache 3 | /******/ var installedModules = {}; 4 | /******/ 5 | /******/ // The require function 6 | /******/ function __webpack_require__(moduleId) { 7 | /******/ 8 | /******/ // Check if module is in cache 9 | /******/ if(installedModules[moduleId]) 10 | /******/ return installedModules[moduleId].exports; 11 | /******/ 12 | /******/ // Create a new module (and put it into the cache) 13 | /******/ var module = installedModules[moduleId] = { 14 | /******/ exports: {}, 15 | /******/ id: moduleId, 16 | /******/ loaded: false 17 | /******/ }; 18 | /******/ 19 | /******/ // Execute the module function 20 | /******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); 21 | /******/ 22 | /******/ // Flag the module as loaded 23 | /******/ module.loaded = true; 24 | /******/ 25 | /******/ // Return the exports of the module 26 | /******/ return module.exports; 27 | /******/ } 28 | /******/ 29 | /******/ 30 | /******/ // expose the modules object (__webpack_modules__) 31 | /******/ __webpack_require__.m = modules; 32 | /******/ 33 | /******/ // expose the module cache 34 | /******/ __webpack_require__.c = installedModules; 35 | /******/ 36 | /******/ // __webpack_public_path__ 37 | /******/ __webpack_require__.p = ""; 38 | /******/ 39 | /******/ // Load entry module and return exports 40 | /******/ return __webpack_require__(0); 41 | /******/ }) 42 | /************************************************************************/ 43 | /******/ ([ 44 | /* 0 */ 45 | /***/ function(module, exports, __webpack_require__) { 46 | 47 | 'use strict'; 48 | 49 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; } 50 | 51 | var _react = __webpack_require__(1); 52 | 53 | var _react2 = _interopRequireDefault(_react); 54 | 55 | var _marked = __webpack_require__(2); 56 | 57 | var _marked2 = _interopRequireDefault(_marked); 58 | 59 | var _editor = __webpack_require__(3); 60 | 61 | var _editor2 = _interopRequireDefault(_editor); 62 | 63 | __webpack_require__(11); 64 | 65 | var mount = document.getElementById('editor'); 66 | _react2['default'].render(_react2['default'].createElement(_editor2['default'], null), mount); 67 | 68 | // async init highlight.js 69 | var script = document.getElementById('hlscript'); 70 | script.onload = function () { 71 | window.hljs.initHighlightingOnLoad(); 72 | }; 73 | 74 | /***/ }, 75 | /* 1 */ 76 | /***/ function(module, exports) { 77 | 78 | module.exports = React; 79 | 80 | /***/ }, 81 | /* 2 */ 82 | /***/ function(module, exports) { 83 | 84 | module.exports = marked; 85 | 86 | /***/ }, 87 | /* 3 */ 88 | /***/ function(module, exports, __webpack_require__) { 89 | 90 | 'use strict'; 91 | 92 | Object.defineProperty(exports, '__esModule', { 93 | value: true 94 | }); 95 | 96 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; } 97 | 98 | var _react = __webpack_require__(1); 99 | 100 | var _react2 = _interopRequireDefault(_react); 101 | 102 | var _marked = __webpack_require__(2); 103 | 104 | var _marked2 = _interopRequireDefault(_marked); 105 | 106 | var _classnames = __webpack_require__(4); 107 | 108 | var _classnames2 = _interopRequireDefault(_classnames); 109 | 110 | __webpack_require__(5); 111 | 112 | __webpack_require__(9); 113 | 114 | var MdEditor = _react2['default'].createClass({ 115 | displayName: 'MdEditor', 116 | 117 | propTypes: { 118 | content: _react.PropTypes.string 119 | }, 120 | getInitialState: function getInitialState() { 121 | return { 122 | panelClass: 'md-panel', 123 | mode: 'split', 124 | isFullScreen: false, 125 | result: (0, _marked2['default'])(this.props.content || '') 126 | }; 127 | }, 128 | componentDidMount: function componentDidMount() { 129 | // cache dom node 130 | this.textControl = _react2['default'].findDOMNode(this.refs.editor); 131 | this.previewControl = _react2['default'].findDOMNode(this.refs.preview); 132 | }, 133 | componentWillUnmount: function componentWillUnmount() { 134 | this.textControl = null; 135 | this.previewControl = null; 136 | }, 137 | render: function render() { 138 | var panelClass = (0, _classnames2['default'])(['md-panel', { 'fullscreen': this.state.isFullScreen }]); 139 | var editorClass = (0, _classnames2['default'])(['md-editor', { 'expand': this.state.mode === 'edit' }]); 140 | var previewClass = (0, _classnames2['default'])(['md-preview', 'markdown', { 'expand': this.state.mode === 'preview', 'shrink': this.state.mode === 'edit' }]); 141 | 142 | return _react2['default'].createElement( 143 | 'div', 144 | { className: panelClass }, 145 | _react2['default'].createElement( 146 | 'div', 147 | { className: 'md-menubar' }, 148 | this._getModeBar(), 149 | this._getToolBar() 150 | ), 151 | _react2['default'].createElement( 152 | 'div', 153 | { className: editorClass }, 154 | _react2['default'].createElement('textarea', { ref: 'editor', name: 'content', onChange: this._onChange }) 155 | ), 156 | _react2['default'].createElement('div', { className: previewClass, ref: 'preview', dangerouslySetInnerHTML: { __html: this.state.result } }), 157 | _react2['default'].createElement('div', { className: 'md-spliter' }) 158 | ); 159 | }, 160 | // public methods 161 | isDirty: function isDirty() { 162 | return this._isDirty || false; 163 | }, 164 | getValue: function getValue() { 165 | return this.state.content; 166 | }, 167 | // widgets constructors 168 | _getToolBar: function _getToolBar() { 169 | return _react2['default'].createElement( 170 | 'ul', 171 | { className: 'md-toolbar clearfix' }, 172 | _react2['default'].createElement( 173 | 'li', 174 | { className: 'tb-btn' }, 175 | _react2['default'].createElement( 176 | 'a', 177 | { title: '加粗', onClick: this._boldText }, 178 | _react2['default'].createElement('i', { className: 'fa fa-bold' }) 179 | ) 180 | ), 181 | ' ', 182 | _react2['default'].createElement( 183 | 'li', 184 | { className: 'tb-btn' }, 185 | _react2['default'].createElement( 186 | 'a', 187 | { title: '斜体', onClick: this._italicText }, 188 | _react2['default'].createElement('i', { className: 'fa fa-italic' }) 189 | ) 190 | ), 191 | ' ', 192 | _react2['default'].createElement('li', { className: 'tb-btn spliter' }), 193 | _react2['default'].createElement( 194 | 'li', 195 | { className: 'tb-btn' }, 196 | _react2['default'].createElement( 197 | 'a', 198 | { title: '链接', onClick: this._linkText }, 199 | _react2['default'].createElement('i', { className: 'fa fa-link' }) 200 | ) 201 | ), 202 | ' ', 203 | _react2['default'].createElement( 204 | 'li', 205 | { className: 'tb-btn' }, 206 | _react2['default'].createElement( 207 | 'a', 208 | { title: '引用', onClick: this._blockquoteText }, 209 | _react2['default'].createElement('i', { className: 'fa fa-outdent' }) 210 | ) 211 | ), 212 | ' ', 213 | _react2['default'].createElement( 214 | 'li', 215 | { className: 'tb-btn' }, 216 | _react2['default'].createElement( 217 | 'a', 218 | { title: '代码段', onClick: this._codeText }, 219 | _react2['default'].createElement('i', { className: 'fa fa-code' }) 220 | ) 221 | ), 222 | ' ', 223 | _react2['default'].createElement( 224 | 'li', 225 | { className: 'tb-btn' }, 226 | _react2['default'].createElement( 227 | 'a', 228 | { title: '图片', onClick: this._pictureText }, 229 | _react2['default'].createElement('i', { className: 'fa fa-picture-o' }) 230 | ) 231 | ), 232 | ' ', 233 | _react2['default'].createElement('li', { className: 'tb-btn spliter' }), 234 | _react2['default'].createElement( 235 | 'li', 236 | { className: 'tb-btn' }, 237 | _react2['default'].createElement( 238 | 'a', 239 | { title: '有序列表', onClick: this._listOlText }, 240 | _react2['default'].createElement('i', { className: 'fa fa-list-ol' }) 241 | ) 242 | ), 243 | ' ', 244 | _react2['default'].createElement( 245 | 'li', 246 | { className: 'tb-btn' }, 247 | _react2['default'].createElement( 248 | 'a', 249 | { title: '无序列表', onClick: this._listUlText }, 250 | _react2['default'].createElement('i', { className: 'fa fa-list-ul' }) 251 | ) 252 | ), 253 | ' ', 254 | _react2['default'].createElement( 255 | 'li', 256 | { className: 'tb-btn' }, 257 | _react2['default'].createElement( 258 | 'a', 259 | { title: '标题', onClick: this._headerText }, 260 | _react2['default'].createElement('i', { className: 'fa fa-header' }) 261 | ) 262 | ), 263 | ' ' 264 | ); 265 | }, 266 | _getModeBar: function _getModeBar() { 267 | var _this = this; 268 | 269 | var checkActive = function checkActive(mode) { 270 | return (0, _classnames2['default'])({ active: _this.state.mode === mode }); 271 | }; 272 | 273 | return _react2['default'].createElement( 274 | 'ul', 275 | { className: 'md-modebar' }, 276 | _react2['default'].createElement( 277 | 'li', 278 | { className: 'tb-btn pull-right' }, 279 | _react2['default'].createElement( 280 | 'a', 281 | { className: checkActive('preview'), onClick: this._changeMode('preview'), title: '预览模式' }, 282 | _react2['default'].createElement('i', { className: 'fa fa-eye' }) 283 | ) 284 | ), 285 | ' ', 286 | _react2['default'].createElement( 287 | 'li', 288 | { className: 'tb-btn pull-right' }, 289 | _react2['default'].createElement( 290 | 'a', 291 | { className: checkActive('split'), onClick: this._changeMode('split'), title: '分屏模式' }, 292 | _react2['default'].createElement('i', { className: 'fa fa-columns' }) 293 | ) 294 | ), 295 | ' ', 296 | _react2['default'].createElement( 297 | 'li', 298 | { className: 'tb-btn pull-right' }, 299 | _react2['default'].createElement( 300 | 'a', 301 | { className: checkActive('edit'), onClick: this._changeMode('edit'), title: '编辑模式' }, 302 | _react2['default'].createElement('i', { className: 'fa fa-pencil' }) 303 | ) 304 | ), 305 | ' ', 306 | _react2['default'].createElement('li', { className: 'tb-btn spliter pull-right' }), 307 | _react2['default'].createElement( 308 | 'li', 309 | { className: 'tb-btn pull-right' }, 310 | _react2['default'].createElement( 311 | 'a', 312 | { title: '全屏模式', onClick: this._toggleFullScreen }, 313 | _react2['default'].createElement('i', { className: 'fa fa-arrows-alt' }) 314 | ) 315 | ), 316 | ' ' 317 | ); 318 | }, 319 | // event handlers 320 | _onChange: function _onChange(e) { 321 | var _this2 = this; 322 | 323 | this._isDirty = true; // set dirty 324 | if (this._ltr) clearTimeout(this._ltr); 325 | 326 | this._ltr = setTimeout(function () { 327 | _this2.setState({ result: (0, _marked2['default'])(_this2.textControl.value) }); // change state 328 | }, 300); 329 | }, 330 | _changeMode: function _changeMode(mode) { 331 | var _this3 = this; 332 | 333 | return function (e) { 334 | _this3.setState({ mode: mode }); 335 | }; 336 | }, 337 | _toggleFullScreen: function _toggleFullScreen(e) { 338 | this.setState({ isFullScreen: !this.state.isFullScreen }); 339 | }, 340 | // default text processors 341 | _preInputText: function _preInputText(text, preStart, preEnd) { 342 | var start = this.textControl.selectionStart; 343 | var end = this.textControl.selectionEnd; 344 | var origin = this.textControl.value; 345 | 346 | if (start !== end) { 347 | var exist = origin.slice(start, end); 348 | text = text.slice(0, preStart) + exist + text.slice(preEnd); 349 | preEnd = preStart + exist.length; 350 | } 351 | this.textControl.value = origin.slice(0, start) + text + origin.slice(end); 352 | // pre-select 353 | this.textControl.setSelectionRange(start + preStart, start + preEnd); 354 | this.setState({ result: (0, _marked2['default'])(this.textControl.value) }); // change state 355 | }, 356 | _boldText: function _boldText() { 357 | this._preInputText("**加粗文字**", 2, 6); 358 | }, 359 | _italicText: function _italicText() { 360 | this._preInputText("_斜体文字_", 1, 5); 361 | }, 362 | _linkText: function _linkText() { 363 | this._preInputText("[链接文本](www.yourlink.com)", 1, 5); 364 | }, 365 | _blockquoteText: function _blockquoteText() { 366 | this._preInputText("> 引用", 2, 4); 367 | }, 368 | _codeText: function _codeText() { 369 | this._preInputText("```\ncode block\n```", 4, 14); 370 | }, 371 | _pictureText: function _pictureText() { 372 | this._preInputText("![alt](www.yourlink.com)", 2, 5); 373 | }, 374 | _listUlText: function _listUlText() { 375 | this._preInputText("- 无序列表项0\n- 无序列表项1", 2, 8); 376 | }, 377 | _listOlText: function _listOlText() { 378 | this._preInputText("1. 有序列表项0\n2. 有序列表项1", 3, 9); 379 | }, 380 | _headerText: function _headerText() { 381 | this._preInputText("## 标题", 3, 5); 382 | } 383 | }); 384 | 385 | exports['default'] = MdEditor; 386 | module.exports = exports['default']; 387 | /* style={{height: this.state.editorHeight + 'px'}} */ /* bold */ /* italic */ /* link */ /* blockquote */ /* code */ /* picture-o */ /* list-ol */ /* list-ul */ /* header */ /* preview mode */ /* split mode */ /* edit mode */ /* full-screen */ 388 | 389 | /***/ }, 390 | /* 4 */ 391 | /***/ function(module, exports, __webpack_require__) { 392 | 393 | var __WEBPACK_AMD_DEFINE_RESULT__;/*! 394 | Copyright (c) 2015 Jed Watson. 395 | Licensed under the MIT License (MIT), see 396 | http://jedwatson.github.io/classnames 397 | */ 398 | 399 | (function () { 400 | 'use strict'; 401 | 402 | function classNames () { 403 | 404 | var classes = ''; 405 | 406 | for (var i = 0; i < arguments.length; i++) { 407 | var arg = arguments[i]; 408 | if (!arg) continue; 409 | 410 | var argType = typeof arg; 411 | 412 | if ('string' === argType || 'number' === argType) { 413 | classes += ' ' + arg; 414 | 415 | } else if (Array.isArray(arg)) { 416 | classes += ' ' + classNames.apply(null, arg); 417 | 418 | } else if ('object' === argType) { 419 | for (var key in arg) { 420 | if (arg.hasOwnProperty(key) && arg[key]) { 421 | classes += ' ' + key; 422 | } 423 | } 424 | } 425 | } 426 | 427 | return classes.substr(1); 428 | } 429 | 430 | if (typeof module !== 'undefined' && module.exports) { 431 | module.exports = classNames; 432 | } else if (true){ 433 | // AMD. Register as an anonymous module. 434 | !(__WEBPACK_AMD_DEFINE_RESULT__ = function () { 435 | return classNames; 436 | }.call(exports, __webpack_require__, exports, module), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); 437 | } else { 438 | window.classNames = classNames; 439 | } 440 | 441 | }()); 442 | 443 | 444 | /***/ }, 445 | /* 5 */ 446 | /***/ function(module, exports) { 447 | 448 | // removed by extract-text-webpack-plugin 449 | 450 | /***/ }, 451 | /* 6 */, 452 | /* 7 */, 453 | /* 8 */, 454 | /* 9 */ 455 | /***/ function(module, exports) { 456 | 457 | // removed by extract-text-webpack-plugin 458 | 459 | /***/ }, 460 | /* 10 */, 461 | /* 11 */ 462 | /***/ function(module, exports) { 463 | 464 | // removed by extract-text-webpack-plugin 465 | 466 | /***/ } 467 | /******/ ]); 468 | //# sourceMappingURL=react-markdown.js.map -------------------------------------------------------------------------------- /dist/react-markdown.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["webpack:///webpack/bootstrap 038014a8ef9bd405f954","webpack:///D:/github/react-markdown/src/browser.js","webpack:///external \"React\"","webpack:///external \"marked\"","webpack:///D:/github/react-markdown/src/editor.jsx","webpack:///./~/classnames/index.js","webpack:///./src/editor.less","webpack:///./src/markdown.less","webpack:///./src/site.less"],"names":[],"mappings":"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","file":"react-markdown.js","sourcesContent":[" \t// The module cache\n \tvar installedModules = {};\n\n \t// The require function\n \tfunction __webpack_require__(moduleId) {\n\n \t\t// Check if module is in cache\n \t\tif(installedModules[moduleId])\n \t\t\treturn installedModules[moduleId].exports;\n\n \t\t// Create a new module (and put it into the cache)\n \t\tvar module = installedModules[moduleId] = {\n \t\t\texports: {},\n \t\t\tid: moduleId,\n \t\t\tloaded: false\n \t\t};\n\n \t\t// Execute the module function\n \t\tmodules[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n\n \t\t// Flag the module as loaded\n \t\tmodule.loaded = true;\n\n \t\t// Return the exports of the module\n \t\treturn module.exports;\n \t}\n\n\n \t// expose the modules object (__webpack_modules__)\n \t__webpack_require__.m = modules;\n\n \t// expose the module cache\n \t__webpack_require__.c = installedModules;\n\n \t// __webpack_public_path__\n \t__webpack_require__.p = \"\";\n\n \t// Load entry module and return exports\n \treturn __webpack_require__(0);\n\n\n\n/** WEBPACK FOOTER **\n ** webpack/bootstrap 038014a8ef9bd405f954\n **/","import React from 'react'\r\nimport marked from 'marked'\r\nimport Editor from './editor'\r\n\r\nimport './site.less'\r\n\r\nconst mount = document.getElementById('editor')\r\nReact.render(, mount)\r\n\r\n// async init highlight.js\r\nconst script = document.getElementById('hlscript')\r\nscript.onload = () => {\r\n window.hljs.initHighlightingOnLoad()\r\n}\r\n\n\n\n/** WEBPACK FOOTER **\n ** D:/github/react-markdown/src/browser.js\n **/","module.exports = React;\n\n\n/*****************\n ** WEBPACK FOOTER\n ** external \"React\"\n ** module id = 1\n ** module chunks = 0\n **/","module.exports = marked;\n\n\n/*****************\n ** WEBPACK FOOTER\n ** external \"marked\"\n ** module id = 2\n ** module chunks = 0\n **/","import React, { PropTypes as T } from 'react'\r\nimport marked from 'marked'\r\nimport cNames from 'classnames'\r\n\r\nimport './editor.less'\r\nimport './markdown.less'\r\n\r\nconst MdEditor = React.createClass({\r\n propTypes: {\r\n content: T.string\r\n },\r\n getInitialState () {\r\n return {\r\n panelClass: 'md-panel',\r\n mode: 'split',\r\n isFullScreen: false,\r\n result: marked(this.props.content || '')\r\n }\r\n },\r\n componentDidMount () {\r\n // cache dom node\r\n this.textControl = React.findDOMNode(this.refs.editor)\r\n this.previewControl = React.findDOMNode(this.refs.preview)\r\n },\r\n componentWillUnmount () {\r\n this.textControl = null\r\n this.previewControl = null\r\n },\r\n render () {\r\n const panelClass = cNames([ 'md-panel', { 'fullscreen': this.state.isFullScreen } ])\r\n const editorClass = cNames([ 'md-editor', { 'expand': this.state.mode === 'edit' } ])\r\n const previewClass = cNames([ 'md-preview', 'markdown', { 'expand': this.state.mode === 'preview', 'shrink': this.state.mode === 'edit' } ])\r\n\r\n return (\r\n
\r\n
\r\n {this._getModeBar()}\r\n {this._getToolBar()}\r\n
\r\n
\r\n {/* style={{height: this.state.editorHeight + 'px'}} */}\r\n
\r\n
\r\n
\r\n
\r\n )\r\n },\r\n // public methods\r\n isDirty () {\r\n return this._isDirty || false\r\n },\r\n getValue () {\r\n return this.state.content\r\n },\r\n // widgets constructors\r\n _getToolBar () {\r\n return (\r\n \r\n )\r\n },\r\n _getModeBar () {\r\n const checkActive = (mode) => cNames({ active: this.state.mode === mode })\r\n\r\n return (\r\n \r\n )\r\n },\r\n // event handlers\r\n _onChange (e) {\r\n this._isDirty = true // set dirty\r\n if (this._ltr) clearTimeout(this._ltr)\r\n\r\n this._ltr = setTimeout(() => {\r\n this.setState({ result: marked(this.textControl.value) }) // change state\r\n }, 300)\r\n },\r\n _changeMode (mode) {\r\n return (e) => {\r\n this.setState({ mode })\r\n }\r\n },\r\n _toggleFullScreen (e) {\r\n this.setState({ isFullScreen: !this.state.isFullScreen })\r\n },\r\n // default text processors\r\n _preInputText (text, preStart, preEnd) {\r\n const start = this.textControl.selectionStart\r\n const end = this.textControl.selectionEnd\r\n const origin = this.textControl.value\r\n\r\n if (start !== end) {\r\n const exist = origin.slice(start, end)\r\n text = text.slice(0, preStart) + exist + text.slice(preEnd)\r\n preEnd = preStart + exist.length\r\n }\r\n this.textControl.value = origin.slice(0, start) + text + origin.slice(end)\r\n // pre-select\r\n this.textControl.setSelectionRange(start + preStart, start + preEnd)\r\n this.setState({ result: marked(this.textControl.value) }) // change state\r\n },\r\n _boldText () {\r\n this._preInputText(\"**加粗文字**\", 2, 6)\r\n },\r\n _italicText () {\r\n this._preInputText(\"_斜体文字_\", 1, 5)\r\n },\r\n _linkText () {\r\n this._preInputText(\"[链接文本](www.yourlink.com)\", 1, 5)\r\n },\r\n _blockquoteText () {\r\n this._preInputText(\"> 引用\", 2, 4)\r\n },\r\n _codeText () {\r\n this._preInputText(\"```\\ncode block\\n```\", 4, 14)\r\n },\r\n _pictureText () {\r\n this._preInputText(\"![alt](www.yourlink.com)\", 2, 5)\r\n },\r\n _listUlText () {\r\n this._preInputText(\"- 无序列表项0\\n- 无序列表项1\", 2, 8)\r\n },\r\n _listOlText () {\r\n this._preInputText(\"1. 有序列表项0\\n2. 有序列表项1\", 3, 9)\r\n },\r\n _headerText () {\r\n this._preInputText(\"## 标题\", 3, 5)\r\n }\r\n})\r\n\r\nexport default MdEditor\r\n\n\n\n/** WEBPACK FOOTER **\n ** D:/github/react-markdown/src/editor.jsx\n **/","/*!\n Copyright (c) 2015 Jed Watson.\n Licensed under the MIT License (MIT), see\n http://jedwatson.github.io/classnames\n*/\n\n(function () {\n\t'use strict';\n\n\tfunction classNames () {\n\n\t\tvar classes = '';\n\n\t\tfor (var i = 0; i < arguments.length; i++) {\n\t\t\tvar arg = arguments[i];\n\t\t\tif (!arg) continue;\n\n\t\t\tvar argType = typeof arg;\n\n\t\t\tif ('string' === argType || 'number' === argType) {\n\t\t\t\tclasses += ' ' + arg;\n\n\t\t\t} else if (Array.isArray(arg)) {\n\t\t\t\tclasses += ' ' + classNames.apply(null, arg);\n\n\t\t\t} else if ('object' === argType) {\n\t\t\t\tfor (var key in arg) {\n\t\t\t\t\tif (arg.hasOwnProperty(key) && arg[key]) {\n\t\t\t\t\t\tclasses += ' ' + key;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\treturn classes.substr(1);\n\t}\n\n\tif (typeof module !== 'undefined' && module.exports) {\n\t\tmodule.exports = classNames;\n\t} else if (typeof define === 'function' && typeof define.amd === 'object' && define.amd){\n\t\t// AMD. Register as an anonymous module.\n\t\tdefine(function () {\n\t\t\treturn classNames;\n\t\t});\n\t} else {\n\t\twindow.classNames = classNames;\n\t}\n\n}());\n\n\n\n/*****************\n ** WEBPACK FOOTER\n ** ./~/classnames/index.js\n ** module id = 4\n ** module chunks = 0\n **/","// removed by extract-text-webpack-plugin\n\n\n/*****************\n ** WEBPACK FOOTER\n ** ./src/editor.less\n ** module id = 5\n ** module chunks = 0\n **/","// removed by extract-text-webpack-plugin\n\n\n/*****************\n ** WEBPACK FOOTER\n ** ./src/markdown.less\n ** module id = 9\n ** module chunks = 0\n **/","// removed by extract-text-webpack-plugin\n\n\n/*****************\n ** WEBPACK FOOTER\n ** ./src/site.less\n ** module id = 11\n ** module chunks = 0\n **/"],"sourceRoot":""} -------------------------------------------------------------------------------- /dist/react-markdown.min.js: -------------------------------------------------------------------------------- 1 | !function(e){function t(a){if(l[a])return l[a].exports;var n=l[a]={exports:{},id:a,loaded:!1};return e[a].call(n.exports,n,n.exports,t),n.loaded=!0,n.exports}var l={};return t.m=e,t.c=l,t.p="",t(0)}([function(e,t,l){"use strict";function a(e){return e&&e.__esModule?e:{"default":e}}var n=l(1),i=a(n),r=l(2),s=(a(r),l(3)),c=a(s);l(7);var u=document.getElementById("editor");i["default"].render(i["default"].createElement(c["default"],null),u);var o=document.getElementById("hlscript");o.onload=function(){window.hljs.initHighlightingOnLoad()}},function(e,t){e.exports=React},function(e,t){e.exports=marked},function(e,t,l){"use strict";function a(e){return e&&e.__esModule?e:{"default":e}}Object.defineProperty(t,"__esModule",{value:!0});var n=l(1),i=a(n),r=l(2),s=a(r),c=l(4),u=a(c);l(5),l(6);var o=i["default"].createClass({displayName:"MdEditor",propTypes:{content:n.PropTypes.string},getInitialState:function(){return{panelClass:"md-panel",mode:"split",isFullScreen:!1,result:s["default"](this.props.content||"")}},componentDidMount:function(){this.textControl=i["default"].findDOMNode(this.refs.editor),this.previewControl=i["default"].findDOMNode(this.refs.preview)},componentWillUnmount:function(){this.textControl=null,this.previewControl=null},render:function(){var e=u["default"](["md-panel",{fullscreen:this.state.isFullScreen}]),t=u["default"](["md-editor",{expand:"edit"===this.state.mode}]),l=u["default"](["md-preview","markdown",{expand:"preview"===this.state.mode,shrink:"edit"===this.state.mode}]);return i["default"].createElement("div",{className:e},i["default"].createElement("div",{className:"md-menubar"},this._getModeBar(),this._getToolBar()),i["default"].createElement("div",{className:t},i["default"].createElement("textarea",{ref:"editor",name:"content",onChange:this._onChange})),i["default"].createElement("div",{className:l,ref:"preview",dangerouslySetInnerHTML:{__html:this.state.result}}),i["default"].createElement("div",{className:"md-spliter"}))},isDirty:function(){return this._isDirty||!1},getValue:function(){return this.state.content},_getToolBar:function(){return i["default"].createElement("ul",{className:"md-toolbar clearfix"},i["default"].createElement("li",{className:"tb-btn"},i["default"].createElement("a",{title:"加粗",onClick:this._boldText},i["default"].createElement("i",{className:"fa fa-bold"})))," ",i["default"].createElement("li",{className:"tb-btn"},i["default"].createElement("a",{title:"斜体",onClick:this._italicText},i["default"].createElement("i",{className:"fa fa-italic"})))," ",i["default"].createElement("li",{className:"tb-btn spliter"}),i["default"].createElement("li",{className:"tb-btn"},i["default"].createElement("a",{title:"链接",onClick:this._linkText},i["default"].createElement("i",{className:"fa fa-link"})))," ",i["default"].createElement("li",{className:"tb-btn"},i["default"].createElement("a",{title:"引用",onClick:this._blockquoteText},i["default"].createElement("i",{className:"fa fa-outdent"})))," ",i["default"].createElement("li",{className:"tb-btn"},i["default"].createElement("a",{title:"代码段",onClick:this._codeText},i["default"].createElement("i",{className:"fa fa-code"})))," ",i["default"].createElement("li",{className:"tb-btn"},i["default"].createElement("a",{title:"图片",onClick:this._pictureText},i["default"].createElement("i",{className:"fa fa-picture-o"})))," ",i["default"].createElement("li",{className:"tb-btn spliter"}),i["default"].createElement("li",{className:"tb-btn"},i["default"].createElement("a",{title:"有序列表",onClick:this._listOlText},i["default"].createElement("i",{className:"fa fa-list-ol"})))," ",i["default"].createElement("li",{className:"tb-btn"},i["default"].createElement("a",{title:"无序列表",onClick:this._listUlText},i["default"].createElement("i",{className:"fa fa-list-ul"})))," ",i["default"].createElement("li",{className:"tb-btn"},i["default"].createElement("a",{title:"标题",onClick:this._headerText},i["default"].createElement("i",{className:"fa fa-header"})))," ")},_getModeBar:function(){var e=this,t=function(t){return u["default"]({active:e.state.mode===t})};return i["default"].createElement("ul",{className:"md-modebar"},i["default"].createElement("li",{className:"tb-btn pull-right"},i["default"].createElement("a",{className:t("preview"),onClick:this._changeMode("preview"),title:"预览模式"},i["default"].createElement("i",{className:"fa fa-eye"})))," ",i["default"].createElement("li",{className:"tb-btn pull-right"},i["default"].createElement("a",{className:t("split"),onClick:this._changeMode("split"),title:"分屏模式"},i["default"].createElement("i",{className:"fa fa-columns"})))," ",i["default"].createElement("li",{className:"tb-btn pull-right"},i["default"].createElement("a",{className:t("edit"),onClick:this._changeMode("edit"),title:"编辑模式"},i["default"].createElement("i",{className:"fa fa-pencil"})))," ",i["default"].createElement("li",{className:"tb-btn spliter pull-right"}),i["default"].createElement("li",{className:"tb-btn pull-right"},i["default"].createElement("a",{title:"全屏模式",onClick:this._toggleFullScreen},i["default"].createElement("i",{className:"fa fa-arrows-alt"})))," ")},_onChange:function(e){var t=this;this._isDirty=!0,this._ltr&&clearTimeout(this._ltr),this._ltr=setTimeout(function(){t.setState({result:s["default"](t.textControl.value)})},300)},_changeMode:function(e){var t=this;return function(l){t.setState({mode:e})}},_toggleFullScreen:function(e){this.setState({isFullScreen:!this.state.isFullScreen})},_preInputText:function(e,t,l){var a=this.textControl.selectionStart,n=this.textControl.selectionEnd,i=this.textControl.value;if(a!==n){var r=i.slice(a,n);e=e.slice(0,t)+r+e.slice(l),l=t+r.length}this.textControl.value=i.slice(0,a)+e+i.slice(n),this.textControl.setSelectionRange(a+t,a+l),this.setState({result:s["default"](this.textControl.value)})},_boldText:function(){this._preInputText("**加粗文字**",2,6)},_italicText:function(){this._preInputText("_斜体文字_",1,5)},_linkText:function(){this._preInputText("[链接文本](www.yourlink.com)",1,5)},_blockquoteText:function(){this._preInputText("> 引用",2,4)},_codeText:function(){this._preInputText("```\ncode block\n```",4,14)},_pictureText:function(){this._preInputText("![alt](www.yourlink.com)",2,5)},_listUlText:function(){this._preInputText("- 无序列表项0\n- 无序列表项1",2,8)},_listOlText:function(){this._preInputText("1. 有序列表项0\n2. 有序列表项1",3,9)},_headerText:function(){this._preInputText("## 标题",3,5)}});t["default"]=o,e.exports=t["default"]},function(e,t,l){var a;/*! 2 | Copyright (c) 2015 Jed Watson. 3 | Licensed under the MIT License (MIT), see 4 | http://jedwatson.github.io/classnames 5 | */ 6 | !function(){"use strict";function n(){for(var e="",t=0;t 引用\", 2, 4);\n\t },\n\t _codeText: function _codeText() {\n\t this._preInputText(\"```\\ncode block\\n```\", 4, 14);\n\t },\n\t _pictureText: function _pictureText() {\n\t this._preInputText(\"![alt](www.yourlink.com)\", 2, 5);\n\t },\n\t _listUlText: function _listUlText() {\n\t this._preInputText(\"- 无序列表项0\\n- 无序列表项1\", 2, 8);\n\t },\n\t _listOlText: function _listOlText() {\n\t this._preInputText(\"1. 有序列表项0\\n2. 有序列表项1\", 3, 9);\n\t },\n\t _headerText: function _headerText() {\n\t this._preInputText(\"## 标题\", 3, 5);\n\t }\n\t});\n\t\n\texports['default'] = MdEditor;\n\tmodule.exports = exports['default'];\n\t/* style={{height: this.state.editorHeight + 'px'}} */ /* bold */ /* italic */ /* link */ /* blockquote */ /* code */ /* picture-o */ /* list-ol */ /* list-ul */ /* header */ /* preview mode */ /* split mode */ /* edit mode */ /* full-screen */\n\n/***/ },\n/* 4 */\n/***/ function(module, exports, __webpack_require__) {\n\n\tvar __WEBPACK_AMD_DEFINE_RESULT__;/*!\n\t Copyright (c) 2015 Jed Watson.\n\t Licensed under the MIT License (MIT), see\n\t http://jedwatson.github.io/classnames\n\t*/\n\t\n\t(function () {\n\t\t'use strict';\n\t\n\t\tfunction classNames () {\n\t\n\t\t\tvar classes = '';\n\t\n\t\t\tfor (var i = 0; i < arguments.length; i++) {\n\t\t\t\tvar arg = arguments[i];\n\t\t\t\tif (!arg) continue;\n\t\n\t\t\t\tvar argType = typeof arg;\n\t\n\t\t\t\tif ('string' === argType || 'number' === argType) {\n\t\t\t\t\tclasses += ' ' + arg;\n\t\n\t\t\t\t} else if (Array.isArray(arg)) {\n\t\t\t\t\tclasses += ' ' + classNames.apply(null, arg);\n\t\n\t\t\t\t} else if ('object' === argType) {\n\t\t\t\t\tfor (var key in arg) {\n\t\t\t\t\t\tif (arg.hasOwnProperty(key) && arg[key]) {\n\t\t\t\t\t\t\tclasses += ' ' + key;\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\n\t\t\treturn classes.substr(1);\n\t\t}\n\t\n\t\tif (typeof module !== 'undefined' && module.exports) {\n\t\t\tmodule.exports = classNames;\n\t\t} else if (true){\n\t\t\t// AMD. Register as an anonymous module.\n\t\t\t!(__WEBPACK_AMD_DEFINE_RESULT__ = function () {\n\t\t\t\treturn classNames;\n\t\t\t}.call(exports, __webpack_require__, exports, module), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__));\n\t\t} else {\n\t\t\twindow.classNames = classNames;\n\t\t}\n\t\n\t}());\n\n\n/***/ },\n/* 5 */\n/***/ function(module, exports) {\n\n\t// removed by extract-text-webpack-plugin\n\n/***/ },\n/* 6 */\n/***/ function(module, exports) {\n\n\t// removed by extract-text-webpack-plugin\n\n/***/ },\n/* 7 */\n/***/ function(module, exports) {\n\n\t// removed by extract-text-webpack-plugin\n\n/***/ }\n/******/ ]);\n\n\n/** WEBPACK FOOTER **\n ** react-markdown.min.js\n **/"," \t// The module cache\n \tvar installedModules = {};\n\n \t// The require function\n \tfunction __webpack_require__(moduleId) {\n\n \t\t// Check if module is in cache\n \t\tif(installedModules[moduleId])\n \t\t\treturn installedModules[moduleId].exports;\n\n \t\t// Create a new module (and put it into the cache)\n \t\tvar module = installedModules[moduleId] = {\n \t\t\texports: {},\n \t\t\tid: moduleId,\n \t\t\tloaded: false\n \t\t};\n\n \t\t// Execute the module function\n \t\tmodules[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n\n \t\t// Flag the module as loaded\n \t\tmodule.loaded = true;\n\n \t\t// Return the exports of the module\n \t\treturn module.exports;\n \t}\n\n\n \t// expose the modules object (__webpack_modules__)\n \t__webpack_require__.m = modules;\n\n \t// expose the module cache\n \t__webpack_require__.c = installedModules;\n\n \t// __webpack_public_path__\n \t__webpack_require__.p = \"\";\n\n \t// Load entry module and return exports\n \treturn __webpack_require__(0);\n\n\n\n/** WEBPACK FOOTER **\n ** webpack/bootstrap e71ae69ee792131c35d8\n **/","import React from 'react'\r\nimport marked from 'marked'\r\nimport Editor from './editor'\r\n\r\nimport './site.less'\r\n\r\nconst mount = document.getElementById('editor')\r\nReact.render(, mount)\r\n\r\n// async init highlight.js\r\nconst script = document.getElementById('hlscript')\r\nscript.onload = () => {\r\n window.hljs.initHighlightingOnLoad()\r\n}\r\n\n\n\n/** WEBPACK FOOTER **\n ** D:/github/react-markdown/src/browser.js\n **/","module.exports = React;\n\n\n/*****************\n ** WEBPACK FOOTER\n ** external \"React\"\n ** module id = 1\n ** module chunks = 0\n **/","module.exports = marked;\n\n\n/*****************\n ** WEBPACK FOOTER\n ** external \"marked\"\n ** module id = 2\n ** module chunks = 0\n **/","import React, { PropTypes as T } from 'react'\r\nimport marked from 'marked'\r\nimport cNames from 'classnames'\r\n\r\nimport './editor.less'\r\nimport './markdown.less'\r\n\r\nconst MdEditor = React.createClass({\r\n propTypes: {\r\n content: T.string\r\n },\r\n getInitialState () {\r\n return {\r\n panelClass: 'md-panel',\r\n mode: 'split',\r\n isFullScreen: false,\r\n result: marked(this.props.content || '')\r\n }\r\n },\r\n componentDidMount () {\r\n // cache dom node\r\n this.textControl = React.findDOMNode(this.refs.editor)\r\n this.previewControl = React.findDOMNode(this.refs.preview)\r\n },\r\n componentWillUnmount () {\r\n this.textControl = null\r\n this.previewControl = null\r\n },\r\n render () {\r\n const panelClass = cNames([ 'md-panel', { 'fullscreen': this.state.isFullScreen } ])\r\n const editorClass = cNames([ 'md-editor', { 'expand': this.state.mode === 'edit' } ])\r\n const previewClass = cNames([ 'md-preview', 'markdown', { 'expand': this.state.mode === 'preview', 'shrink': this.state.mode === 'edit' } ])\r\n\r\n return (\r\n
\r\n
\r\n {this._getModeBar()}\r\n {this._getToolBar()}\r\n
\r\n
\r\n {/* style={{height: this.state.editorHeight + 'px'}} */}\r\n
\r\n
\r\n
\r\n
\r\n )\r\n },\r\n // public methods\r\n isDirty () {\r\n return this._isDirty || false\r\n },\r\n getValue () {\r\n return this.state.content\r\n },\r\n // widgets constructors\r\n _getToolBar () {\r\n return (\r\n
    \r\n
    • {/* bold */}\r\n
    • {/* italic */}\r\n
  • \r\n
    • {/* link */}\r\n
    • {/* blockquote */}\r\n
    • {/* code */}\r\n
    • {/* picture-o */}\r\n
  • \r\n
    • {/* list-ol */}\r\n
    • {/* list-ul */}\r\n
    • {/* header */}\r\n
\r\n )\r\n },\r\n _getModeBar () {\r\n const checkActive = (mode) => cNames({ active: this.state.mode === mode })\r\n\r\n return (\r\n
    \r\n
  • \r\n \r\n \r\n \r\n
    • { /* preview mode */ }\r\n
  • \r\n \r\n \r\n \r\n
    • { /* split mode */ }\r\n
  • \r\n \r\n \r\n \r\n
    • { /* edit mode */ }\r\n
  • \r\n
    • {/* full-screen */}\r\n
\r\n )\r\n },\r\n // event handlers\r\n _onChange (e) {\r\n this._isDirty = true // set dirty\r\n if (this._ltr) clearTimeout(this._ltr)\r\n\r\n this._ltr = setTimeout(() => {\r\n this.setState({ result: marked(this.textControl.value) }) // change state\r\n }, 300)\r\n },\r\n _changeMode (mode) {\r\n return (e) => {\r\n this.setState({ mode })\r\n }\r\n },\r\n _toggleFullScreen (e) {\r\n this.setState({ isFullScreen: !this.state.isFullScreen })\r\n },\r\n // default text processors\r\n _preInputText (text, preStart, preEnd) {\r\n const start = this.textControl.selectionStart\r\n const end = this.textControl.selectionEnd\r\n const origin = this.textControl.value\r\n\r\n if (start !== end) {\r\n const exist = origin.slice(start, end)\r\n text = text.slice(0, preStart) + exist + text.slice(preEnd)\r\n preEnd = preStart + exist.length\r\n }\r\n this.textControl.value = origin.slice(0, start) + text + origin.slice(end)\r\n // pre-select\r\n this.textControl.setSelectionRange(start + preStart, start + preEnd)\r\n this.setState({ result: marked(this.textControl.value) }) // change state\r\n },\r\n _boldText () {\r\n this._preInputText(\"**加粗文字**\", 2, 6)\r\n },\r\n _italicText () {\r\n this._preInputText(\"_斜体文字_\", 1, 5)\r\n },\r\n _linkText () {\r\n this._preInputText(\"[链接文本](www.yourlink.com)\", 1, 5)\r\n },\r\n _blockquoteText () {\r\n this._preInputText(\"> 引用\", 2, 4)\r\n },\r\n _codeText () {\r\n this._preInputText(\"```\\ncode block\\n```\", 4, 14)\r\n },\r\n _pictureText () {\r\n this._preInputText(\"![alt](www.yourlink.com)\", 2, 5)\r\n },\r\n _listUlText () {\r\n this._preInputText(\"- 无序列表项0\\n- 无序列表项1\", 2, 8)\r\n },\r\n _listOlText () {\r\n this._preInputText(\"1. 有序列表项0\\n2. 有序列表项1\", 3, 9)\r\n },\r\n _headerText () {\r\n this._preInputText(\"## 标题\", 3, 5)\r\n }\r\n})\r\n\r\nexport default MdEditor\r\n\n\n\n/** WEBPACK FOOTER **\n ** D:/github/react-markdown/src/editor.jsx\n **/","/*!\n Copyright (c) 2015 Jed Watson.\n Licensed under the MIT License (MIT), see\n http://jedwatson.github.io/classnames\n*/\n\n(function () {\n\t'use strict';\n\n\tfunction classNames () {\n\n\t\tvar classes = '';\n\n\t\tfor (var i = 0; i < arguments.length; i++) {\n\t\t\tvar arg = arguments[i];\n\t\t\tif (!arg) continue;\n\n\t\t\tvar argType = typeof arg;\n\n\t\t\tif ('string' === argType || 'number' === argType) {\n\t\t\t\tclasses += ' ' + arg;\n\n\t\t\t} else if (Array.isArray(arg)) {\n\t\t\t\tclasses += ' ' + classNames.apply(null, arg);\n\n\t\t\t} else if ('object' === argType) {\n\t\t\t\tfor (var key in arg) {\n\t\t\t\t\tif (arg.hasOwnProperty(key) && arg[key]) {\n\t\t\t\t\t\tclasses += ' ' + key;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\treturn classes.substr(1);\n\t}\n\n\tif (typeof module !== 'undefined' && module.exports) {\n\t\tmodule.exports = classNames;\n\t} else if (typeof define === 'function' && typeof define.amd === 'object' && define.amd){\n\t\t// AMD. Register as an anonymous module.\n\t\tdefine(function () {\n\t\t\treturn classNames;\n\t\t});\n\t} else {\n\t\twindow.classNames = classNames;\n\t}\n\n}());\n\n\n\n/*****************\n ** WEBPACK FOOTER\n ** ./~/classnames/index.js\n ** module id = 4\n ** module chunks = 0\n **/"],"sourceRoot":""} -------------------------------------------------------------------------------- /lib/editor.jsx: -------------------------------------------------------------------------------- 1 | import React, { PropTypes as T } from 'react' 2 | import marked from 'marked' 3 | import cNames from 'classnames' 4 | 5 | import './editor.less' 6 | 7 | const MdEditor = React.createClass({ 8 | propTypes: { 9 | content: T.string, 10 | children: T.node 11 | }, 12 | getInitialState () { 13 | return { 14 | panelClass: 'md-panel', 15 | mode: 'split', 16 | isFullScreen: false, 17 | result: marked(this.props.content || '') 18 | } 19 | }, 20 | componentDidMount () { 21 | // cache dom node 22 | this.textControl = React.findDOMNode(this.refs.editor) 23 | this.previewControl = React.findDOMNode(this.refs.preview) 24 | }, 25 | componentWillUnmount () { 26 | this.textControl = null 27 | this.previewControl = null 28 | }, 29 | render () { 30 | const panelClass = cNames([ 'md-panel', { 'fullscreen': this.state.isFullScreen } ]) 31 | const editorClass = cNames([ 'md-editor', { 'expand': this.state.mode === 'edit' } ]) 32 | const previewClass = cNames([ 'md-preview', 'markdown', { 'expand': this.state.mode === 'preview', 'shrink': this.state.mode === 'edit' } ]) 33 | 34 | return ( 35 |
36 |
37 | {this._getModeBar()} 38 | {this._getToolBar()} 39 |
40 |
41 | {/* style={{height: this.state.editorHeight + 'px'}} */} 42 |
43 |
44 |
45 |
46 | ) 47 | }, 48 | // public methods 49 | isDirty () { 50 | return this._isDirty || false 51 | }, 52 | getValue () { 53 | return this.state.content 54 | }, 55 | // widgets constructors 56 | _getToolBar () { 57 | return ( 58 |
    59 |
    • {/* bold */} 60 |
    • {/* italic */} 61 |
  • 62 |
    • {/* link */} 63 |
    • {/* blockquote */} 64 |
    • {/* code */} 65 |
    • {/* picture-o */} 66 |
  • 67 |
    • {/* list-ol */} 68 |
    • {/* list-ul */} 69 |
    • {/* header */} 70 | {this._getExternalBtn()} 71 |
72 | ) 73 | }, 74 | _getExternalBtn () { 75 | return React.Children.map(this.props.children, (option) => { 76 | if (option.type === 'option') { 77 | return
  • {option.props.children}
    • 78 | } 79 | }) 80 | }, 81 | _getModeBar () { 82 | const checkActive = (mode) => cNames({ active: this.state.mode === mode }) 83 | 84 | return ( 85 |
      86 |
    • 87 | 88 | 89 | 90 |
      • { /* preview mode */ } 91 |
    • 92 | 93 | 94 | 95 |
      • { /* split mode */ } 96 |
    • 97 | 98 | 99 | 100 |
      • { /* edit mode */ } 101 |
    • 102 |
      • {/* full-screen */} 103 |
    104 | ) 105 | }, 106 | // event handlers 107 | _onChange (e) { 108 | this._isDirty = true // set dirty 109 | if (this._ltr) clearTimeout(this._ltr) 110 | 111 | this._ltr = setTimeout(() => { 112 | this.setState({ result: marked(this.textControl.value) }) // change state 113 | }, 300) 114 | }, 115 | _changeMode (mode) { 116 | return (e) => { 117 | this.setState({ mode }) 118 | } 119 | }, 120 | _toggleFullScreen (e) { 121 | this.setState({ isFullScreen: !this.state.isFullScreen }) 122 | }, 123 | // default text processors 124 | _preInputText (text, preStart, preEnd) { 125 | const start = this.textControl.selectionStart 126 | const end = this.textControl.selectionEnd 127 | const origin = this.textControl.value 128 | 129 | if (start !== end) { 130 | const exist = origin.slice(start, end) 131 | text = text.slice(0, preStart) + exist + text.slice(preEnd) 132 | preEnd = preStart + exist.length 133 | } 134 | this.textControl.value = origin.slice(0, start) + text + origin.slice(end) 135 | // pre-select 136 | this.textControl.setSelectionRange(start + preStart, start + preEnd) 137 | this.setState({ result: marked(this.textControl.value) }) // change state 138 | }, 139 | _boldText () { 140 | this._preInputText("**加粗文字**", 2, 6) 141 | }, 142 | _italicText () { 143 | this._preInputText("_斜体文字_", 1, 5) 144 | }, 145 | _linkText () { 146 | this._preInputText("[链接文本](www.yourlink.com)", 1, 5) 147 | }, 148 | _blockquoteText () { 149 | this._preInputText("> 引用", 2, 4) 150 | }, 151 | _codeText () { 152 | this._preInputText("```\ncode block\n```", 4, 14) 153 | }, 154 | _pictureText () { 155 | this._preInputText("![alt](www.yourlink.com)", 2, 5) 156 | }, 157 | _listUlText () { 158 | this._preInputText("- 无序列表项0\n- 无序列表项1", 2, 8) 159 | }, 160 | _listOlText () { 161 | this._preInputText("1. 有序列表项0\n2. 有序列表项1", 3, 9) 162 | }, 163 | _headerText () { 164 | this._preInputText("## 标题", 3, 5) 165 | } 166 | }) 167 | 168 | export default MdEditor 169 | -------------------------------------------------------------------------------- /lib/editor.less: -------------------------------------------------------------------------------- 1 | @contentLineHeight: 1.5; 2 | @toolbarHeight: 37px; 3 | @editorHeight: 540px; 4 | @borderColor: #ccc; 5 | @lightColor: #0081FF; 6 | 7 | .editor-title { 8 | font-size: 16px; 9 | } 10 | 11 | .md-editor textarea, 12 | .md-preview, 13 | .tag-input input { 14 | line-height: @contentLineHeight; 15 | } 16 | 17 | /* Style for Editor */ 18 | .md-panel { 19 | display: block; 20 | position: relative; 21 | margin-top: 40px; 22 | border: 1px solid #ccc; 23 | border-radius: 3px; 24 | font-size: 14px; 25 | overflow: hidden; 26 | 27 | &.fullscreen { 28 | position: absolute; 29 | top: 0; 30 | bottom: 0; 31 | left: 0; 32 | right: 0; 33 | margin: 0; 34 | z-index: 500; 35 | 36 | .md-editor { 37 | height: 100%; 38 | } 39 | } 40 | 41 | &.disabled { 42 | textarea { cursor: default; } 43 | .tb-btn a { 44 | cursor: default; 45 | 46 | &:hover { 47 | color: #aaa; 48 | background-color: #fff; 49 | } 50 | &:active { 51 | box-shadow: none; 52 | } 53 | } 54 | } 55 | } 56 | .md-menubar { 57 | position: absolute; 58 | top: 0; 59 | left: 0; 60 | width: 100%; 61 | height: @toolbarHeight; 62 | border-bottom: 1px solid #ccc; 63 | box-shadow: 0 0 1px #ccc; 64 | z-index: 10; 65 | background-color: #fff; 66 | } 67 | .md-toolbar, .md-modebar { 68 | margin: 0; 69 | } 70 | 71 | .md-toolbar { 72 | padding: 0 5px; 73 | background-color: #fff; 74 | } 75 | .md-modebar .tb-btn { float: right; } 76 | .tb-btn, .tb-func-btn { 77 | float: left; 78 | font-size: 14px; 79 | list-style: none; 80 | margin: 0 2px; 81 | 82 | &.spliter { 83 | border-left: 1px solid @borderColor; 84 | margin: 6px 2px; 85 | height: 24px; 86 | } 87 | 88 | a { 89 | display: inline-block; 90 | position: relative; 91 | width: 36px; 92 | height: 36px; 93 | text-align: center; 94 | padding: 9px 0; 95 | cursor: pointer; 96 | color: #aaa; 97 | 98 | &:hover, &.active { 99 | color: @lightColor; 100 | background-color: #eee; 101 | } 102 | &:active { 103 | box-shadow: inset 0 1px 5px rgba(0,0,0,0.2); 104 | } 105 | } 106 | 107 | input[type="file"] { 108 | display: none; 109 | } 110 | 111 | .badge { 112 | position: absolute; 113 | padding: 1px 5px; 114 | right: 0; 115 | bottom: 0; 116 | } 117 | } 118 | 119 | .md-editor { 120 | width: 50%; 121 | height: auto; 122 | transition: width .3s; 123 | background-color: #fff; 124 | 125 | &.expand { width: 100%; } 126 | 127 | textarea { 128 | display: block; 129 | border-style: none; 130 | resize: none; 131 | outline: 0; 132 | height: 100%; 133 | min-height: @editorHeight; 134 | width: 100%; 135 | // margin-top: ; 136 | padding: (@toolbarHeight + 10px) 15px 0 15px; 137 | } 138 | } 139 | .md-preview { 140 | position: absolute; 141 | width: 50%; 142 | height: 100%; 143 | left: 50%; 144 | top: 0; 145 | background-color: #f6f6f6; 146 | padding: 45px 20px 20px 20px; 147 | border-left: 1px solid @borderColor; 148 | overflow: auto; 149 | transition: left .3s, width .3s; 150 | 151 | &.expand { 152 | left: 0; 153 | width: 100%; 154 | border-left-style: none; 155 | } 156 | &.shrink { 157 | left: 100%; 158 | width: 0; 159 | } 160 | } 161 | .md-spliter { 162 | position: absolute; 163 | top: 0; 164 | left: 50%; 165 | height: @toolbarHeight; 166 | border-left: 1px solid #ccc; 167 | z-index: 105; 168 | } 169 | .md-btngroup { 170 | margin-top: 20px; 171 | 172 | .help-text { 173 | margin-left: 15px; 174 | } 175 | } 176 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-markdown", 3 | "version": "1.0.0", 4 | "description": "", 5 | "repository": { 6 | "github": "https://github.com/leozdgao/react-markdown.git" 7 | }, 8 | "scripts": { 9 | "publish": "webpack && webpack --config webpack.min.config.js -p", 10 | "dev": "node demo/server" 11 | }, 12 | "author": "leozdgao", 13 | "license": "MIT", 14 | "dependencies": { 15 | "classnames": "^2.1.3", 16 | "marked": "^0.3.3", 17 | "react": "^0.13.3" 18 | }, 19 | "devDependencies": { 20 | "autoprefixer-loader": "^2.0.0", 21 | "babel": "^5.8.23", 22 | "babel-core": "^5.4.7", 23 | "babel-eslint": "^4.1.0", 24 | "babel-loader": "^5.3.2", 25 | "css-loader": "^0.16.0", 26 | "eslint": "^1.3.1", 27 | "eslint-plugin-react": "^3.3.0", 28 | "extract-text-webpack-plugin": "^0.8.2", 29 | "less": "^2.5.1", 30 | "less-loader": "^2.2.0", 31 | "node-libs-browser": "^0.5.2", 32 | "react-hot-loader": "^1.3.0", 33 | "style-loader": "^0.12.3", 34 | "webpack": "^1.9.10", 35 | "webpack-dev-server": "^1.10.1", 36 | "yargs": "^3.23.0" 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | require("babel-core/register") 2 | 3 | module.exports = require('./webpack/webpack') 4 | -------------------------------------------------------------------------------- /webpack.dev.config.js: -------------------------------------------------------------------------------- 1 | require("babel-core/register") 2 | 3 | module.exports = require('./webpack/webpack.dev') 4 | -------------------------------------------------------------------------------- /webpack.min.config.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable */ 2 | require("babel-core/register") 3 | 4 | var webpackConfig = require('./webpack/webpack') 5 | webpackConfig.output.filename = 'react-markdown.min.js' 6 | 7 | module.exports =webpackConfig 8 | -------------------------------------------------------------------------------- /webpack/baseConfig.js: -------------------------------------------------------------------------------- 1 | import fs from 'fs' 2 | import path from 'path' 3 | import webpack from 'webpack' 4 | import yargs from 'yargs' 5 | 6 | // create babel cache directory 7 | const babelCache = path.resolve(path.join(__dirname, '../.babel-cache')) 8 | if (!fs.existsSync(babelCache)) { 9 | try { 10 | fs.mkdirSync(babelCache) 11 | } catch (err) { 12 | if (err.code !== 'EEXIST') { 13 | console.error(err.stack) 14 | } 15 | } 16 | } 17 | 18 | // app entry file 19 | export const entryPoint = './demo/browser.js' 20 | 21 | // concat js loader 22 | export const jsLoader = `babel-loader?cacheDirectory=${babelCache}` 23 | export const autoprefixerLoader = `autoprefixer-loader?browsers=last 2 versions` 24 | export const cssLoader = `css-loader?sourceMap${autoprefixerLoader}` 25 | 26 | // options 27 | export const options = yargs 28 | .alias('p', 'optimize-minimize') // production mode 29 | .alias('d', 'debug') // development mode 30 | .option('port', { 31 | default: '8080', 32 | type: 'string' 33 | }) 34 | .argv 35 | 36 | export const externals = { 37 | 'react': 'React', 38 | 'marked': 'marked', 39 | } 40 | -------------------------------------------------------------------------------- /webpack/webpack.dev.js: -------------------------------------------------------------------------------- 1 | import path from 'path' 2 | import webpack from 'webpack' 3 | import { entryPoint, jsLoader, autoprefixerLoader } from './baseConfig' 4 | import config from '../config' 5 | 6 | const webpackDevServerAddress = `http://localhost:${config.webpackDevPort}` 7 | const cssLoaderForDev = `style-loader!css-loader!${autoprefixerLoader}` 8 | 9 | // Development version doesn't need external react and ExtractTextPlugin 10 | export default { 11 | devtool: 'eval', 12 | entry: [ 13 | `webpack-dev-server/client?${webpackDevServerAddress}`, 14 | 'webpack/hot/only-dev-server', 15 | entryPoint 16 | ], 17 | output: { 18 | path: process.env['PUBLISHPATH'] || config.publishPath, 19 | filename: 'bundle.js', 20 | publicPath: `${webpackDevServerAddress}/assets/` 21 | }, 22 | plugins: [ 23 | new webpack.HotModuleReplacementPlugin(), 24 | new webpack.NoErrorsPlugin(), 25 | new webpack.DefinePlugin({ 26 | 'process.env': { 27 | 'NODE_ENV': '"development"' 28 | } 29 | }) 30 | ], 31 | resolve: { 32 | extensions: [ '', '.js', '.jsx' ] 33 | }, 34 | module: { 35 | loaders: [ 36 | { test: /\.jsx?$/, loader: `react-hot-loader!${jsLoader}`, exclude: /node_modules/ }, 37 | { test: /\.css$/, loader: cssLoaderForDev }, 38 | { test: /\.less$/, loader: `${cssLoaderForDev}!less-loader` } 39 | ] 40 | } 41 | } 42 | -------------------------------------------------------------------------------- /webpack/webpack.js: -------------------------------------------------------------------------------- 1 | import webpack from 'webpack' 2 | import ExtractTextPlugin from 'extract-text-webpack-plugin' 3 | import { options, jsLoader, cssLoader, entryPoint, externals } from './baseConfig' 4 | import config from '../config' 5 | 6 | export default { 7 | devtool: 'source-map', 8 | entry: entryPoint, 9 | externals, 10 | output: { 11 | path: process.env['PUBLISHPATH'] || config.publishPath, 12 | filename: 'react-markdown.js' 13 | }, 14 | plugins: [ 15 | new ExtractTextPlugin('react-markdown.css'), 16 | new webpack.DefinePlugin({ 17 | 'process.env': { 18 | 'NODE_ENV': '"production"' 19 | } 20 | }) 21 | ], 22 | resolve: { 23 | extensions: [ '', '.js', '.jsx' ] 24 | }, 25 | module: { 26 | loaders: [ 27 | { test: /\.jsx?$/, loader: jsLoader, exclude: /node_modules/ }, 28 | { test: /\.css$/, loader: ExtractTextPlugin.extract('style', cssLoader) }, 29 | { test: /\.less$/, loader: ExtractTextPlugin.extract('style', `${cssLoader}!less-loader`) } 30 | ] 31 | } 32 | } 33 | --------------------------------------------------------------------------------