Merge remote-tracking branch 'gitlab/dev' into drafts

src/components/Editor/Editor.tsx

@@ -39,6 +39,7 @@ import { TextBubbleMenu } from './TextBubbleMenu'
 import { ImageBubbleMenu } from './ImageBubbleMenu'
 import { EditorFloatingMenu } from './EditorFloatingMenu'
 import { useEditorContext } from '../../context/editor'
+import { isTextSelection } from '@tiptap/core'
 
 type EditorProps = {
   shoutId: number
@@ -147,17 +148,21 @@ export const Editor = (props: EditorProps) => {
       CharacterCount,
       BubbleMenu.configure({
         pluginKey: 'textBubbleMenu',
-        element: textBubbleMenuRef.current
-        // shouldShow: ({ editor: e, view, state, oldState, from, to }) => {
-        //   console.log('!!! e:', view)
-        //   return !e.isActive('image')
-        // }
+        element: textBubbleMenuRef.current,
+        shouldShow: ({ editor: e, view, state, oldState, from, to }) => {
+          const { doc, selection } = state
+          const { empty } = selection
+
+          const isEmptyTextBlock = doc.textBetween(from, to).length === 0 && isTextSelection(selection)
+
+          return !(!view.hasFocus() || empty || isEmptyTextBlock || e.isActive('image'))
+        }
       }),
       BubbleMenu.configure({
         pluginKey: 'imageBubbleMenu',
         element: imageBubbleMenuRef.current,
         shouldShow: ({ editor: e, view, state, oldState, from, to }) => {
-          return e.isFocused && e.isActive('image')
+          return view.hasFocus() && e.isActive('image')
         }
       }),
       FloatingMenu.configure({

src/components/Editor/EditorFloatingMenu/EditorFloatingMenu.module.scss

@@ -15,9 +15,9 @@
 
   .menuHolder {
     background: #fff;
-    left: calc(100% + 1rem);
+    left: 40px;
     position: absolute;
-    top: -0.8rem;
+    top: -0.4rem;
     min-width: 64vw;
   }
 }

src/components/Editor/EditorFloatingMenu/EditorFloatingMenu.tsx

@@ -32,7 +32,7 @@ const validateEmbed = async (value) => {
 
 export const EditorFloatingMenu = (props: FloatingMenuProps) => {
   const { t } = useLocalize()
-  const [selectedMenuItem, setSelectedMenuItem] = createSignal<MenuItem | null>(null)
+  const [selectedMenuItem, setSelectedMenuItem] = createSignal<MenuItem | undefined>()
   const [menuOpen, setMenuOpen] = createSignal<boolean>(false)
   const handleEmbedFormSubmit = async (value: string) => {
     // TODO: add support instagram embed (blockquote)
@@ -53,14 +53,19 @@ export const EditorFloatingMenu = (props: FloatingMenuProps) => {
     }
   })
   const closeUploadModalHandler = () => {
-    setSelectedMenuItem(null)
+    setSelectedMenuItem()
     setMenuOpen(false)
   }
 
   return (
     <>
       <div ref={props.ref} class={styles.editorFloatingMenu}>
-        <button type="button" onClick={() => setMenuOpen(!menuOpen())}>
+        <button
+          type="button"
+          onClick={() => {
+            setMenuOpen(!menuOpen())
+          }}
+        >
           <Icon name="editor-plus" />
         </button>
         <Show when={menuOpen()}>
@@ -73,7 +78,7 @@ export const EditorFloatingMenu = (props: FloatingMenuProps) => {
                 placeholder={t('Paste Embed code')}
                 showInput={true}
                 onClose={closeUploadModalHandler}
-                onClear={() => setSelectedMenuItem(null)}
+                onClear={() => setSelectedMenuItem()}
                 validate={validateEmbed}
                 onSubmit={handleEmbedFormSubmit}
                 errorMessage={t('Error')}
@@ -83,7 +88,7 @@ export const EditorFloatingMenu = (props: FloatingMenuProps) => {
         </Show>
       </div>
       <Modal variant="narrow" name="uploadImage" onClose={closeUploadModalHandler}>
-        <UploadModalContent closeCallback={() => setSelectedMenuItem(null)} editor={props.editor} />
+        <UploadModalContent closeCallback={() => setSelectedMenuItem()} editor={props.editor} />
       </Modal>
     </>
   )

src/components/Editor/EditorFloatingMenu/Menu/Menu.tsx

@@ -2,6 +2,7 @@ import styles from './Menu.module.scss'
 import { Icon } from '../../../_shared/Icon'
 
 export type MenuItem = 'image' | 'embed' | 'horizontal-rule'
+
 type Props = {
   selectedItem: (value: string) => void
 }

src/components/Editor/UploadModal/UploadModalContent.tsx

@@ -11,6 +11,7 @@ import { useLocalize } from '../../../context/localize'
 import { Editor } from '@tiptap/core'
 import { Loading } from '../../_shared/Loading'
 import { verifyImg } from '../../../utils/verifyImg'
+import { imageProxy } from '../../../utils/imageProxy'
 
 type Props = {
   editor: Editor
@@ -29,7 +30,7 @@ export const UploadModalContent = (props: Props) => {
       .chain()
       .focus()
       .extendMarkRange('link')
-      .setImage({ src: `https://new.discours.io/api/image?url=${src}` })
+      .setImage({ src: imageProxy(src) })
       .run()
     hideModal()
   }
@@ -43,6 +44,7 @@ export const UploadModalContent = (props: Props) => {
       setIsUploading(true)
       const fileUrl = await handleFileUpload(file)
       setIsUploading(false)
+      props.closeCallback()
       renderImage(fileUrl)
     } catch (error) {
       console.error('[upload image] error', error)

src/components/Feed/Sidebar/Sidebar.tsx

@@ -1,4 +1,4 @@
-import { createSignal, For } from 'solid-js'
+import { For } from 'solid-js'
 import type { Author } from '../../../graphql/types.gen'
 import { useAuthorsStore } from '../../../stores/zine/authors'
 import { Icon } from '../../_shared/Icon'
@@ -29,10 +29,6 @@ export const Sidebar = (props: FeedSidebarProps) => {
   const { articlesByTopic } = useArticlesStore()
   const { topicEntities } = useTopicsStore()
 
-  createSignal(() => {
-    console.log('!!! topicEntities:', topicEntities())
-  })
-
   const checkTopicIsSeen = (topicSlug: string) => {
     return articlesByTopic()[topicSlug]?.every((article) => Boolean(seen()[article.slug]))
   }

src/components/Nav/Header.module.scss

@@ -484,12 +484,16 @@
       width: 100%;
     }
   }
+  .icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
 
     img {
       height: 20px;
-    vertical-align: middle;
       width: auto;
     }
+  }
 
   .textLabel {
     display: none;

src/components/_shared/Icon/Icon.module.scss

@@ -5,6 +5,7 @@
   img {
     width: 100%;
     height: 100%;
+    display: block;
   }
 }
 

src/components/_shared/Image/Image.tsx

@@ -1,8 +1,9 @@
 import { splitProps } from 'solid-js'
 import type { JSX } from 'solid-js'
+import { imageProxy } from '../../../utils/imageProxy'
 
 export const Image = (props: JSX.ImgHTMLAttributes<HTMLImageElement>) => {
   const [local, others] = splitProps(props, ['src'])
 
-  return <img src={`/api/image?url=${encodeURI(local.src)}`} {...others} />
+  return <img src={imageProxy(local.src)} {...others} />
 }

src/utils/imageProxy.ts

@@ -0,0 +1,4 @@
+import { isDev } from './config'
+export const imageProxy = (url: string) => {
+  return `${isDev ? 'https://new.discours.io' : ''}/api/image?url=${encodeURI(url)}`
+}