* Update CSS variable values
()
| 14 | * Update CSS variable values |
| 15 | */ |
| 16 | updateCSSVariables() { |
| 17 | const root = document.documentElement |
| 18 | |
| 19 | // Helper function: get translated text, falling back to the default value if translation fails |
| 20 | const getTranslation = (key, defaultValue) => { |
| 21 | const translation = this.t(key) |
| 22 | // If the translation function returns the key itself, the translation failed; use the default value |
| 23 | return translation === key ? defaultValue : translation |
| 24 | } |
| 25 | |
| 26 | // Update all CSS variables |
| 27 | root.style.setProperty( |
| 28 | '--i18n-highlight-start', |
| 29 | `"${getTranslation('editor.highlight-start', ' [highlight start] ')}"` |
| 30 | ) |
| 31 | root.style.setProperty( |
| 32 | '--i18n-highlight-end', |
| 33 | `"${getTranslation('editor.highlight-end', ' [highlight end] ')}"` |
| 34 | ) |
| 35 | root.style.setProperty( |
| 36 | '--i18n-type-at-to-insert', |
| 37 | `"${getTranslation('editor.type-at-to-insert', 'Type @ to insert')}"` |
| 38 | ) |
| 39 | root.style.setProperty( |
| 40 | '--i18n-input-footnote-definition', |
| 41 | `"${getTranslation('editor.input-footnote-definition', 'Input footnote definition')}"` |
| 42 | ) |
| 43 | root.style.setProperty( |
| 44 | '--i18n-input-yaml-front-matter', |
| 45 | `"${getTranslation('editor.input-yaml-front-matter', 'Input YAML front matter')}"` |
| 46 | ) |
| 47 | root.style.setProperty( |
| 48 | '--i18n-input-language-identifier', |
| 49 | `"${getTranslation('editor.input-language-identifier', 'Input language identifier')}"` |
| 50 | ) |
| 51 | root.style.setProperty( |
| 52 | '--i18n-input-mathematical-formula', |
| 53 | `"${getTranslation('editor.input-mathematical-formula', 'Input mathematical formula')}"` |
| 54 | ) |
| 55 | root.style.setProperty('--i18n-fence', `"${getTranslation('editor.fence', 'fence')}"`) |
| 56 | root.style.setProperty('--i18n-indent', `"${getTranslation('editor.indent', 'indent')}"`) |
| 57 | root.style.setProperty( |
| 58 | '--i18n-front-matter-delimiter', |
| 59 | `"${getTranslation('editor.front-matter-delimiter', 'front matter delimiter')}"` |
| 60 | ) |
| 61 | root.style.setProperty( |
| 62 | '--i18n-math-delimiter', |
| 63 | `"${getTranslation('editor.math-delimiter', 'math delimiter')}"` |
| 64 | ) |
| 65 | root.style.setProperty( |
| 66 | '--i18n-mermaid-start', |
| 67 | `"${getTranslation('editor.mermaid-start', 'mermaid start')}"` |
| 68 | ) |
| 69 | root.style.setProperty( |
| 70 | '--i18n-flowchart-start', |
| 71 | `"${getTranslation('editor.flowchart-start', 'flowchart start')}"` |
| 72 | ) |
| 73 | root.style.setProperty( |
no test coverage detected