gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-11-26 02:24:23 +01:00
Code Issues Actions 12 Packages Projects Releases Wiki Activity

feat(options/code): display tooltip for syntax highlighting support

Browse Source
This commit is contained in:
Elian Doran 2025-11-24 17:43:02 +02:00
parent c07ad348bd
commit 9f381a7b30
No known key found for this signature in database
3 changed files with 29 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
apps/client/src/translations/en/translation.json
View File

@ -1309,7 +1309,10 @@
"title": "Editor" "title": "Editor"
}, },
"code_mime_types": { "code_mime_types": {
"title": "Available MIME types in the dropdown" "title": "Available MIME types in the dropdown",
"tooltip_syntax_highlighting": "Syntax highlighting",
"tooltip_code_block_syntax": "Code blocks in Text notes",
"tooltip_code_note_syntax": "Code notes"
}, },
"vim_key_bindings": { "vim_key_bindings": {
"use_vim_keybindings_in_code_notes": "Vim keybindings", "use_vim_keybindings_in_code_notes": "Vim keybindings",

26
apps/client/src/widgets/type_widgets/options/code_notes.tsx
View File

@ -4,7 +4,7 @@ import Column from "../../react/Column";
import FormCheckbox from "../../react/FormCheckbox"; import FormCheckbox from "../../react/FormCheckbox";
import FormGroup from "../../react/FormGroup"; import FormGroup from "../../react/FormGroup";
import FormSelect from "../../react/FormSelect"; import FormSelect from "../../react/FormSelect";
import { useTriliumOption, useTriliumOptionBool, useTriliumOptionJson } from "../../react/hooks"; import { useStaticTooltip, useTriliumOption, useTriliumOptionBool, useTriliumOptionJson } from "../../react/hooks";
import OptionsSection from "./components/OptionsSection"; import OptionsSection from "./components/OptionsSection";
import { useEffect, useMemo, useRef } from "preact/hooks"; import { useEffect, useMemo, useRef } from "preact/hooks";
import codeNoteSample from "./samples/code_note.txt?raw"; import codeNoteSample from "./samples/code_note.txt?raw";
@ -14,6 +14,8 @@ import mime_types from "../../../services/mime_types";
import CheckboxList from "./components/CheckboxList"; import CheckboxList from "./components/CheckboxList";
import AutoReadOnlySize from "./components/AutoReadOnlySize"; import AutoReadOnlySize from "./components/AutoReadOnlySize";
import "./code_notes.css"; import "./code_notes.css";
import { byMimeType as codeBlockMimeTypes } from "@triliumnext/highlightjs/src/syntax_highlighting";
import { default as codeNoteMimeTypes } from "@triliumnext/codemirror/src/syntax_highlighting";
const SAMPLE_MIME = "application/typescript"; const SAMPLE_MIME = "application/typescript";
@ -134,6 +136,26 @@ function CodeMimeTypes() {
type MimeTypeWithDisabled = MimeType & { disabled?: boolean }; type MimeTypeWithDisabled = MimeType & { disabled?: boolean };
export function CodeMimeTypesList() { export function CodeMimeTypesList() {
const containerRef = useRef<HTMLUListElement>(null);
useStaticTooltip(containerRef, {
title() {
const mime = this.querySelector("input")?.value;
if (!mime) return "";
const hasCodeBlockSyntax = !!codeBlockMimeTypes[mime];
const hasCodeNoteSyntax = !!codeNoteMimeTypes[mime];
return `
<strong>${t("code_mime_types.tooltip_syntax_highlighting")}</strong><br/>
${hasCodeBlockSyntax ? "✅" : "❌"} ${t("code_mime_types.tooltip_code_block_syntax")}<br/>
${hasCodeNoteSyntax ? "✅" : "❌"} ${t("code_mime_types.tooltip_code_note_syntax")}
`;
},
selector: "label",
placement: "right",
fallbackPlacements: [ "left", "right" ],
html: true
});
const [ codeNotesMimeTypes, setCodeNotesMimeTypes ] = useTriliumOptionJson<string[]>("codeNotesMimeTypes"); const [ codeNotesMimeTypes, setCodeNotesMimeTypes ] = useTriliumOptionJson<string[]>("codeNotesMimeTypes");
const groupedMimeTypes: Record<string, MimeType[]> = useMemo(() => { const groupedMimeTypes: Record<string, MimeType[]> = useMemo(() => {
mime_types.loadMimeTypes(); mime_types.loadMimeTypes();
@ -160,7 +182,7 @@ export function CodeMimeTypesList() {
}, [ codeNotesMimeTypes ]); }, [ codeNotesMimeTypes ]);
return ( return (
<ul class="options-mime-types"> <ul class="options-mime-types" ref={containerRef}>
{Object.entries(groupedMimeTypes).map(([ initial, mimeTypes ]) => ( {Object.entries(groupedMimeTypes).map(([ initial, mimeTypes ]) => (
<section> <section>
{ initial && <h5>{initial}</h5> } { initial && <h5>{initial}</h5> }

2
packages/highlightjs/src/syntax_highlighting.ts
View File

@ -3,7 +3,7 @@ import type { LanguageFn } from "highlight.js";
type MimeRecord = Record<string, (() => Promise<{ default: LanguageFn}>) | null>; type MimeRecord = Record<string, (() => Promise<{ default: LanguageFn}>) | null>;
const byMimeType: MimeRecord = { export const byMimeType: MimeRecord = {
"text/plain": () => import("highlight.js/lib/languages/plaintext"), "text/plain": () => import("highlight.js/lib/languages/plaintext"),
"application/dart": () => import("highlight.js/lib/languages/dart"), "application/dart": () => import("highlight.js/lib/languages/dart"),
"application/edn": () => import("highlight.js/lib/languages/clojure"), "application/edn": () => import("highlight.js/lib/languages/clojure"),