e-chan1007 / nuxt-monaco-editor Goto Github PK

View Code? Open in Web Editor NEW

113.0 1.0 16.0 4.64 MB

Integrate monaco-editor with Nuxt

Home Page: https://e-chan1007.github.io/nuxt-monaco-editor

License: MIT License

Vue 36.24% TypeScript 55.63% Shell 0.64% JavaScript 5.72% CSS 1.77%

monaco-editor nuxt nuxt-module nuxt3

nuxt-monaco-editor's Introduction

Nuxt Monaco Editor

Integrate monaco-editor with Nuxt

Install

npx nuxi@latest module add nuxt-monaco-editor

Don't forget to install monaco-editor.

Setup

Add this module to the Nuxt config

export default defineNuxtConfig({
  modules: [
    'nuxt-monaco-editor'
  ]
})

(Optional) Configure the module

export default defineNuxtConfig({
  monacoEditor: {
    // These are default values:
    locale: 'en',
    componentName: {
      codeEditor: 'MonacoEditor',
      diffEditor: 'MonacoDiffEditor'
    }
  }
})

Use the component in your pages or components

<template>
  <MonacoEditor v-model="value" lang="typescript" />
</template>

<script lang="ts" setup>
const value = ref('')
</script>

Development

Run npm run dev:prepare to generate type stubs.
Use npm run dev to start playground in development mode.

nuxt-monaco-editor's People

Contributors

Stargazers

Watchers

Forkers

kabbouchi danielroe abbijamal davidracl chrisdixon161 andrei0465 tsukiyama-3 sun-zhenxing linpolly mackiecarr89 jontybrook l422y rahul-gavit gehbt melvinprindustry mw3y

nuxt-monaco-editor's Issues

ERROR This module cannot be imported in the Vue part of your app. (@nuxt/kit)

Hi, I'm getting following error when trying to run Nuxt with the plugin with nuxt dev.

[8:51:50 AM]  ERROR  This module cannot be imported in the Vue part of your app. [importing @nuxt/kit from node_modules/nuxt-monaco-editor/dist/module.mjs?v=fb4b5961]

Additional stacktrace:

[nuxt] [request error] [unhandled] [500] Cannot read properties of undefined (reading 'options')                         8:53:39 AM
  at Object.normalizedModule (./node_modules/@nuxt/kit/dist/index.mjs:149:12)  
  at ./virtual:nuxt:/Users/juro/path/to/project/client/.nuxt/plugins/server.mjs:27:87  
  at Module.executeAsync (./node_modules/unctx/dist/index.mjs:111:19)  
  at Object.setup (./virtual:nuxt:/Users/juro/path/to/project/client/.nuxt/plugins/server.mjs:27:63)  
  at wrapper (./node_modules/nuxt/dist/app/nuxt.js:191:21)  
  at ./node_modules/nuxt/dist/app/nuxt.js:111:58  
  at fn (./node_modules/nuxt/dist/app/nuxt.js:208:44)  
  at Object.callAsync (./node_modules/unctx/dist/index.mjs:68:55)  
  at ./node_modules/nuxt/dist/app/nuxt.js:210:56  
  at Object.runWithContext (./node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:3855:18)

Usage:

<template>
  <div>
    <MonacoEditor ref="editorRef" v-model="editorContent" lang="typescript" :options="editorOptions">
      Loading...
    </MonacoEditor>
  </div>
</template>

<script setup lang="ts">
import type { editor } from 'monaco-editor';
import type { ComponentPublicInstance } from 'vue';

const editorRef = ref<(ComponentPublicInstance & { $editor: editor.IStandaloneCodeEditor }) | null>(
  null
);
const editorOptions = {
  readOnly: true,
  cursorBlinking: 'smooth',
  scrollBeyondLastLine: false,
  // automaticLayout
} satisfies editor.IStandaloneEditorConstructionOptions;

const editorContent = ref('');
</script>

nuxt.config.js

export default defineNuxtConfig({
  plugins: ['nuxt-monaco-editor'],
});

