Merge branch 'editor/flow_fixies' into 'main'

Editor flow fixes

See merge request discoursio/discoursio-webapp!79

src/components/Article/FullArticle.tsx

@@ -76,7 +76,6 @@ export const FullArticle = (props: ArticleProps) => {
   })
 
   const canEdit = () => props.article.authors?.some((a) => a.slug === user()?.slug)
-
   // eslint-disable-next-line unicorn/consistent-function-scoping
   const handleBookmarkButtonClick = (ev) => {
     // TODO: implement bookmark clicked
@@ -254,7 +253,7 @@ export const FullArticle = (props: ArticleProps) => {
               </div>
             </div>
             <div class={styles.help}>
-              <Show when={isAuthenticated()}>
+              <Show when={isAuthenticated() && !canEdit()}>
                 <button class="button">{t('Cooperate')}</button>
               </Show>
               <Show when={canEdit()}>

src/components/Editor/InlineForm/InlineForm.tsx

@@ -55,6 +55,7 @@ export const InlineForm = (props: Props) => {
         <input
           autofocus={props.autoFocus ?? true}
           type="text"
+          value={props.initialValue ?? ''}
           placeholder={props.placeholder}
           onKeyPress={(e) => handleKeyPress(e)}
           onInput={(e) => handleFormInput(e.currentTarget.value)}

src/components/Editor/Panel/Panel.module.scss

@@ -16,7 +16,7 @@
 
   .close {
     filter: invert(1);
-    margin: -1.6rem 0 0 -1.6rem;
+    margin: -1.6rem 0 0 -2.4rem;
   }
 
   .actionsHolder {
@@ -56,6 +56,11 @@
     }
   }
 
+  a {
+    text-decoration: none;
+    border-bottom: none;
+  }
+
   .linkWithIcon {
     margin-left: -1.6rem;
   }

src/components/Editor/Panel/Panel.tsx

@@ -84,6 +84,7 @@ export const Panel = (props: Props) => {
           <p>
             <a
               class={styles.linkWithIcon}
+              onClick={() => toggleEditorPanel()}
               href={getPagePath(router, 'edit', { shoutId: props.shoutId.toString() })}
             >
               <Icon name="pencil-outline" class={styles.icon} />
@@ -103,7 +104,10 @@ export const Panel = (props: Props) => {
             <a>{t('Invite co-authors')}</a>
           </p>
           <p>
-            <a href={getPagePath(router, 'editSettings', { shoutId: props.shoutId.toString() })}>
+            <a
+              onClick={() => toggleEditorPanel()}
+              href={getPagePath(router, 'editSettings', { shoutId: props.shoutId.toString() })}
+            >
               {t('Publication settings')}
             </a>
           </p>

src/components/Views/DraftsView/DraftsView.tsx

@@ -16,7 +16,7 @@ export const DraftsView = () => {
 
   const loadDrafts = async () => {
     const loadedDrafts = await apiClient.getDrafts()
-    setDrafts(loadedDrafts)
+    setDrafts(loadedDrafts.reverse())
   }
 
   onMount(() => {

src/components/Views/Edit.tsx

@@ -13,6 +13,7 @@ import styles from './Edit.module.scss'
 import { useSession } from '../../context/session'
 import { Modal } from '../Nav/Modal'
 import { hideModal, showModal } from '../../stores/ui'
+import { imageProxy } from '../../utils/imageProxy'
 
 type EditViewProps = {
   shout: Shout
@@ -28,7 +29,6 @@ const scrollTop = () => {
 export const EditView = (props: EditViewProps) => {
   const { t } = useLocalize()
   const { user } = useSession()
-
   const [isScrolled, setIsScrolled] = createSignal(false)
   const [topics, setTopics] = createSignal<Topic[]>(null)
   const [coverImage, setCoverImage] = createSignal<string>(null)
@@ -82,7 +82,7 @@ export const EditView = (props: EditViewProps) => {
 
   const handleUploadModalContentCloseSetCover = (imgUrl: string) => {
     hideModal()
-    setCoverImage(imgUrl)
+    setCoverImage(imageProxy(imgUrl))
     setForm('coverImageUrl', imgUrl)
   }
 
@@ -227,7 +227,11 @@ export const EditView = (props: EditViewProps) => {
                     <Show when={coverImage() ?? form.coverImageUrl}>
                       <div class={styles.shoutCardCoverContainer}>
                         <div class={styles.shoutCardCover}>
-                          <img src={coverImage() || form.coverImageUrl} alt={form.title} loading="lazy" />
+                          <img
+                            src={coverImage() || imageProxy(form.coverImageUrl)}
+                            alt={form.title}
+                            loading="lazy"
+                          />
                         </div>
                       </div>
                     </Show>

src/context/editor.tsx

@@ -80,6 +80,10 @@ export const EditorProvider = (props: { children: JSX.Element }) => {
   }
 
   const saveShout = async () => {
+    if (isEditorPanelVisible()) {
+      toggleEditorPanel()
+    }
+
     if (!validate()) {
       return
     }
@@ -113,6 +117,9 @@ export const EditorProvider = (props: { children: JSX.Element }) => {
   }
 
   const publishShout = async () => {
+    if (isEditorPanelVisible()) {
+      toggleEditorPanel()
+    }
     if (!validate()) {
       return
     }