creat CommentEditor.js (copy Editor.js)

resource/js/components/PageComment/CommentEditor.js

@@ -0,0 +1,274 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import AbstractEditor from '../PageEditor/AbstractEditor';
+// import CodeMirrorEditor from './CodeMirrorEditor';
+// import TextAreaEditor from './TextAreaEditor';
+
+// import Dropzone from 'react-dropzone';
+
+// import pasteHelper from './PasteHelper';
+
+export default class CommentEditor extends AbstractEditor {
+
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      // dropzoneActive: false,
+      // isUploading: false,
+    };
+
+    // this.getEditorSubstance = this.getEditorSubstance.bind(this);
+
+    // this.pasteFilesHandler = this.pasteFilesHandler.bind(this);
+
+    // this.dragEnterHandler = this.dragEnterHandler.bind(this);
+    // this.dragLeaveHandler = this.dragLeaveHandler.bind(this);
+    // this.dropHandler = this.dropHandler.bind(this);
+
+    // this.getDropzoneAccept = this.getDropzoneAccept.bind(this);
+    // this.getDropzoneClassName = this.getDropzoneClassName.bind(this);
+    // this.renderDropzoneOverlay = this.renderDropzoneOverlay.bind(this);
+  }
+
+  // componentDidMount() {
+  //   // initialize caret line
+  //   this.setCaretLine(0);
+  // }
+
+  // getEditorSubstance() {
+  //   return this.props.isMobile
+  //     ? this.refs.taEditor
+  //     : this.refs.cmEditor;
+  // }
+
+  // /**
+  //  * @inheritDoc
+  //  */
+  // forceToFocus() {
+  //   this.getEditorSubstance().forceToFocus();
+  // }
+
+  // /**
+  //  * @inheritDoc
+  //  */
+  // setCaretLine(line) {
+  //   this.getEditorSubstance().setCaretLine(line);
+  // }
+
+  // /**
+  //  * @inheritDoc
+  //  */
+  // setScrollTopByLine(line) {
+  //   this.getEditorSubstance().setScrollTopByLine(line);
+  // }
+
+  // /**
+  //  * @inheritDoc
+  //  */
+  // insertText(text) {
+  //   this.getEditorSubstance().insertText(text);
+  // }
+
+  // /**
+  //  * remove overlay and set isUploading to false
+  //  */
+  // terminateUploadingState() {
+  //   this.setState({
+  //     dropzoneActive: false,
+  //     isUploading: false,
+  //   });
+  // }
+
+  // /**
+  //  * dispatch onUpload event
+  //  */
+  // dispatchUpload(files) {
+  //   if (this.props.onUpload != null) {
+  //     this.props.onUpload(files);
+  //   }
+  // }
+
+  // pasteFilesHandler(event) {
+  //   const dropzone = this.refs.dropzone;
+  //   const items = event.clipboardData.items || event.clipboardData.files || [];
+
+  //   // abort if length is not 1
+  //   if (items.length != 1) {
+  //     return;
+  //   }
+
+  //   const file = items[0].getAsFile();
+  //   // check type and size
+  //   if (pasteHelper.fileAccepted(file, dropzone.props.accept) &&
+  //       pasteHelper.fileMatchSize(file, dropzone.props.maxSize, dropzone.props.minSize)) {
+
+  //     this.dispatchUpload(file);
+  //     this.setState({ isUploading: true });
+  //   }
+  // }
+
+  // dragEnterHandler(event) {
+  //   const dataTransfer = event.dataTransfer;
+
+  //   // do nothing if contents is not files
+  //   if (!dataTransfer.types.includes('Files')) {
+  //     return;
+  //   }
+
+  //   this.setState({ dropzoneActive: true });
+  // }
+
+  // dragLeaveHandler() {
+  //   this.setState({ dropzoneActive: false });
+  // }
+
+  // dropHandler(accepted, rejected) {
+  //   // rejected
+  //   if (accepted.length != 1) { // length should be 0 or 1 because `multiple={false}` is set
+  //     this.setState({ dropzoneActive: false });
+  //     return;
+  //   }
+
+  //   const file = accepted[0];
+  //   this.dispatchUpload(file);
+  //   this.setState({ isUploading: true });
+  // }
+
+  // getDropzoneAccept() {
+  //   let accept = 'null';    // reject all
+  //   if (this.props.isUploadable) {
+  //     if (!this.props.isUploadableFile) {
+  //       accept = 'image/*'; // image only
+  //     }
+  //     else {
+  //       accept = '';        // allow all
+  //     }
+  //   }
+
+  //   return accept;
+  // }
+
+  // getDropzoneClassName() {
+  //   let className = 'dropzone';
+  //   if (!this.props.isUploadable) {
+  //     className += ' dropzone-unuploadable';
+  //   }
+  //   else {
+  //     className += ' dropzone-uploadable';
+
+  //     if (this.props.isUploadableFile) {
+  //       className += ' dropzone-uploadablefile';
+  //     }
+  //   }
+
+  //   // uploading
+  //   if (this.state.isUploading) {
+  //     className += ' dropzone-uploading';
+  //   }
+
+  //   return className;
+  // }
+
+  // getOverlayStyle() {
+  //   return {
+  //     position: 'absolute',
+  //     zIndex: 4,  // forward than .CodeMirror-gutters
+  //     top: 0,
+  //     right: 0,
+  //     bottom: 0,
+  //     left: 0,
+  //   };
+  // }
+
+  // renderDropzoneOverlay() {
+  //   const overlayStyle = this.getOverlayStyle();
+
+  //   return (
+  //     <div style={overlayStyle} className="overlay">
+  //       {this.state.isUploading &&
+  //         <span className="overlay-content">
+  //           <div className="speeding-wheel d-inline-block"></div>
+  //           <span className="sr-only">Uploading...</span>
+  //         </span>
+  //       }
+  //       {!this.state.isUploading && <span className="overlay-content"></span>}
+  //     </div>
+  //   );
+  // }
+
+  render() {
+    // const flexContainer = {
+    //   height: '100%',
+    //   display: 'flex',
+    //   flexDirection: 'column',
+    // };
+
+    // const isMobile = this.props.isMobile;
+
+    return <React.Fragment>
+      <div>
+      {/* <div style={flexContainer}> */}
+        {/* <Dropzone
+            ref="dropzone"
+            disableClick
+            disablePreview={true}
+            accept={this.getDropzoneAccept()}
+            className={this.getDropzoneClassName()}
+            acceptClassName="dropzone-accepted"
+            rejectClassName="dropzone-rejected"
+            multiple={false}
+            onDragLeave={this.dragLeaveHandler}
+            onDrop={this.dropHandler}
+          > */}
+
+          {/* { this.state.dropzoneActive && this.renderDropzoneOverlay() } */}
+
+          {/* for PC */}
+          {/* { !isMobile &&
+            <CodeMirrorEditor
+              ref="cmEditor"
+              onPasteFiles={this.pasteFilesHandler}
+              onDragEnter={this.dragEnterHandler}
+              {...this.props}
+            />
+          } */}
+
+          {/* for mobile */}
+          {/* { isMobile &&
+            <TextAreaEditor
+              ref="taEditor"
+              onPasteFiles={this.pasteFilesHandler}
+              onDragEnter={this.dragEnterHandler}
+              {...this.props}
+            />
+          } */}
+
+        {/* </Dropzone> */}
+
+        {/* <button type="button" className="btn btn-default btn-block btn-open-dropzone"
+          onClick={() => {this.refs.dropzone.open()}}>
+
+          <i className="icon-paper-clip" aria-hidden="true"></i>&nbsp;
+          Attach files by dragging &amp; dropping,&nbsp;
+          <span className="btn-link">selecting them</span>,&nbsp;
+          or pasting from the clipboard.
+        </button> */}
+
+      </div>
+
+    </React.Fragment>;
+  }
+
+}
+
+CommentEditor.propTypes = Object.assign({
+  // isMobile: PropTypes.bool,
+  // isUploadable: PropTypes.bool,
+  // isUploadableFile: PropTypes.bool,
+  // emojiStrategy: PropTypes.object,
+  // onChange: PropTypes.func,
+  // onUpload: PropTypes.func,
+}, AbstractEditor.propTypes);
+

