From bd6e014cdfeb48c411cc7e0d5dd68d07e368eb64 Mon Sep 17 00:00:00 2001
From: Igor Lobanov <bniwredyc@gmail.com>
Date: Fri, 12 May 2023 15:45:31 +0200
Subject: [PATCH] insert link enter fix (#94)

* floating plus fix, esc fix

* a href="#" -> span
---
 src/components/Article/FullArticle.tsx        |  3 +-
 .../EditorFloatingMenu.module.scss            |  2 +-
 .../EditorFloatingMenu/EditorFloatingMenu.tsx |  8 +++-
 .../Editor/InlineForm/InlineForm.tsx          | 17 +++----
 src/components/Editor/Panel/Panel.module.scss |  3 +-
 src/components/Editor/Panel/Panel.tsx         | 44 ++++++++++---------
 src/components/Inbox/DialogAvatar.tsx         |  3 +-
 src/components/Nav/Modal/Modal.tsx            |  6 ++-
 src/utils/useEscKeyDownHandler.ts             |  4 +-
 src/utils/useOutsideClickHandler.ts           | 12 ++---
 10 files changed, 60 insertions(+), 42 deletions(-)

diff --git a/src/components/Article/FullArticle.tsx b/src/components/Article/FullArticle.tsx
index 60a76e5c..5fd27caf 100644
--- a/src/components/Article/FullArticle.tsx
+++ b/src/components/Article/FullArticle.tsx
@@ -19,6 +19,7 @@ import { Title } from '@solidjs/meta'
 import { useLocalize } from '../../context/localize'
 import stylesHeader from '../Nav/Header.module.scss'
 import styles from './Article.module.scss'
+import { imageProxy } from '../../utils/imageProxy'
 
 interface ArticleProps {
   article: Shout
@@ -152,7 +153,7 @@ export const FullArticle = (props: ArticleProps) => {
               <Show when={props.article.cover}>
                 <div
                   class={styles.shoutCover}
-                  style={{ 'background-image': `url('${props.article.cover}')` }}
+                  style={{ 'background-image': `url('${imageProxy(props.article.cover)}')` }}
                 />
               </Show>
             </div>
diff --git a/src/components/Editor/EditorFloatingMenu/EditorFloatingMenu.module.scss b/src/components/Editor/EditorFloatingMenu/EditorFloatingMenu.module.scss
index 03fddc7b..a897551e 100644
--- a/src/components/Editor/EditorFloatingMenu/EditorFloatingMenu.module.scss
+++ b/src/components/Editor/EditorFloatingMenu/EditorFloatingMenu.module.scss
@@ -17,7 +17,7 @@
     background: #fff;
     left: 24px;
     position: absolute;
-    top: -2px;
+    top: -4px;
     min-width: 64vw;
   }
 }
diff --git a/src/components/Editor/EditorFloatingMenu/EditorFloatingMenu.tsx b/src/components/Editor/EditorFloatingMenu/EditorFloatingMenu.tsx
index 67dc0842..3cb336d0 100644
--- a/src/components/Editor/EditorFloatingMenu/EditorFloatingMenu.tsx
+++ b/src/components/Editor/EditorFloatingMenu/EditorFloatingMenu.tsx
@@ -30,6 +30,7 @@ export const EditorFloatingMenu = (props: FloatingMenuProps) => {
   const [selectedMenuItem, setSelectedMenuItem] = createSignal<MenuItem | undefined>()
   const [menuOpen, setMenuOpen] = createSignal<boolean>(false)
   const menuRef: { current: HTMLDivElement } = { current: null }
+  const plusButtonRef: { current: HTMLButtonElement } = { current: null }
   const handleEmbedFormSubmit = async (value: string) => {
     // TODO: add support instagram embed (blockquote)
     const emb = await embedData(value)
@@ -62,7 +63,11 @@ export const EditorFloatingMenu = (props: FloatingMenuProps) => {
 
   useOutsideClickHandler({
     containerRef: menuRef,
-    handler: () => {
+    handler: (e) => {
+      if (plusButtonRef.current.contains(e.target)) {
+        return
+      }
+
       if (menuOpen()) {
         setMenuOpen(false)
       }
@@ -82,6 +87,7 @@ export const EditorFloatingMenu = (props: FloatingMenuProps) => {
     <>
       <div ref={props.ref} class={styles.editorFloatingMenu}>
         <button
+          ref={(el) => (plusButtonRef.current = el)}
           type="button"
           onClick={() => {
             setMenuOpen(!menuOpen())
diff --git a/src/components/Editor/InlineForm/InlineForm.tsx b/src/components/Editor/InlineForm/InlineForm.tsx
index ea6ac219..a6702446 100644
--- a/src/components/Editor/InlineForm/InlineForm.tsx
+++ b/src/components/Editor/InlineForm/InlineForm.tsx
@@ -18,7 +18,8 @@ export const InlineForm = (props: Props) => {
   const [formValue, setFormValue] = createSignal(props.initialValue || '')
   const [formValueError, setFormValueError] = createSignal<string | undefined>()
 
-  const handleFormInput = (value) => {
+  const handleFormInput = (e) => {
+    const value = e.currentTarget.value
     setFormValueError()
     setFormValue(value)
   }
@@ -36,16 +37,16 @@ export const InlineForm = (props: Props) => {
     props.onClose()
   }
 
-  const handleKeyPress = async (event) => {
+  const handleKeyDown = async (e) => {
     setFormValueError('')
-    const key = event.key
 
-    if (key === 'Enter') {
+    if (e.key === 'Enter') {
+      e.preventDefault()
       await handleSaveButtonClick()
     }
 
-    if (key === 'Esc') {
-      props.onClear
+    if (e.key === 'Escape' && props.onClear) {
+      props.onClear()
     }
   }
 
@@ -57,8 +58,8 @@ export const InlineForm = (props: Props) => {
           type="text"
           value={props.initialValue ?? ''}
           placeholder={props.placeholder}
-          onKeyPress={(e) => handleKeyPress(e)}
-          onInput={(e) => handleFormInput(e.currentTarget.value)}
+          onKeyDown={handleKeyDown}
+          onInput={handleFormInput}
         />
         <button type="button" onClick={handleSaveButtonClick} disabled={Boolean(formValueError())}>
           <Icon name="status-done" />
diff --git a/src/components/Editor/Panel/Panel.module.scss b/src/components/Editor/Panel/Panel.module.scss
index 43f137ae..539ff8ad 100644
--- a/src/components/Editor/Panel/Panel.module.scss
+++ b/src/components/Editor/Panel/Panel.module.scss
@@ -56,7 +56,8 @@
     }
   }
 
-  a {
+  .link {
+    cursor: pointer;
     text-decoration: none;
     border-bottom: none;
     color: rgb(255 255 255 / 35%);
diff --git a/src/components/Editor/Panel/Panel.tsx b/src/components/Editor/Panel/Panel.tsx
index d67f81c8..2313c50c 100644
--- a/src/components/Editor/Panel/Panel.tsx
+++ b/src/components/Editor/Panel/Panel.tsx
@@ -42,18 +42,15 @@ export const Panel = (props: Props) => {
     }
   })
 
-  const handleSaveLinkClick = (e) => {
-    e.preventDefault()
+  const handleSaveClick = () => {
     saveShout()
   }
 
-  const handlePublishLinkClick = (e) => {
-    e.preventDefault()
+  const handlePublishClick = () => {
     publishShout()
   }
 
-  const handleFixTypographyLinkClick = (e) => {
-    e.preventDefault()
+  const handleFixTypographyClick = () => {
     const html = useEditorHTML(() => editorRef.current())
     editorRef.current().commands.setContent(typograf.execute(html()))
   }
@@ -74,27 +71,27 @@ export const Panel = (props: Props) => {
       <div class={clsx(styles.actionsHolder, styles.scrolled)}>
         <section>
           <p>
-            <a href="#" onClick={handlePublishLinkClick}>
+            <span class={styles.link} onClick={handlePublishClick}>
               {t('Publish')}
-            </a>
+            </span>
           </p>
           <p>
-            <a href="#" onClick={handleSaveLinkClick}>
+            <span class={styles.link} onClick={handleSaveClick}>
               {t('Save draft')}
-            </a>
+            </span>
           </p>
         </section>
 
         <section>
           <p>
-            <a class={styles.linkWithIcon}>
+            <a class={clsx(styles.link, styles.linkWithIcon)}>
               <Icon name="eye" class={styles.icon} />
               {t('Preview')}
             </a>
           </p>
           <p>
             <a
-              class={styles.linkWithIcon}
+              class={clsx(styles.link, styles.linkWithIcon)}
               onClick={() => toggleEditorPanel()}
               href={getPagePath(router, 'edit', { shoutId: props.shoutId.toString() })}
             >
@@ -103,7 +100,7 @@ export const Panel = (props: Props) => {
             </a>
           </p>
           <p>
-            <a class={styles.linkWithIcon}>
+            <a class={clsx(styles.link, styles.linkWithIcon)}>
               <Icon name="feed-discussion" class={styles.icon} />
               {t('FAQ')}
             </a>
@@ -112,10 +109,11 @@ export const Panel = (props: Props) => {
 
         <section>
           <p>
-            <a>{t('Invite co-authors')}</a>
+            <a class={styles.link}>{t('Invite co-authors')}</a>
           </p>
           <p>
             <a
+              class={styles.link}
               onClick={() => toggleEditorPanel()}
               href={getPagePath(router, 'editSettings', { shoutId: props.shoutId.toString() })}
             >
@@ -123,24 +121,30 @@ export const Panel = (props: Props) => {
             </a>
           </p>
           <p>
-            <a onClick={handleFixTypographyLinkClick} href="#">
+            <span class={styles.link} onClick={handleFixTypographyClick}>
               {t('Fix typography')}
-            </a>
+            </span>
           </p>
           <p>
-            <a>{t('Corrections history')}</a>
+            <a class={styles.link}>{t('Corrections history')}</a>
           </p>
         </section>
 
         <section>
           <p>
-            <a href="/how-to-write-a-good-article">{t('How to write a good article')}</a>
+            <a class={styles.link} href="/how-to-write-a-good-article">
+              {t('How to write a good article')}
+            </a>
           </p>
           <p>
-            <a href="#">{t('Hotkeys')}</a>
+            <a class={styles.link} href="#">
+              {t('Hotkeys')}
+            </a>
           </p>
           <p>
-            <a href="#">{t('Help')}</a>
+            <a class={styles.link} href="#">
+              {t('Help')}
+            </a>
           </p>
         </section>
 
diff --git a/src/components/Inbox/DialogAvatar.tsx b/src/components/Inbox/DialogAvatar.tsx
index e1148e36..a04a058c 100644
--- a/src/components/Inbox/DialogAvatar.tsx
+++ b/src/components/Inbox/DialogAvatar.tsx
@@ -2,6 +2,7 @@ import { Show, createMemo } from 'solid-js'
 import './DialogCard.module.scss'
 import styles from './DialogAvatar.module.scss'
 import { clsx } from 'clsx'
+import { imageProxy } from '../../utils/imageProxy'
 
 type Props = {
   name: string
@@ -46,7 +47,7 @@ const DialogAvatar = (props: Props) => {
       style={{ 'background-color': `${randomBg()}` }}
     >
       <Show when={Boolean(props.url)} fallback={<div class={styles.letter}>{nameFirstLetter()}</div>}>
-        <div class={styles.imageHolder} style={{ 'background-image': `url(${props.url})` }} />
+        <div class={styles.imageHolder} style={{ 'background-image': `url(${imageProxy(props.url)})` }} />
       </Show>
     </div>
   )
diff --git a/src/components/Nav/Modal/Modal.tsx b/src/components/Nav/Modal/Modal.tsx
index d07f6ed2..29e3d26c 100644
--- a/src/components/Nav/Modal/Modal.tsx
+++ b/src/components/Nav/Modal/Modal.tsx
@@ -16,8 +16,10 @@ export const Modal = (props: ModalProps) => {
   const { modal } = useModalStore()
 
   const handleHide = () => {
-    hideModal()
-    props.onClose && props.onClose()
+    if (modal()) {
+      hideModal()
+      props.onClose && props.onClose()
+    }
   }
 
   useEscKeyDownHandler(handleHide)
diff --git a/src/utils/useEscKeyDownHandler.ts b/src/utils/useEscKeyDownHandler.ts
index d9a77924..3e19f505 100644
--- a/src/utils/useEscKeyDownHandler.ts
+++ b/src/utils/useEscKeyDownHandler.ts
@@ -2,7 +2,9 @@ import { onCleanup, onMount } from 'solid-js'
 
 export const useEscKeyDownHandler = (onEscKeyDown: () => void) => {
   const keydownHandler = (e: KeyboardEvent) => {
-    if (e.key === 'Escape') onEscKeyDown()
+    if (e.key === 'Escape') {
+      onEscKeyDown()
+    }
   }
 
   onMount(() => {
diff --git a/src/utils/useOutsideClickHandler.ts b/src/utils/useOutsideClickHandler.ts
index b97dbe26..5391f78d 100644
--- a/src/utils/useOutsideClickHandler.ts
+++ b/src/utils/useOutsideClickHandler.ts
@@ -2,24 +2,24 @@ import { onCleanup, onMount } from 'solid-js'
 
 type Options = {
   containerRef: { current: HTMLElement }
-  handler: () => void
+  handler: (e: MouseEvent & { target: Element }) => void
   // if predicate is present
   // handler is called only if predicate function returns true
-  predicate?: () => boolean
+  predicate?: (e: MouseEvent & { target: Element }) => boolean
 }
 
 export const useOutsideClickHandler = (options: Options) => {
   const { predicate, containerRef, handler } = options
-  const handleClickOutside = (event: MouseEvent & { target: Element }) => {
-    if (predicate && !predicate()) {
+  const handleClickOutside = (e: MouseEvent & { target: Element }) => {
+    if (predicate && !predicate(e)) {
       return
     }
 
-    if (event.target === containerRef.current || containerRef.current?.contains(event.target)) {
+    if (e.target === containerRef.current || containerRef.current?.contains(e.target)) {
       return
     }
 
-    handler()
+    handler(e)
   }
 
   onMount(() => {