feat(ck-mermaid): support read-only mode

This commit is contained in:
Elian Doran 2025-01-07 18:53:35 +02:00
parent 19c90445fa
commit b81c15c84c
No known key found for this signature in database

View File

@ -1,6 +1,7 @@
import AbstractTextTypeWidget from "./abstract_text_type_widget.js";
import libraryLoader from "../../services/library_loader.js";
import { applySyntaxHighlight } from "../../services/syntax_highlight.js";
import { getMermaidConfig } from "../mermaid.js";
const TPL = `
<div class="note-detail-readonly-text note-detail-printable">
@ -112,9 +113,26 @@ export default class ReadOnlyTextTypeWidget extends AbstractTextTypeWidget {
renderMathInElement(this.$content[0], {trust: true});
}
await this.#applyInlineMermaid();
await applySyntaxHighlight(this.$content);
}
async #applyInlineMermaid() {
const $el = this.$content.find('code[class="language-mermaid"]').closest("pre");
if (!$el.length) {
return;
}
// Rewrite the code block from <pre><code> to <div> in order not to apply a codeblock style to it.
$el.replaceWith((i, content) => {
return $('<div class="mermaid-diagram">').text($(content).text());
});
// Initialize mermaid
await libraryLoader.requireLibrary(libraryLoader.MERMAID);
mermaid.init(getMermaidConfig(), this.$content.find(".mermaid-diagram"));
}
async refreshIncludedNoteEvent({noteId}) {
this.refreshIncludedNote(this.$content, noteId);
}