From e51cff6fb8d88db32be07f6f0af4265e81e5a546 Mon Sep 17 00:00:00 2001
From: Ilya Y <75578537+ilya-bkv@users.noreply.github.com>
Date: Mon, 14 Aug 2023 00:26:40 +0300
Subject: [PATCH] Add auto save in SimplifiedEditor (#164)

* Add auto save in SimplifiedEditor

* remove unused imports
---
 .../Article/AudioPlayer/PlayerPlaylist.tsx    |  3 +-
 src/components/Editor/SimplifiedEditor.tsx    | 33 ++++++++++++-------
 .../Views/PublishSettings/PublishSettings.tsx |  5 +--
 .../_shared/SolidSwiper/SolidSwiper.tsx       |  3 +-
 src/pages/profile/profileSettings.page.tsx    |  3 +-
 5 files changed, 28 insertions(+), 19 deletions(-)

diff --git a/src/components/Article/AudioPlayer/PlayerPlaylist.tsx b/src/components/Article/AudioPlayer/PlayerPlaylist.tsx
index ac4e1b11..ac9d5434 100644
--- a/src/components/Article/AudioPlayer/PlayerPlaylist.tsx
+++ b/src/components/Article/AudioPlayer/PlayerPlaylist.tsx
@@ -160,10 +160,9 @@ export const PlayerPlaylist = (props: Props) => {
                 <div class={styles.descriptionBlock}>
                   <SimplifiedEditor
                     initialContent={mi.body}
-                    onSubmit={(value) => handleMediaItemFieldChange('body', value)}
                     placeholder={t('Description')}
                     smallHeight={true}
-                    submitButtonText={t('Save')}
+                    onAutoSave={(value) => handleMediaItemFieldChange('body', value)}
                   />
                   <GrowingTextarea
                     allowEnterKey={true}
diff --git a/src/components/Editor/SimplifiedEditor.tsx b/src/components/Editor/SimplifiedEditor.tsx
index 66158589..b73beb77 100644
--- a/src/components/Editor/SimplifiedEditor.tsx
+++ b/src/components/Editor/SimplifiedEditor.tsx
@@ -30,7 +30,8 @@ import { Link } from '@tiptap/extension-link'
 
 type Props = {
   initialContent?: string
-  onSubmit: (text: string) => void
+  onSubmit?: (text: string) => void
+  onAutoSave?: (text: string) => void
   placeholder: string
   submitButtonText?: string
   quoteEnabled?: boolean
@@ -117,6 +118,7 @@ const SimplifiedEditor = (props: Props) => {
   const handleClear = () => {
     editor().commands.clearContent(true)
   }
+
   createEffect(() => {
     if (props.setClear) {
       editor().commands.clearContent(true)
@@ -124,7 +126,7 @@ const SimplifiedEditor = (props: Props) => {
   })
 
   const handleKeyDown = async (event) => {
-    if (isEmpty() || !editor().isFocused) {
+    if (isEmpty() || !isFocused()) {
       return
     }
 
@@ -151,7 +153,14 @@ const SimplifiedEditor = (props: Props) => {
     window.removeEventListener('keydown', handleKeyDown)
   })
 
+  if (props.onAutoSave) {
+    createEffect(() => {
+      if (isFocused()) return
+      props.onAutoSave(html())
+    })
+  }
   const handleInsertLink = () => !editor().state.selection.empty && showModal('editorInsertLink')
+
   return (
     <div
       class={clsx(styles.SimplifiedEditor, {
@@ -227,15 +236,17 @@ const SimplifiedEditor = (props: Props) => {
             </Popover>
           </Show>
         </div>
-        <div class={styles.buttons}>
-          <Button value={t('Cancel')} variant="secondary" disabled={isEmpty()} onClick={handleClear} />
-          <Button
-            value={props.submitButtonText ?? t('Send')}
-            variant="primary"
-            disabled={isEmpty()}
-            onClick={() => props.onSubmit(html())}
-          />
-        </div>
+        <Show when={!props.onAutoSave}>
+          <div class={styles.buttons}>
+            <Button value={t('Cancel')} variant="secondary" disabled={isEmpty()} onClick={handleClear} />
+            <Button
+              value={props.submitButtonText ?? t('Send')}
+              variant="primary"
+              disabled={isEmpty()}
+              onClick={() => props.onSubmit(html())}
+            />
+          </div>
+        </Show>
       </div>
       <Modal variant="narrow" name="editorInsertLink">
         <InsertLinkForm editor={editor()} onClose={() => hideModal()} />
diff --git a/src/components/Views/PublishSettings/PublishSettings.tsx b/src/components/Views/PublishSettings/PublishSettings.tsx
index 61ab1d73..4dce0a32 100644
--- a/src/components/Views/PublishSettings/PublishSettings.tsx
+++ b/src/components/Views/PublishSettings/PublishSettings.tsx
@@ -27,7 +27,8 @@ type Props = {
 const MAX_LEAD_LIMIT = 400
 const shorten = (str: string, maxLen: number) => {
   if (str.length <= maxLen) return str
-  return str.slice(0, Math.max(0, str.lastIndexOf(' ', maxLen))).trim()
+  const result = str.slice(0, Math.max(0, str.lastIndexOf(' ', maxLen))).trim()
+  return `${result}...`
 }
 
 export const PublishSettings = (props: Props) => {
@@ -175,7 +176,7 @@ export const PublishSettings = (props: Props) => {
           class={styles.settingInput}
           variant="bordered"
           placeholder={t('Write a short introduction')}
-          initialValue={`${settingsForm.lead}${settingsForm.lead.length > MAX_LEAD_LIMIT - 1 && '...'}`}
+          initialValue={`${settingsForm.lead}`}
           value={(value) => setSettingsForm('lead', value)}
           allowEnterKey={false}
           maxLength={MAX_LEAD_LIMIT}
diff --git a/src/components/_shared/SolidSwiper/SolidSwiper.tsx b/src/components/_shared/SolidSwiper/SolidSwiper.tsx
index be79fb67..3ca6086a 100644
--- a/src/components/_shared/SolidSwiper/SolidSwiper.tsx
+++ b/src/components/_shared/SolidSwiper/SolidSwiper.tsx
@@ -324,8 +324,7 @@ export const SolidSwiper = (props: Props) => {
               initialContent={props.images[slideIndex()].body}
               smallHeight={true}
               placeholder={t('Enter image description')}
-              onSubmit={(value) => handleSlideDescriptionChange(slideIndex(), 'body', value)}
-              submitButtonText={t('Save')}
+              onAutoSave={(value) => handleSlideDescriptionChange(slideIndex(), 'body', value)}
             />
           </div>
         </Show>
diff --git a/src/pages/profile/profileSettings.page.tsx b/src/pages/profile/profileSettings.page.tsx
index b2ff4231..6b086435 100644
--- a/src/pages/profile/profileSettings.page.tsx
+++ b/src/pages/profile/profileSettings.page.tsx
@@ -4,7 +4,6 @@ import ProfileSettingsNavigation from '../../components/Discours/ProfileSettings
 import { For, createSignal, Show, onMount, onCleanup } from 'solid-js'
 import deepEqual from 'fast-deep-equal'
 import { clsx } from 'clsx'
-
 import styles from './Settings.module.scss'
 import { useProfileForm } from '../../context/profile'
 import { validateUrl } from '../../utils/validateUrl'
@@ -28,10 +27,10 @@ export const ProfileSettingsPage = () => {
   const {
     actions: { showSnackbar }
   } = useSnackbar()
+
   const {
     actions: { loadSession }
   } = useSession()
-
   const { form, updateFormField, submit, slugError } = useProfileForm()
   const [prevForm, setPrevForm] = createStore(clone(form))