@hywax/cms 0.0.5 → 0.0.7

package/.nuxt/cms/editor/callout.ts

@@ -0,0 +1,21 @@
+export default {
+  "slots": {
+    "root": "px-4 py-3 text-sm/6 rounded-md border flex gap-2"
+  },
+  "variants": {
+    "type": {
+      "caution": {
+        "root": "border border-error/25 bg-error/10 text-error-600 dark:text-error-300"
+      },
+      "note": {
+        "root": "border border-info/25 bg-info/10 text-info-600 dark:text-info-300"
+      },
+      "warning": {
+        "root": "border border-warning/25 bg-warning/10 text-warning-600 dark:text-warning-300"
+      },
+      "tip": {
+        "root": "border border-success/25 bg-success/10 text-success-600 dark:text-success-300"
+      }
+    }
+  }
+}

package/.nuxt/cms/editor/index.ts

@@ -0,0 +1,2 @@
+export { default as callout } from './callout'
+export { default as uploraImage } from './uplora-image'

package/.nuxt/cms/editor/uplora-image.ts

@@ -0,0 +1,5 @@
+export default {
+  "slots": {
+    "root": ""
+  }
+}

package/.nuxt/cms/editor-content-full.ts

@@ -0,0 +1,6 @@
+export default {
+  "slots": {
+    "root": "h-full w-full relative",
+    "editor": "min-h-full w-full focus:outline-none editor-content-full relative"
+  }
+}

package/.nuxt/cms/editor-content-light.ts

@@ -0,0 +1,6 @@
+export default {
+  "slots": {
+    "root": "relative",
+    "editor": "w-full focus:outline-none editor-content-light relative"
+  }
+}

package/.nuxt/cms/index.ts

@@ -2,11 +2,14 @@ export { default as autocompleteSelect } from './autocomplete-select'
 export { default as buttonClear } from './button-clear'
 export { default as buttonCopy } from './button-copy'
 export { default as buttonDelete } from './button-delete'
+export { default as editorContentFull } from './editor-content-full'
+export { default as editorContentLight } from './editor-content-light'
 export { default as formPanel } from './form-panel'
 export { default as formPanelAsideSection } from './form-panel-aside-section'
 export { default as formPanelSection } from './form-panel-section'
 export { default as inputSeo } from './input-seo'
 export { default as inputSlug } from './input-slug'
+export { default as inputUploraImage } from './input-uplora-image'
 export { default as modalConfirm } from './modal-confirm'
 export { default as tableCellPreview } from './table-cell-preview'
 export { default as tableCellSeo } from './table-cell-seo'

package/.nuxt/cms/input-uplora-image.ts

@@ -0,0 +1,15 @@
+export default {
+  "slots": {
+    "root": "relative w-full rounded-md overflow-hidden border border-default aspect-3/2 text-sm",
+    "image": "",
+    "imageActions": "absolute top-4 right-4 flex gap-2",
+    "uploader": "flex flex-col items-center justify-center w-full h-full p-4",
+    "uploaderPendingIcon": "size-6 animate-spin",
+    "uploaderIdleButton": "cursor-pointer bg-muted/50 border border-default border-dashed rounded-md h-full w-full",
+    "uploaderIdleIcon": "size-10 text-primary",
+    "uploaderIdleText": "mt-2 font-medium",
+    "uploaderIdleExtensions": "mt-2 text-xs text-muted uppercase",
+    "uploaderErrorText": "text-center font-medium",
+    "uploaderErrorActions": "flex gap-2 mt-4"
+  }
+}

package/cli/templates.mjs

@@ -66,16 +66,16 @@ import { describe, expect, it } from 'vitest'
 import ${upperName} from '../../../src/runtime/components/${upperName}.vue'
 import ComponentRender from '../../component-render'
 
