nuxt-codemirror 0.0.9 → 0.0.11

package/README.md

@@ -1,5 +1,3 @@
-
-
 # Nuxt CodeMirror
 
 [![npm version][npm-version-src]][npm-version-href]
@@ -7,7 +5,7 @@
 [![License][license-src]][license-href]
 [![Nuxt][nuxt-src]][nuxt-href]
 
-Codemirror as a Nuxt module. Demo preview: Coming soon
+Codemirror as a Nuxt module. Demo can be found in below playground
 
 
 - [✨  Release Notes](/CHANGELOG.md)
@@ -24,18 +22,19 @@ Codemirror as a Nuxt module. Demo preview: Coming soon
 
 ## Documentation
 
-This module consists of one Component, one Composable and a few types for you to use. 
+This module consists of one Component, one Composable and a few types for you to use.
 Read the CodeMirror Reference guide for more in depth information: [CodeMirror docs](https://codemirror.net/docs/ref/)
 
 ### NuxtCodeMirror.vue
 This component is auto imported and is the CodeMirror wrapper.
 
 Component props:
-```
+
+```ts
 interface NuxtCodeMirrorProps
   extends Omit<EditorStateConfig, 'doc' | 'extensions'> {
   /** value of the auto created model in the editor. Works as underlying logic of a V-Model */
-  modelValue?: string                                                                                    This is linked to a Vue V-Model
+  modelValue?: string
   /** The height value of the editor. */
   height?: string
   /** The minimum height value of the editor. */
@@ -116,7 +115,7 @@ interface NuxtCodeMirrorProps
 
 The NuxtCodeMirror component accepts a Template ref and exposes The CodeMirror div element, the Editor view and the Editor State
 
-```
+```ts
 interface CodeMirrorRef {
   /** Container element of the CodeMirror instance */
   container: HTMLDivElement | null
@@ -129,33 +128,27 @@ interface CodeMirrorRef {
 }
 ```
 
-If you need access to the underlying CodeMirror instance You can do so by adding a ref with the same name as your Template ref. 
+If you need access to the underlying CodeMirror instance You can do so by adding a ref with the same name as your Template ref.
 An example on how to do this can be found here: [🏀 Online playground](https://stackblitz.com/edit/nuxt-starter-ev2hgm?file=app.vue)
 
 
 If for some reason you want to write your own CodeMirror component then you can do that too :)
 
 ### UseNuxtCodeMirror.ts
+
 This composable is the underlying magic of the NuxtCodeMirror component and is also auto imported.
 
 It requires minimum 3 Refs, one for the div element CodeMirror will connect to, one for the CodeMirror view, and one for the CodeMirror state
 
-Make sure you execute the composable in onMounted otherwise you will get an eror because codemirror can't be linked to the DOM.
-
-```
-  /** The EditorView of the CodeMirror instance */
-  viewRef: Ref<EditorView | undefined>
-  /** The EditorState of the CodeMirror instance */
-  stateRef: Ref<EditorState | undefined>
-  /** Editor element of the CodeMirror instance */
-  containerRef: Ref<HTMLDivElement | null>
+Make sure you execute the composable in `onMounted` otherwise you will get an eror because codemirror can't be linked to the DOM.
 
+```ts
 const editor = ref<HTMLDivElement | null>(null)
 const container = ref<HTMLDivElement | null>(null)
 const view = ref<EditorView>()
 const state = ref<EditorState>()
 
-  onMounted(() => {
+onMounted(() => {
   useNuxtCodeMirror({
     ...props,
     container: editor.value,

package/dist/module.d.mts

@@ -1,7 +1,5 @@
 import * as _nuxt_schema from '@nuxt/schema';
 
-interface ModuleOptions {
-}
-declare const _default: _nuxt_schema.NuxtModule<ModuleOptions>;
+declare const _default: _nuxt_schema.NuxtModule<_nuxt_schema.ModuleOptions>;
 
-export { type ModuleOptions, _default as default };
+export { _default as default };

package/dist/module.d.ts

@@ -1,7 +1,5 @@
 import * as _nuxt_schema from '@nuxt/schema';
 
-interface ModuleOptions {
-}
-declare const _default: _nuxt_schema.NuxtModule<ModuleOptions>;
+declare const _default: _nuxt_schema.NuxtModule<_nuxt_schema.ModuleOptions>;
 
-export { type ModuleOptions, _default as default };
+export { _default as default };

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "nuxt-codemirror",
   "configKey": "nuxtCodemirror",
-  "version": "0.0.9",
+  "version": "0.0.11",
   "builder": {
     "@nuxt/module-builder": "0.8.1",
     "unbuild": "2.0.0"

package/dist/module.mjs

@@ -6,7 +6,7 @@ const module = defineNuxtModule({
     configKey: "nuxtCodemirror"
   },
   // Default configuration options of the Nuxt module
-  defaults: {},
+  // defaults: {},
   setup(_options, _nuxt) {
     const { resolve } = createResolver(import.meta.url);
     addComponent({

package/dist/runtime/components/NuxtCodeMirror.vue

@@ -34,7 +34,7 @@ const emit = defineEmits<{
 onMounted(() => {
   useNuxtCodeMirror({
     ...props,
-    modelValue: modelValue.value,
+    modelValue: modelValue,
     onChange: (value, viewUpdate) => {
       modelValue.value = value
       emit('onChange', value, viewUpdate)

package/dist/runtime/composables/useNuxtCodeMirror.d.ts

@@ -1,2 +1,2 @@
-import { type UseCodeMirrorProps } from '../types/nuxt-codemirror.js';
+import type { UseCodeMirrorProps } from '../types/nuxt-codemirror.js';
 export declare function useNuxtCodeMirror(props: UseCodeMirrorProps): void;

package/dist/runtime/composables/useNuxtCodeMirror.js

@@ -7,7 +7,7 @@ const External = Annotation.define();
 const emptyExtensions = [];
 export function useNuxtCodeMirror(props) {
   const {
-    modelValue: value = "",
+    modelValue: value,
     selection,
     onChange,
     onStatistics,
@@ -54,10 +54,13 @@ export function useNuxtCodeMirror(props) {
       const value2 = doc.toString();
       onChange(value2, viewUpdate);
     }
-    if (viewUpdate.focusChanged) {
-      viewUpdate.view.hasFocus ? onFocus && onFocus(viewUpdate) : onBlur && onBlur(viewUpdate);
+    onStatistics?.(getStatistics(viewUpdate));
+    if (!viewUpdate.focusChanged) return;
+    if (viewUpdate.view.hasFocus) {
+      onFocus?.(viewUpdate);
+    } else {
+      onBlur?.(viewUpdate);
     }
-    onStatistics && onStatistics(getStatistics(viewUpdate));
   });
   const defaultExtensions = getDefaultExtensions({
     theme,
@@ -75,7 +78,7 @@ export function useNuxtCodeMirror(props) {
   watchEffect(() => {
     if (containerRef.value && !stateRef?.value) {
       const config = {
-        doc: value,
+        doc: value?.value,
         selection,
         extensions: getExtensions
       };
@@ -88,7 +91,7 @@ export function useNuxtCodeMirror(props) {
           root
         });
         viewRef.value = viewCurrent;
-        onCreateEditor && onCreateEditor(viewCurrent, stateCurrent);
+        onCreateEditor?.(viewCurrent, stateCurrent);
       }
     }
   });
@@ -130,9 +133,9 @@ export function useNuxtCodeMirror(props) {
       return;
     }
     const currentValue = viewRef.value ? viewRef.value.state.doc.toString() : "";
-    if (viewRef.value && value !== currentValue) {
+    if (viewRef.value && value.value !== currentValue) {
       viewRef.value.dispatch({
-        changes: { from: 0, to: currentValue.length, insert: value || "" },
+        changes: { from: 0, to: currentValue.length, insert: value.value || "" },
         annotations: [External.of(true)]
       });
     }

package/dist/runtime/getDefaultExtensions.d.ts

@@ -1,4 +1,4 @@
-import { type Extension } from '@codemirror/state';
+import type { Extension } from '@codemirror/state';
 import { type BasicSetupOptions } from '@uiw/codemirror-extensions-basic-setup';
 export * from '@codemirror/theme-one-dark';
 export * from './theme/light.js';

package/dist/runtime/types/nuxt-codemirror.d.ts

@@ -1,12 +1,13 @@
 import type { EditorState, EditorStateConfig, Extension, StateField, EditorSelection, SelectionRange, Line } from '@codemirror/state'
 import type { EditorView, ViewUpdate } from '@codemirror/view'
 import type { BasicSetupOptions } from '@uiw/codemirror-extensions-basic-setup'
+import type { ModelRef } from 'vue'
 import type { Ref } from '#imports'
 
 export interface NuxtCodeMirrorProps
   extends Omit<EditorStateConfig, 'doc' | 'extensions'> {
   /** value of the auto created model in the editor. Works as underlying logic of a V-Model */
-  modelValue?: string
+  modelValue?: ModelRef<string | undefined, string>
   /** The height value of the editor. */
   height?: string
   /** The minimum height value of the editor. */

package/dist/types.d.mts

@@ -1 +1,7 @@
-export { type ModuleOptions, default } from './module.js'
+import type { NuxtModule } from '@nuxt/schema'
+
+import type { default as Module } from './module.js'
+
+export type ModuleOptions = typeof Module extends NuxtModule<infer O> ? Partial<O> : Record<string, any>
+
+export { default } from './module.js'

package/dist/types.d.ts

@@ -1 +1,7 @@
-export { type ModuleOptions, default } from './module'
+import type { NuxtModule } from '@nuxt/schema'
+
+import type { default as Module } from './module'
+
+export type ModuleOptions = typeof Module extends NuxtModule<infer O> ? Partial<O> : Record<string, any>
+
+export { default } from './module'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nuxt-codemirror",
-  "version": "0.0.9",
+  "version": "0.0.11",
   "description": "Nuxt codemirror module",
   "repository": "https://github.com/ThimoDEV/nuxt-codemirror",
   "license": "MIT",
@@ -37,13 +37,13 @@
     "@codemirror/commands": "^6.6.0",
     "@codemirror/state": "6.4.1",
     "@codemirror/theme-one-dark": "^6.1.1",
-    "@codemirror/view": "6.29.1",
+    "@codemirror/view": "6.30.0",
     "@nuxt/kit": "^3.12.4",
     "@uiw/codemirror-extensions-basic-setup": "^4.23.0"
   },
   "devDependencies": {
     "@nuxt/devtools": "^1.3.9",
-    "@nuxt/eslint-config": "^0.3.13",
+    "@nuxt/eslint-config": "^0.5.0",
     "@nuxt/module-builder": "^0.8.1",
     "@nuxt/schema": "^3.12.4",
     "@nuxt/test-utils": "^3.13.1",
@@ -60,5 +60,5 @@
     "codemirror",
     "vue"
   ],
-  "packageManager": "pnpm@9.6.0"
-}
+  "packageManager": "pnpm@9.7.0"
+}