Dependencies:

nuxt v3.5.2
nuxt-monaco-editor v1.2.2

[DiffEditor] Errors in Monaco Diff Editor

Source: src/runtime/MonacoDiffEditor.client.vue#L55

Perhaps there was a spelling mistake. originalModel should be modifiedModel?

Here's another counter-intuitive feature: when the language changes the entire editor is reset, including the content.

MonacoDiffEditor can be editable. And it provides no interface to text changes, so changes to its internal text are not perceptible, and a reset will clear all its internal state.

So I think the current content should be copied out and put into new Model.

Just like this:

// Updated: do not use ref
const editor = shallowRef<Monaco.editor.IStandaloneDiffEditor | null>(null)

watch(() => language.value, () => {
  if (!editor.value)
    return
  const monaco = useMonaco()!
  const originalModel = editor.value.getModel()?.original
  const modifiedModel = editor.value.getModel()?.modified
  const originalValue = originalModel?.getValue() || ''
  const modifiedValue = modifiedModel?.getValue() || ''
  if (originalModel)
    originalModel.dispose()
  if (modifiedModel)
    modifiedModel.dispose()
  const newOriginalModel = monaco.editor.createModel(originalValue, language.value)
  const newModifiedModel = monaco.editor.createModel(modifiedValue, language.value)
  editor.value.setModel({
    original: newOriginalModel,
    modified: newModifiedModel,
  })
})

Uncaught Error: Unexpected Usage loadForeignModule in errors.js

Trying to use nuxt-monaco-editor in nuxt 3.4.2 is throwing a large number of errors in the console when interacting with anything associated with the editor (scrolling, typing, using context menus), however the editor seems to be working correctly?

Error Message:

Uncaught Error: Unexpected usage errors.js

