impl initCaretPosition

resource/js/legacy/crowi-form.js

@@ -57,22 +57,43 @@
   });
 
   // detect mutations for #edit-form
-  var mo = new MutationObserver(function(mutationRecords){
-    console.log(mutationRecords);
-
-    const formBody = $('#form-body');
-    const scrollToLine = formBody.data('scroll-to-line');
-
-    if (scrollToLine !== undefined) {
-      console.log(`scroll to ${scrollToLine}`)
-      const lineHeight = parseInt(formBody.css('line-height'));
-      const scrollTopAmount = scrollToLine * lineHeight;
-      formBody.scrollTop(scrollTopAmount);
+  const targetSelector = '#edit-form';
+  var mo = new MutationObserver(function(mutations){
+    // scroll when '#edit-form' activated
+    if (mutations[0].target.classList.contains('active')) {
+      initCaretPosition();
     }
-    // reset 'scroll-to-line'
-    formBody.removeData('scroll-to-line');
   });
-  mo.observe(document.querySelector('#edit-form'), {attributes: true});
+  mo.observe(
+    document.querySelector(targetSelector),
+    {
+      attributes: true,
+      attributeFilter: ['class'],
+    }
+  );
+
+  /**
+   * scroll the textarea named '#form-body' according to the attribute 'data-caret-position'
+   *  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');
+    }
+  }
 
 /**
  * DOM ready

resource/js/legacy/crowi.js

@@ -31,7 +31,7 @@ Crowi.correctHeaders = function(contentId) {
 };
 
 /**
- *
+ * append buttons to section headers
  */
 Crowi.appendEditSectionButtons = function(contentId, markdown) {
   const $content = $(contentId || '#revision-body-content');
@@ -47,13 +47,10 @@ Crowi.appendEditSectionButtons = function(contentId, markdown) {
       position = markdown.search(text);
     }
 
-    // get line number
-    const lineNumber = markdown.substr(0, position).split('\n').length;
-
     // add button
     $(this).append(`
       <span class="revision-head-edit-button">
-        <a href="#edit-form" onClick="Crowi.setScrollToLineAttrToFormBodyElem(${lineNumber})">
+        <a href="#edit-form" onClick="Crowi.setCaretPositionToFormBody(${position})">
           <i class="fa fa-edit"></i>
         </a>
       </span>
@@ -62,9 +59,13 @@ Crowi.appendEditSectionButtons = function(contentId, markdown) {
   });
 };
 
-Crowi.setScrollToLineAttrToFormBodyElem = function(lineNumber) {
-  console.log(lineNumber);
-  $('#form-body').data('scroll-to-line', lineNumber);
+/**
+ * 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');
+  formBody.setAttribute('data-caret-position', position);
 }