diff --git a/apps/client/src/widgets/type_widgets/abstract_split_type_widget.ts b/apps/client/src/widgets/type_widgets/abstract_split_type_widget.ts index 3b1cb222b..c3cd63272 100644 --- a/apps/client/src/widgets/type_widgets/abstract_split_type_widget.ts +++ b/apps/client/src/widgets/type_widgets/abstract_split_type_widget.ts @@ -8,6 +8,7 @@ import options from "../../services/options.js"; import type SwitchSplitOrientationButton from "../floating_buttons/switch_layout_button.js"; import type { EventData } from "../../components/app_context.js"; import type OnClickButtonWidget from "../buttons/onclick_button.js"; +import type { EditorConfig } from "@triliumnext/codemirror"; const TPL = /*html*/`\
@@ -242,7 +243,7 @@ export default abstract class AbstractSplitTypeWidget extends TypeWidget { /** * Called upon when the code editor is being initialized. Can be used to add additional options to the editor. */ - buildEditorExtraOptions(): Partial { + buildEditorExtraOptions(): Partial { return { lineWrapping: false }; diff --git a/apps/client/src/widgets/type_widgets/mermaid.ts b/apps/client/src/widgets/type_widgets/mermaid.ts index 50353e230..c8642c993 100644 --- a/apps/client/src/widgets/type_widgets/mermaid.ts +++ b/apps/client/src/widgets/type_widgets/mermaid.ts @@ -1,3 +1,4 @@ +import type { EditorConfig } from "@triliumnext/codemirror"; import { getMermaidConfig, loadElkIfNeeded, postprocessMermaidSvg } from "../../services/mermaid.js"; import AbstractSvgSplitTypeWidget from "./abstract_svg_split_type_widget.js"; diff --git a/docs/Release Notes/Release Notes/v0.94.0.md b/docs/Release Notes/Release Notes/v0.94.0.md index 18062acc7..ecc1e08c0 100644 --- a/docs/Release Notes/Release Notes/v0.94.0.md +++ b/docs/Release Notes/Release Notes/v0.94.0.md @@ -26,6 +26,7 @@ * [Make it show which node triggered the event when right-clicking on tree](https://github.com/TriliumNext/Notes/pull/1861) by @SiriusXT * [Only expand/collapse the left pane of the focused window](https://github.com/TriliumNext/Notes/pull/1905) by @SiriusXT * Code notes now have support for GDScript (Godot). +* Mermaid diagrams: basic syntax highlight (not all diagram types are supported) and code folding. ## 📖 Documentation diff --git a/packages/codemirror/package.json b/packages/codemirror/package.json index 6982b5f29..244b513ed 100644 --- a/packages/codemirror/package.json +++ b/packages/codemirror/package.json @@ -35,6 +35,7 @@ "@ssddanbrown/codemirror-lang-smarty": "1.0.0", "@ssddanbrown/codemirror-lang-twig": "1.0.0", "codemirror-lang-hcl": "0.1.0", + "codemirror-lang-mermaid": "0.5.0", "eslint-linter-browserify": "9.26.0" } } diff --git a/packages/codemirror/src/syntax_highlighting.ts b/packages/codemirror/src/syntax_highlighting.ts index ca10bd9f2..eb04b4955 100644 --- a/packages/codemirror/src/syntax_highlighting.ts +++ b/packages/codemirror/src/syntax_highlighting.ts @@ -17,6 +17,11 @@ async function buildJavaScript(mimeType: string) { return extensions; } +async function buildMermaid() { + const { mermaid, foldByIndent } = (await import('codemirror-lang-mermaid')); + return [ mermaid(), foldByIndent() ]; +} + const byMimeType: Record Promise | LanguageSupport | Extension[]>) | null> = { "text/plain": null, @@ -55,6 +60,8 @@ const byMimeType: Record Promise | Language "text/typescript-jsx": async () => (await import('@codemirror/lang-javascript')).javascript({ typescript: true, jsx: true }), "text/vbscript": async () => (await import('@codemirror/legacy-modes/mode/vbscript')).vbScript, "text/velocity": async () => (await import('@codemirror/legacy-modes/mode/velocity')).velocity, + "text/vnd.mermaid": async () => buildMermaid(), + "text/mermaid": async () => buildMermaid(), "text/x-asm-mips": null, "text/x-asterisk": async () => (await import('@codemirror/legacy-modes/mode/asterisk')).asterisk, "text/x-brainfuck": async () => (await import('@codemirror/legacy-modes/mode/brainfuck')).brainfuck, diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 2ad7918e7..e2d16b2d4 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -1199,6 +1199,9 @@ importers: codemirror-lang-hcl: specifier: 0.1.0 version: 0.1.0 + codemirror-lang-mermaid: + specifier: 0.5.0 + version: 0.5.0 eslint-linter-browserify: specifier: 9.26.0 version: 9.26.0 @@ -6441,6 +6444,9 @@ packages: codemirror-lang-hcl@0.1.0: resolution: {integrity: sha512-duwKEaQDhkJWad4YQ9pv4282BS6hCdR+gS/qTAj3f9bypXNNZ42bIN43h9WK3DjyZRENtVlUQdrQM1sA44wHmA==} + codemirror-lang-mermaid@0.5.0: + resolution: {integrity: sha512-Taw/2gPCyNArQJCxIP/HSUif+3zrvD+6Ugt7KJZ2dUKou/8r3ZhcfG8krNTZfV2iu8AuGnymKuo7bLPFyqsh/A==} + codemirror@5.65.19: resolution: {integrity: sha512-+aFkvqhaAVr1gferNMuN8vkTSrWIFvzlMV9I2KBLCWS2WpZ2+UAkZjlMZmEuT+gcXTi6RrGQCkWq1/bDtGqhIA==} @@ -22058,6 +22064,12 @@ snapshots: '@lezer/highlight': 1.2.1 '@lezer/lr': 1.4.2 + codemirror-lang-mermaid@0.5.0: + dependencies: + '@codemirror/language': 6.11.0 + '@lezer/highlight': 1.2.1 + '@lezer/lr': 1.4.2 + codemirror@5.65.19: {} collect-v8-coverage@1.0.2: {}