mirror of
https://github.com/narrrl/narl-workspace.git
synced 2026-11-03 16:41:27 +01:00
nvrl
3c4c383f72
Enter on a card floats a sheet over the board: its labels, a markdown description written in the vim editor (:w writes it to the card), and a checklist walked with j/k, ticked with Space, grown with o. Labels take their colour from their name. A repeating card comes back with its checklist reopened. Code in the editor and in rendered fences is coloured from nvim's yorha.lua, one class per highlight group, for every language @codemirror/language-data knows; the languages load on first use.
66 lines
2.3 KiB
TypeScript
66 lines
2.3 KiB
TypeScript
/*
|
|
* What every editor on the page looks like: the frame of it, and the colours
|
|
* of what is written in it, in any language a fence names.
|
|
*/
|
|
import { syntaxHighlighting } from '@codemirror/language'
|
|
import { languages } from '@codemirror/language-data'
|
|
import { EditorView } from '@codemirror/view'
|
|
import { highlighter } from './highlight'
|
|
|
|
/** The languages a fence can be written in, each fetched the first time one is. */
|
|
export { languages }
|
|
|
|
export const highlighting = syntaxHighlighting(highlighter)
|
|
|
|
/*
|
|
* CodeMirror's base theme paints panels and the caret for a light editor
|
|
* (`&light .cm-panels { color: black }`), and those selectors outrank
|
|
* anything the app stylesheet can say. Theme rules do win, so the parts that
|
|
* would otherwise render black on black live here rather than in app.css.
|
|
* `dark: true` also stops the light defaults applying in the first place.
|
|
*/
|
|
export const editorTheme = EditorView.theme(
|
|
{
|
|
'&': { color: 'var(--fg)', backgroundColor: 'transparent', height: '100%' },
|
|
'.cm-content': { padding: '12px 28px', maxWidth: '90ch' },
|
|
'.cm-line': { padding: '0' },
|
|
'.cm-cursor, .cm-dropCursor': { borderLeft: '2px solid var(--light)' },
|
|
'.cm-panels': {
|
|
backgroundColor: 'var(--hull)',
|
|
color: 'var(--fg)',
|
|
borderColor: 'var(--rim)',
|
|
},
|
|
'.cm-panels-bottom': { borderTop: '1px solid var(--rim)' },
|
|
/*
|
|
* The `:` prompt is a bare text node in the panel; the input follows it.
|
|
* The input is an inline-block whose baseline sits below the text node's,
|
|
* so the two are laid out as flex items instead of aligned by baseline.
|
|
*/
|
|
'.cm-vim-panel': {
|
|
padding: '4px 12px',
|
|
color: 'var(--light)',
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
},
|
|
'.cm-tooltip': {
|
|
backgroundColor: 'var(--hull)',
|
|
color: 'var(--fg)',
|
|
border: '1px solid var(--rim)',
|
|
},
|
|
'.cm-tooltip-autocomplete > ul > li[aria-selected]': {
|
|
backgroundColor: 'var(--surface-alt)',
|
|
color: 'var(--light)',
|
|
},
|
|
'.cm-completionDetail': { color: 'var(--muted)', fontStyle: 'normal', marginLeft: '1ch' },
|
|
'.cm-vim-panel input': {
|
|
fontFamily: 'inherit',
|
|
fontSize: 'inherit',
|
|
lineHeight: 'inherit',
|
|
color: 'var(--light)',
|
|
caretColor: 'var(--light)',
|
|
flex: '1',
|
|
},
|
|
},
|
|
{ dark: true },
|
|
)
|