@hywax/cms 0.0.6 → 0.0.7

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

@@ -1,5 +1,5 @@
 export default {
   "slots": {
-    "root": "rounded-md overflow-hidden"
+    "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

@@ -69,13 +69,13 @@ import ComponentRender from '../../component-render'
 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.6",
+  "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, addServerHandler, 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.6";
+const version = "0.0.7";
 
 function createContext(options, nuxt) {
   const { resolve } = createResolver(import.meta.url);
@@ -52,7 +53,7 @@ function prepareAutoImports({ resolve, options, nuxt }) {
     path: resolve("./runtime/components"),
     pathPrefix: false,
     prefix: options?.prefix,
-    ignore: ["prose/**", "editor/**"]
+    ignore: ["prose/**"]
   });
   addComponentsDir({
     path: resolve("./runtime/components/prose"),
@@ -75,6 +76,102 @@ 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 }) {
@@ -114,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: "",
@@ -161,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: ""
@@ -231,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,
@@ -271,7 +401,7 @@ const callout = {
 
 const uploraImage$1 = {
   slots: {
-    root: "rounded-md overflow-hidden"
+    root: ""
   }
 };
 
@@ -410,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,
@@ -427,49 +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 || {}, defaultCMSConfig);
+    prepareMergeConfigs(context);
+    await prepareInstallModules();
     prepareAutoImports(context);
     prepareTemplates(context);
     prepareServerRoutes(context);
+    await prepareGenerateEnv(context);
   }
 });
 

package/dist/runtime/components/ButtonDelete.vue

@@ -10,6 +10,7 @@
       :color="color"
       :variant="variant"
       :size="size"
+      :icon="icon"
       :class="ui.root({ class: [props.ui?.root, props.class] })"
       auto-loading
       @click="handleDeleteClick()"
@@ -34,6 +35,7 @@ const props = defineProps({
   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 },
@@ -47,9 +49,8 @@ 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?",
-    color: props.color,
+    color: "error",
     variant: props.variant,
-    size: props.size,
     confirmLabel: props.confirmLabel,
     confirmText: props.confirmText,
     onConfirm: props.onConfirm

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

@@ -15,6 +15,7 @@ export interface ButtonDeleteProps extends Pick<ModalConfirmProps, 'onConfirm'>
     tooltipText?: string;
     color?: ButtonProps['color'];
     variant?: ButtonProps['variant'];
+    icon?: ButtonProps['icon'];
     size?: ButtonProps['size'];
     class?: any;
     ui?: ButtonDelete['slots'];

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>

package/dist/runtime/components/EditorContentLight.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-light';
+import 'prosekit/basic/style.css';
+type EditorContentLight = ComponentConfig<typeof theme, AppConfig, 'editorContentLight'>;
+export interface EditorContentLightProps {
+    as?: any;
+    class?: any;
+    ui?: EditorContentLight['slots'];
+}
+declare const _default: import("vue").DefineComponent<EditorContentLightProps & {
+    modelValue?: string;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string) => any;
+}, string, import("vue").PublicProps, Readonly<EditorContentLightProps & {
+    modelValue?: string;
+}> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/runtime/components/InputUploraImage.vue

