WIP: render preview and input to hidden input for submitting to save

lib/views/_form.html

@@ -14,11 +14,11 @@
 </div>
 {% endif %}
 <div id="form-box" class="row">
-  <form action="/_/edit" id="page-form" method="post" class="col-md-6 {% if isUploadable() %}uploadable{% endif %} page-form">
+  <form action="/_/edit" id="page-form" method="post" class="{% if isUploadable() %}uploadable{% endif %} page-form">
 
-    <div id="page-editor"></div>
-    <textarea name="pageForm[body]" class="form-control" id="form-body">{% if pageForm.body %}{{ pageForm.body }}{% elseif not page.revision.body %}# {{ path|path2name }}{% else %}{{ page.revision.body }}{% endif %}</textarea>
+    <div id="page-editor">{% if pageForm.body %}{{ pageForm.body }}{% endif %}</div>
 
+    <input type="hidden" id="form-body" name="pageForm[body]" value="{% if pageForm.body %}{{ pageForm.body }}{% endif %}">
     <input type="hidden" name="pageForm[path]" value="{{ path }}">
     <input type="hidden" name="pageForm[currentRevision]" value="{{ pageForm.currentRevision|default(page.revision._id.toString()) }}">
     <div class="form-submit-group form-group form-inline">
@@ -61,10 +61,6 @@
       </div>
     </div>
   </form>
-  <div class="col-md-6 hidden-sm hidden-xs">
-    <div id="preview-body" class="wiki preview-body">
-    </div>
-  </div>
   <div class="file-module hidden">
   </div>
 </div>

resource/js/app.js

@@ -65,7 +65,7 @@ if (isEnabledPlugins) {
 const componentMappings = {
   'search-top': <HeaderSearchBox crowi={crowi} />,
   'search-page': <SearchPage crowi={crowi} />,
-  'page-editor': <PageEditor crowi={crowi} />,
+  'page-editor': <PageEditor crowi={crowi} markdown={pageContent} />,
   'page-list-search': <PageListSearch crowi={crowi} />,
   'page-comments-list': <PageComments pageId={pageId} revisionId={pageRevisionId} revisionCreatedAt= {pageRevisionCreatedAt} crowi={crowi} />,
   'page-attachment': <PageAttachment pageId={pageId} pageContent={pageContent} crowi={crowi} />,

resource/js/components/PageEditor.js

@@ -10,9 +10,10 @@ export default class PageEditor extends React.Component {
     super(props);
 
     this.state = {
-      markdown: '',
-      html: '',
+      markdown: this.props.markdown,
     };
+    // initial preview
+    this.renderPreview();
 
     this.onMarkdownChanged = this.onMarkdownChanged.bind(this);
   }
@@ -60,6 +61,9 @@ export default class PageEditor extends React.Component {
       .then(() => crowi.interceptorManager.process('preRenderPreviewHtml', context))
       .then(() => {
         this.setState({html: context.parsedHTML});
+
+        // set html to the hidden input (for submitting to save)
+        $('#form-body').val(this.state.markdown);
       })
       // process interceptors for post rendering
       .then(() => crowi.interceptorManager.process('postRenderPreviewHtml', context));
@@ -69,8 +73,12 @@ export default class PageEditor extends React.Component {
   render() {
     return (
       <div>
-        <Editor value={this.state.markdown} onChange={this.onMarkdownChanged} />
-        <Preview html={this.state.html} inputRef={el => this.previewElement = el} />
+        <div className="col-md-6">
+          <Editor value={this.state.markdown} onChange={this.onMarkdownChanged} />
+        </div>
+        <div className="col-md-6 hidden-sm hidden-xs">
+          <Preview html={this.state.html} inputRef={el => this.previewElement = el} />
+        </div>
       </div>
     )
   }
@@ -78,4 +86,5 @@ export default class PageEditor extends React.Component {
 
 PageEditor.propTypes = {
   crowi: PropTypes.object.isRequired,
+  markdown: PropTypes.string,
 };