mktcms 0.1.21 → 0.1.22

package/dist/module.json

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

package/dist/module.mjs

@@ -58,6 +58,11 @@ const module$1 = defineNuxtModule({
       method: "post",
       handler: resolver.resolve("./runtime/server/api/admin/content/[path].post")
     });
+    addServerHandler({
+      route: "/api/admin/content/:path",
+      method: "delete",
+      handler: resolver.resolve("./runtime/server/api/admin/content/[path].delete")
+    });
     addServerHandler({
       route: "/api/admin/content/upload",
       handler: resolver.resolve("./runtime/server/api/admin/content/upload")
@@ -77,14 +82,14 @@ const module$1 = defineNuxtModule({
         file: resolver.resolve("./runtime/app/pages/admin/index.vue")
       });
       pages.push({
-        name: "Admin Text Editor",
-        path: "/admin/edit/text/:path",
-        file: resolver.resolve("./runtime/app/pages/admin/edit/text/[path].vue")
+        name: "Admin Editor",
+        path: "/admin/edit/:path",
+        file: resolver.resolve("./runtime/app/pages/admin/edit/[path].vue")
       });
       pages.push({
-        name: "Admin Blob Editor",
-        path: "/admin/edit/blob/:path",
-        file: resolver.resolve("./runtime/app/pages/admin/edit/blob/[path].vue")
+        name: "Admin Delete",
+        path: "/admin/delete/:path",
+        file: resolver.resolve("./runtime/app/pages/admin/delete/[path].vue")
       });
       pages.push({
         name: "Admin New Content",

package/dist/runtime/app/components/admin.vue

@@ -5,5 +5,5 @@
 </template>
 
 <style>
-*{box-sizing:border-box}body{font-family:Arial,sans-serif;margin:0}#mktcms-admin{--mktcms-primary-color:#3cb371;--mktcms-primary-color-hover:#45a049;background-color:#f9f9f9;margin:0 auto;max-width:800px;padding:20px}#mktcms-admin h1{color:#333}#mktcms-admin .button,#mktcms-admin button{background-color:var(--mktcms-primary-color);border:none;border-radius:5px;color:#fff;cursor:pointer;font-size:16px;padding:10px 20px;text-align:center;text-decoration:none;transition:background-color .3s}#mktcms-admin .button:hover,#mktcms-admin button:hover{background-color:var(--mktcms-primary-color-hover)}#mktcms-admin .button.soft,#mktcms-admin button.soft{background-color:#eee;color:#666}#mktcms-admin .button.soft:hover,#mktcms-admin button.soft:hover{background-color:#ddd}#mktcms-admin .button-icon{height:20px;vertical-align:middle;width:20px}#mktcms-admin input[type=email],#mktcms-admin input[type=password],#mktcms-admin input[type=text],#mktcms-admin select,#mktcms-admin textarea{background-color:#fff;border:1px solid #ccc;border-radius:5px;font-size:16px;padding:10px;width:100%}#mktcms-admin .breadcrumbs{color:#888;font-size:1rem;margin:20px 0}#mktcms-admin .breadcrumbs a{background-color:#eee;border-radius:4px;color:#888;padding:2px 6px;text-decoration:none}#mktcms-admin .breadcrumbs a:hover{text-decoration:underline}#mktcms-admin .dirs,#mktcms-admin .files{display:flex;flex-direction:column;gap:8px}#mktcms-admin .dirs a,#mktcms-admin .files a{border-radius:4px;display:block;padding:8px 12px;text-decoration:none}#mktcms-admin .dirs a:hover,#mktcms-admin .files a:hover{text-decoration:underline}#mktcms-admin .files a{background-color:#fff;color:#555}#mktcms-admin .dirs a{background-color:#555;color:#fff;display:flex;justify-content:space-between}
+@import "../styles/admin.min.css";
 </style>

package/dist/runtime/app/components/content/breadcrumb.d.vue.ts

@@ -1,6 +1,3 @@
-type __VLS_Props = {
-    parts: string[];
-};
-declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/app/components/content/breadcrumb.vue

@@ -1,20 +1,36 @@
 <script setup>
-defineProps({
-  parts: { type: Array, required: true }
-});
+import { useRoute } from "#app";
+const path = useRoute().params.path || "";
+const parts = path.split(":").filter((part) => part.length > 0);
+parts.unshift("Hauptordner");
 </script>
 
 <template>
-  <div class="breadcrumbs">
-    <NuxtLink to="/admin">Hauptordner</NuxtLink>
-    <span
+  <div class="text-gray-500 text-base mt-12 mb-6 flex items-center gap-1">
+    <div
       v-for="(part, index) in parts"
       :key="index"
+      class="flex items-center gap-1"
     >
-      /
+      <svg
+        v-if="index > 0"
+        xmlns="http://www.w3.org/2000/svg"
+        fill="none"
+        viewBox="0 0 24 24"
+        stroke-width="1.5"
+        stroke="currentColor"
+        class="size-6"
+      >
+        <path
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          d="m8.25 4.5 7.5 7.5-7.5 7.5"
+        />
+      </svg>
       <NuxtLink
         v-if="index < parts.length - 1"
-        :to="`/admin/${parts.slice(0, index + 1).join(':')}`"
+        :to="`/admin/${index > 0 ? parts.slice(1, index + 1).join(':') : ''}`"
+        class="button secondary small"
       >
         {{ part }}
       </NuxtLink>
@@ -24,6 +40,6 @@ defineProps({
       >
         {{ part }}
       </span>
-    </span>
+    </div>
   </div>
 </template>

package/dist/runtime/app/components/content/breadcrumb.vue.d.ts

@@ -1,6 +1,3 @@
-type __VLS_Props = {
-    parts: string[];
-};
-declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/app/components/content/delete.vue

@@ -0,0 +1,69 @@
+<script setup>
+import { navigateTo } from "#app";
+import usePathParam from "../../composables/usePathParam";
+const { path, pathParts } = usePathParam();
+const parentPath = pathParts.slice(0, -1).join(":");
+async function deleteContent() {
+  await fetch(`/api/admin/content/${path}`, {
+    method: "DELETE"
+  });
+  await navigateTo(`/admin/${parentPath}`);
+}
+</script>
+
+<template>
+  <div>
+    <h1 class="text-2xl font-bold mb-4">
+      Datei löschen
+    </h1>
+    <p class="mb-4">
+      Sind Sie sicher, dass Sie
+      <strong>{{ pathParts[pathParts.length - 1] }}</strong>
+      aus
+      <strong>{{ parentPath || "Hauptordner" }}</strong>
+      löschen möchten? Die Datei kann nicht wiederhergestellt werden!
+    </p>
+    <div class="flex gap-2">
+      <NuxtLink
+        :to="`/admin/${parentPath}`"
+        class="button secondary flex-1"
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke-width="1.5"
+          stroke="currentColor"
+          class="size-5"
+        >
+          <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            d="M10.5 19.5 3 12m0 0 7.5-7.5M3 12h18"
+          />
+        </svg>
+        Abbrechen
+      </NuxtLink>
+      <button
+        class="button danger"
+        @click="deleteContent"
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke-width="1.5"
+          stroke="currentColor"
+          class="size-5"
+        >
+          <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0"
+          />
+        </svg>
+        Datei löschen
+      </button>
+    </div>
+  </div>
+</template>

package/dist/runtime/app/components/content/dirs.d.vue.ts

@@ -1,5 +1,4 @@
 type __VLS_Props = {
-    path: string;
     dirs: string[];
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/app/components/content/dirs.vue

@@ -1,21 +1,37 @@
 <script setup>
+import usePathParam from "../../composables/usePathParam";
 defineProps({
-  path: { type: String, required: true },
   dirs: { type: Array, required: true }
 });
+const { path } = usePathParam();
 </script>
 
 <template>
-  <div class="dirs">
+  <div class="flex flex-col gap-2">
     <NuxtLink
       v-for="dir in dirs"
       :key="dir"
       :to="`/admin/${path ? path + ':' : ''}${dir}`"
+      class="button secondary"
     >
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        fill="none"
+        viewBox="0 0 24 24"
+        stroke-width="1.5"
+        stroke="currentColor"
+        class="size-6 opacity-20"
+      >
+        <path
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          d="M3.75 9.776c.112-.017.227-.026.344-.026h15.812c.117 0 .232.009.344.026m-16.5 0a2.25 2.25 0 0 0-1.883 2.542l.857 6a2.25 2.25 0 0 0 2.227 1.932H19.05a2.25 2.25 0 0 0 2.227-1.932l.857-6a2.25 2.25 0 0 0-1.883-2.542m-16.5 0V6A2.25 2.25 0 0 1 6 3.75h3.879a1.5 1.5 0 0 1 1.06.44l2.122 2.12a1.5 1.5 0 0 0 1.06.44H18A2.25 2.25 0 0 1 20.25 9v.776"
+        />
+      </svg>
       <span>
         {{ dir }}
       </span>
-      <span>
+      <span class="ml-auto">
         <svg
           xmlns="http://www.w3.org/2000/svg"
           fill="none"

package/dist/runtime/app/components/content/dirs.vue.d.ts

@@ -1,5 +1,4 @@
 type __VLS_Props = {
-    path: string;
     dirs: string[];
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

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

@@ -0,0 +1,284 @@
+<script setup>
+import { computed, ref } from "vue";
+import useSaveContent from "../../../composables/useSaveContent";
+import { parseSemicolonCsv, serializeSemicolonCsv } from "../../../util/csv";
+import Saved from "../saved.vue";
+const { content, saveContent, isSaving, savingSuccessful } = await useSaveContent();
+const parsedCsv = parseSemicolonCsv(content.value);
+const headers = ref(parsedCsv.headers);
+const rows = ref(parsedCsv.rows);
+const hasUnsavedChanges = ref(false);
+const columnCount = computed(() => headers.value.length);
+async function saveCsv() {
+  const serializedCsv = serializeSemicolonCsv({ headers: headers.value, rows: rows.value });
+  content.value = serializedCsv;
+  await saveContent();
+  hasUnsavedChanges.value = false;
+}
+function getHeaderLabel(colIndex) {
+  return headers.value[colIndex] || `Spalte ${colIndex + 1}`;
+}
+function insertRow(atIndex) {
+  const newRow = Array(columnCount.value).fill("");
+  rows.value.splice(atIndex, 0, newRow);
+  hasUnsavedChanges.value = true;
+}
+function removeRow(rowIndex) {
+  rows.value.splice(rowIndex, 1);
+  hasUnsavedChanges.value = true;
+}
+function moveRowUp(rowIndex) {
+  if (rowIndex <= 0) return;
+  const row = rows.value.splice(rowIndex, 1)[0];
+  if (!row) return;
+  rows.value.splice(rowIndex - 1, 0, row);
+  hasUnsavedChanges.value = true;
+}
+function moveRowDown(rowIndex) {
+  if (rowIndex >= rows.value.length - 1) return;
+  const row = rows.value.splice(rowIndex, 1)[0];
+  if (!row) return;
+  rows.value.splice(rowIndex + 1, 0, row);
+  hasUnsavedChanges.value = true;
+}
+const editingCell = ref(null);
+const editBuffer = ref("");
+function startEdit(rowIndex, colIndex) {
+  editingCell.value = { rowIndex, colIndex };
+  editBuffer.value = rows.value[rowIndex][colIndex] || "";
+}
+function saveEdit() {
+  if (!editingCell.value) return;
+  const { rowIndex, colIndex } = editingCell.value;
+  rows.value[rowIndex][colIndex] = editBuffer.value;
+  hasUnsavedChanges.value = true;
+  cancelEdit();
+}
+function cancelEdit() {
+  editingCell.value = null;
+  editBuffer.value = "";
+}
+</script>
+
+<template>
+  <div class="w-full">
+    <div class="flex items-center gap-2 mb-2.5">
+      <span
+        v-if="headers.length === 0"
+        class="opacity-70 text-sm"
+      >
+        Keine Kopfzeile gefunden. Bitte eine CSV mit Kopfzeile bereitstellen, um Zeilen zu bearbeiten.
+      </span>
+    </div>
+
+    <div class="bg-white">
+      <div class="flex items-center h-0 justify-center border border-gray-200 rounded-sm mb-6">
+        <button
+          type="button"
+          class="button small soft"
+          :disabled="headers.length === 0"
+          @click="insertRow(0)"
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke-width="1.5"
+            stroke="currentColor"
+            class="size-4"
+          >
+            <path
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              d="M12 4.5v15m7.5-7.5h-15"
+            />
+          </svg>
+        </button>
+      </div>
+
+      <div>
+        <template
+          v-for="(r, rowIndex) in rows"
+          :key="rowIndex"
+        >
+          <div
+            class="flex items-stretch rounded-sm border border-gray-200"
+          >
+            <div class="flex-1 min-w-0 overflow-x-auto overflow-y-hidden">
+              <div class="grid grid-flow-col auto-cols-[minmax(160px,1fr)] max-[640px]:auto-cols-[minmax(220px,1fr)]">
+                <div
+                  v-for="(cell, colIndex) in r"
+                  :key="colIndex"
+                  class="p-1.5 border-r border-gray-200 box-border last:border-r-0"
+                >
+                  <div class="text-xs mb-1.5 leading-tight wrap-break-word flex items-center justify-between gap-1">
+                    {{ getHeaderLabel(colIndex) }}
+                  </div>
+                  <div
+                    class="text-xs whitespace-pre-line wrap-break-word border border-gray-300/70 rounded bg-gray-50 p-1.5 min-h-9.5 leading-[1.35] box-border overflow-hidden line-clamp-4 h-[calc(4*1.35*1em+12px)] max-[640px]:line-clamp-3 max-[640px]:h-[calc(3*1.35*1em+12px)] cursor-pointer"
+                    :title="cell"
+                    @click="startEdit(rowIndex, colIndex)"
+                  >
+                    {{ cell || "\u2014" }}
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <div class="flex-none flex flex-col items-start gap-1 p-1.5 border-l border-gray-200 bg-white max-[640px]:px-1 max-[640px]:gap-0.5">
+              <button
+                type="button"
+                class="button small"
+                :disabled="rowIndex === 0"
+                aria-label="Zeile nach oben"
+                title="Nach oben"
+                @click="moveRowUp(rowIndex)"
+              >
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke-width="1.5"
+                  stroke="currentColor"
+                  class="size-4"
+                >
+                  <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    d="M4.5 10.5 12 3m0 0 7.5 7.5M12 3v18"
+                  />
+                </svg>
+              </button>
+              <button
+                type="button"
+                class="button small"
+                :disabled="rowIndex === rows.length - 1"
+                aria-label="Zeile nach unten"
+                title="Nach unten"
+                @click="moveRowDown(rowIndex)"
+              >
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke-width="1.5"
+                  stroke="currentColor"
+                  class="size-4"
+                >
+                  <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    d="M19.5 13.5 12 21m0 0-7.5-7.5M12 21V3"
+                  />
+                </svg>
+              </button>
+              <button
+                type="button"
+                class="button small"
+                aria-label="Zeile löschen"
+                title="Löschen"
+                @click="removeRow(rowIndex)"
+              >
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke-width="1.5"
+                  stroke="currentColor"
+                  class="size-4"
+                >
+                  <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0"
+                  />
+                </svg>
+              </button>
+            </div>
+          </div>
+
+          <div class="h-0 flex items-center justify-center border border-gray-200 rounded-sm my-6">
+            <button
+              type="button"
+              class="button small"
+              :disabled="headers.length === 0"
+              @click="insertRow(rowIndex + 1)"
+            >
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke-width="1.5"
+                stroke="currentColor"
+                class="size-4"
+              >
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  d="M12 4.5v15m7.5-7.5h-15"
+                />
+              </svg>
+            </button>
+          </div>
+        </template>
+      </div>
+    </div>
+
+    <button
+      type="button"
+      class="button w-full mt-3 justify-center"
+      @click="saveCsv"
+    >
+      <span v-if="isSaving">Speichern...</span>
+      <span v-else>Speichern</span>
+    </button>
+    <Saved v-if="savingSuccessful && !hasUnsavedChanges" />
+
+    <div
+      v-if="editingCell"
+      class="fixed inset-0 bg-black/45 flex items-center justify-center p-4 z-9999"
+      role="presentation"
+      @click.self="cancelEdit()"
+    >
+      <div
+        class="w-full max-w-180 bg-white rounded-[10px] border border-black/10 shadow-[0_10px_40px_rgba(0,0,0,0.28)] p-3.5 flex flex-col gap-2.5"
+        role="dialog"
+        aria-modal="true"
+        :aria-label="`CSV-Zelle bearbeiten: ${getHeaderLabel(editingCell.colIndex)}`"
+      >
+        <div class="flex flex-col gap-0.5">
+          <div class="font-bold">
+            Zelle bearbeiten
+          </div>
+          <div class="opacity-75 text-[13px]">
+            {{ getHeaderLabel(editingCell.colIndex) }} · Zeile {{ editingCell.rowIndex + 1 }}
+          </div>
+        </div>
+
+        <textarea
+          id="csv-edit-textarea"
+          v-model="editBuffer"
+          class="w-full box-border p-2.5 border border-gray-300 rounded-lg resize-y min-h-40 font-[inherit] focus:outline-none focus:ring-2 focus:ring-emerald-500/30"
+          rows="8"
+        />
+
+        <div class="flex justify-end gap-2">
+          <button
+            type="button"
+            class="button"
+            @click="saveEdit()"
+          >
+            schließen
+          </button>
+          <button
+            type="button"
+            class="button secondary"
+            @click="cancelEdit()"
+          >
+            zurücksetzen
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>

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

@@ -0,0 +1,27 @@
+<script setup>
+import usePathParam from "../../../composables/usePathParam";
+const { path } = usePathParam();
+</script>
+
+<template>
+  <div>
+    <button
+      class="button secondary w-full justify-center mb-2"
+      type="button"
+    >
+      Link kopieren
+    </button>
+    <button
+      class="button w-full justify-center mb-4"
+      type="button"
+    >
+      Bild austauschen
+    </button>
+
+    <img
+      :src="`/api/admin/content/${path}`"
+      alt="Image Preview"
+      class="w-full h-auto border border-gray-200 rounded-sm p-1"
+    >
+  </div>
+</template>

package/dist/runtime/app/components/content/editor/{text/markdown.vue → markdown.vue}

@@ -1,7 +1,9 @@
 <script setup>
 import { computed, ref } from "vue";
 import { marked } from "marked";
-const content = defineModel("content", { type: String, ...{ default: "" } });
+import useSaveContent from "../../../composables/useSaveContent";
+import Saved from "../saved.vue";
+const { content, saveContent, isSaving, savingSuccessful } = await useSaveContent();
 const mode = ref("edit");
 function escapeHtml(value) {
   return (value ?? "").replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
@@ -25,7 +27,7 @@ const renderedHtml = computed(() => {
     const text = this.parser.parseInline(token.tokens);
     if (!safe) return text;
     const t = token.title ? ` title="${escapeHtml(token.title)}"` : "";
-    const target = safe.startsWith("http") ? ' target="_blank" rel="noopener noreferrer"' : "";
+    const target = ' target="_blank" rel="noopener noreferrer"';
     return `<a href="${escapeHtml(safe)}"${t}${target}>${text}</a>`;
   };
   renderer.image = function(token) {
@@ -44,26 +46,46 @@ const renderedHtml = computed(() => {
 </script>
 
 <template>
-  <div style="width: 100%;">
-    <div style="display: flex; gap: 8px; margin-bottom: 10px; align-items: center;">
+  <div>
+    <div class="flex gap-2 mb-2">
       <button
         type="button"
-        @click="mode = mode === 'edit' ? 'preview' : 'edit'"
+        class="button secondary flex-1"
+        :disabled="mode === 'edit'"
+        @click="mode = 'edit'"
       >
-        {{ mode === "edit" ? "Vorschau" : "Bearbeiten" }}
+        Bearbeiten
+      </button>
+      <button
+        type="button"
+        class="button secondary flex-1"
+        :disabled="mode === 'preview'"
+        @click="mode = 'preview'"
+      >
+        Vorschau
       </button>
     </div>
 
     <textarea
       v-if="mode === 'edit'"
       v-model="content"
-      style="width: 100%; height: 400px; resize: vertical; border: 1px solid #d0d0d0; padding: 10px; box-sizing: border-box;"
+      class="w-full min-h-72"
     />
 
     <div
       v-else
-      style="width: 100%; min-height: 400px; border: 1px solid #d0d0d0; padding: 10px; box-sizing: border-box; overflow: auto;"
+      class="prose max-w-full min-h-72 border border-gray-200 rounded-sm p-4"
       v-html="renderedHtml"
     />
+
+    <button
+      type="button"
+      class="button w-full justify-center mt-3"
+      @click="saveContent"
+    >
+      <span v-if="isSaving">Speichern...</span>
+      <span v-else>Speichern</span>
+    </button>
+    <Saved v-if="savingSuccessful" />
   </div>
 </template>

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

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,26 @@
+<script setup>
+import usePathParam from "../../../composables/usePathParam";
+const { path } = usePathParam();
+</script>
+
+<template>
+  <div>
+    <button
+      class="button secondary w-full justify-center mb-2"
+      type="button"
+    >
+      Link kopieren
+    </button>
+    <button
+      class="button w-full justify-center mb-4"
+      type="button"
+    >
+      PDF austauschen
+    </button>
+    <embed
+      :src="`/api/admin/content/${path}`"
+      type="application/pdf"
+      class="w-full h-auto aspect-[5.5/8] border border-gray-200 rounded-sm"
+    >
+  </div>
+</template>