@scalar/use-codemirror 0.14.11 → 0.14.12

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @scalar/use-codemirror
 
+## 0.14.12
+
+### Patch Changes
+
+- [#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.
+
 ## 0.14.11
 
 ### Patch Changes

package/dist/hooks/useCodeMirror.js

@@ -10,8 +10,8 @@ import { linter } from '@codemirror/lint';
 import { StateEffect } from '@codemirror/state';
 import { EditorView, highlightSpecialChars, keymap, lineNumbers as lineNumbersExtension, placeholder as placeholderExtension, } from '@codemirror/view';
 import { computed, onBeforeUnmount, ref, toValue, watch } from 'vue';
-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>';
-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>';
+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>';
+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>';
 import { customTheme } from '../themes/index.js';
 import { variables } from './variables.js';
 /**
@@ -169,12 +169,60 @@ function getCodeMirrorExtensions({ onChange, onBlur, onFocus, provider, language
             '.cm-gutterElement': {
                 lineHeight: '22px',
             },
+            // Center the fold chevron within the line and give it a muted, interactive look
+            '.cm-foldGutter .cm-gutterElement': {
+                display: 'flex',
+                alignItems: 'center',
+                // Nudge the chevron off the line numbers so it sits between them and the code
+                paddingLeft: '4px',
+            },
+            '.cm-foldMarker': {
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                height: '22px',
+                color: 'var(--scalar-color-3)',
+                cursor: 'pointer',
+            },
+            '.cm-foldMarker:hover': {
+                color: 'var(--scalar-color-1)',
+            },
+            '.cm-foldMarker svg': {
+                width: '16px',
+                height: '16px',
+            },
             '.cm-tooltip': {
-                border: '1px solid #f5c6cb',
+                background: 'var(--scalar-background-1)',
+                border: '1px solid var(--scalar-border-color)',
+                borderRadius: 'var(--scalar-radius)',
+                boxShadow: 'var(--scalar-shadow-2)',
                 fontSize: '12px',
+                overflow: 'hidden',
+            },
+            '.cm-tooltip-autocomplete ul': {
+                padding: '6px',
+            },
+            '.cm-tooltip-autocomplete ul li': {
+                padding: '3px 6px',
+                color: 'var(--scalar-color-1)',
+                borderRadius: '3px',
+            },
+            '.cm-tooltip-autocomplete ul li[aria-selected]': {
+                background: 'var(--scalar-background-2)',
+                color: 'var(--scalar-color-1)',
+            },
+            '.cm-tooltip-autocomplete ul li:hover': {
+                background: 'var(--scalar-background-3)',
+                color: 'var(--scalar-color-1)',
+            },
+            '.cm-completionLabel': {
+                color: 'var(--scalar-color-1)',
+            },
+            '.cm-completionDetail': {
+                color: 'var(--scalar-color-3)',
             },
             '.cm-tooltip-lint': {
-                backgroundColor: '#ffffff',
+                backgroundColor: 'var(--scalar-background-1)',
             },
             '.cm-diagnostic-error': {
                 borderLeft: '0',

package/package.json

@@ -16,7 +16,7 @@
     "vue",
     "vue3"
   ],
-  "version": "0.14.11",
+  "version": "0.14.12",
   "engines": {
     "node": ">=22"
   },
@@ -62,12 +62,12 @@
     "vitest": "4.1.0",
     "vue": "^3.5.30",
     "vue-tsc": "^3.2.4",
-    "@scalar/themes": "0.15.2"
+    "@scalar/themes": "0.16.0"
   },
   "scripts": {
     "build": "tsc -p tsconfig.build.json && tsc-alias -p tsconfig.build.json",
     "dev": "vite .",
-    "test": "vitest",
+    "test": "vitest --run",
     "types:check": "vue-tsc --noEmit"
   }
 }