loadForeignModule@http://localhost:5000/_nuxt/node_modules/monaco-editor/esm/vs/editor/common/services/editorSimpleWorker.js?v=19554350:468:31
_getForeignProxy/this._foreignProxy<@http://localhost:5000/_nuxt/node_modules/monaco-editor/esm/vs/editor/browser/services/webWorker.js?v=19554350:38:30
promise callback*_getForeignProxy@http://localhost:5000/_nuxt/node_modules/monaco-editor/esm/vs/editor/browser/services/webWorker.js?v=19554350:36:51
getProxy@http://localhost:5000/_nuxt/node_modules/monaco-editor/esm/vs/editor/browser/services/webWorker.js?v=19554350:60:21
_getClient/this._client<@http://localhost:5000/_nuxt/node_modules/monaco-editor/esm/vs/language/typescript/tsMode.js?v=19554350:88:35
_getClient@http://localhost:5000/_nuxt/node_modules/monaco-editor/esm/vs/language/typescript/tsMode.js?v=19554350:89:9
getLanguageServiceWorker@http://localhost:5000/_nuxt/node_modules/monaco-editor/esm/vs/language/typescript/tsMode.js?v=19554350:94:31
worker@http://localhost:5000/_nuxt/node_modules/monaco-editor/esm/vs/language/typescript/tsMode.js?v=19554350:1088:19
_doValidate@http://localhost:5000/_nuxt/node_modules/monaco-editor/esm/vs/language/typescript/tsMode.js?v=19554350:367:31
maybeValidate@http://localhost:5000/_nuxt/node_modules/monaco-editor/esm/vs/language/typescript/tsMode.js?v=19554350:302:16
onModelAdd@http://localhost:5000/_nuxt/node_modules/monaco-editor/esm/vs/language/typescript/tsMode.js?v=19554350:327:7
DiagnosticsAdapter/<@http://localhost:5000/_nuxt/node_modules/monaco-editor/esm/vs/language/typescript/tsMode.js?v=19554350:358:80
DiagnosticsAdapter@http://localhost:5000/_nuxt/node_modules/monaco-editor/esm/vs/language/typescript/tsMode.js?v=19554350:358:51
registerProviders@http://localhost:5000/_nuxt/node_modules/monaco-editor/esm/vs/language/typescript/tsMode.js?v=19554350:1131:22
setupMode@http://localhost:5000/_nuxt/node_modules/monaco-editor/esm/vs/language/typescript/tsMode.js?v=19554350:1134:3
setupJavaScript@http://localhost:5000/_nuxt/node_modules/monaco-editor/esm/vs/language/typescript/tsMode.js?v=19554350:1064:22
@http://localhost:5000/_nuxt/node_modules/monaco-editor/esm/vs/language/typescript/monaco.contribution.js?v=19554350:270:40
promise callback*@http://localhost:5000/_nuxt/node_modules/monaco-editor/esm/vs/language/typescript/monaco.contribution.js?v=19554350:270:20
onLanguage/disposable<@http://localhost:5000/_nuxt/node_modules/monaco-editor/esm/vs/editor/standalone/browser/standaloneLanguages.js?v=19554350:59:13
invoke@http://localhost:5000/_nuxt/node_modules/monaco-editor/esm/vs/base/common/event.js?v=19554350:601:23
deliver@http://localhost:5000/_nuxt/node_modules/monaco-editor/esm/vs/base/common/event.js?v=19554350:782:34
fire@http://localhost:5000/_nuxt/node_modules/monaco-editor/esm/vs/base/common/event.js?v=19554350:747:33
requestRichLanguageFeatures@http://localhost:5000/_nuxt/node_modules/monaco-editor/esm/vs/editor/common/services/languageService.js?v=19554350:75:52
TextModel@http://localhost:5000/_nuxt/node_modules/monaco-editor/esm/vs/editor/common/model/textModel.js?v=19554350:208:31
_createModelData@http://localhost:5000/_nuxt/node_modules/monaco-editor/esm/vs/editor/common/services/modelService.js?v=19554350:262:23
createModel@http://localhost:5000/_nuxt/node_modules/monaco-editor/esm/vs/editor/common/services/modelService.js?v=19554350:303:30
doCreateModel@http://localhost:5000/_nuxt/node_modules/monaco-editor/esm/vs/editor/standalone/browser/standaloneCodeEditor.js?v=19554350:320:25
createTextModel@http://localhost:5000/_nuxt/node_modules/monaco-editor/esm/vs/editor/standalone/browser/standaloneCodeEditor.js?v=19554350:314:12
createModel@http://localhost:5000/_nuxt/node_modules/monaco-editor/esm/vs/editor/standalone/browser/standaloneEditor.js?v=19554350:190:12

Component:

<template>
    <ClientOnly>
        <MonacoEditor class="editor" v-model="code" @load="setEditor" lang="javascript" :options="{ theme: 'vs-dark' }" />
    </ClientOnly>
</template>

<script setup lang="ts">
import * as Monaco from 'monaco-editor'
type Editor = Monaco.editor.IStandaloneCodeEditor;

interface Props {
    modelValue: string;
    typings?: string;
}

interface Emits {
    (e: 'update:modelValue', value: string): void;
}

const props = defineProps<Props>();
const emit = defineEmits<Emits>();
let editor: Editor | undefined = undefined;
let library: Monaco.IDisposable | undefined = undefined;
let model: Monaco.editor.ITextModel | undefined = undefined;
const typingUri = 'ts:runner/runner.d.ts';

const code = computed({
    get() { return props.modelValue; },
    set(value: string) { emit('update:modelValue', value); }
});

const resolveTypings = () => {
    library?.dispose();
    model?.dispose();

    if (!editor || !props.typings) return;
    //library = Monaco.languages.typescript.javascriptDefaults.addExtraLib(props.typings, typingUri);
    //model = Monaco.editor.createModel(props.typings, 'typescript', Monaco.Uri.parse(typingUri));
};

const setEditor = (e: Editor) => { editor = e; resolveTypings(); };

watch(() => props.typings, () => resolveTypings());
</script>

I have the nuxt-monaco-editor in the modules: [] in nuxt.config.ts

