feat: add modelUri option to components

e-chan1007 · Oct 19, 2024 · 2786c92 · 2786c92
1 parent 4c0f8f1
commit 2786c92
Show file tree

Hide file tree

Showing 4 changed files with 51 additions and 9 deletions.
diff --git a/docs/content/2.references/1.monaco-editor.md b/docs/content/2.references/1.monaco-editor.md
@@ -55,6 +55,12 @@ Children of `<MonacoEditor>` will be shown until the editor is loaded.
   Available options are listed [here](https://microsoft.github.io/monaco-editor/docs.html#interfaces/editor.IStandaloneEditorConstructionOptions.html){target="_blank"}.
   ::
   ::
+
+  ::field{name="modelUri" type="monaco.Uri"}
+  ::div
+  The URI that identifies models.
+  ::
+  ::
 ::
 
 ## Events

diff --git a/docs/content/2.references/2.monaco-diff-editor.md b/docs/content/2.references/2.monaco-diff-editor.md
@@ -57,11 +57,29 @@ Children of `<MonacoDiffEditor>` will be shown until the editor is loaded.
 
   ::field{name="options" type="IStandaloneDiffEditorConstructionOptions" default="{ automaticLayout: true }"}
   ::div
-  Options passed  to the second argument of `monaco.editor.create`.
+  Options passed to the second argument of `monaco.editor.create`.
   You can also change the options after the editor mounted. \
   Available options are listed [here](https://microsoft.github.io/monaco-editor/docs.html#interfaces/editor.IStandaloneDiffEditorConstructionOptions.html){target="_blank"}.
   ::
   ::
+
+  ::field{name="original" type="string"}
+  ::div
+  Original value showed in the editor.
+  ::
+  ::
+
+  ::field{name="modelUri" type="monaco.Uri"}
+  ::div
+  The URI that identifies models.
+  ::
+  ::
+
+  ::field{name="originalModelUri" type="monaco.Uri"}
+  ::div
+  The URI that identifies models.
+  ::
+  ::
 ::
 
 ## Events

diff --git a/src/runtime/MonacoDiffEditor.client.vue b/src/runtime/MonacoDiffEditor.client.vue
@@ -20,6 +20,18 @@ interface Props {
    * Options passed to the second argument of `monaco.editor.createDiffEditor`
    */
   options?: Monaco.editor.IStandaloneDiffEditorConstructionOptions;
+  /**
+   * The URI that identifies models
+   */
+  // eslint-disable-next-line vue/require-default-prop
+  originalModelUri?: Monaco.Uri;
+
+  /**
+   * The URI that identifies models
+   */
+  // eslint-disable-next-line vue/require-default-prop
+  modelUri?: Monaco.Uri;
+
   original?: string;
   modelValue?: string;
 }
@@ -62,8 +74,8 @@ watch(() => props.lang, () => {
   const modifiedValue = modifiedModel?.getValue() || props.modelValue
   if (originalModel) { originalModel.dispose() }
   if (modifiedModel) { modifiedModel.dispose() }
-  originalModel = monaco.editor.createModel(originalValue, props.lang)
-  modifiedModel = monaco.editor.createModel(modifiedValue, props.lang)
+  originalModel = monaco.editor.createModel(originalValue, props.lang, props.originalModelUri)
+  modifiedModel = monaco.editor.createModel(modifiedValue, props.lang, props.modelUri)
   editor.setModel({
     original: originalModel,
     modified: modifiedModel
@@ -85,8 +97,8 @@ 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)
+  originalModel = monaco.editor.createModel(props.original, props.lang, props.originalModelUri)
+  modifiedModel = monaco.editor.createModel(props.modelValue, props.lang, props.modelUri)
   editor.setModel({
     original: originalModel,
     modified: modifiedModel

diff --git a/src/runtime/MonacoEditor.client.vue b/src/runtime/MonacoEditor.client.vue
@@ -5,7 +5,7 @@
 </template>
 
 <script lang="ts" setup>
-import type * as Monaco from 'monaco-editor'
+import * as Monaco from 'monaco-editor'
 import { computed, ref, shallowRef, watch, onBeforeUnmount } from 'vue'
 import { defu } from 'defu'
 import { useMonaco } from './composables'
@@ -20,6 +20,12 @@ interface Props {
      * Options passed to the second argument of `monaco.editor.create`
      */
     options?: Monaco.editor.IStandaloneEditorConstructionOptions;
+    /**
+     * The URI that identifies models
+     */
+    // eslint-disable-next-line vue/require-default-prop
+    modelUri?: Monaco.Uri;
+
     modelValue?: string;
 }
 
@@ -53,11 +59,11 @@ watch(() => props.modelValue, () => {
   }
 })
 
-watch(() => props.lang, () => {
+watch(() => [props.lang, props.modelUri], () => {
   if (model) {
     model.dispose()
   }
-  model = monaco.editor.createModel(props.modelValue, lang.value)
+  model = monaco.editor.createModel(props.modelValue, lang.value, props.modelUri)
   editor?.setModel(model)
 })
 
@@ -68,7 +74,7 @@ watch(() => props.options, () => {
 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)
+  model = monaco.editor.createModel(props.modelValue, lang.value, props.modelUri)
   editorRef.value = editor
   editor.layout()
   editor.setModel(model)