Tom Butcher
6a4074674d
All checks were successful
farmcontrol/farmcontrol-ui/pipeline/head This commit looks good
- Added farmControlLight and farmControlDark themes for CodeMirror integration, improving syntax highlighting and overall editor aesthetics. - Updated CodeBlockEditor to utilize the new themes and introduced a layout theme for better responsiveness. - Enhanced styling in App.css for the code block editor, ensuring proper display and overflow handling. - Refactored CodeDiffViewer to support the new themes, maintaining visual consistency across code comparison components.
231 lines
6.3 KiB
JavaScript
231 lines
6.3 KiB
JavaScript
import { EditorView } from '@codemirror/view'
|
|
import { HighlightStyle, syntaxHighlighting } from '@codemirror/language'
|
|
import { tags } from '@lezer/highlight'
|
|
|
|
const editorFontFamily = "'DM Mono', monospace"
|
|
|
|
const farmControlHighlightStyle = HighlightStyle.define([
|
|
{ tag: tags.keyword, color: 'var(--color-purple)' },
|
|
{
|
|
tag: [
|
|
tags.function(tags.variableName),
|
|
tags.labelName,
|
|
tags.definition(tags.function(tags.variableName))
|
|
],
|
|
color: 'var(--color-magenta)'
|
|
},
|
|
{
|
|
tag: [tags.string, tags.inserted, tags.special(tags.string)],
|
|
color: 'var(--color-success)'
|
|
},
|
|
{
|
|
tag: [
|
|
tags.number,
|
|
tags.bool,
|
|
tags.atom,
|
|
tags.changed,
|
|
tags.typeName,
|
|
tags.className,
|
|
tags.annotation,
|
|
tags.modifier,
|
|
tags.self,
|
|
tags.namespace,
|
|
tags.color,
|
|
tags.constant(tags.name),
|
|
tags.standard(tags.name)
|
|
],
|
|
color: 'var(--color-warning)'
|
|
},
|
|
{
|
|
tag: [
|
|
tags.operator,
|
|
tags.operatorKeyword,
|
|
tags.url,
|
|
tags.escape,
|
|
tags.regexp,
|
|
tags.link
|
|
],
|
|
color: 'var(--color-cyan)'
|
|
},
|
|
{ tag: tags.invalid, color: 'var(--color-error)' },
|
|
{
|
|
tag: [tags.meta, tags.comment],
|
|
color: 'color-mix(in srgb, var(--color-text) 55%, transparent)',
|
|
fontStyle: 'italic'
|
|
},
|
|
{
|
|
tag: [
|
|
tags.name,
|
|
tags.deleted,
|
|
tags.character,
|
|
tags.propertyName,
|
|
tags.macroName,
|
|
tags.definition(tags.name),
|
|
tags.separator,
|
|
tags.variableName
|
|
],
|
|
color: 'var(--color-text)'
|
|
},
|
|
{ tag: tags.heading, fontWeight: 'bold', color: 'var(--color-error)' },
|
|
{ tag: tags.strong, fontWeight: 'bold' },
|
|
{ tag: tags.emphasis, fontStyle: 'italic' },
|
|
{ tag: tags.strikethrough, textDecoration: 'line-through' },
|
|
{
|
|
tag: tags.link,
|
|
color: 'var(--color-link)',
|
|
textDecoration: 'underline'
|
|
},
|
|
{
|
|
tag: [tags.processingInstruction],
|
|
color: 'var(--color-info)'
|
|
}
|
|
])
|
|
|
|
const farmControlLightTheme = EditorView.theme(
|
|
{
|
|
'&': {
|
|
color: 'var(--color-text)',
|
|
backgroundColor: 'var(--layout-modal-bg)',
|
|
fontFamily: editorFontFamily,
|
|
fontSize: '14px'
|
|
},
|
|
'.cm-content': {
|
|
caretColor: 'var(--color-primary)'
|
|
},
|
|
'.cm-cursor, .cm-dropCursor': {
|
|
borderLeftColor: 'var(--color-primary)'
|
|
},
|
|
'&.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection':
|
|
{
|
|
backgroundColor:
|
|
'color-mix(in srgb, var(--color-primary) 25%, transparent)'
|
|
},
|
|
'.cm-activeLine': {
|
|
backgroundColor:
|
|
'color-mix(in srgb, var(--color-primary) 8%, transparent)'
|
|
},
|
|
'.cm-selectionMatch': {
|
|
backgroundColor:
|
|
'color-mix(in srgb, var(--color-success) 15%, transparent)'
|
|
},
|
|
'&.cm-focused .cm-matchingBracket, &.cm-focused .cm-nonmatchingBracket': {
|
|
backgroundColor:
|
|
'color-mix(in srgb, var(--color-warning) 20%, transparent)'
|
|
},
|
|
'.cm-gutters': {
|
|
backgroundColor: 'var(--layout-modal-bg)',
|
|
color: 'color-mix(in srgb, var(--color-text) 45%, transparent)',
|
|
border: 'none'
|
|
},
|
|
'.cm-activeLineGutter': {
|
|
backgroundColor:
|
|
'color-mix(in srgb, var(--color-primary) 8%, transparent)'
|
|
},
|
|
'.cm-foldPlaceholder': {
|
|
backgroundColor: 'transparent',
|
|
border: 'none',
|
|
color: 'color-mix(in srgb, var(--color-text) 55%, transparent)'
|
|
},
|
|
'.cm-tooltip': {
|
|
border: 'none',
|
|
backgroundColor: 'var(--layout-modal-bg)',
|
|
color: 'var(--color-text)'
|
|
},
|
|
'.cm-tooltip .cm-tooltip-arrow:before': {
|
|
borderTopColor: 'transparent',
|
|
borderBottomColor: 'transparent'
|
|
},
|
|
'.cm-tooltip .cm-tooltip-arrow:after': {
|
|
borderTopColor: 'var(--layout-modal-bg)',
|
|
borderBottomColor: 'var(--layout-modal-bg)'
|
|
},
|
|
'.cm-tooltip-autocomplete': {
|
|
'& > ul > li[aria-selected]': {
|
|
backgroundColor:
|
|
'color-mix(in srgb, var(--color-primary) 12%, transparent)',
|
|
color: 'var(--color-text)'
|
|
}
|
|
}
|
|
},
|
|
{ dark: false }
|
|
)
|
|
|
|
const farmControlDarkTheme = EditorView.theme(
|
|
{
|
|
'&': {
|
|
color: 'var(--color-text)',
|
|
backgroundColor: 'var(--layout-modal-bg)',
|
|
fontFamily: editorFontFamily,
|
|
fontSize: '14px'
|
|
},
|
|
'.cm-content': {
|
|
caretColor: 'var(--color-primary)'
|
|
},
|
|
'.cm-cursor, .cm-dropCursor': {
|
|
borderLeftColor: 'var(--color-primary)'
|
|
},
|
|
'&.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection':
|
|
{
|
|
backgroundColor:
|
|
'color-mix(in srgb, var(--color-primary) 30%, transparent)'
|
|
},
|
|
'.cm-activeLine': {
|
|
backgroundColor:
|
|
'color-mix(in srgb, var(--color-primary) 10%, transparent)'
|
|
},
|
|
'.cm-selectionMatch': {
|
|
backgroundColor:
|
|
'color-mix(in srgb, var(--color-success) 18%, transparent)'
|
|
},
|
|
'&.cm-focused .cm-matchingBracket, &.cm-focused .cm-nonmatchingBracket': {
|
|
backgroundColor:
|
|
'color-mix(in srgb, var(--color-warning) 22%, transparent)'
|
|
},
|
|
'.cm-gutters': {
|
|
backgroundColor: 'var(--layout-modal-bg)',
|
|
color: 'color-mix(in srgb, var(--color-text) 45%, transparent)',
|
|
border: 'none'
|
|
},
|
|
'.cm-activeLineGutter': {
|
|
backgroundColor:
|
|
'color-mix(in srgb, var(--color-primary) 10%, transparent)'
|
|
},
|
|
'.cm-foldPlaceholder': {
|
|
backgroundColor: 'transparent',
|
|
border: 'none',
|
|
color: 'color-mix(in srgb, var(--color-text) 55%, transparent)'
|
|
},
|
|
'.cm-tooltip': {
|
|
border: 'none',
|
|
backgroundColor: 'var(--layout-modal-bg)',
|
|
color: 'var(--color-text)'
|
|
},
|
|
'.cm-tooltip .cm-tooltip-arrow:before': {
|
|
borderTopColor: 'transparent',
|
|
borderBottomColor: 'transparent'
|
|
},
|
|
'.cm-tooltip .cm-tooltip-arrow:after': {
|
|
borderTopColor: 'var(--layout-modal-bg)',
|
|
borderBottomColor: 'var(--layout-modal-bg)'
|
|
},
|
|
'.cm-tooltip-autocomplete': {
|
|
'& > ul > li[aria-selected]': {
|
|
backgroundColor:
|
|
'color-mix(in srgb, var(--color-primary) 15%, transparent)',
|
|
color: 'var(--color-text)'
|
|
}
|
|
}
|
|
},
|
|
{ dark: true }
|
|
)
|
|
|
|
export const farmControlLight = [
|
|
farmControlLightTheme,
|
|
syntaxHighlighting(farmControlHighlightStyle)
|
|
]
|
|
|
|
export const farmControlDark = [
|
|
farmControlDarkTheme,
|
|
syntaxHighlighting(farmControlHighlightStyle)
|
|
]
|