@xleddyl/nuxt-cms 0.1.9 → 0.1.11

package/README.md

@@ -6,7 +6,67 @@ nuxt-cms is a Nuxt module that leverages the Nitro server to ship a lightweight
 - **Content types in code**: a `cms.config.ts` with `defineCmsConfig()` declares collections, single documents, relations, blocks and translatable fields; database schema, migrations and TypeScript types are generated from it.
 - **Admin panel at `/cms`**: entry editing with validation, drafts, media library (S3-compatible storage), single-admin auth from env credentials.
 - **Public GraphQL API**: read-only, typed end-to-end via gql.tada, with filtering, sorting and pagination.
-- **SQLite or Postgres**: a local file database by default, one config line to switch.
+- **SQLite, Postgres or libSQL/Turso**: a local file database by default, one config line to switch (including remote SQLite over the network).
+
+## Installation
+
+```bash
+npm install @xleddyl/nuxt-cms
+```
+
+Register the module and configure it under the `cms` key in `nuxt.config.ts`:
+
+```ts
+export default defineNuxtConfig({
+   modules: ['@xleddyl/nuxt-cms'],
+   cms: {
+      database: {
+         driver: 'sqlite', // 'sqlite' | 'postgres' (with `url`) | 'libsql' (Turso/remote, with `url` + `authToken`)
+         path: 'data/cms.db',
+      },
+      i18n: {
+         locales: ['en', 'it'],
+         defaultLocale: 'en',
+      },
+   },
+})
+```
+
+Then declare your content types in a `cms.config.ts` at the project root with `defineCmsConfig()`.
+
+### Environment variables
+
+Every secret maps to runtime config, so it can be set as an env var instead of in `nuxt.config.ts`:
+
+| Variable | Required | Purpose |
+| --- | --- | --- |
+| `NUXT_CMS_ADMIN_EMAIL` | yes | admin login email |
+| `NUXT_CMS_ADMIN_PASSWORD` | yes | admin login password |
+| `NUXT_SESSION_PASSWORD` | in production | session encryption key (32+ chars) |
+| `NUXT_CMS_DATABASE_URL` | with `postgres` / remote `libsql` | Postgres connection string or libSQL URL |
+| `NUXT_CMS_DATABASE_AUTH_TOKEN` | with remote `libsql` | libSQL/Turso auth token |
+| `NUXT_CMS_MEDIA_ENDPOINT` | for media | S3-compatible endpoint |
+| `NUXT_CMS_MEDIA_REGION` | for media | S3 region (default `auto`) |
+| `NUXT_CMS_MEDIA_BUCKET` | for media | bucket name |
+| `NUXT_CMS_MEDIA_ACCESS_KEY_ID` | for media | S3 access key id |
+| `NUXT_CMS_MEDIA_SECRET_ACCESS_KEY` | for media | S3 secret access key |
+| `NUXT_PUBLIC_CMS_MEDIA_BASE_URL` | for media | public base URL for uploaded files |
+
+## Documentation
+
+Full documentation lives in [`docs/`](docs/README.md):
+
+- [Getting started](docs/getting-started.md) — install, configure, first content type, run.
+- [Configuration](docs/configuration.md) — every `cms.*` option and the `NUXT_CMS_*` env vars.
+- [Database](docs/database.md) — SQLite, Postgres and libSQL/Turso drivers, migrations, studio.
+- [Schema](docs/schema.md) — `defineCmsConfig`, entries, field types, relations, blocks, i18n.
+- [Querying content](docs/querying.md) — GraphQL API, `useCms` / `$cmsQuery`, filters, sorting, pagination.
+- [Admin panel & security](docs/admin.md) — pages, authentication, sessions, admin REST API.
+- [Media](docs/media.md) — S3-compatible storage, upload flow, allowed file types.
+
+## LLM guide
+
+[llm.txt](llm.txt) is a compact reference meant to be fed to an LLM: schema definition (`cms.config.ts`, field types, relations, blocks, i18n), the `useCms` / `$cmsQuery` composables and the generated GraphQL API (filters, sorting, pagination).
 
 ## Development
 

package/dist/module.d.mts

@@ -1,6 +1,7 @@
 import * as _nuxt_schema from '@nuxt/schema';
 
 type Dialect = 'sqlite' | 'postgres';
