mirror of
https://github.com/TriliumNext/Notes.git
synced 2025-07-29 11:02:28 +08:00
Merge pull request #526 from TriliumNext/feature/syntax_highlight
Basic syntax highlight support for code blocks
This commit is contained in:
Elian Doran
GitHub
commit
f37fa3723b
@ -55,6 +55,7 @@ const copy = async () => {
|
||||
"node_modules/katex/dist/katex.min.js",
|
||||
"node_modules/katex/dist/contrib/mhchem.min.js",
|
||||
"node_modules/katex/dist/contrib/auto-render.min.js",
|
||||
"node_modules/@highlightjs/cdn-assets/highlight.min.js"
|
||||
];
|
||||
|
||||
for (const file of nodeModulesFile) {
|
||||
@ -89,7 +90,9 @@ const copy = async () => {
|
||||
"node_modules/codemirror/addon/",
|
||||
"node_modules/codemirror/mode/",
|
||||
"node_modules/codemirror/keymap/",
|
||||
"node_modules/mind-elixir/dist/"
|
||||
"node_modules/mind-elixir/dist/",
|
||||
"node_modules/@highlightjs/cdn-assets/languages",
|
||||
"node_modules/@highlightjs/cdn-assets/styles"
|
||||
];
|
||||
|
||||
for (const folder of nodeModulesFolder) {
|
||||
|
||||
@ -526,16 +526,19 @@
|
||||
/* @ckeditor/ckeditor5-code-block/theme/codeblock.css */
|
||||
.ck-content pre {
|
||||
padding: 1em;
|
||||
color: hsl(0, 0%, 20.8%);
|
||||
background: hsla(0, 0%, 78%, 0.3);
|
||||
border: 1px solid hsl(0, 0%, 77%);
|
||||
border-radius: 2px;
|
||||
text-align: left;
|
||||
direction: ltr;
|
||||
tab-size: 4;
|
||||
white-space: pre-wrap;
|
||||
font-style: normal;
|
||||
min-width: 200px;
|
||||
border: 0px;
|
||||
border-radius: 6px;
|
||||
box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
.ck-content pre:not(.hljs) {
|
||||
color: hsl(0, 0%, 20.8%);
|
||||
background: hsla(0, 0%, 78%, 0.3);
|
||||
}
|
||||
/* @ckeditor/ckeditor5-code-block/theme/codeblock.css */
|
||||
.ck-content pre code {
|
||||
|
||||
2
libraries/ckeditor/ckeditor.js
vendored
2
libraries/ckeditor/ckeditor.js
vendored
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
9
package-lock.json
generated
9
package-lock.json
generated
@ -12,6 +12,7 @@
|
||||
"@braintree/sanitize-url": "7.1.0",
|
||||
"@electron/remote": "2.1.2",
|
||||
"@excalidraw/excalidraw": "0.17.6",
|
||||
"@highlightjs/cdn-assets": "11.10.0",
|
||||
"archiver": "7.0.1",
|
||||
"async-mutex": "0.5.0",
|
||||
"autocomplete.js": "0.38.1",
|
||||
@ -2445,6 +2446,14 @@
|
||||
"integrity": "sha512-k2Ty1JcVojjJFwrg/ThKi2ujJ7XNLYaFGNB/bWT9wGR+oSMJHMa5w+CUq6p/pVrKeNNgA7pCqEcjSnHVoqJQFw==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/@highlightjs/cdn-assets": {
|
||||
"version": "11.10.0",
|
||||
"resolved": "https://registry.npmjs.org/@highlightjs/cdn-assets/-/cdn-assets-11.10.0.tgz",
|
||||
"integrity": "sha512-vWXpu+Rdm0YMJmugFdUiL/9DmgYjEiV+d5DBqlXdApnGPSIeo6+LRS5Hpx6fvVsKkvR4RsLYD9rQ6DOLkj7OKA==",
|
||||
"engines": {
|
||||
"node": ">=12.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@humanwhocodes/module-importer": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/@humanwhocodes/module-importer/-/module-importer-1.0.1.tgz",
|
||||
|
||||
@ -52,6 +52,7 @@
|
||||
"@braintree/sanitize-url": "7.1.0",
|
||||
"@electron/remote": "2.1.2",
|
||||
"@excalidraw/excalidraw": "0.17.6",
|
||||
"@highlightjs/cdn-assets": "11.10.0",
|
||||
"archiver": "7.0.1",
|
||||
"async-mutex": "0.5.0",
|
||||
"autocomplete.js": "0.38.1",
|
||||
|
||||
@ -38,9 +38,18 @@ export interface RecentNoteRow {
|
||||
utcDateCreated?: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* Database representation of an option.
|
||||
*
|
||||
* Options are key-value pairs that are used to store information such as user preferences (for example
|
||||
* the current theme, sync server information), but also information about the state of the application).
|
||||
*/
|
||||
export interface OptionRow {
|
||||
/** The name of the option. */
|
||||
name: string;
|
||||
/** The value of the option. */
|
||||
value: string;
|
||||
/** `true` if the value should be synced across multiple instances (e.g. locale) or `false` if it should be local-only (e.g. theme). */
|
||||
isSynced: boolean;
|
||||
utcDateModified?: string;
|
||||
}
|
||||
|
||||
@ -10,6 +10,7 @@ import treeService from "./tree.js";
|
||||
import FNote from "../entities/fnote.js";
|
||||
import FAttachment from "../entities/fattachment.js";
|
||||
import imageContextMenuService from "../menus/image_context_menu.js";
|
||||
import { applySyntaxHighlight } from "./syntax_highlight.js";
|
||||
|
||||
let idCounter = 1;
|
||||
|
||||
@ -105,6 +106,8 @@ async function renderText(note, $renderedContent) {
|
||||
for (const el of referenceLinks) {
|
||||
await linkService.loadReferenceLinkTitle($(el));
|
||||
}
|
||||
|
||||
await applySyntaxHighlight($renderedContent);
|
||||
} else {
|
||||
await renderChildrenList($renderedContent, note);
|
||||
}
|
||||
|
||||
@ -1,3 +1,6 @@
|
||||
import mimeTypesService from "./mime_types.js";
|
||||
import optionsService from "./options.js";
|
||||
|
||||
const CKEDITOR = {"js": ["libraries/ckeditor/ckeditor.js"]};
|
||||
|
||||
const CODE_MIRROR = {
|
||||
@ -84,18 +87,44 @@ const MIND_ELIXIR = {
|
||||
]
|
||||
};
|
||||
|
||||
const HIGHLIGHT_JS = {
|
||||
js: () => {
|
||||
const mimeTypes = mimeTypesService.getMimeTypes();
|
||||
const scriptsToLoad = new Set();
|
||||
scriptsToLoad.add("node_modules/@highlightjs/cdn-assets/highlight.min.js");
|
||||
for (const mimeType of mimeTypes) {
|
||||
if (mimeType.enabled && mimeType.highlightJs) {
|
||||
scriptsToLoad.add(`node_modules/@highlightjs/cdn-assets/languages/${mimeType.highlightJs}.min.js`);
|
||||
}
|
||||
}
|
||||
|
||||
const currentTheme = optionsService.get("codeBlockTheme");
|
||||
loadHighlightingTheme(currentTheme);
|
||||
|
||||
return Array.from(scriptsToLoad);
|
||||
}
|
||||
};
|
||||
|
||||
async function requireLibrary(library) {
|
||||
if (library.css) {
|
||||
library.css.map(cssUrl => requireCss(cssUrl));
|
||||
}
|
||||
|
||||
if (library.js) {
|
||||
for (const scriptUrl of library.js) {
|
||||
for (const scriptUrl of unwrapValue(library.js)) {
|
||||
await requireScript(scriptUrl);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function unwrapValue(value) {
|
||||
if (typeof value === "function") {
|
||||
return value();
|
||||
}
|
||||
|
||||
return value;
|
||||
}
|
||||
|
||||
// we save the promises in case of the same script being required concurrently multiple times
|
||||
const loadedScriptPromises = {};
|
||||
|
||||
@ -127,9 +156,41 @@ async function requireCss(url, prependAssetPath = true) {
|
||||
}
|
||||
}
|
||||
|
||||
let highlightingThemeEl = null;
|
||||
function loadHighlightingTheme(theme) {
|
||||
if (!theme) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (theme === "none") {
|
||||
// Deactivate the theme.
|
||||
if (highlightingThemeEl) {
|
||||
highlightingThemeEl.remove();
|
||||
highlightingThemeEl = null;
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
if (!highlightingThemeEl) {
|
||||
highlightingThemeEl = $(`<link rel="stylesheet" type="text/css" />`);
|
||||
$("head").append(highlightingThemeEl);
|
||||
}
|
||||
|
||||
let url;
|
||||
const defaultPrefix = "default:";
|
||||
if (theme.startsWith(defaultPrefix)) {
|
||||
url = `${window.glob.assetPath}/node_modules/@highlightjs/cdn-assets/styles/${theme.substr(defaultPrefix.length)}.min.css`;
|
||||
}
|
||||
|
||||
if (url) {
|
||||
highlightingThemeEl.attr("href", url);
|
||||
}
|
||||
}
|
||||
|
||||
export default {
|
||||
requireCss,
|
||||
requireLibrary,
|
||||
loadHighlightingTheme,
|
||||
CKEDITOR,
|
||||
CODE_MIRROR,
|
||||
ESLINT,
|
||||
@ -143,5 +204,6 @@ export default {
|
||||
EXCALIDRAW,
|
||||
MARKJS,
|
||||
I18NEXT,
|
||||
MIND_ELIXIR
|
||||
MIND_ELIXIR,
|
||||
HIGHLIGHT_JS
|
||||
}
|
||||
|
||||
@ -1,162 +1,167 @@
|
||||
import options from "./options.js";
|
||||
|
||||
/**
|
||||
* A pseudo-MIME type which is used in the editor to automatically determine the language used in code blocks via heuristics.
|
||||
*/
|
||||
const MIME_TYPE_AUTO = "text-x-trilium-auto";
|
||||
|
||||
const MIME_TYPES_DICT = [
|
||||
{ default: true, title: "Plain text", mime: "text/plain" },
|
||||
{ default: true, title: "Plain text", mime: "text/plain", highlightJs: "plaintext" },
|
||||
{ title: "APL", mime: "text/apl" },
|
||||
{ title: "ASN.1", mime: "text/x-ttcn-asn" },
|
||||
{ title: "ASP.NET", mime: "application/x-aspx" },
|
||||
{ title: "Asterisk", mime: "text/x-asterisk" },
|
||||
{ title: "Brainfuck", mime: "text/x-brainfuck" },
|
||||
{ default: true, title: "C", mime: "text/x-csrc" },
|
||||
{ default: true, title: "C#", mime: "text/x-csharp" },
|
||||
{ default: true, title: "C++", mime: "text/x-c++src" },
|
||||
{ title: "Clojure", mime: "text/x-clojure" },
|
||||
{ title: "Brainfuck", mime: "text/x-brainfuck", highlightJs: "brainfuck" },
|
||||
{ default: true, title: "C", mime: "text/x-csrc", highlightJs: "c" },
|
||||
{ default: true, title: "C#", mime: "text/x-csharp", highlightJs: "csharp" },
|
||||
{ default: true, title: "C++", mime: "text/x-c++src", highlightJs: "cpp" },
|
||||
{ title: "Clojure", mime: "text/x-clojure", highlightJs: "clojure" },
|
||||
{ title: "ClojureScript", mime: "text/x-clojurescript" },
|
||||
{ title: "Closure Stylesheets (GSS)", mime: "text/x-gss" },
|
||||
{ title: "CMake", mime: "text/x-cmake" },
|
||||
{ title: "CMake", mime: "text/x-cmake", highlightJs: "cmake" },
|
||||
{ title: "Cobol", mime: "text/x-cobol" },
|
||||
{ title: "CoffeeScript", mime: "text/coffeescript" },
|
||||
{ title: "Common Lisp", mime: "text/x-common-lisp" },
|
||||
{ title: "CoffeeScript", mime: "text/coffeescript", highlightJs: "coffeescript" },
|
||||
{ title: "Common Lisp", mime: "text/x-common-lisp", highlightJs: "lisp" },
|
||||
{ title: "CQL", mime: "text/x-cassandra" },
|
||||
{ title: "Crystal", mime: "text/x-crystal" },
|
||||
{ default: true, title: "CSS", mime: "text/css" },
|
||||
{ title: "Crystal", mime: "text/x-crystal", highlightJs: "crystal" },
|
||||
{ default: true, title: "CSS", mime: "text/css", highlightJs: "css" },
|
||||
{ title: "Cypher", mime: "application/x-cypher-query" },
|
||||
{ title: "Cython", mime: "text/x-cython" },
|
||||
{ title: "D", mime: "text/x-d" },
|
||||
{ title: "Dart", mime: "application/dart" },
|
||||
{ title: "diff", mime: "text/x-diff" },
|
||||
{ title: "Django", mime: "text/x-django" },
|
||||
{ title: "Dockerfile", mime: "text/x-dockerfile" },
|
||||
{ title: "D", mime: "text/x-d", highlightJs: "d" },
|
||||
{ title: "Dart", mime: "application/dart", highlightJs: "dart" },
|
||||
{ title: "diff", mime: "text/x-diff", highlightJs: "diff" },
|
||||
{ title: "Django", mime: "text/x-django", highlightJs: "django" },
|
||||
{ title: "Dockerfile", mime: "text/x-dockerfile", highlightJs: "dockerfile" },
|
||||
{ title: "DTD", mime: "application/xml-dtd" },
|
||||
{ title: "Dylan", mime: "text/x-dylan" },
|
||||
{ title: "EBNF", mime: "text/x-ebnf" },
|
||||
{ title: "EBNF", mime: "text/x-ebnf", highlightJs: "ebnf" },
|
||||
{ title: "ECL", mime: "text/x-ecl" },
|
||||
{ title: "edn", mime: "application/edn" },
|
||||
{ title: "Eiffel", mime: "text/x-eiffel" },
|
||||
{ title: "Elm", mime: "text/x-elm" },
|
||||
{ title: "Elm", mime: "text/x-elm", highlightJs: "elm" },
|
||||
{ title: "Embedded Javascript", mime: "application/x-ejs" },
|
||||
{ title: "Embedded Ruby", mime: "application/x-erb" },
|
||||
{ title: "Erlang", mime: "text/x-erlang" },
|
||||
{ title: "Embedded Ruby", mime: "application/x-erb", highlightJs: "erb" },
|
||||
{ title: "Erlang", mime: "text/x-erlang", highlightJs: "erlang" },
|
||||
{ title: "Esper", mime: "text/x-esper" },
|
||||
{ title: "F#", mime: "text/x-fsharp" },
|
||||
{ title: "F#", mime: "text/x-fsharp", highlightJs: "fsharp" },
|
||||
{ title: "Factor", mime: "text/x-factor" },
|
||||
{ title: "FCL", mime: "text/x-fcl" },
|
||||
{ title: "Forth", mime: "text/x-forth" },
|
||||
{ title: "Fortran", mime: "text/x-fortran" },
|
||||
{ title: "Fortran", mime: "text/x-fortran", highlightJs: "fortran" },
|
||||
{ title: "Gas", mime: "text/x-gas" },
|
||||
{ title: "Gherkin", mime: "text/x-feature" },
|
||||
{ title: "GitHub Flavored Markdown", mime: "text/x-gfm" },
|
||||
{ default: true, title: "Go", mime: "text/x-go" },
|
||||
{ default: true, title: "Groovy", mime: "text/x-groovy" },
|
||||
{ title: "HAML", mime: "text/x-haml" },
|
||||
{ default: true, title: "Haskell", mime: "text/x-haskell" },
|
||||
{ title: "Gherkin", mime: "text/x-feature", highlightJs: "gherkin" },
|
||||
{ title: "GitHub Flavored Markdown", mime: "text/x-gfm", highlightJs: "markdown" },
|
||||
{ default: true, title: "Go", mime: "text/x-go", highlightJs: "go" },
|
||||
{ default: true, title: "Groovy", mime: "text/x-groovy", highlightJs: "groovy" },
|
||||
{ title: "HAML", mime: "text/x-haml", highlightJs: "haml" },
|
||||
{ default: true, title: "Haskell", mime: "text/x-haskell", highlightJs: "haskell" },
|
||||
{ title: "Haskell (Literate)", mime: "text/x-literate-haskell" },
|
||||
{ title: "Haxe", mime: "text/x-haxe" },
|
||||
{ default: true, title: "HTML", mime: "text/html" },
|
||||
{ default: true, title: "HTTP", mime: "message/http" },
|
||||
{ title: "Haxe", mime: "text/x-haxe", highlightJs: "haxe" },
|
||||
{ default: true, title: "HTML", mime: "text/html", highlightJs: "xml" },
|
||||
{ default: true, title: "HTTP", mime: "message/http", highlightJs: "http" },
|
||||
{ title: "HXML", mime: "text/x-hxml" },
|
||||
{ title: "IDL", mime: "text/x-idl" },
|
||||
{ default: true, title: "Java", mime: "text/x-java" },
|
||||
{ title: "Java Server Pages", mime: "application/x-jsp" },
|
||||
{ default: true, title: "Java", mime: "text/x-java", highlightJs: "java" },
|
||||
{ title: "Java Server Pages", mime: "application/x-jsp", highlightJs: "java" },
|
||||
{ title: "Jinja2", mime: "text/jinja2" },
|
||||
{ default: true, title: "JS backend", mime: "application/javascript;env=backend" },
|
||||
{ default: true, title: "JS frontend", mime: "application/javascript;env=frontend" },
|
||||
{ default: true, title: "JSON", mime: "application/json" },
|
||||
{ title: "JSON-LD", mime: "application/ld+json" },
|
||||
{ title: "JSX", mime: "text/jsx" },
|
||||
{ title: "Julia", mime: "text/x-julia" },
|
||||
{ default: true, title: "Kotlin", mime: "text/x-kotlin" },
|
||||
{ title: "LaTeX", mime: "text/x-latex" },
|
||||
{ title: "LESS", mime: "text/x-less" },
|
||||
{ title: "LiveScript", mime: "text/x-livescript" },
|
||||
{ title: "Lua", mime: "text/x-lua" },
|
||||
{ title: "MariaDB SQL", mime: "text/x-mariadb" },
|
||||
{ default: true, title: "Markdown", mime: "text/x-markdown" },
|
||||
{ title: "Mathematica", mime: "text/x-mathematica" },
|
||||
{ default: true, title: "JS backend", mime: "application/javascript;env=backend", highlightJs: "javascript" },
|
||||
{ default: true, title: "JS frontend", mime: "application/javascript;env=frontend", highlightJs: "javascript" },
|
||||
{ default: true, title: "JSON", mime: "application/json", highlightJs: "json" },
|
||||
{ title: "JSON-LD", mime: "application/ld+json", highlightJs: "json" },
|
||||
{ title: "JSX", mime: "text/jsx", highlightJs: "javascript" },
|
||||
{ title: "Julia", mime: "text/x-julia", highlightJs: "julia" },
|
||||
{ default: true, title: "Kotlin", mime: "text/x-kotlin", highlightJs: "kotlin" },
|
||||
{ title: "LaTeX", mime: "text/x-latex", highlightJs: "latex" },
|
||||
{ title: "LESS", mime: "text/x-less", highlightJs: "less" },
|
||||
{ title: "LiveScript", mime: "text/x-livescript", highlightJs: "livescript" },
|
||||
{ title: "Lua", mime: "text/x-lua", highlightJs: "lua" },
|
||||
{ title: "MariaDB SQL", mime: "text/x-mariadb", highlightJs: "sql" },
|
||||
{ default: true, title: "Markdown", mime: "text/x-markdown", highlightJs: "markdown" },
|
||||
{ title: "Mathematica", mime: "text/x-mathematica", highlightJs: "mathematica" },
|
||||
{ title: "mbox", mime: "application/mbox" },
|
||||
{ title: "mIRC", mime: "text/mirc" },
|
||||
{ title: "Modelica", mime: "text/x-modelica" },
|
||||
{ title: "MS SQL", mime: "text/x-mssql" },
|
||||
{ title: "MS SQL", mime: "text/x-mssql", highlightJs: "sql" },
|
||||
{ title: "mscgen", mime: "text/x-mscgen" },
|
||||
{ title: "msgenny", mime: "text/x-msgenny" },
|
||||
{ title: "MUMPS", mime: "text/x-mumps" },
|
||||
{ title: "MySQL", mime: "text/x-mysql" },
|
||||
{ title: "Nginx", mime: "text/x-nginx-conf" },
|
||||
{ title: "NSIS", mime: "text/x-nsis" },
|
||||
{ title: "MySQL", mime: "text/x-mysql", highlightJs: "sql" },
|
||||
{ title: "Nginx", mime: "text/x-nginx-conf", highlightJs: "nginx" },
|
||||
{ title: "NSIS", mime: "text/x-nsis", highlightJs: "nsis" },
|
||||
{ title: "NTriples", mime: "application/n-triples" },
|
||||
{ title: "Objective-C", mime: "text/x-objectivec" },
|
||||
{ title: "OCaml", mime: "text/x-ocaml" },
|
||||
{ title: "Objective-C", mime: "text/x-objectivec", highlightJs: "objectivec" },
|
||||
{ title: "OCaml", mime: "text/x-ocaml", highlightJs: "ocaml" },
|
||||
{ title: "Octave", mime: "text/x-octave" },
|
||||
{ title: "Oz", mime: "text/x-oz" },
|
||||
{ title: "Pascal", mime: "text/x-pascal" },
|
||||
{ title: "Pascal", mime: "text/x-pascal", highlightJs: "delphi" },
|
||||
{ title: "PEG.js", mime: "null" },
|
||||
{ default: true, title: "Perl", mime: "text/x-perl" },
|
||||
{ title: "PGP", mime: "application/pgp" },
|
||||
{ default: true, title: "PHP", mime: "text/x-php" },
|
||||
{ title: "Pig", mime: "text/x-pig" },
|
||||
{ title: "PLSQL", mime: "text/x-plsql" },
|
||||
{ title: "PostgreSQL", mime: "text/x-pgsql" },
|
||||
{ title: "PowerShell", mime: "application/x-powershell" },
|
||||
{ title: "Properties files", mime: "text/x-properties" },
|
||||
{ title: "ProtoBuf", mime: "text/x-protobuf" },
|
||||
{ title: "PLSQL", mime: "text/x-plsql", highlightJs: "sql" },
|
||||
{ title: "PostgreSQL", mime: "text/x-pgsql", highlightJs: "pgsql" },
|
||||
{ title: "PowerShell", mime: "application/x-powershell", highlightJs: "powershell" },
|
||||
{ title: "Properties files", mime: "text/x-properties", highlightJs: "properties" },
|
||||
{ title: "ProtoBuf", mime: "text/x-protobuf", highlightJs: "protobuf" },
|
||||
{ title: "Pug", mime: "text/x-pug" },
|
||||
{ title: "Puppet", mime: "text/x-puppet" },
|
||||
{ default: true, title: "Python", mime: "text/x-python" },
|
||||
{ title: "Q", mime: "text/x-q" },
|
||||
{ title: "R", mime: "text/x-rsrc" },
|
||||
{ title: "Puppet", mime: "text/x-puppet", highlightJs: "puppet" },
|
||||
{ default: true, title: "Python", mime: "text/x-python", highlightJs: "python" },
|
||||
{ title: "Q", mime: "text/x-q", highlightJs: "q" },
|
||||
{ title: "R", mime: "text/x-rsrc", highlightJs: "r" },
|
||||
{ title: "reStructuredText", mime: "text/x-rst" },
|
||||
{ title: "RPM Changes", mime: "text/x-rpm-changes" },
|
||||
{ title: "RPM Spec", mime: "text/x-rpm-spec" },
|
||||
{ default: true, title: "Ruby", mime: "text/x-ruby" },
|
||||
{ title: "Rust", mime: "text/x-rustsrc" },
|
||||
{ title: "SAS", mime: "text/x-sas" },
|
||||
{ default: true, title: "Ruby", mime: "text/x-ruby", highlightJs: "ruby" },
|
||||
{ title: "Rust", mime: "text/x-rustsrc", highlightJs: "rust" },
|
||||
{ title: "SAS", mime: "text/x-sas", highlightJs: "sas" },
|
||||
{ title: "Sass", mime: "text/x-sass" },
|
||||
{ title: "Scala", mime: "text/x-scala" },
|
||||
{ title: "Scheme", mime: "text/x-scheme" },
|
||||
{ title: "SCSS", mime: "text/x-scss" },
|
||||
{ default: true, title: "Shell (bash)", mime: "text/x-sh" },
|
||||
{ title: "SCSS", mime: "text/x-scss", highlightJs: "scss" },
|
||||
{ default: true, title: "Shell (bash)", mime: "text/x-sh", highlightJs: "shell" },
|
||||
{ title: "Sieve", mime: "application/sieve" },
|
||||
{ title: "Slim", mime: "text/x-slim" },
|
||||
{ title: "Smalltalk", mime: "text/x-stsrc" },
|
||||
{ title: "Smalltalk", mime: "text/x-stsrc", highlightJs: "smalltalk" },
|
||||
{ title: "Smarty", mime: "text/x-smarty" },
|
||||
{ title: "SML", mime: "text/x-sml" },
|
||||
{ title: "SML", mime: "text/x-sml", highlightJs: "sml" },
|
||||
{ title: "Solr", mime: "text/x-solr" },
|
||||
{ title: "Soy", mime: "text/x-soy" },
|
||||
{ title: "SPARQL", mime: "application/sparql-query" },
|
||||
{ title: "Spreadsheet", mime: "text/x-spreadsheet" },
|
||||
{ default: true, title: "SQL", mime: "text/x-sql" },
|
||||
{ title: "SQLite", mime: "text/x-sqlite" },
|
||||
{ default: true, title: "SQLite (Trilium)", mime: "text/x-sqlite;schema=trilium" },
|
||||
{ default: true, title: "SQL", mime: "text/x-sql", highlightJs: "sql" },
|
||||
{ title: "SQLite", mime: "text/x-sqlite", highlightJs: "sql" },
|
||||
{ default: true, title: "SQLite (Trilium)", mime: "text/x-sqlite;schema=trilium", highlightJs: "sql" },
|
||||
{ title: "Squirrel", mime: "text/x-squirrel" },
|
||||
{ title: "sTeX", mime: "text/x-stex" },
|
||||
{ title: "Stylus", mime: "text/x-styl" },
|
||||
{ title: "Stylus", mime: "text/x-styl", highlightJs: "stylus" },
|
||||
{ default: true, title: "Swift", mime: "text/x-swift" },
|
||||
{ title: "SystemVerilog", mime: "text/x-systemverilog" },
|
||||
{ title: "Tcl", mime: "text/x-tcl" },
|
||||
{ title: "Tcl", mime: "text/x-tcl", highlightJs: "tcl" },
|
||||
{ title: "Textile", mime: "text/x-textile" },
|
||||
{ title: "TiddlyWiki ", mime: "text/x-tiddlywiki" },
|
||||
{ title: "Tiki wiki", mime: "text/tiki" },
|
||||
{ title: "TOML", mime: "text/x-toml" },
|
||||
{ title: "TOML", mime: "text/x-toml", highlightJs: "ini" },
|
||||
{ title: "Tornado", mime: "text/x-tornado" },
|
||||
{ title: "troff", mime: "text/troff" },
|
||||
{ title: "TTCN", mime: "text/x-ttcn" },
|
||||
{ title: "TTCN_CFG", mime: "text/x-ttcn-cfg" },
|
||||
{ title: "Turtle", mime: "text/turtle" },
|
||||
{ title: "Twig", mime: "text/x-twig" },
|
||||
{ title: "TypeScript", mime: "application/typescript" },
|
||||
{ title: "Twig", mime: "text/x-twig", highlightJs: "twig" },
|
||||
{ title: "TypeScript", mime: "application/typescript", highlightJs: "typescript" },
|
||||
{ title: "TypeScript-JSX", mime: "text/typescript-jsx" },
|
||||
{ title: "VB.NET", mime: "text/x-vb" },
|
||||
{ title: "VBScript", mime: "text/vbscript" },
|
||||
{ title: "VB.NET", mime: "text/x-vb", highlightJs: "vbnet" },
|
||||
{ title: "VBScript", mime: "text/vbscript", highlightJs: "vbscript" },
|
||||
{ title: "Velocity", mime: "text/velocity" },
|
||||
{ title: "Verilog", mime: "text/x-verilog" },
|
||||
{ title: "VHDL", mime: "text/x-vhdl" },
|
||||
{ title: "Verilog", mime: "text/x-verilog", highlightJs: "verilog" },
|
||||
{ title: "VHDL", mime: "text/x-vhdl", highlightJs: "vhdl" },
|
||||
{ title: "Vue.js Component", mime: "text/x-vue" },
|
||||
{ title: "Web IDL", mime: "text/x-webidl" },
|
||||
{ default: true, title: "XML", mime: "text/xml" },
|
||||
{ title: "XQuery", mime: "application/xquery" },
|
||||
{ default: true, title: "XML", mime: "text/xml", highlightJs: "xml" },
|
||||
{ title: "XQuery", mime: "application/xquery", highlightJs: "xquery" },
|
||||
{ title: "xu", mime: "text/x-xu" },
|
||||
{ title: "Yacas", mime: "text/x-yacas" },
|
||||
{ default: true, title: "YAML", mime: "text/x-yaml" },
|
||||
{ default: true, title: "YAML", mime: "text/x-yaml", highlightJs: "yaml" },
|
||||
{ title: "Z80", mime: "text/x-z80" }
|
||||
];
|
||||
|
||||
@ -173,7 +178,7 @@ function loadMimeTypes() {
|
||||
}
|
||||
}
|
||||
|
||||
async function getMimeTypes() {
|
||||
function getMimeTypes() {
|
||||
if (mimeTypes === null) {
|
||||
loadMimeTypes();
|
||||
}
|
||||
@ -181,7 +186,46 @@ async function getMimeTypes() {
|
||||
return mimeTypes;
|
||||
}
|
||||
|
||||
export default {
|
||||
getMimeTypes,
|
||||
loadMimeTypes
|
||||
let mimeToHighlightJsMapping = null;
|
||||
|
||||
/**
|
||||
* Obtains the corresponding language tag for highlight.js for a given MIME type.
|
||||
*
|
||||
* The mapping is built the first time this method is built and then the results are cached for better performance.
|
||||
*
|
||||
* @param {string} mimeType The MIME type of the code block, in the CKEditor-normalized format (e.g. `text-c-src` instead of `text/c-src`).
|
||||
* @returns the corresponding highlight.js tag, for example `c` for `text-c-src`.
|
||||
*/
|
||||
function getHighlightJsNameForMime(mimeType) {
|
||||
if (!mimeToHighlightJsMapping) {
|
||||
const mimeTypes = getMimeTypes();
|
||||
mimeToHighlightJsMapping = {};
|
||||
for (const mimeType of mimeTypes) {
|
||||
// The mime stored by CKEditor is text-x-csrc instead of text/x-csrc so we keep this format for faster lookup.
|
||||
const normalizedMime = normalizeMimeTypeForCKEditor(mimeType.mime);
|
||||
mimeToHighlightJsMapping[normalizedMime] = mimeType.highlightJs;
|
||||
}
|
||||
}
|
||||
|
||||
return mimeToHighlightJsMapping[mimeType];
|
||||
}
|
||||
|
||||
/**
|
||||
* Given a MIME type in the usual format (e.g. `text/csrc`), it returns a MIME type that can be passed down to the CKEditor
|
||||
* code plugin.
|
||||
*
|
||||
* @param {string} mimeType The MIME type to normalize, in the usual format (e.g. `text/c-src`).
|
||||
* @returns the normalized MIME type (e.g. `text-c-src`).
|
||||
*/
|
||||
function normalizeMimeTypeForCKEditor(mimeType) {
|
||||
return mimeType.toLowerCase()
|
||||
.replace(/[\W_]+/g,"-");
|
||||
}
|
||||
|
||||
export default {
|
||||
MIME_TYPE_AUTO,
|
||||
getMimeTypes,
|
||||
loadMimeTypes,
|
||||
getHighlightJsNameForMime,
|
||||
normalizeMimeTypeForCKEditor
|
||||
}
|
||||
|
||||
@ -366,7 +366,7 @@ class NoteListRenderer {
|
||||
separateWordSearch: false,
|
||||
caseSensitive: false
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
$content.append($renderedContent);
|
||||
$content.addClass(`type-${type}`);
|
||||
|
||||
66
src/public/app/services/syntax_highlight.js
Normal file
66
src/public/app/services/syntax_highlight.js
Normal file
@ -0,0 +1,66 @@
|
||||
import library_loader from "./library_loader.js";
|
||||
import mime_types from "./mime_types.js";
|
||||
import options from "./options.js";
|
||||
|
||||
/**
|
||||
* 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;
|
||||
}
|
||||
@ -50,6 +50,9 @@ class NoteContextAwareWidget extends BasicWidget {
|
||||
/**
|
||||
* @inheritdoc
|
||||
*
|
||||
* <p>
|
||||
* If the widget is not enabled, it will not receive `refreshWithNote` updates.
|
||||
*
|
||||
* @returns {boolean} true when an active note exists
|
||||
*/
|
||||
isEnabled() {
|
||||
|
||||
@ -101,7 +101,7 @@ export default class NoteTypeWidget extends NoteContextAwareWidget {
|
||||
this.$noteTypeDropdown.append($typeLink);
|
||||
}
|
||||
|
||||
for (const mimeType of await mimeTypesService.getMimeTypes()) {
|
||||
for (const mimeType of mimeTypesService.getMimeTypes()) {
|
||||
if (!mimeType.enabled) {
|
||||
continue;
|
||||
}
|
||||
@ -128,7 +128,7 @@ export default class NoteTypeWidget extends NoteContextAwareWidget {
|
||||
|
||||
async findTypeTitle(type, mime) {
|
||||
if (type === 'code') {
|
||||
const mimeTypes = await mimeTypesService.getMimeTypes();
|
||||
const mimeTypes = mimeTypesService.getMimeTypes();
|
||||
const found = mimeTypes.find(mt => mt.mime === mime);
|
||||
|
||||
return found ? found.title : mime;
|
||||
|
||||
@ -4,8 +4,15 @@ import froca from "../../services/froca.js";
|
||||
import linkService from "../../services/link.js";
|
||||
import contentRenderer from "../../services/content_renderer.js";
|
||||
import utils from "../../services/utils.js";
|
||||
import options from "../../services/options.js";
|
||||
|
||||
export default class AbstractTextTypeWidget extends TypeWidget {
|
||||
|
||||
doRender() {
|
||||
super.doRender();
|
||||
this.refreshCodeBlockOptions();
|
||||
}
|
||||
|
||||
setupImageOpening(singleClickOpens) {
|
||||
this.$widget.on("dblclick", "img", e => this.openImageInCurrentTab($(e.target)));
|
||||
|
||||
@ -108,4 +115,16 @@ export default class AbstractTextTypeWidget extends TypeWidget {
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
refreshCodeBlockOptions() {
|
||||
const wordWrap = options.is("codeBlockWordWrap");
|
||||
this.$widget.toggleClass("word-wrap", wordWrap);
|
||||
}
|
||||
|
||||
async entitiesReloadedEvent({loadResults}) {
|
||||
if (loadResults.isOptionReloaded("codeBlockWordWrap")) {
|
||||
this.refreshCodeBlockOptions();
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
354
src/public/app/widgets/type_widgets/ckeditor/syntax_highlight.js
Normal file
354
src/public/app/widgets/type_widgets/ckeditor/syntax_highlight.js
Normal file
@ -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++;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -34,6 +34,7 @@ import BackendLogWidget from "./content/backend_log.js";
|
||||
import AttachmentErasureTimeoutOptions from "./options/other/attachment_erasure_timeout.js";
|
||||
import RibbonOptions from "./options/appearance/ribbon.js";
|
||||
import LocalizationOptions from "./options/appearance/i18n.js";
|
||||
import CodeBlockOptions from "./options/appearance/code_block.js";
|
||||
|
||||
const TPL = `<div class="note-detail-content-widget note-detail-printable">
|
||||
<style>
|
||||
@ -59,6 +60,7 @@ const CONTENT_WIDGETS = {
|
||||
LocalizationOptions,
|
||||
ThemeOptions,
|
||||
FontsOptions,
|
||||
CodeBlockOptions,
|
||||
ZoomFactorOptions,
|
||||
NativeTitleBarOptions,
|
||||
MaxContentWidthOptions,
|
||||
|
||||
@ -10,6 +10,9 @@ import AbstractTextTypeWidget from "./abstract_text_type_widget.js";
|
||||
import link from "../../services/link.js";
|
||||
import appContext from "../../components/app_context.js";
|
||||
import dialogService from "../../services/dialog.js";
|
||||
import { initSyntaxHighlighting } from "./ckeditor/syntax_highlight.js";
|
||||
import options from "../../services/options.js";
|
||||
import { isSyntaxHighlightEnabled } from "../../services/syntax_highlight.js";
|
||||
|
||||
const ENABLE_INSPECTOR = false;
|
||||
|
||||
@ -87,6 +90,23 @@ const TPL = `
|
||||
</div>
|
||||
`;
|
||||
|
||||
function buildListOfLanguages() {
|
||||
const userLanguages = (mimeTypesService.getMimeTypes())
|
||||
.filter(mt => mt.enabled)
|
||||
.map(mt => ({
|
||||
language: mimeTypesService.normalizeMimeTypeForCKEditor(mt.mime),
|
||||
label: mt.title
|
||||
}));
|
||||
|
||||
return [
|
||||
{
|
||||
language: mimeTypesService.MIME_TYPE_AUTO,
|
||||
label: t("editable-text.auto-detect-language")
|
||||
},
|
||||
...userLanguages
|
||||
];
|
||||
}
|
||||
|
||||
export default class EditableTextTypeWidget extends AbstractTextTypeWidget {
|
||||
static getType() { return "editableText"; }
|
||||
|
||||
@ -106,13 +126,7 @@ export default class EditableTextTypeWidget extends AbstractTextTypeWidget {
|
||||
async initEditor() {
|
||||
await libraryLoader.requireLibrary(libraryLoader.CKEDITOR);
|
||||
|
||||
const codeBlockLanguages =
|
||||
(await mimeTypesService.getMimeTypes())
|
||||
.filter(mt => mt.enabled)
|
||||
.map(mt => ({
|
||||
language: mt.mime.toLowerCase().replace(/[\W_]+/g,"-"),
|
||||
label: mt.title
|
||||
}));
|
||||
const codeBlockLanguages = buildListOfLanguages();
|
||||
|
||||
// CKEditor since version 12 needs the element to be visible before initialization. At the same time,
|
||||
// we want to avoid flicker - i.e., show editor only once everything is ready. That's why we have separate
|
||||
@ -157,6 +171,8 @@ export default class EditableTextTypeWidget extends AbstractTextTypeWidget {
|
||||
this.watchdog.setCreator(async (elementOrData, editorConfig) => {
|
||||
const editor = await BalloonEditor.create(elementOrData, editorConfig);
|
||||
|
||||
await initSyntaxHighlighting(editor);
|
||||
|
||||
editor.model.document.on('change:data', () => this.spacedUpdate.scheduleUpdate());
|
||||
|
||||
if (glob.isDev && ENABLE_INSPECTOR) {
|
||||
|
||||
@ -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");
|
||||
}
|
||||
}
|
||||
@ -133,14 +133,17 @@ export default class FontsOptions extends OptionsWidget {
|
||||
this.$widget.find(".reload-frontend-button").on("click", () => utils.reloadFrontendApp("changes from appearance options"));
|
||||
}
|
||||
|
||||
isEnabled() {
|
||||
return this._isEnabled;
|
||||
}
|
||||
|
||||
async optionsLoaded(options) {
|
||||
if (options.overrideThemeFonts !== 'true') {
|
||||
this.toggleInt(false);
|
||||
this._isEnabled = (options.overrideThemeFonts === 'true');
|
||||
this.toggleInt(this._isEnabled);
|
||||
if (!this._isEnabled) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.toggleInt(true);
|
||||
|
||||
this.$mainFontSize.val(options.mainFontSize);
|
||||
this.fillFontFamilyOptions(this.$mainFontFamily, options.mainFontFamily);
|
||||
|
||||
|
||||
@ -20,7 +20,7 @@ export default class CodeMimeTypesOptions extends OptionsWidget {
|
||||
async optionsLoaded(options) {
|
||||
this.$mimeTypes.empty();
|
||||
|
||||
for (const mimeType of await mimeTypesService.getMimeTypes()) {
|
||||
for (const mimeType of mimeTypesService.getMimeTypes()) {
|
||||
const id = "code-mime-type-" + (idCtr++);
|
||||
|
||||
this.$mimeTypes.append($("<li>")
|
||||
|
||||
@ -44,6 +44,20 @@ export default class OptionsWidget extends NoteContextAwareWidget {
|
||||
|
||||
optionsLoaded(options) {}
|
||||
|
||||
async refresh() {
|
||||
this.toggleInt(this.isEnabled());
|
||||
try {
|
||||
await this.refreshWithNote(this.note);
|
||||
} catch (e) {
|
||||
// Ignore errors when user is refreshing or navigating away.
|
||||
if (e === "rejected by browser") {
|
||||
return;
|
||||
}
|
||||
|
||||
throw e;
|
||||
}
|
||||
}
|
||||
|
||||
async refreshWithNote(note) {
|
||||
const options = await server.get('options');
|
||||
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
import AbstractTextTypeWidget from "./abstract_text_type_widget.js";
|
||||
import libraryLoader from "../../services/library_loader.js";
|
||||
import { applySyntaxHighlight } from "../../services/syntax_highlight.js";
|
||||
|
||||
const TPL = `
|
||||
<div class="note-detail-readonly-text note-detail-printable">
|
||||
@ -89,7 +90,7 @@ export default class ReadOnlyTextTypeWidget extends AbstractTextTypeWidget {
|
||||
// we load CKEditor also for read only notes because they contain content styles required for correct rendering of even read only notes
|
||||
// we could load just ckeditor-content.css but that causes CSS conflicts when both build CSS and this content CSS is loaded at the same time
|
||||
// (see https://github.com/zadam/trilium/issues/1590 for example of such conflict)
|
||||
await libraryLoader.requireLibrary(libraryLoader.CKEDITOR);
|
||||
await libraryLoader.requireLibrary(libraryLoader.CKEDITOR);
|
||||
|
||||
const blob = await note.getBlob();
|
||||
|
||||
@ -110,6 +111,8 @@ export default class ReadOnlyTextTypeWidget extends AbstractTextTypeWidget {
|
||||
|
||||
renderMathInElement(this.$content[0], {trust: true});
|
||||
}
|
||||
|
||||
await applySyntaxHighlight(this.$content);
|
||||
}
|
||||
|
||||
async refreshIncludedNoteEvent({noteId}) {
|
||||
|
||||
@ -382,7 +382,7 @@ button.btn, button.btn-sm {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
pre:not(.CodeMirror-line) {
|
||||
pre:not(.CodeMirror-line):not(.hljs) {
|
||||
color: var(--main-text-color) !important;
|
||||
white-space: pre-wrap;
|
||||
font-size: 100%;
|
||||
@ -807,6 +807,65 @@ a.external:not(.no-arrow):after, a[href^="http://"]:not(.no-arrow):after, a[href
|
||||
vertical-align: baseline !important;
|
||||
}
|
||||
|
||||
.ck-content pre {
|
||||
border: 0;
|
||||
border-radius: 6px;
|
||||
box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.1), 0px 0px 2px rgba(0, 0, 0, 0.2);
|
||||
padding: 0 !important;
|
||||
margin-top: 2px !important;
|
||||
overflow: unset;
|
||||
}
|
||||
|
||||
html .note-detail-editable-text :not(figure, .include-note):first-child {
|
||||
/* Create some space for the top-side shadow */
|
||||
margin-top: 1px !important;
|
||||
}
|
||||
|
||||
.ck.ck-editor__editable pre[data-language]::after {
|
||||
--ck-color-code-block-label-background: rgba(128, 128, 128, .5);
|
||||
border-radius: 0 0 5px 5px;
|
||||
padding: 0px 10px;
|
||||
letter-spacing: .5px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.ck-content pre code {
|
||||
display: block;
|
||||
padding: 1em;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.ck-content pre code::-webkit-scrollbar {
|
||||
height: 6px;
|
||||
}
|
||||
|
||||
.ck-content pre code::-webkit-scrollbar-thumb {
|
||||
height: 4px;
|
||||
border: none !important;
|
||||
background: gray !important;
|
||||
}
|
||||
|
||||
.ck-content pre code::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.note-detail-printable:not(.word-wrap) pre code {
|
||||
white-space: pre;
|
||||
margin-right: 1em;
|
||||
}
|
||||
|
||||
.code-sample-wrapper .hljs {
|
||||
transition: background-color linear 100ms;
|
||||
}
|
||||
|
||||
.side-checkbox {
|
||||
display: flex;
|
||||
align-items: end;
|
||||
padding-top: .375rem;
|
||||
padding-bottom: .375rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.ck-content .todo-list .todo-list__label > input:before {
|
||||
border: 1px solid var(--muted-text-color) !important;
|
||||
}
|
||||
@ -1173,4 +1232,4 @@ textarea {
|
||||
|
||||
.jump-to-note-results .aa-suggestions {
|
||||
padding: 1rem;
|
||||
}
|
||||
}
|
||||
@ -92,3 +92,7 @@ body .todo-list input[type="checkbox"]:not(:checked):before {
|
||||
.btn-close {
|
||||
filter: invert(1);
|
||||
}
|
||||
|
||||
.ck-content pre {
|
||||
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6) !important;
|
||||
}
|
||||
@ -1053,7 +1053,7 @@
|
||||
"edited_notes_message": "Edited Notes ribbon tab will automatically open on day notes"
|
||||
},
|
||||
"theme": {
|
||||
"title": "Theme",
|
||||
"title": "Application Theme",
|
||||
"theme_label": "Theme",
|
||||
"override_theme_fonts_label": "Override theme fonts",
|
||||
"light_theme": "Light",
|
||||
@ -1497,5 +1497,16 @@
|
||||
"move-to-visible-launchers": "Move to visible launchers",
|
||||
"move-to-available-launchers": "Move to available launchers",
|
||||
"duplicate-launcher": "Duplicate launcher"
|
||||
},
|
||||
"editable-text": {
|
||||
"auto-detect-language": "Auto-detected"
|
||||
},
|
||||
"highlighting": {
|
||||
"title": "Code Syntax Highlighting for Text Notes",
|
||||
"description": "Controls the syntax highlighting for code blocks inside text notes, code notes will not be affected.",
|
||||
"color-scheme": "Color Scheme"
|
||||
},
|
||||
"code_block": {
|
||||
"word_wrapping": "Word wrapping"
|
||||
}
|
||||
}
|
||||
|
||||
@ -1181,7 +1181,7 @@
|
||||
"light_theme": "Temă luminoasă",
|
||||
"override_theme_fonts_label": "Suprascrie fonturile temei",
|
||||
"theme_label": "Temă",
|
||||
"title": "Temă"
|
||||
"title": "Tema aplicației"
|
||||
},
|
||||
"toast": {
|
||||
"critical-error": {
|
||||
@ -1497,5 +1497,16 @@
|
||||
"move-to-available-launchers": "Mută în Lansatoare disponibile",
|
||||
"move-to-visible-launchers": "Mută în Lansatoare vizibile",
|
||||
"reset": "Resetează"
|
||||
},
|
||||
"editable-text": {
|
||||
"auto-detect-language": "Automat"
|
||||
},
|
||||
"highlighting": {
|
||||
"color-scheme": "Temă de culori",
|
||||
"title": "Evidențiere de sintaxă pentru notițele de tip text",
|
||||
"description": "Controlează evidențierea de sintaxă pentru blocurile de cod în interiorul notițelor text, notițele de tip cod nu vor fi afectate de aceste setări."
|
||||
},
|
||||
"code_block": {
|
||||
"word_wrapping": "Încadrare text"
|
||||
}
|
||||
}
|
||||
|
||||
@ -6,6 +6,7 @@ import searchService from "../../services/search/services/search.js";
|
||||
import ValidationError from "../../errors/validation_error.js";
|
||||
import { Request } from 'express';
|
||||
import { changeLanguage } from "../../services/i18n.js";
|
||||
import { listSyntaxHighlightingThemes } from "../../services/code_block_theme.js";
|
||||
|
||||
// options allowed to be updated directly in the Options dialog
|
||||
const ALLOWED_OPTIONS = new Set([
|
||||
@ -15,6 +16,8 @@ const ALLOWED_OPTIONS = new Set([
|
||||
'revisionSnapshotNumberLimit',
|
||||
'zoomFactor',
|
||||
'theme',
|
||||
'codeBlockTheme',
|
||||
"codeBlockWordWrap",
|
||||
'syncServerHost',
|
||||
'syncServerTimeout',
|
||||
'syncProxy',
|
||||
@ -138,6 +141,10 @@ function getUserThemes() {
|
||||
return ret;
|
||||
}
|
||||
|
||||
function getSyntaxHighlightingThemes() {
|
||||
return listSyntaxHighlightingThemes();
|
||||
}
|
||||
|
||||
function getSupportedLocales() {
|
||||
// TODO: Currently hardcoded, needs to read the list of available languages.
|
||||
return [
|
||||
@ -176,5 +183,6 @@ export default {
|
||||
updateOption,
|
||||
updateOptions,
|
||||
getUserThemes,
|
||||
getSyntaxHighlightingThemes,
|
||||
getSupportedLocales
|
||||
};
|
||||
|
||||
@ -102,6 +102,7 @@ function register(app: express.Application) {
|
||||
app.use(`/${assetPath}/node_modules/codemirror/keymap/`, persistentCacheStatic(path.join(srcRoot, '..', 'node_modules/codemirror/keymap/')));
|
||||
|
||||
app.use(`/${assetPath}/node_modules/mind-elixir/dist/`, persistentCacheStatic(path.join(srcRoot, "..", "node_modules/mind-elixir/dist/")));
|
||||
app.use(`/${assetPath}/node_modules/@highlightjs/cdn-assets/`, persistentCacheStatic(path.join(srcRoot, "..", "node_modules/@highlightjs/cdn-assets/")));
|
||||
}
|
||||
|
||||
export default {
|
||||
|
||||
@ -218,6 +218,7 @@ function register(app: express.Application) {
|
||||
apiRoute(PUT, '/api/options/:name/:value*', optionsApiRoute.updateOption);
|
||||
apiRoute(PUT, '/api/options', optionsApiRoute.updateOptions);
|
||||
apiRoute(GET, '/api/options/user-themes', optionsApiRoute.getUserThemes);
|
||||
apiRoute(GET, '/api/options/codeblock-themes', optionsApiRoute.getSyntaxHighlightingThemes);
|
||||
apiRoute(GET, '/api/options/locales', optionsApiRoute.getSupportedLocales);
|
||||
|
||||
apiRoute(PST, '/api/password/change', passwordApiRoute.changePassword);
|
||||
|
||||
94
src/services/code_block_theme.ts
Normal file
94
src/services/code_block_theme.ts
Normal file
@ -0,0 +1,94 @@
|
||||
/**
|
||||
* @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";
|
||||
|
||||
/**
|
||||
* 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 path = "node_modules/@highlightjs/cdn-assets/styles";
|
||||
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;
|
||||
}
|
||||
75
src/services/code_block_theme_names.json
Normal file
75
src/services/code_block_theme_names.json
Normal file
@ -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)"
|
||||
}
|
||||
@ -1,8 +1,27 @@
|
||||
/**
|
||||
* @module
|
||||
*
|
||||
* Options are key-value pairs that are used to store information such as user preferences (for example
|
||||
* the current theme, sync server information), but also information about the state of the application.
|
||||
*
|
||||
* Although options internally are represented as strings, their value can be interpreted as a number or
|
||||
* boolean by calling the appropriate methods from this service (e.g. {@link #getOptionInt}).\
|
||||
*
|
||||
* Generally options are shared across multiple instances of the application via the sync mechanism,
|
||||
* however it is possible to have options that are local to an instance. For example, the user can select
|
||||
* a theme on a device and it will not affect other devices.
|
||||
*/
|
||||
|
||||
import becca from "../becca/becca.js";
|
||||
import BOption from "../becca/entities/boption.js";
|
||||
import { OptionRow } from '../becca/entities/rows.js';
|
||||
import sql from "./sql.js";
|
||||
|
||||
/**
|
||||
* A dictionary where the keys are the option keys (e.g. `theme`) and their corresponding values.
|
||||
*/
|
||||
export type OptionMap = Record<string | number, string>;
|
||||
|
||||
function getOptionOrNull(name: string): string | null {
|
||||
let option;
|
||||
|
||||
@ -69,6 +88,13 @@ function setOption(name: string, value: string | number | boolean) {
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Creates a new option in the database, with the given name, value and whether it should be synced.
|
||||
*
|
||||
* @param name the name of the option to be created.
|
||||
* @param value the value of the option, as a string. It can then be interpreted as other types such as a number of boolean.
|
||||
* @param isSynced `true` if the value should be synced across multiple instances (e.g. locale) or `false` if it should be local-only (e.g. theme).
|
||||
*/
|
||||
function createOption(name: string, value: string, isSynced: boolean) {
|
||||
new BOption({
|
||||
name: name,
|
||||
@ -82,7 +108,7 @@ function getOptions() {
|
||||
}
|
||||
|
||||
function getOptionMap() {
|
||||
const map: Record<string | number, string> = {};
|
||||
const map: OptionMap = {};
|
||||
|
||||
for (const option of Object.values(becca.options)) {
|
||||
map[option.name] = option.value;
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
import optionService from "./options.js";
|
||||
import type { OptionMap } from "./options.js";
|
||||
import appInfo from "./app_info.js";
|
||||
import utils from "./utils.js";
|
||||
import log from "./log.js";
|
||||
@ -11,17 +12,35 @@ function initDocumentOptions() {
|
||||
optionService.createOption('documentSecret', utils.randomSecureToken(16), false);
|
||||
}
|
||||
|
||||
/**
|
||||
* Contains additional options to be initialized for a new database, containing the information entered by the user.
|
||||
*/
|
||||
interface NotSyncedOpts {
|
||||
syncServerHost?: string;
|
||||
syncProxy?: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* Represents a correspondence between an option and its default value, to be initialized when the database is missing that particular option (after a migration from an older version, or when creating a new database).
|
||||
*/
|
||||
interface DefaultOption {
|
||||
name: string;
|
||||
value: string;
|
||||
/**
|
||||
* The value to initialize the option with, if the option is not already present in the database.
|
||||
*
|
||||
* If a function is passed in instead, the function is called if the option does not exist (with access to the current options) and the return value is used instead. Useful to migrate a new option with a value depending on some other option that might be initialized.
|
||||
*/
|
||||
value: string | ((options: OptionMap) => string);
|
||||
isSynced: boolean;
|
||||
}
|
||||
|
||||
/**
|
||||
* Initializes the default options for new databases only.
|
||||
*
|
||||
* @param initialized `true` if the database has been fully initialized (i.e. a new database was created), or `false` if the database is created for sync.
|
||||
* @param theme the theme to set as default, based on a user's system preference.
|
||||
* @param opts additional options to be initialized, for example the sync configuration.
|
||||
*/
|
||||
async function initNotSyncedOptions(initialized: boolean, theme: string, opts: NotSyncedOpts = {}) {
|
||||
optionService.createOption('openNoteContexts', JSON.stringify([
|
||||
{
|
||||
@ -47,6 +66,9 @@ async function initNotSyncedOptions(initialized: boolean, theme: string, opts: N
|
||||
optionService.createOption('syncProxy', opts.syncProxy || '', false);
|
||||
}
|
||||
|
||||
/**
|
||||
* Contains all the default options that must be initialized on new and existing databases (at startup). The value can also be determined based on other options, provided they have already been initialized.
|
||||
*/
|
||||
const defaultOptions: DefaultOption[] = [
|
||||
{ name: 'revisionSnapshotTimeInterval', value: '600', isSynced: true },
|
||||
{ name: 'revisionSnapshotNumberLimit', value: '-1', isSynced: true },
|
||||
@ -99,9 +121,24 @@ const defaultOptions: DefaultOption[] = [
|
||||
|
||||
// Internationalization
|
||||
{ name: 'locale', value: 'en', isSynced: true },
|
||||
{ name: 'firstDayOfWeek', value: '1', isSynced: true }
|
||||
{ name: 'firstDayOfWeek', value: '1', isSynced: true },
|
||||
|
||||
// Code block configuration
|
||||
{ name: "codeBlockTheme", value: (optionsMap) => {
|
||||
if (optionsMap.theme === "light") {
|
||||
return "default:stackoverflow-light";
|
||||
} else {
|
||||
return "default:stackoverflow-dark";
|
||||
}
|
||||
}, isSynced: false },
|
||||
{ name: "codeBlockWordWrap", value: "false", isSynced: true }
|
||||
];
|
||||
|
||||
/**
|
||||
* Initializes the options, by checking which options from {@link #allDefaultOptions()} are missing and registering them. It will also check some environment variables such as safe mode, to make any necessary adjustments.
|
||||
*
|
||||
* This method is called regardless of whether a new database is created, or an existing database is used.
|
||||
*/
|
||||
function initStartupOptions() {
|
||||
const optionsMap = optionService.getOptionMap();
|
||||
|
||||
@ -109,9 +146,15 @@ function initStartupOptions() {
|
||||
|
||||
for (const {name, value, isSynced} of allDefaultOptions) {
|
||||
if (!(name in optionsMap)) {
|
||||
optionService.createOption(name, value, isSynced);
|
||||
let resolvedValue;
|
||||
if (typeof value === "function") {
|
||||
resolvedValue = value(optionsMap);
|
||||
} else {
|
||||
resolvedValue = value;
|
||||
}
|
||||
|
||||
log.info(`Created option "${name}" with default value "${value}"`);
|
||||
optionService.createOption(name, resolvedValue, isSynced);
|
||||
log.info(`Created option "${name}" with default value "${resolvedValue}"`);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -183,5 +183,10 @@
|
||||
},
|
||||
"special_notes": {
|
||||
"search_prefix": "Search:"
|
||||
},
|
||||
"code_block": {
|
||||
"theme_none": "No syntax highlighting",
|
||||
"theme_group_light": "Light themes",
|
||||
"theme_group_dark": "Dark themes"
|
||||
}
|
||||
}
|
||||
|
||||
@ -183,5 +183,10 @@
|
||||
},
|
||||
"special_notes": {
|
||||
"search_prefix": "Căutare:"
|
||||
},
|
||||
"code_block": {
|
||||
"theme_none": "Fără evidențiere de sintaxă",
|
||||
"theme_group_dark": "Teme întunecate",
|
||||
"theme_group_light": "Teme luminoase"
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user