From 103ef8ee0dc5bc5eb57753a5523990e3a2a6b606 Mon Sep 17 00:00:00 2001 From: liyasthomas Date: Fri, 12 Nov 2021 07:05:34 +0530 Subject: [PATCH] fix: remove basic-setup and drawSelection on codemirror instance to resolve ::selection property --- .../hoppscotch-app/assets/scss/styles.scss | 7 +- .../helpers/editor/codemirror.ts | 3 +- .../helpers/editor/themes/baseTheme.ts | 64 ++++++++++++++++--- packages/hoppscotch-app/package.json | 9 ++- pnpm-lock.yaml | 52 +++++++-------- 5 files changed, 93 insertions(+), 42 deletions(-) diff --git a/packages/hoppscotch-app/assets/scss/styles.scss b/packages/hoppscotch-app/assets/scss/styles.scss index a576933f6..7dcacc465 100644 --- a/packages/hoppscotch-app/assets/scss/styles.scss +++ b/packages/hoppscotch-app/assets/scss/styles.scss @@ -31,8 +31,11 @@ } ::selection { - @apply bg-accent; - @apply text-accentContrast; + @apply bg-divider; +} + +.cm-focused { + @apply !outline-none; } input::placeholder, diff --git a/packages/hoppscotch-app/helpers/editor/codemirror.ts b/packages/hoppscotch-app/helpers/editor/codemirror.ts index 0f751e4d8..270a823e7 100644 --- a/packages/hoppscotch-app/helpers/editor/codemirror.ts +++ b/packages/hoppscotch-app/helpers/editor/codemirror.ts @@ -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 diff --git a/packages/hoppscotch-app/helpers/editor/themes/baseTheme.ts b/packages/hoppscotch-app/helpers/editor/themes/baseTheme.ts index 46c9e7e9d..a52fa1f57 100644 --- a/packages/hoppscotch-app/helpers/editor/themes/baseTheme.ts +++ b/packages/hoppscotch-app/helpers/editor/themes/baseTheme.ts @@ -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, + ]), +] diff --git a/packages/hoppscotch-app/package.json b/packages/hoppscotch-app/package.json index cc1232e36..369914de6 100644 --- a/packages/hoppscotch-app/package.json +++ b/packages/hoppscotch-app/package.json @@ -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", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 3fb2cb83f..818ffe559 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -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