diff --git a/src/components/Editor/Editor.tsx b/src/components/Editor/Editor.tsx index 6c05cf40..80f46321 100644 --- a/src/components/Editor/Editor.tsx +++ b/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({ diff --git a/src/components/Editor/EditorFloatingMenu/EditorFloatingMenu.module.scss b/src/components/Editor/EditorFloatingMenu/EditorFloatingMenu.module.scss index 83d6bdbd..0e677cbb 100644 --- a/src/components/Editor/EditorFloatingMenu/EditorFloatingMenu.module.scss +++ b/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; } } diff --git a/src/components/Editor/EditorFloatingMenu/EditorFloatingMenu.tsx b/src/components/Editor/EditorFloatingMenu/EditorFloatingMenu.tsx index 30d91a07..43ea8501 100644 --- a/src/components/Editor/EditorFloatingMenu/EditorFloatingMenu.tsx +++ b/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(null) + const [selectedMenuItem, setSelectedMenuItem] = createSignal() const [menuOpen, setMenuOpen] = createSignal(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 ( <>
- @@ -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) => {
- setSelectedMenuItem(null)} editor={props.editor} /> + setSelectedMenuItem()} editor={props.editor} /> ) diff --git a/src/components/Editor/EditorFloatingMenu/Menu/Menu.tsx b/src/components/Editor/EditorFloatingMenu/Menu/Menu.tsx index 3a2b63ee..74b5c52b 100644 --- a/src/components/Editor/EditorFloatingMenu/Menu/Menu.tsx +++ b/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 } diff --git a/src/components/Editor/UploadModal/UploadModalContent.tsx b/src/components/Editor/UploadModal/UploadModalContent.tsx index 8f2156fe..52b64753 100644 --- a/src/components/Editor/UploadModal/UploadModalContent.tsx +++ b/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) diff --git a/src/components/Feed/Sidebar/Sidebar.tsx b/src/components/Feed/Sidebar/Sidebar.tsx index 94863863..bf76695e 100644 --- a/src/components/Feed/Sidebar/Sidebar.tsx +++ b/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])) } diff --git a/src/components/Nav/Header.module.scss b/src/components/Nav/Header.module.scss index c941b577..fe344927 100644 --- a/src/components/Nav/Header.module.scss +++ b/src/components/Nav/Header.module.scss @@ -484,11 +484,15 @@ width: 100%; } } + .icon { + display: inline-flex; + align-items: center; + justify-content: center; - img { - height: 20px; - vertical-align: middle; - width: auto; + img { + height: 20px; + width: auto; + } } .textLabel { diff --git a/src/components/_shared/Icon/Icon.module.scss b/src/components/_shared/Icon/Icon.module.scss index b5602d55..6618efa9 100644 --- a/src/components/_shared/Icon/Icon.module.scss +++ b/src/components/_shared/Icon/Icon.module.scss @@ -5,6 +5,7 @@ img { width: 100%; height: 100%; + display: block; } } diff --git a/src/components/_shared/Image/Image.tsx b/src/components/_shared/Image/Image.tsx index a4a6f88b..fa957458 100644 --- a/src/components/_shared/Image/Image.tsx +++ b/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) => { const [local, others] = splitProps(props, ['src']) - return + return } diff --git a/src/utils/imageProxy.ts b/src/utils/imageProxy.ts new file mode 100644 index 00000000..3e069019 --- /dev/null +++ b/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)}` +}