@rynt/sdk 0.9.53

package/src/shared/ui/editors/markdown-editor-gallery.ts

@@ -0,0 +1,234 @@
+import { Node, mergeAttributes } from '@tiptap/core';
+import type { Editor } from '@tiptap/core';
+
+export interface GalleryImage {
+  src: string;
+  alt?: string;
+  uploading?: boolean;
+  uploadId?: string | null;
+}
+
+export function parseGalleryImages(raw: string | null | undefined): GalleryImage[] {
+  if (!raw) return [];
+  try {
+    const parsed = JSON.parse(raw) as unknown;
+    if (!Array.isArray(parsed)) return [];
+    return parsed
+      .map((item) => {
+        if (typeof item === 'string' && item) return { src: item, alt: '' };
+        if (item && typeof item === 'object' && 'src' in item) {
+          const src = String((item as { src: unknown }).src || '');
+          if (!src) return null;
+          const alt =
+            'alt' in item && typeof (item as { alt?: unknown }).alt === 'string'
+              ? (item as { alt: string }).alt
+              : '';
+          const uploading =
+            'uploading' in item && (item as { uploading?: unknown }).uploading === true;
+          const uploadId =
+            'uploadId' in item && typeof (item as { uploadId?: unknown }).uploadId === 'string'
+              ? (item as { uploadId: string }).uploadId
+              : null;
+          return { src, alt, uploading, uploadId };
+        }
+        return null;
+      })
+      .filter((item): item is GalleryImage => item !== null);
+  } catch {
+    return [];
+  }
+}
+
+/** ProseMirror хранит только примитивы — images сериализуем в JSON-строку. */
+export function serializeGalleryImagesAttr(
+  images: GalleryImage[] | string | null | undefined,
+): string {
+  if (typeof images === 'string') {
+    return JSON.stringify(parseGalleryImages(images));
+  }
+  if (!Array.isArray(images) || !images.length) return '[]';
+  return JSON.stringify(
+    images.map((image) => {
+      const entry: Record<string, string | boolean> = {
+        src: image.src,
+        alt: image.alt ?? '',
+      };
+      if (image.uploading) entry.uploading = true;
+      if (image.uploadId) entry.uploadId = image.uploadId;
+      return entry;
+    }),
+  );
+}
+
+function imagesAttrToList(images: GalleryImage[] | string | null | undefined): GalleryImage[] {
+  if (typeof images === 'string') return parseGalleryImages(images);
+  if (Array.isArray(images)) return images;
+  return [];
+}
+
+export function findGalleryImageUpload(
+  editor: Editor,
+  uploadId: string,
+): { galleryPos: number; imageIndex: number } | null {
+  let found: { galleryPos: number; imageIndex: number } | null = null;
+
+  editor.state.doc.descendants((node, pos) => {
+    if (node.type.name !== 'imageGallery') return;
+    const images = parseGalleryImages(node.attrs.images);
+    const index = images.findIndex((image) => image.uploadId === uploadId);
+    if (index >= 0) {
+      found = { galleryPos: pos, imageIndex: index };
+      return false;
+    }
+  });
+
+  return found;
+}
+
+export function updateGalleryImageByUploadId(
+  editor: Editor,
+  uploadId: string,
+  patch: Partial<GalleryImage>,
+): void {
+  const located = findGalleryImageUpload(editor, uploadId);
+  if (!located) return;
+
+  const node = editor.state.doc.nodeAt(located.galleryPos);
+  if (!node) return;
+
+  const images = parseGalleryImages(node.attrs.images);
+  const current = images[located.imageIndex];
+  if (!current) return;
+
+  images[located.imageIndex] = {
+    ...current,
+    ...patch,
+    uploading: false,
+    uploadId: null,
+  };
+
+  editor
+    .chain()
+    .command(({ tr, dispatch }) => {
+      tr.setNodeMarkup(located.galleryPos, undefined, {
+        ...node.attrs,
+        images: serializeGalleryImagesAttr(images),
+      });
+      if (dispatch) dispatch(tr);
+      return true;
+    })
+    .run();
+}
+
+export function removeGalleryImageByUploadId(editor: Editor, uploadId: string): void {
+  const located = findGalleryImageUpload(editor, uploadId);
+  if (!located) return;
+
+  const node = editor.state.doc.nodeAt(located.galleryPos);
+  if (!node) return;
+
+  const images = parseGalleryImages(node.attrs.images).filter(
+    (image) => image.uploadId !== uploadId,
+  );
+
+  if (!images.length) {
+    editor
+      .chain()
+      .deleteRange({
+        from: located.galleryPos,
+        to: located.galleryPos + node.nodeSize,
+      })
+      .run();
+    return;
+  }
+
+  editor
+    .chain()
+    .command(({ tr, dispatch }) => {
+      tr.setNodeMarkup(located.galleryPos, undefined, {
+        ...node.attrs,
+        images: serializeGalleryImagesAttr(images),
+      });
+      if (dispatch) dispatch(tr);
+      return true;
+    })
+    .run();
+}
+
+export function insertImageGallery(editor: Editor, images: GalleryImage[]): void {
+  if (!images.length) return;
+  editor
+    .chain()
+    .focus()
+    .insertContent({
+      type: 'imageGallery',
+      attrs: {
+        images: serializeGalleryImagesAttr(images),
+      },
+    })
+    .run();
+}
+
+export const MarkdownEditorImageGallery = Node.create({
+  name: 'imageGallery',
+  group: 'block',
+  atom: true,
+  draggable: true,
+
+  addAttributes() {
+    return {
+      images: {
+        default: '[]',
+        parseHTML: (element) => element.getAttribute('data-images') || '[]',
+        renderHTML: (attributes) => {
+          const json = serializeGalleryImagesAttr(attributes.images);
+          return { 'data-images': json };
+        },
+      },
+    };
+  },
+
+  parseHTML() {
+    return [{ tag: 'div[data-type="image-gallery"]' }];
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    const dataImages =
+      typeof HTMLAttributes['data-images'] === 'string'
+        ? HTMLAttributes['data-images']
+        : serializeGalleryImagesAttr(HTMLAttributes.images);
+    const images = imagesAttrToList(dataImages);
+    const { images: _removed, ...rest } = HTMLAttributes;
+
+    return [
+      'div',
+      mergeAttributes(rest, {
+        'data-type': 'image-gallery',
+        class: 'md-gallery',
+        'data-images': dataImages,
+      }),
+      ...images.map((image) => {
+        const imgAttrs = {
+          src: image.src,
+          alt: image.alt || '',
+          class: 'md-gallery__image',
+          loading: image.uploading ? undefined : ('lazy' as const),
+        };
+
+        if (image.uploading) {
+          return [
+            'span',
+            {
+              class: 'md-gallery__cell md-gallery__cell--loading',
+              'data-uploading': 'true',
+              ...(image.uploadId ? { 'data-upload-id': image.uploadId } : {}),
+            },
+            ['img', imgAttrs],
+          ];
+        }
+
+        return ['img', imgAttrs];
+      }),
+    ];
+  },
+});