@@ -0,0 +1,131 @@
+<template>
+  <Primitive :as="as" :class="ui.root({ class: [props.ui?.root, props.class] })">
+    <template v-if="modelValue.image">
+      <UploraImage
+        :image="modelValue.image"
+        :alt="modelValue.alt"
+        :lqip="modelValue.lqip"
+        :class="ui.image({ class: [props.ui?.image] })"
+      />
+
+      <div :class="ui.imageActions({ class: [props.ui?.imageActions] })">
+        <ButtonDelete
+          :icon="appConfig.ui.icons.trash"
+          color="neutral"
+          size="sm"
+          @confirm="deleteExecute(modelValue.image)"
+        />
+
+        <UPopover
+          :ui="{ content: 'p-2' }"
+          :content="{ align: 'end', side: 'bottom', sideOffset: 8 }"
+        >
+          <UButton :icon="appConfig.ui.icons.ellipsisVertical" color="neutral" size="sm" />
+
+          <template #content>
+            <UFormField label="Описание изображения">
+              <UTextarea
+                :model-value="modelValue.alt"
+                placeholder="Введите описание..."
+                autoresize
+                @update:model-value="updateAlt"
+              />
+            </UFormField>
+          </template>
+        </UPopover>
+      </div>
+    </template>
+    <div v-else :class="ui.uploader({ class: [props.ui?.uploader] })">
+      <template v-if="uploadStatus === 'pending'">
+        <UIcon :name="appConfig.ui.icons.loading" :class="ui.uploaderPendingIcon({ class: [props.ui?.uploaderPendingIcon] })" />
+      </template>
+      <template v-else-if="uploadStatus === 'idle'">
+        <button
+          :class="ui.uploaderIdleButton({ class: [props.ui?.uploaderIdleButton] })"
+          type="button"
+          @click="open"
+        >
+          <UIcon :name="appConfig.ui.icons.imageUp" :class="ui.uploaderIdleIcon({ class: [props.ui?.uploaderIdleIcon] })" />
+          <p :class="ui.uploaderIdleText({ class: [props.ui?.uploaderIdleText] })">
+            Нажмите, чтобы загрузить изображение
+          </p>
+          <p v-if="props.showExtensions" :class="ui.uploaderIdleExtensions({ class: [props.ui?.uploaderIdleExtensions] })">
+            {{ imagesExtensions.join(", ") }}
+          </p>
+        </button>
+      </template>
+      <template v-else-if="uploadStatus === 'error'">
+        <p :class="ui.uploaderErrorText({ class: [props.ui?.uploaderErrorText] })">
+          Произошла ошибка при загрузке изображения
+        </p>
+        <div :class="ui.uploaderErrorActions({ class: [props.ui?.uploaderErrorActions] })">
+          <UButton
+            label="Отменить"
+            variant="ghost"
+            color="neutral"
+            @click="resetUpload"
+          />
+          <UButton
+            label="Повторить"
+            variant="soft"
+            color="neutral"
+            @click="uploadExecute"
+          />
+        </div>
+      </template>
+    </div>
+  </Primitive>
+</template>
+
+<script>
+import theme from "#build/cms/input-uplora-image";
+import { computed, useAppConfig } from "#imports";
+import { imagesExtensions } from "@uplora/formats";
+import { Primitive } from "reka-ui";
+import { useUploraDelete, useUploraUpload } from "../composables/useUplora";
+import { tv } from "../utils/tv";
+import ButtonDelete from "./ButtonDelete.vue";
+import UploraImage from "./UploraImage.vue";
+</script>
+
+<script setup>
+const props = defineProps({
+  showExtensions: { type: Boolean, required: false, default: true },
+  as: { type: null, required: false },
+  class: { type: null, required: false },
+  ui: { type: null, required: false }
+});
+const emit = defineEmits(["upload", "delete"]);
+const modelValue = defineModel({ type: Object, ...{
+  default: () => ({
+    image: "",
+    alt: ""
+  })
+} });
+const appConfig = useAppConfig();
+const { open, execute: uploadExecute, status: uploadStatus, reset: resetUpload, onUploaded } = useUploraUpload();
+const { execute: deleteExecute, onDeleted } = useUploraDelete();
+onUploaded((file) => {
+  modelValue.value = {
+    ...modelValue.value,
+    image: file.id,
+    lqip: file.lqip
+  };
+  emit("upload", modelValue.value);
+});
+onDeleted(() => {
+  resetUpload();
+  modelValue.value = {
+    image: "",
+    alt: ""
+  };
+  emit("delete");
+});
+function updateAlt(alt) {
+  modelValue.value = {
+    ...modelValue.value,
+    alt
+  };
+}
+const ui = computed(() => tv({ extend: tv(theme), ...appConfig.cms?.inputUploraImage || {} })());
+</script>