View-Mode: Improve user experience of code blocks

CONTRIBUTORS.md

@@ -49,7 +49,7 @@ Where:
 * **[Frederic Jacob](https://github.com/fredericjacob)**<br/>~° Added Zim-Wiki highlighting, text actions, view mode, page creation
 * **[Winston Feng](https://github.com/tifish)**<br/>~° Support spaces in URL
 * **[k3b](https://github.com/k3b)**<br/>~° Added CSV-Support
-* **[Li Guanglin](https://github.com/guanglinn)**<br/>~° Added line numbers support
+* **[Li Guanglin](https://github.com/guanglinn)**<br/>~° Added support for line numbers
 * **[bigger124](https://github.com/bigger124)**<br>~° Added OrgMode-Support
 * **[Ayowel](https://github.com/ayowel)**<br>~° Mermaid update
 * **[Matthew White](https://github.com/mehw)**<br>~° Zim-Wiki link/attachment conformance

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

@@ -55,7 +55,7 @@
 import net.gsantner.markor.frontend.MarkorDialogFactory;
 import net.gsantner.markor.frontend.filebrowser.MarkorFileBrowserFactory;
 import net.gsantner.markor.frontend.textview.HighlightingEditor;
-import net.gsantner.markor.frontend.textview.LineNumbersTextView;
+import net.gsantner.markor.frontend.textview.LineNumbersView;
 import net.gsantner.markor.frontend.textview.TextViewUtils;
 import net.gsantner.markor.model.AppSettings;
 import net.gsantner.markor.model.Document;
@@ -104,7 +104,8 @@ public static DocumentEditAndViewFragment newInstance(final @NonNull Document do
 
     private DraggableScrollbarScrollView _verticalScrollView;
     private HorizontalScrollView _horizontalScrollView;
-    private LineNumbersTextView _lineNumbersView;
+    private LineNumbersView _lineNumbersView;
+    private SearchView _menuSearchViewForViewMode;
     private Document _document;
     private FormatRegistry _format;
     private MarkorContextUtils _cu;
@@ -571,13 +572,19 @@ public void onFsViewerConfig(GsFileBrowserOptions.Options dopt) {
                 final boolean newState = !isWrapped();
                 _appSettings.setDocumentWrapState(_document.path, newState);
                 setWrapState(newState);
+                if (_isPreviewVisible && _webView != null && Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
+                    _webView.evaluateJavascript("setWrapWords('" + newState + "');", null);
+                }
                 updateMenuToggleStates(0);
                 return true;
             }
             case R.id.action_line_numbers: {
                 final boolean newState = !_lineNumbersView.isLineNumbersEnabled();
                 _appSettings.setDocumentLineNumbersEnabled(_document.path, newState);
                 _lineNumbersView.setLineNumbersEnabled(newState);
+                if (_isPreviewVisible && _webView != null && Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
+                    _webView.evaluateJavascript("setLineNumbers('" + newState + "');", null);
+                }
                 updateMenuToggleStates(0);
                 return true;
             }
@@ -607,6 +614,9 @@ public void onFsViewerConfig(GsFileBrowserOptions.Options dopt) {
                     if (_isPreviewVisible) {
                         if (_webView != null) {
                             _webView.getSettings().setTextZoom((int) (newSize * VIEW_FONT_SCALE));
+                            if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT && _lineNumbersView.isLineNumbersEnabled()) {
+                                _webView.evaluateJavascript("refreshLineNumbers();", null);
+                            }
                         }
                         _appSettings.setDocumentViewFontSize(_document.path, newSize);
                     } else {

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

@@ -278,13 +278,10 @@ public String convertMarkup(String markup, Context context, boolean lightMode, b
             }
         }
 
-        // Enable View (block) code syntax highlighting
+        // Enable code block (view mode) syntax highlighting
         if (markup.contains("```")) {
             head += getViewHlPrismIncludes(GsContextUtils.instance.isDarkModeEnabled(context) ? "-tomorrow" : "", enableLineNumbers);
-            onLoadJs += "usePrismCodeBlock();";
-            if (as.getDocumentWrapState(file.getAbsolutePath())) {
-                onLoadJs += "wrapCodeBlockWords();";
-            }
+            onLoadJs += "usePrism('" + as.getDocumentWrapState(file.getAbsolutePath()) + "', '" + enableLineNumbers + "');";
         }
 
         // Enable Mermaid
@@ -347,11 +344,6 @@ public String convertMarkup(String markup, Context context, boolean lightMode, b
             }
         }
 
-        if (enableLineNumbers) {
-            // For Prism line numbers plugin
-            onLoadJs += "enableLineNumbers(); adjustLineNumbers();";
-        }
-
         // Deliver result
         return putContentIntoTemplate(context, converted, lightMode, file, onLoadJs, head);
     }
@@ -386,7 +378,7 @@ private String escapeSpacesInLink(final String markup) {
     }
 
     @SuppressWarnings({"StringConcatenationInsideStringBufferAppend"})
-    private String getViewHlPrismIncludes(final String theme, final boolean isLineNumbersEnabled) {
+    private String getViewHlPrismIncludes(final String theme, final boolean lineNumbers) {
         final StringBuilder sb = new StringBuilder(1000);
         sb.append(CSS_PREFIX + "prism/themes/prism" + theme + ".min.css" + CSS_POSTFIX);
         sb.append(CSS_PREFIX + "prism/prism-markor.css" + CSS_POSTFIX);
@@ -399,11 +391,9 @@ private String getViewHlPrismIncludes(final String theme, final boolean isLineNu
         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.min.js" + JS_POSTFIX);
 
-        if (isLineNumbersEnabled) {
-            sb.append(CSS_PREFIX + "prism/plugins/line-numbers/prism-line-numbers-markor.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/prism-line-numbers-markor.js" + JS_POSTFIX);
-        }
+        sb.append(CSS_PREFIX + "prism/plugins/line-numbers/prism-line-numbers-markor.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/prism-line-numbers-markor.js" + JS_POSTFIX);
 
         return sb.toString();
     }

app/src/main/java/net/gsantner/markor/frontend/textview/LineNumbersTextView.java → app/src/main/java/net/gsantner/markor/frontend/textview/LineNumbersView.java

@@ -13,44 +13,52 @@
 import android.widget.EditText;
 
 import androidx.annotation.NonNull;
-import androidx.appcompat.widget.AppCompatTextView;
 
 @SuppressWarnings("UnusedReturnValue")
-public class LineNumbersTextView extends AppCompatTextView {
+public class LineNumbersView extends View {
     private EditText editText;
     private LineNumbersDrawer lineNumbersDrawer;
     private boolean lineNumbersEnabled;
 
-    public LineNumbersTextView(Context context) {
+    public LineNumbersView(Context context) {
         super(context);
     }
 
-    public LineNumbersTextView(Context context, AttributeSet attrs) {
+    public LineNumbersView(Context context, AttributeSet attrs) {
         super(context, attrs);
     }
 
-    public LineNumbersTextView(Context context, AttributeSet attrs, int defStyleAttr) {
+    public LineNumbersView(Context context, AttributeSet attrs, int defStyleAttr) {
         super(context, attrs, defStyleAttr);
     }
 
     @Override
-    protected void onVisibilityChanged(View changedView, int visibility) {
+    protected void onAttachedToWindow() {
+        super.onAttachedToWindow();
+        setWidth(0); // Initial width
+    }
+
+    @Override
+    protected void onVisibilityChanged(@NonNull View changedView, int visibility) {
         super.onVisibilityChanged(changedView, visibility);
         if (isLineNumbersEnabled() && visibility == View.VISIBLE) {
             refresh();
         }
     }
 
     @Override
-    protected void onDraw(Canvas canvas) {
+    protected void onDraw(@NonNull Canvas canvas) {
         super.onDraw(canvas);
         if (lineNumbersEnabled) {
             lineNumbersDrawer.draw(canvas);
         }
     }
 
+    /**
+     * Refresh LineNumbersView.
+     */
     public void refresh() {
-        setText(""); // To activate LineNumbersTextView refresh
+        invalidate();
         if (getWidth() == 0) {
             lineNumbersDrawer.getEditText().postInvalidate();
         }
@@ -64,6 +72,11 @@ public void setup(final @NonNull EditText editText) {
         this.lineNumbersDrawer = null;
     }
 
+    public void setWidth(int width) {
+        getLayoutParams().width = width;
+        requestLayout();
+    }
+
     public void setLineNumbersEnabled(final boolean enabled) {
         lineNumbersEnabled = enabled;
 
@@ -76,7 +89,7 @@ public void setLineNumbersEnabled(final boolean enabled) {
             if (lineNumbersDrawer == null) {
                 return;
             }
-            lineNumbersDrawer.done();
+            lineNumbersDrawer.cleanup();
         }
         refresh();
     }
@@ -87,7 +100,7 @@ public boolean isLineNumbersEnabled() {
 
     static class LineNumbersDrawer {
         private final EditText editText;
-        private final LineNumbersTextView textView;
+        private final LineNumbersView lineNumbersView;
 
         private final Paint paint = new Paint();
 
@@ -96,8 +109,8 @@ static class LineNumbersDrawer {
         private static final int EDITOR_PADDING_LEFT = 8;
         private final int ORIGINAL_PADDING_LEFT;
 
-        private final Rect visibleArea = new Rect();
-        private final Rect lineNumbersArea = new Rect();
+        private final Rect visibleRect = new Rect();
+        private final Rect lineNumbersRect = new Rect();
 
         private int fenceX;
         private int numberX;
@@ -123,7 +136,7 @@ public void onTextChanged(CharSequence s, int start, int before, int count) {
             @Override
             public void afterTextChanged(Editable editable) {
                 if (isLayoutLineCountChanged() || isMaxNumberChanged()) {
-                    textView.refresh();
+                    lineNumbersView.refresh();
                 }
             }
         };
@@ -136,14 +149,14 @@ public void onScrollChanged() {
                 final long time = System.currentTimeMillis();
                 if (time - lastTime > 125) {
                     lastTime = time;
-                    textView.refresh();
+                    lineNumbersView.refresh();
                 }
             }
         };
 
-        public LineNumbersDrawer(final @NonNull EditText editText, final @NonNull LineNumbersTextView textView) {
+        public LineNumbersDrawer(final @NonNull EditText editText, final @NonNull LineNumbersView lineNumbersView) {
             this.editText = editText;
-            this.textView = textView;
+            this.lineNumbersView = lineNumbersView;
             ORIGINAL_PADDING_LEFT = editText.getPaddingLeft();
             paint.setColor(0xFF999999);
             paint.setTextAlign(Paint.Align.RIGHT);
@@ -154,15 +167,15 @@ public EditText getEditText() {
         }
 
         private boolean isOutOfLineNumbersArea() {
-            final int margin = (int) (visibleArea.height() * 0.5f);
-            final int top = visibleArea.top - margin;
-            final int bottom = visibleArea.bottom + margin;
+            final int margin = (int) (visibleRect.height() * 0.5f);
+            final int top = visibleRect.top - margin;
+            final int bottom = visibleRect.bottom + margin;
 
-            if (top < lineNumbersArea.top || bottom > lineNumbersArea.bottom) {
+            if (top < lineNumbersRect.top || bottom > lineNumbersRect.bottom) {
                 // Set line numbers area
                 // height of line numbers area = (1.5 + 1 + 1.5) * height of visible area
-                lineNumbersArea.top = top - visibleArea.height();
-                lineNumbersArea.bottom = bottom + visibleArea.height();
+                lineNumbersRect.top = top - visibleRect.height();
+                lineNumbersRect.bottom = bottom + visibleRect.height();
                 return true;
             } else {
                 return false;
@@ -262,7 +275,8 @@ private void setRefreshOnScrollChanged(final boolean enabled) {
         public void prepare() {
             setLineTracking(true);
             setRefreshOnScrollChanged(true);
-            textView.setVisibility(VISIBLE);
+            lineNumbersView.setWidth(0);
+            lineNumbersView.setVisibility(VISIBLE);
             editText.setPadding(EDITOR_PADDING_LEFT, editText.getPaddingTop(), editText.getPaddingRight(), editText.getPaddingBottom());
         }
 
@@ -272,7 +286,7 @@ public void prepare() {
          * @param canvas The canvas on which the line numbers will be drawn.
          */
         public void draw(final Canvas canvas) {
-            if (!editText.getLocalVisibleRect(visibleArea)) {
+            if (!editText.getLocalVisibleRect(visibleRect)) {
                 return;
             }
 
@@ -286,7 +300,7 @@ public void draw(final Canvas canvas) {
             if (isTextSizeChanged() || isMaxNumberDigitsChanged()) {
                 numberX = NUMBER_PADDING_LEFT + (int) paint.measureText(String.valueOf(maxNumber));
                 fenceX = numberX + NUMBER_PADDING_RIGHT;
-                textView.setWidth(fenceX + 1);
+                lineNumbersView.setWidth(fenceX + 1);
             }
 
             // If current visible area is out of current line numbers area,
@@ -299,7 +313,7 @@ public void draw(final Canvas canvas) {
             }
 
             // Draw right border of the fence
-            canvas.drawLine(fenceX, lineNumbersArea.top, fenceX, lineNumbersArea.bottom, paint);
+            canvas.drawLine(fenceX, lineNumbersRect.top, fenceX, lineNumbersRect.bottom, paint);
 
             // Draw line numbers
             int i = startLine[0];
@@ -308,7 +322,7 @@ public void draw(final Canvas canvas) {
             final int count = layout.getLineCount();
             final int offsetY = editText.getPaddingTop();
 
-            if (y > lineNumbersArea.top) {
+            if (y > lineNumbersRect.top) {
                 if (invalid) {
                     invalid = false;
                     startLine[0] = i;
@@ -322,14 +336,14 @@ public void draw(final Canvas canvas) {
             for (; i < count; i++) {
                 if (text.charAt(layout.getLineStart(i) - 1) == '\n') {
                     y = layout.getLineBaseline(i);
-                    if (y > lineNumbersArea.top) {
+                    if (y > lineNumbersRect.top) {
                         if (invalid) {
                             invalid = false;
                             startLine[0] = i;
                             startLine[1] = number;
                         }
                         canvas.drawText(String.valueOf(number), numberX, y + offsetY, paint);
-                        if (y > lineNumbersArea.bottom) {
+                        if (y > lineNumbersRect.bottom) {
                             break;
                         }
                     }
@@ -341,12 +355,11 @@ public void draw(final Canvas canvas) {
         /**
          * Reset some states related line numbers.
          */
-        public void done() {
+        public void cleanup() {
             setLineTracking(false);
             setRefreshOnScrollChanged(false);
             maxNumberDigits = 0;
-            textView.setWidth(0);
-            textView.setVisibility(GONE);
+            lineNumbersView.setVisibility(GONE);
             editText.setPadding(ORIGINAL_PADDING_LEFT, editText.getPaddingTop(), editText.getPaddingRight(), editText.getPaddingBottom());
         }
     }

app/src/main/res/layout/document__fragment__edit.xml

@@ -30,32 +30,30 @@
             android:layout_height="wrap_content"
             android:orientation="horizontal">
 
-            <net.gsantner.markor.frontend.textview.LineNumbersTextView
+            <net.gsantner.markor.frontend.textview.LineNumbersView
                 android:id="@+id/document__fragment__edit__line_numbers_view"
                 android:layout_width="wrap_content"
-                android:layout_height="match_parent"
-                android:layout_weight="0"
-                android:text="" />
+                android:layout_height="match_parent" />
 
             <net.gsantner.markor.frontend.textview.HighlightingEditor
                 android:id="@+id/document__fragment__edit__highlighting_editor"
                 android:layout_width="0dp"
                 android:layout_height="wrap_content"
                 android:layout_weight="1"
-                android:background="@color/background"
                 android:alpha="0"
+                android:background="@color/background"
                 android:gravity="top"
                 android:imeOptions="flagNoExtractUi"
                 android:inputType="textMultiLine|textCapSentences"
+                android:isScrollContainer="false"
                 android:minHeight="1dp"
+                android:nestedScrollingEnabled="false"
+                android:overScrollMode="never"
                 android:paddingLeft="@dimen/activity_horizontal_margin"
                 android:paddingTop="@dimen/activity_vertical_margin"
                 android:paddingRight="@dimen/activity_horizontal_margin"
                 android:paddingBottom="@dimen/editor_bottom_margin"
-                android:nestedScrollingEnabled="false"
-                android:isScrollContainer="false"
                 android:scrollbars="none"
-                android:overScrollMode="never"
                 android:scrollHorizontally="false"
                 android:textCursorDrawable="@drawable/cursor_accent" />
         </LinearLayout>
@@ -79,10 +77,10 @@
 
     <ViewStub
         android:id="@+id/document__fragment_webview_stub"
-        android:layout="@layout/document__fragment_view"
         android:layout_width="match_parent"
         android:layout_height="match_parent"
-        android:layout_marginBottom="@dimen/textactions_bar_height" />
+        android:layout_marginBottom="@dimen/textactions_bar_height"
+        android:layout="@layout/document__fragment_view" />
 
     <FrameLayout
         android:id="@+id/document__fragment_fullscreen_overlay"