@rynt/sdk 0.9.53

package/src/shared/ui/editors/MarkdownRenderer.vue

@@ -0,0 +1,299 @@
+<template>
+  <div class="rich-content-renderer">
+    <template
+      v-for="entry in beforeContentRegistryEntries"
+      :key="`${entry.extensionId}:${entry.registryKey}`"
+    >
+      <component
+        :is="entry.value"
+        :content="props.content"
+        :variant="props.variant"
+        :images="images"
+      />
+    </template>
+    <div
+      v-if="textHtml"
+      class="markdown-renderer prose prose-invert prose-headings:text-foreground prose-p:text-muted-foreground prose-a:text-accent-secondary prose-strong:text-foreground prose-code:text-accent-secondary max-w-none"
+      :class="{ 'markdown-renderer--rich': variant === 'rich' }"
+      v-html="textHtml"
+      @click="handleContentClick"
+    />
+
+    <div v-if="variant === 'social' && images.length" class="rich-content-attachments">
+      <button
+        v-for="(image, index) in images"
+        :key="`${image.src}-${index}`"
+        type="button"
+        class="rich-content-attachment"
+        :title="image.alt || 'Открыть изображение'"
+        @click="openViewer(index)"
+      >
+        <img :src="image.src" :alt="image.alt || ''" loading="lazy" />
+      </button>
+    </div>
+
+    <RichContentImageViewer
+      :open="viewerOpen"
+      :images="viewerImages"
+      :initial-index="viewerIndex"
+      @close="viewerOpen = false"
+    />
+    <template
+      v-for="entry in afterContentRegistryEntries"
+      :key="`${entry.extensionId}:${entry.registryKey}`"
+    >
+      <component
+        :is="entry.value"
+        :content="props.content"
+        :variant="props.variant"
+        :images="images"
+      />
+    </template>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { computed, ref } from 'vue';
+  import type { RichContentImage } from '../../utils/rich-content';
+  import {
+    prepareRichVariantContent,
+    renderRichContent,
+    splitRichContentImages,
+  } from '../../utils/rich-content';
+  import RichContentImageViewer from './RichContentImageViewer.vue';
+  import {
+    useMarkdownRendererAfterContentRegistry,
+    useMarkdownRendererBeforeContentRegistry,
+  } from '../../../extensions/registries/builtins';
+
+  interface Props {
+    content: string;
+    variant?: 'rich' | 'social';
+  }
+
+  const props = withDefaults(defineProps<Props>(), {
+    variant: 'rich',
+  });
+
+  const viewerOpen = ref(false);
+  const viewerIndex = ref(0);
+
+  const socialParsed = computed(() =>
+    props.variant === 'social'
+      ? splitRichContentImages(props.content || '')
+      : { html: '', images: [] as RichContentImage[] },
+  );
+
+  const richParsed = computed(() =>
+    props.variant === 'rich'
+      ? prepareRichVariantContent(props.content || '')
+      : { html: '', images: [] as RichContentImage[] },
+  );
+
+  const textHtml = computed(() => {
+    if (props.variant === 'social') {
+      if (!socialParsed.value.html) return '';
+      return renderRichContent(socialParsed.value.html);
+    }
+    return richParsed.value.html;
+  });
+
+  const images = computed(() =>
+    props.variant === 'social'
+      ? socialParsed.value.images
+      : richParsed.value.images,
+  );
+  const beforeContentRegistryEntries = computed(() =>
+    useMarkdownRendererBeforeContentRegistry().entries(),
+  );
+  const afterContentRegistryEntries = computed(() =>
+    useMarkdownRendererAfterContentRegistry().entries(),
+  );
+
+  const viewerImages = computed(() => images.value);
+
+  const openViewer = (index: number) => {
+    viewerIndex.value = index;
+    viewerOpen.value = true;
+  };
+
+  const handleContentClick = (event: MouseEvent) => {
+    if (props.variant !== 'rich') return;
+
+    const target = event.target as HTMLElement | null;
+    const img = target?.closest('img');
+    if (!img) return;
+
+    const src = img.getAttribute('src') || '';
+    if (!src) return;
+
+    const index = images.value.findIndex((image) => image.src === src);
+    if (index >= 0) {
+      event.preventDefault();
+      openViewer(index);
+    }
+  };
+</script>
+
+<style scoped>
+  .rich-content-renderer {
+    color: var(--muted-foreground);
+  }
+
+  .markdown-renderer :deep(h1),
+  .markdown-renderer :deep(h2),
+  .markdown-renderer :deep(h3),
+  .markdown-renderer :deep(h4),
+  .markdown-renderer :deep(h5),
+  .markdown-renderer :deep(h6) {
+    color: var(--foreground);
+    font-weight: 600;
+    margin-top: 1.5em;
+    margin-bottom: 0.5em;
+  }
+
+  .markdown-renderer :deep(p) {
+    margin-bottom: 1em;
+  }
+
+  .markdown-renderer :deep(ul),
+  .markdown-renderer :deep(ol) {
+    padding-left: 1.5em;
+    margin-bottom: 1em;
+  }
+
+  .markdown-renderer :deep(ul) {
+    list-style-type: disc;
+  }
+
+  .markdown-renderer :deep(ol) {
+    list-style-type: decimal;
+  }
+
+  .markdown-renderer :deep(li) {
+    margin-bottom: 0.5em;
+  }
+
+  .markdown-renderer :deep(li > p) {
+    margin-bottom: 0;
+  }
+
+  .markdown-renderer :deep(li::marker) {
+    color: var(--subtle-fg);
+  }
+
+  .markdown-renderer :deep(a) {
+    color: var(--accent-secondary);
+    text-decoration: underline;
+    text-underline-offset: 2px;
+  }
+
+  .markdown-renderer :deep(a:hover) {
+    color: #a0a8ee;
+  }
+
+  .markdown-renderer :deep(code) {
+    background-color: var(--card);
+    padding: 0.2em 0.4em;
+    border-radius: var(--radius-ui-lg);
+    font-size: 0.9em;
+  }
+
+  .markdown-renderer :deep(pre) {
+    background-color: var(--card);
+    padding: 1em;
+    border-radius: var(--radius-ui-xl);
+    overflow-x: auto;
+    margin-bottom: 1em;
+  }
+
+  .markdown-renderer :deep(pre code) {
+    background-color: transparent;
+    padding: 0;
+  }
+
+  .markdown-renderer :deep(blockquote) {
+    border-left: 4px solid var(--primary);
+    padding-left: 1em;
+    margin: 1em 0;
+    color: var(--subtle-fg);
+    font-style: italic;
+  }
+
+  .markdown-renderer :deep(table) {
+    width: 100%;
+    border-collapse: collapse;
+    margin: 1em 0;
+  }
+
+  .markdown-renderer :deep(th),
+  .markdown-renderer :deep(td) {
+    border: 1px solid color-mix(in srgb, var(--primary) 20%, transparent);
+    padding: 0.5em;
+  }
+
+  .markdown-renderer :deep(th) {
+    background-color: var(--card);
+    font-weight: 600;
+  }
+
+  .markdown-renderer--rich :deep(img) {
+    max-width: 100%;
+    height: auto;
+    border-radius: var(--radius-ui-lg);
+    margin: 0.5rem 0;
+    cursor: zoom-in;
+  }
+
+  .markdown-renderer--rich :deep(.md-gallery) {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(6rem, 1fr));
+    gap: 0.5rem;
+    margin: 0.75rem 0;
+    padding: 0.5rem;
+    border: 1px solid var(--border);
+    border-radius: var(--radius-ui-lg);
+    background: var(--card);
+  }
+
+  .markdown-renderer--rich :deep(.md-gallery img),
+  .markdown-renderer--rich :deep(.md-gallery__image) {
+    width: 100%;
+    aspect-ratio: 1;
+    object-fit: cover;
+    margin: 0;
+    cursor: zoom-in;
+  }
+
+  .rich-content-attachments {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+    margin-top: 1rem;
+    padding-top: 0.75rem;
+    border-top: 1px solid var(--border);
+  }
+
+  .rich-content-attachment {
+    position: relative;
+    overflow: hidden;
+    width: 5.5rem;
+    height: 5.5rem;
+    border: 1px solid var(--border);
+    border-radius: var(--radius-ui-lg);
+    background: var(--card);
+    cursor: zoom-in;
+    transition: border-color 0.15s ease;
+  }
+
+  .rich-content-attachment:hover {
+    border-color: var(--accent-secondary);
+  }
+
+  .rich-content-attachment img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    display: block;
+  }
+</style>

