Add auto save in SimplifiedEditor (#164)

* Add auto save in SimplifiedEditor

* remove unused imports

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}

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}>
+        <Show when={!props.onAutoSave}>
-          <Button value={t('Cancel')} variant="secondary" disabled={isEmpty()} onClick={handleClear} />
+          <div class={styles.buttons}>
-          <Button
+            <Button value={t('Cancel')} variant="secondary" disabled={isEmpty()} onClick={handleClear} />
-            value={props.submitButtonText ?? t('Send')}
+            <Button
-            variant="primary"
+              value={props.submitButtonText ?? t('Send')}
-            disabled={isEmpty()}
+              variant="primary"
-            onClick={() => props.onSubmit(html())}
+              disabled={isEmpty()}
-          />
+              onClick={() => props.onSubmit(html())}
-        </div>
+            />
+          </div>
+        </Show>
       </div>
       <Modal variant="narrow" name="editorInsertLink">
         <InsertLinkForm editor={editor()} onClose={() => hideModal()} />

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}

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)}
+              onAutoSave={(value) => handleSlideDescriptionChange(slideIndex(), 'body', value)}
-              submitButtonText={t('Save')}
             />
           </div>
         </Show>

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))