Android-Markdown-Widget icon indicating copy to clipboard operation
Android-Markdown-Widget copied to clipboard
verified publisher icon Tiim

Implementation changes and extensions

Open Mick2nd opened this issue 1 year ago • 5 comments

  • Enlarged view area for DEBUG output
  • Extended debug view content
  • Html frame based on assets file index.html
  • Enabled script execution and pure text transfer
  • Added assets loader for javascript and css files

Added functionality (flexmark extensions):

  • SubscriptExtension instead of StrikethroughExtension (subscript not working with strikethrough)
  • SuperscriptExtension
  • TocExtension
  • GitlabExtension with Mermaid and Katex support
  • AdmonitionExtension
  • enabled checkboxes in TaskListExtension

Mick2nd avatar Apr 24 '24 07:04 Mick2nd

Hi Tiim, I want to use this nice widget for my own purpose but the functionality should be extended. Treat this request as proposal how things could be done (see the commit message). Thanks Mick2nd

Mick2nd avatar Apr 24 '24 08:04 Mick2nd

Hi Tiim, I do not know, if You got this info. In the mean time I detected that my PR was not fully working. Especially the widgets themselves did not render. But I worked hard to find a solution for this problem and I found one. I will create a new PR with the newest changes soon. I believe the main disadvantage of my solution (in the PR) is the memory consumption. This must definitely be optimized. Thanks Mick2nd

Mick2nd avatar Apr 27 '24 16:04 Mick2nd

My first commit was buggy so that the widgets were not displayed properly. The most important change is the bug fix.

Sample Screenshot with a table, a diagram and a math formula

Screenshot_20240501_091306(3)

Mick2nd avatar May 01 '24 07:05 Mick2nd

Improvements Overview

  1. Flexmark Parser extensions and improvements
    1. Use Subscript and Superscript extensions instead of Strikethrough as Strikethrough does not include Subscript (tested).
    2. Configure Tables extension, for instance with html class attribute.
    3. Style Tables, see default.css in assets folder.
    4. Add TOC (Table Of Contents) extension.
    5. Equip with class attribute for further use in CSS.
    6. Equip Task List extension with class attribute.
    7. Make Task items enabled (not grayed out)
    8. Add Admonition extension, added CSS and JS to index.html for styling.
    9. Add GitLab extension.
      1. Katex - CSS and JS library added
      2. Mermaid - CSS and JS library added to assets folder and included in index.html.
    10. Add Code Highlighting by including CSS and JS. Code Fences with language specification like python are recognized and and highlighted. A selection of the most common languages was done.
  2. Web page source code, CSS files, JS files are now located in the assets folder. They are loaded in WebView from there using a assetLoader.shouldInterceptRequest API.
    1. The Asset Loader supports loading from asset folder and from a user defined global folder like the Documents folder.
    2. A user defined userstyle.css file can be used to fine-tune CSS settings.
    3. The user must grant permission to an user selected folder where the CSS file resides.
    4. The Quotes blocks are stylized by CSS (Styles from the Internet).
    5. App wide Zoom setting prepared.
  3. The markdown parser is further equipped by a preparser. It is responsible for transforming the Math delimiters as used by Joplin into the Flexmark compatible ones.
  4. The application is equipped now with the Hilt DI framework, provided by Google.
  5. Add Unit Tests. Full test of markdown parser.

Bugs

  1. FileContentObserver, PackageReplacedReceiver, UpdateService not working. They are intended to recognize changes of the userstyle.css file and update the widgets accordingly.
  2. Some settings should be made configurable like Zoom, usage of userstyle.css etc.

Mick2nd avatar Jun 06 '24 07:06 Mick2nd

Further Progress

In the mean time I made further progress:

  1. The widget can now load md pages from the Internet or another http / https server
  2. The Image View was replaced by a List View thus enabling scroll behavior. The bitmaps are divided into stripes serving as list view items.
  3. The Main Activity was widely extended, it has now 4 Fragments:
    1. The Main fragment with the former link and statement
    2. A Configure fragment containing configuration options and the former Debug sample area
    3. An Editor fragment. The Main Activity can be configured as Intent target and serves as little editor.
    4. A Preview fragment displaying the rendered markdown

Surely, there needs to be done some fine tuning. But the main functionality works in principal.

Mick2nd avatar Jun 25 '24 14:06 Mick2nd