explicitly set default codemirror plugins (#2101)
Signed-off-by: Jess Frazelle <github@jessfraz.com>
This commit is contained in:
@ -2,7 +2,6 @@ import { undo, redo } from '@codemirror/commands'
|
|||||||
import ReactCodeMirror, {
|
import ReactCodeMirror, {
|
||||||
Extension,
|
Extension,
|
||||||
ViewUpdate,
|
ViewUpdate,
|
||||||
keymap,
|
|
||||||
SelectionRange,
|
SelectionRange,
|
||||||
} from '@uiw/react-codemirror'
|
} from '@uiw/react-codemirror'
|
||||||
import { TEST } from 'env'
|
import { TEST } from 'env'
|
||||||
@ -11,14 +10,33 @@ import { useSettingsAuthContext } from 'hooks/useSettingsAuthContext'
|
|||||||
import { useConvertToVariable } from 'hooks/useToolbarGuards'
|
import { useConvertToVariable } from 'hooks/useToolbarGuards'
|
||||||
import { Themes } from 'lib/theme'
|
import { Themes } from 'lib/theme'
|
||||||
import { useEffect, useMemo, useRef } from 'react'
|
import { useEffect, useMemo, useRef } from 'react'
|
||||||
import { indentWithTab } from '@codemirror/commands'
|
|
||||||
import { linter, lintGutter } from '@codemirror/lint'
|
|
||||||
import { foldGutter } from '@codemirror/language'
|
|
||||||
import { useStore } from 'useStore'
|
import { useStore } from 'useStore'
|
||||||
import { processCodeMirrorRanges } from 'lib/selections'
|
import { processCodeMirrorRanges } from 'lib/selections'
|
||||||
import { EditorView, lineHighlightField } from 'editor/highlightextension'
|
import { highlightSelectionMatches, searchKeymap } from '@codemirror/search'
|
||||||
|
import { lineHighlightField } from 'editor/highlightextension'
|
||||||
import { roundOff } from 'lib/utils'
|
import { roundOff } from 'lib/utils'
|
||||||
|
import {
|
||||||
|
lineNumbers,
|
||||||
|
highlightActiveLineGutter,
|
||||||
|
highlightSpecialChars,
|
||||||
|
highlightActiveLine,
|
||||||
|
keymap,
|
||||||
|
EditorView,
|
||||||
|
} from '@codemirror/view'
|
||||||
|
import {
|
||||||
|
indentWithTab,
|
||||||
|
defaultKeymap,
|
||||||
|
historyKeymap,
|
||||||
|
history,
|
||||||
|
} from '@codemirror/commands'
|
||||||
|
import { lintGutter, lintKeymap, linter } from '@codemirror/lint'
|
||||||
import { kclErrToDiagnostic } from 'lang/errors'
|
import { kclErrToDiagnostic } from 'lang/errors'
|
||||||
|
import {
|
||||||
|
foldGutter,
|
||||||
|
foldKeymap,
|
||||||
|
bracketMatching,
|
||||||
|
indentOnInput,
|
||||||
|
} from '@codemirror/language'
|
||||||
import { CSSRuleObject } from 'tailwindcss/types/config'
|
import { CSSRuleObject } from 'tailwindcss/types/config'
|
||||||
import { useModelingContext } from 'hooks/useModelingContext'
|
import { useModelingContext } from 'hooks/useModelingContext'
|
||||||
import interact from '@replit/codemirror-interact'
|
import interact from '@replit/codemirror-interact'
|
||||||
@ -28,7 +46,12 @@ import { ModelingMachineEvent } from 'machines/modelingMachine'
|
|||||||
import { NetworkHealthState, useNetworkStatus } from './NetworkHealthIndicator'
|
import { NetworkHealthState, useNetworkStatus } from './NetworkHealthIndicator'
|
||||||
import { useHotkeys } from 'react-hotkeys-hook'
|
import { useHotkeys } from 'react-hotkeys-hook'
|
||||||
import { useLspContext } from './LspProvider'
|
import { useLspContext } from './LspProvider'
|
||||||
import { Prec } from '@codemirror/state'
|
import { Prec, EditorState } from '@codemirror/state'
|
||||||
|
import {
|
||||||
|
closeBrackets,
|
||||||
|
closeBracketsKeymap,
|
||||||
|
completionKeymap,
|
||||||
|
} from '@codemirror/autocomplete'
|
||||||
|
|
||||||
export const editorShortcutMeta = {
|
export const editorShortcutMeta = {
|
||||||
formatCode: {
|
formatCode: {
|
||||||
@ -150,7 +173,17 @@ export const TextEditor = ({
|
|||||||
const editorExtensions = useMemo(() => {
|
const editorExtensions = useMemo(() => {
|
||||||
const extensions = [
|
const extensions = [
|
||||||
lineHighlightField,
|
lineHighlightField,
|
||||||
|
history(),
|
||||||
|
closeBrackets(),
|
||||||
keymap.of([
|
keymap.of([
|
||||||
|
...closeBracketsKeymap,
|
||||||
|
...defaultKeymap,
|
||||||
|
...searchKeymap,
|
||||||
|
...historyKeymap,
|
||||||
|
...foldKeymap,
|
||||||
|
...completionKeymap,
|
||||||
|
...lintKeymap,
|
||||||
|
indentWithTab,
|
||||||
{
|
{
|
||||||
key: 'Meta-k',
|
key: 'Meta-k',
|
||||||
run: () => {
|
run: () => {
|
||||||
@ -181,15 +214,22 @@ export const TextEditor = ({
|
|||||||
if (kclLSP) extensions.push(Prec.highest(kclLSP))
|
if (kclLSP) extensions.push(Prec.highest(kclLSP))
|
||||||
if (copilotLSP) extensions.push(copilotLSP)
|
if (copilotLSP) extensions.push(copilotLSP)
|
||||||
|
|
||||||
// We do the tab keymap after the LSPs with the lowest precedence.
|
|
||||||
// Specifically, tab for in a completion.
|
|
||||||
extensions.push(Prec.lowest(keymap.of([indentWithTab])))
|
|
||||||
|
|
||||||
// These extensions have proven to mess with vitest
|
// These extensions have proven to mess with vitest
|
||||||
if (!TEST) {
|
if (!TEST) {
|
||||||
extensions.push(
|
extensions.push(
|
||||||
lintGutter(),
|
lintGutter(),
|
||||||
|
lineNumbers(),
|
||||||
|
highlightActiveLineGutter(),
|
||||||
|
highlightSpecialChars(),
|
||||||
|
history(),
|
||||||
foldGutter(),
|
foldGutter(),
|
||||||
|
EditorState.allowMultipleSelections.of(true),
|
||||||
|
indentOnInput(),
|
||||||
|
bracketMatching(),
|
||||||
|
closeBrackets(),
|
||||||
|
highlightActiveLine(),
|
||||||
|
highlightSelectionMatches(),
|
||||||
|
lintGutter(),
|
||||||
linter((_view) => {
|
linter((_view) => {
|
||||||
return kclErrToDiagnostic(errors)
|
return kclErrToDiagnostic(errors)
|
||||||
}),
|
}),
|
||||||
|
Reference in New Issue
Block a user