Add support for scroll position sync

app/src/main/assets/scroll-sync/scroll-sync.js

@@ -0,0 +1,65 @@
+/**
+ * Scroll to the target element by source line number (generally the first visible line number).
+ * Params: lineNumber - the line number of source code in the editor.
+ */
+function edit2Preview(lineNumber) {
+    let increment = 0;
+    let direction = 0;
+    let number = lineNumber;
+    while (number > 0) {
+        if (direction > 0) {
+            number = lineNumber + increment;
+            direction = -1;
+        } else if (direction < 0) {
+            number = lineNumber - increment;
+            direction = 1;
+            increment++;
+        } else {
+            direction = 1;
+            increment++;
+        }
+
+        const elements = document.querySelectorAll("[data-line='" + number + "']");
+        if (elements == null) {
+            continue;
+        }
+
+        let completed = false;
+        for (let i = 0; i < elements.length; i++) {
+            const element = elements[i];
+            if (element.offsetHeight > 0) {
+                element.scrollIntoView();
+                completed = true;
+                break;
+            }
+        }
+
+        if (completed) {
+            break;
+        }
+    }
+}
+
+/**
+ * Find the target line number, that is the value of data-line attribute of target element (generally the first visible element).
+ * Return: -1 if the target element cannot not be found.
+ */
+function preview2Edit() {
+    const elements = document.querySelectorAll("[data-line]");
+    if (elements == null) {
+        return -1;
+    }
+
+    const TOP_MARGIN = -20;
+    const BOTTOM_MARGIN = window.innerHeight;
+    for (let i = 0; i < elements.length; i++) {
+        const element = elements[i];
+        const top = element.getBoundingClientRect().top;
+        const bottom = element.getBoundingClientRect().bottom;
+        if (top > TOP_MARGIN && bottom > 0 && bottom < BOTTOM_MARGIN) {
+            return parseInt(element.getAttribute("data-line"));
+        }
+    }
+
+    return -1;
+}

app/src/main/java/net/gsantner/markor/activity/DocumentEditAndViewFragment.java

@@ -63,15 +63,17 @@
 import net.gsantner.opoc.util.GsContextUtils;
 import net.gsantner.opoc.util.GsCoolExperimentalStuff;
 import net.gsantner.opoc.web.GsWebViewChromeClient;
+import net.gsantner.opoc.web.GsWebViewClient;
 import net.gsantner.opoc.wrapper.GsTextWatcherAdapter;
 
 import java.io.File;
