handle note and other nested elements in position calculation #160

META-INF/plugin.xml

@@ -1,7 +1,7 @@
 <idea-plugin version="2" url="https://github.com/asciidoctor/asciidoctor-intellij-plugin">
   <id>org.asciidoctor.intellij.asciidoc</id>
   <name>AsciiDoc</name>
-  <version>0.17.0</version>
+  <version>0.17.1</version>
   <vendor email="[email protected]" url="http://asciidoctor.org">Asciidoctor Project</vendor>
 
   <description><![CDATA[
@@ -18,6 +18,7 @@
 
   <change-notes><![CDATA[
     <ul>
+      <li>0.17.1 Improved handling of trailing spaces in syntax highlighting. Fixed code/preview sync for nested layouts (i.e. NOTE)</li>
       <li>0.17.0 Updated block parsing to support two styles of headings. Block starts and ends are need to be aligned in length and shape when parsed.</li>
       <li>0.16.4 Improved darcula support for JavaFX. More block types are using proper dark background and light text colors.</li>
       <li>0.16.3 Theme in preview can be switched from light to darcula independent of IDE theme</li>

README.adoc

@@ -10,22 +10,23 @@ See https://intellij-support.jetbrains.com/hc/en-us/articles/206544879-Selecting
 
 == Release notes
 
-=== 0.17.1 (pending)
+=== 0.17.1 (preview, available from Github releases)
 
-Improved handling of trailing spaces in syntax highlighting.
+- Improved handling of trailing spaces in syntax highlighting.
+- Fixed code/preview sync for nested layouts (i.e. NOTE)
 
 === 0.17.0 (preview, available from Github releases)
 
-Updated block parsing to support two styles of headings.
-Block starts and ends are need to be aligned in length and shape when parsed.
+- Updated block parsing to support two styles of headings.
+- Block starts and ends are need to be aligned in length and shape when parsed.
 
 === 0.16.4
 
-Improved darcula support for JavaFX. More block types are using proper dark background and light text colors.
+- Improved darcula support for JavaFX. More block types are using proper dark background and light text colors.
 
 === 0.16.3
 
-Theme in preview can be switched from light to darcula independent of IDE theme
+- Theme in preview can be switched from light to darcula independent of IDE theme
 
 === 0.16.2
 

src/main/resources/org/asciidoc/intellij/editor/javafx/pickSourceLine.js

@@ -22,6 +22,15 @@ window.__IntelliJTools.pickSourceLine = (function () {
 
   var lineCount;
 
+  function calculateOffset(element) {
+    var offset = 0
+    while(element != null) {
+      offset += element.offsetTop
+      element = element.offsetParent
+    }
+    return offset
+  }
+
   window.__IntelliJTools.srcollEditorToLine = function (event) {
     var sourceLine = getLine(this)
 
@@ -35,13 +44,13 @@ window.__IntelliJTools.pickSourceLine = (function () {
       var block = blocks[i]
       var lineOfBlock = getLine(block);
       if (lineOfBlock <= sourceLine) {
-        startY = block.offsetTop
+        startY = calculateOffset(block)
         startLine = lineOfBlock
         // there might be no further block, therefore assume that the end is at the end of this block
-        endY = block.offsetTop + block.offsetHeight
+        endY = startY + block.offsetHeight
       }
       else if (lineOfBlock > sourceLine) {
-        endY = block.offsetTop
+        endY = calculateOffset(block)
         endLine = lineOfBlock -1;
         break
       }

src/main/resources/org/asciidoc/intellij/editor/javafx/scrollToElement.js

@@ -22,6 +22,15 @@ window.__IntelliJTools.scrollToLine = (function () {
     return null
   }
 
+  function calculateOffset(element) {
+    var offset = 0
+    while(element != null) {
+      offset += element.offsetTop
+      element = element.offsetParent
+    }
+    return offset
+  }
+
   var scrollToLine = function (newLineToScroll, lineCount) {
 
     // the sourcelines will be as CSS class elements that also have class has-source-line
@@ -35,13 +44,13 @@ window.__IntelliJTools.scrollToLine = (function () {
       var block = blocks[i]
       var lineOfBlock = getLine(block);
       if (lineOfBlock <= newLineToScroll) {
-        startY = block.offsetTop
+        startY = calculateOffset(block)
         startLine = lineOfBlock
         // there might be no further block, therefore assume that the end is at the end of this block
-        endY = block.offsetTop + block.offsetHeight
+        endY = startY + block.offsetHeight
       }
       else if (lineOfBlock > newLineToScroll) {
-        endY = block.offsetTop
+        endY = calculateOffset(block)
         endLine = lineOfBlock -1;
         break
       }
@@ -74,9 +83,12 @@ window.__IntelliJTools.scrollToLine = (function () {
       var newValue = resultY - height * relativeWindowPosition;
 
       // ensure consistent scrolling when scrolling up or down
-      if ((oldLineToScroll < newLineToScroll && oldValue < newValue) ||
-          (oldLineToScroll > newLineToScroll && oldValue > newValue) ||
-          (resultY < oldValue || resultY > oldValue + window.height)) {
+      if (
+          (oldLineToScroll < newLineToScroll && oldValue < newValue) || // consistent scrolling up
+          (oldLineToScroll > newLineToScroll && oldValue > newValue) || // consistent scrolling down
+          (resultY < document.documentElement.scrollTop) || // position above window
+          (resultY > document.documentElement.scrollTop + window.height) // position below window
+         ) {
         document.documentElement.scrollTop = document.body.scrollTop = newValue;
       }