nuxt-monaco-editor 1.2.5 → 1.2.7

package/CHANGELOG.md

@@ -2,6 +2,22 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [1.2.7](https://github.com/e-chan1007/nuxt-monaco-editor/compare/v1.2.6...v1.2.7) (2024-01-20)
+
+
+### Bug Fixes
+
+* restore explicit imports ([d44ab28](https://github.com/e-chan1007/nuxt-monaco-editor/commit/d44ab28ca35c79edbefd69ea45161b8f51632d29))
+* use `watch` for the target element ([878d3e7](https://github.com/e-chan1007/nuxt-monaco-editor/commit/878d3e735819bbbae245af3db7520a3a00a4237b))
+* use `watch` instead of `onMounted` ([6e48fd1](https://github.com/e-chan1007/nuxt-monaco-editor/commit/6e48fd1672517719917d47a3012feb019d46530d))
+
+### [1.2.6](https://github.com/e-chan1007/nuxt-monaco-editor/compare/v1.2.5...v1.2.6) (2023-12-10)
+
+
+### Features
+
+* make `automaticLayout: true` as a default option ([16c3f10](https://github.com/e-chan1007/nuxt-monaco-editor/commit/16c3f10a7c5e86c12b7115ab509d0bca690afb3b))
+
 ### [1.2.5](https://github.com/e-chan1007/nuxt-monaco-editor/compare/v1.2.4...v1.2.5) (2023-12-05)
 
 

package/dist/module.json

@@ -4,5 +4,5 @@
   "compatibility": {
     "nuxt": "^3.1.0"
   },
-  "version": "1.2.5"
+  "version": "1.2.7"
 }

package/dist/runtime/MonacoDiffEditor.client.vue

@@ -6,7 +6,8 @@
 
 <script lang="ts" setup>
 import type * as Monaco from 'monaco-editor'
-import { onMounted, onUnmounted, ref, watch } from 'vue'
+import { onBeforeUnmount, ref, shallowRef, watch } from 'vue'
+import { defu } from 'defu'
 import { useMonaco } from './composables'
 
 interface Props {
@@ -37,13 +38,17 @@ const props = withDefaults(defineProps<Props>(), {
 const emit = defineEmits<Emits>()
 const isLoading = ref(true)
 
-const editorElement = ref<HTMLDivElement>()
+const editorElement = shallowRef<HTMLDivElement>()
 const monaco = useMonaco()!
 
 let editor: Monaco.editor.IStandaloneDiffEditor
 let originalModel: Monaco.editor.ITextModel
 let modifiedModel: Monaco.editor.ITextModel
-const editorRef = ref()
+
+const editorRef = shallowRef<Monaco.editor.IStandaloneDiffEditor>()
+const defaultOptions: Monaco.editor.IStandaloneEditorConstructionOptions = {
+  automaticLayout: true
+}
 
 watch(() => [props.original, props.modelValue], () => {
   if (originalModel.getValue() !== props.original || modifiedModel.getValue() !== props.modelValue) {
@@ -66,7 +71,7 @@ watch(() => props.lang, () => {
 })
 
 watch(() => props.options, () => {
-  editor?.updateOptions(props.options)
+  editor?.updateOptions(defu(props.options, defaultOptions))
 })
 
 defineExpose({
@@ -76,8 +81,9 @@ defineExpose({
   $editor: editorRef
 })
 
-onMounted(() => {
-  editor = monaco.editor.createDiffEditor(editorElement.value!, props.options)
+watch(editorElement, (newValue, oldValue) => {
+  if (!editorElement.value || oldValue) { return }
+  editor = monaco.editor.createDiffEditor(editorElement.value!, defu(props.options, defaultOptions))
   editorRef.value = editor
   originalModel = monaco.editor.createModel(props.original, props.lang)
   modifiedModel = monaco.editor.createModel(props.modelValue, props.lang)
@@ -94,7 +100,7 @@ onMounted(() => {
   emit('load', editor)
 })
 
-onUnmounted(() => {
+onBeforeUnmount(() => {
   editor?.dispose()
   originalModel?.dispose()
   modifiedModel?.dispose()

package/dist/runtime/MonacoEditor.client.vue

@@ -6,25 +6,26 @@
 
 <script lang="ts" setup>
 import type * as Monaco from 'monaco-editor'
-import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
+import { computed, ref, shallowRef, watch, onBeforeUnmount } from 'vue'
+import { defu } from 'defu'
 import { useMonaco } from './composables'
 
 interface Props {
-  /**
-   * Programming Language (Not a locale for UI);
-   * overrides `options.language`
-   */
-  lang?: string;
-  /**
-   * Options passed to the second argument of `monaco.editor.create`
-   */
-  options?: Monaco.editor.IStandaloneEditorConstructionOptions;
-  modelValue?: string;
+    /**
+     * Programming Language (Not a locale for UI);
+     * overrides `options.language`
+     */
+    lang?: string;
+    /**
+     * Options passed to the second argument of `monaco.editor.create`
+     */
+    options?: Monaco.editor.IStandaloneEditorConstructionOptions;
+    modelValue?: string;
 }
 
 interface Emits {
-  (event: 'update:modelValue', value: string): void
-  (event: 'load', editor: Monaco.editor.IStandaloneCodeEditor): void
+    (event: 'update:modelValue', value: string): void
+    (event: 'load', editor: Monaco.editor.IStandaloneCodeEditor): void
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -32,43 +33,44 @@ const props = withDefaults(defineProps<Props>(), {
   options: () => ({}),
   modelValue: () => ''
 })
+
 const emit = defineEmits<Emits>()
 const isLoading = ref(true)
-
 const lang = computed(() => props.lang || props.options.language)
-
+const editorRef = shallowRef<Monaco.editor.IStandaloneCodeEditor>()
 const editorElement = ref<HTMLDivElement>()
 const monaco = useMonaco()!
+const defaultOptions: Monaco.editor.IStandaloneEditorConstructionOptions = {
+  automaticLayout: true
+}
 
 let editor: Monaco.editor.IStandaloneCodeEditor
 let model: Monaco.editor.ITextModel
-const editorRef = ref()
 
 watch(() => props.modelValue, () => {
-  if (editor?.getValue() !== props.modelValue) { editor?.setValue(props.modelValue) }
+  if (editor?.getValue() !== props.modelValue) {
+    editor?.setValue(props.modelValue)
+  }
 })
 
 watch(() => props.lang, () => {
-  if (model) { model.dispose() }
+  if (model) {
+    model.dispose()
+  }
   model = monaco.editor.createModel(props.modelValue, lang.value)
   editor?.setModel(model)
 })
 
 watch(() => props.options, () => {
-  editor?.updateOptions(props.options)
-})
-
-defineExpose({
-  /**
-   * Monaco editor instance
-   */
-  $editor: editorRef
+  editor?.updateOptions(defu(props.options, defaultOptions))
 })
 
-onMounted(() => {
-  editor = monaco.editor.create(editorElement.value!, props.options)
-  editorRef.value = editor
+watch(editorElement, (newValue, oldValue) => {
+  if (!editorElement.value || oldValue) { return }
+  editor = monaco.editor.create(editorElement.value!, defu(props.options, defaultOptions))
   model = monaco.editor.createModel(props.modelValue, lang.value)
+  editorRef.value = editor
+  editor.layout()
   editor.setModel(model)
   editor.onDidChangeModelContent(() => {
     emit('update:modelValue', editor.getValue())
@@ -77,7 +79,14 @@ onMounted(() => {
   emit('load', editor)
 })
 
-onUnmounted(() => {
+defineExpose({
+  /**
+     * Monaco editor instance
+     */
+  $editor: editorRef
+})
+
+onBeforeUnmount(() => {
   editor?.dispose()
   model?.dispose()
 })

package/package.json

@@ -11,7 +11,7 @@
     "type": "git",
     "url": "https://github.com/e-chan1007/nuxt-monaco-editor.git"
   },
-  "version": "1.2.5",
+  "version": "1.2.7",
   "type": "module",
   "license": "MIT",
   "exports": {
@@ -46,6 +46,7 @@
   },
   "dependencies": {
     "@nuxt/kit": "^3.8.1",
+    "defu": "^6.1.3",
     "monaco-editor-nls": "^3.1.0",
     "vite-plugin-static-copy": "^0.17.0"
   },