+import java.util.Collections;
 
 @SuppressWarnings({"UnusedReturnValue"})
 @SuppressLint("NonConstantResourceId")
 public class DocumentEditAndViewFragment extends MarkorBaseFragment implements FormatRegistry.TextFormatApplier {
     public static final String FRAGMENT_TAG = "DocumentEditAndViewFragment";
-    public static final String SAVESTATE_DOCUMENT = "DOCUMENT";
+    public static final String SAVE_STATE_DOCUMENT = "DOCUMENT";
     public static final String START_PREVIEW = "START_PREVIEW";
 
     public static DocumentEditAndViewFragment newInstance(final @NonNull Document document, final Integer lineNumber, final Boolean preview) {
@@ -103,6 +105,7 @@ public static DocumentEditAndViewFragment newInstance(final @NonNull Document do
     private MenuItem _saveMenuItem, _undoMenuItem, _redoMenuItem;
     private boolean _isPreviewVisible;
     private boolean _nextConvertToPrintMode = false;
+    private int _firstVisibleLineNumber = 1;
 
 
     public DocumentEditAndViewFragment() {
@@ -113,8 +116,8 @@ public DocumentEditAndViewFragment() {
     public void onCreate(final Bundle savedInstanceState) {
         super.onCreate(savedInstanceState);
         final Bundle args = getArguments();
-        if (savedInstanceState != null && savedInstanceState.containsKey(SAVESTATE_DOCUMENT)) {
-            _document = (Document) savedInstanceState.getSerializable(SAVESTATE_DOCUMENT);
+        if (savedInstanceState != null && savedInstanceState.containsKey(SAVE_STATE_DOCUMENT)) {
+            _document = (Document) savedInstanceState.getSerializable(SAVE_STATE_DOCUMENT);
         } else if (args != null && args.containsKey(Document.EXTRA_DOCUMENT)) {
             _document = (Document) args.get(Document.EXTRA_DOCUMENT);
         }
@@ -153,6 +156,16 @@ public void onViewCreated(@NonNull View view, Bundle savedInstanceState) {
         }
 
         _webViewClient = new MarkorWebViewClient(_webView, activity);
+        _webViewClient.setOnPageFinishedListener(new GsWebViewClient.OnPageFinishedListener() {
+            @Override
+            public void onPageFinished(WebView v) {
+                if (Build.VERSION.SDK_INT < Build.VERSION_CODES.KITKAT) {
+                    return;
+                }
+                _firstVisibleLineNumber = _hlEditor.getFirstVisibleLineNumber();
+                _webView.evaluateJavascript("edit2Preview(" + _firstVisibleLineNumber + ");", null);
+            }
+        });
         _webView.setWebChromeClient(new GsWebViewChromeClient(_webView, activity, view.findViewById(R.id.document__fragment_fullscreen_overlay)));
         _webView.setWebViewClient(_webViewClient);
         _webView.addJavascriptInterface(this, "Android");
@@ -286,15 +299,23 @@ public void onPause() {
         _appSettings.setDocumentPreviewState(_document.path, _isPreviewVisible);
         _appSettings.setLastEditPosition(_document.path, TextViewUtils.getSelection(_hlEditor)[0]);
 
-        if(_document.path.equals(_appSettings.getTodoFile().getAbsolutePath())){
+        int y;
+        if (_webView.isShown()) {
+            y = _webView.getScrollY();
+        } else {
+            y = _webViewClient.getRestoreScrollY();
+        }
+        _appSettings.setLastViewPositionY(_document.path, y);
+
+        if (_document.path.equals(_appSettings.getTodoFile().getAbsolutePath())) {
             TodoWidgetProvider.updateTodoWidgets();
         }
         super.onPause();
     }
 
     @Override
     public void onSaveInstanceState(@NonNull Bundle outState) {
-        outState.putSerializable(SAVESTATE_DOCUMENT, _document);
+        outState.putSerializable(SAVE_STATE_DOCUMENT, _document);
         super.onSaveInstanceState(outState);
     }
 
@@ -881,17 +902,26 @@ public void setViewModeVisibility(boolean show, final boolean animate) {
         if (show) {
             updateViewModeText();
             _cu.showSoftKeyboard(activity, false, _hlEditor);
-            _hlEditor.clearFocus();
             _hlEditor.postDelayed(() -> _cu.showSoftKeyboard(activity, false, _hlEditor), 300);
+            _webView.requestFocus();
             GsContextUtils.fadeInOut(_webView, _primaryScrollView, animate);
         } else {
             _webViewClient.setRestoreScrollY(_webView.getScrollY());
+            if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
+                _webView.evaluateJavascript("preview2Edit();", result -> {
+                    if (Character.isDigit(result.charAt(0))) {
+                        final int lineNumber = Integer.parseInt(result);
+                        if (lineNumber > 0 && (lineNumber < _firstVisibleLineNumber - 2 || lineNumber > _firstVisibleLineNumber + 2)) {
+                            TextViewUtils.selectLines(_hlEditor, false, Collections.singletonList(lineNumber));
+                        }
+                    }
+                });
+            }
+            _hlEditor.requestFocus();
             GsContextUtils.fadeInOut(_primaryScrollView, _webView, animate);
         }
-
-        _nextConvertToPrintMode = false;
         _isPreviewVisible = show;
-
+        _nextConvertToPrintMode = false;
         ((AppCompatActivity) activity).supportInvalidateOptionsMenu();
     }
 
@@ -916,7 +946,15 @@ protected void onToolbarClicked(View v) {
     @Override
     protected boolean onToolbarLongClicked(View v) {
         if (isVisible() && isResumed()) {
-            _format.getActions().runJumpBottomTopAction(_isPreviewVisible ? ActionButtonBase.ActionItem.DisplayMode.VIEW : ActionButtonBase.ActionItem.DisplayMode.EDIT);
+            if (_isPreviewVisible) {
+                if (_webViewClient.getRestoreScrollY() < 1) {
+                    final int y = _appSettings.getLastViewPositionY(_document.path, 1);
+                    _webViewClient.setRestoreScrollY(y);
+                }
+                _webViewClient.restoreScrollY(_webView);
+            } else {
+                _format.getActions().runJumpBottomTopAction(ActionButtonBase.ActionItem.DisplayMode.EDIT);
+            }
             return true;
         }
         return false;

app/src/main/java/net/gsantner/markor/format/ActionButtonBase.java

@@ -1007,16 +1007,21 @@ public static void selectWholeLines(final @Nullable Spannable text) {
 
     public void runJumpBottomTopAction(ActionItem.DisplayMode displayMode) {
         if (displayMode == ActionItem.DisplayMode.EDIT) {
-            int pos = _hlEditor.getSelectionStart();
-            _hlEditor.setSelection(pos == 0 ? _hlEditor.getText().length() : 0);
+            final int pos = _hlEditor.getSelectionStart();
+            if (pos < 1) {
+                _hlEditor.setSelection(_hlEditor.getText().length());
+            } else if (pos == _hlEditor.getText().length()) {
+                _hlEditor.setSelection(0);
+            } else {
+                TextViewUtils.showSelection(_hlEditor);
+            }
         } else if (displayMode == ActionItem.DisplayMode.VIEW) {
-            boolean top = _webView.getScrollY() > 100;
+            final boolean top = _webView.getScrollY() > 100;
             _webView.scrollTo(0, top ? 0 : _webView.getContentHeight());
             if (!top) {
                 _webView.scrollBy(0, 1000);
                 _webView.scrollBy(0, 1000);
             }
         }
     }
-
 }

app/src/main/java/net/gsantner/markor/format/TextConverterBase.java

@@ -11,6 +11,7 @@
 import android.content.Context;
 import android.net.Uri;
 import android.text.format.DateFormat;
+import android.util.Log;
 import android.webkit.WebView;
 
 import androidx.annotation.NonNull;

app/src/main/java/net/gsantner/markor/format/markdown/MarkdownTextConverter.java

@@ -345,6 +345,9 @@ public String convertMarkup(String markup, Context context, boolean lightMode, b
             onLoadJs += "enableLineNumbers(); adjustLineNumbers();";
         }
 
+        // For scroll sync
+        head += JS_PREFIX + "scroll-sync/scroll-sync.js" + JS_POSTFIX;
+
         // Deliver result
         return putContentIntoTemplate(context, converted, lightMode, file, onLoadJs, head);
     }
@@ -386,15 +389,15 @@ private String getViewHlPrismIncludes(final String theme, final boolean isLineNu
         sb.append(CSS_PREFIX + "prism/plugins/toolbar/prism-toolbar.css" + CSS_POSTFIX);
 
         sb.append(JS_PREFIX + "prism/prism.js" + JS_POSTFIX);
-        sb.append(JS_PREFIX + "prism/main.js" + JS_POSTFIX);
+        sb.append(JS_PREFIX + "prism/util.js" + JS_POSTFIX);
         sb.append(JS_PREFIX + "prism/plugins/autoloader/prism-autoloader.min.js" + JS_POSTFIX);
         sb.append(JS_PREFIX + "prism/plugins/toolbar/prism-toolbar.min.js" + JS_POSTFIX);
         sb.append(JS_PREFIX + "prism/plugins/copy-to-clipboard/prism-copy-to-clipboard.js" + JS_POSTFIX);
 
         if (isLineNumbersEnabled) {
             sb.append(CSS_PREFIX + "prism/plugins/line-numbers/style.css" + CSS_POSTFIX);
             sb.append(JS_PREFIX + "prism/plugins/line-numbers/prism-line-numbers.min.js" + JS_POSTFIX);
-            sb.append(JS_PREFIX + "prism/plugins/line-numbers/main.js" + JS_POSTFIX);
+            sb.append(JS_PREFIX + "prism/plugins/line-numbers/util.js" + JS_POSTFIX);
         }
 
         return sb.toString();
@@ -457,8 +460,8 @@ private static class LineNumberIdProvider implements AttributeProvider {
         @Override
         public void setAttributes(Node node, AttributablePart part, Attributes attributes) {
             final Document document = node.getDocument();
-            final int lineNumber = document.getLineNumber(node.getStartOffset());
-            attributes.addValue("line", "" + lineNumber);
+            final int lineNumber = document.getLineNumber(node.getStartOffset()) + 1;
+            attributes.addValue("data-line", "" + lineNumber);
         }
     }
 

app/src/main/java/net/gsantner/markor/frontend/DraggableScrollbarScrollView.java

@@ -2,7 +2,6 @@
 
 import android.annotation.SuppressLint;
 import android.content.Context;
-import android.os.Build;
 import android.util.AttributeSet;
 import android.util.DisplayMetrics;
 import android.view.MotionEvent;
@@ -83,9 +82,7 @@ private void computeThumbHeight() {
     protected void onAttachedToWindow() {
         super.onAttachedToWindow();
         setSmoothScrollingEnabled(true);
-        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN_MR1) {
-            _ltr = getLayoutDirection() == View.LAYOUT_DIRECTION_LTR;
-        }
+        _ltr = getLayoutDirection() == View.LAYOUT_DIRECTION_LTR;
         final DisplayMetrics displayMetrics = getContext().getResources().getDisplayMetrics();
         _grabWidth = (int) (1.5 * (float) getVerticalScrollbarWidth() * displayMetrics.density);
     }

app/src/main/java/net/gsantner/markor/frontend/MarkorDialogFactory.java

@@ -834,12 +834,19 @@ public static void showHeadlineDialog(
 
         dopt.positionCallback = result -> {
             final int index = filtered.get(result.get(0));
-            final int line = headings.get(index).line;
+            final int line = headings.get(index).line + 1;
 
-            TextViewUtils.selectLines(edit, line);
-            final String jumpJs = "document.querySelector('[line=\"" + line + "\"]').scrollIntoView();";
-            if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
-                webView.evaluateJavascript(jumpJs, null);
+            if (edit.isShown()) {
+                TextViewUtils.selectLines(edit, false, Collections.singletonList(line));
+            }
+
+            if (webView.isShown()) {
+                final String jumpJs = "document.querySelector(\"[data-line='" + line + "']\").scrollIntoView();";
+                if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
+                    webView.evaluateJavascript(jumpJs, null);
+                } else {
+                    webView.loadUrl("javascript:" + jumpJs);
+                }
             }
         };
 

app/src/main/java/net/gsantner/markor/frontend/textview/HighlightingEditor.java

@@ -309,6 +309,32 @@ private int rowEnd(final int y) {
         return layout == null ? 0 : layout.getLineEnd(layout.getLineForVertical(y));
     }
 
+    public int getFirstVisibleLineNumber() {
+        final Rect visibleRect = new Rect();
+        if (!getLocalVisibleRect(visibleRect)) {
+            return -1;
+        }
+
+        final CharSequence text = getText();
+        final Layout layout = getLayout();
+        if (text == null || layout == null) {
+            return -1;
+        }
+
+        // Calculate the first visible line number
+        final int count = layout.getLineCount();
+        for (int i = 1, number = 1; i < count; i++) {
+            if (text.charAt(layout.getLineStart(i) - 1) == '\n') {
+                if (layout.getLineTop(i) > visibleRect.top) {
+                    return number;
+                }
+                number++;
+            }
+        }
+
+        return 1;
+    }
+
     // Text-Casing
     // ---------------------------------------------------------------------------------------------
     public void toggleCase() {