+type Driver = Dialect | 'libsql';
 
 interface ModuleOptions {
     configPath: string;
@@ -9,9 +10,10 @@ interface ModuleOptions {
         password: string;
     };
     database: {
-        driver?: Dialect;
+        driver?: Driver;
         path?: string;
         url?: string;
+        authToken?: string;
     };
     media: {
         endpoint: string;

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "@xleddyl/nuxt-cms",
   "configKey": "cms",
-  "version": "0.1.9",
+  "version": "0.1.11",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "unknown"

package/dist/module.mjs

@@ -424,7 +424,8 @@ const module$1 = defineNuxtModule({
     database: {
       driver: "sqlite",
       path: "data/cms.db",
-      url: ""
+      url: "",
+      authToken: ""
     },
     media: {
       endpoint: "",
@@ -481,7 +482,11 @@ const module$1 = defineNuxtModule({
     const schemaTemplate = addTemplate({
       filename: "cms/schema.ts",
       write: true,
-      getContents: () => renderSchemaFile(cmsConfig, options.database.driver ?? "sqlite", resolveImport)
+      getContents: () => renderSchemaFile(
+        cmsConfig,
+        options.database.driver === "postgres" ? "postgres" : "sqlite",
+        resolveImport
+      )
     });
     nuxt.options.alias["#cms-tables"] = schemaTemplate.dst;
     addTemplate({
@@ -552,11 +557,16 @@ const module$1 = defineNuxtModule({
         ]
       });
     });
-    const { driver = "sqlite", path: dbPath = "data/cms.db", url: databaseUrl = "" } = options.database;
+    const {
+      driver = "sqlite",
+      path: dbPath = "data/cms.db",
+      url: databaseUrl = "",
+      authToken: databaseAuthToken = ""
+    } = options.database;
     nuxt.options.alias["#cms-db"] = resolver.resolve(
-      driver === "postgres" ? "./runtime/server/utils/db-postgres" : "./runtime/server/utils/db-sqlite"
+      driver === "postgres" ? "./runtime/server/utils/db-postgres" : driver === "libsql" ? "./runtime/server/utils/db-libsql" : "./runtime/server/utils/db-sqlite"
     );
-    const dialect = driver === "postgres" ? "postgresql" : "sqlite";
+    const dialect = driver === "postgres" ? "postgresql" : driver === "libsql" ? "turso" : "sqlite";
     const resolvedDbPath = isAbsolute(dbPath) ? dbPath : resolve(nuxt.options.rootDir, dbPath);
     const migrationsDir = resolve(nuxt.options.rootDir, `server/db/migrations/${driver}`);
     const relativeSchemaPath = relative(nuxt.options.rootDir, schemaTemplate.dst);
@@ -570,14 +580,14 @@ const module$1 = defineNuxtModule({
         `  dialect: '${dialect}',`,
         `  schema: '${toPosix(schemaTemplate.dst)}',`,
         `  out: '${toPosix(migrationsDir)}',`,
-        driver === "postgres" ? `  dbCredentials: { url: process.env.NUXT_CMS_DATABASE_URL ?? '${databaseUrl}' },` : `  dbCredentials: { url: '${toPosix(resolvedDbPath)}' },`,
+        driver === "postgres" ? `  dbCredentials: { url: process.env.NUXT_CMS_DATABASE_URL ?? '${databaseUrl}' },` : driver === "libsql" ? `  dbCredentials: { url: process.env.NUXT_CMS_DATABASE_URL ?? '${databaseUrl || `file:${toPosix(resolvedDbPath)}`}', authToken: process.env.NUXT_CMS_DATABASE_AUTH_TOKEN ?? '${databaseAuthToken}' || undefined },` : `  dbCredentials: { url: '${toPosix(resolvedDbPath)}' },`,
         `}`,
         ``
       ].join("\n")
     });
     addServerPlugin(
       resolver.resolve(
-        driver === "postgres" ? "./runtime/server/plugins/migrate-postgres" : "./runtime/server/plugins/migrate-sqlite"
+        driver === "postgres" ? "./runtime/server/plugins/migrate-postgres" : driver === "libsql" ? "./runtime/server/plugins/migrate-libsql" : "./runtime/server/plugins/migrate-sqlite"
       )
     );
     if (!nuxt.options.dev) {
@@ -608,6 +618,7 @@ const module$1 = defineNuxtModule({
       adminEmail: options.admin.email,
       adminPassword: options.admin.password,
       databaseUrl,
+      databaseAuthToken,
       dbPath: resolvedDbPath,
       migrationsDir,
       ...existingConfig,

package/dist/runtime/app/components/cms/BlocksField.vue

@@ -6,14 +6,26 @@
          class="cms-card flex flex-col gap-4 p-4"
       >
          <div class="flex items-center gap-1">
-            <span class="cms-kicker grow">
+            <button
+               type="button"
+               class="cms-kicker flex grow items-center gap-1.5 text-left"
+               :aria-label="
+  isCollapsed(item) ? t('cms.form.expandBlock') : t('cms.form.collapseBlock')
+"
+               @click="toggleCollapsed(item)"
+            >
+               <UIcon
+                  :name="isCollapsed(item) ? 'i-lucide-chevron-right' : 'i-lucide-chevron-down'"
+                  class="size-3.5"
+               />
                {{ blocks[item.type]?.label ?? item.type }}
-            </span>
+            </button>
             <UButton
                icon="i-lucide-chevron-up"
                size="xs"
                variant="ghost"
                color="neutral"
+               :aria-label="t('cms.form.moveUp')"
                :disabled="index === 0"
                @click="move(index, -1)"
             />
@@ -22,30 +34,42 @@
                size="xs"
                variant="ghost"
                color="neutral"
+               :aria-label="t('cms.form.moveDown')"
                :disabled="index === items.length - 1"
                @click="move(index, 1)"
             />
+            <UButton
+               icon="i-lucide-copy"
+               size="xs"
+               variant="ghost"
+               color="neutral"
+               :aria-label="t('cms.form.duplicateBlock')"
+               @click="duplicate(index)"
+            />
             <UButton
                icon="i-lucide-trash-2"
                size="xs"
                variant="ghost"
                color="error"
+               :aria-label="t('cms.form.removeBlock')"
                @click="remove(index)"
             />
          </div>
-         <UFormField
-            v-for="(blockField, blockKey) in blocks[item.type]?.fields"
-            :key="blockKey"
-            :label="blockField.label"
-            :required="blockField.required"
-            :ui="CMS_FIELD_UI"
-         >
-            <CmsFieldInput
-               :model-value="item[blockKey]"
-               :field="blockField"
-               @update:model-value="(value) => updateField(index, blockKey, value)"
-            />
-         </UFormField>
+         <template v-if="!isCollapsed(item)">
+            <UFormField
+               v-for="(blockField, blockKey) in blocks[item.type]?.fields"
+               :key="blockKey"
+               :label="blockField.label"
+               :required="blockField.required"
+               :ui="CMS_FIELD_UI"
+            >
+               <CmsFieldInput
+                  :model-value="item[blockKey]"
+                  :field="blockField"
+                  @update:model-value="(value) => updateField(index, blockKey, value)"
+               />
+            </UFormField>
+         </template>
       </div>
       <UDropdownMenu :items="addItems">
          <UButton
@@ -59,7 +83,7 @@
 </template>
 
 <script setup>
-import { computed, useI18n } from "#imports";
+import { computed, ref, useI18n } from "#imports";
 import { CMS_FIELD_UI } from "../../utils/ui";
 const props = defineProps({
   field: { type: Object, required: true }
@@ -95,6 +119,25 @@ function remove(index) {
   const next = items.value.filter((_, i) => i !== index);
   model.value = next.length ? next : null;
 }
+function duplicate(index) {
+  const current = items.value[index];
+  if (!current) return;
+  const copy = JSON.parse(JSON.stringify(current));
+  const next = [...items.value];
+  next.splice(index + 1, 0, copy);
+  model.value = next;
+}
+const collapsedUids = ref(/* @__PURE__ */ new Set());
+function isCollapsed(item) {
+  return collapsedUids.value.has(uidFor(item));
+}
+function toggleCollapsed(item) {
+  const uid = uidFor(item);
+  const next = new Set(collapsedUids.value);
+  if (next.has(uid)) next.delete(uid);
+  else next.add(uid);
+  collapsedUids.value = next;
+}
 function move(index, delta) {
   const next = [...items.value];
   const [item] = next.splice(index, 1);

package/dist/runtime/app/components/cms/ConfirmModal.d.vue.ts

@@ -0,0 +1,20 @@
+type __VLS_Props = {
+    message: string;
+    title?: string;
+    confirmLabel?: string;
+};
+type __VLS_ModelProps = {
+    'open'?: boolean;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    close: (value: boolean) => any;
+    "after:leave": () => any;
+    "update:open": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onClose?: ((value: boolean) => any) | undefined;
+    "onAfter:leave"?: (() => any) | undefined;
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/app/components/cms/ConfirmModal.vue

@@ -0,0 +1,43 @@
+<template>
+   <UModal
+      v-model:open="open"
+      :title="title ?? t('cms.confirm.title')"
+      :ui="ui"
+      @after:leave="emit('after:leave')"
+   >
+      <template #body>
+         <div class="flex flex-col gap-5">
+            <p class="text-(--ui-text) text-sm">{{ message }}</p>
+            <div class="flex justify-end gap-2">
+               <UButton
+                  :label="t('cms.confirm.cancel')"
+                  variant="subtle"
+                  color="neutral"
+                  class="rounded-full px-4"
+                  @click="emit('close', false)"
+               />
+               <UButton
+                  :label="confirmLabel ?? t('cms.confirm.confirm')"
+                  color="error"
+                  class="rounded-full px-4"
+                  @click="emit('close', true)"
+               />
+            </div>
+         </div>
+      </template>
+   </UModal>
+</template>
+
+<script setup>
+import { useI18n } from "#imports";
+import { CMS_MODAL_UI } from "../../utils/ui";
+defineProps({
+  message: { type: String, required: true },
+  title: { type: String, required: false },
+  confirmLabel: { type: String, required: false }
+});
+const open = defineModel("open", { type: Boolean, ...{ default: true } });
+const emit = defineEmits(["close", "after:leave"]);
+const { t } = useI18n();
+const ui = { ...CMS_MODAL_UI, content: "rounded-2xl shadow-xl sm:max-w-md" };
+</script>

package/dist/runtime/app/components/cms/ConfirmModal.vue.d.ts

@@ -0,0 +1,20 @@
+type __VLS_Props = {
+    message: string;
+    title?: string;
+    confirmLabel?: string;
+};
+type __VLS_ModelProps = {
+    'open'?: boolean;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    close: (value: boolean) => any;
+    "after:leave": () => any;
+    "update:open": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onClose?: ((value: boolean) => any) | undefined;
+    "onAfter:leave"?: (() => any) | undefined;
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/app/components/cms/MediaGallery.vue

@@ -86,7 +86,7 @@
                />
                <div
                   v-if="!selectable"
-                  class="absolute right-2 top-2 flex gap-1 opacity-0 transition-opacity group-hover:opacity-100"
+                  class="absolute right-2 top-2 flex gap-1 opacity-0 transition-opacity focus-within:opacity-100 group-hover:opacity-100"
                >
                   <UButton
                      icon="i-lucide-pencil"
@@ -187,6 +187,7 @@
 <script setup>
 import { computed, onMounted, ref, useI18n, useToast } from "#imports";
 import { MEDIA_TYPES, mediaFilename, mediaIconFor } from "#nuxt-cms";
+import { useCmsConfirm } from "../../composables/cms-confirm";
 import { CMS_MODAL_UI, errorMessage } from "../../utils/ui";
 const props = defineProps({
   selectable: { type: Boolean, required: false },
@@ -293,8 +294,12 @@ async function copy(item) {
     toast.add({ title: t("cms.media.copyError"), color: "error" });
   }
 }
+const confirmAction = useCmsConfirm();
+const removing = ref(false);
 async function remove(item) {
-  if (!confirm(t("cms.media.deleteConfirm"))) return;
+  if (removing.value) return;
+  if (!await confirmAction(t("cms.media.deleteConfirm"))) return;
+  removing.value = true;
   try {
     await $fetch(endpoint, { method: "DELETE", query: { key: item.key } });
     await reload();
@@ -304,6 +309,8 @@ async function remove(item) {
       description: errorMessage(err),
       color: "error"
     });
+  } finally {
+    removing.value = false;
   }
 }
 </script>

package/dist/runtime/app/components/cms/RelationField.vue

@@ -2,7 +2,9 @@
    <USelectMenu
       v-if="multiple"
       v-model="many"
+      v-model:search-term="searchTerm"
       multiple
+      ignore-filter
       :items="options"
       value-key="value"
       :loading="loading"
@@ -12,6 +14,8 @@
    <USelectMenu
       v-else
       v-model="single"
+      v-model:search-term="searchTerm"
+      ignore-filter
       :items="singleItems"
       value-key="value"
       :loading="loading"
@@ -22,7 +26,7 @@
 
 <script setup>
 import { isTranslatableField } from "#nuxt-cms";
-import { computed, onMounted, ref, useI18n, useToast } from "#imports";
+import { computed, onMounted, ref, useI18n, useToast, watch } from "#imports";
 import cmsConfig from "#cms-config";
 import { useCmsRuntime } from "../../composables/cms-runtime";
 import { errorMessage } from "../../utils/ui";
@@ -35,11 +39,19 @@ const model = defineModel({ type: [String, Array, null], ...{ required: true } }
 const { t } = useI18n();
 const toast = useToast();
 const target = cmsConfig[props.to];
-const rows = ref([]);
+const endpoint = `/api/cms/admin/${props.to}`;
+const fetched = ref([]);
+const selectedRows = ref(/* @__PURE__ */ new Map());
 const loading = ref(true);
-onMounted(async () => {
+const searchTerm = ref("");
+async function fetchOptions() {
+  loading.value = true;
   try {
-    rows.value = await $fetch(`/api/cms/admin/${props.to}`);
+    const term = searchTerm.value.trim();
+    const page = await $fetch(endpoint, {
+      query: { light: "true", limit: 25, ...term ? { search: term } : {} }
+    });
+    fetched.value = page.items;
   } catch (err) {
     toast.add({
       title: t("cms.toast.loadFailed"),
@@ -49,6 +61,31 @@ onMounted(async () => {
   } finally {
     loading.value = false;
   }
+}
+let searchTimer;
+watch(searchTerm, () => {
+  clearTimeout(searchTimer);
+  searchTimer = setTimeout(() => void fetchOptions(), 300);
+});
+const selectedIds = computed(() => {
+  if (props.multiple) return model.value ?? [];
+  return model.value ? [model.value] : [];
+});
+async function resolveSelected() {
+  const missing = selectedIds.value.filter((id) => !selectedRows.value.has(id));
+  await Promise.all(
+    missing.map(async (id) => {
+      try {
+        const row = await $fetch(`${endpoint}/${id}`);
+        selectedRows.value.set(id, row);
+      } catch {
+      }
+    })
+  );
+}
+onMounted(() => {
+  void fetchOptions();
+  void resolveSelected();
 });
 const { i18n: contentI18n } = useCmsRuntime();
 const titleField = target?.titleField ?? "id";
@@ -62,12 +99,21 @@ function optionLabel(row) {
   }
   return String(value ?? `#${row.id}`);
 }
-const options = computed(
-  () => rows.value.map((row) => ({
-    label: optionLabel(row),
-    value: row.id
-  }))
-);
+const options = computed(() => {
+  const seen = /* @__PURE__ */ new Set();
+  const list = [];
+  for (const row of fetched.value) {
+    const id = row.id;
+    list.push({ label: optionLabel(row), value: id });
+    seen.add(id);
+  }
+  for (const id of selectedIds.value) {
+    if (seen.has(id)) continue;
+    const row = selectedRows.value.get(id);
+    list.push({ label: row ? optionLabel(row) : `#${id}`, value: id });
+  }
+  return list;
+});
 const singleItems = computed(() => [
   ...props.required ? [] : [{ label: "\u2014", value: null }],
   ...options.value

package/dist/runtime/app/components/cms/RichTextField.vue

@@ -8,14 +8,48 @@
             size="xs"
             :variant="editor?.isActive(action.mark, action.attrs) ? 'soft' : 'ghost'"
             color="neutral"
+            :aria-label="t(action.label)"
+            :title="t(action.label)"
             @click="action.run"
          />
+         <UPopover v-model:open="linkOpen">
+            <UButton
+               icon="i-lucide-link"
+               size="xs"
+               :variant="editor?.isActive('link') ? 'soft' : 'ghost'"
+               color="neutral"
+               :aria-label="t('cms.richtext.link')"
+               :title="t('cms.richtext.link')"
+            />
+            <template #content>
+               <div class="flex items-center gap-2 p-2">
+                  <UInput
+                     v-model="linkUrl"
+                     size="sm"
+                     placeholder="https://"
+                     class="w-64"
+                     @keydown.enter.prevent="applyLink"
+                  />
+                  <UButton size="xs" :label="t('cms.richtext.setLink')" @click="applyLink" />
+                  <UButton
+                     v-if="editor?.isActive('link')"
+                     size="xs"
+                     variant="subtle"
+                     color="error"
+                     :label="t('cms.richtext.unsetLink')"
+                     @click="removeLink"
+                  />
+               </div>
+            </template>
+         </UPopover>
          <span class="grow" />
          <UButton
             icon="i-lucide-undo-2"
             size="xs"
             variant="ghost"
             color="neutral"
+            :aria-label="t('cms.richtext.undo')"
+            :title="t('cms.richtext.undo')"
             :disabled="!editor?.can().undo()"
             @click="undo"
          />
@@ -24,6 +58,8 @@
             size="xs"
             variant="ghost"
             color="neutral"
+            :aria-label="t('cms.richtext.redo')"
+            :title="t('cms.richtext.redo')"
             :disabled="!editor?.can().redo()"
             @click="redo"
          />
@@ -35,11 +71,12 @@
 <script setup>
 import StarterKit from "@tiptap/starter-kit";
 import { EditorContent, useEditor } from "@tiptap/vue-3";
-import { watch } from "#imports";
+import { ref, useI18n, watch } from "#imports";
 const model = defineModel({ type: [String, null], ...{ required: true } });
+const { t } = useI18n();
 const editor = useEditor({
   content: model.value ?? "",
-  extensions: [StarterKit],
+  extensions: [StarterKit.configure({ link: { openOnClick: false } })],
   editorProps: {
     attributes: { class: "cms-richtext-body" }
   },
@@ -58,6 +95,7 @@ const actions = [
   {
     icon: "i-lucide-bold",
     mark: "bold",
+    label: "cms.richtext.bold",
     run: () => {
       editor.value?.chain().focus().toggleBold().run();
     }
@@ -65,6 +103,7 @@ const actions = [
   {
     icon: "i-lucide-italic",
     mark: "italic",
+    label: "cms.richtext.italic",
     run: () => {
       editor.value?.chain().focus().toggleItalic().run();
     }
@@ -72,6 +111,7 @@ const actions = [
   {
     icon: "i-lucide-strikethrough",
     mark: "strike",
+    label: "cms.richtext.strike",
     run: () => {
       editor.value?.chain().focus().toggleStrike().run();
     }
@@ -80,6 +120,7 @@ const actions = [
     icon: "i-lucide-heading-2",
     mark: "heading",
     attrs: { level: 2 },
+    label: "cms.richtext.h2",
     run: () => {
       editor.value?.chain().focus().toggleHeading({ level: 2 }).run();
     }
@@ -88,6 +129,7 @@ const actions = [
     icon: "i-lucide-heading-3",
     mark: "heading",
     attrs: { level: 3 },
+    label: "cms.richtext.h3",
     run: () => {
       editor.value?.chain().focus().toggleHeading({ level: 3 }).run();
     }
@@ -95,6 +137,7 @@ const actions = [
   {
     icon: "i-lucide-list",
     mark: "bulletList",
+    label: "cms.richtext.bulletList",
     run: () => {
       editor.value?.chain().focus().toggleBulletList().run();
     }
@@ -102,6 +145,7 @@ const actions = [
   {
     icon: "i-lucide-list-ordered",
     mark: "orderedList",
+    label: "cms.richtext.orderedList",
     run: () => {
       editor.value?.chain().focus().toggleOrderedList().run();
     }
@@ -109,11 +153,28 @@ const actions = [
   {
     icon: "i-lucide-text-quote",
     mark: "blockquote",
+    label: "cms.richtext.blockquote",
     run: () => {
       editor.value?.chain().focus().toggleBlockquote().run();
     }
   }
 ];
+const linkOpen = ref(false);
+const linkUrl = ref("");
+watch(linkOpen, (open) => {
+  if (open) linkUrl.value = editor.value?.getAttributes("link").href ?? "";
+});
+function applyLink() {
+  const url = linkUrl.value.trim();
+  const chain = editor.value?.chain().focus().extendMarkRange("link");
+  if (url) chain?.setLink({ href: url }).run();
+  else chain?.unsetLink().run();
+  linkOpen.value = false;
+}
+function removeLink() {
+  editor.value?.chain().focus().extendMarkRange("link").unsetLink().run();
+  linkOpen.value = false;
+}
 function undo() {
   editor.value?.chain().focus().undo().run();
 }