diff --git a/apps/client/src/libraries/highlightjs/terraform.js b/apps/client/src/libraries/highlightjs/terraform.js deleted file mode 100644 index 514e727cf..000000000 --- a/apps/client/src/libraries/highlightjs/terraform.js +++ /dev/null @@ -1,83 +0,0 @@ -/* - * highlight.js terraform syntax highlighting definition - * - * @see https://github.com/highlightjs/highlight.js - * - * :TODO: - * - * @package: highlightjs-terraform - * @author: Nikos Tsirmirakis - * @since: 2019-03-20 - * - * Description: Terraform (HCL) language definition - * Category: scripting - */ - -var module = module ? module : {}; // shim for browser use - -function hljsDefineTerraform(hljs) { - var NUMBERS = { - className: 'number', - begin: '\\b\\d+(\\.\\d+)?', - relevance: 0 - }; - var STRINGS = { - className: 'string', - begin: '"', - end: '"', - contains: [{ - className: 'variable', - begin: '\\${', - end: '\\}', - relevance: 9, - contains: [{ - className: 'string', - begin: '"', - end: '"' - }, { - className: 'meta', - begin: '[A-Za-z_0-9]*' + '\\(', - end: '\\)', - contains: [ - NUMBERS, { - className: 'string', - begin: '"', - end: '"', - contains: [{ - className: 'variable', - begin: '\\${', - end: '\\}', - contains: [{ - className: 'string', - begin: '"', - end: '"', - contains: [{ - className: 'variable', - begin: '\\${', - end: '\\}' - }] - }, { - className: 'meta', - begin: '[A-Za-z_0-9]*' + '\\(', - end: '\\)' - }] - }] - }, - 'self'] - }] - }] - }; - -return { - aliases: ['tf', 'hcl'], - keywords: 'resource variable provider output locals module data terraform|10', - literal: 'false true null', - contains: [ - hljs.COMMENT('\\#', '$'), - NUMBERS, - STRINGS - ] -} -} - -hljs.registerLanguage('terraform', hljsDefineTerraform); \ No newline at end of file diff --git a/apps/client/src/services/content_renderer.ts b/apps/client/src/services/content_renderer.ts index 619d2d7a6..6366e147d 100644 --- a/apps/client/src/services/content_renderer.ts +++ b/apps/client/src/services/content_renderer.ts @@ -12,10 +12,10 @@ import FAttachment from "../entities/fattachment.js"; import imageContextMenuService from "../menus/image_context_menu.js"; import { applySingleBlockSyntaxHighlight, applySyntaxHighlight } from "./syntax_highlight.js"; import { loadElkIfNeeded, postprocessMermaidSvg } from "./mermaid.js"; -import { normalizeMimeTypeForCKEditor } from "./mime_type_definitions.js"; import renderDoc from "./doc_renderer.js"; import { t } from "../services/i18n.js"; import WheelZoom from 'vanilla-js-wheel-zoom'; +import { normalizeMimeTypeForCKEditor } from "@triliumnext/commons"; let idCounter = 1; diff --git a/apps/client/src/services/library_loader.ts b/apps/client/src/services/library_loader.ts index a5ad0e3fc..431a8e2f9 100644 --- a/apps/client/src/services/library_loader.ts +++ b/apps/client/src/services/library_loader.ts @@ -1,7 +1,3 @@ -import mimeTypesService from "./mime_types.js"; -import optionsService from "./options.js"; -import { getStylesheetUrl } from "./syntax_highlight.js"; - export interface Library { js?: string[] | (() => string[]); css?: string[]; @@ -12,32 +8,6 @@ const KATEX: Library = { css: ["node_modules/katex/dist/katex.min.css"] }; -const HIGHLIGHT_JS: Library = { - js: () => { - const mimeTypes = mimeTypesService.getMimeTypes(); - const scriptsToLoad = new Set(); - scriptsToLoad.add("node_modules/@highlightjs/cdn-assets/highlight.min.js"); - for (const mimeType of mimeTypes) { - const id = mimeType.highlightJs; - if (!mimeType.enabled || !id) { - continue; - } - - if (mimeType.highlightJsSource === "libraries") { - scriptsToLoad.add(`libraries/highlightjs/${id}.js`); - } else { - // Built-in module. - scriptsToLoad.add(`node_modules/@highlightjs/cdn-assets/languages/${id}.min.js`); - } - } - - const currentTheme = String(optionsService.get("codeBlockTheme")); - loadHighlightingTheme(currentTheme); - - return Array.from(scriptsToLoad); - } -}; - async function requireLibrary(library: Library) { if (library.css) { library.css.map((cssUrl) => requireCss(cssUrl)); @@ -91,36 +61,8 @@ async function requireCss(url: string, prependAssetPath = true) { } } -let highlightingThemeEl: JQuery | null = null; -function loadHighlightingTheme(theme: string) { - if (!theme) { - return; - } - - if (theme === "none") { - // Deactivate the theme. - if (highlightingThemeEl) { - highlightingThemeEl.remove(); - highlightingThemeEl = null; - } - return; - } - - if (!highlightingThemeEl) { - highlightingThemeEl = $(``); - $("head").append(highlightingThemeEl); - } - - const url = getStylesheetUrl(theme); - if (url) { - highlightingThemeEl.attr("href", url); - } -} - export default { requireCss, requireLibrary, - loadHighlightingTheme, - KATEX, - HIGHLIGHT_JS + KATEX }; diff --git a/apps/client/src/services/mime_type_definitions.ts b/apps/client/src/services/mime_type_definitions.ts deleted file mode 100644 index 10c73e113..000000000 --- a/apps/client/src/services/mime_type_definitions.ts +++ /dev/null @@ -1,223 +0,0 @@ -// TODO: deduplicate with /src/services/import/mime_type_definitions.ts - -/** - * A pseudo-MIME type which is used in the editor to automatically determine the language used in code blocks via heuristics. - */ -export const MIME_TYPE_AUTO = "text-x-trilium-auto"; - -export interface MimeTypeDefinition { - default?: boolean; - title: string; - mime: string; - /** The name of the language/mime type as defined by highlight.js (or one of the aliases), in order to be used for syntax highlighting such as inside code blocks. */ - highlightJs?: string; - /** If specified, will load the corresponding highlight.js file from the `libraries/highlightjs/${id}.js` instead of `node_modules/@highlightjs/cdn-assets/languages/${id}.min.js`. */ - highlightJsSource?: "libraries"; - /** If specified, will load the corresponding highlight file from the given path instead of `node_modules`. */ - codeMirrorSource?: string; -} - -/** - * For highlight.js-supported languages, see https://github.com/highlightjs/highlight.js/blob/main/SUPPORTED_LANGUAGES.md. - */ - -export const MIME_TYPES_DICT: readonly MimeTypeDefinition[] = Object.freeze([ - { title: "Plain text", mime: "text/plain", highlightJs: "plaintext", default: true }, - - // Keep sorted alphabetically. - { 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: "Batch file (DOS)", mime: "application/x-bat", highlightJs: "dos", codeMirrorSource: "libraries/codemirror/batch.js" }, - { title: "Brainfuck", mime: "text/x-brainfuck", highlightJs: "brainfuck" }, - { 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", default: true }, - { 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", highlightJs: "cmake" }, - { title: "Cobol", mime: "text/x-cobol" }, - { 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", highlightJs: "crystal" }, - { title: "CSS", mime: "text/css", highlightJs: "css", default: true }, - { title: "Cypher", mime: "application/x-cypher-query" }, - { title: "Cython", mime: "text/x-cython" }, - { 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", 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", highlightJs: "elm" }, - { title: "Embedded Javascript", mime: "application/x-ejs" }, - { 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", 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", highlightJs: "fortran" }, - { title: "Gas", mime: "text/x-gas" }, - { title: "GDScript (Godot)", mime: "text/x-gdscript" }, - { title: "Gherkin", mime: "text/x-feature", highlightJs: "gherkin" }, - { title: "GitHub Flavored Markdown", mime: "text/x-gfm", highlightJs: "markdown" }, - { title: "Go", mime: "text/x-go", highlightJs: "go", default: true }, - { title: "Groovy", mime: "text/x-groovy", highlightJs: "groovy", default: true }, - { title: "HAML", mime: "text/x-haml", highlightJs: "haml" }, - { title: "Haskell (Literate)", mime: "text/x-literate-haskell" }, - { title: "Haskell", mime: "text/x-haskell", highlightJs: "haskell", default: true }, - { title: "Haxe", mime: "text/x-haxe", highlightJs: "haxe" }, - { title: "HTML", mime: "text/html", highlightJs: "xml", default: true }, - { title: "HTTP", mime: "message/http", highlightJs: "http", default: true }, - { title: "HXML", mime: "text/x-hxml" }, - { title: "IDL", mime: "text/x-idl" }, - { title: "Java Server Pages", mime: "application/x-jsp", highlightJs: "java" }, - { title: "Java", mime: "text/x-java", highlightJs: "java", default: true }, - { title: "Jinja2", mime: "text/jinja2" }, - { 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-LD", mime: "application/ld+json", highlightJs: "json" }, - { title: "JSON", mime: "application/json", highlightJs: "json", default: true }, - { title: "JSX", mime: "text/jsx", highlightJs: "javascript" }, - { title: "Julia", mime: "text/x-julia", highlightJs: "julia" }, - { title: "Kotlin", mime: "text/x-kotlin", highlightJs: "kotlin", default: true }, - { 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" }, - { title: "Markdown", mime: "text/x-markdown", highlightJs: "markdown", default: true }, - { title: "Mathematica", mime: "text/x-mathematica", highlightJs: "mathematica" }, - { title: "mbox", mime: "application/mbox" }, - { title: "MIPS Assembler", mime: "text/x-asm-mips", highlightJs: "mipsasm" }, - { title: "mIRC", mime: "text/mirc" }, - { title: "Modelica", mime: "text/x-modelica" }, - { 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", highlightJs: "sql" }, - { title: "Nix", mime: "text/x-nix", highlightJs: "nix" }, - { 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", 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", highlightJs: "delphi" }, - { title: "PEG.js", mime: "null" }, - { title: "Perl", mime: "text/x-perl", default: true }, - { title: "PGP", mime: "application/pgp" }, - { title: "PHP", mime: "text/x-php", default: true, highlightJs: "php" }, - { title: "Pig", mime: "text/x-pig" }, - { 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", highlightJs: "puppet" }, - { title: "Python", mime: "text/x-python", highlightJs: "python", default: true }, - { 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" }, - { title: "Ruby", mime: "text/x-ruby", highlightJs: "ruby", default: true }, - { title: "Rust", mime: "text/x-rustsrc", highlightJs: "rust" }, - { title: "SAS", mime: "text/x-sas", highlightJs: "sas" }, - { title: "Sass", mime: "text/x-sass", highlightJs: "scss" }, - { title: "Scala", mime: "text/x-scala" }, - { title: "Scheme", mime: "text/x-scheme" }, - { title: "SCSS", mime: "text/x-scss", highlightJs: "scss" }, - { title: "Shell (bash)", mime: "text/x-sh", highlightJs: "bash", default: true }, - { title: "Sieve", mime: "application/sieve" }, - { title: "Slim", mime: "text/x-slim" }, - { title: "Smalltalk", mime: "text/x-stsrc", highlightJs: "smalltalk" }, - { title: "Smarty", mime: "text/x-smarty" }, - { 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" }, - { title: "SQL", mime: "text/x-sql", highlightJs: "sql", default: true }, - { title: "SQLite (Trilium)", mime: "text/x-sqlite;schema=trilium", highlightJs: "sql", default: true }, - { title: "SQLite", mime: "text/x-sqlite", highlightJs: "sql" }, - { title: "Squirrel", mime: "text/x-squirrel" }, - { title: "sTeX", mime: "text/x-stex" }, - { title: "Stylus", mime: "text/x-styl", highlightJs: "stylus" }, - { title: "Swift", mime: "text/x-swift", default: true }, - { title: "SystemVerilog", mime: "text/x-systemverilog" }, - { title: "Tcl", mime: "text/x-tcl", highlightJs: "tcl" }, - { title: "Terraform (HCL)", mime: "text/x-hcl", highlightJs: "terraform", highlightJsSource: "libraries", codeMirrorSource: "libraries/codemirror/hcl.js" }, - { title: "Textile", mime: "text/x-textile" }, - { title: "TiddlyWiki ", mime: "text/x-tiddlywiki" }, - { title: "Tiki wiki", mime: "text/tiki" }, - { title: "TOML", mime: "text/x-toml", highlightJs: "ini" }, - { title: "Tornado", mime: "text/x-tornado" }, - { title: "troff", mime: "text/troff" }, - { title: "TTCN_CFG", mime: "text/x-ttcn-cfg" }, - { title: "TTCN", mime: "text/x-ttcn" }, - { title: "Turtle", mime: "text/turtle" }, - { title: "Twig", mime: "text/x-twig", highlightJs: "twig" }, - { title: "TypeScript-JSX", mime: "text/typescript-jsx", highlightJs: "typescript" }, - { title: "TypeScript", mime: "application/typescript", highlightJs: "typescript" }, - { 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", 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" }, - { title: "XML", mime: "text/xml", highlightJs: "xml", default: true }, - { title: "XQuery", mime: "application/xquery", highlightJs: "xquery" }, - { title: "xu", mime: "text/x-xu" }, - { title: "Yacas", mime: "text/x-yacas" }, - { title: "YAML", mime: "text/x-yaml", highlightJs: "yaml", default: true }, - { title: "Z80", mime: "text/x-z80" } -]); - -/** - * 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 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`). - */ -export function normalizeMimeTypeForCKEditor(mimeType: string) { - return mimeType.toLowerCase().replace(/[\W_]+/g, "-"); -} - -let byHighlightJsNameMappings: Record | null = null; - -/** - * Given a Highlight.js language tag (e.g. `css`), it returns a corresponding {@link MimeTypeDefinition} if found. - * - * If there are multiple {@link MimeTypeDefinition}s for the language tag, then only the first one is retrieved. For example for `javascript`, the "JS frontend" mime type is returned. - * - * @param highlightJsName a language tag. - * @returns the corresponding {@link MimeTypeDefinition} if found, or `undefined` otherwise. - */ -export function getMimeTypeFromHighlightJs(highlightJsName: string) { - if (!byHighlightJsNameMappings) { - byHighlightJsNameMappings = {}; - for (const mimeType of MIME_TYPES_DICT) { - if (mimeType.highlightJs && !byHighlightJsNameMappings[mimeType.highlightJs]) { - byHighlightJsNameMappings[mimeType.highlightJs] = mimeType; - } - } - } - - return byHighlightJsNameMappings[highlightJsName]; -} diff --git a/apps/client/src/services/mime_types.ts b/apps/client/src/services/mime_types.ts index f0f318141..3b72c531c 100644 --- a/apps/client/src/services/mime_types.ts +++ b/apps/client/src/services/mime_types.ts @@ -1,13 +1,6 @@ -import { MIME_TYPE_AUTO, MIME_TYPES_DICT, normalizeMimeTypeForCKEditor, type MimeTypeDefinition } from "./mime_type_definitions.js"; +import { normalizeMimeTypeForCKEditor, type MimeType, MIME_TYPE_AUTO, MIME_TYPES_DICT } from "@triliumnext/commons"; import options from "./options.js"; -interface MimeType extends MimeTypeDefinition { - /** - * True if this mime type was enabled by the user in the "Available MIME types in the dropdown" option in the Code Notes settings. - */ - enabled: boolean; -} - let mimeTypes: MimeType[] | null = null; function loadMimeTypes() { @@ -45,8 +38,8 @@ export function getHighlightJsNameForMime(mimeType: string) { 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); - if (mimeType.highlightJs) { - mimeToHighlightJsMapping[normalizedMime] = mimeType.highlightJs; + if (mimeType.mdLanguageCode) { + mimeToHighlightJsMapping[normalizedMime] = mimeType.mdLanguageCode; } } } diff --git a/apps/client/src/services/syntax_highlight.ts b/apps/client/src/services/syntax_highlight.ts index ae2fbde72..7dfb29f30 100644 --- a/apps/client/src/services/syntax_highlight.ts +++ b/apps/client/src/services/syntax_highlight.ts @@ -1,19 +1,8 @@ -import library_loader from "./library_loader.js"; +import { ensureMimeTypes, highlight, highlightAuto, loadTheme, Themes } from "@triliumnext/highlightjs"; import mime_types from "./mime_types.js"; import options from "./options.js"; -export function getStylesheetUrl(theme: string) { - 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; -} +let highlightingLoaded = false; /** * 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. @@ -25,6 +14,8 @@ export async function applySyntaxHighlight($container: JQuery) { return; } + await ensureMimeTypesForHighlighting(); + const codeBlocks = $container.find("pre code"); for (const codeBlock of codeBlocks) { const normalizedMimeType = extractLanguageFromClassList(codeBlock); @@ -43,20 +34,13 @@ export async function applySingleBlockSyntaxHighlight($codeBlock: JQuery void; diff --git a/apps/client/src/widgets/note_detail.ts b/apps/client/src/widgets/note_detail.ts index 238683809..3b232134a 100644 --- a/apps/client/src/widgets/note_detail.ts +++ b/apps/client/src/widgets/note_detail.ts @@ -3,12 +3,10 @@ import NoteContextAwareWidget from "./note_context_aware_widget.js"; import protectedSessionHolder from "../services/protected_session_holder.js"; import SpacedUpdate from "../services/spaced_update.js"; import server from "../services/server.js"; -import libraryLoader from "../services/library_loader.js"; import appContext, { type CommandListenerData, type EventData } from "../components/app_context.js"; import keyboardActionsService from "../services/keyboard_actions.js"; import noteCreateService from "../services/note_create.js"; import attributeService from "../services/attributes.js"; -import attributeRenderer from "../services/attribute_renderer.js"; import EmptyTypeWidget from "./type_widgets/empty.js"; import EditableTextTypeWidget from "./type_widgets/editable_text.js"; @@ -30,7 +28,6 @@ import ContentWidgetTypeWidget from "./type_widgets/content_widget.js"; import AttachmentListTypeWidget from "./type_widgets/attachment_list.js"; import AttachmentDetailTypeWidget from "./type_widgets/attachment_detail.js"; import MindMapWidget from "./type_widgets/mind_map.js"; -import { getStylesheetUrl, isSyntaxHighlightEnabled } from "../services/syntax_highlight.js"; import GeoMapTypeWidget from "./type_widgets/geo_map.js"; import utils from "../services/utils.js"; import type { NoteType } from "../entities/fnote.js"; diff --git a/apps/client/src/widgets/type_widgets/ckeditor/config.ts b/apps/client/src/widgets/type_widgets/ckeditor/config.ts index b4ba9633a..e58fac8f1 100644 --- a/apps/client/src/widgets/type_widgets/ckeditor/config.ts +++ b/apps/client/src/widgets/type_widgets/ckeditor/config.ts @@ -1,9 +1,8 @@ -import library_loader from "../../../services/library_loader.js"; import { ALLOWED_PROTOCOLS } from "../../../services/link.js"; -import { MIME_TYPE_AUTO } from "../../../services/mime_type_definitions.js"; +import { MIME_TYPE_AUTO } from "@triliumnext/commons"; import { getHighlightJsNameForMime } from "../../../services/mime_types.js"; import options from "../../../services/options.js"; -import { isSyntaxHighlightEnabled } from "../../../services/syntax_highlight.js"; +import { ensureMimeTypesForHighlighting, isSyntaxHighlightEnabled } from "../../../services/syntax_highlight.js"; import utils from "../../../services/utils.js"; import emojiDefinitionsUrl from "@triliumnext/ckeditor5/emoji_definitions/en.json?external"; @@ -104,9 +103,9 @@ export function buildConfig() { definitionsUrl: emojiDefinitionsUrl }, syntaxHighlighting: { - async loadHighlightJs() { - await library_loader.requireLibrary(library_loader.HIGHLIGHT_JS); - return hljs; + loadHighlightJs: async () => { + await ensureMimeTypesForHighlighting(); + return await import("@triliumnext/highlightjs"); }, mapLanguageName: getHighlightJsNameForMime, defaultMimeType: MIME_TYPE_AUTO, diff --git a/apps/client/src/widgets/type_widgets/editable_text.ts b/apps/client/src/widgets/type_widgets/editable_text.ts index e1faac24f..605a0b898 100644 --- a/apps/client/src/widgets/type_widgets/editable_text.ts +++ b/apps/client/src/widgets/type_widgets/editable_text.ts @@ -12,13 +12,13 @@ import appContext, { type CommandListenerData, type EventData } from "../../comp import dialogService from "../../services/dialog.js"; import options from "../../services/options.js"; import toast from "../../services/toast.js"; -import { normalizeMimeTypeForCKEditor } from "../../services/mime_type_definitions.js"; import { buildSelectedBackgroundColor } from "../../components/touch_bar.js"; import { buildConfig, buildToolbarConfig } from "./ckeditor/config.js"; import type FNote from "../../entities/fnote.js"; import { getMermaidConfig } from "../../services/mermaid.js"; import { PopupEditor, ClassicEditor, EditorWatchdog, type CKTextEditor, type MentionFeed, type WatchdogConfig } from "@triliumnext/ckeditor5"; import "@triliumnext/ckeditor5/index.css"; +import { normalizeMimeTypeForCKEditor } from "@triliumnext/commons"; const ENABLE_INSPECTOR = false; diff --git a/apps/client/src/widgets/type_widgets/options/text_notes/code_block.ts b/apps/client/src/widgets/type_widgets/options/text_notes/code_block.ts index 162499274..0a97d37d3 100644 --- a/apps/client/src/widgets/type_widgets/options/text_notes/code_block.ts +++ b/apps/client/src/widgets/type_widgets/options/text_notes/code_block.ts @@ -1,10 +1,11 @@ -import type { OptionMap } from "@triliumnext/commons"; +import { normalizeMimeTypeForCKEditor, type OptionMap } from "@triliumnext/commons"; 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"; +import { ensureMimeTypesForHighlighting, loadHighlightingTheme } from "../../../../services/syntax_highlight.js"; +import { Themes, type Theme } from "@triliumnext/highlightjs"; -const SAMPLE_LANGUAGE = "javascript"; +const SAMPLE_LANGUAGE = normalizeMimeTypeForCKEditor("application/javascript;env=frontend"); const SAMPLE_CODE = `\ const n = 10; greet(n); // Print "Hello World" for n times @@ -55,14 +56,6 @@ const TPL = /*html*/` `; -// TODO: Deduplicate -interface Theme { - title: string; - val: string; -} - -type Response = Record; - /** * Contains appearance settings for code blocks within text notes, such as the theme for the syntax highlighter. */ @@ -75,9 +68,31 @@ export default class CodeBlockOptions extends OptionsWidget { doRender() { this.$widget = $(TPL); this.$themeSelect = this.$widget.find(".theme-select"); + + // Populate the list of themes. + const themeGroups = groupThemesByLightOrDark(); + for (const [key, themes] of Object.entries(themeGroups)) { + const $group = key ? $("").attr("label", key) : null; + + for (const theme of themes) { + const option = $("