Blank load

The editor is completely blank, and there are no errors anywhere.

Follow `app.baseURL` in nuxt.config

If app.baseURL is provided in nuxt.config.ts, we should follow it and place in the appropriate location.

DevTools fails to load source maps

I keep having this repeating warning, which is a little annoying:

I have temporarily disabled source maps, but I'd like to know why this is happening.

How to registerCompletionItemProvider

How would I go about using this function?
registerCompletionItemProvider

Page not found: /_monaco/vs/loader.js

Hello,

I have installed monaco editor on fresh project and I have faced this error:

Not working in Windows

Because the path returned by require.resolve is different from Linux / Mac, the next operation seems not to work.

How to change monaco config

Hi,

could you please add more documentation on how to change Monaco config?
I'm mostly interested in how to disable the minimap.

Thanks

__vite_ssr_import_2__.createMemoryHistory is not a function

Hey there,
whenever I start nuxt after installing this module along with monaco-editor I get the following error 500 for every page (even without using any of the Monaco components):

[nuxt] [request error] [unhandled] [500] __vite_ssr_import_2__.createMemoryHistory is not a function                                                                                                                                                            17:14:31
  at /E:/dokumente-volume-e/fullstack-consulting/_projekte/max-trash/_projekte2/flyte-main-projekt/.workdir/flyte-main/.nuxt/dist/server/server.mjs:3321:256
  at fn (/E:/dokumente-volume-e/fullstack-consulting/_projekte/max-trash/_projekte2/flyte-main-projekt/.workdir/flyte-main/.nuxt/dist/server/server.mjs:1126:27)
  at Object.callAsync (/E:/dokumente-volume-e/fullstack-consulting/_projekte/max-trash/_projekte2/flyte-main-projekt/.workdir/flyte-main/node_modules/unctx/dist/index.mjs:49:19)
  at callWithNuxt (/E:/dokumente-volume-e/fullstack-consulting/_projekte/max-trash/_projekte2/flyte-main-projekt/.workdir/flyte-main/.nuxt/dist/server/server.mjs:1128:23)
  at applyPlugin (/E:/dokumente-volume-e/fullstack-consulting/_projekte/max-trash/_projekte2/flyte-main-projekt/.workdir/flyte-main/.nuxt/dist/server/server.mjs:1072:29)
  at Module.applyPlugins (/E:/dokumente-volume-e/fullstack-consulting/_projekte/max-trash/_projekte2/flyte-main-projekt/.workdir/flyte-main/.nuxt/dist/server/server.mjs:1082:11)
  at processTicksAndRejections (node:internal/process/task_queues:96:5)
  at async createNuxtAppServer (/E:/dokumente-volume-e/fullstack-consulting/_projekte/max-trash/_projekte2/flyte-main-projekt/.workdir/flyte-main/.nuxt/dist/server/server.mjs:45:7)
  at async Object.renderToString (/E:/dokumente-volume-e/fullstack-consulting/_projekte/max-trash/_projekte2/flyte-main-projekt/.workdir/flyte-main/node_modules/vue-bundle-renderer/dist/runtime.mjs:172:19)
  at async /E:/dokumente-volume-e/fullstack-consulting/_projekte/max-trash/_projekte2/flyte-main-projekt/.workdir/flyte-main/.nuxt/dev/index.mjs:932:21

The function called here is supposedly from vue-router which I obviously do not have installed since I use the NuxtPage-Component.

Can anyone help me on this one?

locale file not found

  ERROR  Failed to resolve import "monaco-editor-nls/locale/zh-cn.json" from "node_modules\.pnpm\[email protected][email protected][email protected]\node_modules\nuxt-monaco-editor\dist\runtime\nls.mjs?v=a493b7b0". Does the file exist?

the doc need update. the right locale name is zh-hans.

==========

when use this settings:

  monacoEditor: { locale: 'de' },

will get


500
nls.localize2 is not a function

