@scalar/use-codemirror 0.11.38 → 0.11.40

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @scalar/use-codemirror
 
+## 0.11.40
+
+### Patch Changes
+
+- Updated dependencies [28a6b05]
+  - @scalar/components@0.12.73
+
+## 0.11.39
+
+### Patch Changes
+
+- 1e3214c: fix: replace scalarcodeblock with codemirror for response preview
+- Updated dependencies [12fed75]
+  - @scalar/components@0.12.72
+
 ## 0.11.38
 
 ### Patch Changes

package/dist/hooks/useCodeMirror.d.ts

@@ -20,6 +20,7 @@ type BaseParameters = {
     /** Option to show line numbers in the editor */
     lineNumbers?: MaybeRefOrGetter<boolean | undefined>;
     withVariables?: MaybeRefOrGetter<boolean | undefined>;
+    forceFoldGutter?: MaybeRefOrGetter<boolean | undefined>;
     disableEnter?: MaybeRefOrGetter<boolean | undefined>;
     disableCloseBrackets?: MaybeRefOrGetter<boolean | undefined>;
     /** Option to lint and show error in the editor */

package/dist/hooks/useCodeMirror.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useCodeMirror.d.ts","sourceRoot":"","sources":["../../src/hooks/useCodeMirror.ts"],"names":[],"mappings":"AAsBA,OAAO,EAAE,KAAK,SAAS,EAAe,MAAM,mBAAmB,CAAA;AAC/D,OAAO,EACL,UAAU,EAMX,MAAM,kBAAkB,CAAA;AAEzB,OAAO,EACL,KAAK,gBAAgB,EACrB,KAAK,GAAG,EAQT,MAAM,KAAK,CAAA;AAGZ,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,UAAU,CAAA;AAGlD,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,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,KAAK,IAAI,CAAA;IAC5B,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;IAC7B,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,WAChB,uBAAuB,KAC9B;IACD,oBAAoB,EAAE,CAAC,OAAO,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;IAChD,UAAU,EAAE,GAAG,CAAC,UAAU,GAAG,IAAI,CAAC,CAAA;CAmInC,CAAA"}
+{"version":3,"file":"useCodeMirror.d.ts","sourceRoot":"","sources":["../../src/hooks/useCodeMirror.ts"],"names":[],"mappings":"AAsBA,OAAO,EAAE,KAAK,SAAS,EAAe,MAAM,mBAAmB,CAAA;AAC/D,OAAO,EACL,UAAU,EAMX,MAAM,kBAAkB,CAAA;AAEzB,OAAO,EACL,KAAK,gBAAgB,EACrB,KAAK,GAAG,EAQT,MAAM,KAAK,CAAA;AAGZ,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,UAAU,CAAA;AAGlD,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,KAAK,IAAI,CAAA;IAC5B,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;IAC7B,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,WAChB,uBAAuB,KAC9B;IACD,oBAAoB,EAAE,CAAC,OAAO,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;IAChD,UAAU,EAAE,GAAG,CAAC,UAAU,GAAG,IAAI,CAAC,CAAA;CAoInC,CAAA"}

package/dist/hooks/useCodeMirror.js

@@ -1,50 +1,50 @@
-import { autocompletion as I, completionKeymap as O, closeBrackets as j, closeBracketsKeymap as B } from "@codemirror/autocomplete";
-import { indentWithTab as L, insertNewline as R } from "@codemirror/commands";
-import { css as K } from "@codemirror/lang-css";
-import { html as V } from "@codemirror/lang-html";
-import { json as z } from "@codemirror/lang-json";
-import { xml as A } from "@codemirror/lang-xml";
-import { yaml as D } from "@codemirror/lang-yaml";
-import { syntaxHighlighting as P, defaultHighlightStyle as G, indentOnInput as J, bracketMatching as y, foldGutter as U } from "@codemirror/language";
-import { linter as W } from "@codemirror/lint";
-import { StateEffect as q } from "@codemirror/state";
-import { EditorView as a, highlightSpecialChars as Q, keymap as d, placeholder as X, lineNumbers as Y } from "@codemirror/view";
-import { ScalarIcon as Z } from "@scalar/components";
-import { ref as _, watch as g, onBeforeUnmount as F, toValue as t, computed as $, h as ee, render as te } from "vue";
-import { customTheme as oe } from "../themes/index.js";
-import { variables as re } from "./variables.js";
-const u = (e) => "provider" in e && !!t(e.provider), ne = {
+import { autocompletion as B, completionKeymap as D, closeBrackets as z, closeBracketsKeymap as K } from "@codemirror/autocomplete";
+import { indentWithTab as V, insertNewline as A } from "@codemirror/commands";
+import { css as G } from "@codemirror/lang-css";
+import { html as P } from "@codemirror/lang-html";
+import { json as J } from "@codemirror/lang-json";
+import { xml as U } from "@codemirror/lang-xml";
+import { yaml as W } from "@codemirror/lang-yaml";
+import { syntaxHighlighting as q, defaultHighlightStyle as F, indentOnInput as Q, bracketMatching as k, foldGutter as x } from "@codemirror/language";
+import { linter as X } from "@codemirror/lint";
+import { StateEffect as Y } from "@codemirror/state";
+import { EditorView as h, highlightSpecialChars as Z, keymap as u, placeholder as _, lineNumbers as $ } from "@codemirror/view";
+import { ScalarIcon as E } from "@scalar/components";
+import { ref as ee, watch as g, onBeforeUnmount as te, toValue as t, computed as oe, h as C, render as M } from "vue";
+import { customTheme as re } from "../themes/index.js";
+import { variables as ne } from "./variables.js";
+const a = (e) => "provider" in e && !!t(e.provider), ie = {
   key: "Mod-a",
   run: (e) => (e.dispatch({
     selection: { anchor: 0, head: e.state.doc.length },
     scrollIntoView: !1
   }), !0)
-}, ke = (e) => {
-  const r = _(null);
+}, xe = (e) => {
+  const n = ee(null);
   g(
     e.codeMirrorRef,
     () => {
       var o;
-      (o = r.value) == null || o.destroy(), c();
+      (o = n.value) == null || o.destroy(), c();
     },
     { immediate: !0 }
-  ), F(() => {
+  ), te(() => {
     var o;
-    return (o = r.value) == null ? void 0 : o.destroy();
+    return (o = n.value) == null ? void 0 : o.destroy();
   });
   function c() {
     if (e.codeMirrorRef.value) {
-      const o = u(e) ? t(e.provider) : null, h = x({
+      const o = a(e) ? t(e.provider) : null, m = w({
         ...f.value,
         provider: o
       });
-      r.value = new a({
+      n.value = new h({
         parent: e.codeMirrorRef.value,
-        extensions: h
-      }), u(e) || l(t(e.content));
+        extensions: m
+      }), a(e) || l(t(e.content));
     }
   }
-  const f = $(() => ({
+  const f = oe(() => ({
     onChange: e.onChange,
     onBlur: e.onBlur,
     onFocus: e.onFocus,
@@ -54,6 +54,7 @@ const u = (e) => "provider" in e && !!t(e.provider), ne = {
     readOnly: t(e.readOnly),
     lineNumbers: t(e.lineNumbers),
     withVariables: t(e.withVariables),
+    forceFoldGutter: t(e.forceFoldGutter),
     disableEnter: t(e.disableEnter),
     disableCloseBrackets: t(e.disableCloseBrackets),
     withoutTheme: t(e.withoutTheme),
@@ -62,21 +63,21 @@ const u = (e) => "provider" in e && !!t(e.provider), ne = {
     placeholder: t(e.placeholder)
   }));
   g(
-    () => u(e) ? t(e.provider) : null,
+    () => a(e) ? t(e.provider) : null,
     () => {
       var o;
-      u(e) && ((o = r.value) == null || o.destroy(), c());
+      a(e) && ((o = n.value) == null || o.destroy(), c());
     }
   ), g(
     f,
     () => {
-      if (r.value) {
-        const o = u(e) ? t(e.provider) : null, h = x({
+      if (n.value) {
+        const o = a(e) ? t(e.provider) : null, m = w({
           ...f.value,
           provider: o
         });
-        r.value.dispatch({
-          effects: q.reconfigure.of(h)
+        n.value.dispatch({
+          effects: Y.reconfigure.of(m)
         });
       } else
         return;
@@ -84,15 +85,15 @@ const u = (e) => "provider" in e && !!t(e.provider), ne = {
     { immediate: !0 }
   );
   const l = (o = "") => {
-    r.value && r.value.state.doc.toString() !== o && r.value.dispatch({
+    n.value && n.value.state.doc.toString() !== o && n.value.dispatch({
       changes: {
         from: 0,
-        to: r.value.state.doc.length,
+        to: n.value.state.doc.length,
         insert: o
       },
       selection: {
         anchor: Math.min(
-          r.value.state.selection.main.anchor,
+          n.value.state.selection.main.anchor,
           o.length
         )
       }
@@ -101,44 +102,45 @@ const u = (e) => "provider" in e && !!t(e.provider), ne = {
   return g(
     () => t(e.content),
     () => {
-      u(e) || l(t(e.content));
+      a(e) || l(t(e.content));
     },
     { immediate: !0 }
   ), {
     /** Replaces the current content with the given value. */
     setCodeMirrorContent: l,
     /** Codemirror instance */
-    codeMirror: r
+    codeMirror: n
   };
-}, k = {
-  html: V,
-  json: z,
-  yaml: D,
-  css: K,
-  xml: A
+}, S = {
+  html: P,
+  json: J,
+  yaml: W,
+  css: G,
+  xml: U
 };
-function x({
+function w({
   onChange: e,
-  onBlur: r,
+  onBlur: n,
   onFocus: c,
   provider: f,
   language: l,
   classes: o = [],
-  readOnly: h = !1,
-  lineNumbers: E = !1,
-  withVariables: C = !1,
-  disableEnter: M = !1,
-  disableCloseBrackets: S = !1,
-  disableTabIndent: T = !1,
-  withoutTheme: w = !1,
-  lint: N = !1,
-  additionalExtensions: H = [],
-  placeholder: p
+  readOnly: m = !1,
+  lineNumbers: T = !1,
+  withVariables: N = !1,
+  forceFoldGutter: p = !1,
+  disableEnter: O = !1,
+  disableCloseBrackets: H = !1,
+  disableTabIndent: I = !1,
+  withoutTheme: L = !1,
+  lint: R = !1,
+  additionalExtensions: j = [],
+  placeholder: v
 }) {
-  const n = [
-    Q(),
-    P(G, { fallback: !0 }),
-    a.theme({
+  const r = [
+    Z(),
+    q(F, { fallback: !0 }),
+    h.theme({
       ".cm-line": {
         lineHeight: "20px",
         padding: "0 2px 0 4px"
@@ -164,29 +166,29 @@ function x({
       }
     }),
     // Listen to updates
-    a.updateListener.of((s) => {
+    h.updateListener.of((s) => {
       s.docChanged && (e == null || e(s.state.doc.toString()));
     }),
-    a.domEventHandlers({
+    h.domEventHandlers({
       blur: (s, i) => {
-        r == null || r(i.state.doc.toString());
+        n == null || n(i.state.doc.toString());
       },
       focus: (s, i) => {
         c == null || c(i.state.doc.toString());
       }
     }),
     // Add Classes
-    a.editorAttributes.of({ class: o.join(" ") }),
-    ...H
+    h.editorAttributes.of({ class: o.join(" ") }),
+    ...j
   ];
-  if (f && n.push(f), w || n.push(oe), h ? n.push(a.editable.of(!1)) : (n.push(
-    J(),
-    y(),
-    I(),
-    d.of([...O, ne]),
-    y()
-  ), S || n.push(j(), d.of([...B])), T ? n.push(
-    d.of([
+  if (f && r.push(f), L || r.push(re), m ? r.push(h.editable.of(!1)) : (r.push(
+    Q(),
+    k(),
+    B(),
+    u.of([...D, ie]),
+    k()
+  ), H || r.push(z(), u.of([...K])), I ? r.push(
+    u.of([
       {
         key: "Tab",
         run: () => !1,
@@ -195,39 +197,50 @@ function x({
         // Prevent default Shift+Tab behavior
       }
     ])
-  ) : n.push(d.of([L]))), p && n.push(X(p)), E && n.push(Y()), l && k[l] && n.push(
-    k[l](),
-    U({
+  ) : r.push(u.of([V]))), v && r.push(_(v)), T && r.push($()), p && r.push(
+    x({
+      markerDOM: (s) => {
+        const i = document.createElement("div");
+        i.classList.add("cm-foldMarker");
+        const d = C(E, {
+          icon: s ? "ChevronDown" : "ChevronRight",
+          size: "xs"
+        });
+        return M(d, i), i;
+      }
+    })
+  ), l && S[l] && (r.push(S[l]()), p || r.push(
+    x({
       markerDOM: (s) => {
         const i = document.createElement("div");
         i.classList.add("cm-foldMarker");
-        const m = ee(Z, {
+        const d = C(E, {
           icon: s ? "ChevronDown" : "ChevronRight",
           size: "xs"
         });
-        return te(m, i), i;
+        return M(d, i), i;
       }
     })
-  ), N && l === "json") {
-    const s = W((i) => {
-      const m = [], b = i.state.doc.toString();
+  )), R && l === "json") {
+    const s = X((i) => {
+      const d = [], b = i.state.doc.toString();
       if (b.trim())
         try {
           JSON.parse(b);
-        } catch (v) {
-          v instanceof Error && m.push({
+        } catch (y) {
+          y instanceof Error && d.push({
             from: 0,
             to: i.state.doc.length,
             severity: "error",
-            message: v.message
+            message: y.message
           });
         }
-      return m;
+      return d;
     });
-    n.push(s);
+    r.push(s);
   }
-  return C && n.push(re()), M ? n.push(
-    d.of([
+  return N && r.push(ne()), O ? r.push(
+    u.of([
       {
         key: "Enter",
         run: () => !0
@@ -242,15 +255,15 @@ function x({
         run: () => !0
       }
     ])
-  ) : n.push(
-    d.of([
+  ) : r.push(
+    u.of([
       {
         key: "Enter",
-        run: R
+        run: A
       }
     ])
-  ), n;
+  ), r;
 }
 export {
-  ke as useCodeMirror
+  xe as useCodeMirror
 };

package/dist/themes/index.js

@@ -49,7 +49,7 @@ const c = r({
     },
     {
       tag: [a.number],
-      color: "var(--scalar-color-blue)"
+      color: "var(--scalar-color-orange)"
     },
     {
       tag: [a.name, a.quote],

package/package.json

@@ -16,7 +16,7 @@
     "vue",
     "vue3"
   ],
-  "version": "0.11.38",
+  "version": "0.11.40",
   "engines": {
     "node": ">=18"
   },
@@ -53,12 +53,12 @@
     "@uiw/codemirror-themes": "^4.21.21",
     "codemirror": "^6.0.0",
     "vue": "^3.5.12",
-    "@scalar/components": "0.12.71"
+    "@scalar/components": "0.12.73"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^5.0.4",
     "@vitest/coverage-v8": "^1.6.0",
-    "vite": "^5.4.9",
+    "vite": "^5.4.10",
     "vitest": "^1.6.0",
     "vue": "^3.5.12",
     "y-codemirror.next": "^0.3.2",