package/src/shared/ui/editors/markdown-editor-image.ts

@@ -0,0 +1,178 @@
+import Image from '@tiptap/extension-image';
+import { mergeAttributes } from '@tiptap/core';
+import type { Editor } from '@tiptap/core';
+
+export interface EditorAttachmentImage {
+  pos: number;
+  src: string;
+  alt: string;
+  uploading: boolean;
+  uploadId: string | null;
+}
+
+export const MarkdownEditorImage = Image.extend({
+  addAttributes() {
+    return {
+      ...this.parent?.(),
+      uploadId: {
+        default: null,
+        parseHTML: (element) => element.getAttribute('data-upload-id'),
+        renderHTML: (attributes) =>
+          attributes.uploadId ? { 'data-upload-id': attributes.uploadId } : {},
+      },
+      uploading: {
+        default: false,
+        parseHTML: (element) => {
+          const host =
+            element instanceof HTMLImageElement
+              ? element.closest('[data-uploading]')
+              : element;
+          return host?.getAttribute('data-uploading') === 'true';
+        },
+        renderHTML: (attributes) =>
+          attributes.uploading ? { 'data-uploading': 'true' } : {},
+      },
+    };
+  },
+
+  parseHTML() {
+    return [
+      {
+        tag: 'span[data-uploading] img[src]',
+        getAttrs: (node) => {
+          const img = node as HTMLImageElement;
+          const span = img.closest('[data-uploading]');
+          return {
+            src: img.getAttribute('src'),
+            alt: img.getAttribute('alt'),
+            title: img.getAttribute('title'),
+            uploading: span?.getAttribute('data-uploading') === 'true',
+            uploadId: span?.getAttribute('data-upload-id'),
+          };
+        },
+      },
+      {
+        tag: 'img[src]',
+        getAttrs: (node) => {
+          const img = node as HTMLImageElement;
+          return {
+            src: img.getAttribute('src'),
+            alt: img.getAttribute('alt'),
+            title: img.getAttribute('title'),
+          };
+        },
+      },
+    ];
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    const { uploading, uploadId, ...rest } = HTMLAttributes;
+    const imgAttrs = mergeAttributes(this.options.HTMLAttributes, rest, {
+      class: 'md-editor-image',
+    });
+
+    if (uploading) {
+      return [
+        'span',
+        {
+          class: 'md-editor-image-wrap md-editor-image-wrap--loading',
+          'data-uploading': 'true',
+          ...(uploadId ? { 'data-upload-id': uploadId } : {}),
+        },
+        ['img', imgAttrs],
+      ];
+    }
+
+    return ['img', imgAttrs];
+  },
+});
+
+export function getDocumentImages(editor: Editor): EditorAttachmentImage[] {
+  const items: EditorAttachmentImage[] = [];
+
+  editor.state.doc.forEach((node, offset) => {
+    if (node.type.name !== 'image') return;
+    items.push({
+      pos: offset,
+      src: node.attrs.src ?? '',
+      alt: node.attrs.alt ?? '',
+      uploading: Boolean(node.attrs.uploading),
+      uploadId: node.attrs.uploadId ?? null,
+    });
+  });
+
+  return items;
+}
+
+export function findImagePosByUploadId(
+  editor: Editor,
+  uploadId: string,
+): number | null {
+  let foundPos: number | null = null;
+
+  editor.state.doc.descendants((node, pos) => {
+    if (node.type.name === 'image' && node.attrs.uploadId === uploadId) {
+      foundPos = pos;
+      return false;
+    }
+  });
+
+  return foundPos;
+}
+
+export function updateImageByUploadId(
+  editor: Editor,
+  uploadId: string,
+  patch: Record<string, unknown>,
+): void {
+  const pos = findImagePosByUploadId(editor, uploadId);
+  if (pos === null) return;
+
+  const node = editor.state.doc.nodeAt(pos);
+  if (!node) return;
+
+  editor
+    .chain()
+    .command(({ tr, dispatch }) => {
+      tr.setNodeMarkup(pos, undefined, { ...node.attrs, ...patch });
+      if (dispatch) dispatch(tr);
+      return true;
+    })
+    .run();
+}
+
+export function removeImageByUploadId(editor: Editor, uploadId: string): void {
+  const pos = findImagePosByUploadId(editor, uploadId);
+  if (pos === null) return;
+  removeImageAtPos(editor, pos);
+}
+
+export function removeImageAtPos(editor: Editor, pos: number): void {
+  const node = editor.state.doc.nodeAt(pos);
+  if (!node || node.type.name !== 'image') return;
+
+  editor
+    .chain()
+    .command(({ tr, dispatch }) => {
+      tr.delete(pos, pos + node.nodeSize);
+      if (dispatch) dispatch(tr);
+      return true;
+    })
+    .run();
+}
+
+export function insertImageAtCursor(
+  editor: Editor,
+  attrs: Record<string, unknown>,
+): void {
+  editor
+    .chain()
+    .focus()
+    .insertContent({
+      type: 'image',
+      attrs,
+    })
+    .run();
+}
+
+export { insertImageGallery } from './markdown-editor-gallery';