package/src/shared/ui/editors/RichContentImageViewer.vue

@@ -0,0 +1,85 @@
+<template>
+  <Teleport to="body">
+    <div
+      v-if="open"
+      class="fixed inset-0 z-[9999] flex items-center justify-center bg-black/60"
+      @click.self="close"
+    >
+      <button
+        type="button"
+        class="absolute top-4 right-4 text-2xl text-primary-foreground/80 hover:text-foreground"
+        aria-label="Закрыть"
+        @click="close"
+      >
+        ✕
+      </button>
+
+      <button
+        v-if="images.length > 1"
+        type="button"
+        class="absolute left-4 flex h-10 w-10 items-center justify-center bg-black/80 cursor-pointer text-3xl text-primary-foreground/80 hover:text-foreground md:left-8 md:h-12 md:w-12"
+        aria-label="Предыдущее изображение"
+        @click.stop="showPrev"
+      >
+        ‹
+      </button>
+
+      <img
+        :src="images[currentIndex]?.src"
+        :alt="images[currentIndex]?.alt || ''"
+        class="max-h-[90vh] max-w-[95vw] object-contain"
+      />
+
+      <button
+        v-if="images.length > 1"
+        type="button"
+        class="absolute right-4 flex h-10 w-10 items-center justify-center bg-black/80 cursor-pointer text-3xl text-primary-foreground/80 hover:text-foreground md:right-8 md:h-12 md:w-12"
+        aria-label="Следующее изображение"
+        @click.stop="showNext"
+      >
+        ›
+      </button>
+    </div>
+  </Teleport>
+</template>
+
+<script setup lang="ts">
+  import { ref, watch } from 'vue';
+  import type { RichContentImage } from '../../utils/rich-content';
+
+  const props = defineProps<{
+    images: RichContentImage[];
+    initialIndex?: number;
+    open: boolean;
+  }>();
+
+  const emit = defineEmits<{
+    close: [];
+  }>();
+
+  const currentIndex = ref(0);
+
+  watch(
+    () => [props.open, props.initialIndex] as const,
+    ([isOpen, index]) => {
+      if (!isOpen) return;
+      currentIndex.value = index ?? 0;
+    },
+    { immediate: true },
+  );
+
+  const close = () => {
+    emit('close');
+  };
+
+  const showPrev = () => {
+    if (!props.images.length) return;
+    currentIndex.value =
+      (currentIndex.value - 1 + props.images.length) % props.images.length;
+  };
+
+  const showNext = () => {
+    if (!props.images.length) return;
+    currentIndex.value = (currentIndex.value + 1) % props.images.length;
+  };
+</script>

