@scalar/use-codemirror 0.11.5 → 0.11.6

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @scalar/use-codemirror
 
+## 0.11.6
+
+### Patch Changes
+
+- 9e3348a: feat: set placeholder usage
+
 ## 0.11.5
 
 ### Patch Changes

package/dist/hooks/useCodeMirror.d.ts

@@ -15,14 +15,18 @@ type BaseParameters = {
     classes?: MaybeRefOrGetter<string[] | undefined>;
     /** Put the editor into read-only mode */
     readOnly?: MaybeRefOrGetter<boolean | undefined>;
+    /** Disable indent with tab */
+    disableTabIndent?: MaybeRefOrGetter<boolean | undefined>;
     /** Option to show line numbers in the editor */
     lineNumbers?: MaybeRefOrGetter<boolean | undefined>;
     withVariables?: MaybeRefOrGetter<boolean | undefined>;
     disableEnter?: MaybeRefOrGetter<boolean | undefined>;
+    disableCloseBrackets?: MaybeRefOrGetter<boolean | undefined>;
     /** Option to lint and show error in the editor */
     lint?: MaybeRefOrGetter<boolean | undefined>;
     onBlur?: (v: string) => void;
     onFocus?: (v: string) => void;
+    placeholder?: MaybeRefOrGetter<string | undefined>;
 };
 export type UseCodeMirrorParameters = (BaseParameters & {
     /** Prefill the content. Will be ignored when a provider is given. */

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

@@ -1 +1 @@
-{"version":3,"file":"useCodeMirror.d.ts","sourceRoot":"","sources":["../../src/hooks/useCodeMirror.ts"],"names":[],"mappings":"AAoBA,OAAO,EAAE,KAAK,SAAS,EAAe,MAAM,mBAAmB,CAAA;AAC/D,OAAO,EACL,UAAU,EAKX,MAAM,kBAAkB,CAAA;AACzB,OAAO,EACL,KAAK,gBAAgB,EACrB,KAAK,GAAG,EAMT,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,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,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;CAC9B,CAAA;AAED,MAAM,MAAM,uBAAuB,GAC/B,CAAC,cAAc,GAAG;IAChB,qEAAqE;IACrE,OAAO,EAAE,gBAAgB,CAAC,MAAM,GAAG,SAAS,CAAC,CAAA;IAC7C,QAAQ,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;CAC9B,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;CAgInC,CAAA"}
+{"version":3,"file":"useCodeMirror.d.ts","sourceRoot":"","sources":["../../src/hooks/useCodeMirror.ts"],"names":[],"mappings":"AAoBA,OAAO,EAAE,KAAK,SAAS,EAAe,MAAM,mBAAmB,CAAA;AAC/D,OAAO,EACL,UAAU,EAMX,MAAM,kBAAkB,CAAA;AACzB,OAAO,EACL,KAAK,gBAAgB,EACrB,KAAK,GAAG,EAMT,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,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;CAC9B,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"}

package/dist/hooks/useCodeMirror.js

@@ -1,134 +1,140 @@
-import { autocompletion as C, closeBrackets as w, completionKeymap as H, closeBracketsKeymap as N } from "@codemirror/autocomplete";
-import { indentWithTab as j } from "@codemirror/commands";
-import { css as O } from "@codemirror/lang-css";
-import { html as T } from "@codemirror/lang-html";
-import { json as V } from "@codemirror/lang-json";
-import { yaml as K } from "@codemirror/lang-yaml";
-import { syntaxHighlighting as L, defaultHighlightStyle as R, indentOnInput as A, bracketMatching as B } from "@codemirror/language";
-import { linter as I } from "@codemirror/lint";
-import { StateEffect as z } from "@codemirror/state";
-import { EditorView as d, highlightSpecialChars as J, keymap as v, lineNumbers as P } from "@codemirror/view";
-import { ref as U, watch as m, onBeforeUnmount as W, toValue as r, computed as q } from "vue";
-import { customTheme as D } from "../themes/index.js";
-import { variables as G } from "./variables.js";
-const u = (e) => "provider" in e && !!r(e.provider), Q = {
+import { autocompletion as j, completionKeymap as w, closeBrackets as B, closeBracketsKeymap as I } from "@codemirror/autocomplete";
+import { indentWithTab as O } from "@codemirror/commands";
+import { css as K } from "@codemirror/lang-css";
+import { html as L } from "@codemirror/lang-html";
+import { json as R } from "@codemirror/lang-json";
+import { yaml as V } from "@codemirror/lang-yaml";
+import { syntaxHighlighting as A, defaultHighlightStyle as z, indentOnInput as J, bracketMatching as v } from "@codemirror/language";
+import { linter as P } from "@codemirror/lint";
+import { StateEffect as U } from "@codemirror/state";
+import { EditorView as d, highlightSpecialChars as W, keymap as a, placeholder as q, lineNumbers as D } from "@codemirror/view";
+import { ref as G, watch as m, onBeforeUnmount as Q, toValue as t, computed as X } from "vue";
+import { customTheme as Y } from "../themes/index.js";
+import { variables as Z } from "./variables.js";
+const u = (e) => "provider" in e && !!t(e.provider), _ = {
   key: "Mod-a",
   run: (e) => (e.dispatch({
     selection: { anchor: 0, head: e.state.doc.length },
     scrollIntoView: !1
   }), !0)
-}, le = (e) => {
-  const o = U(null);
+}, de = (e) => {
+  const i = G(null);
   m(
     e.codeMirrorRef,
     () => {
-      var t;
-      (t = o.value) == null || t.destroy(), s();
+      var o;
+      (o = i.value) == null || o.destroy(), l();
     },
     { immediate: !0 }
-  ), W(() => {
-    var t;
-    return (t = o.value) == null ? void 0 : t.destroy();
+  ), Q(() => {
+    var o;
+    return (o = i.value) == null ? void 0 : o.destroy();
   });
-  function s() {
+  function l() {
     if (e.codeMirrorRef.value) {
-      const t = u(e) ? r(e.provider) : null, h = b({
-        ...l.value,
-        provider: t
+      const o = u(e) ? t(e.provider) : null, h = x({
+        ...s.value,
+        provider: o
       });
-      o.value = new d({
+      i.value = new d({
         parent: e.codeMirrorRef.value,
         extensions: h
-      }), u(e) || n(r(e.content));
+      }), u(e) || n(t(e.content));
     }
   }
-  const l = q(() => ({
+  const s = X(() => ({
     onChange: e.onChange,
     onBlur: e.onBlur,
     onFocus: e.onFocus,
-    language: r(e.language),
-    classes: r(e.classes),
-    readOnly: r(e.readOnly),
-    lineNumbers: r(e.lineNumbers),
-    withVariables: r(e.withVariables),
-    disableEnter: r(e.withVariables),
-    withoutTheme: r(e.withoutTheme),
-    lint: r(e.lint),
-    additionalExtensions: r(e.extensions)
+    disableTabIndent: t(e.disableTabIndent),
+    language: t(e.language),
+    classes: t(e.classes),
+    readOnly: t(e.readOnly),
+    lineNumbers: t(e.lineNumbers),
+    withVariables: t(e.withVariables),
+    disableEnter: t(e.disableEnter),
+    disableCloseBrackets: t(e.disableCloseBrackets),
+    withoutTheme: t(e.withoutTheme),
+    lint: t(e.lint),
+    additionalExtensions: t(e.extensions),
+    placeholder: t(e.placeholder)
   }));
   m(
-    () => u(e) ? r(e.provider) : null,
+    () => u(e) ? t(e.provider) : null,
     () => {
-      var t;
-      u(e) && ((t = o.value) == null || t.destroy(), s());
+      var o;
+      u(e) && ((o = i.value) == null || o.destroy(), l());
     }
   ), m(
-    l,
+    s,
     () => {
-      if (o.value) {
-        const t = u(e) ? r(e.provider) : null, h = b({
-          ...l.value,
-          provider: t
+      if (i.value) {
+        const o = u(e) ? t(e.provider) : null, h = x({
+          ...s.value,
+          provider: o
         });
-        o.value.dispatch({
-          effects: z.reconfigure.of(h)
+        i.value.dispatch({
+          effects: U.reconfigure.of(h)
         });
       } else
         return;
     },
     { immediate: !0 }
   );
-  const n = (t = "") => {
-    o.value && o.value.state.doc.toString() !== t && o.value.dispatch({
+  const n = (o = "") => {
+    i.value && i.value.state.doc.toString() !== o && i.value.dispatch({
       changes: {
         from: 0,
-        to: o.value.state.doc.length,
-        insert: t
+        to: i.value.state.doc.length,
+        insert: o
       },
       selection: {
         anchor: Math.min(
-          o.value.state.selection.main.anchor,
-          t.length
+          i.value.state.selection.main.anchor,
+          o.length
         )
       }
     });
   };
   return m(
-    () => r(e.content),
+    () => t(e.content),
     () => {
-      u(e) || n(r(e.content));
+      u(e) || n(t(e.content));
     },
     { immediate: !0 }
   ), {
     /** Replaces the current content with the given value. */
     setCodeMirrorContent: n,
     /** Codemirror instance */
-    codeMirror: o
+    codeMirror: i
   };
-}, p = {
-  html: T,
-  json: V,
-  yaml: K,
-  css: O
+}, y = {
+  html: L,
+  json: R,
+  yaml: V,
+  css: K
 };
-function b({
+function x({
   onChange: e,
-  onBlur: o,
-  onFocus: s,
-  provider: l,
+  onBlur: i,
+  onFocus: l,
+  provider: s,
   language: n,
-  classes: t = [],
+  classes: o = [],
   readOnly: h = !1,
-  lineNumbers: y = !1,
-  withVariables: x = !1,
-  disableEnter: E = !1,
-  withoutTheme: M = !1,
-  lint: S = !1,
-  additionalExtensions: k = []
+  lineNumbers: E = !1,
+  withVariables: k = !1,
+  disableEnter: C = !1,
+  disableCloseBrackets: M = !1,
+  disableTabIndent: S = !1,
+  withoutTheme: T = !1,
+  lint: H = !1,
+  additionalExtensions: N = [],
+  placeholder: g
 }) {
-  const i = [
-    J(),
-    L(R, { fallback: !0 }),
+  const r = [
+    W(),
+    A(z, { fallback: !0 }),
     d.theme({
       ".cm-line": {
         lineHeight: "20px"
@@ -154,46 +160,51 @@ function b({
     }),
     d.domEventHandlers({
       blur: (c, f) => {
-        o == null || o(f.state.doc.toString());
+        i == null || i(f.state.doc.toString());
       },
       focus: (c, f) => {
-        s == null || s(f.state.doc.toString());
+        l == null || l(f.state.doc.toString());
       }
     }),
     // Add Classes
-    d.editorAttributes.of({ class: t.join(" ") }),
-    ...k
+    d.editorAttributes.of({ class: o.join(" ") }),
+    ...N
   ];
-  if (l && i.push(l), M || i.push(D), h ? i.push(d.editable.of(!1)) : i.push(
-    A(),
-    B(),
-    C(),
-    w(),
-    v.of([
-      ...H,
-      ...N,
-      j,
-      Q
+  if (s && r.push(s), T || r.push(Y), h ? r.push(d.editable.of(!1)) : (r.push(
+    J(),
+    v(),
+    j(),
+    a.of([...w, _]),
+    v()
+  ), M || r.push(B(), a.of([...I])), S ? r.push(
+    a.of([
+      {
+        key: "Tab",
+        run: () => !1,
+        // Prevent default Tab behavior
+        shift: () => !1
+        // Prevent default Shift+Tab behavior
+      }
     ])
-  ), n && p[n] && i.push(p[n]()), S && n === "json") {
-    const c = I((f) => {
-      const a = [];
+  ) : r.push(a.of([O]))), g && r.push(q(g)), n && y[n] && r.push(y[n]()), H && n === "json") {
+    const c = P((f) => {
+      const b = [];
       try {
         JSON.parse(f.state.doc.toString());
-      } catch (g) {
-        g instanceof Error && a.push({
+      } catch (p) {
+        p instanceof Error && b.push({
           from: 0,
           to: f.state.doc.length,
           severity: "error",
-          message: g.message
+          message: p.message
         });
       }
-      return a;
+      return b;
     });
-    i.push(c);
+    r.push(c);
   }
-  return y && i.push(P()), x && i.push(G()), E && i.push(
-    v.of([
+  return E && r.push(D()), k && r.push(Z()), C && r.push(
+    a.of([
       {
         key: "Enter",
         run: () => !0
@@ -208,8 +219,8 @@ function b({
         run: () => !0
       }
     ])
-  ), i;
+  ), r;
 }
 export {
-  le as useCodeMirror
+  de as useCodeMirror
 };

package/package.json

@@ -16,7 +16,7 @@
     "vue",
     "vue3"
   ],
-  "version": "0.11.5",
+  "version": "0.11.6",
   "engines": {
     "node": ">=18"
   },