mktcms 0.3.18 → 0.3.19

package/dist/module.json

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

package/dist/runtime/app/components/content/editor/frontmatter/filePicker/modal.d.vue.ts

@@ -1,6 +1,6 @@
 type __VLS_Props = {
     isOpen: boolean;
-    uiHint: 'image' | 'pdf' | 'file';
+    uiHint: 'image' | 'pdf' | 'file' | 'media';
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     select: (path: string) => any;

package/dist/runtime/app/components/content/editor/frontmatter/filePicker/modal.vue.d.ts

@@ -1,6 +1,6 @@
 type __VLS_Props = {
     isOpen: boolean;
-    uiHint: 'image' | 'pdf' | 'file';
+    uiHint: 'image' | 'pdf' | 'file' | 'media';
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     select: (path: string) => any;

package/dist/runtime/app/components/content/editor/frontmatter/filePicker/node.d.vue.ts

@@ -2,7 +2,7 @@ type __VLS_Props = {
     path: string;
     name: string;
     level: number;
-    uiHint: 'image' | 'pdf' | 'file';
+    uiHint: 'image' | 'pdf' | 'file' | 'media';
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     select: (path: string) => any;

package/dist/runtime/app/components/content/editor/frontmatter/filePicker/node.vue.d.ts

@@ -2,7 +2,7 @@ type __VLS_Props = {
     path: string;
     name: string;
     level: number;
-    uiHint: 'image' | 'pdf' | 'file';
+    uiHint: 'image' | 'pdf' | 'file' | 'media';
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     select: (path: string) => any;

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

@@ -1,6 +1,8 @@
 <script setup>
 import { onBeforeUnmount, onMounted, ref, watch } from "vue";
 import TurndownService from "turndown";
+import FilePickerModal from "./frontmatter/filePicker/modal.vue";
+import { isImagePath } from "../../../../shared/contentFiles";
 import "monaco-editor/min/vs/editor/editor.main.css";
 import "monaco-editor/esm/vs/basic-languages/markdown/markdown.contribution.js";
 import * as monaco from "monaco-editor/esm/vs/editor/editor.api.js";
@@ -12,7 +14,11 @@ const props = defineProps({
 });
 const emit = defineEmits(["update:modelValue"]);
 const rootEl = ref(null);
+const isFilePickerOpen = ref(false);
+const isContextMenuOpen = ref(false);
+const contextMenuPosition = ref({ x: 0, y: 0 });
 let editor;
+let pendingFileInsertionSelection;
 let resizeObserver;
 let suppressModelEmit = false;
 const allowedPasteElementNames = /* @__PURE__ */ new Set([
@@ -146,14 +152,11 @@ function sanitizePastedHtml(html) {
   }
   return clipboardDocument.body;
 }
-function insertMarkdown(markdown) {
-  if (!editor)
-    return;
-  const selections = editor.getSelections();
-  if (!selections?.length)
+function insertMarkdown(markdown, selections = editor?.getSelections()) {
+  if (!editor || !selections?.length)
     return;
   editor.pushUndoStop();
-  editor.executeEdits("paste-html-as-markdown", selections.map((selection) => ({
+  editor.executeEdits("insert-markdown", selections.map((selection) => ({
     range: selection,
     text: markdown,
     forceMoveMarkers: true
@@ -161,6 +164,75 @@ function insertMarkdown(markdown) {
   editor.pushUndoStop();
   editor.focus();
 }
+function escapeMarkdownLabel(label) {
+  return label.replaceAll("\\", "\\\\").replaceAll("[", "\\[").replaceAll("]", "\\]");
+}
+function filenameWithoutExtension(path) {
+  const filename = path.split(":").at(-1) ?? path;
+  return filename.replace(/\.[^/.]+$/, "");
+}
+function toContentUrl(path) {
+  return `/api/content/${encodeURIComponent(path)}`;
+}
+function toMarkdownFileReference(path) {
+  const label = escapeMarkdownLabel(filenameWithoutExtension(path));
+  const url = toContentUrl(path);
+  if (isImagePath(path))
+    return `![${label}](${url})`;
+  return `[${label}](${url})`;
+}
+function closeContextMenu() {
+  isContextMenuOpen.value = false;
+}
+function openFilePicker() {
+  closeContextMenu();
+  isFilePickerOpen.value = true;
+}
+function insertSelectedFile(path) {
+  insertMarkdown(toMarkdownFileReference(path), pendingFileInsertionSelection ? [pendingFileInsertionSelection] : void 0);
+  pendingFileInsertionSelection = void 0;
+}
+function getMouseTargetPosition(event) {
+  const target = editor?.getTargetAtClientPoint(event.clientX, event.clientY);
+  if (target && "position" in target && target.position)
+    return target.position;
+  return void 0;
+}
+function handleContextMenu(event) {
+  if (!editor || !rootEl.value?.contains(event.target))
+    return;
+  event.preventDefault();
+  event.stopPropagation();
+  const position = getMouseTargetPosition(event);
+  if (position) {
+    pendingFileInsertionSelection = new monaco.Selection(
+      position.lineNumber,
+      position.column,
+      position.lineNumber,
+      position.column
+    );
+    editor.setPosition(position);
+  } else {
+    pendingFileInsertionSelection = editor.getSelection() ?? void 0;
+  }
+  contextMenuPosition.value = {
+    x: event.clientX,
+    y: event.clientY
+  };
+  isContextMenuOpen.value = true;
+}
+function handleDocumentClick(event) {
+  if (!isContextMenuOpen.value)
+    return;
+  const target = event.target;
+  if (target.closest("[data-monaco-custom-context-menu]"))
+    return;
+  closeContextMenu();
+}
+function handleDocumentKeydown(event) {
+  if (event.key === "Escape")
+    closeContextMenu();
+}
 function handlePaste(event) {
   if (!editor?.hasTextFocus())
     return;
@@ -195,7 +267,8 @@ onMounted(() => {
     minimap: { enabled: false },
     scrollBeyondLastLine: false,
     wordWrap: "on",
-    automaticLayout: true
+    automaticLayout: true,
+    contextmenu: false
   });
   editor.onDidChangeModelContent(() => {
     if (!editor || suppressModelEmit)
@@ -203,6 +276,9 @@ onMounted(() => {
     emit("update:modelValue", editor.getValue());
   });
   document.addEventListener("paste", handlePaste, true);
+  document.addEventListener("contextmenu", handleContextMenu, true);
+  document.addEventListener("click", handleDocumentClick, true);
+  document.addEventListener("keydown", handleDocumentKeydown, true);
   resizeObserver = new ResizeObserver(() => {
     editor?.layout();
   });
@@ -225,14 +301,46 @@ onBeforeUnmount(() => {
   resizeObserver?.disconnect();
   resizeObserver = void 0;
   document.removeEventListener("paste", handlePaste, true);
+  document.removeEventListener("contextmenu", handleContextMenu, true);
+  document.removeEventListener("click", handleDocumentClick, true);
+  document.removeEventListener("keydown", handleDocumentKeydown, true);
   editor?.dispose();
   editor = void 0;
 });
 </script>
 
 <template>
-  <div
-    ref="rootEl"
-    class="w-full"
-  />
+  <div class="relative w-full h-full">
+    <div
+      ref="rootEl"
+      class="w-full h-full"
+    />
+
+    <div
+      v-if="isContextMenuOpen"
+      data-monaco-custom-context-menu
+      class="fixed z-9999 min-w-48 rounded-md border border-black/10 bg-white p-1 shadow-[0_8px_24px_rgba(0,0,0,0.18)]"
+      :style="{
+  left: `${contextMenuPosition.x}px`,
+  top: `${contextMenuPosition.y}px`
+}"
+      role="menu"
+    >
+      <button
+        type="button"
+        class="w-full rounded px-3 py-2 text-left text-sm hover:bg-gray-100"
+        role="menuitem"
+        @click="openFilePicker"
+      >
+        Datei auswählen
+      </button>
+    </div>
+
+    <FilePickerModal
+      :is-open="isFilePickerOpen"
+      ui-hint="media"
+      @close="isFilePickerOpen = false"
+      @select="insertSelectedFile"
+    />
+  </div>
 </template>

package/dist/runtime/server/api/admin/list.js

@@ -8,7 +8,7 @@ function alphaSort(a, b) {
 }
 const querySchema = z.object({
   path: z.string().optional(),
-  type: z.enum(["image", "pdf", "file"]).optional()
+  type: z.enum(["image", "pdf", "file", "media"]).optional()
 });
 export default defineEventHandler(async (event) => {
   const { path, type } = await getValidatedQuery(event, (query) => querySchema.parse(query));
@@ -23,6 +23,9 @@ export default defineEventHandler(async (event) => {
     if (type === "pdf") {
       return isPdfPath(key);
     }
+    if (type === "media") {
+      return isImagePath(key) || isPdfPath(key);
+    }
     return true;
   });
   const filteredFiles = matchingKeys.filter((key) => !key.includes(":"));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mktcms",
-  "version": "0.3.18",
+  "version": "0.3.19",
   "description": "Simple CMS module for Nuxt",
   "repository": "mktcode/mktcms",
   "license": "MIT",