mktcms 0.1.46 → 0.1.47

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "mktcms",
   "configKey": "mktcms",
-  "version": "0.1.46",
+  "version": "0.1.47",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.1"

package/dist/runtime/app/components/content/editor/markdown.vue

@@ -5,6 +5,7 @@ import Saved from "../saved.vue";
 import usePathParam from "../../../composables/usePathParam";
 import { useFetch } from "#imports";
 import FrontmatterForm from "./frontmatter/form.vue";
+import MonacoEditor from "./monacoEditor.vue";
 const { path } = usePathParam();
 const { data: content } = await useFetch(`/api/admin/md?path=${path}`);
 const frontmatter = ref(content.value?.frontmatter ?? {});
@@ -52,11 +53,14 @@ const mode = ref("preview");
     </div>
 
     <div class="lg:grid lg:grid-cols-2 lg:gap-3">
-      <textarea
-        v-model="markdown"
-        class="w-full min-h-72 lg:block"
-        :class="mode === 'edit' ? 'block' : 'hidden'"
-      />
+      <ClientOnly>
+        <MonacoEditor
+          v-model="markdown"
+          language="markdown"
+          class="w-full min-h-72 border border-gray-200 rounded-sm lg:block"
+          :class="mode === 'edit' ? 'block' : 'hidden'"
+        />
+      </ClientOnly>
 
       <MDC
         class="prose max-w-full min-h-72 border border-gray-200 rounded-sm p-4 lg:block"

package/dist/runtime/app/components/content/editor/monacoEditor.d.vue.ts

@@ -0,0 +1,16 @@
+import 'monaco-editor/min/vs/editor/editor.main.css';
+type __VLS_Props = {
+    modelValue: string;
+    language?: string;
+    readOnly?: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    "update:modelValue": (value: string) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+}>, {
+    language: string;
+    readOnly: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/app/components/content/editor/monacoEditor.vue

@@ -0,0 +1,84 @@
+<script setup>
+import { onBeforeUnmount, onMounted, ref, watch } from "vue";
+import "monaco-editor/min/vs/editor/editor.main.css";
+import * as monaco from "monaco-editor";
+import EditorWorker from "monaco-editor/esm/vs/editor/editor.worker?worker";
+import JsonWorker from "monaco-editor/esm/vs/language/json/json.worker?worker";
+import CssWorker from "monaco-editor/esm/vs/language/css/css.worker?worker";
+import HtmlWorker from "monaco-editor/esm/vs/language/html/html.worker?worker";
+import TsWorker from "monaco-editor/esm/vs/language/typescript/ts.worker?worker";
+const props = defineProps({
+  modelValue: { type: String, required: true },
+  language: { type: String, required: false, default: "markdown" },
+  readOnly: { type: Boolean, required: false, default: false }
+});
+const emit = defineEmits(["update:modelValue"]);
+const rootEl = ref(null);
+let editor;
+let resizeObserver;
+let suppressModelEmit = false;
+function ensureMonacoWorkers() {
+  const globalAny = globalThis;
+  if (globalAny.MonacoEnvironment?.getWorker)
+    return;
+  globalAny.MonacoEnvironment = {
+    getWorker(_, label) {
+      if (label === "json")
+        return new JsonWorker();
+      if (label === "css" || label === "scss" || label === "less")
+        return new CssWorker();
+      if (label === "html" || label === "handlebars" || label === "razor")
+        return new HtmlWorker();
+      if (label === "typescript" || label === "javascript")
+        return new TsWorker();
+      return new EditorWorker();
+    }
+  };
+}
+onMounted(() => {
+  ensureMonacoWorkers();
+  if (!rootEl.value)
+    return;
+  editor = monaco.editor.create(rootEl.value, {
+    value: props.modelValue ?? "",
+    language: props.language,
+    readOnly: props.readOnly,
+    minimap: { enabled: false },
+    scrollBeyondLastLine: false,
+    wordWrap: "on",
+    automaticLayout: true
+  });
+  editor.onDidChangeModelContent(() => {
+    if (!editor || suppressModelEmit)
+      return;
+    emit("update:modelValue", editor.getValue());
+  });
+  resizeObserver = new ResizeObserver(() => {
+    editor?.layout();
+  });
+  resizeObserver.observe(rootEl.value);
+  queueMicrotask(() => {
+    editor?.layout();
+  });
+});
+watch(() => props.modelValue, (nextValue) => {
+  if (!editor)
+    return;
+  const current = editor.getValue();
+  if (nextValue === current)
+    return;
+  suppressModelEmit = true;
+  editor.setValue(nextValue ?? "");
+  suppressModelEmit = false;
+});
+onBeforeUnmount(() => {
+  resizeObserver?.disconnect();
+  resizeObserver = void 0;
+  editor?.dispose();
+  editor = void 0;
+});
+</script>
+
+<template>
+  <div ref="rootEl" class="w-full" />
+</template>

package/dist/runtime/app/components/content/editor/monacoEditor.vue.d.ts

@@ -0,0 +1,16 @@
+import 'monaco-editor/min/vs/editor/editor.main.css';
+type __VLS_Props = {
+    modelValue: string;
+    language?: string;
+    readOnly?: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    "update:modelValue": (value: string) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+}>, {
+    language: string;
+    readOnly: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mktcms",
-  "version": "0.1.46",
+  "version": "0.1.47",
   "description": "Simple CMS module for Nuxt",
   "repository": "mktcode/mktcms",
   "license": "MIT",
@@ -45,6 +45,7 @@
     "csv-stringify": "^6.6.0",
     "defu": "^6.1.4",
     "ejs": "^4.0.1",
+    "monaco-editor": "^0.55.1",
     "marked": "^17.0.1",
     "nodemailer": "^7.0.12",
     "sharp": "^0.34.5",