Merge remote-tracking branch 'hub/main' into feature/sse-connect

2024-01-17 15:13:05 +03:00 · 2024-01-17 15:13:05 +03:00 · c3a353fedb
commit c3a353fedb
parent 21b04ef9e9 2bb600c8c6
21 changed files with 254 additions and 214 deletions
--- a/package-lock.json
+++ b/package-lock.json
@ -120,7 +120,7 @@
        "stylelint-config-standard-scss": "11.1.0",
        "stylelint-order": "6.0.3",
        "stylelint-scss": "5.3.1",
-        "swiper": "9.4.1",
+        "swiper": "11.0.5",
        "throttle-debounce": "5.0.0",
        "typescript": "5.2.2",
        "typograf": "7.1.0",
@ -17552,12 +17552,6 @@
      "integrity": "sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g==",
      "dev": true
    },
-    "node_modules/ssr-window": {
-      "version": "4.0.2",
-      "resolved": "https://registry.npmjs.org/ssr-window/-/ssr-window-4.0.2.tgz",
-      "integrity": "sha512-ISv/Ch+ig7SOtw7G2+qkwfVASzazUnvlDTwypdLoPoySv+6MqlOV10VwPSE6EWkGjhW50lUmghPmpYZXMu/+AQ==",
-      "dev": true
-    },
    "node_modules/stack-utils": {
      "version": "2.0.6",
      "resolved": "https://registry.npmjs.org/stack-utils/-/stack-utils-2.0.6.tgz",
@ -18050,9 +18044,9 @@
      }
    },
    "node_modules/swiper": {
-      "version": "9.4.1",
-      "resolved": "https://registry.npmjs.org/swiper/-/swiper-9.4.1.tgz",
-      "integrity": "sha512-1nT2T8EzUpZ0FagEqaN/YAhRj33F2x/lN6cyB0/xoYJDMf8KwTFT3hMOeoB8Tg4o3+P/CKqskP+WX0Df046fqA==",
+      "version": "11.0.5",
+      "resolved": "https://registry.npmjs.org/swiper/-/swiper-11.0.5.tgz",
+      "integrity": "sha512-rhCwupqSyRnWrtNzWzemnBLMoyYuoDgGgspAm/8iBD3jCvAWycPLH4Z3TB0O5520DHLzMx94yUMH/B9Efpa48w==",
      "dev": true,
      "funding": [
        {
@ -18064,9 +18058,6 @@
          "url": "http://opencollective.com/swiper"
        }
      ],
-      "dependencies": {
-        "ssr-window": "^4.0.2"
-      },
      "engines": {
        "node": ">= 4.7.0"
      }
--- a/package.json
+++ b/package.json
@ -140,7 +140,7 @@
    "stylelint-config-standard-scss": "11.1.0",
    "stylelint-order": "6.0.3",
    "stylelint-scss": "5.3.1",
-    "swiper": "9.4.1",
+    "swiper": "11.0.5",
    "throttle-debounce": "5.0.0",
    "typescript": "5.2.2",
    "typograf": "7.1.0",
--- a/src/components/Editor/Editor.tsx
+++ b/src/components/Editor/Editor.tsx
@ -42,10 +42,10 @@ import { FigureBubbleMenu, BlockquoteBubbleMenu, IncutBubbleMenu } from './Bubbl
 import { EditorFloatingMenu } from './EditorFloatingMenu'
 import Article from './extensions/Article'
 import { CustomBlockquote } from './extensions/CustomBlockquote'
-import { Embed } from './extensions/Embed'
 import { Figcaption } from './extensions/Figcaption'
 import { Figure } from './extensions/Figure'
 import { Footnote } from './extensions/Footnote'
+import { Iframe } from './extensions/Iframe'
 import { TrailingNode } from './extensions/TrailingNode'
 import { TextBubbleMenu } from './TextBubbleMenu'

@ -130,11 +130,6 @@ export const Editor = (props: Props) => {
    current: null,
  }

-  const ImageFigure = Figure.extend({
-    name: 'capturedImage',
-    content: 'figcaption image',
-  })
-
  const handleClipboardPaste = async () => {
    try {
      const clipboardItems = await navigator.clipboard.read()
@ -163,22 +158,16 @@ export const Editor = (props: Props) => {
        .chain()
        .focus()
        .insertContent({
-          type: 'capturedImage',
+          type: 'figure',
+          attrs: { 'data-type': 'image' },
          content: [
            {
-              type: 'figcaption',
-              content: [
-                {
-                  type: 'text',
-                  text: result.originalFilename,
-                },
-              ],
+              type: 'image',
+              attrs: { src: result.url },
            },
            {
-              type: 'image',
-              attrs: {
-                src: result.url,
-              },
+              type: 'figcaption',
+              content: [{ type: 'text', text: result.originalFilename }],
            },
          ],
        })
@ -250,11 +239,11 @@ export const Editor = (props: Props) => {
          class: 'highlight',
        },
      }),
-      ImageFigure,
      Image,
+      Iframe,
+      Figure,
      Figcaption,
      Footnote,
-      Embed,
      CharacterCount.configure(), // https://github.com/ueberdosis/tiptap/issues/2589#issuecomment-1093084689
      BubbleMenu.configure({
        pluginKey: 'textBubbleMenu',
@ -265,8 +254,13 @@ export const Editor = (props: Props) => {
          const isEmptyTextBlock = doc.textBetween(from, to).length === 0 && isTextSelection(selection)
          setIsCommonMarkup(e.isActive('figcaption'))
          const result =
-            (view.hasFocus() && !empty && !isEmptyTextBlock && !e.isActive('image')) ||
-            e.isActive('footnote')
+            (view.hasFocus() &&
+              !empty &&
+              !isEmptyTextBlock &&
+              !e.isActive('image') &&
+              !e.isActive('figure')) ||
+            e.isActive('footnote') ||
+            e.isActive('figcaption')
          setShouldShowTextBubbleMenu(result)
          return result
        },
--- a/src/components/Editor/EditorFloatingMenu/EditorFloatingMenu.tsx
+++ b/src/components/Editor/EditorFloatingMenu/EditorFloatingMenu.tsx
@ -26,7 +26,7 @@ const embedData = async (data) => {
  const element = document.createRange().createContextualFragment(data)
  const { attributes } = element.firstChild as HTMLIFrameElement

-  const result: { src: string } = { src: '' }
+  const result: { src: string; width?: string; height?: string } = { src: '' }

  for (let i = 0; i < attributes.length; i++) {
    const attribute = attributes[i]
@ -45,7 +45,28 @@ export const EditorFloatingMenu = (props: FloatingMenuProps) => {
  const handleEmbedFormSubmit = async (value: string) => {
    // TODO: add support instagram embed (blockquote)
    const emb = await embedData(value)
-    props.editor.chain().focus().setIframe(emb).run()
+    props.editor
+      .chain()
+      .focus()
+      .insertContent({
+        type: 'figure',
+        attrs: { 'data-type': 'iframe' },
+        content: [
+          {
+            type: 'iframe',
+            attrs: {
+              src: emb.src,
+              width: emb.width,
+              height: emb.height,
+            },
+          },
+          {
+            type: 'figcaption',
+            content: [{ type: 'text', text: t('Description') }],
+          },
+        ],
+      })
+      .run()
  }

  const validateEmbed = async (value) => {
--- a/src/components/Editor/Prosemirror.scss
+++ b/src/components/Editor/Prosemirror.scss
@ -265,8 +265,26 @@ mark.highlight {
  }
 }

-figure[data-type='capturedImage'] {
-  flex-direction: column-reverse;
+.ProseMirror-hideselection figure[data-type='figure'] {
+  & > figcaption {
+    --selection-color: rgb(0 0 0 / 60%);
+  }
+}
+
+figure[data-type='figure'] {
+  width: 100% !important;
+
+  .iframe-wrapper {
+    position: relative;
+    overflow: hidden;
+    width: 100%;
+    height: auto;
+
+    iframe {
+      display: block;
+      width: 100%;
+    }
+  }
 }

 /* stylelint-disable-next-line selector-type-no-unknown */
--- a/src/components/Editor/SimplifiedEditor.tsx
+++ b/src/components/Editor/SimplifiedEditor.tsx
@ -185,22 +185,16 @@ const SimplifiedEditor = (props: Props) => {
      .chain()
      .focus()
      .insertContent({
-        type: 'capturedImage',
+        type: 'figure',
+        attrs: { 'data-type': 'image' },
        content: [
          {
-            type: 'figcaption',
-            content: [
-              {
-                type: 'text',
-                text: image.originalFilename,
-              },
-            ],
+            type: 'image',
+            attrs: { src: image.url },
          },
          {
-            type: 'image',
-            attrs: {
-              src: image.url,
-            },
+            type: 'figcaption',
+            content: [{ type: 'text', text: image.originalFilename }],
          },
        ],
      })
--- a/src/components/Editor/UploadModalContent/UploadModalContent.module.scss
+++ b/src/components/Editor/UploadModalContent/UploadModalContent.module.scss
@ -81,7 +81,6 @@
  .formHolder {
    width: 100%;
    margin-top: 24px;
-    border-bottom: 1px solid #000;
  }
 }

--- a/src/components/Editor/extensions/Figure.ts
+++ b/src/components/Editor/extensions/Figure.ts
@ -16,24 +16,39 @@ export const Figure = Node.create({
    }
  },
  group: 'block',
-  content: 'block figcaption',
+  content: '(image | iframe) figcaption',
  draggable: true,
  isolating: true,
+  atom: true,

  addAttributes() {
    return {
      'data-float': null,
+      'data-type': { default: null },
    }
  },

  parseHTML() {
    return [
      {
-        tag: `figure[data-type="${this.name}"]`,
+        tag: 'figure',
+        getAttrs: (node) => {
+          if (!(node instanceof HTMLElement)) {
+            return
+          }
+          const img = node.querySelector('img')
+          const iframe = node.querySelector('iframe')
+          let dataType = null
+          if (img) {
+            dataType = 'image'
+          } else if (iframe) {
+            dataType = 'iframe'
+          }
+          return { 'data-type': dataType }
+        },
      },
    ]
  },
-
  renderHTML({ HTMLAttributes }) {
    return ['figure', mergeAttributes(HTMLAttributes, { 'data-type': this.name }), 0]
  },
--- a/src/components/Editor/extensions/Iframe.ts
+++ b/src/components/Editor/extensions/Iframe.ts
@ -1,4 +1,4 @@
-import { mergeAttributes, Node } from '@tiptap/core'
+import { Node } from '@tiptap/core'

 export interface IframeOptions {
  allowFullscreen: boolean
@ -15,19 +15,35 @@ declare module '@tiptap/core' {
  }
 }

-export const Embed = Node.create<IframeOptions>({
-  name: 'embed',
+export const Iframe = Node.create<IframeOptions>({
+  name: 'iframe',
  group: 'block',
-  selectable: true,
  atom: true,
-  draggable: true,
-  addAttributes() {
+
+  addOptions() {
    return {
-      src: { default: null },
-      width: { default: null },
-      height: { default: null },
+      allowFullscreen: true,
+      HTMLAttributes: {
+        class: 'iframe-wrapper',
+      },
    }
  },
+
+  addAttributes() {
+    return {
+      src: {
+        default: null,
+      },
+      frameborder: {
+        default: 0,
+      },
+      allowfullscreen: {
+        default: this.options.allowFullscreen,
+        parseHTML: () => this.options.allowFullscreen,
+      },
+    }
+  },
+
  parseHTML() {
    return [
      {
@ -35,28 +51,15 @@ export const Embed = Node.create<IframeOptions>({
      },
    ]
  },
+
  renderHTML({ HTMLAttributes }) {
-    return ['iframe', mergeAttributes(HTMLAttributes)]
-  },
-  addNodeView() {
-    return ({ node }) => {
-      const div = document.createElement('div')
-      div.className = 'embed-wrapper'
-      const iframe = document.createElement('iframe')
-      iframe.width = node.attrs.width
-      iframe.height = node.attrs.height
-      iframe.allowFullscreen = node.attrs.allowFullscreen
-      iframe.src = node.attrs.src
-      div.append(iframe)
-      return {
-        dom: div,
-      }
-    }
+    return ['div', this.options.HTMLAttributes, ['iframe', HTMLAttributes]]
  },
+
  addCommands() {
    return {
      setIframe:
-        (options) =>
+        (options: { src: string }) =>
        ({ tr, dispatch }) => {
          const { selection } = tr
          const node = this.type.create(options)
--- a/src/components/Feed/ArticleCard/ArticleCard.tsx
+++ b/src/components/Feed/ArticleCard/ArticleCard.tsx
@ -52,6 +52,7 @@ export type ArticleCardProps = {
  desktopCoverSize?: 'XS' | 'S' | 'M' | 'L'
  article: Shout
  onShare?: (article: Shout) => void
+  onInvite?: () => void
 }

 const desktopCoverImageWidths: Record<ArticleCardProps['desktopCoverSize'], number> = {
@ -371,7 +372,7 @@ export const ArticleCard = (props: ArticleCardProps) => {
                  isOwner={canEdit()}
                  containerCssClass={stylesHeader.control}
                  onShareClick={() => props.onShare(props.article)}
-                  onInviteClick={() => showModal('inviteCoAuthors')}
+                  onInviteClick={props.onInvite}
                  onVisibilityChange={(isVisible) => setIsActionPopupActive(isVisible)}
                  trigger={
                    <button>
@ -388,7 +389,6 @@ export const ArticleCard = (props: ArticleCardProps) => {
          </section>
        </Show>
      </div>
-      <InviteCoAuthorsModal title={t('Invite experts')} />
    </section>
  )
 }
--- a/src/components/Feed/FeedArticlePopup/FeedArticlePopup.tsx
+++ b/src/components/Feed/FeedArticlePopup/FeedArticlePopup.tsx
@ -1,7 +1,7 @@
 import type { PopupProps } from '../../_shared/Popup'

 import { clsx } from 'clsx'
-import { Show } from 'solid-js'
+import { createEffect, createSignal, onMount, Show } from 'solid-js'

 import { useLocalize } from '../../../context/localize'
 import { Popup } from '../../_shared/Popup'
@ -9,20 +9,35 @@ import { SoonChip } from '../../_shared/SoonChip'

 import styles from './FeedArticlePopup.module.scss'

-type FeedArticlePopupProps = {
+type Props = {
  isOwner: boolean
  onInviteClick: () => void
  onShareClick: () => void
 } & Omit<PopupProps, 'children'>

-export const FeedArticlePopup = (props: FeedArticlePopupProps) => {
+export const FeedArticlePopup = (props: Props) => {
  const { t } = useLocalize()
+  const [hidePopup, setHidePopup] = createSignal(false)
  return (
    <>
-      <Popup {...props} horizontalAnchor={'right'} variant="tiny" popupCssClass={styles.feedArticlePopup}>
+      <Popup
+        {...props}
+        //TODO: fix hide logic
+        closePopup={hidePopup()}
+        horizontalAnchor={'right'}
+        variant="tiny"
+        popupCssClass={styles.feedArticlePopup}
+      >
        <ul class={clsx('nodash', styles.actionList)}>
          <li>
-            <button class={styles.action} role="button" onClick={props.onShareClick}>
+            <button
+              class={styles.action}
+              role="button"
+              onClick={() => {
+                props.onShareClick()
+                setHidePopup(true)
+              }}
+            >
              {t('Share')}
            </button>
          </li>
@ -33,6 +48,7 @@ export const FeedArticlePopup = (props: FeedArticlePopupProps) => {
                role="button"
                onClick={() => {
                  alert('Help to edit')
+                  setHidePopup(true)
                }}
              >
                {t('Help to edit')}
@ -40,7 +56,14 @@ export const FeedArticlePopup = (props: FeedArticlePopupProps) => {
            </li>
          </Show>
          <li>
-            <button class={styles.action} role="button" onClick={props.onInviteClick}>
+            <button
+              class={styles.action}
+              role="button"
+              onClick={() => {
+                props.onInviteClick()
+                setHidePopup(false)
+              }}
+            >
              {t('Invite experts')}
            </button>
          </li>
--- a/src/components/Views/Feed/Feed.module.scss
+++ b/src/components/Views/Feed/Feed.module.scss
@ -197,8 +197,8 @@
  margin-bottom: 4rem;

  @include media-breakpoint-down(sm) {
-    flex-direction: column-reverse;
-    align-items: flex-start;
+    margin: 1rem 0 0;
+    flex-direction: column;
    gap: 1rem;
  }

--- a/src/components/Views/Feed/Feed.tsx
+++ b/src/components/Views/Feed/Feed.tsx
@ -17,6 +17,7 @@ import { useTopicsStore } from '../../../stores/zine/topics'
 import { getImageUrl } from '../../../utils/getImageUrl'
 import { DropDown } from '../../_shared/DropDown'
 import { Icon } from '../../_shared/Icon'
+import { InviteCoAuthorsModal } from '../../_shared/InviteCoAuthorsModal'
 import { Loading } from '../../_shared/Loading'
 import { ShareModal } from '../../_shared/ShareModal'
 import { CommentDate } from '../../Article/CommentDate'
@ -303,6 +304,7 @@ export const FeedView = (props: Props) => {
                {(article) => (
                  <ArticleCard
                    onShare={(shared) => handleShare(shared)}
+                    onInvite={() => showModal('inviteCoAuthors')}
                    article={article}
                    settings={{ isFeedMode: true }}
                    desktopCoverSize="M"
@ -429,6 +431,7 @@ export const FeedView = (props: Props) => {
          shareUrl={getShareUrl({ pathname: `/${shareData().slug}` })}
        />
      </Show>
+      <InviteCoAuthorsModal title={t('Invite experts')} />
    </div>
  )
 }
--- a/src/components/_shared/Popup/Popup.tsx
+++ b/src/components/_shared/Popup/Popup.tsx
@ -15,6 +15,7 @@ export type PopupProps = {
  onVisibilityChange?: (isVisible: boolean) => void
  horizontalAnchor?: HorizontalAnchor
  variant?: 'bordered' | 'tiny'
+  closePopup?: boolean
 }

 export const Popup = (props: PopupProps) => {
@ -28,14 +29,20 @@ export const Popup = (props: PopupProps) => {
  })

  const containerRef: { current: HTMLElement } = { current: null }
+  const closePopup = () => setIsVisible(false)

  useOutsideClickHandler({
    containerRef,
    predicate: () => isVisible(),
-    handler: () => {
-      setIsVisible(false)
-    },
+    handler: () => closePopup(),
  })
+
+  createEffect(() => {
+    if (props.closePopup) {
+      closePopup()
+    }
+  })
+
  const toggle = () => setIsVisible((oldVisible) => !oldVisible)
  return (
    <span class={clsx(styles.container, props.containerCssClass)} ref={(el) => (containerRef.current = el)}>
--- a/src/components/_shared/SolidSwiper/ArticleCardSwiper.tsx
+++ b/src/components/_shared/SolidSwiper/ArticleCardSwiper.tsx
@ -1,6 +1,7 @@
 import { clsx } from 'clsx'
 import { For, onMount, Show } from 'solid-js'
-import SwiperCore, { Manipulation, Navigation, Pagination } from 'swiper'
+import SwiperCore from 'swiper'
+import { Manipulation, Navigation, Pagination } from 'swiper/modules'

 import { Shout } from '../../../graphql/schema/core.gen'
 import { ArticleCard } from '../../Feed/ArticleCard'
--- a/src/components/_shared/SolidSwiper/EditorSwiper.tsx
+++ b/src/components/_shared/SolidSwiper/EditorSwiper.tsx
@ -1,7 +1,8 @@
 import { createFileUploader } from '@solid-primitives/upload'
 import { clsx } from 'clsx'
 import { createEffect, createSignal, For, Show, on, onMount, lazy } from 'solid-js'
-import SwiperCore, { Manipulation, Navigation, Pagination } from 'swiper'
+import SwiperCore from 'swiper'
+import { Manipulation, Navigation, Pagination } from 'swiper/modules'

 import { useLocalize } from '../../../context/localize'
 import { useSnackbar } from '../../../context/snackbar'
--- a/src/components/_shared/SolidSwiper/ImageSwiper.tsx
+++ b/src/components/_shared/SolidSwiper/ImageSwiper.tsx
@ -1,6 +1,7 @@
 import { clsx } from 'clsx'
 import { createEffect, createSignal, For, Show, on, onMount, onCleanup } from 'solid-js'
-import SwiperCore, { Manipulation, Navigation, Pagination } from 'swiper'
+import SwiperCore from 'swiper'
+import { Manipulation, Navigation, Pagination } from 'swiper/modules'
 import { throttle } from 'throttle-debounce'

 import { MediaItem } from '../../../pages/types'
@ -27,7 +28,6 @@ export const ImageSwiper = (props: Props) => {
  const mainSwipeRef: { current: SwiperRef } = { current: null }
  const thumbSwipeRef: { current: SwiperRef } = { current: null }
  const swiperMainContainer: { current: HTMLDivElement } = { current: null }
-
  const [slideIndex, setSlideIndex] = createSignal(0)
  const [isMobileView, setIsMobileView] = createSignal(false)
  const [selectedImage, setSelectedImage] = createSignal('')
@ -52,18 +52,13 @@ export const ImageSwiper = (props: Props) => {
    const { register } = await import('swiper/element/bundle')
    register()
    SwiperCore.use([Pagination, Navigation, Manipulation])
+    mainSwipeRef.current?.swiper?.on('slideChange', handleSlideChange)
  })

  onMount(() => {
    const updateDirection = () => {
      const width = window.innerWidth
-      const direction = width > MIN_WIDTH ? 'vertical' : 'horizontal'
-      if (direction === 'horizontal') {
-        setIsMobileView(true)
-      } else {
-        setIsMobileView(false)
-      }
-      thumbSwipeRef.current?.swiper?.changeDirection(direction)
+      setIsMobileView(width < MIN_WIDTH)
    }

    updateDirection()
@ -96,47 +91,6 @@ export const ImageSwiper = (props: Props) => {
    <div class={clsx(styles.Swiper, styles.articleMode, { [styles.mobileView]: isMobileView() })}>
      <div class={styles.container} ref={(el) => (swiperMainContainer.current = el)}>
        <Show when={props.images.length > 0}>
-          <div class={styles.holder}>
-            <swiper-container
-              ref={(el) => (mainSwipeRef.current = el)}
-              slides-per-view={1}
-              thumbs-swiper={'.thumbSwiper'}
-              observer={true}
-              onSlideChange={handleSlideChange}
-              space-between={isMobileView() ? 20 : 10}
-            >
-              <For each={props.images}>
-                {(slide, index) => (
-                  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                  // @ts-ignore
-                  <swiper-slide lazy="true" virtual-index={index()}>
-                    <div class={styles.image} onClick={handleImageClick}>
-                      <Image src={slide.url} alt={slide.title} width={800} />
-                    </div>
-                  </swiper-slide>
-                )}
-              </For>
-            </swiper-container>
-            <div
-              class={clsx(styles.navigation, styles.prev, {
-                [styles.disabled]: slideIndex() === 0,
-              })}
-              onClick={() => mainSwipeRef.current.swiper.slidePrev()}
-            >
-              <Icon name="swiper-l-arr" class={styles.icon} />
-            </div>
-            <div
-              class={clsx(styles.navigation, styles.next, {
-                [styles.disabled]: slideIndex() + 1 === props.images.length,
-              })}
-              onClick={() => mainSwipeRef.current.swiper.slideNext()}
-            >
-              <Icon name="swiper-r-arr" class={styles.icon} />
-            </div>
-            <div class={styles.counter}>
-              {slideIndex() + 1} / {props.images.length}
-            </div>
-          </div>
          <div class={clsx(styles.holder, styles.thumbsHolder)}>
            <div class={styles.thumbs}>
              <swiper-container
@ -147,6 +101,8 @@ export const ImageSwiper = (props: Props) => {
                auto-scroll-offset={1}
                watch-overflow={true}
                watch-slides-visibility={true}
+                direction={'horizontal'}
+                slides-per-group-auto={true}
              >
                <For each={props.images}>
                  {(slide, index) => (
@ -181,6 +137,47 @@ export const ImageSwiper = (props: Props) => {
              </div>
            </div>
          </div>
+          <div class={styles.holder}>
+            <swiper-container
+              ref={(el) => (mainSwipeRef.current = el)}
+              slides-per-view={1}
+              thumbs-swiper={'.thumbSwiper'}
+              observer={true}
+              // slide-change={handleSlideChange}
+              space-between={isMobileView() ? 20 : 10}
+            >
+              <For each={props.images}>
+                {(slide, index) => (
+                  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                  // @ts-ignore
+                  <swiper-slide lazy="true" virtual-index={index()}>
+                    <div class={styles.image} onClick={handleImageClick}>
+                      <Image src={slide.url} alt={slide.title} width={800} />
+                    </div>
+                  </swiper-slide>
+                )}
+              </For>
+            </swiper-container>
+            <div
+              class={clsx(styles.navigation, styles.prev, {
+                [styles.disabled]: slideIndex() === 0,
+              })}
+              onClick={() => mainSwipeRef.current.swiper.slidePrev()}
+            >
+              <Icon name="swiper-l-arr" class={styles.icon} />
+            </div>
+            <div
+              class={clsx(styles.navigation, styles.next, {
+                [styles.disabled]: slideIndex() + 1 === props.images.length,
+              })}
+              onClick={() => mainSwipeRef.current.swiper.slideNext()}
+            >
+              <Icon name="swiper-r-arr" class={styles.icon} />
+            </div>
+            <div class={styles.counter}>
+              {slideIndex() + 1} / {props.images.length}
+            </div>
+          </div>
        </Show>
      </div>
      <div class={styles.slideDescription}>
--- a/src/components/_shared/SolidSwiper/Swiper.module.scss
+++ b/src/components/_shared/SolidSwiper/Swiper.module.scss
@ -29,6 +29,7 @@
    background: var(--background-color-invert);
    color: var(--default-color-invert);
    display: flex;
+    flex-direction: column;
    align-items: center;
    justify-content: center;

@ -40,47 +41,44 @@
    .container {
      margin: auto;
      position: relative;
-      padding: 24px 0;
      display: flex;
+      flex-direction: column;
      justify-content: center;
      gap: 20px;
      width: 100%;

      .thumbsHolder {
-        min-width: 110px;
        width: auto;
      }

      .thumbs {
-        padding: 52px 0;
-        width: 110px;
-        overflow: hidden;
-        height: calc(var(--slide-height) + 40px);
+        //overflow: hidden;
        box-sizing: border-box;
        margin: 0;
        position: relative;

-        .thumbsNav {
-          height: 52px;
-          padding: 14px 0;
+        & > swiper-container {
          display: flex;
-          align-items: center;
-          justify-content: center;
-          width: 110px;
-          left: 0;
-          right: 0;
+          flex-direction: row;
+          gap: 10px;
+        }

-          .icon {
-            transform: rotate(90deg);
-          }
+        .thumbsNav {
+          height: 100%;
+          overflow: hidden;
+          width: 24px;

          &.prev {
-            top: 0;
+            top: 50%;
+            left: 0;
+            transform: translateY(-50%);
          }

          &.next {
-            top: auto;
-            bottom: 0;
+            top: 50%;
+            right: 0;
+            left: unset;
+            transform: translateY(-50%);
          }
        }
      }
@ -88,43 +86,12 @@

    &.mobileView {
      .container {
-        flex-direction: column-reverse;
        padding: 0;
-
-        .thumbsHolder {
-          min-width: unset;
-        }
-
        .thumbs {
-          width: 100%;
-          height: 80px;
-          padding: 0;
-
          & swiper-slide {
            // bind to html element <swiper-slide/>
            width: unset !important;
          }
-
-          .thumbsNav {
-            height: 100%;
-            padding: 0;
-            width: 40px;
-
-            .icon {
-              transform: none;
-            }
-
-            &.prev {
-              top: 0;
-              left: 0;
-            }
-
-            &.next {
-              top: 0;
-              right: 0;
-              left: unset;
-            }
-          }
        }
      }
    }
@ -260,6 +227,10 @@

      margin-top: 24px;

+      * {
+        color: var(--default-color-invert) !important; //Force fix migration errors with inline styles
+      }
+
      @include media-breakpoint-up(md) {
        // margin-left: calc((100% + 130px) * 0.15);
        margin-left: calc(15% + 24px);
@ -398,4 +369,9 @@
      display: flex !important;
    }
  }
+
+  .swiper-button-prev,
+  .swiper-rtl .swiper-button-next {
+    top: 200px !important;
+  }
 }
--- a/src/components/_shared/SolidSwiper/swiper.d.ts
+++ b/src/components/_shared/SolidSwiper/swiper.d.ts
@ -37,10 +37,16 @@ declare module 'solid-js' {
      onSlideChange?: () => void
      onBeforeSlideChangeStart?: () => void
      class?: string
+      observer?: boolean
+      loop?: boolean
+      speed?: number
+      slidesPerGroupAuto?: boolean
+      navigation?: boolean
      breakpoints?: {
        [width: number]: SwiperOptions
        [ratio: string]: SwiperOptions
      }
+      direction?: 'horizontal' | 'vertical'
      autoplay?: AutoplayOptions | boolean
    }
    // eslint-disable-next-line @typescript-eslint/no-empty-interface
--- a/src/styles/app.scss
+++ b/src/styles/app.scss
@ -582,8 +582,8 @@ figure {
  display: flex;
  flex-direction: column;
  width: fit-content;
-  gap: 16px;
  margin: 2em auto;
+  gap: 0.6rem;

  img {
    display: block;
@ -596,11 +596,8 @@ figure {
 figure {
  figcaption {
    color: rgb(0 0 0 / 60%);
-
    @include font-size(1.2rem);
-
    line-height: 1.5;
-    margin-top: 0.5em;
  }
 }

--- a/src/utils/renderUploadedImage.ts
+++ b/src/utils/renderUploadedImage.ts
@ -8,22 +8,16 @@ export const renderUploadedImage = (editor: Editor, image: UploadedFile) => {
    .chain()
    .focus()
    .insertContent({
-      type: 'capturedImage',
+      type: 'figure',
+      attrs: { 'data-type': 'image' },
      content: [
        {
-          type: 'figcaption',
-          content: [
-            {
-              type: 'text',
-              text: image.originalFilename ?? '',
-            },
-          ],
+          type: 'image',
+          attrs: { src: image.url },
        },
        {
-          type: 'image',
-          attrs: {
-            src: image.url,
-          },
+          type: 'figcaption',
+          content: [{ type: 'text', text: image.originalFilename }],
        },
      ],
    })