chore: upgrade deps and refactor repo

README.md

@@ -23,8 +23,8 @@ import * as monaco from 'monaco-editor'
 import { language as markdownLanguage } from '@nuxtlabs/monarch-mdc'
 
 // Register language
-monaco.languages.register({ id: 'docus-markdown' })
-monaco.languages.setMonarchTokensProvider('docus-markdown', markdownLanguage);
+monaco.languages.register({ id: 'mdc' })
+monaco.languages.setMonarchTokensProvider('mdc', markdownLanguage);
 
 
 const code = `
@@ -34,7 +34,7 @@ Your **awesome** markdown
 // Create monaco model
 const model = monaco.editor.createModel(
   code,
-  'docus-markdown'
+  'mdc'
 )
 
 // Create your editor
@@ -46,6 +46,8 @@ const editor = monaco.editor.create(el, {
 })
 ```
 
+Checkout the [Editor.vue](./playground/components/Editor.vue) for a complete example.
+
 
 
 <!-- Badges -->

eslint.config.mjs

@@ -0,0 +1,26 @@
+// @ts-check
+import { createConfigForNuxt } from '@nuxt/eslint-config/flat'
+
+// Run `npx @eslint/config-inspector` to inspect the resolved config interactively
+export default createConfigForNuxt({
+  features: {
+    // Rules for module authors
+    tooling: true,
+    // Rules for formatting
+    stylistic: true,
+  },
+  dirs: {
+    src: [
+      './playground',
+      './examples/blog',
+    ],
+  },
+})
+  .append(
+    {
+      rules: {
+        'vue/multi-word-component-names': 'off',
+        '@typescript-eslint/no-empty-object-type': 'off',
+      },
+    },
+  )

package.json

@@ -10,26 +10,19 @@
     "dist"
   ],
   "scripts": {
-    "dev": "vite -c playground/vite.config.js",
+    "dev": "nuxi dev playground",
     "lint": "eslint .",
     "build": "unbuild",
     "release": "release-it"
   },
   "devDependencies": {
-    "@antfu/utils": "^0.7.6",
-    "@nuxt/eslint-config": "^0.2.0",
-    "@vitejs/plugin-vue": "^4.3.4",
-    "@vue/compiler-sfc": "^3.3.4",
-    "@vueuse/core": "^10.4.1",
-    "eslint": "^8.48.0",
-    "monaco-editor": "^0.41.0",
-    "monaco-editor-core": "^0.41.0",
-    "release-it": "^16.1.5",
-    "unbuild": "^2.0.0",
-    "vite": "^4.4.9",
-    "vue": "^3.3.4"
+    "@nuxt/eslint-config": "^0.7.3",
+    "eslint": "^9.17.0",
+    "monaco-editor-core": "^0.52.2",
+    "release-it": "^17.10.0",
+    "unbuild": "^3.0.1"
   },
-  "packageManager": "pnpm@8.7.4",
+  "packageManager": "pnpm@9.15.0",
   "release-it": {
     "git": {
       "commitMessage": "chore(release): release v${version}"

playground/.gitignore

@@ -0,0 +1,24 @@
+# Nuxt dev/build outputs
+.output
+.data
+.nuxt
+.nitro
+.cache
+dist
+
+# Node dependencies
+node_modules
+
+# Logs
+logs
+*.log
+
+# Misc
+.DS_Store
+.fleet
+.idea
+
+# Local env files
+.env
+.env.*
+!.env.example

playground/src/App.vue → playground/app.vue

@@ -1,20 +1,5 @@
-<template>
-  <div
-    class="h-full default-theme"
-    :push-other-panes="false"
-  >
-    <Editor
-      class="editor"
-      :file="currentFile"
-    />
-  </div>
-</template>
-
 <script setup lang="ts">
-import { ref } from 'vue'
-import Editor from './components/Editor.vue'
-
-const currentFile = ref(`---
+const source = ref(`---
 key: value
 ---
 <!--
@@ -130,7 +115,17 @@ This is **default slot**
 The content
 ::
 
-`
-)
-
+`)
 </script>
+
+<template>
+  <Editor
+    v-model:code="source"
+    class="h-screen w-screen"
+  />
+</template>
+
+<style>
+@import "tailwindcss";
+@import "@nuxt/ui";
+</style>

playground/components/Editor.vue

@@ -0,0 +1,81 @@
+<template>
+  <div
+    ref="editorContainer"
+    class="h-full w-full"
+  />
+</template>
+
+<script setup>
+import { ref, onMounted, watch } from 'vue'
+import loader from '@monaco-editor/loader'
+import { language as mdc } from '../../src/index'
+
+const props = defineProps({
+  code: {
+    type: String,
+    required: true,
+  },
+  language: {
+    type: String,
+    default: 'mdc',
+  },
+  readOnly: {
+    type: Boolean,
+    default: false,
+  },
+})
+
+const emit = defineEmits(['update:code'])
+const editorContainer = ref(null)
+let editor = null
+
+onMounted(async () => {
+  const monaco = await loader.init()
+
+  // Register the MDC language
+  monaco.languages.register({ id: 'mdc' })
+  monaco.languages.setMonarchTokensProvider('mdc', mdc)
+
+  editor = monaco.editor.create(editorContainer.value, {
+    value: props.code,
+    language: props.language,
+    theme: 'vs-dark',
+    automaticLayout: true,
+    readOnly: props.readOnly,
+    minimap: {
+      enabled: false,
+    },
+    fontSize: 14,
+    lineNumbers: 'on',
+    scrollBeyondLastLine: false,
+    roundedSelection: false,
+    padding: {
+      top: 8,
+    },
+    bracketPairColorization: {
+      enabled: true,
+    },
+    formatOnPaste: true,
+    formatOnType: true,
+  })
+
+  editor.onDidChangeModelContent(() => {
+    emit('update:code', editor.getValue())
+  })
+})
+
+watch(() => props.code, (newCode) => {
+  if (editor && editor.getValue() !== newCode) {
+    editor.setValue(newCode)
+  }
+})
+
+watch(() => props.language, (newLanguage) => {
+  if (editor) {
+    const model = editor.getModel()
+    if (model) {
+      monaco.editor.setModelLanguage(model, newLanguage === 'vue' ? 'mdc' : newLanguage)
+    }
+  }
+})
+</script>

playground/nuxt.config.ts

@@ -0,0 +1,6 @@
+// https://nuxt.com/docs/api/configuration/nuxt-config
+export default defineNuxtConfig({
+  modules: ['@nuxt/ui'],
+  devtools: { enabled: true },
+  compatibilityDate: '2024-11-01',
+})

playground/package.json

@@ -0,0 +1,19 @@
+{
+  "name": "monarch-mdc-playground",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "build": "nuxt build",
+    "dev": "nuxt dev",
+    "generate": "nuxt generate",
+    "preview": "nuxt preview",
+    "postinstall": "nuxt prepare"
+  },
+  "dependencies": {
+    "@monaco-editor/loader": "^1.4.0",
+    "@nuxt/ui": "3.0.0-alpha.10",
+    "nuxt": "^3.14.1592",
+    "vue": "latest",
+    "vue-router": "latest"
+  }
+}

playground/public/robots.txt

@@ -0,0 +1 @@
+