btwedutech/hoppscotch
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 6 Wiki Activity

fix: remove basic-setup and drawSelection on codemirror instance to resolve ::selection property

Browse Source
This commit is contained in:
liyasthomas
2021-11-12 07:05:34 +05:30
parent 7d7f628f6e
commit 103ef8ee0d
5 changed files with 93 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
packages/hoppscotch-app/assets/scss/styles.scss
View File

@@ -31,8 +31,11 @@
}
::selection {
@apply bg-accent;
@apply text-accentContrast;
@apply bg-divider;
}
.cm-focused {
@apply !outline-none;
}
input::placeholder,

3
packages/hoppscotch-app/helpers/editor/codemirror.ts
View File

@@ -8,7 +8,6 @@ import {
} from "@codemirror/state"
import { Language, LanguageSupport } from "@codemirror/language"
import { defaultKeymap } from "@codemirror/commands"
import { basicSetup } from "@codemirror/basic-setup"
import { Completion, autocompletion } from "@codemirror/autocomplete"
import { linter } from "@codemirror/lint"
@@ -23,7 +22,7 @@ import * as O from "fp-ts/Option"
import { isJSONContentType } from "../utils/contenttypes"
import { Completer } from "./completion"
import { LinterDefinition } from "./linting/linter"
import { baseTheme, baseHighlightStyle } from "./themes/baseTheme"
import { basicSetup, baseTheme, baseHighlightStyle } from "./themes/baseTheme"
type ExtendedEditorConfig = {
mode: string

64
packages/hoppscotch-app/helpers/editor/themes/baseTheme.ts
View File

@@ -1,6 +1,28 @@
import { EditorView } from "@codemirror/view"
import { HighlightStyle, tags as t } from "@codemirror/highlight"
import { foldGutter } from "@codemirror/fold"
import {
EditorView,
keymap,
highlightSpecialChars,
highlightActiveLine,
} from "@codemirror/view"
import {
HighlightStyle,
tags as t,
defaultHighlightStyle,
} from "@codemirror/highlight"
import { foldKeymap, foldGutter } from "@codemirror/fold"
import { Extension, EditorState } from "@codemirror/state"
import { history, historyKeymap } from "@codemirror/history"
import { indentOnInput } from "@codemirror/language"
import { lineNumbers, highlightActiveLineGutter } from "@codemirror/gutter"
import { defaultKeymap } from "@codemirror/commands"
import { bracketMatching } from "@codemirror/matchbrackets"
import { closeBrackets, closeBracketsKeymap } from "@codemirror/closebrackets"
import { searchKeymap, highlightSelectionMatches } from "@codemirror/search"
import { autocompletion, completionKeymap } from "@codemirror/autocomplete"
import { commentKeymap } from "@codemirror/comment"
import { rectangularSelection } from "@codemirror/rectangular-selection"
import { lintKeymap } from "@codemirror/lint"
export const baseTheme = EditorView.theme({
"&": {
@@ -15,8 +37,7 @@ export const baseTheme = EditorView.theme({
borderColor: "var(--secondary-color)",
},
".cm-selectionBackground, .cm-content ::selection, .cm-line ::selection": {
backgroundColor: "var(--accent-dark-color)",
color: "var(--accent-contrast-color)",
backgroundColor: "var(--divider-color)",
},
".cm-panels": {
backgroundColor: "var(--primary-light-color)",
@@ -46,8 +67,8 @@ export const baseTheme = EditorView.theme({
outline: "1px solid var(--accent-dark-color)",
},
".cm-matchingBracket, .cm-nonmatchingBracket": {
backgroundColor: "var(--accent-dark-color)",
color: "var(--accent-contrast-color)",
backgroundColor: "var(--divider-color)",
outline: "1px solid var(--accent-dark-color)",
},
".cm-gutters": {
fontFamily: "var(--font-mono)",
@@ -147,7 +168,34 @@ export const baseHighlightStyle = HighlightStyle.define([
{ tag: t.invalid, color: editorInvalidColor },
])
export const baseFoldStyle = foldGutter({
const baseFoldStyle = foldGutter({
openText: "▾",
closedText: "▸",
})
export const basicSetup: Extension = [
lineNumbers(),
highlightActiveLineGutter(),
highlightSpecialChars(),
history(),
baseFoldStyle,
EditorState.allowMultipleSelections.of(true),
indentOnInput(),
defaultHighlightStyle.fallback,
bracketMatching(),
closeBrackets(),
autocompletion(),
rectangularSelection(),
highlightActiveLine(),
highlightSelectionMatches(),
keymap.of([
...closeBracketsKeymap,
...defaultKeymap,
...searchKeymap,
...historyKeymap,
...foldKeymap,
...commentKeymap,
...completionKeymap,
...lintKeymap,
]),
]

9
packages/hoppscotch-app/package.json
View File

@@ -35,13 +35,20 @@
"dependencies": {
"@apollo/client": "^3.4.16",
"@codemirror/autocomplete": "^0.19.4",
"@codemirror/basic-setup": "^0.19.0",
"@codemirror/closebrackets": "^0.19.0",
"@codemirror/commands": "^0.19.5",
"@codemirror/comment": "^0.19.0",
"@codemirror/fold": "^0.19.1",
"@codemirror/gutter": "^0.19.4",
"@codemirror/highlight": "^0.19.0",
"@codemirror/history": "^0.19.0",
"@codemirror/lang-javascript": "^0.19.2",
"@codemirror/lang-json": "^0.19.1",
"@codemirror/language": "^0.19.3",
"@codemirror/lint": "^0.19.2",
"@codemirror/matchbrackets": "^0.19.3",
"@codemirror/rectangular-selection": "^0.19.1",
"@codemirror/search": "^0.19.2",
"@codemirror/state": "^0.19.3",
"@codemirror/text": "^0.19.5",
"@codemirror/view": "^0.19.12",

52
pnpm-lock.yaml generated
View File

@@ -44,13 +44,20 @@ importers:
'@babel/core': ^7.16.0
'@babel/preset-env': ^7.16.0
'@codemirror/autocomplete': ^0.19.4
'@codemirror/basic-setup': ^0.19.0
'@codemirror/closebrackets': ^0.19.0
'@codemirror/commands': ^0.19.5
'@codemirror/comment': ^0.19.0
'@codemirror/fold': ^0.19.1
'@codemirror/gutter': ^0.19.4
'@codemirror/highlight': ^0.19.0
'@codemirror/history': ^0.19.0
'@codemirror/lang-javascript': ^0.19.2
'@codemirror/lang-json': ^0.19.1
'@codemirror/language': ^0.19.3
'@codemirror/lint': ^0.19.2
'@codemirror/matchbrackets': ^0.19.3
'@codemirror/rectangular-selection': ^0.19.1
'@codemirror/search': ^0.19.2
'@codemirror/state': ^0.19.3
'@codemirror/text': ^0.19.5
'@codemirror/view': ^0.19.12
@@ -159,13 +166,20 @@ importers:
dependencies:
'@apollo/client': 3.4.16_f3f7eb5e21785ef7d5faca94c1a68824
'@codemirror/autocomplete': 0.19.4
'@codemirror/basic-setup': 0.19.0
'@codemirror/closebrackets': 0.19.0
'@codemirror/commands': 0.19.5
'@codemirror/comment': 0.19.0
'@codemirror/fold': 0.19.1
'@codemirror/gutter': 0.19.4
'@codemirror/highlight': 0.19.6
'@codemirror/history': 0.19.0
'@codemirror/lang-javascript': 0.19.2
'@codemirror/lang-json': 0.19.1
'@codemirror/language': 0.19.3
'@codemirror/lint': 0.19.2
'@codemirror/matchbrackets': 0.19.3
'@codemirror/rectangular-selection': 0.19.1
'@codemirror/search': 0.19.2
'@codemirror/state': 0.19.3
'@codemirror/text': 0.19.5
'@codemirror/view': 0.19.12
@@ -1746,26 +1760,6 @@ packages:
'@lezer/common': 0.15.7
dev: false
/@codemirror/basic-setup/0.19.0:
resolution: {integrity: sha512-Yhrf7fIz8+INHWOhpWeRwbs8fpc0KsydX9baD7TyYqniLVWyTi0Hwm52mr0f5O+k4YaJPeHAgT3x9gzDXZIvOw==}
dependencies:
'@codemirror/autocomplete': 0.19.4
'@codemirror/closebrackets': 0.19.0
'@codemirror/commands': 0.19.5
'@codemirror/comment': 0.19.0
'@codemirror/fold': 0.19.1
'@codemirror/gutter': 0.19.4
'@codemirror/highlight': 0.19.6
'@codemirror/history': 0.19.0
'@codemirror/language': 0.19.3
'@codemirror/lint': 0.19.2
'@codemirror/matchbrackets': 0.19.3
'@codemirror/rectangular-selection': 0.19.1
'@codemirror/search': 0.19.2
'@codemirror/state': 0.19.3
'@codemirror/view': 0.19.12
dev: false
/@codemirror/closebrackets/0.19.0:
resolution: {integrity: sha512-dFWX5OEVYWRNtGaifSbwIAlymnRRjxWMiMbffbAjF7p0zfGHDbdGkiT56q3Xud63h5/tQdSo5dK1iyNTzHz5vg==}
dependencies:
@@ -3946,8 +3940,8 @@ packages:
ufo: 0.7.9
dev: false
/@nuxt/kit-edge/3.0.0-27274229.29599f0:
resolution: {integrity: sha512-8GyQaBXQh6RelLe5ahXBTZWugaBYKd3cESc+GqxoHlFVy0i2HqZkUggFShDEoT7FCckzfGHTZF5uV04k87D73w==}
/@nuxt/kit-edge/3.0.0-27277498.850ef69:
resolution: {integrity: sha512-nlRbNf0wZwIuDzUs20AE9O4bE1rcIv3yaA/oYFhqUlXumiEDqHPmiuDAL5Trbe+E3Ut7EmZxgrcwUgQ0zQ8fuQ==}
engines: {node: ^14.16.0 || ^16.11.0 || ^17.0.0}
dependencies:
consola: 2.15.3
@@ -3959,7 +3953,7 @@ packages:
hookable: 5.0.0
jiti: 1.12.9
lodash.template: 4.5.0
mlly: 0.3.12
mlly: 0.3.13
pathe: 0.2.0
pkg-types: 0.3.1
rc9: 1.2.0
@@ -13792,8 +13786,8 @@ packages:
engines: {node: '>=10'}
hasBin: true
/mlly/0.3.12:
resolution: {integrity: sha512-+5DdpxP48PpfV/FcP4j/8TREPycnROCg0hX1nmD6aoZ2lD4FpZI4sxWG6l6YpUktXi/vckj8NaAl3DVQSkIn3w==}
/mlly/0.3.13:
resolution: {integrity: sha512-EXpbSPqSQLR9NEdB25uoyIYLSUvAqDEI7wUeM1HwXHsPF5Gx7cP7kuby5Mz2LfCPxBrgMnbcyPhcTCJRTQ+uvA==}
dev: true
/mocha/9.1.3:
@@ -14209,7 +14203,7 @@ packages:
/nuxt-windicss/2.0.11:
resolution: {integrity: sha512-/vAEmKLq1Iomuj4lz751dsoXdlGVAoiEGSh3JVxuZJMkqc/yrHTQrNhtMaOQzx5heuVsQ+E2bIF+Q/tfxicOFQ==}
dependencies:
'@nuxt/kit': /@nuxt/kit-edge/3.0.0-27274229.29599f0
'@nuxt/kit': /@nuxt/kit-edge/3.0.0-27277498.850ef69
defu: 5.0.0
h3: 0.3.3
listhen: 0.2.5
@@ -14794,7 +14788,7 @@ packages:
resolution: {integrity: sha512-BjECNgz/tsyqg0/T4Z/U7WbFQXUT24nfkxPbALcrk/uHVeZf9MrGG4tfvYtu+jsrHCFMseLQ6woQddDEBATw3A==}
dependencies:
jsonc-parser: 3.0.0
mlly: 0.3.12
mlly: 0.3.13
pathe: 0.2.0
dev: true