tanshio · January 31, 2017 07:26 · Jan 31, 2017 · Jan 31, 2017 · Jan 31, 2017 · Jan 31, 2017
diff --git a/Editor.js b/Editor.js
@@ -21,7 +21,6 @@ const postContent = (content,md)=>{
   });
 }
 
-
 marked.setOptions({
   renderer: new marked.Renderer(),
   gfm: true,
@@ -66,9 +65,7 @@ class EditorOutput extends React.Component {
     return(
       <div dangerouslySetInnerHTML={{__html: html}} />
     );
-
   }
-
 }
 
 class Editor extends React.Component {
@@ -87,7 +84,6 @@ class Editor extends React.Component {
     this.setState({content: marked(str)});
   }
 
-
   render() {
       return(
         <div className='c-editor'>

diff --git a/main.js b/main.js
@@ -4,14 +4,12 @@ import ReactDOM from 'react-dom';
 import axios from 'axios';
 
 // import commonmark from 'commonmark'
-
 import marked from 'marked';
-
 import Editor from './Editor.js';
 
 if(document.querySelector('.js-container')) {
   ReactDOM.render(
     <Editor />,
     document.querySelector('.js-container')
   );
-}
+}
diff --git a/Editor.js b/Editor.js
@@ -6,7 +6,7 @@ import marked from 'marked';
 const postContent = (content,md)=>{
   axios({
     method: "patch",
-    url:`http://localhost:3000/api/v1/${window.MDconfig.url}/${window.MDconfig.id}`,
+    url:`/api/v1/${window.MDconfig.url}/${window.MDconfig.id}`,
     withCredentials: true,
     data:{
       content: content,

diff --git a/Editor.js b/Editor.js
@@ -0,0 +1,102 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import axios from 'axios';
+import marked from 'marked';
+
+const postContent = (content,md)=>{
+  axios({
+    method: "patch",
+    url:`http://localhost:3000/api/v1/${window.MDconfig.url}/${window.MDconfig.id}`,
+    withCredentials: true,
+    data:{
+      content: content,
+      md: md
+    }
+  })
+  .then(function (response) {
+    console.log(response);
+  })
+  .catch(function (error) {
+    console.log(error);
+  });
+}
+
+
+marked.setOptions({
+  renderer: new marked.Renderer(),
+  gfm: true,
+  tables: true,
+  breaks: false,
+  pedantic: false,
+  sanitize: false,
+  smartLists: true,
+  smartypants: false
+});
+
+class EditorArea extends React.Component {
+  handleChange(e) {
+    console.log(this.props)
+    this.props.onStateChange(e.target.value)
+    console.log(this.props.md)
+  }
+  render() {
+    return(
+      <textarea value={this.props.data} onChange={e => this.handleChange(e)}></textarea>
+    )
+  }
+}
+
+class EditorButton extends React.Component {
+  onClick(content,md) {
+    postContent(content,md)
+    console.log(content)
+  }
+  render() {
+      return(
+        <button onClick={(e)=>this.onClick(this.props.content,this.props.md)}>投稿ボタン</button>
+      );
+    }
+
+}
+
+class EditorOutput extends React.Component {
+  render(){
+    let html = marked(this.props.data)
+    console.log(html)
+    return(
+      <div dangerouslySetInnerHTML={{__html: html}} />
+    );
+
+  }
+
+}
+
+class Editor extends React.Component {
+
+  constructor(props) {
+    super(props);
+    console.log(props);
+    this.state = {
+      content: marked(window.sensayConfig.md),
+      md:window.sensayConfig.md
+    };
+  }
+
+  stateChange(str){
+    this.setState({md: str});
+    this.setState({content: marked(str)});
+  }
+
+
+  render() {
+      return(
+        <div className='c-editor'>
+          <EditorArea onStateChange={e => this.stateChange(e)} data={this.state.md} />
+          <EditorButton content={this.state.content} md={this.state.md} />
+          <EditorOutput data={this.state.content} />
+        </div>
+      );
+    }
+}
+
+export default Editor
diff --git a/main.js b/main.js
@@ -0,0 +1,17 @@
+import "babel-polyfill";
+import React from 'react';
+import ReactDOM from 'react-dom';
+import axios from 'axios';
+
+// import commonmark from 'commonmark'
+
+import marked from 'marked';
+
+import Editor from './Editor.js';
+
+if(document.querySelector('.js-container')) {
+  ReactDOM.render(
+    <Editor />,
+    document.querySelector('.js-container')
+  );
+}
diff --git a/show.html.slim b/show.html.slim
@@ -0,0 +1,8 @@
+  - if current_user and current_user.has_role? :admin
+    p 君は管理者！
+    style.
+      | .c-editor button {position: fixed;bottom: 0px;left: 0;color: #fff;background: #5ac3da;padding: 13px;width: 20vw;}
+      | .c-editor textarea {position: fixed;width: 20vw;height: calc(100vh - 50px);top: 0;left: 0;background: #fff;z-index: 999;border-right: 5px solid #ccc;border-bottom: 5px solid #ccc;}
+    script.
+      | window.MDconfig = {id: #{@controller.id} ,url: 'controller',md:`#{@controller.md}`}
+    = javascript_pack_tag 'editor', 'data-turbolinks-track': 'reload'
No results found