at new SelectToBracketAction (http://localhost:3000/_nuxt/node_modules/.pnpm/[email protected]/node_modules/monaco-editor/esm/vs/editor/contrib/bracketMatching/browser/bracketMatching.js?v=05d667ad:47:34)
at registerEditorAction (http://localhost:3000/_nuxt/node_modules/.pnpm/[email protected]/node_modules/monaco-editor/esm/vs/editor/browser/editorExtensions.js?v=05d667ad:318:20)
at http://localhost:3000/_nuxt/node_modules/.pnpm/[email protected]/node_modules/monaco-editor/esm/vs/editor/contrib/bracketMatching/browser/bracketMatching.js?v=05d667ad:340:1

the nls.localize2 error seems appear in monaco-editor-0.45.0, when goes back to version 0.39.0, everythings ok.

Dynamically change locale

How to change the locale dynamically?
The locale should change dynamically when the user changes the locale like from en to ja.

https://e-chan1007.github.io/nuxt-monaco-editor/guide/configuration#locale

Break test in nuxt environnement

Hi! And thanks a lot for your module.

I noticed that activate this module in a new fresh nuxt app will break test in nuxt environnement.
The step to reproduce :

Create a new nuxt app : pnpm dlx nuxi@latest init $NAME
Install test dependencies : pnpm add -D @nuxt/test-utils vitest @vue/test-utils happy-dom // Don't need playwright
Add vitest.config.ts file with :

import { defineVitestConfig } from '@nuxt/test-utils/config'
export default defineVitestConfig()

Add a simple test ./test/basic.test.ts with :

// @vitest-environment nuxt

import { expect, it } from 'vitest'
import { mountSuspended } from '@nuxt/test-utils/runtime'

import app from '~/app.vue'

it('should render app', async () => {
  const component = await mountSuspended(app)
  expect(component.html()).toContain('Welcome to Nuxt!')
})

Run the test with npx vitest run

-> It should works.

Now, install nuxt-monaco-editor dependency and add it to modules in nuxt.config.ts file.
Re-run the test.

-> Vitest error !

Output :

FAIL  test/basic.test.ts [ test/basic.test.ts ]
Error: Failed to resolve entry for package "monaco-editor". The package may have incorrect main/module/exports specified in its package.json.
 ❯ packageEntryFailure node_modules/.pnpm/[email protected]_@[email protected][email protected]/node_modules/vite/dist/node/chunks/dep-BzOvws4Y.js:46541:15
 ❯ resolvePackageEntry node_modules/.pnpm/[email protected]_@[email protected][email protected]/node_modules/vite/dist/node/chunks/dep-BzOvws4Y.js:46538:3
 ❯ tryNodeResolve node_modules/.pnpm/[email protected]_@[email protected][email protected]/node_modules/vite/dist/node/chunks/dep-BzOvws4Y.js:46354:16
 ❯ ResolveIdContext.resolveId node_modules/.pnpm/[email protected]_@[email protected][email protected]/node_modules/vite/dist/node/chunks/dep-BzOvws4Y.js:46104:19
 ❯ PluginContainer.resolveId node_modules/.pnpm/[email protected]_@[email protected][email protected]/node_modules/vite/dist/node/chunks/dep-BzOvws4Y.js:48919:17
 ❯ TransformPluginContext.resolve node_modules/.pnpm/[email protected]_@[email protected][email protected]/node_modules/vite/dist/node/chunks/dep-BzOvws4Y.js:49079:15
 ❯ normalizeUrl node_modules/.pnpm/[email protected]_@[email protected][email protected]/node_modules/vite/dist/node/chunks/dep-BzOvws4Y.js:63929:26
 ❯ node_modules/.pnpm/[email protected]_@[email protected][email protected]/node_modules/vite/dist/node/chunks/dep-BzOvws4Y.js:64068:39
 ❯ TransformPluginContext.transform node_modules/.pnpm/[email protected]_@[email protected][email protected]/node_modules/vite/dist/node/chunks/dep-BzOvws4Y.js:63995:7
 ❯ PluginContainer.transform node_modules/.pnpm/[email protected]_@[email protected][email protected]/node_modules/vite/dist/node/chunks/dep-BzOvws4Y.js:49000:18
 ❯ loadAndTransform node_modules/.pnpm/[email protected]_@[email protected][email protected]/node_modules/vite/dist/node/chunks/dep-BzOvws4Y.js:51822:27

Never disposed onUnmounted

There is never any dispose in MonacoEditor.client.vue and MonacoDiffEditor.client.vue.

The monaco-editor samples and other similar libraries that use it often dispose on unmount.
https://github.com/microsoft/monaco-editor/blob/main/samples/browser-esm-vite-react/src/components/Editor.tsx#L21

Here is a description of disposables.
https://github.com/microsoft/monaco-editor#disposables

Here is a list of targets for disepose, which varies with each library.

editor.dispose()
model.dispose()
other disposables (ex: return value of event.)

Warnings when minifying css: [WARNING] Unexpected "," [css-syntax-error]

Hi, I used latest version of nuxtjs and nuxt-monaco-editor v1.2.3 and just wondering if the error is caused by the nuxt-monaco-editor. I encounter the error when running production build. The error is

warnings when minifying css:
▲ [WARNING] Unexpected "," [css-syntax-error]

<stdin>:2757:112:
2757 │ ...t:focus .selected .monaco-icon-label:after,/* list */,/* list */

How to dinamically change the size of editor?

Nuxt 3.9.0 - Shadow DOM issues?

Fresh install of Nuxt 3.9.0 and nuxt-monaco-editor fails when trying to access the shadow root - stepped through and domNode is null..

Cannot read properties of undefined (reading 'parentNode')

at getShadowRoot (.../_nuxt/node_modules/monaco-editor/esm/vs/base/browser/dom.js?v=2a224e56:520:20)
at Module.isInShadowDOM (.../_nuxt/node_modules/monaco-editor/esm/vs/base/browser/dom.js?v=2a224e56:516:14)
at StandaloneThemeService.registerEditorContainer (.../_nuxt/node_modules/monaco-editor/esm/vs/editor/standalone/browser/standaloneThemeService.js?v=2a224e56:207:17)
at new StandaloneEditor (.../_nuxt/node_modules/monaco-editor/esm/vs/editor/standalone/browser/standaloneCodeEditor.js?v=2a224e56:174:51)
at InstantiationService._createInstance (.../_nuxt/node_modules/monaco-editor/esm/vs/platform/instantiation/common/instantiationService.js?v=2a224e56:97:24)
at InstantiationService.createInstance (.../_nuxt/node_modules/monaco-editor/esm/vs/platform/instantiation/common/instantiationService.js?v=2a224e56:68:27)
at Object.create (.../_nuxt/node_modules/monaco-editor/esm/vs/editor/standalone/browser/standaloneEditor.js?v=2a224e56:44:33)
at .../_nuxt/node_modules/nuxt-monaco-editor/dist/runtime/MonacoEditor.client.js:48:30
at .../_nuxt/node_modules/.cache/vite/client/deps/vue.js?v=475a85ca:4295:88
at callWithErrorHandling (.../_nuxt/node_modules/.cache/vite/client/deps/vue.js?v=475a85ca:1666:18)

Minimal Reproduction

https://stackblitz.com/edit/github-wsgmqi?file=nuxt.config.ts,package.json,app.vue

window is not defined

nuxt:^3.8.1
monaco-editor:^0.44.0
nuxt-monoca-editor:^1.2.3

When I want to use useMonaco, the page jumps normally after the project is loaded for the first time, but when I refresh the page, a window is not define error will be reported.

`SVG is not defined` when combined with `vue3-apexcharts`

Hey, thanks for the Nuxt plugin 👌🏻

Any ideas why installing this alongside vue3-apexcharts gives this error?

Reproduction link

Plugin didn't copy sourcemap file to dist/.output folder

[nuxt] error caught during app initialization H3Error: Page not found: /min-maps/vs/base/common/worker/simpleWorker.nls.js.map

Validation Sintaxe

Ola, I need to create a syntax validation (js, html, css) for the monaco-editor in nuxt, I found nothing about it, any tips?

context menu not close

context menu not close when click the editor.

height of the monaco editor.

When I use nuxt-monaco-editor in my Nuxt 3 environment, the height of the editor is broken, as shown in the image. Can you please tell me how to fix it?

my code

<template>
  <MonacoEditor />
</template>

export default defineNuxtConfig({
  devtools: { enabled: true },
  modules: [
    'nuxt-monaco-editor'
  ],
})

Chrome Browser Experiencing Freezes and Crashes

Hello,

I've encountered multiple instances of freezing with this module, specifically when refreshing the browser multiple times. This occurs in both clean sessions and private navigation modes.

Environment:

Chrome Version: 116.0.5845.96 (Official Build) (64-bit)
Ubuntu 23.04

Here are the steps to reproduce the issue and relevant configuration files:

Installation and Initialization:

npx nuxi@latest init frontend
yarn install
yarn add -D monaco-editor nuxt-monaco-editor
yarn dev

App.vue File:

<template>
    <MonacoEditor v-model="value" lang="typescript" style="height: 80vh" />
</template>

<script lang="ts" setup>
const value = ref('')
</script>

package.json File:

{
  "name": "nuxt-app",
  "private": true,
  "scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "postinstall": "nuxt prepare"
  },
  "devDependencies": {
    "@nuxt/devtools": "latest",
    "@types/node": "^18.17.3",
    "monaco-editor": "^0.41.0",
    "nuxt": "^3.6.5",
    "nuxt-monaco-editor": "^1.2.3"
  }
}

I've tested the module with Firefox and it works fine there. Additionally, when tested with Chrome and Express, no issues were encountered.

Express Configuration:

{
  "dependencies": {
    "express": "^4.18.2",
    "monaco-editor": "^0.41.0"
  },
  "name": "monaco-node",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "test": "echo \\"Error: no test specified\\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "description": ""
}

Best regards,

`onUnmounted` is not defined

You seem to have forgotten to import the onUnmounted() function here.

Refer: 4a4184f

nuxt 3.8.2
nuxt-monaco-editor: 1.2.4

Changing v-model ignores second change

Hello,

I have this code:

<template>
    <div h="screen">
        <div>
            <button @click="test1">test 1</button>
            <button @click="test2">test 2</button>
        </div>
        <MonacoEditor h="full" v-model="code" lang="html" :options="{ theme: 'vs-dark', fontSize: '20px' }" />
    </div>
</template>

<script setup>
const code = ref(null)

const test1 = () => {
    code.value = `<div>test 1</div>`
}

const test2 = () => {
    code.value = `<div>test 2</div>`
}
</script>

code changes on the editor on the first call function, second function not changing the code in the editor.

Thank you.

component not loaded

component not loaded !!
<MonacoEditor v-model="data" lang="typescript" />

Failed to resolve import "#build/components"

Hi there,

I'm trying to apply typing to my MonacoDiffEditor ref. To import the typing I'm using:

<script setup lang="ts">
import type * as Monaco from 'monaco-editor'
import { MonacoDiffEditor } from '#build/components'

const editorRef = ref<InstanceType<typeof MonacoDiffEditor>>()
const markdownContent = ref('test')
const changedMarkdownContent = ref('test changes')

const OPTIONS: Monaco.editor.IDiffEditorConstructionOptions = {
  diffWordWrap: 'on',
  automaticLayout: true,
}

</script>

<template>
<MonacoDiffEditor
        ref="editorRef"
        v-model="changedMarkdownContent"
        :original="markdownContent"
        :options="OPTIONS"
        lang="markdown"
        :style="{
          height: '100%',
          width: '100%',
        }"
      />
