73 lines
2.4 KiB
TypeScript
73 lines
2.4 KiB
TypeScript
import { EditorView } from '@codemirror/view';
|
|
import { Compartment } from '@codemirror/state';
|
|
|
|
// Salon-themed CodeMirror look. Static — defined once at module load.
|
|
export const salonTheme = EditorView.theme(
|
|
{
|
|
'&': {
|
|
backgroundColor: 'var(--base)',
|
|
color: 'var(--text)',
|
|
border: '1px solid var(--surface2)',
|
|
borderRadius: '2px',
|
|
fontSize: '14px',
|
|
boxShadow: 'inset 0 0 0 1px color-mix(in srgb, var(--surface1) 40%, transparent)',
|
|
},
|
|
'.cm-content': {
|
|
fontFamily: 'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',
|
|
padding: '1rem',
|
|
caretColor: 'var(--mauve)',
|
|
color: 'var(--text)',
|
|
},
|
|
'.cm-cursor': { borderLeftColor: 'var(--mauve)', borderLeftWidth: '2px' },
|
|
'.cm-selectionBackground': {
|
|
backgroundColor: 'color-mix(in srgb, var(--mauve) 25%, transparent) !important',
|
|
},
|
|
'&.cm-focused .cm-selectionBackground': {
|
|
backgroundColor: 'color-mix(in srgb, var(--mauve) 30%, transparent) !important',
|
|
},
|
|
'.cm-activeLine': { backgroundColor: 'color-mix(in srgb, var(--surface0) 55%, transparent)' },
|
|
'.cm-gutters': {
|
|
backgroundColor: 'var(--surface0)',
|
|
color: 'var(--subtext0)',
|
|
border: 'none',
|
|
borderRight: '1px solid var(--surface2)',
|
|
fontFamily: 'var(--font-display)',
|
|
fontStyle: 'italic',
|
|
},
|
|
'.cm-activeLineGutter': {
|
|
backgroundColor: 'color-mix(in srgb, var(--mauve) 12%, transparent)',
|
|
color: 'var(--mauve)',
|
|
},
|
|
'.cm-panels': {
|
|
backgroundColor: 'var(--surface0)',
|
|
color: 'var(--text)',
|
|
borderTop: '1px solid var(--surface2)',
|
|
},
|
|
'.cm-searchMatch': { backgroundColor: 'color-mix(in srgb, var(--yellow) 45%, transparent)' },
|
|
'.cm-searchMatch-selected': {
|
|
backgroundColor: 'color-mix(in srgb, var(--peach) 55%, transparent)',
|
|
},
|
|
'.cm-fat-cursor': {
|
|
backgroundColor: 'var(--mauve) !important',
|
|
color: 'var(--rosewater) !important',
|
|
},
|
|
'&:not(.cm-focused) .cm-fat-cursor': {
|
|
outline: '1px solid var(--mauve)',
|
|
backgroundColor: 'transparent !important',
|
|
},
|
|
},
|
|
{ dark: false },
|
|
);
|
|
|
|
// Compartment for hot-swapping vim mode without recreating the editor.
|
|
export const vimCompartment = new Compartment();
|
|
|
|
export function clientSlugify(s: string): string {
|
|
return s
|
|
.toLowerCase()
|
|
.normalize('NFD')
|
|
.replace(/[̀-ͯ]/g, '')
|
|
.replace(/[^a-z0-9]+/g, '-')
|
|
.replace(/^-+|-+$/g, '');
|
|
}
|