package/src/shared/ui/editors/SocialPostMediaZone.vue

@@ -0,0 +1,320 @@
+<template>
+  <div
+    class="social-post-media-zone"
+    :class="{ 'social-post-media-zone--dragover': isDragOver }"
+    @paste.capture="handlePaste"
+    @dragover.prevent="handleDragOver"
+    @dragleave="handleDragLeave"
+    @drop.prevent="handleDrop"
+  >
+    <div
+      v-if="showCover"
+      class="social-post-media-zone__cover group relative mb-3 overflow-hidden rounded border border-border bg-card"
+    >
+      <div
+        class="aspect-video w-full bg-gradient-to-br from-primary/20 to-accent-secondary/20"
+      >
+        <img
+          v-if="coverUrl"
+          :src="coverUrl"
+          alt=""
+          class="h-full w-full object-cover"
+        />
+      </div>
+      <div
+        v-if="coverUploading"
+        class="absolute inset-0 flex items-center justify-center bg-background/50"
+      >
+        <div
+          class="h-6 w-6 animate-spin rounded-full border-2 border-foreground/25 border-t-accent-secondary"
+        />
+      </div>
+      <button
+        v-if="!coverUploading"
+        type="button"
+        class="absolute right-2 top-2 flex h-7 w-7 items-center justify-center rounded bg-background/80 text-subtle-fg opacity-0 shadow transition-opacity hover:text-destructive group-hover:opacity-100"
+        title="Удалить главное фото"
+        @mousedown.prevent="removeCover"
+      >
+        <Icon name="x" size="sm" />
+      </button>
+    </div>
+
+    <slot />
+
+    <div
+      v-if="showStrip || showHint"
+      class="social-post-media-zone__footer mt-3 space-y-2"
+    >
+      <div v-if="showStrip" class="flex flex-wrap gap-2">
+        <div
+          v-for="item in attachmentItems"
+          :key="item.key"
+          class="group relative h-20 w-20 overflow-hidden rounded border border-border bg-card"
+        >
+          <img
+            v-if="item.url"
+            :src="item.url"
+            alt=""
+            class="h-full w-full object-cover"
+          />
+          <div
+            v-if="item.uploading"
+            class="absolute inset-0 flex items-center justify-center bg-background/50"
+          >
+            <div
+              class="h-5 w-5 animate-spin rounded-full border-2 border-foreground/25 border-t-accent-secondary"
+            />
+          </div>
+          <button
+            v-if="!item.uploading"
+            type="button"
+            class="absolute right-1 top-1 flex h-5 w-5 items-center justify-center rounded bg-background/80 text-subtle-fg opacity-0 transition-opacity hover:text-destructive group-hover:opacity-100"
+            title="Удалить"
+            @mousedown.prevent="removeAttachment(item.index)"
+          >
+            <Icon name="x" size="xs" />
+          </button>
+        </div>
+      </div>
+
+      <p v-if="showHint" class="text-xs text-subtle-fg">
+        {{ hintText }}
+      </p>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { computed, ref } from 'vue';
+  import { Icon } from '..';
+  import { uploadImage } from '../../utils/uploadImage';
+
+  type ZoneMode = 'profile' | 'attachments-only';
+
+  interface Props {
+    mode: ZoneMode;
+    attachments: string[];
+    uploadFolder?: string;
+    maxImages?: number;
+    image?: string;
+    showHint?: boolean;
+  }
+
+  const props = withDefaults(defineProps<Props>(), {
+    uploadFolder: 'posts',
+    maxImages: 5,
+    image: '',
+    showHint: true,
+  });
+
+  const emit = defineEmits<{
+    'update:attachments': [value: string[]];
+    'update:image': [value: string];
+  }>();
+
+  const isDragOver = ref(false);
+  const coverUploading = ref(false);
+  const uploadingAttachmentKeys = ref(new Set<string>());
+
+  const coverUrl = computed(() => props.image || '');
+
+  const slotsUsed = computed(() => {
+    if (props.mode === 'profile') {
+      return (props.image ? 1 : 0) + props.attachments.length;
+    }
+    return props.attachments.length;
+  });
+
+  const slotsLeft = computed(() =>
+    Math.max(0, props.maxImages - slotsUsed.value),
+  );
+
+  const showCover = computed(
+    () => props.mode === 'profile' && (coverUrl.value || coverUploading.value),
+  );
+
+  const showStrip = computed(
+    () =>
+      props.attachments.length > 0 || uploadingAttachmentKeys.value.size > 0,
+  );
+
+  const hintText = computed(() => {
+    if (props.mode === 'profile') {
+      return `Ctrl+V или перетащите фото (до ${props.maxImages}, первая — главная)`;
+    }
+    return `Ctrl+V или перетащите фото (до ${props.maxImages})`;
+  });
+
+  const attachmentItems = computed(() =>
+    props.attachments.map((url, index) => ({
+      key: `att-${index}-${url}`,
+      index,
+      url,
+      uploading: uploadingAttachmentKeys.value.has(`att-${index}`),
+    })),
+  );
+
+  const extractImageFiles = (fileList: FileList | File[]): File[] => {
+    return Array.from(fileList).filter((file) =>
+      file.type.startsWith('image/'),
+    );
+  };
+
+  const assignTargets = (
+    files: File[],
+  ): Array<{ file: File; target: 'cover' | 'attachment' }> => {
+    const result: Array<{ file: File; target: 'cover' | 'attachment' }> = [];
+    let left = slotsLeft.value;
+    if (!left) return result;
+
+    let coverTaken = props.mode === 'profile' ? Boolean(props.image) : true;
+
+    for (const file of files) {
+      if (left <= 0) break;
+
+      if (props.mode === 'profile' && !coverTaken) {
+        result.push({ file, target: 'cover' });
+        coverTaken = true;
+        left -= 1;
+        continue;
+      }
+
+      result.push({ file, target: 'attachment' });
+      left -= 1;
+    }
+
+    return result;
+  };
+
+  const uploadToCover = async (file: File) => {
+    const preview = URL.createObjectURL(file);
+    emit('update:image', preview);
+    coverUploading.value = true;
+
+    try {
+      const result = await uploadImage(file, {
+        folder: props.uploadFolder,
+        maxSizeBytes: 10 * 1024 * 1024,
+      });
+      emit('update:image', result.url);
+    } catch (error) {
+      console.error('[SocialPostMediaZone] cover upload failed:', error);
+      emit('update:image', '');
+    } finally {
+      coverUploading.value = false;
+      URL.revokeObjectURL(preview);
+    }
+  };
+
+  const uploadToAttachment = async (file: File, insertIndex: number) => {
+    const key = `att-${insertIndex}`;
+    const next = [...props.attachments];
+    const preview = URL.createObjectURL(file);
+    next.splice(insertIndex, 0, preview);
+    emit('update:attachments', next);
+
+    const pending = new Set(uploadingAttachmentKeys.value);
+    pending.add(key);
+    uploadingAttachmentKeys.value = pending;
+
+    try {
+      const result = await uploadImage(file, {
+        folder: props.uploadFolder,
+        maxSizeBytes: 10 * 1024 * 1024,
+      });
+      const updated = [...props.attachments];
+      if (updated[insertIndex] === preview) {
+        updated[insertIndex] = result.url;
+      } else {
+        const previewIndex = updated.indexOf(preview);
+        if (previewIndex >= 0) updated[previewIndex] = result.url;
+      }
+      emit('update:attachments', updated.filter(Boolean));
+    } catch (error) {
+      console.error('[SocialPostMediaZone] attachment upload failed:', error);
+      const updated = props.attachments.filter((url) => url !== preview);
+      emit('update:attachments', updated);
+    } finally {
+      const done = new Set(uploadingAttachmentKeys.value);
+      done.delete(key);
+      uploadingAttachmentKeys.value = done;
+      URL.revokeObjectURL(preview);
+    }
+  };
+
+  const addFiles = async (files: File[]) => {
+    const imageFiles = extractImageFiles(files);
+    if (!imageFiles.length || slotsLeft.value <= 0) return;
+
+    const assignments = assignTargets(imageFiles);
+    for (const { file, target } of assignments) {
+      if (target === 'cover') {
+        await uploadToCover(file);
+      } else {
+        await uploadToAttachment(file, props.attachments.length);
+      }
+    }
+  };
+
+  const handlePaste = (event: ClipboardEvent) => {
+    const items = event.clipboardData?.items;
+    if (!items?.length) return;
+
+    const imageFiles = Array.from(items)
+      .filter((item) => item.type.startsWith('image/'))
+      .map((item) => item.getAsFile())
+      .filter((file): file is File => file !== null);
+
+    if (!imageFiles.length) return;
+
+    event.preventDefault();
+    event.stopPropagation();
+    void addFiles(imageFiles);
+  };
+
+  const handleDragOver = () => {
+    if (slotsLeft.value > 0) {
+      isDragOver.value = true;
+    }
+  };
+
+  const handleDragLeave = (event: DragEvent) => {
+    const related = event.relatedTarget as Node | null;
+    const current = event.currentTarget as HTMLElement | null;
+    if (current?.contains(related)) return;
+    isDragOver.value = false;
+  };
+
+  const handleDrop = (event: DragEvent) => {
+    isDragOver.value = false;
+    const files = event.dataTransfer?.files;
+    if (!files?.length) return;
+    void addFiles(extractImageFiles(files));
+  };
+
+  const removeCover = () => {
+    emit('update:image', '');
+  };
+
+  const removeAttachment = (index: number) => {
+    const next = [...props.attachments];
+    next.splice(index, 1);
+    emit('update:attachments', next);
+  };
+</script>
+
+<style scoped>
+  .social-post-media-zone {
+    position: relative;
+    border-radius: var(--radius-ui-lg);
+    transition:
+      box-shadow 0.15s ease,
+      background-color 0.15s ease;
+  }
+
+  .social-post-media-zone--dragover {
+    box-shadow: inset 0 0 0 2px var(--accent-secondary);
+    background: color-mix(in srgb, var(--accent-secondary) 6%, transparent);
+  }
+</style>

package/src/shared/ui/editors/index.ts

@@ -0,0 +1,6 @@
+export { default as AttachmentImagesEditor } from './AttachmentImagesEditor.vue';
+export { default as SocialPostMediaZone } from './SocialPostMediaZone.vue';
+export { default as ContentAttachmentsDisplay } from './ContentAttachmentsDisplay.vue';
+export { default as MarkdownEditor } from './MarkdownEditor.vue';
+export { default as MarkdownRenderer } from './MarkdownRenderer.vue';
+