</template>

I can view the typings holding ctrl + click on the #build/components import however nuxt continues to show this error message:

[plugin:vite:import-analysis] Failed to resolve import "#build/components" from "pages/diff.vue". Does the file exist?

/Users/andy/development/kinnu/core2-mirror/trinity-web/pages/diff.vue:6:33

1  |  import { ref, computed } from 'vue';
2  |  import { defineComponent as _defineComponent } from "vue";
3  |  import { MonacoDiffEditor } from "#build/components";

nuxt.config.ts

export default defineNuxtConfig({
 modules: ['nuxt-monaco-editor'],
 monacoEditor: {
    // These are default values:
    locale: 'en',
    componentName: {
      codeEditor: 'MonacoEditor',
      diffEditor: 'MonacoDiffEditor',
    },
  },
})

Does anyone know why this is happening?

I'm trying to access the number of changes in the diff (see here: https://stackoverflow.com/a/61466242/276220 using: editorRef.value.$editor.getLineChanges()

Failed to resolve import "__LOCALE_DATA_PATH__"

When adding this module to a Nuxt 3.11 project with no module config, I get the following error message:

[plugin:vite:import-analysis] Failed to resolve import "__LOCALE_DATA_PATH__" from "node_modules/nuxt-monaco-editor/dist/runtime/nls.mjs?v=bbcb84bd". Does the file exist?