package/src/shared/ui/form/Checkbox.vue

@@ -0,0 +1,38 @@
+<template>
+  <label :class="labelClasses">
+    <input
+      type="checkbox"
+      :checked="modelValue"
+      :disabled="disabled"
+      class="rnt-switch-input"
+      @change="
+        $emit('update:modelValue', ($event.target as HTMLInputElement).checked)
+      "
+    />
+    <span class="rnt-switch-track" aria-hidden="true">
+      <span class="rnt-switch-thumb" />
+    </span>
+  </label>
+</template>
+
+<script setup lang="ts">
+  import { computed } from 'vue';
+  import { cn } from '../../utils/cn';
+
+  interface Props {
+    modelValue?: boolean;
+    disabled?: boolean;
+  }
+
+  const props = withDefaults(defineProps<Props>(), {
+    disabled: false,
+  });
+
+  defineEmits<{
+    'update:modelValue': [value: boolean];
+  }>();
+
+  const labelClasses = computed(() => {
+    return cn('rnt-switch', props.disabled && 'rnt-switch--disabled');
+  });
+</script>

package/src/shared/ui/form/FormField.vue

@@ -0,0 +1,30 @@
+<template>
+  <div :class="classes">
+    <label v-if="label" class="block text-sm font-medium text-muted-foreground">
+      {{ label }}
+      <span v-if="required" class="text-red-400">*</span>
+    </label>
+    <slot />
+    <p v-if="error" class="text-xs text-red-400">
+      {{ error }}
+    </p>
+    <p v-else-if="hint" class="text-xs text-subtle-fg">
+      {{ hint }}
+    </p>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { cn } from '../../utils/cn';
+
+const props = defineProps<{
+  label?: string;
+  hint?: string;
+  error?: string | null;
+  required?: boolean;
+  class?: string;
+}>();
+
+const classes = computed(() => cn('space-y-1.5', props.class));
+</script>

package/src/shared/ui/form/FormGrid.vue

@@ -0,0 +1,38 @@
+<template>
+  <div :class="classes">
+    <slot />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { cn } from '../../utils/cn';
+
+const props = withDefaults(
+  defineProps<{
+    cols?: 1 | 2 | 3;
+    gap?: 'sm' | 'md' | 'lg';
+    class?: string;
+  }>(),
+  {
+    cols: 2,
+    gap: 'md',
+  },
+);
+
+const colClasses = {
+  1: 'grid-cols-1',
+  2: 'grid-cols-1 md:grid-cols-2',
+  3: 'grid-cols-1 md:grid-cols-3',
+};
+
+const gapClasses = {
+  sm: 'gap-2',
+  md: 'gap-4',
+  lg: 'gap-6',
+};
+
+const classes = computed(() =>
+  cn('grid', colClasses[props.cols], gapClasses[props.gap], props.class),
+);
+</script>