feat: add first version of workbench, increase token limit, improve system prompt
This commit is contained in:
Dominic Elm
@@ -0,0 +1,7 @@
|
||||
export function BinaryContent() {
|
||||
return (
|
||||
<div className="flex items-center justify-center absolute inset-0 z-10 text-sm bg-tk-elements-app-backgroundColor text-tk-elements-app-textColor">
|
||||
File format cannot be displayed.
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,339 @@
|
||||
import { acceptCompletion, autocompletion, closeBrackets } from '@codemirror/autocomplete';
|
||||
import { defaultKeymap, history, historyKeymap } from '@codemirror/commands';
|
||||
import { bracketMatching, foldGutter, indentOnInput, indentUnit } from '@codemirror/language';
|
||||
import { searchKeymap } from '@codemirror/search';
|
||||
import { Compartment, EditorSelection, EditorState, type Extension } from '@codemirror/state';
|
||||
import {
|
||||
EditorView,
|
||||
drawSelection,
|
||||
dropCursor,
|
||||
highlightActiveLine,
|
||||
highlightActiveLineGutter,
|
||||
keymap,
|
||||
lineNumbers,
|
||||
scrollPastEnd,
|
||||
} from '@codemirror/view';
|
||||
import { useEffect, useRef, useState, type MutableRefObject } from 'react';
|
||||
import type { Theme } from '../../../types/theme';
|
||||
import { classNames } from '../../../utils/classNames';
|
||||
import { debounce } from '../../../utils/debounce';
|
||||
import { createScopedLogger } from '../../../utils/logger';
|
||||
import { BinaryContent } from './BinaryContent';
|
||||
import { getTheme, reconfigureTheme } from './cm-theme';
|
||||
import { indentKeyBinding } from './indent';
|
||||
import { getLanguage } from './languages';
|
||||
|
||||
const logger = createScopedLogger('CodeMirrorEditor');
|
||||
|
||||
export interface EditorDocument {
|
||||
value: string | Uint8Array;
|
||||
loading: boolean;
|
||||
filePath: string;
|
||||
scroll?: ScrollPosition;
|
||||
}
|
||||
|
||||
export interface EditorSettings {
|
||||
fontSize?: string;
|
||||
tabSize?: number;
|
||||
}
|
||||
|
||||
type TextEditorDocument = EditorDocument & {
|
||||
value: string;
|
||||
};
|
||||
|
||||
export interface ScrollPosition {
|
||||
top: number;
|
||||
left: number;
|
||||
}
|
||||
|
||||
export interface EditorUpdate {
|
||||
selection: EditorSelection;
|
||||
content: string;
|
||||
}
|
||||
|
||||
export type OnChangeCallback = (update: EditorUpdate) => void;
|
||||
export type OnScrollCallback = (position: ScrollPosition) => void;
|
||||
|
||||
interface Props {
|
||||
theme: Theme;
|
||||
id?: unknown;
|
||||
doc?: EditorDocument;
|
||||
debounceChange?: number;
|
||||
debounceScroll?: number;
|
||||
autoFocusOnDocumentChange?: boolean;
|
||||
onChange?: OnChangeCallback;
|
||||
onScroll?: OnScrollCallback;
|
||||
className?: string;
|
||||
settings?: EditorSettings;
|
||||
}
|
||||
|
||||
type EditorStates = Map<string, EditorState>;
|
||||
|
||||
export function CodeMirrorEditor({
|
||||
id,
|
||||
doc,
|
||||
debounceScroll = 100,
|
||||
debounceChange = 150,
|
||||
autoFocusOnDocumentChange = false,
|
||||
onScroll,
|
||||
onChange,
|
||||
theme,
|
||||
settings,
|
||||
className = '',
|
||||
}: Props) {
|
||||
const [language] = useState(new Compartment());
|
||||
const [readOnly] = useState(new Compartment());
|
||||
|
||||
const containerRef = useRef<HTMLDivElement | null>(null);
|
||||
const viewRef = useRef<EditorView>();
|
||||
const themeRef = useRef<Theme>();
|
||||
const docRef = useRef<EditorDocument>();
|
||||
const editorStatesRef = useRef<EditorStates>();
|
||||
const onScrollRef = useRef(onScroll);
|
||||
const onChangeRef = useRef(onChange);
|
||||
|
||||
const isBinaryFile = doc?.value instanceof Uint8Array;
|
||||
|
||||
onScrollRef.current = onScroll;
|
||||
onChangeRef.current = onChange;
|
||||
|
||||
docRef.current = doc;
|
||||
themeRef.current = theme;
|
||||
|
||||
useEffect(() => {
|
||||
const onUpdate = debounce((update: EditorUpdate) => {
|
||||
onChangeRef.current?.(update);
|
||||
}, debounceChange);
|
||||
|
||||
const view = new EditorView({
|
||||
parent: containerRef.current!,
|
||||
dispatchTransactions(transactions) {
|
||||
const previousSelection = view.state.selection;
|
||||
|
||||
view.update(transactions);
|
||||
|
||||
const newSelection = view.state.selection;
|
||||
|
||||
const selectionChanged =
|
||||
newSelection !== previousSelection &&
|
||||
(newSelection === undefined || previousSelection === undefined || !newSelection.eq(previousSelection));
|
||||
|
||||
if (
|
||||
docRef.current &&
|
||||
!docRef.current.loading &&
|
||||
(transactions.some((transaction) => transaction.docChanged) || selectionChanged)
|
||||
) {
|
||||
onUpdate({
|
||||
selection: view.state.selection,
|
||||
content: view.state.doc.toString(),
|
||||
});
|
||||
|
||||
editorStatesRef.current!.set(docRef.current.filePath, view.state);
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
viewRef.current = view;
|
||||
|
||||
return () => {
|
||||
viewRef.current?.destroy();
|
||||
viewRef.current = undefined;
|
||||
};
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (!viewRef.current) {
|
||||
return;
|
||||
}
|
||||
|
||||
viewRef.current.dispatch({
|
||||
effects: [reconfigureTheme(theme)],
|
||||
});
|
||||
}, [theme]);
|
||||
|
||||
useEffect(() => {
|
||||
editorStatesRef.current = new Map<string, EditorState>();
|
||||
}, [id]);
|
||||
|
||||
useEffect(() => {
|
||||
const editorStates = editorStatesRef.current!;
|
||||
const view = viewRef.current!;
|
||||
const theme = themeRef.current!;
|
||||
|
||||
if (!doc) {
|
||||
const state = newEditorState('', theme, settings, onScrollRef, debounceScroll, [language.of([])]);
|
||||
|
||||
view.setState(state);
|
||||
|
||||
setNoDocument(view);
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
if (doc.value instanceof Uint8Array) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (doc.filePath === '') {
|
||||
logger.warn('File path should not be empty');
|
||||
}
|
||||
|
||||
let state = editorStates.get(doc.filePath);
|
||||
|
||||
if (!state) {
|
||||
state = newEditorState(doc.value, theme, settings, onScrollRef, debounceScroll, [
|
||||
language.of([]),
|
||||
readOnly.of([EditorState.readOnly.of(doc.loading)]),
|
||||
]);
|
||||
|
||||
editorStates.set(doc.filePath, state);
|
||||
}
|
||||
|
||||
view.setState(state);
|
||||
|
||||
setEditorDocument(view, theme, language, readOnly, autoFocusOnDocumentChange, doc as TextEditorDocument);
|
||||
}, [doc?.value, doc?.filePath, doc?.loading, autoFocusOnDocumentChange]);
|
||||
|
||||
return (
|
||||
<div className={classNames('relative h-full', className)}>
|
||||
{isBinaryFile && <BinaryContent />}
|
||||
<div className="h-full overflow-hidden" ref={containerRef} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default CodeMirrorEditor;
|
||||
|
||||
CodeMirrorEditor.displayName = 'CodeMirrorEditor';
|
||||
|
||||
function newEditorState(
|
||||
content: string,
|
||||
theme: Theme,
|
||||
settings: EditorSettings | undefined,
|
||||
onScrollRef: MutableRefObject<OnScrollCallback | undefined>,
|
||||
debounceScroll: number,
|
||||
extensions: Extension[],
|
||||
) {
|
||||
return EditorState.create({
|
||||
doc: content,
|
||||
extensions: [
|
||||
EditorView.domEventHandlers({
|
||||
scroll: debounce((_event, view) => {
|
||||
onScrollRef.current?.({ left: view.scrollDOM.scrollLeft, top: view.scrollDOM.scrollTop });
|
||||
}, debounceScroll),
|
||||
keydown: (event) => {
|
||||
if (event.code === 'KeyS' && (event.ctrlKey || event.metaKey)) {
|
||||
event.preventDefault();
|
||||
}
|
||||
},
|
||||
}),
|
||||
getTheme(theme, settings),
|
||||
history(),
|
||||
keymap.of([
|
||||
...defaultKeymap,
|
||||
...historyKeymap,
|
||||
...searchKeymap,
|
||||
{ key: 'Tab', run: acceptCompletion },
|
||||
indentKeyBinding,
|
||||
]),
|
||||
indentUnit.of('\t'),
|
||||
autocompletion({
|
||||
closeOnBlur: false,
|
||||
}),
|
||||
closeBrackets(),
|
||||
lineNumbers(),
|
||||
scrollPastEnd(),
|
||||
dropCursor(),
|
||||
drawSelection(),
|
||||
bracketMatching(),
|
||||
EditorState.tabSize.of(settings?.tabSize ?? 2),
|
||||
indentOnInput(),
|
||||
highlightActiveLineGutter(),
|
||||
highlightActiveLine(),
|
||||
foldGutter({
|
||||
markerDOM: (open) => {
|
||||
const icon = document.createElement('div');
|
||||
|
||||
icon.className = `fold-icon ${open ? 'i-ph-caret-down-bold' : 'i-ph-caret-right-bold'}`;
|
||||
|
||||
return icon;
|
||||
},
|
||||
}),
|
||||
...extensions,
|
||||
],
|
||||
});
|
||||
}
|
||||
|
||||
function setNoDocument(view: EditorView) {
|
||||
view.dispatch({
|
||||
selection: { anchor: 0 },
|
||||
changes: {
|
||||
from: 0,
|
||||
to: view.state.doc.length,
|
||||
insert: '',
|
||||
},
|
||||
});
|
||||
|
||||
view.scrollDOM.scrollTo(0, 0);
|
||||
}
|
||||
|
||||
function setEditorDocument(
|
||||
view: EditorView,
|
||||
theme: Theme,
|
||||
language: Compartment,
|
||||
readOnly: Compartment,
|
||||
autoFocus: boolean,
|
||||
doc: TextEditorDocument,
|
||||
) {
|
||||
if (doc.value !== view.state.doc.toString()) {
|
||||
view.dispatch({
|
||||
selection: { anchor: 0 },
|
||||
changes: {
|
||||
from: 0,
|
||||
to: view.state.doc.length,
|
||||
insert: doc.value,
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
view.dispatch({
|
||||
effects: [readOnly.reconfigure([EditorState.readOnly.of(doc.loading)])],
|
||||
});
|
||||
|
||||
getLanguage(doc.filePath).then((languageSupport) => {
|
||||
if (!languageSupport) {
|
||||
return;
|
||||
}
|
||||
|
||||
view.dispatch({
|
||||
effects: [language.reconfigure([languageSupport]), reconfigureTheme(theme)],
|
||||
});
|
||||
|
||||
requestAnimationFrame(() => {
|
||||
const currentLeft = view.scrollDOM.scrollLeft;
|
||||
const currentTop = view.scrollDOM.scrollTop;
|
||||
const newLeft = doc.scroll?.left ?? 0;
|
||||
const newTop = doc.scroll?.top ?? 0;
|
||||
|
||||
const needsScrolling = currentLeft !== newLeft || currentTop !== newTop;
|
||||
|
||||
if (autoFocus) {
|
||||
if (needsScrolling) {
|
||||
// we have to wait until the scroll position was changed before we can set the focus
|
||||
view.scrollDOM.addEventListener(
|
||||
'scroll',
|
||||
() => {
|
||||
view.focus();
|
||||
},
|
||||
{ once: true },
|
||||
);
|
||||
} else {
|
||||
// if the scroll position is still the same we can focus immediately
|
||||
view.focus();
|
||||
}
|
||||
}
|
||||
|
||||
view.scrollDOM.scrollTo(newLeft, newTop);
|
||||
});
|
||||
});
|
||||
}
|
||||
165
packages/bolt/app/components/editor/codemirror/cm-theme.ts
Normal file
165
packages/bolt/app/components/editor/codemirror/cm-theme.ts
Normal file
@@ -0,0 +1,165 @@
|
||||
import { defaultHighlightStyle, syntaxHighlighting } from '@codemirror/language';
|
||||
import { Compartment, type Extension } from '@codemirror/state';
|
||||
import { EditorView } from '@codemirror/view';
|
||||
import type { Theme } from '../../../types/theme.js';
|
||||
import type { EditorSettings } from './CodeMirrorEditor.js';
|
||||
import { vscodeDarkTheme } from './themes/vscode-dark.js';
|
||||
|
||||
import './styles.css';
|
||||
|
||||
export const darkTheme = EditorView.theme({}, { dark: true });
|
||||
export const themeSelection = new Compartment();
|
||||
|
||||
export function getTheme(theme: Theme, settings: EditorSettings = {}): Extension {
|
||||
return [
|
||||
getEditorTheme(settings),
|
||||
theme === 'dark' ? themeSelection.of([getDarkTheme()]) : themeSelection.of([getLightTheme()]),
|
||||
];
|
||||
}
|
||||
|
||||
export function reconfigureTheme(theme: Theme) {
|
||||
return themeSelection.reconfigure(theme === 'dark' ? getDarkTheme() : getLightTheme());
|
||||
}
|
||||
|
||||
function getEditorTheme(settings: EditorSettings) {
|
||||
return EditorView.theme({
|
||||
...(settings.fontSize && {
|
||||
'&': {
|
||||
fontSize: settings.fontSize,
|
||||
},
|
||||
}),
|
||||
'&.cm-editor': {
|
||||
height: '100%',
|
||||
background: 'var(--cm-backgroundColor)',
|
||||
color: 'var(--cm-textColor)',
|
||||
},
|
||||
'.cm-cursor': {
|
||||
borderLeft: 'var(--cm-cursor-width) solid var(--cm-cursor-backgroundColor)',
|
||||
},
|
||||
'.cm-scroller': {
|
||||
lineHeight: '1.5',
|
||||
},
|
||||
'.cm-line': {
|
||||
padding: '0 0 0 4px',
|
||||
},
|
||||
'&.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground': {
|
||||
backgroundColor: 'var(--cm-selection-backgroundColorFocused)',
|
||||
opacity: 'var(--cm-selection-backgroundOpacityFocused, 0.3)',
|
||||
},
|
||||
'&:not(.cm-focused) > .cm-scroller > .cm-selectionLayer .cm-selectionBackground': {
|
||||
backgroundColor: 'var(--cm-selection-backgroundColorBlured)',
|
||||
opacity: 'var(--cm-selection-backgroundOpacityBlured, 0.3)',
|
||||
},
|
||||
'&.cm-focused > .cm-scroller .cm-matchingBracket': {
|
||||
backgroundColor: 'var(--cm-matching-bracket)',
|
||||
},
|
||||
'.cm-activeLine': {
|
||||
background: 'var(--cm-activeLineBackgroundColor)',
|
||||
},
|
||||
'.cm-gutters': {
|
||||
background: 'var(--cm-gutter-backgroundColor)',
|
||||
borderRight: 0,
|
||||
color: 'var(--cm-gutter-textColor)',
|
||||
},
|
||||
'.cm-gutter': {
|
||||
'&.cm-lineNumbers': {
|
||||
fontFamily: 'Roboto Mono, monospace',
|
||||
fontSize: '13px',
|
||||
minWidth: '28px',
|
||||
},
|
||||
'& .cm-activeLineGutter': {
|
||||
background: 'transparent',
|
||||
color: 'var(--cm-gutter-activeLineTextColor)',
|
||||
},
|
||||
'&.cm-foldGutter .cm-gutterElement > .fold-icon': {
|
||||
cursor: 'pointer',
|
||||
color: 'var(--cm-foldGutter-textColor)',
|
||||
transform: 'translateY(2px)',
|
||||
'&:hover': {
|
||||
color: 'var(--cm-foldGutter-textColorHover)',
|
||||
},
|
||||
},
|
||||
},
|
||||
'.cm-foldGutter .cm-gutterElement': {
|
||||
padding: '0 4px',
|
||||
},
|
||||
'.cm-tooltip-autocomplete > ul > li': {
|
||||
minHeight: '18px',
|
||||
},
|
||||
'.cm-panel.cm-search label': {
|
||||
marginLeft: '2px',
|
||||
},
|
||||
'.cm-panel.cm-search input[type=checkbox]': {
|
||||
position: 'relative',
|
||||
transform: 'translateY(2px)',
|
||||
marginRight: '4px',
|
||||
},
|
||||
'.cm-panels': {
|
||||
borderColor: 'var(--cm-panels-borderColor)',
|
||||
},
|
||||
'.cm-panel.cm-search': {
|
||||
background: 'var(--cm-search-backgroundColor)',
|
||||
color: 'var(--cm-search-textColor)',
|
||||
padding: '6px 8px',
|
||||
},
|
||||
'.cm-search .cm-button': {
|
||||
background: 'var(--cm-search-button-backgroundColor)',
|
||||
borderColor: 'var(--cm-search-button-borderColor)',
|
||||
color: 'var(--cm-search-button-textColor)',
|
||||
borderRadius: '4px',
|
||||
'&:hover': {
|
||||
color: 'var(--cm-search-button-textColorHover)',
|
||||
},
|
||||
'&:focus-visible': {
|
||||
outline: 'none',
|
||||
borderColor: 'var(--cm-search-button-borderColorFocused)',
|
||||
},
|
||||
'&:hover:not(:focus-visible)': {
|
||||
background: 'var(--cm-search-button-backgroundColorHover)',
|
||||
borderColor: 'var(--cm-search-button-borderColorHover)',
|
||||
},
|
||||
'&:hover:focus-visible': {
|
||||
background: 'var(--cm-search-button-backgroundColorHover)',
|
||||
borderColor: 'var(--cm-search-button-borderColorFocused)',
|
||||
},
|
||||
},
|
||||
'.cm-panel.cm-search [name=close]': {
|
||||
top: '6px',
|
||||
right: '6px',
|
||||
padding: '0 6px',
|
||||
backgroundColor: 'var(--cm-search-closeButton-backgroundColor)',
|
||||
color: 'var(--cm-search-closeButton-textColor)',
|
||||
'&:hover': {
|
||||
'border-radius': '6px',
|
||||
color: 'var(--cm-search-closeButton-textColorHover)',
|
||||
backgroundColor: 'var(--cm-search-closeButton-backgroundColorHover)',
|
||||
},
|
||||
},
|
||||
'.cm-search input': {
|
||||
background: 'var(--cm-search-input-backgroundColor)',
|
||||
borderColor: 'var(--cm-search-input-borderColor)',
|
||||
outline: 'none',
|
||||
borderRadius: '4px',
|
||||
'&:focus-visible': {
|
||||
borderColor: 'var(--cm-search-input-borderColorFocused)',
|
||||
},
|
||||
},
|
||||
'.cm-tooltip': {
|
||||
background: 'var(--cm-tooltip-backgroundColor)',
|
||||
borderColor: 'var(--cm-tooltip-borderColor)',
|
||||
color: 'var(--cm-tooltip-textColor)',
|
||||
},
|
||||
'.cm-tooltip.cm-tooltip-autocomplete ul li[aria-selected]': {
|
||||
background: 'var(--cm-tooltip-backgroundColorSelected)',
|
||||
color: 'var(--cm-tooltip-textColorSelected)',
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
function getLightTheme() {
|
||||
return syntaxHighlighting(defaultHighlightStyle);
|
||||
}
|
||||
|
||||
function getDarkTheme() {
|
||||
return syntaxHighlighting(vscodeDarkTheme);
|
||||
}
|
||||
68
packages/bolt/app/components/editor/codemirror/indent.ts
Normal file
68
packages/bolt/app/components/editor/codemirror/indent.ts
Normal file
@@ -0,0 +1,68 @@
|
||||
import { indentLess } from '@codemirror/commands';
|
||||
import { indentUnit } from '@codemirror/language';
|
||||
import { EditorSelection, EditorState, Line, type ChangeSpec } from '@codemirror/state';
|
||||
import { EditorView, type KeyBinding } from '@codemirror/view';
|
||||
|
||||
export const indentKeyBinding: KeyBinding = {
|
||||
key: 'Tab',
|
||||
run: indentMore,
|
||||
shift: indentLess,
|
||||
};
|
||||
|
||||
function indentMore({ state, dispatch }: EditorView) {
|
||||
if (state.readOnly) {
|
||||
return false;
|
||||
}
|
||||
|
||||
dispatch(
|
||||
state.update(
|
||||
changeBySelectedLine(state, (from, to, changes) => {
|
||||
changes.push({ from, to, insert: state.facet(indentUnit) });
|
||||
}),
|
||||
{ userEvent: 'input.indent' },
|
||||
),
|
||||
);
|
||||
|
||||
return true;
|
||||
}
|
||||
|
||||
function changeBySelectedLine(
|
||||
state: EditorState,
|
||||
cb: (from: number, to: number | undefined, changes: ChangeSpec[], line: Line) => void,
|
||||
) {
|
||||
return state.changeByRange((range) => {
|
||||
const changes: ChangeSpec[] = [];
|
||||
|
||||
const line = state.doc.lineAt(range.from);
|
||||
|
||||
// just insert single indent unit at the current cursor position
|
||||
if (range.from === range.to) {
|
||||
cb(range.from, undefined, changes, line);
|
||||
}
|
||||
// handle the case when multiple characters are selected in a single line
|
||||
else if (range.from < range.to && range.to <= line.to) {
|
||||
cb(range.from, range.to, changes, line);
|
||||
} else {
|
||||
let atLine = -1;
|
||||
|
||||
// handle the case when selection spans multiple lines
|
||||
for (let pos = range.from; pos <= range.to; ) {
|
||||
const line = state.doc.lineAt(pos);
|
||||
|
||||
if (line.number > atLine && (range.empty || range.to > line.from)) {
|
||||
cb(line.from, undefined, changes, line);
|
||||
atLine = line.number;
|
||||
}
|
||||
|
||||
pos = line.to + 1;
|
||||
}
|
||||
}
|
||||
|
||||
const changeSet = state.changes(changes);
|
||||
|
||||
return {
|
||||
changes,
|
||||
range: EditorSelection.range(changeSet.mapPos(range.anchor, 1), changeSet.mapPos(range.head, 1)),
|
||||
};
|
||||
});
|
||||
}
|
||||
91
packages/bolt/app/components/editor/codemirror/languages.ts
Normal file
91
packages/bolt/app/components/editor/codemirror/languages.ts
Normal file
@@ -0,0 +1,91 @@
|
||||
import { LanguageDescription } from '@codemirror/language';
|
||||
|
||||
export const supportedLanguages = [
|
||||
LanguageDescription.of({
|
||||
name: 'TS',
|
||||
extensions: ['ts'],
|
||||
async load() {
|
||||
return import('@codemirror/lang-javascript').then((module) => module.javascript({ typescript: true }));
|
||||
},
|
||||
}),
|
||||
LanguageDescription.of({
|
||||
name: 'JS',
|
||||
extensions: ['js', 'mjs', 'cjs'],
|
||||
async load() {
|
||||
return import('@codemirror/lang-javascript').then((module) => module.javascript());
|
||||
},
|
||||
}),
|
||||
LanguageDescription.of({
|
||||
name: 'TSX',
|
||||
extensions: ['tsx'],
|
||||
async load() {
|
||||
return import('@codemirror/lang-javascript').then((module) => module.javascript({ jsx: true, typescript: true }));
|
||||
},
|
||||
}),
|
||||
LanguageDescription.of({
|
||||
name: 'JSX',
|
||||
extensions: ['jsx'],
|
||||
async load() {
|
||||
return import('@codemirror/lang-javascript').then((module) => module.javascript({ jsx: true }));
|
||||
},
|
||||
}),
|
||||
LanguageDescription.of({
|
||||
name: 'HTML',
|
||||
extensions: ['html'],
|
||||
async load() {
|
||||
return import('@codemirror/lang-html').then((module) => module.html());
|
||||
},
|
||||
}),
|
||||
LanguageDescription.of({
|
||||
name: 'CSS',
|
||||
extensions: ['css'],
|
||||
async load() {
|
||||
return import('@codemirror/lang-css').then((module) => module.css());
|
||||
},
|
||||
}),
|
||||
LanguageDescription.of({
|
||||
name: 'SASS',
|
||||
extensions: ['sass'],
|
||||
async load() {
|
||||
return import('@codemirror/lang-sass').then((module) => module.sass({ indented: true }));
|
||||
},
|
||||
}),
|
||||
LanguageDescription.of({
|
||||
name: 'SCSS',
|
||||
extensions: ['scss'],
|
||||
async load() {
|
||||
return import('@codemirror/lang-sass').then((module) => module.sass({ indented: false }));
|
||||
},
|
||||
}),
|
||||
LanguageDescription.of({
|
||||
name: 'JSON',
|
||||
extensions: ['json'],
|
||||
async load() {
|
||||
return import('@codemirror/lang-json').then((module) => module.json());
|
||||
},
|
||||
}),
|
||||
LanguageDescription.of({
|
||||
name: 'Markdown',
|
||||
extensions: ['md'],
|
||||
async load() {
|
||||
return import('@codemirror/lang-markdown').then((module) => module.markdown());
|
||||
},
|
||||
}),
|
||||
LanguageDescription.of({
|
||||
name: 'Wasm',
|
||||
extensions: ['wat'],
|
||||
async load() {
|
||||
return import('@codemirror/lang-wast').then((module) => module.wast());
|
||||
},
|
||||
}),
|
||||
];
|
||||
|
||||
export async function getLanguage(fileName: string) {
|
||||
const languageDescription = LanguageDescription.matchFilename(supportedLanguages, fileName);
|
||||
|
||||
if (languageDescription) {
|
||||
return await languageDescription.load();
|
||||
}
|
||||
|
||||
return undefined;
|
||||
}
|
||||
133
packages/bolt/app/components/editor/codemirror/styles.css
Normal file
133
packages/bolt/app/components/editor/codemirror/styles.css
Normal file
@@ -0,0 +1,133 @@
|
||||
:root {
|
||||
--cm-backgroundColor: var(--bolt-elements-editor-backgroundColor, var(--bolt-elements-app-backgroundColor));
|
||||
--cm-textColor: var(--bolt-elements-editor-textColor, var(--bolt-text-primary));
|
||||
|
||||
/* Gutter */
|
||||
|
||||
--cm-gutter-backgroundColor: var(--bolt-elements-editor-gutter-backgroundColor, var(--cm-backgroundColor));
|
||||
--cm-gutter-textColor: var(--bolt-elements-editor-gutter-textColor, var(--bolt-text-secondary));
|
||||
--cm-gutter-activeLineTextColor: var(--bolt-elements-editor-gutter-activeLineTextColor, var(--cm-gutter-textColor));
|
||||
|
||||
/* Fold Gutter */
|
||||
|
||||
--cm-foldGutter-textColor: var(--bolt-elements-editor-foldGutter-textColor, var(--cm-gutter-textColor));
|
||||
--cm-foldGutter-textColorHover: var(--bolt-elements-editor-foldGutter-textColorHover, var(--cm-gutter-textColor));
|
||||
|
||||
/* Active Line */
|
||||
|
||||
--cm-activeLineBackgroundColor: var(--bolt-elements-editor-activeLineBackgroundColor, rgb(224 231 235 / 30%));
|
||||
|
||||
/* Cursor */
|
||||
|
||||
--cm-cursor-width: 2px;
|
||||
--cm-cursor-backgroundColor: var(--bolt-elements-editor-cursorColor, var(--bolt-text-primary));
|
||||
|
||||
/* Matching Brackets */
|
||||
|
||||
--cm-matching-bracket: var(--bolt-elements-editor-matchingBracketBackgroundColor, rgb(50 140 130 / 0.3));
|
||||
|
||||
/* Selection */
|
||||
|
||||
--cm-selection-backgroundColorFocused: var(--bolt-elements-editor-selection-backgroundColor, #42b4ff);
|
||||
--cm-selection-backgroundOpacityFocused: var(--bolt-elements-editor-selection-backgroundOpacity, 0.3);
|
||||
--cm-selection-backgroundColorBlured: var(--bolt-elements-editor-selection-inactiveBackgroundColor, #c9e9ff);
|
||||
--cm-selection-backgroundOpacityBlured: var(--bolt-elements-editor-selection-inactiveBackgroundOpacity, 0.3);
|
||||
|
||||
/* Panels */
|
||||
|
||||
--cm-panels-borderColor: var(--bolt-elements-editor-panels-borderColor, var(--bolt-elements-app-borderColor));
|
||||
|
||||
/* Search */
|
||||
|
||||
--cm-search-backgroundColor: var(--bolt-elements-editor-search-backgroundColor, var(--cm-backgroundColor));
|
||||
--cm-search-textColor: var(--bolt-elements-editor-search-textColor, var(--bolt-elements-app-textColor));
|
||||
--cm-search-closeButton-backgroundColor: var(--bolt-elements-editor-search-closeButton-backgroundColor, transparent);
|
||||
|
||||
--cm-search-closeButton-backgroundColorHover: var(
|
||||
--bolt-elements-editor-search-closeButton-backgroundColorHover,
|
||||
var(--bolt-background-secondary)
|
||||
);
|
||||
|
||||
--cm-search-closeButton-textColor: var(
|
||||
--bolt-elements-editor-search-closeButton-textColor,
|
||||
var(--bolt-text-secondary)
|
||||
);
|
||||
|
||||
--cm-search-closeButton-textColorHover: var(
|
||||
--bolt-elements-editor-search-closeButton-textColorHover,
|
||||
var(--bolt-text-primary)
|
||||
);
|
||||
|
||||
--cm-search-button-backgroundColor: var(
|
||||
--bolt-elements-editor-search-button-backgroundColor,
|
||||
var(--bolt-background-secondary)
|
||||
);
|
||||
|
||||
--cm-search-button-backgroundColorHover: var(
|
||||
--bolt-elements-editor-search-button-backgroundColorHover,
|
||||
var(--bolt-background-active)
|
||||
);
|
||||
|
||||
--cm-search-button-textColor: var(--bolt-elements-editor-search-button-textColor, var(--bolt-text-secondary));
|
||||
--cm-search-button-textColorHover: var(--bolt-elements-editor-search-button-textColorHover, var(--bolt-text-primary));
|
||||
--cm-search-button-borderColor: var(--bolt-elements-editor-search-button-borderColor, transparent);
|
||||
|
||||
--cm-search-button-borderColorHover: var(
|
||||
--bolt-elements-editor-search-button-borderColorHover,
|
||||
var(--cm-search-button-borderColor)
|
||||
);
|
||||
|
||||
--cm-search-button-borderColorFocused: var(
|
||||
--bolt-elements-editor-search-button-borderColorFocused,
|
||||
var(--bolt-border-accent)
|
||||
);
|
||||
|
||||
--cm-search-input-backgroundColor: var(
|
||||
--bolt-elements-editor-search-input-backgroundColor,
|
||||
var(--bolt-background-primary)
|
||||
);
|
||||
|
||||
--cm-search-input-borderColor: var(
|
||||
--bolt-elements-editor-search-input-borderColor,
|
||||
var(--bolt-elements-app-borderColor)
|
||||
);
|
||||
|
||||
--cm-search-input-borderColorFocused: var(
|
||||
--bolt-elements-editor-search-input-borderColorFocused,
|
||||
var(--bolt-border-accent)
|
||||
);
|
||||
|
||||
/* Tooltip */
|
||||
|
||||
--cm-tooltip-backgroundColor: var(
|
||||
--bolt-elements-editor-tooltip-backgroundColor,
|
||||
var(--bolt-elements-app-backgroundColor)
|
||||
);
|
||||
|
||||
--cm-tooltip-textColor: var(--bolt-elements-editor-tooltip-textColor, var(--bolt-text-primary));
|
||||
|
||||
--cm-tooltip-backgroundColorSelected: var(
|
||||
--bolt-elements-editor-tooltip-backgroundColorSelected,
|
||||
var(--bolt-background-accent)
|
||||
);
|
||||
|
||||
--cm-tooltip-textColorSelected: var(
|
||||
--bolt-elements-editor-tooltip-textColorSelected,
|
||||
var(--bolt-text-primary-inverted)
|
||||
);
|
||||
|
||||
--cm-tooltip-borderColor: var(--bolt-elements-editor-tooltip-borderColor, var(--bolt-elements-app-borderColor));
|
||||
}
|
||||
|
||||
html[data-theme='light'] {
|
||||
--bolt-elements-editor-gutter-textColor: #237893;
|
||||
--bolt-elements-editor-gutter-activeLineTextColor: var(--bolt-text-primary);
|
||||
--bolt-elements-editor-foldGutter-textColorHover: var(--bolt-text-primary);
|
||||
}
|
||||
|
||||
html[data-theme='dark'] {
|
||||
--bolt-elements-editor-gutter-activeLineTextColor: var(--bolt-text-primary);
|
||||
--bolt-elements-editor-selection-backgroundOpacityBlured: 0.1;
|
||||
--bolt-elements-editor-activeLineBackgroundColor: rgb(50 53 63 / 50%);
|
||||
--bolt-elements-editor-foldGutter-textColorHover: var(--bolt-text-primary);
|
||||
}
|
||||
76
packages/bolt/app/components/editor/codemirror/themes/vscode-dark.ts
vendored
Normal file
76
packages/bolt/app/components/editor/codemirror/themes/vscode-dark.ts
vendored
Normal file
@@ -0,0 +1,76 @@
|
||||
import { HighlightStyle } from '@codemirror/language';
|
||||
import { tags } from '@lezer/highlight';
|
||||
|
||||
export const vscodeDarkTheme = HighlightStyle.define([
|
||||
{
|
||||
tag: [
|
||||
tags.keyword,
|
||||
tags.operatorKeyword,
|
||||
tags.modifier,
|
||||
tags.color,
|
||||
tags.constant(tags.name),
|
||||
tags.standard(tags.name),
|
||||
tags.standard(tags.tagName),
|
||||
tags.special(tags.brace),
|
||||
tags.atom,
|
||||
tags.bool,
|
||||
tags.special(tags.variableName),
|
||||
],
|
||||
color: '#569cd6',
|
||||
},
|
||||
{
|
||||
tag: [tags.controlKeyword, tags.moduleKeyword],
|
||||
color: '#c586c0',
|
||||
},
|
||||
{
|
||||
tag: [
|
||||
tags.name,
|
||||
tags.deleted,
|
||||
tags.character,
|
||||
tags.macroName,
|
||||
tags.propertyName,
|
||||
tags.variableName,
|
||||
tags.labelName,
|
||||
tags.definition(tags.name),
|
||||
],
|
||||
color: '#9cdcfe',
|
||||
},
|
||||
{ tag: tags.heading, fontWeight: 'bold', color: '#9cdcfe' },
|
||||
{
|
||||
tag: [
|
||||
tags.typeName,
|
||||
tags.className,
|
||||
tags.tagName,
|
||||
tags.number,
|
||||
tags.changed,
|
||||
tags.annotation,
|
||||
tags.self,
|
||||
tags.namespace,
|
||||
],
|
||||
color: '#4ec9b0',
|
||||
},
|
||||
{
|
||||
tag: [tags.function(tags.variableName), tags.function(tags.propertyName)],
|
||||
color: '#dcdcaa',
|
||||
},
|
||||
{ tag: [tags.number], color: '#b5cea8' },
|
||||
{
|
||||
tag: [tags.operator, tags.punctuation, tags.separator, tags.url, tags.escape, tags.regexp],
|
||||
color: '#d4d4d4',
|
||||
},
|
||||
{
|
||||
tag: [tags.regexp],
|
||||
color: '#d16969',
|
||||
},
|
||||
{
|
||||
tag: [tags.special(tags.string), tags.processingInstruction, tags.string, tags.inserted],
|
||||
color: '#ce9178',
|
||||
},
|
||||
{ tag: [tags.angleBracket], color: '#808080' },
|
||||
{ tag: tags.strong, fontWeight: 'bold' },
|
||||
{ tag: tags.emphasis, fontStyle: 'italic' },
|
||||
{ tag: tags.strikethrough, textDecoration: 'line-through' },
|
||||
{ tag: [tags.meta, tags.comment], color: '#6a9955' },
|
||||
{ tag: tags.link, color: '#6a9955', textDecoration: 'underline' },
|
||||
{ tag: tags.invalid, color: '#ff0000' },
|
||||
]);
|
||||
Reference in New Issue
Block a user