@rynt/sdk 0.9.53

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

@@ -0,0 +1,956 @@
+<template>
+  <div ref="editorContainerRef" class="markdown-editor relative">
+    <Transition name="toolbar">
+      <div
+        v-if="mode === 'inline' && hasSelection && editor"
+        class="absolute flex bg-surface-overlay border border-border shadow-lg z-40"
+        :style="toolbarStyle"
+      >
+        <button
+          type="button"
+          @mousedown.prevent="editor.chain().focus().toggleBold().run()"
+          :class="toolbarBtnClass(editor.isActive('bold'))"
+          title="Жирный (Ctrl+B)"
+        >
+          B
+        </button>
+        <button
+          type="button"
+          @mousedown.prevent="editor.chain().focus().toggleItalic().run()"
+          :class="toolbarBtnClass(editor.isActive('italic'))"
+          title="Курсив (Ctrl+I)"
+        >
+          I
+        </button>
+        <button
+          type="button"
+          @mousedown.prevent="editor.chain().focus().toggleStrike().run()"
+          :class="toolbarBtnClass(editor.isActive('strike'))"
+          title="Зачеркнутый (Ctrl+Shift+S)"
+        >
+          S
+        </button>
+        <button
+          v-if="isRichMode"
+          type="button"
+          @mousedown.prevent="openImagePickerFromMenu"
+          class="px-2.5 py-1.5 hover:text-foreground hover:bg-card transition-colors text-muted-foreground"
+          title="Вставить изображение"
+        >
+          <Icon name="image" size="sm" />
+        </button>
+        <button
+          v-if="isRichMode"
+          type="button"
+          @mousedown.prevent="openGalleryPickerFromMenu"
+          class="px-2.5 py-1.5 hover:text-foreground hover:bg-card transition-colors text-muted-foreground"
+          title="Вставить галерею"
+        >
+          <Icon name="images" size="sm" />
+        </button>
+        <template
+          v-for="entry in markdownEditorToolbarRegistryEntries"
+          :key="`${entry.extensionId}:${entry.registryKey}`"
+        >
+          <component
+            :is="entry.value"
+            :editor="editor"
+            :is-rich-mode="isRichMode"
+            :disabled="props.disabled"
+            :mode="mode"
+          />
+        </template>
+      </div>
+    </Transition>
+
+    <div
+      v-if="mode === 'toolbar'"
+      class="flex items-center gap-2 mb-3 p-2 bg-card border border-border"
+    >
+      <Button
+        variant="ghost"
+        size="sm"
+        @mousedown.prevent="editor?.chain().focus().toggleBold().run()"
+        title="Жирный текст"
+      >
+        <Icon name="bold" size="sm" />
+      </Button>
+      <Button
+        variant="ghost"
+        size="sm"
+        @mousedown.prevent="editor?.chain().focus().toggleItalic().run()"
+        title="Курсив"
+      >
+        <Icon name="italic" size="sm" />
+      </Button>
+      <Button
+        variant="ghost"
+        size="sm"
+        @mousedown.prevent="editor?.chain().focus().toggleStrike().run()"
+        title="Зачеркнутый"
+      >
+        S
+      </Button>
+      <div class="w-px h-5 bg-border"></div>
+      <Button
+        variant="ghost"
+        size="sm"
+        @mousedown.prevent="
+          editor?.chain().focus().toggleHeading({ level: 2 }).run()
+        "
+        title="Заголовок"
+      >
+        H2
+      </Button>
+      <Button
+        variant="ghost"
+        size="sm"
+        @mousedown.prevent="editor?.chain().focus().toggleBulletList().run()"
+        title="Маркированный список"
+      >
+        <Icon name="list" size="sm" />
+      </Button>
+      <Button
+        variant="ghost"
+        size="sm"
+        @mousedown.prevent="editor?.chain().focus().toggleOrderedList().run()"
+        title="Нумерованный список"
+      >
+        <Icon name="list-ordered" size="sm" />
+      </Button>
+      <Button
+        v-if="isRichMode"
+        variant="ghost"
+        size="sm"
+        @mousedown.prevent="openImagePickerFromMenu"
+        title="Вставить изображение"
+      >
+        <Icon name="image" size="sm" />
+      </Button>
+      <Button
+        v-if="isRichMode"
+        variant="ghost"
+        size="sm"
+        @mousedown.prevent="openGalleryPickerFromMenu"
+        title="Вставить галерею"
+      >
+        <Icon name="images" size="sm" />
+      </Button>
+      <template
+        v-for="entry in markdownEditorToolbarRegistryEntries"
+        :key="`${entry.extensionId}:${entry.registryKey}`"
+      >
+        <component
+          :is="entry.value"
+          :editor="editor"
+          :is-rich-mode="isRichMode"
+          :disabled="props.disabled"
+          :mode="mode"
+        />
+      </template>
+    </div>
+
+    <input
+      v-if="isRichMode"
+      ref="imageInputRef"
+      type="file"
+      accept="image/*"
+      class="hidden"
+      @change="handleImageInputChange"
+    />
+
+    <input
+      v-if="isRichMode"
+      ref="galleryInputRef"
+      type="file"
+      accept="image/*"
+      multiple
+      class="hidden"
+      @change="handleGalleryInputChange"
+    />
+
+    <div class="editor-shell relative overflow-hidden border border-border bg-surface-overlay" :class="{ 'editor-shell--rich': isRichMode }">
+      <EditorContent :editor="editor" class="tiptap-editor" />
+      <div
+        v-if="isEmpty"
+        class="absolute top-0 left-0 p-4 text-sm text-subtle-fg pointer-events-none select-none"
+      >
+        {{ placeholder }}
+      </div>
+
+    </div>
+
+    <Teleport to="body">
+      <div
+        v-if="contextMenu.visible"
+        ref="contextMenuRef"
+        class="fixed z-[9999] min-w-[11rem] overflow-hidden rounded border border-border bg-card py-1 shadow-xl"
+        :style="contextMenuStyle"
+        @contextmenu.prevent
+      >
+        <template v-for="item in contextMenuItems" :key="item.id">
+          <div
+            v-if="item.type === 'separator'"
+            class="my-1 border-t border-border"
+          />
+          <button
+            v-else
+            type="button"
+            class="flex w-full items-center gap-2 px-3 py-2 text-left text-sm transition-colors hover:bg-surface-overlay"
+            :class="
+              item.destructive
+                ? 'text-destructive-soft hover:text-destructive'
+                : item.active
+                  ? 'text-foreground'
+                  : 'text-muted-foreground'
+            "
+            @mousedown.prevent="item.action && runContextMenuAction(item.action)"
+          >
+            <Icon v-if="item.icon" :name="item.icon" size="sm" class="shrink-0" />
+            <span>{{ item.label }}</span>
+          </button>
+        </template>
+      </div>
+    </Teleport>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import {
+    computed,
+    nextTick,
+    onBeforeUnmount,
+    onMounted,
+    ref,
+    watch,
+  } from 'vue';
+  import { Button, Icon } from '..';
+  import { EditorContent, useEditor } from '@tiptap/vue-3';
+  import type { AnyExtension, Editor as TiptapEditor } from '@tiptap/core';
+  import StarterKit from '@tiptap/starter-kit';
+  import Link from '@tiptap/extension-link';
+  import { toEditorHtmlContent } from '../../utils/rich-content';
+  import { uploadImage } from '../../utils/uploadImage';
+  import {
+    MarkdownEditorImage,
+    insertImageAtCursor,
+    insertImageGallery,
+    removeImageByUploadId,
+    updateImageByUploadId,
+  } from './markdown-editor-image';
+  import {
+    MarkdownEditorImageGallery,
+    removeGalleryImageByUploadId,
+    updateGalleryImageByUploadId,
+  } from './markdown-editor-gallery';
+  import { extensionRegistriesRevision } from '../../../extensions/registries/store';
+  import {
+    useMarkdownEditorToolbarActionsRegistry,
+    useMarkdownEditorTiptapExtensionsRegistry,
+  } from '../../../extensions/registries/builtins';
+
+  interface Props {
+    modelValue: string;
+    placeholder?: string;
+    mode?: 'toolbar' | 'inline';
+    minHeight?: string | number;
+    enableImages?: boolean;
+    contentMode?: 'plain' | 'rich';
+    uploadFolder?: string;
+    disabled?: boolean;
+  }
+
+  const props = withDefaults(defineProps<Props>(), {
+    placeholder: 'Введите описание...',
+    mode: 'inline',
+    enableImages: true,
+    contentMode: 'rich',
+    uploadFolder: 'content',
+    disabled: false,
+  });
+
+  const emit = defineEmits<{
+    'update:modelValue': [value: string];
+  }>();
+
+  type ContextMenuAction =
+    | 'bold'
+    | 'italic'
+    | 'strike'
+    | 'heading'
+    | 'bulletList'
+    | 'orderedList'
+    | 'insertImage'
+    | 'insertGallery';
+
+  interface ContextMenuItem {
+    id: string;
+    label: string;
+    icon?: string;
+    action?: ContextMenuAction;
+    active?: boolean;
+    type?: 'separator';
+    destructive?: boolean;
+  }
+
+  const hasSelection = ref(false);
+  const imageInputRef = ref<HTMLInputElement | null>(null);
+  const galleryInputRef = ref<HTMLInputElement | null>(null);
+  const mode = computed(() => props.mode);
+  const placeholder = computed(() => props.placeholder);
+  const isRichMode = computed(
+    () => props.enableImages && props.contentMode === 'rich',
+  );
+  const editorContainerRef = ref<HTMLElement | null>(null);
+  const contextMenuRef = ref<HTMLElement | null>(null);
+  const toolbarStyle = ref<Record<string, string>>({});
+  const contextMenu = ref({ visible: false, x: 0, y: 0 });
+  const isApplyingExternalContent = ref(false);
+  let lastEmittedHtml = '';
+
+  const contextMenuStyle = computed(() => ({
+    left: `${contextMenu.value.x}px`,
+    top: `${contextMenu.value.y}px`,
+  }));
+  const markdownEditorToolbarRegistryEntries = computed(() =>
+    useMarkdownEditorToolbarActionsRegistry().entries(),
+  );
+
+  const toolbarBtnClass = (active: boolean) =>
+    active
+      ? 'px-2.5 py-1.5 text-foreground bg-card transition-colors text-xs font-bold'
+      : 'px-2.5 py-1.5 text-muted-foreground hover:text-foreground hover:bg-card transition-colors text-xs font-bold';
+
+  const contextMenuItems = computed<ContextMenuItem[]>(() => {
+    const ed = editor.value;
+    if (!ed) return [];
+
+    const items: ContextMenuItem[] = [
+      {
+        id: 'bold',
+        label: 'Жирный',
+        icon: 'bold',
+        action: 'bold',
+        active: ed.isActive('bold'),
+      },
+      {
+        id: 'italic',
+        label: 'Курсив',
+        icon: 'italic',
+        action: 'italic',
+        active: ed.isActive('italic'),
+      },
+      {
+        id: 'strike',
+        label: 'Зачеркнутый',
+        action: 'strike',
+        active: ed.isActive('strike'),
+      },
+      { id: 'sep-heading', label: 'Заголовок H2', action: 'heading', active: ed.isActive('heading', { level: 2 }) },
+      {
+        id: 'bulletList',
+        label: 'Маркированный список',
+        icon: 'list',
+        action: 'bulletList',
+        active: ed.isActive('bulletList'),
+      },
+      {
+        id: 'orderedList',
+        label: 'Нумерованный список',
+        icon: 'list-ordered',
+        action: 'orderedList',
+        active: ed.isActive('orderedList'),
+      },
+    ];
+
+    if (isRichMode.value) {
+      items.push({ id: 'sep-image', type: 'separator', label: '' });
+      items.push({
+        id: 'insertImage',
+        label: 'Вставить изображение',
+        icon: 'image',
+        action: 'insertImage',
+      });
+      items.push({
+        id: 'insertGallery',
+        label: 'Вставить галерею',
+        icon: 'images',
+        action: 'insertGallery',
+      });
+    }
+
+    return items;
+  });
+
+  const updateInlineToolbarPosition = (ed: {
+    state: { selection: { from: number; to: number } };
+    view: {
+      coordsAtPos: (pos: number) => {
+        left: number;
+        right: number;
+        top: number;
+        bottom: number;
+      };
+    };
+  }) => {
+    if (!editorContainerRef.value) return;
+
+    const { from, to } = ed.state.selection;
+    if (from === to) return;
+
+    const start = ed.view.coordsAtPos(from);
+    const end = ed.view.coordsAtPos(to);
+    const containerRect = editorContainerRef.value.getBoundingClientRect();
+
+    const rawX =
+      (Math.min(start.left, end.left) + Math.max(start.right, end.right)) / 2;
+    const x = Math.max(
+      16,
+      Math.min(rawX - containerRect.left, containerRect.width - 16),
+    );
+
+    const top = Math.min(start.top, end.top) - containerRect.top;
+    const bottom = Math.max(start.bottom, end.bottom) - containerRect.top;
+    const preferAbove = top > 44;
+
+    toolbarStyle.value = {
+      left: `${x}px`,
+      top: `${preferAbove ? top - 8 : bottom + 8}px`,
+      transform: preferAbove ? 'translate(-50%, -100%)' : 'translate(-50%, 0)',
+    };
+  };
+
+  const getRegistryTiptapExtensions = (): AnyExtension[] => {
+    void extensionRegistriesRevision.value;
+    return useMarkdownEditorTiptapExtensionsRegistry()
+      .entries()
+      .map((entry) => entry.value);
+  };
+
+  const buildExtensions = (): AnyExtension[] => {
+    const extensions: AnyExtension[] = [
+      StarterKit.configure({
+        heading: { levels: [1, 2, 3] },
+      }),
+      Link.configure({
+        openOnClick: false,
+        enableClickSelection: true,
+        autolink: true,
+        linkOnPaste: true,
+        defaultProtocol: 'https',
+        HTMLAttributes: {
+          target: '_blank',
+          rel: 'noopener noreferrer',
+        },
+      }),
+      ...getRegistryTiptapExtensions(),
+    ];
+
+    if (isRichMode.value) {
+      extensions.push(
+        MarkdownEditorImage.configure({
+          inline: true,
+          allowBase64: false,
+        }),
+        MarkdownEditorImageGallery,
+      );
+    }
+
+    return extensions;
+  };
+
+  const closeContextMenu = () => {
+    contextMenu.value.visible = false;
+  };
+
+  const openContextMenu = (clientX: number, clientY: number) => {
+    const menuWidth = 200;
+    const menuHeight = 320;
+    const padding = 8;
+
+    contextMenu.value = {
+      visible: true,
+      x: Math.min(clientX, window.innerWidth - menuWidth - padding),
+      y: Math.min(clientY, window.innerHeight - menuHeight - padding),
+    };
+  };
+
+  const runContextMenuAction = (action: ContextMenuAction) => {
+    const ed = editor.value;
+    if (!ed) return;
+
+    closeContextMenu();
+
+    switch (action) {
+      case 'bold':
+        ed.chain().focus().toggleBold().run();
+        break;
+      case 'italic':
+        ed.chain().focus().toggleItalic().run();
+        break;
+      case 'strike':
+        ed.chain().focus().toggleStrike().run();
+        break;
+      case 'heading':
+        ed.chain().focus().toggleHeading({ level: 2 }).run();
+        break;
+      case 'bulletList':
+        ed.chain().focus().toggleBulletList().run();
+        break;
+      case 'orderedList':
+        ed.chain().focus().toggleOrderedList().run();
+        break;
+      case 'insertImage':
+        openImagePickerFromMenu();
+        break;
+      case 'insertGallery':
+        openGalleryPickerFromMenu();
+        break;
+    }
+  };
+
+  const getEditorHtml = (ed: TiptapEditor) =>
+    ed.isEmpty ? '' : ed.getHTML();
+
+  const createUploadId = () =>
+    typeof crypto !== 'undefined' && crypto.randomUUID
+      ? crypto.randomUUID()
+      : `upload-${Date.now()}-${Math.random().toString(36).slice(2)}`;
+
+  const insertImageFromFile = (file: File) => {
+    const ed = editor.value;
+    if (!isRichMode.value || !ed) return;
+
+    const uploadId = createUploadId();
+    const previewUrl = URL.createObjectURL(file);
+
+    insertImageAtCursor(ed, {
+      src: previewUrl,
+      uploading: true,
+      uploadId,
+    });
+
+    void (async () => {
+      try {
+        const result = await uploadImage(file, {
+          folder: props.uploadFolder,
+          maxSizeBytes: 10 * 1024 * 1024,
+        });
+
+        if (!editor.value) return;
+
+        updateImageByUploadId(editor.value, uploadId, {
+          src: result.url,
+          uploading: false,
+          uploadId: null,
+        });
+      } catch (error) {
+        console.error('[MarkdownEditor] Не удалось загрузить изображение:', error);
+        if (editor.value) {
+          removeImageByUploadId(editor.value, uploadId);
+        }
+      } finally {
+        URL.revokeObjectURL(previewUrl);
+      }
+    })();
+  };
+
+  const openGalleryPickerFromMenu = () => {
+    closeContextMenu();
+    nextTick(() => {
+      galleryInputRef.value?.click();
+    });
+  };
+
+  const handleGalleryInputChange = async (event: Event) => {
+    const input = event.target as HTMLInputElement;
+    const files = input.files ? Array.from(input.files) : [];
+    input.value = '';
+    if (!files.length) return;
+
+    const ed = editor.value;
+    if (!isRichMode.value || !ed) return;
+
+    const entries = files.slice(0, 12).map((file) => ({
+      file,
+      uploadId: createUploadId(),
+      previewUrl: URL.createObjectURL(file),
+    }));
+
+    insertImageGallery(
+      ed,
+      entries.map((entry) => ({
+        src: entry.previewUrl,
+        alt: '',
+        uploading: true,
+        uploadId: entry.uploadId,
+      })),
+    );
+
+    await Promise.all(
+      entries.map(async (entry) => {
+        try {
+          const result = await uploadImage(entry.file, {
+            folder: props.uploadFolder,
+            maxSizeBytes: 10 * 1024 * 1024,
+          });
+
+          if (editor.value) {
+            updateGalleryImageByUploadId(editor.value, entry.uploadId, {
+              src: result.url,
+            });
+          }
+        } catch (error) {
+          console.error('[MarkdownEditor] Не удалось загрузить изображение галереи:', error);
+          if (editor.value) {
+            removeGalleryImageByUploadId(editor.value, entry.uploadId);
+          }
+        } finally {
+          URL.revokeObjectURL(entry.previewUrl);
+        }
+      }),
+    );
+  };
+
+  const openImagePickerFromMenu = () => {
+    closeContextMenu();
+    nextTick(() => {
+      imageInputRef.value?.click();
+    });
+  };
+
+  const handleImageInputChange = (event: Event) => {
+    const input = event.target as HTMLInputElement;
+    const file = input.files?.[0];
+    input.value = '';
+    if (file) {
+      insertImageFromFile(file);
+    }
+  };
+
+  const handleDocumentPointerDown = (event: MouseEvent) => {
+    if (!contextMenu.value.visible) return;
+    const target = event.target as Node | null;
+    if (contextMenuRef.value?.contains(target)) return;
+    closeContextMenu();
+  };
+
+  const handleDocumentKeyDown = (event: KeyboardEvent) => {
+    if (event.key === 'Escape') {
+      closeContextMenu();
+    }
+  };
+
+  onMounted(() => {
+    document.addEventListener('mousedown', handleDocumentPointerDown);
+    document.addEventListener('keydown', handleDocumentKeyDown);
+  });
+
+  onBeforeUnmount(() => {
+    document.removeEventListener('mousedown', handleDocumentPointerDown);
+    document.removeEventListener('keydown', handleDocumentKeyDown);
+  });
+
+  const editor = useEditor({
+    extensions: buildExtensions(),
+    content: toEditorHtmlContent(props.modelValue || ''),
+    editable: !props.disabled,
+    editorProps: {
+      attributes: {
+        class:
+          'p-4 text-foreground focus:outline-none focus:border-accent-secondary 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 overflow-y-auto',
+        style: props.minHeight
+          ? `min-height: ${props.minHeight}`
+          : 'min-height: 300px',
+      },
+      handleDOMEvents: {
+        contextmenu: (_view, event) => {
+          event.preventDefault();
+          const ed = editor.value;
+          if (!ed) return true;
+
+          ed.chain().focus().run();
+          openContextMenu(event.clientX, event.clientY);
+          return true;
+        },
+      },
+      handlePaste: (_view, event) => {
+        if (!isRichMode.value) return false;
+        const items = event.clipboardData?.items;
+        if (!items) return false;
+
+        for (const item of items) {
+          if (item.type.startsWith('image/')) {
+            event.preventDefault();
+            const file = item.getAsFile();
+            if (file) {
+              insertImageFromFile(file);
+            }
+            return true;
+          }
+        }
+
+        return false;
+      },
+      handleDrop: (_view, event, _slice, moved) => {
+        if (!isRichMode.value || moved) return false;
+        const files = event.dataTransfer?.files;
+        if (!files?.length) return false;
+
+        const imageFile = Array.from(files).find((file) =>
+          file.type.startsWith('image/'),
+        );
+        if (!imageFile) return false;
+
+        event.preventDefault();
+        insertImageFromFile(imageFile);
+        return true;
+      },
+    },
+    onUpdate: ({ editor: ed }) => {
+      if (isApplyingExternalContent.value) return;
+
+      const html = getEditorHtml(ed);
+      if (html === lastEmittedHtml) return;
+
+      lastEmittedHtml = html;
+      emit('update:modelValue', html);
+    },
+    onCreate: ({ editor: ed }) => {
+      lastEmittedHtml = getEditorHtml(ed);
+    },
+    onSelectionUpdate: ({ editor: ed }) => {
+      const { from, to } = ed.state.selection;
+      hasSelection.value = from !== to;
+      if (hasSelection.value && mode.value === 'inline') {
+        nextTick(() => updateInlineToolbarPosition(ed));
+      }
+    },
+    onBlur: () => {
+      hasSelection.value = false;
+    },
+  });
+
+  const isEmpty = computed(() => !props.modelValue);
+
+  watch(
+    () => props.disabled,
+    (disabled) => {
+      editor.value?.setEditable(!disabled);
+    },
+  );
+
+  watch(
+    () => props.modelValue,
+    (value) => {
+      if (!editor.value || isApplyingExternalContent.value) return;
+
+      const nextHtml = value || '';
+      if (nextHtml === lastEmittedHtml) return;
+
+      const currentHtml = getEditorHtml(editor.value);
+      if (nextHtml === currentHtml) {
+        lastEmittedHtml = nextHtml;
+        return;
+      }
+
+      isApplyingExternalContent.value = true;
+      editor.value.commands.setContent(toEditorHtmlContent(nextHtml), { emitUpdate: false });
+      lastEmittedHtml = getEditorHtml(editor.value);
+      nextTick(() => {
+        isApplyingExternalContent.value = false;
+      });
+    },
+  );
+</script>
+
+<style scoped>
+  .tiptap-editor :deep(.ProseMirror) {
+    min-height: 300px;
+  }
+
+  .tiptap-editor :deep(.ProseMirror p) {
+    margin-bottom: 0.75rem;
+  }
+
+  .tiptap-editor :deep(.ProseMirror:focus) {
+    outline: none;
+  }
+
+  .tiptap-editor :deep(.ProseMirror ul),
+  .tiptap-editor :deep(.ProseMirror ol) {
+    padding-left: 1.25rem;
+    margin-bottom: 0.75rem;
+  }
+
+  .tiptap-editor :deep(.ProseMirror li > p) {
+    margin-bottom: 0;
+  }
+
+  .tiptap-editor :deep(.ProseMirror ul) {
+    list-style-type: disc;
+  }
+
+  .tiptap-editor :deep(.ProseMirror ol) {
+    list-style-type: decimal;
+  }
+
+  .tiptap-editor :deep(.ProseMirror li::marker) {
+    color: #9ca3af;
+  }
+
+  .tiptap-editor :deep(.ProseMirror a) {
+    color: #818cf8;
+    text-decoration: underline;
+    text-underline-offset: 2px;
+  }
+
+  .tiptap-editor :deep(.ProseMirror a:hover) {
+    color: #a5b4fc;
+  }
+
+  .editor-shell:not(.editor-shell--rich) .tiptap-editor :deep(.ProseMirror img),
+  .editor-shell:not(.editor-shell--rich) .tiptap-editor :deep(.md-editor-image-wrap) {
+    display: none;
+  }
+
+  .editor-shell--rich .tiptap-editor :deep(.ProseMirror img) {
+    display: inline-block;
+    max-width: 100%;
+    height: auto;
+    border-radius: var(--radius-ui-lg);
+    margin: 0.5rem 0;
+    vertical-align: middle;
+  }
+
+  .editor-shell--rich .tiptap-editor :deep(.md-gallery) {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(5.5rem, 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);
+  }
+
+  .editor-shell--rich .tiptap-editor :deep(.md-gallery img),
+  .editor-shell--rich .tiptap-editor :deep(.md-gallery__image) {
+    width: 100%;
+    aspect-ratio: 1;
+    object-fit: cover;
+    margin: 0;
+  }
+
+  .editor-shell--rich .tiptap-editor :deep(.md-gallery__cell) {
+    position: relative;
+    display: block;
+    overflow: hidden;
+    border-radius: var(--radius-ui-md);
+    aspect-ratio: 1;
+  }
+
+  .editor-shell--rich .tiptap-editor :deep(.md-gallery__cell--loading) {
+    background: color-mix(in srgb, var(--card) 70%, var(--muted-foreground));
+    animation: md-gallery-shimmer 1.2s ease-in-out infinite;
+  }
+
+  .editor-shell--rich .tiptap-editor :deep(.md-gallery__cell--loading .md-gallery__image) {
+    opacity: 0.45;
+    filter: blur(1px);
+  }
+
+  .editor-shell--rich .tiptap-editor :deep(.md-gallery__cell--loading::after) {
+    content: '';
+    position: absolute;
+    inset: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: color-mix(in srgb, var(--background) 35%, transparent);
+    pointer-events: none;
+  }
+
+  .editor-shell--rich .tiptap-editor :deep(.md-gallery__cell--loading::before) {
+    content: '';
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    z-index: 1;
+    width: 1.25rem;
+    height: 1.25rem;
+    margin: -0.625rem 0 0 -0.625rem;
+    border-radius: 9999px;
+    border: 2px solid color-mix(in srgb, var(--foreground) 25%, transparent);
+    border-top-color: var(--accent-secondary);
+    animation: md-gallery-spin 0.7s linear infinite;
+    pointer-events: none;
+  }
+
+  .editor-shell--rich .tiptap-editor :deep(.md-editor-image-wrap) {
+    position: relative;
+    display: inline-block;
+    max-width: 100%;
+    vertical-align: middle;
+  }
+
+  .editor-shell--rich .tiptap-editor :deep(.md-editor-image-wrap--loading) {
+    background: color-mix(in srgb, var(--card) 70%, var(--muted-foreground));
+    border-radius: var(--radius-ui-lg);
+    animation: md-gallery-shimmer 1.2s ease-in-out infinite;
+  }
+
+  .editor-shell--rich .tiptap-editor :deep(.md-editor-image-wrap--loading .md-editor-image) {
+    opacity: 0.45;
+    filter: blur(1px);
+  }
+
+  .editor-shell--rich .tiptap-editor :deep(.md-editor-image-wrap--loading::before) {
+    content: '';
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    z-index: 1;
+    width: 1.25rem;
+    height: 1.25rem;
+    margin: -0.625rem 0 0 -0.625rem;
+    border-radius: 9999px;
+    border: 2px solid color-mix(in srgb, var(--foreground) 25%, transparent);
+    border-top-color: var(--accent-secondary);
+    animation: md-gallery-spin 0.7s linear infinite;
+    pointer-events: none;
+  }
+
+  @keyframes md-gallery-shimmer {
+    0%,
+    100% {
+      opacity: 1;
+    }
+    50% {
+      opacity: 0.72;
+    }
+  }
+
+  @keyframes md-gallery-spin {
+    to {
+      transform: rotate(360deg);
+    }
+  }
+
+  .editor-shell:focus-within {
+    border-color: var(--accent-secondary);
+  }
+
+  .toolbar-enter-active,
+  .toolbar-leave-active {
+    transition:
+      opacity 0.12s ease,
+      transform 0.12s ease;
+  }
+
+  .toolbar-enter-from,
+  .toolbar-leave-to {
+    opacity: 0;
+    transform: translateY(4px);
+  }
+</style>