View-Mode: Prism codeblock copy to clipboard button, update Mermaid and dark mode, closes #2336 closes #2335

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

@@ -371,6 +371,12 @@ public boolean onReceiveKeyPress(int keyCode, KeyEvent event) {
             } else if (keyCode == KeyEvent.KEYCODE_S) {
                 saveDocument(true);
                 return true;
+            } else if (keyCode == KeyEvent.KEYCODE_Y) {
+                if (_editTextUndoRedoHelper != null && _editTextUndoRedoHelper.getCanRedo()) {
+                    _hlEditor.withAutoFormatDisabled(_editTextUndoRedoHelper::redo);
+                    updateUndoRedoIconStates();
+                }
+                return true;
             } else if (keyCode == KeyEvent.KEYCODE_Z) {
                 if (_editTextUndoRedoHelper != null && _editTextUndoRedoHelper.getCanUndo()) {
                     _hlEditor.withAutoFormatDisabled(_editTextUndoRedoHelper::undo);

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

@@ -105,7 +105,7 @@ public class MarkdownTextConverter extends TextConverterBase {
 
     private static final String CSS_PREFIX = "<link rel='stylesheet' href='file:///android_asset/";
     private static final String CSS_POSTFIX = "'/>";
-    private static final String JS_PREFIX = "<script type='text/javascript' src='file:///android_asset/";
+    private static final String JS_PREFIX = "<script src='file:///android_asset/";
     private static final String JS_POSTFIX = "'></script>";
 
     public static final String HTML_KATEX_INCLUDE = CSS_PREFIX + "katex/katex.min.css" + CSS_POSTFIX +
@@ -272,9 +272,17 @@ public String convertMarkup(String markup, Context context, boolean lightMode, b
             head += CSS_KATEX;
         }
 
+        // Enable View (block) code syntax highlighting
+        if (markup.contains("```")) {
+            head += getViewHlPrismIncludes(GsContextUtils.instance.isDarkModeEnabled(context) ? "-tomorrow" : "", enableLineNumbers);
+        }
+
         // Enable Mermaid
         if (markup.contains("```mermaid")) {
-            head += HTML_MERMAID_INCLUDE;
+            head += HTML_MERMAID_INCLUDE
+                    + "<script>mermaid.initialize({theme:'"
+                    + (GsContextUtils.instance.isDarkModeEnabled(context) ? "dark" : "default")
+                    + "',logLevel:5,securityLevel:'loose'});</script>";
         }
 
         // Enable flexmark Admonition support
@@ -283,9 +291,6 @@ public String convertMarkup(String markup, Context context, boolean lightMode, b
             head += CSS_ADMONITION;
         }
 
-        // Enable View (block) code syntax highlighting
-        head += getViewHlPrismIncludes(GsContextUtils.instance.isDarkModeEnabled(context) ? "-tomorrow" : "", enableLineNumbers);
-
         // Jekyll: Replace {{ site.baseurl }} with ..--> usually used in Jekyll blog _posts folder which is one folder below repository root, for reference to e.g. pictures in assets folder
         markup = markup.replace("{{ site.baseurl }}", "..").replace(TOKEN_SITE_DATE_JEKYLL, TOKEN_POST_TODAY_DATE);
 
@@ -375,20 +380,23 @@ private String escapeSpacesInLink(final String markup) {
     }
 
     @SuppressWarnings({"StringConcatenationInsideStringBufferAppend"})
-    private String getViewHlPrismIncludes(final String themeName, final boolean enableLineNumbers) {
+    private String getViewHlPrismIncludes(final String theme, final boolean isLineNumbersEnabled) {
         final StringBuilder sb = new StringBuilder(1000);
-        sb.append(CSS_PREFIX + "prism/themes/prism" + themeName + ".min.css" + CSS_POSTFIX);
+        sb.append(CSS_PREFIX + "prism/themes/prism" + theme + ".min.css" + CSS_POSTFIX);
         sb.append(CSS_PREFIX + "prism/style.css" + CSS_POSTFIX);
+        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/plugins/autoloader/prism-autoloader.min.js" + JS_POSTFIX);
         sb.append(JS_PREFIX + "prism/main.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 (enableLineNumbers) {
+        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("\n");
 
         return sb.toString();
     }

app/thirdparty/assets/flexmark/admonition.css

@@ -262,4 +262,3 @@
 .adm-block.adm-warning.adm-collapsed > .adm-heading:after {
     color: #fcbb6a;
 }
-

app/thirdparty/assets/mermaid/version

@@ -0,0 +1 @@
+Mermaid v10.9.1

app/thirdparty/assets/prism/plugins/copy-to-clipboard/prism-copy-to-clipboard.js

@@ -0,0 +1,160 @@
+(function () {
+
+	if (typeof Prism === 'undefined' || typeof document === 'undefined') {
+		return;
+	}
+
+	if (!Prism.plugins.toolbar) {
+		console.warn('Copy to Clipboard plugin loaded before Toolbar plugin.');
+
+		return;
+	}
+
+	/**
+	 * When the given elements is clicked by the user, the given text will be copied to clipboard.
+	 *
+	 * @param {HTMLElement} element
+	 * @param {CopyInfo} copyInfo
+	 *
+	 * @typedef CopyInfo
+	 * @property {() => string} getText
+	 * @property {() => void} success
+	 * @property {(reason: unknown) => void} error
+	 */
+	function registerClipboard(element, copyInfo) {
+		element.addEventListener('click', function () {
+			copyTextToClipboard(copyInfo);
+		});
+	}
+
+	// https://stackoverflow.com/a/30810322/7595472
+
+	/** @param {CopyInfo} copyInfo */
+	function fallbackCopyTextToClipboard(copyInfo) {
+		var textArea = document.createElement('textarea');
+		textArea.value = copyInfo.getText();
+
+		// Avoid scrolling to bottom
+		textArea.style.top = '0';
+		textArea.style.left = '0';
+		textArea.style.position = 'fixed';
+
+		document.body.appendChild(textArea);
+		textArea.focus();
+		textArea.select();
+
+		try {
+			var successful = document.execCommand('copy');
+			setTimeout(function () {
+				if (successful) {
+					copyInfo.success();
+				} else {
+					copyInfo.error();
+				}
+			}, 1);
+		} catch (err) {
+			setTimeout(function () {
+				copyInfo.error(err);
+			}, 1);
+		}
+
+		document.body.removeChild(textArea);
+	}
+	/** @param {CopyInfo} copyInfo */
+	function copyTextToClipboard(copyInfo) {
+		if (navigator.clipboard) {
+			navigator.clipboard.writeText(copyInfo.getText()).then(copyInfo.success, function () {
+				// try the fallback in case `writeText` didn't work
+				fallbackCopyTextToClipboard(copyInfo);
+			});
+		} else {
+			fallbackCopyTextToClipboard(copyInfo);
+		}
+	}
+
+	/**
+	 * Selects the text content of the given element.
+	 *
+	 * @param {Element} element
+	 */
+	function selectElementText(element) {
+		// https://stackoverflow.com/a/20079910/7595472
+		window.getSelection().selectAllChildren(element);
+	}
+
+	/**
+	 * Traverses up the DOM tree to find data attributes that override the default plugin settings.
+	 *
+	 * @param {Element} startElement An element to start from.
+	 * @returns {Settings} The plugin settings.
+	 * @typedef {Record<"copy" | "copy-error" | "copy-success" | "copy-timeout", string | number>} Settings
+	 */
+	function getSettings(startElement) {
+		/** @type {Settings} */
+		var settings = {
+			'copy': 'Copy',
+			'copy-error': 'Press Ctrl+C to copy',
+			'copy-success': 'Copied',
+			'copy-timeout': 5000
+		};
+
+		var prefix = 'data-prismjs-';
+		for (var key in settings) {
+			var attr = prefix + key;
+			var element = startElement;
+			while (element && !element.hasAttribute(attr)) {
+				element = element.parentElement;
+			}
+			if (element) {
+				settings[key] = element.getAttribute(attr);
+			}
+		}
+		return settings;
+	}
+
+	Prism.plugins.toolbar.registerButton('copy-to-clipboard', function (env) {
+		var element = env.element;
+
+		var settings = getSettings(element);
+
+		var linkCopy = document.createElement('button');
+		linkCopy.className = 'copy-to-clipboard-button';
+		linkCopy.setAttribute('type', 'button');
+		var linkSpan = document.createElement('span');
+		linkCopy.appendChild(linkSpan);
+
+		setState('copy');
+
+		registerClipboard(linkCopy, {
+			getText: function () {
+				return element.textContent;
+			},
+			success: function () {
+				setState('copy-success');
+
+				resetText();
+			},
+			error: function () {
+				setState('copy-error');
+
+				setTimeout(function () {
+					selectElementText(element);
+				}, 1);
+
+				resetText();
+			}
+		});
+
+		return linkCopy;
+
+		function resetText() {
+			setTimeout(function () { setState('copy'); }, settings['copy-timeout']);
+		}
+
+		/** @param {"copy" | "copy-error" | "copy-success"} state */
+		function setState(state) {
+			linkSpan.textContent = settings[state];
+			linkCopy.setAttribute('data-copy-state', state);
+		}
+	});
+}());

app/thirdparty/assets/prism/plugins/line-numbers/style.css

@@ -9,8 +9,6 @@
     border-right: 1px solid #999;
 
     -webkit-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
     user-select: none;
 }
 

app/thirdparty/assets/prism/plugins/toolbar/prism-toolbar.css

@@ -0,0 +1,69 @@
+div.code-toolbar {
+	position: relative;
+}
+
+div.code-toolbar > .toolbar {
+	position: absolute;
+	z-index: 10;
+	top: .3em;
+	right: .2em;
+	transition: opacity 0.3s ease-in-out;
+	opacity: 0;
+}
+
+div.code-toolbar:hover > .toolbar {
+	opacity: 1;
+}
+
+/* Separate line b/c rules are thrown out if selector is invalid. */
+div.code-toolbar:focus-within > .toolbar {
+	opacity: 1;
+}
+
+div.code-toolbar > .toolbar > .toolbar-item {
+	display: inline-block;
+}
+
+div.code-toolbar > .toolbar > .toolbar-item > a {
+	cursor: pointer;
+}
+
+div.code-toolbar > .toolbar > .toolbar-item > button {
+	background: none;
+	border: 0;
+	color: inherit;
+	font: inherit;
+	line-height: normal;
+	overflow: visible;
+	padding: 0;
+	-webkit-user-select: none; /* for button */
+}
+
+div.code-toolbar > .toolbar > .toolbar-item > a,
+div.code-toolbar > .toolbar > .toolbar-item > button,
+div.code-toolbar > .toolbar > .toolbar-item > span {
+	color: #bbb;
+	font-size: 0.8em;
+	text-transform: none;
+	background: #f5f2f0;
+	background: rgba(224, 224, 224, 0.3);
+	box-shadow: 0 2px 0 0 rgba(0,0,0,0.2);
+	border-radius: 0.4em;
+	display: inline-block;
+	min-width: 75%;
+	max-height: 1.6em;
+	padding-left: 0.35em;
+	padding-right: 0.35em;
+	padding-top: 0.2em;
+	padding-bottom: 0.4em;
+}
+
+div.code-toolbar > .toolbar > .toolbar-item > a:hover,
+div.code-toolbar > .toolbar > .toolbar-item > a:focus,
+div.code-toolbar > .toolbar > .toolbar-item > button:hover,
+div.code-toolbar > .toolbar > .toolbar-item > button:focus,
+div.code-toolbar > .toolbar > .toolbar-item > span:hover,
+/* div.code-toolbar > .toolbar > .toolbar-item > span:focus */ {
+	color: inherit;
+	text-decoration: none;
+}

app/thirdparty/assets/prism/style.css

@@ -1,6 +1,6 @@
 pre[class*="language-"] {
     position: relative;
-    padding-left: 0.8em; /* padding left of codes */
+    padding-left: 0.8em; /* left padding of the code */
     counter-reset: linenumber;
 }