From 9e3c1b46cd33e2018d38dc9565609590b4857303 Mon Sep 17 00:00:00 2001 From: Elian Doran Date: Thu, 31 Oct 2024 22:47:34 +0200 Subject: [PATCH] client: Don't load syntax highlighter when not needed --- src/public/app/services/content_renderer.js | 2 +- src/public/app/services/syntax_highlight.js | 21 +++++++++++++++++-- .../type_widgets/ckeditor/syntax_highlight.js | 10 +++++++-- .../app/widgets/type_widgets/editable_text.js | 6 ++---- .../widgets/type_widgets/read_only_text.js | 5 ++--- 5 files changed, 32 insertions(+), 12 deletions(-) diff --git a/src/public/app/services/content_renderer.js b/src/public/app/services/content_renderer.js index 8d7f5ce55..162ad3630 100644 --- a/src/public/app/services/content_renderer.js +++ b/src/public/app/services/content_renderer.js @@ -107,7 +107,7 @@ async function renderText(note, $renderedContent) { await linkService.loadReferenceLinkTitle($(el)); } - applySyntaxHighlight($renderedContent); + await applySyntaxHighlight($renderedContent); } else { await renderChildrenList($renderedContent, note); } diff --git a/src/public/app/services/syntax_highlight.js b/src/public/app/services/syntax_highlight.js index 01c0f843c..224198fa2 100644 --- a/src/public/app/services/syntax_highlight.js +++ b/src/public/app/services/syntax_highlight.js @@ -1,11 +1,19 @@ +import library_loader from "./library_loader.js"; import mime_types from "./mime_types.js"; +import options from "./options.js"; /** - * Identifies all the code blocks under the specified hierarchy and uses the highlight.js library to obtain the highlighted text which is then applied on to the code blocks. + * 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 function applySyntaxHighlight($container) { +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"); @@ -31,6 +39,15 @@ export function applySyntaxHighlight($container) { } } +/** + * 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. * diff --git a/src/public/app/widgets/type_widgets/ckeditor/syntax_highlight.js b/src/public/app/widgets/type_widgets/ckeditor/syntax_highlight.js index c57139c52..771b20d8c 100644 --- a/src/public/app/widgets/type_widgets/ckeditor/syntax_highlight.js +++ b/src/public/app/widgets/type_widgets/ckeditor/syntax_highlight.js @@ -8,10 +8,16 @@ * 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 function initSyntaxHighlighting(editor) { - console.log("Init syntax highlight"); +export async function initSyntaxHighlighting(editor) { + if (!isSyntaxHighlightEnabled) { + return; + } + + await library_loader.requireLibrary(library_loader.HIGHLIGHT_JS); initTextEditor(editor); } diff --git a/src/public/app/widgets/type_widgets/editable_text.js b/src/public/app/widgets/type_widgets/editable_text.js index 34ef68995..5c2120105 100644 --- a/src/public/app/widgets/type_widgets/editable_text.js +++ b/src/public/app/widgets/type_widgets/editable_text.js @@ -12,6 +12,7 @@ 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; @@ -124,7 +125,6 @@ export default class EditableTextTypeWidget extends AbstractTextTypeWidget { async initEditor() { await libraryLoader.requireLibrary(libraryLoader.CKEDITOR); - await libraryLoader.requireLibrary(libraryLoader.HIGHLIGHT_JS); const codeBlockLanguages = buildListOfLanguages(); @@ -171,9 +171,7 @@ export default class EditableTextTypeWidget extends AbstractTextTypeWidget { this.watchdog.setCreator(async (elementOrData, editorConfig) => { const editor = await BalloonEditor.create(elementOrData, editorConfig); - if (options.get("codeBlockTheme") !== "none") { - initSyntaxHighlighting(editor); - } + await initSyntaxHighlighting(editor); editor.model.document.on('change:data', () => this.spacedUpdate.scheduleUpdate()); diff --git a/src/public/app/widgets/type_widgets/read_only_text.js b/src/public/app/widgets/type_widgets/read_only_text.js index 6c11b65ee..ec1e197c4 100644 --- a/src/public/app/widgets/type_widgets/read_only_text.js +++ b/src/public/app/widgets/type_widgets/read_only_text.js @@ -90,8 +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.HIGHLIGHT_JS); + await libraryLoader.requireLibrary(libraryLoader.CKEDITOR); const blob = await note.getBlob(); @@ -113,7 +112,7 @@ export default class ReadOnlyTextTypeWidget extends AbstractTextTypeWidget { renderMathInElement(this.$content[0], {trust: true}); } - applySyntaxHighlight(this.$content); + await applySyntaxHighlight(this.$content); } async refreshIncludedNoteEvent({noteId}) {