Update demo to React 16

remarkjs · Oct 5, 2018 · a6aeba5 · a6aeba5
1 parent b6caaba
commit a6aeba5
Show file tree

Hide file tree

Showing 5 changed files with 2,290 additions and 132 deletions.
diff --git a/demo/dist/index.html b/demo/dist/index.html
@@ -1,31 +1,35 @@
 <!DOCTYPE html>
 <html>
+
 <head>
-    <meta charset="utf-8" />
-    <title>react-markdown</title>
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/0.6.0/pure-min.css" />
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.25.2/codemirror.min.css" />
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.25.2/theme/monokai.min.css" />
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.11.0/styles/github.min.css" />
-    <link rel="stylesheet" href="css/demo.css" />
-    <meta name="viewport" content="width=device-width, user-scalable=no" />
+  <meta charset="utf-8" />
+  <title>react-markdown</title>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/0.6.0/pure-min.css" />
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.25.2/codemirror.min.css" />
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.25.2/theme/monokai.min.css" />
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.11.0/styles/github.min.css" />
+  <link rel="stylesheet" href="css/demo.css" />
+  <meta name="viewport" content="width=device-width, user-scalable=no" />
 </head>
+
 <body>
 
-    <a href="https://github.com/rexxars/react-markdown" class="fork-ribbon"><img style="z-index: 5001; position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/365986a132ccd6a44c23a9169022c0b5c890c387/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f7265645f6161303030302e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png"></a>
+  <a href="https://github.com/rexxars/react-markdown" class="fork-ribbon"><img style="z-index: 5001; position: absolute; top: 0; right: 0; border: 0;"
+      src="https://camo.githubusercontent.com/365986a132ccd6a44c23a9169022c0b5c890c387/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f7265645f6161303030302e706e67"
+      alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png"></a>
 
-    <div class="container">
-        <h1 class="page-header">react-markdown</h1>
-        <main id="main"></main>
-    </div>
+  <div class="container">
+    <h1 class="page-header">react-markdown</h1>
+    <main id="main"></main>
+  </div>
 
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.5.4/react.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.5.4/react-dom.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.11.0/highlight.min.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.25.2/codemirror.min.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.25.2/mode/markdown/markdown.min.js"></script>
-    <script src="js/codemirror.js"></script>
-    <script src="js/demo.js"></script>
+  <script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
+  <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.11.0/highlight.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.25.2/codemirror.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.25.2/mode/markdown/markdown.min.js"></script>
+  <script src="js/demo.js"></script>
 
 </body>
+
 </html>
diff --git a/demo/dist/js/codemirror.js b/demo/dist/js/codemirror.js
diff --git a/demo/dist/js/demo.js b/demo/dist/js/demo.js
diff --git a/demo/src/codemirror.js b/demo/src/codemirror.js
@@ -0,0 +1,89 @@
+const React = require('react')
+const CodeMirror = window.CodeMirror
+
+// adapted from:
+// https://github.com/facebook/react/blob/master/docs/_js/live_editor.js#L16
+
+// also used as an example:
+// https://github.com/facebook/react/blob/master/src/browser/ui/dom/components/ReactDOMInput.js
+
+const IS_MOBILE = typeof navigator === 'undefined' || (
+  navigator.userAgent.match(/Android/i)
+    || navigator.userAgent.match(/webOS/i)
+    || navigator.userAgent.match(/iPhone/i)
+    || navigator.userAgent.match(/iPad/i)
+    || navigator.userAgent.match(/iPod/i)
+    || navigator.userAgent.match(/BlackBerry/i)
+    || navigator.userAgent.match(/Windows Phone/i)
+)
+
+class CodeMirrorEditor extends React.Component {
+  constructor(props) {
+    super(props)
+    this.state = {isControlled: Boolean(this.props.value)}
+    this.handleChange = this.handleChange.bind(this)
+    this.editorRef = React.createRef()
+  }
+
+  componentDidMount() {
+    const isTextArea = this.props.forceTextArea || IS_MOBILE;
+    if (!isTextArea) {
+      this.editor = CodeMirror.fromTextArea(this.editorRef.current, this.props);
+      this.editor.on('change', this.handleChange);
+    }
+  }
+
+  componentDidUpdate() {
+    if (!this.editor) {
+      return
+    }
+
+    if (this.props.value) {
+      if (this.editor.getValue() !== this.props.value) {
+        this.editor.setValue(this.props.value);
+      }
+    }
+  }
+
+  handleChange() {
+    if (!this.editor) {
+      return
+    }
+
+    const value = this.editor.getValue()
+    if (value === this.props.value) {
+      return
+    }
+
+    if (this.props.onChange) {
+      this.props.onChange({target: {value: value}})
+    }
+
+    if (this.editor.getValue() !== this.props.value) {
+      if (this.state.isControlled) {
+        this.editor.setValue(this.props.value)
+      } else {
+        this.props.value = value
+      }
+    }
+  }
+
+  render() {
+    const editor = React.createElement('textarea', {
+      ref: this.editorRef,
+      value: this.props.value,
+      readOnly: this.props.readOnly,
+      defaultValue: this.props.defaultValue,
+      onChange: this.props.onChange,
+      style: this.props.textAreaStyle,
+      className: this.props.textAreaClassName || this.props.textAreaClass
+    })
+
+    return React.createElement('div', {
+      style: this.props.style,
+      className: this.props.className
+    }, editor);
+  }
+}
+
+module.exports = CodeMirrorEditor
diff --git a/demo/src/editor.js b/demo/src/editor.js
@@ -1,6 +1,6 @@
 const React = require('react')
-const CodeMirror = window.CodeMirrorEditor
 const PropTypes = require('prop-types')
+const CodeMirror = require('./codemirror')
 
 function Editor(props) {
   return (