resource/js/components/PageComment/CommentForm.js

@@ -2,6 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import ReactUtils from '../ReactUtils';
 
+import CommentEditor from '../PageComment/CommentEditor';
 import CommentPreview from '../PageComment/CommentPreview';
 
 import Button from 'react-bootstrap/es/Button';
@@ -144,8 +145,22 @@ export default class CommentForm extends React.Component {
                 <div className="comment-write">
                   <Tabs activeKey={this.state.key} id="comment-form-tabs" onSelect={this.handleSelect} animation={false}>
                     <Tab eventKey={1} title="Write">
-                      <textarea className="comment-form-comment form-control" id="comment-form-comment" name="comment" required placeholder="Write comments here..." value={this.state.comment} onChange={this.updateState} >
-                      </textarea>
+                      {/* <textarea className="comment-form-comment form-control" id="comment-form-comment" name="comment" required placeholder="Write comments here..." value={this.state.comment} onChange={this.updateState} >
+                      </textarea> */}
+                      <CommentEditor
+                      // ref="editor"
+                      // value={this.state.markdown}
+                      // editorOptions={this.state.editorOptions}
+                      // isMobile={this.props.crowi.isMobile}
+                      // isUploadable={this.state.isUploadable}
+                      // isUploadableFile={this.state.isUploadableFile}
+                      // emojiStrategy={emojiStrategy}
+                      // onScroll={this.onEditorScroll}
+                      // onScrollCursorIntoView={this.onEditorScrollCursorIntoView}
+                      // onChange={this.onMarkdownChanged}
+                      // onSave={this.onSave}
+                      // onUpload={this.onUpload}
+                      />
                     </Tab>
                     { this.state.isMarkdown == true &&
                     <Tab eventKey={2} title="Preview">