@scalar/use-codemirror 0.8.0 → 0.8.1

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @scalar/use-codemirror
 
+## 0.8.1
+
+### Patch Changes
+
+- b1f3cb49: feat: Add optional extensions and reactive provider to useCodemirror
+
 ## 0.8.0
 
 ### Minor Changes

package/dist/hooks/useCodeMirror.d.ts

@@ -4,6 +4,8 @@ import type { CodeMirrorLanguage } from '../types';
 type BaseParameters = {
     /** Element Ref to mount codemirror to */
     codeMirrorRef: Ref<HTMLDivElement | null>;
+    /** List of optional extensions for the instance */
+    extensions?: MaybeRefOrGetter<Extension[]>;
     /** Whether to load a theme.*/
     withoutTheme?: MaybeRefOrGetter<boolean | undefined>;
     /** Languages to support for syntax highlighting */
@@ -22,7 +24,7 @@ export type UseCodeMirrorParameters = (BaseParameters & {
     content: MaybeRefOrGetter<string | undefined>;
     onChange: (v: string) => void;
 }) | (BaseParameters & {
-    provider: Extension;
+    provider: MaybeRefOrGetter<Extension | null>;
     content?: MaybeRefOrGetter<string | undefined>;
     onChange?: (v: string) => void;
 });

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;AAO/D,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,8BAA8B;IAC9B,YAAY,CAAC,EAAE,gBAAgB,CAAC,OAAO,GAAG,SAAS,CAAC,CAAA;IACpD,mDAAmD;IACnD,SAAS,CAAC,EAAE,gBAAgB,CAAC,kBAAkB,EAAE,GAAG,SAAS,CAAC,CAAA;IAC9D,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;CACrD,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,SAAS,CAAA;IACnB,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;AAUN,sCAAsC;AACtC,eAAO,MAAM,aAAa,WAChB,uBAAuB;qCAEE,MAAM,KAAK,IAAI;CAsGjD,CAAA"}
+{"version":3,"file":"useCodeMirror.d.ts","sourceRoot":"","sources":["../../src/hooks/useCodeMirror.ts"],"names":[],"mappings":"AAsBA,OAAO,EAAE,KAAK,SAAS,EAAe,MAAM,mBAAmB,CAAA;AAO/D,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,SAAS,CAAC,EAAE,gBAAgB,CAAC,kBAAkB,EAAE,GAAG,SAAS,CAAC,CAAA;IAC9D,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;CACrD,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;AAUN,sCAAsC;AACtC,eAAO,MAAM,aAAa,WAChB,uBAAuB;qCAEE,MAAM,KAAK,IAAI;CAsGjD,CAAA"}

package/dist/index.js

@@ -3972,7 +3972,7 @@ const variables = () => ViewPlugin.fromClass(
     )
   }
 );
-const hasProvider = (params) => "provider" in params;
+const hasProvider = (params) => "provider" in params && !!toValue(params.provider);
 const useCodeMirror = (params) => {
   const codeMirror = ref(null);
   watch(
@@ -3991,8 +3991,6 @@ const useCodeMirror = (params) => {
   function mountCodeMirror() {
     if (params.codeMirrorRef.value) {
       const extensions = getCodeMirrorExtensions(extensionConfig.value);
-      if (hasProvider(params))
-        extensions.push(params.provider);
       codeMirror.value = new EditorView({
         parent: params.codeMirrorRef.value,
         extensions
@@ -4009,7 +4007,9 @@ const useCodeMirror = (params) => {
     lineNumbers: toValue(params.lineNumbers),
     withVariables: toValue(params.withVariables),
     disableEnter: toValue(params.withVariables),
-    withoutTheme: toValue(params.withoutTheme)
+    withoutTheme: toValue(params.withoutTheme),
+    additionalExtensions: toValue(params.extensions),
+    provider: hasProvider(params) ? toValue(params.provider) : null
   }));
   watch(
     extensionConfig,
@@ -4017,8 +4017,6 @@ const useCodeMirror = (params) => {
       if (!codeMirror.value)
         return;
       const extensions = getCodeMirrorExtensions(extensionConfig.value);
-      if (hasProvider(params))
-        extensions.push(params.provider);
       codeMirror.value.dispatch({
         effects: StateEffect.reconfigure.of(extensions)
       });
@@ -4082,13 +4080,15 @@ const syntaxHighlighting = {
 };
 function getCodeMirrorExtensions({
   onChange,
+  provider,
   languages = [],
   classes = [],
   readOnly = false,
   lineNumbers: lineNumbers$1 = false,
   withVariables = false,
   disableEnter = false,
-  withoutTheme = false
+  withoutTheme = false,
+  additionalExtensions = []
 }) {
   const extensions = [
     EditorView.theme({
@@ -4106,8 +4106,11 @@ function getCodeMirrorExtensions({
       onChange == null ? void 0 : onChange(v.state.doc.toString());
     }),
     // Add Classes
-    EditorView.editorAttributes.of({ class: classes.join(" ") })
+    EditorView.editorAttributes.of({ class: classes.join(" ") }),
+    ...additionalExtensions
   ];
+  if (provider)
+    extensions.push(provider);
   if (!withoutTheme)
     extensions.push(customTheme);
   if (readOnly)

package/package.json

@@ -11,7 +11,7 @@
     "vue",
     "vue3"
   ],
-  "version": "0.8.0",
+  "version": "0.8.1",
   "engines": {
     "node": ">=18"
   },