Fix Media Items description autosave (#184)

src/components/Article/AudioPlayer/PlayerPlaylist.tsx

@@ -162,7 +162,7 @@ export const PlayerPlaylist = (props: Props) => {
                     initialContent={mi.body}
                     placeholder={`${t('Description')}...`}
                     smallHeight={true}
-                    onAutoSave={(value) => handleMediaItemFieldChange('body', value)}
+                    onChange={(value) => handleMediaItemFieldChange('body', value)}
                   />
                   <GrowingTextarea
                     allowEnterKey={true}

src/components/Editor/SimplifiedEditor.tsx

@@ -28,11 +28,14 @@ import { InsertLinkForm } from './InsertLinkForm'
 import { Link } from '@tiptap/extension-link'
 import { UploadedFile } from '../../pages/types'
 import { Figure } from './extensions/Figure'
+import { Image } from '@tiptap/extension-image'
+import { Figcaption } from './extensions/Figcaption'
+import { useOutsideClickHandler } from '../../utils/useOutsideClickHandler'
 
 type Props = {
   initialContent?: string
   onSubmit?: (text: string) => void
-  onAutoSave?: (text: string) => void
+  onChange?: (text: string) => void
   placeholder: string
   submitButtonText?: string
   quoteEnabled?: boolean
@@ -46,11 +49,18 @@ type Props = {
 const SimplifiedEditor = (props: Props) => {
   const { t } = useLocalize()
 
-  const editorElRef: {
+  const wrapperEditorElRef: {
-    current: HTMLDivElement
+    current: HTMLElement
   } = {
     current: null
   }
+
+  const editorElRef: {
+    current: HTMLElement
+  } = {
+    current: null
+  }
+
   const {
     actions: { setEditor }
   } = useEditorContext()
@@ -82,6 +92,8 @@ const SimplifiedEditor = (props: Props) => {
         }
       }),
       ImageFigure,
+      Image,
+      Figcaption,
       Placeholder.configure({
         emptyNodeClass: styles.emptyNode,
         placeholder: props.placeholder
@@ -174,16 +186,17 @@ const SimplifiedEditor = (props: Props) => {
     window.removeEventListener('keydown', handleKeyDown)
   })
 
-  if (props.onAutoSave) {
+  if (props.onChange) {
     createEffect(() => {
-      if (isFocused()) return
+      props.onChange(html())
-      props.onAutoSave(html())
     })
   }
+
   const handleInsertLink = () => !editor().state.selection.empty && showModal('editorInsertLink')
 
   return (
     <div
+      ref={(el) => (wrapperEditorElRef.current = el)}
       class={clsx(styles.SimplifiedEditor, {
         [styles.smallHeight]: props.smallHeight,
         [styles.isFocused]: isFocused() || !isEmpty()
@@ -257,7 +270,7 @@ const SimplifiedEditor = (props: Props) => {
             </Popover>
           </Show>
         </div>
-        <Show when={!props.onAutoSave}>
+        <Show when={!props.onChange}>
           <div class={styles.buttons}>
             <Button value={t('Cancel')} variant="secondary" disabled={isEmpty()} onClick={handleClear} />
             <Button

src/components/_shared/SolidSwiper/SolidSwiper.tsx

@@ -35,6 +35,7 @@ export const SolidSwiper = (props: Props) => {
   const { t } = useLocalize()
   const [loading, setLoading] = createSignal(false)
   const [slideIndex, setSlideIndex] = createSignal(0)
+  const [slideBody, setSlideBody] = createSignal<string>()
 
   const mainSwipeRef: { current: SwiperRef } = { current: null }
   const thumbSwipeRef: { current: SwiperRef } = { current: null }
@@ -131,6 +132,10 @@ export const SolidSwiper = (props: Props) => {
     }, 0)
   }
 
+  const handleSaveBeforeSlideChange = () => {
+    handleSlideDescriptionChange(slideIndex(), 'body', slideBody())
+  }
+
   return (
     <div class={clsx(styles.Swiper, props.editorMode ? styles.editorMode : styles.articleMode)}>
       <div class={styles.container}>
@@ -157,6 +162,7 @@ export const SolidSwiper = (props: Props) => {
               thumbs-swiper={'.thumbSwiper'}
               observer={true}
               onSlideChange={handleSlideChange}
+              onBeforeSlideChangeStart={handleSaveBeforeSlideChange}
               space-between={20}
             >
               <For each={props.images}>
@@ -324,7 +330,7 @@ export const SolidSwiper = (props: Props) => {
               initialContent={props.images[slideIndex()].body}
               smallHeight={true}
               placeholder={t('Enter image description')}
-              onAutoSave={(value) => handleSlideDescriptionChange(slideIndex(), 'body', value)}
+              onChange={(value) => setSlideBody(value)}
             />
           </div>
         </Show>

src/components/_shared/SolidSwiper/swiper.d.ts

@@ -35,6 +35,7 @@ declare module 'solid-js' {
       ref?: RefObject<SwiperRef>
       children?: JSX.Element
       onSlideChange?: () => void
+      onBeforeSlideChangeStart?: () => void
       class?: string
     }
     // eslint-disable-next-line @typescript-eslint/no-empty-interface