WIP: impl initCaretPosition

resource/js/app.js

@@ -126,3 +126,5 @@ if (customScriptEditorElem != null) {
 $('a[data-toggle="tab"][href="#revision-history"]').on('show.bs.tab', function() {
   ReactDOM.render(<PageHistory pageId={pageId} crowi={crowi} />, document.getElementById('revision-history'));
 });
+
+crowi.componentInstances = componentInstances;

resource/js/components/PageEditor.js

@@ -15,9 +15,19 @@ export default class PageEditor extends React.Component {
     // initial preview
     this.renderPreview();
 
+    this.initCaretPosition = this.initCaretPosition.bind(this);
     this.onMarkdownChanged = this.onMarkdownChanged.bind(this);
   }
 
+  /**
+   * initialize caret position of editor
+   * @param {string} value
+   */
+  initCaretPosition(position) {
+    console.log(this.refs.editor);
+    this.refs.editor.initCaretPosition(position);
+  }
+
   /**
    * the change event handler for `markdown` state
    * @param {string} value
@@ -76,7 +86,7 @@ export default class PageEditor extends React.Component {
     return (
       <div className="row">
         <div className="col-md-6 col-sm-12 page-editor-editor-container">
-          <Editor value={this.state.markdown} onChange={this.onMarkdownChanged} />
+          <Editor ref="editor" value={this.state.markdown} onChange={this.onMarkdownChanged} />
         </div>
         <div className="col-md-6 hidden-sm hidden-xs page-editor-preview-container">
           <Preview html={this.state.html} inputRef={el => this.previewElement = el} />

resource/js/components/PageEditor/Editor.js

@@ -24,13 +24,32 @@ export default class Editor extends React.Component {
     this.state = {
       value: this.props.value,
     };
+
+    this.getCodeMirror = this.getCodeMirror.bind(this);
+    // this.initCaretPosition = this.initCaretPosition.bind(this);
+  }
+
+  getCodeMirror() {
+    return this.refs.cm.editor;
+  }
+
+  /**
+   * initialize caret position of codemirror
+   * @param {string} value
+   */
+  initCaretPosition(position) {
+    const editor = this.getCodeMirror();
+    console.log(editor);
+    // editor.setCursor(0, position);
+    editor.focus();
+    editor.setCursor(3, 3);
   }
 
   render() {
     return (
       <CodeMirror
+        ref="cm"
         value={this.state.value}
-        autoFocus={true}
         options={{
           mode: 'gfm',
           theme: 'eclipse',

resource/js/legacy/crowi-form.js

@@ -68,22 +68,17 @@
    *  that is set in Crowi.setScrollPositionToFormBody
    */
   function initCaretPosition() {
-    const textarea = document.querySelector('#form-body');
-    const position = textarea.getAttribute('data-caret-position');
-
-    if (position !== null) {
-      // focus
-      textarea.blur();
-      textarea.focus();
-      // scroll to the bottom for a moment
-      textarea.scrollTop = textarea.scrollHeight;
-      // set caret to the target position
-      textarea.selectionStart = position;
-      textarea.selectionEnd = position;
-
-      // remove attribute
-      textarea.removeAttribute('data-caret-position');
+    const pageEditorDom = document.querySelector('#page-editor');
+    const position = pageEditorDom.getAttribute('data-caret-position');
+
+    if (position == null) {
+      return;
     }
+
+    // get the PageEditor component instance
+    const pageEditor = crowi.componentInstances['page-editor']
+    // init position
+    pageEditor.initCaretPosition(position);
   }
 
 /**

resource/js/legacy/crowi.js

@@ -50,7 +50,7 @@ Crowi.appendEditSectionButtons = function(contentId, markdown) {
     // add button
     $(this).append(`
       <span class="revision-head-edit-button">
-        <a href="#edit-form" onClick="Crowi.setCaretPositionToFormBody(${position})">
+        <a href="#edit-form" onClick="Crowi.setCaretPositionData(${position})">
           <i class="fa fa-edit"></i>
         </a>
       </span>
@@ -63,8 +63,8 @@ Crowi.appendEditSectionButtons = function(contentId, markdown) {
  * set 'data-caret-position' attribute that will be processed in crowi-form.js
  * @param {number} position
  */
-Crowi.setCaretPositionToFormBody = function(position) {
-  const formBody = document.querySelector('#form-body');
+Crowi.setCaretPositionData = function(position) {
+  const formBody = document.querySelector('#page-editor');
   formBody.setAttribute('data-caret-position', position);
 }
 

resource/js/util/Crowi.js

@@ -19,6 +19,7 @@ export default class Crowi {
     this.location = window.location || {};
     this.document = window.document || {};
     this.localStorage = window.localStorage || {};
+    this.componentInstances = undefined;
 
     this.fetchUsers = this.fetchUsers.bind(this);
     this.apiGet = this.apiGet.bind(this);