mirror of https://github.com/TriliumNext/Notes
Merge branch 'develop' into patch-1
Potjoe-97
GitHub
commit
80e6276d31
@ -0,0 +1,50 @@
|
|||||||
|
/**
|
||||||
|
* @module
|
||||||
|
*
|
||||||
|
* The nightly version works uses the version described in `package.json`, just like any release.
|
||||||
|
* The problem with this approach is that production builds have a very aggressive cache, and
|
||||||
|
* usually running the nightly with this cached version of the application will mean that the
|
||||||
|
* user might run into module not found errors or styling errors caused by an old cache.
|
||||||
|
*
|
||||||
|
* This script is supposed to be run in the CI, which will update locally the version field of
|
||||||
|
* `package.json` to contain the date. For example, `0.90.9-beta` will become `0.90.9-test-YYMMDD-HHMMSS`.
|
||||||
|
*
|
||||||
|
*/
|
||||||
|
|
||||||
|
import { fileURLToPath } from "url";
|
||||||
|
import { dirname, join } from "path";
|
||||||
|
import fs from "fs";
|
||||||
|
|
||||||
|
function processVersion(version) {
|
||||||
|
// Remove the beta suffix if any.
|
||||||
|
version = version.replace("-beta", "");
|
||||||
|
|
||||||
|
// Add the nightly suffix, plus the date.
|
||||||
|
const referenceDate = new Date()
|
||||||
|
.toISOString()
|
||||||
|
.substring(2, 19)
|
||||||
|
.replace(/[-:]*/g, "")
|
||||||
|
.replace("T", "-");
|
||||||
|
version = `${version}-test-${referenceDate}`;
|
||||||
|
|
||||||
|
return version;
|
||||||
|
}
|
||||||
|
|
||||||
|
function main() {
|
||||||
|
const scriptDir = dirname(fileURLToPath(import.meta.url));
|
||||||
|
const packageJsonPath = join(scriptDir, "..", "package.json");
|
||||||
|
|
||||||
|
// Read the version from package.json and process it.
|
||||||
|
const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, "utf-8"));
|
||||||
|
const currentVersion = packageJson.version;
|
||||||
|
const adjustedVersion = processVersion(currentVersion);
|
||||||
|
console.log("Current version is", currentVersion);
|
||||||
|
console.log("Adjusted version is", adjustedVersion);
|
||||||
|
|
||||||
|
// Write the adjusted version back in.
|
||||||
|
packageJson.version = adjustedVersion;
|
||||||
|
const formattedJson = JSON.stringify(packageJson, null, 4);
|
||||||
|
fs.writeFileSync(packageJsonPath, formattedJson);
|
||||||
|
}
|
||||||
|
|
||||||
|
main();
|
||||||
Binary file not shown.
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -0,0 +1,79 @@
|
|||||||
|
import library_loader from "./library_loader.js";
|
||||||
|
import mime_types from "./mime_types.js";
|
||||||
|
import options from "./options.js";
|
||||||
|
|
||||||
|
export function getStylesheetUrl(theme) {
|
||||||
|
if (!theme) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
const defaultPrefix = "default:";
|
||||||
|
if (theme.startsWith(defaultPrefix)) {
|
||||||
|
return `${window.glob.assetPath}/node_modules/@highlightjs/cdn-assets/styles/${theme.substr(defaultPrefix.length)}.min.css`;
|
||||||
|
}
|
||||||
|
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Identifies all the code blocks (as `pre code`) under the specified hierarchy and uses the highlight.js library to obtain the highlighted text which is then applied on to the code blocks.
|
||||||
|
*
|
||||||
|
* @param $container the container under which to look for code blocks and to apply syntax highlighting to them.
|
||||||
|
*/
|
||||||
|
export async function applySyntaxHighlight($container) {
|
||||||
|
if (!isSyntaxHighlightEnabled()) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
await library_loader.requireLibrary(library_loader.HIGHLIGHT_JS);
|
||||||
|
|
||||||
|
const codeBlocks = $container.find("pre code");
|
||||||
|
for (const codeBlock of codeBlocks) {
|
||||||
|
$(codeBlock).parent().toggleClass("hljs");
|
||||||
|
|
||||||
|
const text = codeBlock.innerText;
|
||||||
|
|
||||||
|
const normalizedMimeType = extractLanguageFromClassList(codeBlock);
|
||||||
|
if (!normalizedMimeType) {
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
|
||||||
|
let highlightedText = null;
|
||||||
|
if (normalizedMimeType === mime_types.MIME_TYPE_AUTO) {
|
||||||
|
highlightedText = hljs.highlightAuto(text);
|
||||||
|
} else if (normalizedMimeType) {
|
||||||
|
const language = mime_types.getHighlightJsNameForMime(normalizedMimeType);
|
||||||
|
highlightedText = hljs.highlight(text, { language });
|
||||||
|
}
|
||||||
|
|
||||||
|
if (highlightedText) {
|
||||||
|
codeBlock.innerHTML = highlightedText.value;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Indicates whether syntax highlighting should be enabled for code blocks, by querying the value of the `codeblockTheme` option.
|
||||||
|
* @returns whether syntax highlighting should be enabled for code blocks.
|
||||||
|
*/
|
||||||
|
export function isSyntaxHighlightEnabled() {
|
||||||
|
const theme = options.get("codeBlockTheme");
|
||||||
|
return theme && theme !== "none";
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Given a HTML element, tries to extract the `language-` class name out of it.
|
||||||
|
*
|
||||||
|
* @param {string} el the HTML element from which to extract the language tag.
|
||||||
|
* @returns the normalized MIME type (e.g. `text-css` instead of `language-text-css`).
|
||||||
|
*/
|
||||||
|
function extractLanguageFromClassList(el) {
|
||||||
|
const prefix = "language-";
|
||||||
|
for (const className of el.classList) {
|
||||||
|
if (className.startsWith(prefix)) {
|
||||||
|
return className.substr(prefix.length);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return null;
|
||||||
|
}
|
||||||
@ -0,0 +1,354 @@
|
|||||||
|
/*
|
||||||
|
* This code is an adaptation of https://github.com/antoniotejada/Trilium-SyntaxHighlightWidget with additional improvements, such as:
|
||||||
|
*
|
||||||
|
* - support for selecting the language manually;
|
||||||
|
* - support for determining the language automatically, if a special language is selected ("Auto-detected");
|
||||||
|
* - limit for highlighting.
|
||||||
|
*
|
||||||
|
* TODO: Generally this class can be done directly in the CKEditor repository.
|
||||||
|
*/
|
||||||
|
|
||||||
|
import library_loader from "../../../services/library_loader.js";
|
||||||
|
import mime_types from "../../../services/mime_types.js";
|
||||||
|
import { isSyntaxHighlightEnabled } from "../../../services/syntax_highlight.js";
|
||||||
|
|
||||||
|
export async function initSyntaxHighlighting(editor) {
|
||||||
|
if (!isSyntaxHighlightEnabled) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
await library_loader.requireLibrary(library_loader.HIGHLIGHT_JS);
|
||||||
|
initTextEditor(editor);
|
||||||
|
}
|
||||||
|
|
||||||
|
const HIGHLIGHT_MAX_BLOCK_COUNT = 500;
|
||||||
|
|
||||||
|
const tag = "SyntaxHighlightWidget";
|
||||||
|
const debugLevels = ["error", "warn", "info", "log", "debug"];
|
||||||
|
const debugLevel = "debug";
|
||||||
|
|
||||||
|
let warn = function() {};
|
||||||
|
if (debugLevel >= debugLevels.indexOf("warn")) {
|
||||||
|
warn = console.warn.bind(console, tag + ": ");
|
||||||
|
}
|
||||||
|
|
||||||
|
let info = function() {};
|
||||||
|
if (debugLevel >= debugLevels.indexOf("info")) {
|
||||||
|
info = console.info.bind(console, tag + ": ");
|
||||||
|
}
|
||||||
|
|
||||||
|
let log = function() {};
|
||||||
|
if (debugLevel >= debugLevels.indexOf("log")) {
|
||||||
|
log = console.log.bind(console, tag + ": ");
|
||||||
|
}
|
||||||
|
|
||||||
|
let dbg = function() {};
|
||||||
|
if (debugLevel >= debugLevels.indexOf("debug")) {
|
||||||
|
dbg = console.debug.bind(console, tag + ": ");
|
||||||
|
}
|
||||||
|
|
||||||
|
function assert(e, msg) {
|
||||||
|
console.assert(e, tag + ": " + msg);
|
||||||
|
}
|
||||||
|
|
||||||
|
// TODO: Should this be scoped to note?
|
||||||
|
let markerCounter = 0;
|
||||||
|
|
||||||
|
function initTextEditor(textEditor) {
|
||||||
|
log("initTextEditor");
|
||||||
|
|
||||||
|
let widget = this;
|
||||||
|
const document = textEditor.model.document;
|
||||||
|
|
||||||
|
// Create a conversion from model to view that converts
|
||||||
|
// hljs:hljsClassName:uniqueId into a span with hljsClassName
|
||||||
|
// See the list of hljs class names at
|
||||||
|
// https://github.com/highlightjs/highlight.js/blob/6b8c831f00c4e87ecd2189ebbd0bb3bbdde66c02/docs/css-classes-reference.rst
|
||||||
|
|
||||||
|
textEditor.conversion.for('editingDowncast').markerToHighlight( {
|
||||||
|
model: "hljs",
|
||||||
|
view: ( { markerName } ) => {
|
||||||
|
dbg("markerName " + markerName);
|
||||||
|
// markerName has the pattern addMarker:cssClassName:uniqueId
|
||||||
|
const [ , cssClassName, id ] = markerName.split( ':' );
|
||||||
|
|
||||||
|
// The original code at
|
||||||
|
// https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-find-and-replace/src/findandreplaceediting.js
|
||||||
|
// has this comment
|
||||||
|
// Marker removal from the view has a bug:
|
||||||
|
// https://github.com/ckeditor/ckeditor5/issues/7499
|
||||||
|
// A minimal option is to return a new object for each converted marker...
|
||||||
|
return {
|
||||||
|
name: 'span',
|
||||||
|
classes: [ cssClassName ],
|
||||||
|
attributes: {
|
||||||
|
// ...however, adding a unique attribute should be future-proof..
|
||||||
|
'data-syntax-result': id
|
||||||
|
},
|
||||||
|
};
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
// XXX This is done at BalloonEditor.create time, so it assumes this
|
||||||
|
// document is always attached to this textEditor, empirically that
|
||||||
|
// seems to be the case even with two splits showing the same note,
|
||||||
|
// it's not clear if CKEditor5 has apis to attach and detach
|
||||||
|
// documents around
|
||||||
|
document.registerPostFixer(function(writer) {
|
||||||
|
log("postFixer");
|
||||||
|
// Postfixers are a simpler way of tracking changes than onchange
|
||||||
|
// See
|
||||||
|
// https://github.com/ckeditor/ckeditor5/blob/b53d2a4b49679b072f4ae781ac094e7e831cfb14/packages/ckeditor5-block-quote/src/blockquoteediting.js#L54
|
||||||
|
const changes = document.differ.getChanges();
|
||||||
|
let dirtyCodeBlocks = new Set();
|
||||||
|
|
||||||
|
for (const change of changes) {
|
||||||
|
dbg("change " + JSON.stringify(change));
|
||||||
|
|
||||||
|
if ((change.type == "insert") && (change.name == "codeBlock")) {
|
||||||
|
// A new code block was inserted
|
||||||
|
const codeBlock = change.position.nodeAfter;
|
||||||
|
// Even if it's a new codeblock, it needs dirtying in case
|
||||||
|
// it already has children, like when pasting one or more
|
||||||
|
// full codeblocks, undoing a delete, changing the language,
|
||||||
|
// etc (the postfixer won't get later changes for those).
|
||||||
|
log("dirtying inserted codeBlock " + JSON.stringify(codeBlock.toJSON()));
|
||||||
|
dirtyCodeBlocks.add(codeBlock);
|
||||||
|
|
||||||
|
} else if (change.type == "remove" && (change.name == "codeBlock")) {
|
||||||
|
// An existing codeblock was removed, do nothing. Note the
|
||||||
|
// node is no longer in the editor so the codeblock cannot
|
||||||
|
// be inspected here. No need to dirty the codeblock since
|
||||||
|
// it has been removed
|
||||||
|
log("removing codeBlock at path " + JSON.stringify(change.position.toJSON()));
|
||||||
|
|
||||||
|
} else if (((change.type == "remove") || (change.type == "insert")) &&
|
||||||
|
change.position.parent.is('element', 'codeBlock')) {
|
||||||
|
// Text was added or removed from the codeblock, force a
|
||||||
|
// highlight
|
||||||
|
const codeBlock = change.position.parent;
|
||||||
|
log("dirtying codeBlock " + JSON.stringify(codeBlock.toJSON()));
|
||||||
|
dirtyCodeBlocks.add(codeBlock);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
for (let codeBlock of dirtyCodeBlocks) {
|
||||||
|
highlightCodeBlock(codeBlock, writer);
|
||||||
|
}
|
||||||
|
// Adding markers doesn't modify the document data so no need for
|
||||||
|
// postfixers to run again
|
||||||
|
return false;
|
||||||
|
});
|
||||||
|
|
||||||
|
// This assumes the document is empty and a explicit call to highlight
|
||||||
|
// is not necessary here. Empty documents have a single children of type
|
||||||
|
// paragraph with no text
|
||||||
|
assert((document.getRoot().childCount == 1) &&
|
||||||
|
(document.getRoot().getChild(0).name == "paragraph") &&
|
||||||
|
document.getRoot().getChild(0).isEmpty);
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* This implements highlighting via ephemeral markers (not stored in the
|
||||||
|
* document).
|
||||||
|
*
|
||||||
|
* XXX Another option would be to use formatting markers, which would have
|
||||||
|
* the benefit of making it work for readonly notes. On the flip side,
|
||||||
|
* the formatting would be stored with the note and it would need a
|
||||||
|
* way to remove that formatting when editing back the note.
|
||||||
|
*/
|
||||||
|
function highlightCodeBlock(codeBlock, writer) {
|
||||||
|
log("highlighting codeblock " + JSON.stringify(codeBlock.toJSON()));
|
||||||
|
const model = codeBlock.root.document.model;
|
||||||
|
|
||||||
|
// Can't invoke addMarker with an already existing marker name,
|
||||||
|
// clear all highlight markers first. Marker names follow the
|
||||||
|
// pattern hljs:cssClassName:uniqueId, eg hljs:hljs-comment:1
|
||||||
|
const codeBlockRange = model.createRangeIn(codeBlock);
|
||||||
|
for (const marker of model.markers.getMarkersIntersectingRange(codeBlockRange)) {
|
||||||
|
dbg("removing marker " + marker.name);
|
||||||
|
writer.removeMarker(marker.name);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Don't highlight if plaintext (note this needs to remove the markers
|
||||||
|
// above first, in case this was a switch from non plaintext to
|
||||||
|
// plaintext)
|
||||||
|
const mimeType = codeBlock.getAttribute("language");
|
||||||
|
if (mimeType == "text-plain") {
|
||||||
|
// XXX There's actually a plaintext language that could be used
|
||||||
|
// if you wanted the non-highlight formatting of
|
||||||
|
// highlight.js css applied, see
|
||||||
|
// https://github.com/highlightjs/highlight.js/issues/700
|
||||||
|
log("not highlighting plaintext codeblock");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Find the corresponding language for the given mimetype.
|
||||||
|
const highlightJsLanguage = mime_types.getHighlightJsNameForMime(mimeType);
|
||||||
|
|
||||||
|
if (mimeType !== mime_types.MIME_TYPE_AUTO && !highlightJsLanguage) {
|
||||||
|
console.warn(`Unsupported highlight.js for mime type ${mimeType}.`);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Don't highlight if the code is too big, as the typing performance will be highly degraded.
|
||||||
|
if (codeBlock.childCount >= HIGHLIGHT_MAX_BLOCK_COUNT) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// highlight.js needs the full text without HTML tags, eg for the
|
||||||
|
// text
|
||||||
|
// #include <stdio.h>
|
||||||
|
// the highlighted html is
|
||||||
|
// <span class="hljs-meta">#<span class="hljs-keyword">include</span> <span class="hljs-string"><stdio.h></span></span>
|
||||||
|
// But CKEditor codeblocks have <br> instead of \n
|
||||||
|
|
||||||
|
// Do a two pass algorithm:
|
||||||
|
// - First pass collect the codeblock children text, change <br> to
|
||||||
|
// \n
|
||||||
|
// - invoke highlight.js on the collected text generating html
|
||||||
|
// - Second pass parse the highlighted html spans and match each
|
||||||
|
// char to the CodeBlock text. Issue addMarker CKEditor calls for
|
||||||
|
// each span
|
||||||
|
|
||||||
|
// XXX This is brittle and assumes how highlight.js generates html
|
||||||
|
// (blanks, which characters escapes, etc), a better approach
|
||||||
|
// would be to use highlight.js beta api TreeTokenizer?
|
||||||
|
|
||||||
|
// Collect all the text nodes to pass to the highlighter Text is
|
||||||
|
// direct children of the codeBlock
|
||||||
|
let text = "";
|
||||||
|
for (let i = 0; i < codeBlock.childCount; ++i) {
|
||||||
|
let child = codeBlock.getChild(i);
|
||||||
|
|
||||||
|
// We only expect text and br elements here
|
||||||
|
if (child.is("$text")) {
|
||||||
|
dbg("child text " + child.data);
|
||||||
|
text += child.data;
|
||||||
|
|
||||||
|
} else if (child.is("element") &&
|
||||||
|
(child.name == "softBreak")) {
|
||||||
|
dbg("softBreak");
|
||||||
|
text += "\n";
|
||||||
|
|
||||||
|
} else {
|
||||||
|
warn("Unkown child " + JSON.stringify(child.toJSON()));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
let highlightRes;
|
||||||
|
if (mimeType === mime_types.MIME_TYPE_AUTO) {
|
||||||
|
highlightRes = hljs.highlightAuto(text);
|
||||||
|
} else {
|
||||||
|
highlightRes = hljs.highlight(text, { language: highlightJsLanguage });
|
||||||
|
}
|
||||||
|
dbg("text\n" + text);
|
||||||
|
dbg("html\n" + highlightRes.value);
|
||||||
|
|
||||||
|
let iHtml = 0;
|
||||||
|
let html = highlightRes.value;
|
||||||
|
let spanStack = [];
|
||||||
|
let iChild = -1;
|
||||||
|
let childText = "";
|
||||||
|
let child = null;
|
||||||
|
let iChildText = 0;
|
||||||
|
|
||||||
|
while (iHtml < html.length) {
|
||||||
|
// Advance the text index and fetch a new child if necessary
|
||||||
|
if (iChildText >= childText.length) {
|
||||||
|
iChild++;
|
||||||
|
if (iChild < codeBlock.childCount) {
|
||||||
|
dbg("Fetching child " + iChild);
|
||||||
|
child = codeBlock.getChild(iChild);
|
||||||
|
if (child.is("$text")) {
|
||||||
|
dbg("child text " + child.data);
|
||||||
|
childText = child.data;
|
||||||
|
iChildText = 0;
|
||||||
|
} else if (child.is("element", "softBreak")) {
|
||||||
|
dbg("softBreak");
|
||||||
|
iChildText = 0;
|
||||||
|
childText = "\n";
|
||||||
|
} else {
|
||||||
|
warn("child unknown!!!");
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
// Don't bail if beyond the last children, since there's
|
||||||
|
// still html text, it must be a closing span tag that
|
||||||
|
// needs to be dealt with below
|
||||||
|
childText = "";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// This parsing is made slightly simpler and faster by only
|
||||||
|
// expecting <span> and </span> tags in the highlighted html
|
||||||
|
if ((html[iHtml] == "<") && (html[iHtml+1] != "/")) {
|
||||||
|
// new span, note they can be nested eg C preprocessor lines
|
||||||
|
// are inside a hljs-meta span, hljs-title function names
|
||||||
|
// inside a hljs-function span, etc
|
||||||
|
let iStartQuot = html.indexOf("\"", iHtml+1);
|
||||||
|
let iEndQuot = html.indexOf("\"", iStartQuot+1);
|
||||||
|
let className = html.slice(iStartQuot+1, iEndQuot);
|
||||||
|
// XXX highlight js uses scope for Python "title function_",
|
||||||
|
// etc for now just use the first style only
|
||||||
|
// See https://highlightjs.readthedocs.io/en/latest/css-classes-reference.html#a-note-on-scopes-with-sub-scopes
|
||||||
|
let iBlank = className.indexOf(" ");
|
||||||
|
if (iBlank > 0) {
|
||||||
|
className = className.slice(0, iBlank);
|
||||||
|
}
|
||||||
|
dbg("Found span start " + className);
|
||||||
|
|
||||||
|
iHtml = html.indexOf(">", iHtml) + 1;
|
||||||
|
|
||||||
|
// push the span
|
||||||
|
let posStart = writer.createPositionAt(codeBlock, child.startOffset + iChildText);
|
||||||
|
spanStack.push({ "className" : className, "posStart": posStart});
|
||||||
|
|
||||||
|
} else if ((html[iHtml] == "<") && (html[iHtml+1] == "/")) {
|
||||||
|
// Done with this span, pop the span and mark the range
|
||||||
|
iHtml = html.indexOf(">", iHtml+1) + 1;
|
||||||
|
|
||||||
|
let stackTop = spanStack.pop();
|
||||||
|
let posStart = stackTop.posStart;
|
||||||
|
let className = stackTop.className;
|
||||||
|
let posEnd = writer.createPositionAt(codeBlock, child.startOffset + iChildText);
|
||||||
|
let range = writer.createRange(posStart, posEnd);
|
||||||
|
let markerName = "hljs:" + className + ":" + markerCounter;
|
||||||
|
// Use an incrementing number for the uniqueId, random of
|
||||||
|
// 10000000 is known to cause collisions with a few
|
||||||
|
// codeblocks of 10s of lines on real notes (each line is
|
||||||
|
// one or more marker).
|
||||||
|
// Wrap-around for good measure so all numbers are positive
|
||||||
|
// XXX Another option is to catch the exception and retry or
|
||||||
|
// go through the markers and get the largest + 1
|
||||||
|
markerCounter = (markerCounter + 1) & 0xFFFFFF;
|
||||||
|
dbg("Found span end " + className);
|
||||||
|
dbg("Adding marker " + markerName + ": " + JSON.stringify(range.toJSON()));
|
||||||
|
writer.addMarker(markerName, {"range": range, "usingOperation": false});
|
||||||
|
|
||||||
|
} else {
|
||||||
|
// Text, we should also have text in the children
|
||||||
|
assert(
|
||||||
|
((iChild < codeBlock.childCount) && (iChildText < childText.length)),
|
||||||
|
"Found text in html with no corresponding child text!!!!"
|
||||||
|
);
|
||||||
|
if (html[iHtml] == "&") {
|
||||||
|
// highlight.js only encodes
|
||||||
|
// .replace(/&/g, '&')
|
||||||
|
// .replace(/</g, '<')
|
||||||
|
// .replace(/>/g, '>')
|
||||||
|
// .replace(/"/g, '"')
|
||||||
|
// .replace(/'/g, ''');
|
||||||
|
// see https://github.com/highlightjs/highlight.js/blob/7addd66c19036eccd7c602af61f1ed84d215c77d/src/lib/utils.js#L5
|
||||||
|
let iAmpEnd = html.indexOf(";", iHtml);
|
||||||
|
dbg(html.slice(iHtml, iAmpEnd));
|
||||||
|
iHtml = iAmpEnd + 1;
|
||||||
|
} else {
|
||||||
|
// regular text
|
||||||
|
dbg(html[iHtml]);
|
||||||
|
iHtml++;
|
||||||
|
}
|
||||||
|
iChildText++;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,119 @@
|
|||||||
|
import { t } from "../../../../services/i18n.js";
|
||||||
|
import library_loader from "../../../../services/library_loader.js";
|
||||||
|
import server from "../../../../services/server.js";
|
||||||
|
import OptionsWidget from "../options_widget.js";
|
||||||
|
|
||||||
|
const SAMPLE_LANGUAGE = "javascript";
|
||||||
|
const SAMPLE_CODE = `\
|
||||||
|
const n = 10;
|
||||||
|
greet(n); // Print "Hello World" for n times
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Displays a "Hello World!" message for a given amount of times, on the standard console. The "Hello World!" text will be displayed once per line.
|
||||||
|
*
|
||||||
|
* @param {number} times The number of times to print the \`Hello World!\` message.
|
||||||
|
*/
|
||||||
|
function greet(times) {
|
||||||
|
for (let i = 0; i++; i < times) {
|
||||||
|
console.log("Hello World!");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
`
|
||||||
|
|
||||||
|
const TPL = `
|
||||||
|
<div class="options-section">
|
||||||
|
<h4>${t("highlighting.title")}</h4>
|
||||||
|
|
||||||
|
<p>${t("highlighting.description")}</p>
|
||||||
|
|
||||||
|
<div class="form-group row">
|
||||||
|
<div class="col-6">
|
||||||
|
<label>${t("highlighting.color-scheme")}</label>
|
||||||
|
<select class="theme-select form-select"></select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="col-6 side-checkbox">
|
||||||
|
<label class="form-check">
|
||||||
|
<input type="checkbox" class="word-wrap form-check-input" />
|
||||||
|
${t("code_block.word_wrapping")}
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-group row">
|
||||||
|
<div class="note-detail-readonly-text-content ck-content code-sample-wrapper">
|
||||||
|
<pre class="hljs"><code class="code-sample">${SAMPLE_CODE}</code></pre>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.code-sample-wrapper {
|
||||||
|
margin-top: 1em;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Contains appearance settings for code blocks within text notes, such as the theme for the syntax highlighter.
|
||||||
|
*/
|
||||||
|
export default class CodeBlockOptions extends OptionsWidget {
|
||||||
|
doRender() {
|
||||||
|
this.$widget = $(TPL);
|
||||||
|
this.$themeSelect = this.$widget.find(".theme-select");
|
||||||
|
this.$themeSelect.on("change", async () => {
|
||||||
|
const newTheme = this.$themeSelect.val();
|
||||||
|
library_loader.loadHighlightingTheme(newTheme);
|
||||||
|
await server.put(`options/codeBlockTheme/${newTheme}`);
|
||||||
|
});
|
||||||
|
|
||||||
|
this.$wordWrap = this.$widget.find("input.word-wrap");
|
||||||
|
this.$wordWrap.on("change", () => this.updateCheckboxOption("codeBlockWordWrap", this.$wordWrap));
|
||||||
|
|
||||||
|
// Set up preview
|
||||||
|
this.$sampleEl = this.$widget.find(".code-sample");
|
||||||
|
}
|
||||||
|
|
||||||
|
#setupPreview(shouldEnableSyntaxHighlight) {
|
||||||
|
const text = SAMPLE_CODE;
|
||||||
|
if (shouldEnableSyntaxHighlight) {
|
||||||
|
library_loader
|
||||||
|
.requireLibrary(library_loader.HIGHLIGHT_JS)
|
||||||
|
.then(() => {
|
||||||
|
const highlightedText = hljs.highlight(text, {
|
||||||
|
language: SAMPLE_LANGUAGE
|
||||||
|
});
|
||||||
|
this.$sampleEl.html(highlightedText.value);
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
this.$sampleEl.text(text);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async optionsLoaded(options) {
|
||||||
|
const themeGroups = await server.get("options/codeblock-themes");
|
||||||
|
this.$themeSelect.empty();
|
||||||
|
|
||||||
|
for (const [ key, themes ] of Object.entries(themeGroups)) {
|
||||||
|
const $group = (key ? $("<optgroup>").attr("label", key) : null);
|
||||||
|
|
||||||
|
for (const theme of themes) {
|
||||||
|
const option = $("<option>")
|
||||||
|
.attr("value", theme.val)
|
||||||
|
.text(theme.title);
|
||||||
|
|
||||||
|
if ($group) {
|
||||||
|
$group.append(option);
|
||||||
|
} else {
|
||||||
|
this.$themeSelect.append(option);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
this.$themeSelect.append($group);
|
||||||
|
}
|
||||||
|
this.$themeSelect.val(options.codeBlockTheme);
|
||||||
|
this.setCheckboxState(this.$wordWrap, options.codeBlockWordWrap);
|
||||||
|
this.$widget.closest(".note-detail-printable").toggleClass("word-wrap", options.codeBlockWordWrap === "true");
|
||||||
|
|
||||||
|
this.#setupPreview(options.codeBlockTheme !== "none");
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,98 @@
|
|||||||
|
/**
|
||||||
|
* @module
|
||||||
|
*
|
||||||
|
* Manages the server-side functionality of the code blocks feature, mostly for obtaining the available themes for syntax highlighting.
|
||||||
|
*/
|
||||||
|
|
||||||
|
import fs from "fs";
|
||||||
|
import themeNames from "./code_block_theme_names.json" with { type: "json" }
|
||||||
|
import { t } from "i18next";
|
||||||
|
import { join } from "path";
|
||||||
|
import { getResourceDir } from "./utils.js";
|
||||||
|
import env from "./env.js";
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Represents a color scheme for the code block syntax highlight.
|
||||||
|
*/
|
||||||
|
interface ColorTheme {
|
||||||
|
/** The ID of the color scheme which should be stored in the options. */
|
||||||
|
val: string;
|
||||||
|
/** A user-friendly name of the theme. The name is already localized. */
|
||||||
|
title: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Returns all the supported syntax highlighting themes for code blocks, in groups.
|
||||||
|
*
|
||||||
|
* The return value is an object where the keys represent groups in their human-readable name (e.g. "Light theme")
|
||||||
|
* and the values are an array containing the information about every theme. There is also a special group with no
|
||||||
|
* title (empty string) which should be displayed at the top of the listing pages, without a group.
|
||||||
|
*
|
||||||
|
* @returns the supported themes, grouped.
|
||||||
|
*/
|
||||||
|
export function listSyntaxHighlightingThemes() {
|
||||||
|
const stylesDir = (env.isDev() ? "node_modules/@highlightjs/cdn-assets/styles" : "styles");
|
||||||
|
const path = join(getResourceDir(), stylesDir);
|
||||||
|
const systemThemes = readThemesFromFileSystem(path);
|
||||||
|
|
||||||
|
return {
|
||||||
|
"": [
|
||||||
|
{
|
||||||
|
val: "none",
|
||||||
|
title: t("code_block.theme_none")
|
||||||
|
}
|
||||||
|
],
|
||||||
|
...groupThemesByLightOrDark(systemThemes)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Reads all the predefined themes by listing all minified CSSes from a given directory.
|
||||||
|
*
|
||||||
|
* The theme names are mapped against a known list in order to provide more descriptive names such as "Visual Studio 2015 (Dark)" instead of "vs2015".
|
||||||
|
*
|
||||||
|
* @param path the path to read from. Usually this is the highlight.js `styles` directory.
|
||||||
|
* @returns the list of themes.
|
||||||
|
*/
|
||||||
|
function readThemesFromFileSystem(path: string): ColorTheme[] {
|
||||||
|
return fs.readdirSync(path)
|
||||||
|
.filter((el) => el.endsWith(".min.css"))
|
||||||
|
.map((name) => {
|
||||||
|
const nameWithoutExtension = name.replace(".min.css", "");
|
||||||
|
let title = nameWithoutExtension.replace(/-/g, " ");
|
||||||
|
|
||||||
|
if (title in themeNames) {
|
||||||
|
title = (themeNames as Record<string, string>)[title];
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
val: `default:${nameWithoutExtension}`,
|
||||||
|
title: title
|
||||||
|
};
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Groups a list of themes by dark or light themes. This is done simply by checking whether "Dark" is present in the given theme, otherwise it's considered a light theme.
|
||||||
|
* This generally only works if the theme has a known human-readable name (see {@link #readThemesFromFileSystem()})
|
||||||
|
*
|
||||||
|
* @param listOfThemes the list of themes to be grouped.
|
||||||
|
* @returns the grouped themes by light or dark.
|
||||||
|
*/
|
||||||
|
function groupThemesByLightOrDark(listOfThemes: ColorTheme[]) {
|
||||||
|
const darkThemes = [];
|
||||||
|
const lightThemes = [];
|
||||||
|
|
||||||
|
for (const theme of listOfThemes) {
|
||||||
|
if (theme.title.includes("Dark")) {
|
||||||
|
darkThemes.push(theme);
|
||||||
|
} else {
|
||||||
|
lightThemes.push(theme);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const output: Record<string, ColorTheme[]> = {};
|
||||||
|
output[t("code_block.theme_group_light")] = lightThemes;
|
||||||
|
output[t("code_block.theme_group_dark")] = darkThemes;
|
||||||
|
return output;
|
||||||
|
}
|
||||||
@ -0,0 +1,75 @@
|
|||||||
|
{
|
||||||
|
"1c light": "1C (Light)",
|
||||||
|
"a11y dark": "a11y (Dark)",
|
||||||
|
"a11y light": "a11y (Light)",
|
||||||
|
"agate": "Agate (Dark)",
|
||||||
|
"an old hope": "An Old Hope (Dark)",
|
||||||
|
"androidstudio": "Android Studio (Dark)",
|
||||||
|
"arduino light": "Arduino (Light)",
|
||||||
|
"arta": "Arta (Dark)",
|
||||||
|
"ascetic": "Ascetic (Light)",
|
||||||
|
"atom one dark reasonable": "Atom One with ReasonML support (Dark)",
|
||||||
|
"atom one dark": "Atom One (Dark)",
|
||||||
|
"atom one light": "Atom One (Light)",
|
||||||
|
"brown paper": "Brown Paper (Light)",
|
||||||
|
"codepen embed": "CodePen Embed (Dark)",
|
||||||
|
"color brewer": "Color Brewer (Light)",
|
||||||
|
"dark": "Dark",
|
||||||
|
"default": "Original highlight.js Theme (Light)",
|
||||||
|
"devibeans": "devibeans (Dark)",
|
||||||
|
"docco": "Docco (Light)",
|
||||||
|
"far": "FAR (Dark)",
|
||||||
|
"felipec": "FelipeC (Dark)",
|
||||||
|
"foundation": "Foundation 4 Docs (Light)",
|
||||||
|
"github dark dimmed": "GitHub Dimmed (Dark)",
|
||||||
|
"github dark": "GitHub (Dark)",
|
||||||
|
"github": "GitHub (Light)",
|
||||||
|
"gml": "GML (Dark)",
|
||||||
|
"googlecode": "Google Code (Light)",
|
||||||
|
"gradient dark": "Gradient (Dark)",
|
||||||
|
"gradient light": "Gradient (Light)",
|
||||||
|
"grayscale": "Grayscale (Light)",
|
||||||
|
"hybrid": "hybrid (Dark)",
|
||||||
|
"idea": "Idea (Light)",
|
||||||
|
"intellij light": "IntelliJ (Light)",
|
||||||
|
"ir black": "IR Black (Dark)",
|
||||||
|
"isbl editor dark": "ISBL Editor (Dark)",
|
||||||
|
"isbl editor light": "ISBL Editor (Light)",
|
||||||
|
"kimbie dark": "Kimbie (Dark)",
|
||||||
|
"kimbie light": "Kimbie (Light)",
|
||||||
|
"lightfair": "Lightfair (Light)",
|
||||||
|
"lioshi": "Lioshi (Dark)",
|
||||||
|
"magula": "Magula (Light)",
|
||||||
|
"mono blue": "Mono Blue (Light)",
|
||||||
|
"monokai sublime": "Monokai Sublime (Dark)",
|
||||||
|
"monokai": "Monokai (Dark)",
|
||||||
|
"night owl": "Night Owl (Dark)",
|
||||||
|
"nnfx dark": "NNFX (Dark)",
|
||||||
|
"nnfx light": "NNFX (Light)",
|
||||||
|
"nord": "Nord (Dark)",
|
||||||
|
"obsidian": "Obsidian (Dark)",
|
||||||
|
"panda syntax dark": "Panda (Dark)",
|
||||||
|
"panda syntax light": "Panda (Light)",
|
||||||
|
"paraiso dark": "Paraiso (Dark)",
|
||||||
|
"paraiso light": "Paraiso (Light)",
|
||||||
|
"pojoaque": "Pojoaque (Dark)",
|
||||||
|
"purebasic": "PureBasic (Light)",
|
||||||
|
"qtcreator dark": "Qt Creator (Dark)",
|
||||||
|
"qtcreator light": "Qt Creator (Light)",
|
||||||
|
"rainbow": "Rainbow (Dark)",
|
||||||
|
"routeros": "RouterOS Script (Light)",
|
||||||
|
"school book": "School Book (Light)",
|
||||||
|
"shades of purple": "Shades of Purple (Dark)",
|
||||||
|
"srcery": "Srcery (Dark)",
|
||||||
|
"stackoverflow dark": "Stack Overflow (Dark)",
|
||||||
|
"stackoverflow light": "Stack Overflow (Light)",
|
||||||
|
"sunburst": "Sunburst (Dark)",
|
||||||
|
"tokyo night dark": "Tokyo Night (Dark)",
|
||||||
|
"tokyo night light": "Tokyo Night (Light)",
|
||||||
|
"tomorrow night blue": "Tomorrow Night Blue (Dark)",
|
||||||
|
"tomorrow night bright": "Tomorrow Night Bright (Dark)",
|
||||||
|
"vs": "Visual Studio (Light)",
|
||||||
|
"vs2015": "Visual Studio 2015 (Dark)",
|
||||||
|
"xcode": "Xcode (Light)",
|
||||||
|
"xt256": "xt256 (Dark)"
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue