Skip to content

Commit

Permalink
View-Mode: Prism codeblock copy to clipboard button, update Mermaid a…
Browse files Browse the repository at this point in the history
…nd dark mode, closes #2336 closes #2335  (#2345)
  • Loading branch information
guanglinn authored Jul 16, 2024
1 parent 0508b4b commit 321f9b7
Show file tree
Hide file tree
Showing 10 changed files with 961 additions and 331 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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 +
Expand Down Expand Up @@ -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
Expand All @@ -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);

Expand Down Expand Up @@ -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();
}
Expand Down
1 change: 0 additions & 1 deletion app/thirdparty/assets/flexmark/admonition.css
Original file line number Diff line number Diff line change
Expand Up @@ -262,4 +262,3 @@
.adm-block.adm-warning.adm-collapsed > .adm-heading:after {
color: #fcbb6a;
}

1,022 changes: 705 additions & 317 deletions app/thirdparty/assets/mermaid/mermaid.min.js

Large diffs are not rendered by default.

1 change: 1 addition & 0 deletions app/thirdparty/assets/mermaid/version
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
Mermaid v10.9.1
Original file line number Diff line number Diff line change
@@ -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);
}
});
}());
2 changes: 0 additions & 2 deletions app/thirdparty/assets/prism/plugins/line-numbers/style.css
Original file line number Diff line number Diff line change
Expand Up @@ -9,8 +9,6 @@
border-right: 1px solid #999;

-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}

Expand Down
69 changes: 69 additions & 0 deletions app/thirdparty/assets/prism/plugins/toolbar/prism-toolbar.css
Original file line number Diff line number Diff line change
@@ -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;
}

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion app/thirdparty/assets/prism/style.css
Original file line number Diff line number Diff line change
@@ -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;
}

Expand Down

0 comments on commit 321f9b7

Please sign in to comment.