From aa783b4e76e21c52bc8ce58828113a93dcf6cf14 Mon Sep 17 00:00:00 2001 From: j <13580441+gary02@users.noreply.github.com> Date: Sat, 31 Aug 2024 16:33:16 +0800 Subject: [PATCH 01/29] feat(search-user): allow blockees to search and mention blockers --- package-lock.json | 4 ++-- .../Editor/Article/extensions/mention/suggestion.ts | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/package-lock.json b/package-lock.json index 94a8696f04..ac6e69547f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "matters-web", - "version": "5.5.1", + "version": "5.6.1", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "matters-web", - "version": "5.5.1", + "version": "5.6.1", "license": "Apache-2.0", "dependencies": { "@apollo/react-common": "^3.1.3", diff --git a/src/components/Editor/Article/extensions/mention/suggestion.ts b/src/components/Editor/Article/extensions/mention/suggestion.ts index 569bbc7765..2416885ec1 100644 --- a/src/components/Editor/Article/extensions/mention/suggestion.ts +++ b/src/components/Editor/Article/extensions/mention/suggestion.ts @@ -20,7 +20,7 @@ export const makeMentionSuggestion = ({ items: async ({ query }: { query: string }) => { const { data } = await client.query({ query: SEARCH_USERS, - variables: { search: `@${query}`, exclude: 'blocked' }, + variables: { search: `@${query}`}, }) const mentionUsers = (data?.search.edges || []).map(({ node }: any) => node) From 8b9239313139862fb1c92ac16e588961876f7ab7 Mon Sep 17 00:00:00 2001 From: j <13580441+gary02@users.noreply.github.com> Date: Sat, 31 Aug 2024 22:39:53 +0800 Subject: [PATCH 02/29] style: minor --- src/components/Editor/Article/extensions/mention/suggestion.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Editor/Article/extensions/mention/suggestion.ts b/src/components/Editor/Article/extensions/mention/suggestion.ts index 2416885ec1..f82912c893 100644 --- a/src/components/Editor/Article/extensions/mention/suggestion.ts +++ b/src/components/Editor/Article/extensions/mention/suggestion.ts @@ -20,7 +20,7 @@ export const makeMentionSuggestion = ({ items: async ({ query }: { query: string }) => { const { data } = await client.query({ query: SEARCH_USERS, - variables: { search: `@${query}`}, + variables: { search: `@${query}` }, }) const mentionUsers = (data?.search.edges || []).map(({ node }: any) => node) From 392081ee235579941b5334ff88dbed5c718960db Mon Sep 17 00:00:00 2001 From: devformatters2 <177856586+devformatters2@users.noreply.github.com> Date: Wed, 4 Sep 2024 15:54:05 +0800 Subject: [PATCH 03/29] feat(auth): remove connect to facebook --- .../Me/Settings/Account/Socials/index.tsx | 69 ++++++------------- 1 file changed, 22 insertions(+), 47 deletions(-) diff --git a/src/views/Me/Settings/Account/Socials/index.tsx b/src/views/Me/Settings/Account/Socials/index.tsx index 4ddb5dd7b8..700f2aeb2a 100644 --- a/src/views/Me/Settings/Account/Socials/index.tsx +++ b/src/views/Me/Settings/Account/Socials/index.tsx @@ -13,7 +13,6 @@ import { OAUTH_STORAGE_BIND_STATE_UNAVAILABLE, } from '~/common/enums' import { - facebookOauthUrl, googleOauthUrl, isSafari, sleep, @@ -53,7 +52,6 @@ const Socials = () => { const [loadingState, setLoadingState] = useState('') const isGoogleLoading = loadingState === 'Google' const isTwitterLoading = loadingState === 'Twitter' - const isFacebookLoading = loadingState === 'Facebook' const oauthType = 'bind' @@ -82,12 +80,6 @@ const Socials = () => { } } - const gotoFacebook = async () => { - setLoadingState('Facebook') - const url = await facebookOauthUrl(oauthType) - router.push(url) - } - useEffect(() => { const bindResult = storage.remove<{ type: SocialAccountType @@ -254,46 +246,29 @@ const Socials = () => { {/* Facebook */} - - {({ openDialog }) => { - return ( - } - spacing={12} - > - Facebook - - } - rightText={facebookId ? `@${facebookId}` : undefined} - rightIcon={ - facebookId ? ( + {facebookId && ( + + {({ openDialog }) => { + return ( + } + spacing={12} + > + Facebook + + } + rightText={`@${facebookId}`} + rightIcon={ - ) : undefined - } - onClick={facebookId ? () => openDialog() : undefined} - right={ - facebookId ? undefined : ( - <> - {!isFacebookLoading && ( - - - - )} - {isFacebookLoading && ( - - )} - - ) - } - /> - ) - }} - + } + onClick={() => openDialog()} + /> + ) + }} + + )} ) } From 9ccc83a494bbf7fc661ce3da95402f92e210338c Mon Sep 17 00:00:00 2001 From: bluecloud <96812901+pitb2022@users.noreply.github.com> Date: Thu, 5 Sep 2024 12:07:50 +0800 Subject: [PATCH 04/29] fix: align universal auth trigger --- src/common/enums/events.ts | 2 ++ src/components/Comment/FooterActions/index.tsx | 2 +- src/components/Forms/ArticleCommentForm/index.tsx | 4 ++-- src/views/CampaignDetail/Apply/Button/index.tsx | 2 +- src/views/User/CollectionDetail/CollectionProfile/index.tsx | 2 +- 5 files changed, 7 insertions(+), 5 deletions(-) diff --git a/src/common/enums/events.ts b/src/common/enums/events.ts index f1c0c22e04..21e57d08e6 100644 --- a/src/common/enums/events.ts +++ b/src/common/enums/events.ts @@ -71,6 +71,8 @@ export enum UNIVERSAL_AUTH_TRIGGER { visitorWall = 'visitorWall', momentComment = 'momentComment', momentLike = 'momentLike', + applyCampaign = 'applyCampaign', + collectionLike = 'collectionLike', } /** diff --git a/src/components/Comment/FooterActions/index.tsx b/src/components/Comment/FooterActions/index.tsx index 27be351f3b..290d4cb443 100644 --- a/src/components/Comment/FooterActions/index.tsx +++ b/src/components/Comment/FooterActions/index.tsx @@ -134,7 +134,7 @@ const BaseFooterActions = ({ onClick = () => { window.dispatchEvent( new CustomEvent(OPEN_UNIVERSAL_AUTH_DIALOG, { - detail: { trigger: UNIVERSAL_AUTH_TRIGGER.collectArticle }, + detail: { trigger: UNIVERSAL_AUTH_TRIGGER.comment }, }) ) } diff --git a/src/components/Forms/ArticleCommentForm/index.tsx b/src/components/Forms/ArticleCommentForm/index.tsx index 614acafce0..7fbf4c381b 100644 --- a/src/components/Forms/ArticleCommentForm/index.tsx +++ b/src/components/Forms/ArticleCommentForm/index.tsx @@ -193,7 +193,7 @@ export const ArticleCommentForm: React.FC = ({ event.preventDefault() window.dispatchEvent( new CustomEvent(OPEN_UNIVERSAL_AUTH_DIALOG, { - detail: { trigger: UNIVERSAL_AUTH_TRIGGER.collectArticle }, + detail: { trigger: UNIVERSAL_AUTH_TRIGGER.comment }, }) ) return @@ -278,7 +278,7 @@ export const ArticleCommentForm: React.FC = ({ onClick={() => { window.dispatchEvent( new CustomEvent(OPEN_UNIVERSAL_AUTH_DIALOG, { - detail: { trigger: UNIVERSAL_AUTH_TRIGGER.collectArticle }, + detail: { trigger: UNIVERSAL_AUTH_TRIGGER.comment }, }) ) }} diff --git a/src/views/CampaignDetail/Apply/Button/index.tsx b/src/views/CampaignDetail/Apply/Button/index.tsx index 508fb8eff3..cc52edcbe9 100644 --- a/src/views/CampaignDetail/Apply/Button/index.tsx +++ b/src/views/CampaignDetail/Apply/Button/index.tsx @@ -89,7 +89,7 @@ const ApplyCampaignButton = ({ onClick = () => { window.dispatchEvent( new CustomEvent(OPEN_UNIVERSAL_AUTH_DIALOG, { - detail: { trigger: UNIVERSAL_AUTH_TRIGGER.replyComment }, + detail: { trigger: UNIVERSAL_AUTH_TRIGGER.applyCampaign }, }) ) } diff --git a/src/views/User/CollectionDetail/CollectionProfile/index.tsx b/src/views/User/CollectionDetail/CollectionProfile/index.tsx index a34bec6a36..eff05325f3 100644 --- a/src/views/User/CollectionDetail/CollectionProfile/index.tsx +++ b/src/views/User/CollectionDetail/CollectionProfile/index.tsx @@ -49,7 +49,7 @@ const CollectionProfile = ({ collection }: CollectionProfileProps) => { onClick = () => { window.dispatchEvent( new CustomEvent(OPEN_UNIVERSAL_AUTH_DIALOG, { - detail: { trigger: UNIVERSAL_AUTH_TRIGGER.collectArticle }, + detail: { trigger: UNIVERSAL_AUTH_TRIGGER.collectionLike }, }) ) } From 57881c622b69c9ade6559e3cad02b93ecd71c80d Mon Sep 17 00:00:00 2001 From: devformatters2 <177856586+devformatters2@users.noreply.github.com> Date: Thu, 5 Sep 2024 16:01:47 +0800 Subject: [PATCH 05/29] fix(tabs): fix flex layout causes incorrect spacing rendering for overflow list on mobile Safari --- src/components/SquareTabs/styles.module.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/SquareTabs/styles.module.css b/src/components/SquareTabs/styles.module.css index b20d95eb29..19957498e2 100644 --- a/src/components/SquareTabs/styles.module.css +++ b/src/components/SquareTabs/styles.module.css @@ -43,8 +43,8 @@ .tabList { @mixin hide-scrollbar; - display: flex; overflow-x: auto; + white-space: nowrap; -webkit-overflow-scrolling: touch; &.sticky { @@ -58,7 +58,7 @@ .tabItem { @mixin transition; - flex-shrink: 0; + display: inline-block; padding: var(--sp5) var(--sp10); margin-right: var(--sp16); font-size: var(--text14); From 6b8c826459505f1b3767618bdd1ea1b04d90f382 Mon Sep 17 00:00:00 2001 From: robertu7 <4065233+robertu7@users.noreply.github.com> Date: Mon, 16 Sep 2024 15:56:39 +0800 Subject: [PATCH 06/29] feat(editor): switch focusing on hit enter/backspace of title, summary and editor content --- src/common/enums/events.ts | 2 + .../Editor/Article/Summary/index.tsx | 44 ++++++++++++++++--- src/components/Editor/Article/Title/index.tsx | 33 +++++++++++--- src/components/Editor/Article/index.tsx | 18 +++++++- 4 files changed, 82 insertions(+), 15 deletions(-) diff --git a/src/common/enums/events.ts b/src/common/enums/events.ts index 21e57d08e6..7dfcf5783b 100644 --- a/src/common/enums/events.ts +++ b/src/common/enums/events.ts @@ -5,6 +5,8 @@ export const ANALYTICS = 'analytics' export const REFETCH_RESPONSES = 'refetchResponses' export const SYNC_APPRECIATE_BUTTON_COUNT = 'syncAppreciateButtonCount' export const SYNC_QUOTE_COMMENT = 'syncQuoteComment' +export const FOCUS_EDITOR_TITLE = 'focusEditorTitle' +export const FOCUS_EDITOR_SUMMARY = 'focusEditorSummary' // Moment export const ADD_MOMENT_COMMENT_MENTION = 'addMomentCommentMention' diff --git a/src/components/Editor/Article/Summary/index.tsx b/src/components/Editor/Article/Summary/index.tsx index 022e7f80b5..b33f882635 100644 --- a/src/components/Editor/Article/Summary/index.tsx +++ b/src/components/Editor/Article/Summary/index.tsx @@ -1,14 +1,18 @@ +import { Editor } from '@matters/matters-editor' import autosize from 'autosize' import classNames from 'classnames' -import React, { useRef, useState } from 'react' +import { useEffect, useRef, useState } from 'react' import { useIntl } from 'react-intl' import { useDebouncedCallback } from 'use-debounce' import { + FOCUS_EDITOR_SUMMARY, + FOCUS_EDITOR_TITLE, INPUT_DEBOUNCE, KEYVALUE, MAX_ARTICE_SUMMARY_LENGTH, } from '~/common/enums' +import { useEventListener } from '~/components' /** * This is an optional component for user to add summary. @@ -26,15 +30,17 @@ interface Props { defaultValue?: string enable?: boolean update: (params: { summary: any }) => void + editor?: Editor | null } const EditorSummary: React.FC = ({ defaultValue = '', enable, update, + editor, }) => { const intl = useIntl() - const instance: React.RefObject | null = useRef(null) + const inputRef = useRef(null) const [value, setValue] = useState(defaultValue) const debouncedUpdate = useDebouncedCallback(() => { update({ summary: value }) @@ -52,24 +58,48 @@ const EditorSummary: React.FC = ({ update({ summary: value }) const handleKeyDown = (event: React.KeyboardEvent) => { + const target = event.target as HTMLTextAreaElement + if (event.key.toLowerCase() === KEYVALUE.enter) { event.preventDefault() + + if (target.selectionStart === target.value.length) { + editor?.commands.focus('start') + } + } + + if ( + event.key.toLowerCase() === KEYVALUE.backSpace && + target.selectionStart === 0 + ) { + event.preventDefault() + window.dispatchEvent(new CustomEvent(FOCUS_EDITOR_TITLE)) } } const handlePaste = () => { // FIXME: triggers the height adjustment on paste setTimeout(() => { - autosize.update(instance.current) + autosize.update(inputRef.current!) }) } - React.useEffect(() => { - if (enable && instance) { - autosize(instance.current) + useEffect(() => { + if (enable && inputRef.current) { + autosize(inputRef.current) } }, []) + useEventListener(FOCUS_EDITOR_SUMMARY, () => { + if (!inputRef.current) return + + inputRef.current.focus() + + // Set cursor to the end of the text + const pos = inputRef.current.value.length + inputRef.current.setSelectionRange(pos, pos) + }) + if (!enable) { return null } @@ -82,7 +112,7 @@ const EditorSummary: React.FC = ({ return (