@scalar/use-codemirror 0.14.11 → 0.14.13

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @scalar/use-codemirror
 
+## 0.14.13
+
+### Patch Changes
+
+- [#9710](https://github.com/scalar/scalar/pull/9710): Republish so the updated README (with the Scalar platform overview) reaches npm. Also renames the README generator metadata in package.json from `readme` to `scalarReadme`: npm treats a `readme` field as the readme text itself, so affected packages were published with a literal `[object Object]` readme on the registry instead of README.md.
+
+## 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/README.md

@@ -5,6 +5,20 @@
 [![License](https://img.shields.io/npm/l/%40scalar%2Fuse-codemirror)](https://www.npmjs.com/package/@scalar/use-codemirror)
 [![Discord](https://img.shields.io/discord/1135330207960678410?style=flat&color=5865F2)](https://discord.gg/scalar)
 
+---
+
+Scalar is an open-source API platform for teams who want beautiful developer interfaces without vendor lock-in.
+
+- **[API References](https://scalar.com/products/api-references/getting-started)** — Interactive API documentation from OpenAPI and AsyncAPI specs.
+- **[Docs](https://scalar.com/products/docs/getting-started)** — Write in Markdown/MDX, generate API references, sync with two-way Git.
+- **[SDKs](https://scalar.com/products/sdks/getting-started)** — Type-safe client libraries in TypeScript, Python, Go, PHP, Java, and Ruby.
+- **[MCP Servers](https://scalar.com/products/agent/getting-started)** — Generate secure MCP servers from your API spec.
+- **[API Client](https://scalar.com/products/api-client/getting-started)** — Open-source, offline-first Postman alternative built on OpenAPI.
+
+20M+ monthly npm installs · 15,500+ GitHub stars · MIT licensed · [scalar.com](https://scalar.com)
+
+---
+
 ## Installation
 
 ```bash

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.13",
   "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.3"
   },
   "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"
   }
 }