Browse Source

feat(CodeEditor): upgrade codemirror to v6

main
刘凯 1 year ago
parent
commit
eac51f0afb
  1. 7
      package.json
  2. 158
      pnpm-lock.yaml
  3. 23
      src/components/CodeEditor/src/CodeEditor.vue
  4. 127
      src/components/CodeEditor/src/codemirror/CodeMirror.vue
  5. 23
      src/components/CodeEditor/src/codemirror/codeMirror.ts
  6. 528
      src/components/CodeEditor/src/codemirror/codemirror.css
  7. 3
      src/components/CodeEditor/src/typing.ts

7
package.json

@ -26,11 +26,16 @@
"dependencies": { "dependencies": {
"@ant-design/colors": "^7.0.2", "@ant-design/colors": "^7.0.2",
"@ant-design/icons-vue": "^7.0.1", "@ant-design/icons-vue": "^7.0.1",
"@codemirror/commands": "^6.3.3",
"@codemirror/lang-javascript": "^6.2.2",
"@codemirror/lang-json": "^6.0.1",
"@codemirror/state": "^6.4.1",
"@codemirror/view": "^6.25.1",
"@vueuse/core": "^10.6.1", "@vueuse/core": "^10.6.1",
"@zxcvbn-ts/core": "^3.0.4", "@zxcvbn-ts/core": "^3.0.4",
"ant-design-vue": "~4.0.8", "ant-design-vue": "~4.0.8",
"axios": "^1.6.4", "axios": "^1.6.4",
"codemirror": "^5.65.16", "codemirror": "^6.0.1",
"cron-parser": "^4.9.0", "cron-parser": "^4.9.0",
"cropperjs": "^1.6.1", "cropperjs": "^1.6.1",
"crypto-js": "^4.2.0", "crypto-js": "^4.2.0",

158
pnpm-lock.yaml

@ -11,6 +11,21 @@ dependencies:
'@ant-design/icons-vue': '@ant-design/icons-vue':
specifier: ^7.0.1 specifier: ^7.0.1
version: 7.0.1(vue@3.3.13) version: 7.0.1(vue@3.3.13)
'@codemirror/commands':
specifier: ^6.3.3
version: 6.3.3
'@codemirror/lang-javascript':
specifier: ^6.2.2
version: 6.2.2
'@codemirror/lang-json':
specifier: ^6.0.1
version: 6.0.1
'@codemirror/state':
specifier: ^6.4.1
version: 6.4.1
'@codemirror/view':
specifier: ^6.25.1
version: 6.25.1
'@vueuse/core': '@vueuse/core':
specifier: ^10.6.1 specifier: ^10.6.1
version: 10.7.1(vue@3.3.13) version: 10.7.1(vue@3.3.13)
@ -24,8 +39,8 @@ dependencies:
specifier: ^1.6.4 specifier: ^1.6.4
version: 1.6.5 version: 1.6.5
codemirror: codemirror:
specifier: ^5.65.16 specifier: ^6.0.1
version: 5.65.16 version: 6.0.1(@lezer/common@1.2.1)
cron-parser: cron-parser:
specifier: ^4.9.0 specifier: ^4.9.0
version: 4.9.0 version: 4.9.0
@ -1576,6 +1591,87 @@ packages:
'@babel/helper-validator-identifier': 7.22.20 '@babel/helper-validator-identifier': 7.22.20
to-fast-properties: 2.0.0 to-fast-properties: 2.0.0
/@codemirror/autocomplete@6.14.0(@codemirror/language@6.10.1)(@codemirror/state@6.4.1)(@codemirror/view@6.25.1)(@lezer/common@1.2.1):
resolution: {integrity: sha512-Kx9BCSOLKmqNXEvmViuzsBQJ2VEa/wWwOATNpixOa+suttTV3rDnAUtAIt5ObAUFjXvZakWfFfF/EbxELnGLzQ==}
peerDependencies:
'@codemirror/language': ^6.0.0
'@codemirror/state': ^6.0.0
'@codemirror/view': ^6.0.0
'@lezer/common': ^1.0.0
dependencies:
'@codemirror/language': 6.10.1
'@codemirror/state': 6.4.1
'@codemirror/view': 6.25.1
'@lezer/common': 1.2.1
dev: false
/@codemirror/commands@6.3.3:
resolution: {integrity: sha512-dO4hcF0fGT9tu1Pj1D2PvGvxjeGkbC6RGcZw6Qs74TH+Ed1gw98jmUgd2axWvIZEqTeTuFrg1lEB1KV6cK9h1A==}
dependencies:
'@codemirror/language': 6.10.1
'@codemirror/state': 6.4.1
'@codemirror/view': 6.25.1
'@lezer/common': 1.2.1
dev: false
/@codemirror/lang-javascript@6.2.2:
resolution: {integrity: sha512-VGQfY+FCc285AhWuwjYxQyUQcYurWlxdKYT4bqwr3Twnd5wP5WSeu52t4tvvuWmljT4EmgEgZCqSieokhtY8hg==}
dependencies:
'@codemirror/autocomplete': 6.14.0(@codemirror/language@6.10.1)(@codemirror/state@6.4.1)(@codemirror/view@6.25.1)(@lezer/common@1.2.1)
'@codemirror/language': 6.10.1
'@codemirror/lint': 6.5.0
'@codemirror/state': 6.4.1
'@codemirror/view': 6.25.1
'@lezer/common': 1.2.1
'@lezer/javascript': 1.4.13
dev: false
/@codemirror/lang-json@6.0.1:
resolution: {integrity: sha512-+T1flHdgpqDDlJZ2Lkil/rLiRy684WMLc74xUnjJH48GQdfJo/pudlTRreZmKwzP8/tGdKf83wlbAdOCzlJOGQ==}
dependencies:
'@codemirror/language': 6.10.1
'@lezer/json': 1.0.2
dev: false
/@codemirror/language@6.10.1:
resolution: {integrity: sha512-5GrXzrhq6k+gL5fjkAwt90nYDmjlzTIJV8THnxNFtNKWotMIlzzN+CpqxqwXOECnUdOndmSeWntVrVcv5axWRQ==}
dependencies:
'@codemirror/state': 6.4.1
'@codemirror/view': 6.25.1
'@lezer/common': 1.2.1
'@lezer/highlight': 1.2.0
'@lezer/lr': 1.4.0
style-mod: 4.1.2
dev: false
/@codemirror/lint@6.5.0:
resolution: {integrity: sha512-+5YyicIaaAZKU8K43IQi8TBy6mF6giGeWAH7N96Z5LC30Wm5JMjqxOYIE9mxwMG1NbhT2mA3l9hA4uuKUM3E5g==}
dependencies:
'@codemirror/state': 6.4.1
'@codemirror/view': 6.25.1
crelt: 1.0.6
dev: false
/@codemirror/search@6.5.6:
resolution: {integrity: sha512-rpMgcsh7o0GuCDUXKPvww+muLA1pDJaFrpq/CCHtpQJYz8xopu4D1hPcKRoDD0YlF8gZaqTNIRa4VRBWyhyy7Q==}
dependencies:
'@codemirror/state': 6.4.1
'@codemirror/view': 6.25.1
crelt: 1.0.6
dev: false
/@codemirror/state@6.4.1:
resolution: {integrity: sha512-QkEyUiLhsJoZkbumGZlswmAhA7CBU02Wrz7zvH4SrcifbsqwlXShVXg65f3v/ts57W3dqyamEriMhij1Z3Zz4A==}
dev: false
/@codemirror/view@6.25.1:
resolution: {integrity: sha512-2LXLxsQnHDdfGzDvjzAwZh2ZviNJm7im6tGpa0IONIDnFd8RZ80D2SNi8PDi6YjKcMoMRK20v6OmKIdsrwsyoQ==}
dependencies:
'@codemirror/state': 6.4.1
style-mod: 4.1.2
w3c-keyname: 2.2.8
dev: false
/@ctrl/tinycolor@3.6.1: /@ctrl/tinycolor@3.6.1:
resolution: {integrity: sha512-SITSV6aIXsuVNV3f3O0f2n/cgyEDWoSqtZMYiAmcsYHydcKrOz3gUxB/iXd/Qf08+IZX4KpgNbvUdMBmWz+kcA==} resolution: {integrity: sha512-SITSV6aIXsuVNV3f3O0f2n/cgyEDWoSqtZMYiAmcsYHydcKrOz3gUxB/iXd/Qf08+IZX4KpgNbvUdMBmWz+kcA==}
engines: {node: '>=10'} engines: {node: '>=10'}
@ -2148,6 +2244,38 @@ packages:
type-detect: 4.0.8 type-detect: 4.0.8
dev: true dev: true
/@lezer/common@1.2.1:
resolution: {integrity: sha512-yemX0ZD2xS/73llMZIK6KplkjIjf2EvAHcinDi/TfJ9hS25G0388+ClHt6/3but0oOxinTcQHJLDXh6w1crzFQ==}
dev: false
/@lezer/highlight@1.2.0:
resolution: {integrity: sha512-WrS5Mw51sGrpqjlh3d4/fOwpEV2Hd3YOkp9DBt4k8XZQcoTHZFB7sx030A6OcahF4J1nDQAa3jXlTVVYH50IFA==}
dependencies:
'@lezer/common': 1.2.1
dev: false
/@lezer/javascript@1.4.13:
resolution: {integrity: sha512-5IBr8LIO3xJdJH1e9aj/ZNLE4LSbdsx25wFmGRAZsj2zSmwAYjx26JyU/BYOCpRQlu1jcv1z3vy4NB9+UkfRow==}
dependencies:
'@lezer/common': 1.2.1
'@lezer/highlight': 1.2.0
'@lezer/lr': 1.4.0
dev: false
/@lezer/json@1.0.2:
resolution: {integrity: sha512-xHT2P4S5eeCYECyKNPhr4cbEL9tc8w83SPwRC373o9uEdrvGKTZoJVAGxpOsZckMlEh9W23Pc72ew918RWQOBQ==}
dependencies:
'@lezer/common': 1.2.1
'@lezer/highlight': 1.2.0
'@lezer/lr': 1.4.0
dev: false
/@lezer/lr@1.4.0:
resolution: {integrity: sha512-Wst46p51km8gH0ZUmeNrtpRYmdlRHUpN1DQd3GFAyKANi8WVz8c2jHYTf1CVScFaCjQw1iO3ZZdqGDxQPRErTg==}
dependencies:
'@lezer/common': 1.2.1
dev: false
/@ljharb/through@2.3.11: /@ljharb/through@2.3.11:
resolution: {integrity: sha512-ccfcIDlogiXNq5KcbAwbaO7lMh3Tm1i3khMPYpxlK8hH/W53zN81KM9coerRLOnTGu3nfXIniAmQbRI9OxbC0w==} resolution: {integrity: sha512-ccfcIDlogiXNq5KcbAwbaO7lMh3Tm1i3khMPYpxlK8hH/W53zN81KM9coerRLOnTGu3nfXIniAmQbRI9OxbC0w==}
engines: {node: '>= 0.4'} engines: {node: '>= 0.4'}
@ -3689,8 +3817,18 @@ packages:
engines: {node: '>=0.8'} engines: {node: '>=0.8'}
dev: true dev: true
/codemirror@5.65.16: /codemirror@6.0.1(@lezer/common@1.2.1):
resolution: {integrity: sha512-br21LjYmSlVL0vFCPWPfhzUCT34FM/pAdK7rRIZwa0rrtrIdotvP4Oh4GUHsu2E3IrQMCfRkL/fN3ytMNxVQvg==} resolution: {integrity: sha512-J8j+nZ+CdWmIeFIGXEFbFPtpiYacFMDR8GlHK3IyHQJMCaVRfGx9NT+Hxivv1ckLWPvNdZqndbr/7lVhrf/Svg==}
dependencies:
'@codemirror/autocomplete': 6.14.0(@codemirror/language@6.10.1)(@codemirror/state@6.4.1)(@codemirror/view@6.25.1)(@lezer/common@1.2.1)
'@codemirror/commands': 6.3.3
'@codemirror/language': 6.10.1
'@codemirror/lint': 6.5.0
'@codemirror/search': 6.5.6
'@codemirror/state': 6.4.1
'@codemirror/view': 6.25.1
transitivePeerDependencies:
- '@lezer/common'
dev: false dev: false
/codepage@1.15.0: /codepage@1.15.0:
@ -3841,6 +3979,10 @@ packages:
hasBin: true hasBin: true
dev: false dev: false
/crelt@1.0.6:
resolution: {integrity: sha512-VQ2MBenTq1fWZUH9DJNGti7kKv6EeAuYr3cLwxUWhIu1baTaXh4Ib5W2CqHVqib4/MqbYGJqiL3Zb8GJZr3l4g==}
dev: false
/cron-parser@4.9.0: /cron-parser@4.9.0:
resolution: {integrity: sha512-p0SaNjrHOnQeR8/VnfGbmg9te2kfyYSQ7Sc/j/6DtPL3JQvKxmjO9TSjNFpujqV3vEYYBvNNvXSxzyksBWAx1Q==} resolution: {integrity: sha512-p0SaNjrHOnQeR8/VnfGbmg9te2kfyYSQ7Sc/j/6DtPL3JQvKxmjO9TSjNFpujqV3vEYYBvNNvXSxzyksBWAx1Q==}
engines: {node: '>=12.0.0'} engines: {node: '>=12.0.0'}
@ -7785,6 +7927,10 @@ packages:
engines: {node: '>=8'} engines: {node: '>=8'}
dev: true dev: true
/style-mod@4.1.2:
resolution: {integrity: sha512-wnD1HyVqpJUI2+eKZ+eo1UwghftP6yuFheBqqe+bWCotBjC2K1YnteJILRMs3SM4V/0dLEW1SC27MWP5y+mwmw==}
dev: false
/stylis@4.3.1: /stylis@4.3.1:
resolution: {integrity: sha512-EQepAV+wMsIaGVGX1RECzgrcqRRU/0sYOHkeLsZ3fzHaHXZy4DaOOX0vOlGQdlsjkh3mFHAIlVimpwAs4dslyQ==} resolution: {integrity: sha512-EQepAV+wMsIaGVGX1RECzgrcqRRU/0sYOHkeLsZ3fzHaHXZy4DaOOX0vOlGQdlsjkh3mFHAIlVimpwAs4dslyQ==}
dev: false dev: false
@ -8525,6 +8671,10 @@ packages:
vue: 3.3.13(typescript@5.3.3) vue: 3.3.13(typescript@5.3.3)
dev: false dev: false
/w3c-keyname@2.2.8:
resolution: {integrity: sha512-dpojBhNsCNN7T82Tm7k26A6G9ML3NkhDsnw9n/eoxSRlVBB4CEtIQ/KTCLI2Fwf3ataSXRhYFkQi3SlnFwPvPQ==}
dev: false
/warning@4.0.3: /warning@4.0.3:
resolution: {integrity: sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==} resolution: {integrity: sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==}
dependencies: dependencies:

23
src/components/CodeEditor/src/CodeEditor.vue

@ -10,33 +10,20 @@ const props = defineProps({
type: String as PropType<MODE>, type: String as PropType<MODE>,
default: MODE.JSON, default: MODE.JSON,
validator(value: any) { validator(value: any) {
//
return Object.values(MODE).includes(value) return Object.values(MODE).includes(value)
}, },
}, },
readonly: { type: Boolean }, readonly: { type: Boolean },
autoFormat: { type: Boolean, default: true },
bordered: { type: Boolean, default: false },
}) })
const emit = defineEmits(['change', 'update:value', 'formatError']) const emit = defineEmits(['change', 'update:value', 'formatError'])
const getValue = computed(() => { const getValue = computed(() => {
const { value, mode, autoFormat } = props const { value } = props
if (!autoFormat || mode !== MODE.JSON) if (isString(value))
return value as string return value
let result = value return JSON.stringify(value, null, 2)
if (isString(value)) {
try {
result = JSON.parse(value)
}
catch (e) {
emit('formatError', value)
return value as string
}
}
return JSON.stringify(result, null, 2)
}) })
function handleValueChange(v) { function handleValueChange(v) {
@ -47,6 +34,6 @@ function handleValueChange(v) {
<template> <template>
<div class="h-full"> <div class="h-full">
<CodeMirrorEditor :value="getValue" :mode="mode" :readonly="readonly" :bordered="bordered" @change="handleValueChange" /> <CodeMirrorEditor :value="getValue" :mode="mode" :readonly="readonly" @change="handleValueChange" />
</div> </div>
</template> </template>

127
src/components/CodeEditor/src/codemirror/CodeMirror.vue

@ -1,116 +1,99 @@
<script lang="ts" setup> <script lang="ts" setup>
import { nextTick, onMounted, onUnmounted, ref, unref, watch, watchEffect } from 'vue' import { nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
import { useDebounceFn } from '@vueuse/core' import { useDebounceFn } from '@vueuse/core'
import CodeMirror from 'codemirror' import { basicSetup } from 'codemirror'
import type { ViewUpdate } from '@codemirror/view'
import { EditorView, keymap } from '@codemirror/view'
import { EditorState } from '@codemirror/state'
import { javascript } from '@codemirror/lang-javascript'
import { json } from '@codemirror/lang-json'
import { indentWithTab } from '@codemirror/commands'
import { MODE } from './../typing' import { MODE } from './../typing'
import { useAppStore } from '@/store/modules/app'
import { useWindowSizeFn } from '@/hooks/event/useWindowSizeFn'
// css
import './codemirror.css'
import 'codemirror/theme/idea.css'
import 'codemirror/theme/material-palenight.css'
// modes
import 'codemirror/mode/javascript/javascript'
import 'codemirror/mode/css/css'
import 'codemirror/mode/htmlmixed/htmlmixed'
const props = defineProps({ const props = defineProps({
mode: { mode: {
type: String as PropType<MODE>, type: String as PropType<MODE>,
default: MODE.JSON, default: MODE.JSON,
validator(value: any) { validator(value: any) {
//
return Object.values(MODE).includes(value) return Object.values(MODE).includes(value)
}, },
}, },
value: { type: String, default: '' }, value: { type: String, default: '' },
readonly: { type: Boolean, default: false }, readonly: {
bordered: { type: Boolean, default: false }, type: Boolean,
},
}) })
const emit = defineEmits(['change']) const emit = defineEmits(['change'])
const el = ref() const container = ref()
let editor: Nullable<CodeMirror.Editor> let editorView: EditorView
const debounceRefresh = useDebounceFn(refresh, 100)
const appStore = useAppStore()
watch( watch(
() => props.value, () => props.value,
async (value) => { async (value) => {
await nextTick() await nextTick()
const oldValue = editor?.getValue() if (value !== editorView.state.doc.toString()) {
if (value !== oldValue) editorView.dispatch({
editor?.setValue(value || '') changes: { from: 0, insert: value },
})
}
}, },
{ flush: 'post' }, { flush: 'post' },
) )
watchEffect(() => {
editor?.setOption('mode', props.mode)
})
watch(
() => appStore.getDarkMode,
async () => {
setTheme()
},
{
immediate: true,
},
)
function setTheme() {
unref(editor)?.setOption('theme', appStore.getDarkMode === 'light' ? 'idea' : 'material-palenight')
}
function refresh() {
editor?.refresh()
}
async function init() { async function init() {
const addonOptions = { const extensions = [basicSetup, keymap.of([indentWithTab])]
autoCloseBrackets: true, switch (props.mode) {
autoCloseTags: true, case MODE.JS:
foldGutter: true, extensions.push(javascript())
gutters: ['CodeMirror-linenumbers'], break
case MODE.JSON:
extensions.push(json())
break
default: {
const _exhaustiveCheck: never = props.mode
console.error(`[CodeMirror]: Unknown language ${props.mode}`)
return _exhaustiveCheck
}
} }
editor = CodeMirror(el.value!, { const startState = EditorState.create({
value: '', doc: props.value,
mode: props.mode, extensions: [
readOnly: props.readonly, ...extensions,
tabSize: 2, EditorView.updateListener.of(useDebounceFn((e: ViewUpdate) => {
theme: 'material-palenight', const context = e.state.doc.toString()
lineWrapping: true, emit('change', context)
lineNumbers: true, })),
...addonOptions, EditorState.readOnly.of(props.readonly),
],
}) })
editor?.setValue(props.value)
setTheme() editorView = new EditorView({
editor?.on('change', () => { state: startState,
emit('change', editor?.getValue()) parent: container.value,
}) })
} }
onMounted(async () => { onMounted(async () => {
await nextTick() await nextTick()
init() init()
useWindowSizeFn(debounceRefresh)
}) })
onBeforeUnmount(() => {
onUnmounted(() => { editorView?.destroy()
editor = null
}) })
</script> </script>
<template> <template>
<div <div
ref="el" ref="container"
class="relative w-full overflow-hidden !h-full" class="code-mirror relative w-full overflow-hidden !h-full"
:class="{ 'ant-input': props.bordered, 'css-dev-only-do-not-override-kqecok': props.bordered }"
/> />
</template> </template>
<style>
.code-mirror > .cm-editor {
height: 100%;
}
</style>

23
src/components/CodeEditor/src/codemirror/codeMirror.ts

@ -1,23 +0,0 @@
import CodeMirror from 'codemirror'
import './codemirror.css'
import 'codemirror/theme/idea.css'
import 'codemirror/theme/material-palenight.css'
// import 'codemirror/addon/lint/lint.css';
// modes
import 'codemirror/mode/javascript/javascript'
import 'codemirror/mode/css/css'
import 'codemirror/mode/htmlmixed/htmlmixed'
// addons
// import 'codemirror/addon/edit/closebrackets';
// import 'codemirror/addon/edit/closetag';
// import 'codemirror/addon/comment/comment';
// import 'codemirror/addon/fold/foldcode';
// import 'codemirror/addon/fold/foldgutter';
// import 'codemirror/addon/fold/brace-fold';
// import 'codemirror/addon/fold/indent-fold';
// import 'codemirror/addon/lint/json-lint';
// import 'codemirror/addon/fold/comment-fold';
export { CodeMirror }

528
src/components/CodeEditor/src/codemirror/codemirror.css

@ -1,528 +0,0 @@
/* BASICS */
.CodeMirror {
--base: #545281;
--comment: hsl(210deg 25% 60%);
--keyword: #af4ab1;
--variable: #0055d1;
--function: #c25205;
--string: #2ba46d;
--number: #c25205;
--tags: #d00;
--qualifier: #ff6032;
--important: var(--string);
position: relative;
height: auto;
height: 100%;
overflow: hidden;
font-family: var(--font-code);
background: white;
direction: ltr;
}
/* PADDING */
.CodeMirror-lines {
min-height: 1px; /* prevents collapsing before first draw */
padding: 4px 0; /* Vertical padding around content */
cursor: text;
}
.CodeMirror-scrollbar-filler,
.CodeMirror-gutter-filler {
background-color: white; /* The little square between H and V scrollbars */
}
/* GUTTER */
.CodeMirror-gutters {
position: absolute;
top: 0;
left: 0;
z-index: 3;
min-height: 100%;
white-space: nowrap;
background-color: transparent;
border-right: 1px solid #ddd;
}
.CodeMirror-linenumber {
min-width: 20px;
padding: 0 3px 0 5px;
color: var(--comment);
text-align: right;
white-space: nowrap;
opacity: 0.6;
}
.CodeMirror-guttermarker {
color: black;
}
.CodeMirror-guttermarker-subtle {
color: #999;
}
/* FOLD GUTTER */
.CodeMirror-foldmarker {
font-family: arial;
line-height: 0.3;
color: #414141;
text-shadow:
#f96 1px 1px 2px,
#f96 -1px -1px 2px,
#f96 1px -1px 2px,
#f96 -1px 1px 2px;
cursor: pointer;
}
.CodeMirror-foldgutter {
width: 0.7em;
}
.CodeMirror-foldgutter-open,
.CodeMirror-foldgutter-folded {
cursor: pointer;
}
.CodeMirror-foldgutter-open::after,
.CodeMirror-foldgutter-folded::after {
position: relative;
top: -0.1em;
display: inline-block;
font-size: 0.8em;
content: '>';
opacity: 0.8;
transform: rotate(90deg);
transition: transform 0.2s;
}
.CodeMirror-foldgutter-folded::after {
transform: none;
}
/* CURSOR */
.CodeMirror-cursor {
position: absolute;
width: 0;
pointer-events: none;
border-right: none;
border-left: 1px solid black;
}
/* Shown when moving in bi-directional text */
.CodeMirror div.CodeMirror-secondarycursor {
border-left: 1px solid silver;
}
.cm-fat-cursor .CodeMirror-cursor {
width: auto;
background: #7e7;
border: 0 !important;
}
.cm-fat-cursor div.CodeMirror-cursors {
z-index: 1;
}
.cm-fat-cursor-mark {
background-color: rgb(20 255 20 / 50%);
animation: blink 1.06s steps(1) infinite;
}
.cm-animate-fat-cursor {
width: auto;
background-color: #7e7;
border: 0;
animation: blink 1.06s steps(1) infinite;
}
@keyframes blink {
50% {
background-color: transparent;
}
}
@keyframes blink {
50% {
background-color: transparent;
}
}
@keyframes blink {
50% {
background-color: transparent;
}
}
.cm-tab {
display: inline-block;
text-decoration: inherit;
}
.CodeMirror-rulers {
position: absolute;
top: -50px;
right: 0;
bottom: -20px;
left: 0;
overflow: hidden;
}
.CodeMirror-ruler {
position: absolute;
top: 0;
bottom: 0;
border-left: 1px solid #ccc;
}
/* DEFAULT THEME */
.cm-s-default.CodeMirror {
background-color: transparent;
}
.cm-s-default .cm-header {
color: blue;
}
.cm-s-default .cm-quote {
color: #090;
}
.cm-negative {
color: #d44;
}
.cm-positive {
color: #292;
}
.cm-header,
.cm-strong {
font-weight: bold;
}
.cm-em {
font-style: italic;
}
.cm-link {
text-decoration: underline;
}
.cm-strikethrough {
text-decoration: line-through;
}
.cm-s-default .cm-atom,
.cm-s-default .cm-def,
.cm-s-default .cm-property,
.cm-s-default .cm-variable-2,
.cm-s-default .cm-variable-3,
.cm-s-default .cm-punctuation {
color: var(--base);
}
.cm-s-default .cm-hr,
.cm-s-default .cm-comment {
color: var(--comment);
}
.cm-s-default .cm-attribute,
.cm-s-default .cm-keyword {
color: var(--keyword);
}
.cm-s-default .cm-variable {
color: var(--variable);
}
.cm-s-default .cm-bracket,
.cm-s-default .cm-tag {
color: var(--tags);
}
.cm-s-default .cm-number {
color: var(--number);
}
.cm-s-default .cm-string,
.cm-s-default .cm-string-2 {
color: var(--string);
}
.cm-s-default .cm-type {
color: #085;
}
.cm-s-default .cm-meta {
color: #555;
}
.cm-s-default .cm-qualifier {
color: var(--qualifier);
}
.cm-s-default .cm-builtin {
color: #7539ff;
}
.cm-s-default .cm-link {
color: var(--flash);
}
.cm-s-default .cm-error {
color: #ff008c;
}
.cm-invalidchar {
color: #ff008c;
}
.CodeMirror-composing {
border-bottom: 2px solid;
}
/* Default styles for common addons */
div.CodeMirror span.CodeMirror-matchingbracket {
color: #0b0;
}
div.CodeMirror span.CodeMirror-nonmatchingbracket {
color: #a22;
}
.CodeMirror-matchingtag {
background: rgb(255 150 0 / 30%);
}
.CodeMirror-activeline-background {
background: #e8f2ff;
}
/* STOP */
/* The rest of this file contains styles related to the mechanics of
the editor. You probably shouldn't touch them. */
.CodeMirror-scroll {
position: relative;
height: 100%;
margin-right: -30px;
/* 30px is the magic margin used to hide the element's real scrollbars */
/* See overflow: hidden in .CodeMirror */
margin-bottom: -30px;
overflow: scroll !important; /* Things will break if this is overridden */
outline: none; /* Prevent dragging from highlighting the element */
}
.CodeMirror-sizer {
position: relative;
margin-bottom: 20px !important;
border-right: 30px solid transparent;
}
/* The fake, visible scrollbars. Used to force redraw during scrolling
before actual scrolling happens, thus preventing shaking and
flickering artifacts. */
.CodeMirror-vscrollbar,
.CodeMirror-hscrollbar,
.CodeMirror-scrollbar-filler,
.CodeMirror-gutter-filler {
position: absolute;
z-index: 6;
display: none;
}
.CodeMirror-vscrollbar {
top: 0;
right: 0;
overflow-x: hidden;
overflow-y: scroll;
}
.CodeMirror-hscrollbar {
bottom: 0;
left: 0;
overflow-x: scroll;
overflow-y: hidden;
}
.CodeMirror-scrollbar-filler {
right: 0;
bottom: 0;
}
.CodeMirror-gutter-filler {
bottom: 0;
left: 0;
}
.CodeMirror-gutter {
display: inline-block;
height: 100%;
margin-bottom: -30px;
white-space: normal;
vertical-align: top;
}
.CodeMirror-gutter-wrapper {
position: absolute;
z-index: 4;
background: none !important;
border: none !important;
}
.CodeMirror-gutter-background {
position: absolute;
top: 0;
bottom: 0;
z-index: 4;
}
.CodeMirror-gutter-elt {
position: absolute;
z-index: 4;
cursor: default;
}
.CodeMirror-gutter-wrapper ::selection {
background-color: transparent;
}
.CodeMirrorwrapper ::selection {
background-color: transparent;
}
.CodeMirror pre {
position: relative;
z-index: 2;
padding: 0 4px; /* Horizontal padding of content */
margin: 0;
overflow: visible;
font-family: inherit;
font-size: inherit;
line-height: inherit;
color: inherit;
word-wrap: normal;
white-space: pre;
background: transparent;
border-width: 0;
/* Reset some styles that the rest of the page might have set */
border-radius: 0;
-webkit-tap-highlight-color: transparent;
font-variant-ligatures: contextual;
}
.CodeMirror-wrap pre {
word-break: normal;
word-wrap: break-word;
white-space: pre-wrap;
}
.CodeMirror-linebackground {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 0;
}
.CodeMirror-linewidget {
position: relative;
z-index: 2;
padding: 0.1px; /* Force widget margins to stay inside of the container */
}
.CodeMirror-rtl pre {
direction: rtl;
}
.CodeMirror-code {
outline: none;
}
/* Force content-box sizing for the elements where we expect it */
.CodeMirror-scroll,
.CodeMirror-sizer,
.CodeMirror-gutter,
.CodeMirror-gutters,
.CodeMirror-linenumber {
box-sizing: content-box;
}
.CodeMirror-measure {
position: absolute;
width: 100%;
height: 0;
overflow: hidden;
visibility: hidden;
}
.CodeMirror-measure pre {
position: static;
}
div.CodeMirror-cursors {
position: relative;
z-index: 3;
visibility: hidden;
}
div.CodeMirror-dragcursors {
visibility: visible;
}
.CodeMirror-focused div.CodeMirror-cursors {
visibility: visible;
}
.CodeMirror-selected {
background: #d9d9d9;
}
.CodeMirror-focused .CodeMirror-selected {
background: #d7d4f0;
}
.CodeMirror-crosshair {
cursor: crosshair;
}
.CodeMirror-line::selection,
.CodeMirror-line > span::selection,
.CodeMirror-line > span > span::selection {
background: #d7d4f0;
}
.cm-searching {
background-color: #ffa;
background-color: rgb(255 255 0 / 40%);
}
/* Used to force a border model for a node */
.cm-force-border {
padding-right: 0.1px;
}
@media print {
/* Hide the cursor when printing */
.CodeMirror div.CodeMirror-cursors {
visibility: hidden;
}
}
/* See issue #2901 */
.cm-tab-wrap-hack::after {
content: '';
}
/* Help users use markselection to safely style text background */
span.CodeMirror-selectedtext {
background: none;
}

3
src/components/CodeEditor/src/typing.ts

@ -1,5 +1,4 @@
export enum MODE { export enum MODE {
JSON = 'application/json', JSON = 'json',
HTML = 'htmlmixed',
JS = 'javascript', JS = 'javascript',
} }

Loading…
Cancel
Save