<PROJECT_PATH>/node_modules/nuxt-monaco-editor/dist/runtime/nls.mjs:1:25

1  |  import localeData from '__LOCALE_DATA_PATH__'
   |                          ^
2  |  
3  |  export function _format (message, args) {

Any clues on what might have gone wrong here?

changed v-model value not work

set code value, but monaco not changed
textarea is work

Can't paste code from clipboard

I can't paste the clipboard data to the editor neither by pressing Ctrl + V, nor by using Paste in context menu in Chrome browser (v 123.0.6312.106)
But in Firefox in works.
In documentation is also works in all browsers https://microsoft.github.io/monaco-editor/

Broken in Nuxt 3.2.2

Looks like the module broke again with Nuxt 3.2.2. Same as mentioned in #20

In dev mode it works. This is the result of preview:

Highlight Line Background Color

Is there any way I can highlight the background color of any line?
Appreciate if you can share some sample code.

Broken in Nuxt ^3.1.0

Doesn't work at all in either Nuxt 3.1.0 nor 3.1.1

pnpm: No match found for location with path "/_monaco/vs/loader.js"

<script setup>
const editorRef = ref()
onMounted(() => {
    console.log(editorRef.value)
})
</script>
<template>
<MonacoEditor ref="editorRef" />
</template>

got this:

Proxy {$editor: undefined, __v_skip: true}

Replace AMD loader with ESM

Monaco Editor mounting issue

Hello, thank you for this module!

I'm trying to use the editor but I have a problem, when the page loads the first time, the editor loads badly, it looks like there's an mounting problem in the dom.

But after making any modification in the code, the nuxt HMR reloads the view and now the editor appears.

I've made a reproduction here:
https://stackblitz.com/edit/node-nxxysk?file=nuxt.config.ts,app.vue,components%2FAppTopbar.vue,components%2FAppSidebar.vue

Here's a screenshot of the problem

After any code modification, the editor loads

Support for themes

Hi, I would like to know how can I use themes from --> https://github.com/brijeshb42/monaco-themes
I tried the code but couldnt make it work,
Appreciate the help (Sorry for the trouble as I am learning Nuxt, ts)

Add custom language

Hi, I have defined custom language syntax using https://microsoft.github.io/monaco-editor/monarch.html

How do I configure my monaco to use it please?

e-chan1007 / nuxt-monaco-editor Goto Github PK

nuxt-monaco-editor's Introduction

Nuxt Monaco Editor

Install

Setup

Development

nuxt-monaco-editor's People

Contributors

Stargazers

Watchers

Forkers

nuxt-monaco-editor's Issues

Minimal Reproduction

Installation and Initialization:

App.vue File:

package.json File:

Express Configuration:

Recommend Projects

Recommend Topics

Recommend Org