@scalar/use-codemirror 0.14.10 → 0.14.12
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,17 @@
|
|
|
1
1
|
# @scalar/use-codemirror
|
|
2
2
|
|
|
3
|
+
## 0.14.12
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [#9487](https://github.com/scalar/scalar/pull/9487): Render the code fold gutter chevron icons. The marker SVGs had a `viewBox` but no width/height, so they collapsed to zero size and were invisible. Folding worked but had no visual affordance. The chevrons now render at a fixed size, sit centered in the fold gutter, and use a muted color that brightens on hover — in both light and dark mode.
|
|
8
|
+
|
|
9
|
+
## 0.14.11
|
|
10
|
+
|
|
11
|
+
### Patch Changes
|
|
12
|
+
|
|
13
|
+
- [#8647](https://github.com/scalar/scalar/pull/8647): feat: move addressBar path change from debounce to blur
|
|
14
|
+
|
|
3
15
|
## 0.14.10
|
|
4
16
|
|
|
5
17
|
### Patch Changes
|
|
@@ -25,8 +25,8 @@ type BaseParameters = {
|
|
|
25
25
|
disableCloseBrackets?: MaybeRefOrGetter<boolean | undefined>;
|
|
26
26
|
/** Option to lint and show error in the editor */
|
|
27
27
|
lint?: MaybeRefOrGetter<boolean | undefined>;
|
|
28
|
-
onBlur?: (v: string) => void;
|
|
29
|
-
onFocus?: (v: string) => void;
|
|
28
|
+
onBlur?: (v: string, event: FocusEvent) => void;
|
|
29
|
+
onFocus?: (v: string, event: FocusEvent) => void;
|
|
30
30
|
placeholder?: MaybeRefOrGetter<string | undefined>;
|
|
31
31
|
};
|
|
32
32
|
export type UseCodeMirrorParameters = (BaseParameters & {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useCodeMirror.d.ts","sourceRoot":"","sources":["../../src/hooks/useCodeMirror.ts"],"names":[],"mappings":"AAiBA,OAAO,EAAE,KAAK,SAAS,EAAe,MAAM,mBAAmB,CAAA;AAC/D,OAAO,EACL,UAAU,EAMX,MAAM,kBAAkB,CAAA;AACzB,OAAO,EAAE,KAAK,gBAAgB,EAAE,KAAK,GAAG,EAAkD,MAAM,KAAK,CAAA;AAQrG,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,UAAU,CAAA;
|
|
1
|
+
{"version":3,"file":"useCodeMirror.d.ts","sourceRoot":"","sources":["../../src/hooks/useCodeMirror.ts"],"names":[],"mappings":"AAiBA,OAAO,EAAE,KAAK,SAAS,EAAe,MAAM,mBAAmB,CAAA;AAC/D,OAAO,EACL,UAAU,EAMX,MAAM,kBAAkB,CAAA;AACzB,OAAO,EAAE,KAAK,gBAAgB,EAAE,KAAK,GAAG,EAAkD,MAAM,KAAK,CAAA;AAQrG,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,UAAU,CAAA;AAelD,KAAK,cAAc,GAAG;IACpB,yCAAyC;IACzC,aAAa,EAAE,GAAG,CAAC,cAAc,GAAG,IAAI,CAAC,CAAA;IACzC,mDAAmD;IACnD,UAAU,CAAC,EAAE,gBAAgB,CAAC,SAAS,EAAE,CAAC,CAAA;IAC1C,8BAA8B;IAC9B,YAAY,CAAC,EAAE,gBAAgB,CAAC,OAAO,GAAG,SAAS,CAAC,CAAA;IACpD,mDAAmD;IACnD,QAAQ,EAAE,gBAAgB,CAAC,kBAAkB,GAAG,SAAS,CAAC,CAAA;IAC1D,2CAA2C;IAC3C,OAAO,CAAC,EAAE,gBAAgB,CAAC,MAAM,EAAE,GAAG,SAAS,CAAC,CAAA;IAChD,yCAAyC;IACzC,QAAQ,CAAC,EAAE,gBAAgB,CAAC,OAAO,GAAG,SAAS,CAAC,CAAA;IAChD,8BAA8B;IAC9B,gBAAgB,CAAC,EAAE,gBAAgB,CAAC,OAAO,GAAG,SAAS,CAAC,CAAA;IACxD,gDAAgD;IAChD,WAAW,CAAC,EAAE,gBAAgB,CAAC,OAAO,GAAG,SAAS,CAAC,CAAA;IACnD,aAAa,CAAC,EAAE,gBAAgB,CAAC,OAAO,GAAG,SAAS,CAAC,CAAA;IACrD,eAAe,CAAC,EAAE,gBAAgB,CAAC,OAAO,GAAG,SAAS,CAAC,CAAA;IACvD,YAAY,CAAC,EAAE,gBAAgB,CAAC,OAAO,GAAG,SAAS,CAAC,CAAA;IACpD,oBAAoB,CAAC,EAAE,gBAAgB,CAAC,OAAO,GAAG,SAAS,CAAC,CAAA;IAC5D,kDAAkD;IAClD,IAAI,CAAC,EAAE,gBAAgB,CAAC,OAAO,GAAG,SAAS,CAAC,CAAA;IAC5C,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,UAAU,KAAK,IAAI,CAAA;IAC/C,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,UAAU,KAAK,IAAI,CAAA;IAChD,WAAW,CAAC,EAAE,gBAAgB,CAAC,MAAM,GAAG,SAAS,CAAC,CAAA;CACnD,CAAA;AAED,MAAM,MAAM,uBAAuB,GAC/B,CAAC,cAAc,GAAG;IAChB,qEAAqE;IACrE,OAAO,EAAE,gBAAgB,CAAC,MAAM,GAAG,SAAS,CAAC,CAAA;IAC7C,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;CAC/B,CAAC,GACF,CAAC,cAAc,GAAG;IAChB,QAAQ,EAAE,gBAAgB,CAAC,SAAS,GAAG,IAAI,CAAC,CAAA;IAC5C,OAAO,CAAC,EAAE,gBAAgB,CAAC,MAAM,GAAG,SAAS,CAAC,CAAA;IAC9C,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;CAC/B,CAAC,CAAA;AAsBN,sCAAsC;AACtC,eAAO,MAAM,aAAa,GACxB,QAAQ,uBAAuB,KAC9B;IACD,oBAAoB,EAAE,CAAC,OAAO,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;IAChD,UAAU,EAAE,GAAG,CAAC,UAAU,GAAG,IAAI,CAAC,CAAA;CA4InC,CAAA"}
|
|
@@ -10,10 +10,21 @@ import { linter } from '@codemirror/lint';
|
|
|
10
10
|
import { StateEffect } from '@codemirror/state';
|
|
11
11
|
import { EditorView, highlightSpecialChars, keymap, lineNumbers as lineNumbersExtension, placeholder as placeholderExtension, } from '@codemirror/view';
|
|
12
12
|
import { computed, onBeforeUnmount, ref, toValue, watch } from 'vue';
|
|
13
|
-
const CHEVRON_DOWN = '<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="m18 10-6 6-6-6" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/></svg>';
|
|
14
|
-
const CHEVRON_RIGHT = '<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="m9 18 6-6-6-6" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/></svg>';
|
|
13
|
+
const CHEVRON_DOWN = '<svg width="1em" height="1em" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="m18 10-6 6-6-6" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"/></svg>';
|
|
14
|
+
const CHEVRON_RIGHT = '<svg width="1em" height="1em" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="m9 18 6-6-6-6" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"/></svg>';
|
|
15
15
|
import { customTheme } from '../themes/index.js';
|
|
16
16
|
import { variables } from './variables.js';
|
|
17
|
+
/**
|
|
18
|
+
* This was an insane bug that only exists in chrome
|
|
19
|
+
*
|
|
20
|
+
* Found these issues which may be related, it says che chrome one is fixed, they possibly had a regression?
|
|
21
|
+
*
|
|
22
|
+
* @see https://issues.chromium.org/issues/375711382
|
|
23
|
+
* @see https://discuss.codemirror.net/t/experimental-support-for-editcontext/8144
|
|
24
|
+
* @see https://github.com/codemirror/dev/issues/1458
|
|
25
|
+
*/
|
|
26
|
+
// @ts-expect-error this is the workaround suggested by codemirror
|
|
27
|
+
EditorView.EDIT_CONTEXT = false;
|
|
17
28
|
/** Check if the hook has a provider. In provider mode we ignore the content variable */
|
|
18
29
|
const hasProvider = (params) => 'provider' in params && !!toValue(params.provider);
|
|
19
30
|
const selectAllKeyBinding = {
|
|
@@ -158,12 +169,60 @@ function getCodeMirrorExtensions({ onChange, onBlur, onFocus, provider, language
|
|
|
158
169
|
'.cm-gutterElement': {
|
|
159
170
|
lineHeight: '22px',
|
|
160
171
|
},
|
|
172
|
+
// Center the fold chevron within the line and give it a muted, interactive look
|
|
173
|
+
'.cm-foldGutter .cm-gutterElement': {
|
|
174
|
+
display: 'flex',
|
|
175
|
+
alignItems: 'center',
|
|
176
|
+
// Nudge the chevron off the line numbers so it sits between them and the code
|
|
177
|
+
paddingLeft: '4px',
|
|
178
|
+
},
|
|
179
|
+
'.cm-foldMarker': {
|
|
180
|
+
display: 'flex',
|
|
181
|
+
alignItems: 'center',
|
|
182
|
+
justifyContent: 'center',
|
|
183
|
+
height: '22px',
|
|
184
|
+
color: 'var(--scalar-color-3)',
|
|
185
|
+
cursor: 'pointer',
|
|
186
|
+
},
|
|
187
|
+
'.cm-foldMarker:hover': {
|
|
188
|
+
color: 'var(--scalar-color-1)',
|
|
189
|
+
},
|
|
190
|
+
'.cm-foldMarker svg': {
|
|
191
|
+
width: '16px',
|
|
192
|
+
height: '16px',
|
|
193
|
+
},
|
|
161
194
|
'.cm-tooltip': {
|
|
162
|
-
|
|
195
|
+
background: 'var(--scalar-background-1)',
|
|
196
|
+
border: '1px solid var(--scalar-border-color)',
|
|
197
|
+
borderRadius: 'var(--scalar-radius)',
|
|
198
|
+
boxShadow: 'var(--scalar-shadow-2)',
|
|
163
199
|
fontSize: '12px',
|
|
200
|
+
overflow: 'hidden',
|
|
201
|
+
},
|
|
202
|
+
'.cm-tooltip-autocomplete ul': {
|
|
203
|
+
padding: '6px',
|
|
204
|
+
},
|
|
205
|
+
'.cm-tooltip-autocomplete ul li': {
|
|
206
|
+
padding: '3px 6px',
|
|
207
|
+
color: 'var(--scalar-color-1)',
|
|
208
|
+
borderRadius: '3px',
|
|
209
|
+
},
|
|
210
|
+
'.cm-tooltip-autocomplete ul li[aria-selected]': {
|
|
211
|
+
background: 'var(--scalar-background-2)',
|
|
212
|
+
color: 'var(--scalar-color-1)',
|
|
213
|
+
},
|
|
214
|
+
'.cm-tooltip-autocomplete ul li:hover': {
|
|
215
|
+
background: 'var(--scalar-background-3)',
|
|
216
|
+
color: 'var(--scalar-color-1)',
|
|
217
|
+
},
|
|
218
|
+
'.cm-completionLabel': {
|
|
219
|
+
color: 'var(--scalar-color-1)',
|
|
220
|
+
},
|
|
221
|
+
'.cm-completionDetail': {
|
|
222
|
+
color: 'var(--scalar-color-3)',
|
|
164
223
|
},
|
|
165
224
|
'.cm-tooltip-lint': {
|
|
166
|
-
backgroundColor: '
|
|
225
|
+
backgroundColor: 'var(--scalar-background-1)',
|
|
167
226
|
},
|
|
168
227
|
'.cm-diagnostic-error': {
|
|
169
228
|
borderLeft: '0',
|
|
@@ -183,11 +242,11 @@ function getCodeMirrorExtensions({ onChange, onBlur, onFocus, provider, language
|
|
|
183
242
|
onChange?.(v.state.doc.toString());
|
|
184
243
|
}),
|
|
185
244
|
EditorView.domEventHandlers({
|
|
186
|
-
blur: (
|
|
187
|
-
onBlur?.(view.state.doc.toString());
|
|
245
|
+
blur: (event, view) => {
|
|
246
|
+
onBlur?.(view.state.doc.toString(), event);
|
|
188
247
|
},
|
|
189
|
-
focus: (
|
|
190
|
-
onFocus?.(view.state.doc.toString());
|
|
248
|
+
focus: (event, view) => {
|
|
249
|
+
onFocus?.(view.state.doc.toString(), event);
|
|
191
250
|
},
|
|
192
251
|
}),
|
|
193
252
|
// Add Classes
|
package/package.json
CHANGED
|
@@ -16,7 +16,7 @@
|
|
|
16
16
|
"vue",
|
|
17
17
|
"vue3"
|
|
18
18
|
],
|
|
19
|
-
"version": "0.14.
|
|
19
|
+
"version": "0.14.12",
|
|
20
20
|
"engines": {
|
|
21
21
|
"node": ">=22"
|
|
22
22
|
},
|
|
@@ -54,20 +54,20 @@
|
|
|
54
54
|
"@lezer/common": "^1.2.3",
|
|
55
55
|
"@lezer/highlight": "^1.2.1",
|
|
56
56
|
"@replit/codemirror-css-color-picker": "^6.3.0",
|
|
57
|
-
"vue": "^3.5.
|
|
57
|
+
"vue": "^3.5.30"
|
|
58
58
|
},
|
|
59
59
|
"devDependencies": {
|
|
60
60
|
"@vitejs/plugin-vue": "^6.0.3",
|
|
61
61
|
"vite": "8.0.0",
|
|
62
62
|
"vitest": "4.1.0",
|
|
63
|
-
"vue": "^3.5.
|
|
63
|
+
"vue": "^3.5.30",
|
|
64
64
|
"vue-tsc": "^3.2.4",
|
|
65
|
-
"@scalar/themes": "0.
|
|
65
|
+
"@scalar/themes": "0.16.0"
|
|
66
66
|
},
|
|
67
67
|
"scripts": {
|
|
68
68
|
"build": "tsc -p tsconfig.build.json && tsc-alias -p tsconfig.build.json",
|
|
69
69
|
"dev": "vite .",
|
|
70
|
-
"test": "vitest",
|
|
70
|
+
"test": "vitest --run",
|
|
71
71
|
"types:check": "vue-tsc --noEmit"
|
|
72
72
|
}
|
|
73
73
|
}
|