-describe('${upperName}', () => {
+describe('${upperName}.vue', () => {
   it.each([
     // Props
-    ['базовый компонент', { props: {} }],
-    ['с алиасом', { props: { as: 'section' } }],
-    ['с class', { props: { class: '' } }],
-    ['с ui', { props: { ui: {} } }],
+    ['base component', { props: {} }],
+    ['with as', { props: { as: 'section' } }],
+    ['with class', { props: { class: '' } }],
+    ['with ui', { props: { ui: {} } }],
     // Slots
-    ['с дефолтным слотом', { slots: { default: () => 'Default slot' } }]
-  ])('рендерит %s корректно', async (nameOrHtml: string, options: { props?: ${upperName}Props, slots?: Partial<${upperName}Slots> }) => {
+    ['with default slot', { slots: { default: () => 'Default slot' } }],
+  ])('renders %s correctly', async (nameOrHtml: string, options: { props?: ${upperName}Props, slots?: Partial<${upperName}Slots> }) => {
     const html = await ComponentRender(nameOrHtml, options, ${upperName})
     expect(html).toMatchSnapshot()
   })

package/dist/module.d.mts

@@ -35,6 +35,7 @@ declare module '@nuxt/schema' {
             fluxorUrl: string;
             version: string;
         };
+        uploraApiKey: string;
     }
 }
 

package/dist/module.json

@@ -1,6 +1,6 @@
 {
   "name": "@hywax/cms",
-  "version": "0.0.5",
+  "version": "0.0.7",
   "configKey": "cms",
   "builder": {
     "@nuxt/module-builder": "1.0.1",

package/dist/module.mjs

@@ -1,11 +1,12 @@
-import { createResolver, addComponentsDir, addImportsDir, addPlugin, addImports, addServerImports, addServerImportsDir, addTypeTemplate, addTemplate, addServerTemplate, defineNuxtModule, hasNuxtModule, installModule } from '@nuxt/kit';
-import { defu } from 'defu';
+import { createResolver, addComponentsDir, addImportsDir, addPlugin, addImports, addServerImports, addServerImportsDir, hasNuxtModule, installModule, addServerHandler, addTypeTemplate, addTemplate, addServerTemplate, defineNuxtModule } from '@nuxt/kit';
 import { fileURLToPath } from 'node:url';
-import { dirname } from 'pathe';
+import { dirname, join } from 'pathe';
+import { defu } from 'defu';
 import { snakeCase, kebabCase } from 'scule';
+import { readFile, writeFile } from 'node:fs/promises';
 
 const name = "@hywax/cms";
-const version = "0.0.5";
+const version = "0.0.7";
 
 function createContext(options, nuxt) {
   const { resolve } = createResolver(import.meta.url);
@@ -20,9 +21,7 @@ function createContext(options, nuxt) {
   };
 }
 
-function getDefaultCMSConfig() {
-  return {};
-}
+const defaultCMSConfig = {};
 const defaultModuleOptions = {
   name: "cms",
   prefix: "C",
@@ -77,6 +76,115 @@ function prepareAutoImports({ resolve, options, nuxt }) {
   addServerImportsDir(resolve("./runtime/server/utils"));
   nuxt.options.nitro.alias ||= {};
   nuxt.options.nitro.alias["#cms/http-codes"] = httpCodesPath;
+  nuxt.options.alias["#cms"] = resolve("./runtime");
+  nuxt.options.appConfig.cms = defu(nuxt.options.appConfig.cms || {}, defaultCMSConfig);
+}
+
+async function prepareGenerateEnv({ nuxt }) {
+  const runtimeConfig = nuxt.options.runtimeConfig;
+  if (nuxt.options.dev && !runtimeConfig.uploraApiKey) {
+    const envPath = join(nuxt.options.rootDir, ".env");
+    const envContent = await readFile(envPath, "utf-8").catch(() => "");
+    const envKey = `${runtimeConfig.nitro?.envPrefix || "NUXT_"}UPLORA_API_KEY`;
+    if (!envContent.includes(envKey)) {
+      await writeFile(
+        envPath,
+        `${envContent ? `${envContent}
+` : envContent}${envKey}=put-your-api-key-here`,
+        "utf-8"
+      );
+    }
+  }
+}
+
+async function prepareInstallModules(_context) {
+  if (!hasNuxtModule("@nuxt/ui-pro")) {
+    await installModule("@nuxt/ui-pro");
+  }
+  if (!hasNuxtModule("@nuxtjs/mdc")) {
+    await installModule("@nuxtjs/mdc");
+  }
+  if (!hasNuxtModule("@vueuse/nuxt")) {
+    await installModule("@vueuse/nuxt");
+  }
+  if (!hasNuxtModule("nuxt-auth-utils")) {
+    await installModule("nuxt-auth-utils");
+  }
+}
+
+const icons = {
+  edit: "lucide:pencil",
+  trash: "lucide:trash-2",
+  imageUp: "lucide:image-up",
+  arrowDownUp: "lucide:arrow-down-up",
+  sortAsc: "lucide:arrow-up-wide-narrow",
+  sortDesc: "lucide:arrow-down-wide-narrow",
+  columns: "lucide:columns-3-cog",
+  filter: "lucide:filter",
+  link: "lucide:link-2",
+  linkOff: "lucide:link-2-off",
+  ellipsisVertical: "lucide:ellipsis-vertical",
+  heading2: "lucide:heading-2",
+  heading3: "lucide:heading-3",
+  heading4: "lucide:heading-4",
+  list: "lucide:list",
+  listOrdered: "lucide:list-ordered",
+  checkSquare: "lucide:check-square",
+  image: "lucide:image",
+  quote: "lucide:quote",
+  code: "lucide:code",
+  paragraph: "lucide:paragraph",
+  pilcrow: "lucide:pilcrow",
+  info: "lucide:info",
+  bold: "lucide:bold",
+  italic: "lucide:italic",
+  underline: "lucide:underline",
+  strike: "lucide:strikethrough"
+};
+
+function prepareMergeConfigs({ nuxt, options }) {
+  nuxt.options.runtimeConfig.public = defu(nuxt.options.runtimeConfig.public || {}, {
+    fluxorUrl: options.fluxorUrl,
+    version: ""
+  });
+  nuxt.options.runtimeConfig.nitro ||= {};
+  nuxt.options.runtimeConfig.nitro.envPrefix = options.envPrefix;
+  nuxt.options.appConfig.ui = defu(nuxt.options.appConfig.ui || {}, {
+    icons
+  });
+  nuxt.options.ui = defu(nuxt.options.ui || {}, {
+    colorMode: true,
+    fonts: true
+  });
+  nuxt.options.colorMode = defu(nuxt.options.colorMode || {}, {
+    storageKey: `${options.name}-color-mode`
+  });
+  nuxt.options.mdc = defu(nuxt.options.mdc || {}, {
+    components: {
+      map: {
+        "uplora-image": "ProseUploraImage"
+      }
+    }
+  });
+  nuxt.options.auth = defu(nuxt.options.auth || {}, {
+    name: `${options.name}-session`
+  });
+  nuxt.options.runtimeConfig.uplora = defu(nuxt.options.runtimeConfig.uplora || {}, {
+    apiKey: ""
+  });
+}
+
+function prepareServerRoutes({ resolve }) {
+  addServerHandler({
+    route: "/api/_uplora",
+    method: "post",
+    handler: resolve("./runtime/server/api/uplora/index.post.ts")
+  });
+  addServerHandler({
+    route: "/api/_uplora/:id",
+    method: "delete",
+    handler: resolve("./runtime/server/api/uplora/[id].delete.ts")
+  });
 }
 
 const autocompleteSelect = {
@@ -103,6 +211,20 @@ const buttonDelete = {
   }
 };
 
+const editorContentFull = {
+  slots: {
+    root: "h-full w-full relative",
+    editor: "min-h-full w-full focus:outline-none editor-content-full relative"
+  }
+};
+
+const editorContentLight = {
+  slots: {
+    root: "relative",
+    editor: "w-full focus:outline-none editor-content-light relative"
+  }
+};
+
 const formPanel = {
   slots: {
     root: "",
@@ -150,6 +272,22 @@ const inputSlug = {
   }
 };
 
+const inputUploraImage = {
+  slots: {
+    root: "relative w-full rounded-md overflow-hidden border border-default aspect-3/2 text-sm",
+    image: "",
+    imageActions: "absolute top-4 right-4 flex gap-2",
+    uploader: "flex flex-col items-center justify-center w-full h-full p-4",
+    uploaderPendingIcon: "size-6 animate-spin",
+    uploaderIdleButton: "cursor-pointer bg-muted/50 border border-default border-dashed rounded-md h-full w-full",
+    uploaderIdleIcon: "size-10 text-primary",
+    uploaderIdleText: "mt-2 font-medium",
+    uploaderIdleExtensions: "mt-2 text-xs text-muted uppercase",
+    uploaderErrorText: "text-center font-medium",
+    uploaderErrorActions: "flex gap-2 mt-4"
+  }
+};
+
 const modalConfirm = {
   slots: {
     root: ""
@@ -205,7 +343,7 @@ const tablePanelFilters = {
   }
 };
 
-const uploraImage$1 = {
+const uploraImage$2 = {
   slots: {
     root: "relative grid grid-cols-[100%] grid-rows-[100%] overflow-hidden",
     lqip: "bg-cover bg-no-repeat bg-center col-[1] row-[1]",
@@ -220,11 +358,14 @@ const theme = {
   buttonClear: buttonClear,
   buttonCopy: buttonCopy,
   buttonDelete: buttonDelete,
+  editorContentFull: editorContentFull,
+  editorContentLight: editorContentLight,
   formPanel: formPanel,
   formPanelAsideSection: formPanelAsideSection,
   formPanelSection: formPanelSection,
   inputSeo: inputSeo,
   inputSlug: inputSlug,
+  inputUploraImage: inputUploraImage,
   modalConfirm: modalConfirm,
   tableCellPreview: tableCellPreview,
   tableCellSeo: tableCellSeo,
@@ -233,6 +374,40 @@ const theme = {
   tablePanelColumnSorting: tablePanelColumnSorting,
   tablePanelColumnVisibility: tablePanelColumnVisibility,
   tablePanelFilters: tablePanelFilters,
+  uploraImage: uploraImage$2
+};
+
+const callout = {
+  slots: {
+    root: "px-4 py-3 text-sm/6 rounded-md border flex gap-2"
+  },
+  variants: {
+    type: {
+      caution: {
+        root: "border border-error/25 bg-error/10 text-error-600 dark:text-error-300"
+      },
+      note: {
+        root: "border border-info/25 bg-info/10 text-info-600 dark:text-info-300"
+      },
+      warning: {
+        root: "border border-warning/25 bg-warning/10 text-warning-600 dark:text-warning-300"
+      },
+      tip: {
+        root: "border border-success/25 bg-success/10 text-success-600 dark:text-success-300"
+      }
+    }
+  }
+};
+
+const uploraImage$1 = {
+  slots: {
+    root: ""
+  }
+};
+
+const themeEditor = {
+  __proto__: null,
+  callout: callout,
   uploraImage: uploraImage$1
 };
 
@@ -284,12 +459,18 @@ function getAppTemplates({ options }) {
     }
   }
   writeThemeTemplate(themeProse, "prose");
+  writeThemeTemplate(themeEditor, "editor");
   writeThemeTemplate(theme);
   templates.push({
     filename: `cms/prose/index.ts`,
     write: true,
     getContents: () => Object.keys(themeProse).map((component) => `export { default as ${component} } from './${kebabCase(component)}'`).join("\n")
   });
+  templates.push({
+    filename: `cms/editor/index.ts`,
+    write: true,
+    getContents: () => Object.keys(themeEditor).map((component) => `export { default as ${component} } from './${kebabCase(component)}'`).join("\n")
+  });
   templates.push({
     filename: "cms.css",
     write: true,
@@ -359,14 +540,6 @@ function prepareTemplates(context) {
   }
 }
 
-const icons = {
-  sortAsc: "lucide:arrow-up-wide-narrow",
-  sortDesc: "lucide:arrow-down-wide-narrow",
-  columns: "lucide:columns-3-cog",
-  filter: "lucide:filter",
-  link: "lucide:link-2"
-};
-
 const module = defineNuxtModule({
   meta: {
     name,
@@ -376,48 +549,12 @@ const module = defineNuxtModule({
   defaults: defaultModuleOptions,
   async setup(options, nuxt) {
     const context = createContext(options, nuxt);
-    nuxt.options.runtimeConfig.public = defu(nuxt.options.runtimeConfig.public || {}, {
-      fluxorUrl: options.fluxorUrl,
-      version: ""
-    });
-    nuxt.options.runtimeConfig.nitro ||= {};
-    nuxt.options.runtimeConfig.nitro.envPrefix = options.envPrefix;
-    nuxt.options.appConfig.ui = defu(nuxt.options.appConfig.ui || {}, {
-      icons
-    });
-    nuxt.options.ui = defu(nuxt.options.ui || {}, {
-      colorMode: true,
-      fonts: true
-    });
-    nuxt.options.colorMode = defu(nuxt.options.colorMode || {}, {
-      storageKey: `${options.name}-color-mode`
-    });
-    nuxt.options.mdc = defu(nuxt.options.mdc || {}, {
-      components: {
-        map: {
-          "uplora-image": "ProseUploraImage"
-        }
-      }
-    });
-    nuxt.options.auth = defu(nuxt.options.auth || {}, {
-      name: `${options.name}-session`
-    });
-    if (!hasNuxtModule("@nuxt/ui-pro")) {
-      await installModule("@nuxt/ui-pro");
-    }
-    if (!hasNuxtModule("@nuxtjs/mdc")) {
-      await installModule("@nuxtjs/mdc");
-    }
-    if (!hasNuxtModule("@vueuse/nuxt")) {
-      await installModule("@vueuse/nuxt");
-    }
-    if (!hasNuxtModule("nuxt-auth-utils")) {
-      await installModule("nuxt-auth-utils");
-    }
-    nuxt.options.alias["#cms"] = context.resolve("./runtime");
-    nuxt.options.appConfig.cms = defu(nuxt.options.appConfig.cms || {}, getDefaultCMSConfig());
+    prepareMergeConfigs(context);
+    await prepareInstallModules();
     prepareAutoImports(context);
     prepareTemplates(context);
+    prepareServerRoutes(context);
+    await prepareGenerateEnv(context);
   }
 });
 

package/dist/runtime/components/ButtonDelete.vue

@@ -7,10 +7,12 @@
     disable-closing-trigger
   >
     <UButton
-      v-bind="buttonProps"
-      color="error"
-      auto-loading
+      :color="color"
+      :variant="variant"
+      :size="size"
+      :icon="icon"
       :class="ui.root({ class: [props.ui?.root, props.class] })"
+      auto-loading
       @click="handleDeleteClick()"
     />
   </UTooltip>
@@ -26,11 +28,15 @@ import ModalConfirm from "./ModalConfirm.vue";
 <script setup>
 const props = defineProps({
   modalProps: { type: Object, required: false },
-  buttonProps: { type: Object, required: false },
   confirmText: { type: String, required: false },
+  confirmLabel: { type: String, required: false, default: "\u0423\u0434\u0430\u043B\u0438\u0442\u044C" },
   title: { type: String, required: false },
   message: { type: String, required: false },
   tooltipText: { type: String, required: false },
+  color: { type: null, required: false, default: "error" },
+  variant: { type: null, required: false },
+  icon: { type: null, required: false },
+  size: { type: null, required: false },
   class: { type: null, required: false },
   ui: { type: null, required: false },
   onConfirm: { type: Function, required: false }
@@ -43,7 +49,9 @@ function handleDeleteClick() {
     ...props.modalProps,
     title: props.title ?? "\u0423\u0434\u0430\u043B\u0435\u043D\u0438\u0435",
     message: props.message ?? "\u0412\u044B \u0434\u0435\u0438\u0306\u0441\u0442\u0432\u0438\u0442\u0435\u043B\u044C\u043D\u043E \u0445\u043E\u0442\u0438\u0442\u0435 \u0443\u0434\u0430\u043B\u0438\u0442\u044C?",
-    confirmButton: { color: "error", label: "\u0423\u0434\u0430\u043B\u0438\u0442\u044C" },
+    color: "error",
+    variant: props.variant,
+    confirmLabel: props.confirmLabel,
     confirmText: props.confirmText,
     onConfirm: props.onConfirm
   });

package/dist/runtime/components/ButtonDelete.vue.d.ts

@@ -8,11 +8,15 @@ import ModalConfirm from './ModalConfirm.vue';
 type ButtonDelete = ComponentConfig<typeof theme, AppConfig, 'buttonDelete'>;
 export interface ButtonDeleteProps extends Pick<ModalConfirmProps, 'onConfirm'> {
     modalProps?: Omit<ModalProps & ComponentProps<typeof ModalConfirm>, 'title' | 'message' | 'onConfirm' | 'confirmButton'>;
-    buttonProps?: Omit<ButtonProps, 'color'>;
     confirmText?: string;
+    confirmLabel?: string;
     title?: string;
     message?: string;
     tooltipText?: string;
+    color?: ButtonProps['color'];
+    variant?: ButtonProps['variant'];
+    icon?: ButtonProps['icon'];
+    size?: ButtonProps['size'];
     class?: any;
     ui?: ButtonDelete['slots'];
 }
@@ -24,5 +28,8 @@ declare const _default: import("vue").DefineComponent<ButtonDeleteProps, {}, {},
 }, string, import("vue").PublicProps, Readonly<ButtonDeleteProps> & Readonly<{
     onClose?: (() => any) | undefined;
     onConfirm?: (() => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+}>, {
+    color: "primary" | "secondary" | "success" | "info" | "warning" | "error" | "neutral";
+    confirmLabel: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;

package/dist/runtime/components/EditorContentFull.vue

@@ -0,0 +1,53 @@
+<template>
+  <Primitive :as="as" :class="ui.root({ class: [props.ui?.root, props.class] })">
+    <ProseKit :editor="editor">
+      <div ref="editorRef" :class="ui.editor({ class: [props.ui?.editor, 'pl-14'] })" />
+
+      <BlockMenu />
+      <SlashCommand />
+      <TooltipMenu />
+    </ProseKit>
+  </Primitive>
+</template>
+
+<script>
+import theme from "#build/cms/editor-content-full";
+import { computed, useAppConfig, useTemplateRef, watchPostEffect } from "#imports";
+import { createEditor } from "prosekit/core";
+import { ProseKit, useDocChange } from "prosekit/vue";
+import { Primitive } from "reka-ui";
+import BlockMenu from "../editor/components/BlockMenu.vue";
+import SlashCommand from "../editor/components/SlashCommand.vue";
+import TooltipMenu from "../editor/components/TooltipMenu.vue";
+import { defineFullExtension } from "../editor/extensions";
+import { docToMarkdown, markdownToDoc } from "../editor/markdown";
+import { tv } from "../utils/tv";
+import "prosekit/basic/style.css";
+</script>
+
+<script setup>
+const props = defineProps({
+  as: { type: null, required: false },
+  class: { type: null, required: false },
+  ui: { type: null, required: false }
+});
+const modelValue = defineModel({ type: String, ...{ default: "" } });
+const appConfig = useAppConfig();
+const editor = createEditor({
+  extension: defineFullExtension(),
+  defaultContent: await markdownToDoc(modelValue.value)
+});
+const editorRef = useTemplateRef("editorRef");
+useDocChange(async () => {
+  modelValue.value = await docToMarkdown(editor.getDocJSON());
+}, { editor });
+watchPostEffect((onCleanup) => {
+  editor.mount(editorRef.value);
+  onCleanup(() => editor.unmount());
+});
+const ui = computed(() => tv({ extend: tv(theme), ...appConfig.cms?.editorContentFull || {} })());
+</script>
+
+<style scoped>
+::v-deep(.editor-content-full){line-height:calc(var(--spacing)*7)}::v-deep(.editor-content-full) [data-placeholder]:before{color:var(--ui-text-dimmed);content:attr(data-placeholder);height:0;pointer-events:none;position:absolute}::v-deep(.editor-content-full) h2,::v-deep(.editor-content-full) h3,::v-deep(.editor-content-full) h4{font-weight:600;margin-block:calc(var(--spacing)*5)}::v-deep(.editor-content-full) h2{font-size:var(--text-2xl)}::v-deep(.editor-content-full) h3{font-size:var(--text-xl)}::v-deep(.editor-content-full) h4{font-size:var(--text-lg)}::v-deep(.editor-content-full) blockquote{border-left:4px solid var(--ui-border-accented);margin-block:calc(var(--spacing)*4);padding-inline-start:calc(var(--spacing)*4)}::v-deep(.editor-content-full) [data-node-view-root=true],::v-deep(.editor-content-full)>p{margin-block:calc(var(--spacing)*5)}::v-deep(.editor-content-full) hr{border-block-start:1px solid var(--ui-border);margin-block:calc(var(--spacing)*5)}::v-deep(.editor-content-full) pre{background-color:var(--ui-bg-muted);border:1px solid var(--ui-border-muted);border-radius:calc(var(--ui-radius)*1.5);font-family:var(--font-mono);font-size:var(--text-sm);line-height:calc(var(--spacing)*6);overflow-x:auto;padding-block:calc(var(--spacing)*3);padding-inline:calc(var(--spacing)*4)}::v-deep(.editor-content-full) p>code{background-color:var(--ui-bg-muted);border:1px solid var(--ui-border-muted);border-radius:calc(var(--ui-radius)*1.5);font-family:var(--font-mono);font-size:var(--text-sm);padding-inline:var(--spacing)}::v-deep(.editor-content-full) a{color:var(--ui-primary);cursor:pointer;text-decoration:underline;-webkit-user-select:all;-moz-user-select:all;user-select:all}
+</style>

package/dist/runtime/components/EditorContentFull.vue.d.ts

@@ -0,0 +1,20 @@
+import type { AppConfig } from '@nuxt/schema';
+import type { ComponentConfig } from '../types';
+import theme from '#build/cms/editor-content-full';
+import 'prosekit/basic/style.css';
+type EditorContentFull = ComponentConfig<typeof theme, AppConfig, 'editorContentFull'>;
+export interface EditorContentFullProps {
+    as?: any;
+    class?: any;
+    ui?: EditorContentFull['slots'];
+}
+declare const _default: import("vue").DefineComponent<EditorContentFullProps & {
+    modelValue?: string;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string) => any;
+}, string, import("vue").PublicProps, Readonly<EditorContentFullProps & {
+    modelValue?: string;
+}> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/runtime/components/EditorContentLight.vue

@@ -0,0 +1,46 @@
+<template>
+  <Primitive :as="as" :class="ui.root({ class: [props.ui?.root, props.class] })">
+    <ProseKit :editor="editor">
+      <div ref="editorRef" :class="ui.editor({ class: props.ui?.editor })" />
+    </ProseKit>
+  </Primitive>
+</template>
+
+<script>
+import theme from "#build/cms/editor-content-light";
+import { computed, useAppConfig, useTemplateRef, watchPostEffect } from "#imports";
+import { createEditor } from "prosekit/core";
+import { ProseKit, useDocChange } from "prosekit/vue";
+import { Primitive } from "reka-ui";
+import { defineLightExtension } from "../editor/extensions";
+import { docToMarkdown, markdownToDoc } from "../editor/markdown";
+import { tv } from "../utils/tv";
+import "prosekit/basic/style.css";
+</script>
+
+<script setup>
+const props = defineProps({
+  as: { type: null, required: false },
+  class: { type: null, required: false },
+  ui: { type: null, required: false }
+});
+const modelValue = defineModel({ type: String, ...{ default: "" } });
+const appConfig = useAppConfig();
+const editor = createEditor({
+  extension: defineLightExtension(),
+  defaultContent: await markdownToDoc(modelValue.value)
+});
+const editorRef = useTemplateRef("editorRef");
+useDocChange(async () => {
+  modelValue.value = await docToMarkdown(editor.getDocJSON());
+}, { editor });
+watchPostEffect((onCleanup) => {
+  editor.mount(editorRef.value);
+  onCleanup(() => editor.unmount());
+});
+const ui = computed(() => tv({ extend: tv(theme), ...appConfig.cms?.editorContentLight || {} })());
+</script>
+
+<style scoped>
+::v-deep(.editor-content-light){line-height:calc(var(--spacing)*7)}::v-deep(.editor-content-light) [data-placeholder]:before{color:var(--ui-text-dimmed);content:attr(data-placeholder);height:0;pointer-events:none;position:absolute}::v-deep(.editor-content-light) blockquote{border-left:4px solid var(--ui-border-accented);margin-block:calc(var(--spacing)*4);padding-inline-start:calc(var(--spacing)*4)}::v-deep(.editor-content-light) [data-node-view-root=true],::v-deep(.editor-content-light)>p{margin-block:calc(var(--spacing)*5)}::v-deep(.editor-content-light) pre{background-color:var(--ui-bg-muted);border:1px solid var(--ui-border-muted);border-radius:calc(var(--ui-radius)*1.5);font-family:var(--font-mono);font-size:var(--text-sm);line-height:calc(var(--spacing)*6);overflow-x:auto;padding-block:calc(var(--spacing)*3);padding-inline:calc(var(--spacing)*4)}::v-deep(.editor-content-light) p>code{background-color:var(--ui-bg-muted);border:1px solid var(--ui-border-muted);border-radius:calc(var(--ui-radius)*1.5);font-family:var(--font-mono);font-size:var(--text-sm);padding-inline:var(--spacing)}::v-deep(.editor-content-light) a{color:var(--ui-primary);cursor:pointer;text-decoration:underline;-webkit-user-select:all;-moz-user-select:all;user-select:all}
+</style>