diff --git a/.github/workflows/check_do_not_merge.yaml b/.github/workflows/check_do_not_merge.yaml index 0f1d237b..0a29154e 100644 --- a/.github/workflows/check_do_not_merge.yaml +++ b/.github/workflows/check_do_not_merge.yaml @@ -12,10 +12,16 @@ on: jobs: ok-to-merge: - if: contains(github.event.pull_request.labels.*.name, 'DO NOT MERGE') == false runs-on: ubuntu-latest steps: + - name: This PR is labeled with do not merge + if: contains(github.event.pull_request.labels.*.name, 'DO NOT MERGE') == true + run: | + echo "This PR cannot be merged" + exit 1 + - name: This PR is not labeled with do not merge + if: contains(github.event.pull_request.labels.*.name, 'DO NOT MERGE') == false run: | echo "This PR can be merged" exit 0 diff --git a/CHANGELOG.md b/CHANGELOG.md index 70df6d68..05a962ce 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,8 @@ All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines. +## 4.0.0-beta.13 (2024-09-19) + ## 4.0.0-beta.12 (2024-09-02) ## 4.0.0-beta.11 (2024-08-16) diff --git a/package.json b/package.json index 384dac6d..752ddd32 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@amityco/ui-kit-open-source", - "version": "4.0.0-beta.12", + "version": "4.0.0-beta.13", "engines": { "node": ">=20", "pnpm": "9" diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 254f406e..12a18800 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -137,7 +137,7 @@ importers: devDependencies: '@amityco/ts-sdk': specifier: ^6.30.0 - version: 6.30.0 + version: 6.30.1 '@eslint/js': specifier: ^9.4.0 version: 9.7.0 @@ -315,8 +315,8 @@ packages: '@adobe/css-tools@4.3.3': resolution: {integrity: sha512-rE0Pygv0sEZ4vBWHlAgJLGDU7Pm8xoO6p3wsEceb7GYAjScrOHpEo8KK/eVkAcnSM+slAEtXjA2JpdjLp4fJQQ==} - '@amityco/ts-sdk@6.30.0': - resolution: {integrity: sha512-kyW0ytV6Go3tAZ5EFmzeVLm2PE2jzgmlKnKygpK9iJPgY46wsGCVkhRFMCLMXGvpNPz3D1Tnmq+83wL/xNTJKg==} + '@amityco/ts-sdk@6.30.1': + resolution: {integrity: sha512-aD3e2wf0QdrT0qv62slB7TdBhKQkZv7IrUgX5U7yJt2BrjxM1wE0pMBE5Tx8bNalXwgnQFVtbeJkSmrZ8XCZUQ==} engines: {node: '>=12', npm: '>=6'} '@ampproject/remapping@2.3.0': @@ -6329,6 +6329,7 @@ packages: engines: {node: '>=0.6.0', teleport: '>=0.2.0'} deprecated: |- You or someone you depend on is using Q, the JavaScript Promise library that gave JavaScript developers strong feelings about promises. They can almost certainly migrate to the native JavaScript promise now. Thank you literally everyone for joining me in this bet against the odds. Be excellent to each other. + (For a CapTP with native promises, see @endo/eventual-send and @endo/captp) qs@6.11.0: @@ -7767,7 +7768,7 @@ snapshots: '@adobe/css-tools@4.3.3': {} - '@amityco/ts-sdk@6.30.0': + '@amityco/ts-sdk@6.30.1': dependencies: agentkeepalive: 4.5.0 axios: 1.7.2(debug@4.3.5) diff --git a/readme.md b/readme.md index ef335f14..d737c551 100644 --- a/readme.md +++ b/readme.md @@ -2,135 +2,20 @@ ## Prerequisites -Before getting started, ensure that you have the following prerequisites installed on your system: +Before starting to work, please read the following instructions. +https://ekoapp.atlassian.net/wiki/spaces/UP/pages/2443706407/ASC+Web+UIKit+V4+Governance + +If you have any questions, please ask / discuss with the team. + +### Installation - [Node.js](https://nodejs.org/) LTS version (currently version 20) - [pnpm](https://pnpm.io/) version 8 ## How to install PNPM (Optional) -``` -corepack enable pnpm -``` - -Ref: https://pnpm.io/installation#using-corepack - -## Running Storybook (Optional) - -To run Storybook and view the UI components in isolation, follow these steps: - -1. Clone the Amity UI-Kit repository: - - ``` - git clone https://github.com/AmityCo/Amity-Social-Cloud-UIKit-Web-OpenSource.git - ``` - -2. Navigate to the cloned repository's directory: - - ``` - cd Amity-Social-Cloud-UIKit-Web-OpenSource - ``` - -3. Install the dependencies using pnpm: - - ``` - pnpm install - ``` - -4. Create a `.env` file at the root of the project with the following content: - - ``` - STORYBOOK_API_REGION= - STORYBOOK_API_KEY= - ``` - - Replace `` and `` with your actual credentials. - -5. Run Storybook: - - ``` - pnpm run storybook - ``` - -6. Open your browser and navigate to `http://localhost:6006` to view the Storybook interface. - -## Installation - -To install the Amity UI-Kit together with another project, follow these steps: - -1. Clone the repository using the following command: - - ``` - git clone https://github.com/AmityCo/Amity-Social-Cloud-UIKit-Web-OpenSource.git - ``` - -2. Navigate to the cloned repository's directory: - - ``` - cd ./Amity-Social-Cloud-UIKit-Web-OpenSource - ``` - -3. Install the dependencies using pnpm: - - ``` - pnpm install - ``` - -4. Build the project: - - ``` - pnpm run build - ``` - -5. Pack the project - - ``` - pnpm pack - ``` - -6. Navigate to your application's directory: - - ``` - cd - ``` - -7. Install the Amity UI-Kit to your application using one of the following package managers: - - NPM: - ``` - npm i file:/ --save - ``` - - Yarn (Classic): - ``` - yarn add file:/ - ``` - - PNPM: - ``` - pnpm i file:/ - ``` - -## Documentation - -For detailed information and guidance on using the Amity UI-Kit, please refer to our comprehensive online documentation available at [https://docs.amity.co](https://docs.amity.co). - -If you require further assistance or have any questions, please don't hesitate to contact our dedicated UI-Kit support team at **developers@amity.co**. We are here to help you make the most of the Amity UI-Kit. +Please refer to our online documentation at https://docs.amity.co or contact a Ui-Kit representative at \* \*developers@amity.co** for support. ## Contributing -We welcome contributions from the community to help improve and enhance the Amity UI-Kit. If you are interested in contributing to this project, please review our [contributing guide](https://github.com/AmityCo/Amity-Social-Cloud-UIKit-Web-OpenSource/blob/develop/contributing.md) for guidelines and best practices. - -Thank you for choosing the Amity UI-Kit for your web development needs! - -### FAQ - -Q: I tried to run `pnpm build` and it throws a types error. -A: Try to structure your project to be like this: - -``` -- your_app - - src -- Amity-Social-Cloud-UIKit-Web-OpenSource - - src -``` - -Q: The modifications I made to the code do not appear to be applied. -A: Please attempt to execute `npm cache clean` or `npm cache clean --force` to resolve this issue. +See [our contributing guide](https://github.com/EkoCommunications/AmityUiKitWeb/blob/develop/CONTRIBUTING.md) diff --git a/src/core/providers/UiKitProvider/styles.tsx b/src/core/providers/UiKitProvider/styles.tsx index 9c8cd6f5..d9e6f03c 100644 --- a/src/core/providers/UiKitProvider/styles.tsx +++ b/src/core/providers/UiKitProvider/styles.tsx @@ -30,5 +30,52 @@ export const UIStyles = styled.div` } } - ${skeletonCss} + .react-loading-skeleton { + --base-color: #ebebeb; + --highlight-color: #f5f5f5; + --animation-duration: 1.5s; + --animation-direction: normal; + --pseudo-element-display: block; /* Enable animation */ + + background-color: var(--base-color); + + width: 100%; + border-radius: 0.25rem; + display: inline-flex; + line-height: 1; + + position: relative; + user-select: none; + overflow: hidden; + } + + .react-loading-skeleton::after { + content: ' '; + display: var(--pseudo-element-display); + position: absolute; + top: 0; + left: 0; + right: 0; + height: 100%; + background-repeat: no-repeat; + background-image: linear-gradient( + 90deg, + var(--base-color), + var(--highlight-color), + var(--base-color) + ); + transform: translateX(-100%); + + animation-name: react-loading-skeleton; + animation-direction: var(--animation-direction); + animation-duration: var(--animation-duration); + animation-timing-function: ease-in-out; + animation-iteration-count: infinite; + } + + @media (prefers-reduced-motion) { + .react-loading-skeleton { + --pseudo-element-display: none; /* Disable animation */ + } + } `; diff --git a/src/global.d.ts b/src/global.d.ts index 6bc62bb5..0d0c428c 100644 --- a/src/global.d.ts +++ b/src/global.d.ts @@ -14,6 +14,11 @@ interface ImportMeta { readonly env: ImportMetaEnv; } +declare module '*skeleton.css' { + const classes: string; + export default classes; +} + declare module '*.css?inline' { const classes: string; export default classes; diff --git a/src/v4/icons/PinBadge.tsx b/src/v4/icons/PinBadge.tsx index 836bb334..b2b989dc 100644 --- a/src/v4/icons/PinBadge.tsx +++ b/src/v4/icons/PinBadge.tsx @@ -11,7 +11,7 @@ export const PinBadgeIcon = (props: React.SVGProps) => { {...props} > diff --git a/src/v4/social/components/Comment/Comment.tsx b/src/v4/social/components/Comment/Comment.tsx index deca3ba4..489e4eae 100644 --- a/src/v4/social/components/Comment/Comment.tsx +++ b/src/v4/social/components/Comment/Comment.tsx @@ -1,4 +1,4 @@ -import React, { useCallback, useEffect, useMemo, useState } from 'react'; +import React, { useCallback, useState } from 'react'; import { Typography, BottomSheet } from '~/v4/core/components'; import { ModeratorBadge } from '~/v4/social/elements/ModeratorBadge'; import { Timestamp } from '~/v4/social/elements/Timestamp'; @@ -21,6 +21,7 @@ import { CreateCommentParams } from '~/v4/social/components/CommentComposer/Comm import useCommentSubscription from '~/v4/core/hooks/subscriptions/useCommentSubscription'; import { TextWithMention } from '~/v4/social/internal-components/TextWithMention/TextWithMention'; import millify from 'millify'; +import useCommunityPostPermission from '~/v4/social/hooks/useCommunityPostPermission'; const EllipsisH = ({ ...props }: React.SVGProps) => ( void; shouldAllowInteraction?: boolean; } @@ -82,11 +83,10 @@ export const Comment = ({ onClickReply, shouldAllowInteraction = true, }: CommentProps) => { - const { accessibilityId, config, defaultConfig, isExcluded, uiReference, themeStyles } = - useAmityComponent({ - pageId, - componentId, - }); + const { accessibilityId, isExcluded, themeStyles } = useAmityComponent({ + pageId, + componentId, + }); const { confirm } = useConfirmContext(); @@ -97,6 +97,11 @@ export const Comment = ({ const [isShowMore, setIsShowMore] = useState(false); + const { isModerator: isModeratorUser } = useCommunityPostPermission({ + community, + userId: comment.creator?.userId, + }); + const toggleBottomSheet = () => setBottomSheetOpen((prev) => !prev); const isLiked = (comment.myReactions || []).some((reaction) => reaction === 'like'); @@ -211,7 +216,7 @@ export const Comment = ({ {comment.creator?.displayName} - + {isModeratorUser && } -
onClickReply(comment)}> +
onClickReply(comment)} + > Reply diff --git a/src/v4/social/components/CommentComposer/CommentComposer.tsx b/src/v4/social/components/CommentComposer/CommentComposer.tsx index 182d150c..15d06113 100644 --- a/src/v4/social/components/CommentComposer/CommentComposer.tsx +++ b/src/v4/social/components/CommentComposer/CommentComposer.tsx @@ -33,6 +33,7 @@ export type CreateCommentParams = { }; interface CommentComposerProps { + pageId?: string; referenceId: string; referenceType: Amity.CommentReferenceType; replyTo?: Amity.Comment; @@ -42,6 +43,7 @@ interface CommentComposerProps { } export const CommentComposer = ({ + pageId = '*', referenceId, referenceType, replyTo, @@ -55,6 +57,7 @@ export const CommentComposer = ({ const editorRef = useRef(null); const composerRef = useRef(null); const composerInputRef = useRef(null); + const componentId = 'comment_composer_bar'; const [composerHeight, setComposerHeight] = useState(0); const [mentionOffsetBottom, setMentionOffsetBottom] = useState(0); @@ -129,7 +132,12 @@ export const CommentComposer = ({
} />
-
+ +
+ ); + }) + ); + }; + + const renderPinnedPost = () => { + const pinnedPostsFilter = + announcementPosts.length > 0 ? pinnedPostsWithFilterOutAnnouncePost : pinnedPosts; + + return isLoading ? ( + + ) : ( + pinnedPostsFilter.map(({ post }: Amity.Post) => { + return ( + + ); + }) + ); + }; return (
{isMemberPrivateCommunity || community?.isPublic ? ( - + pinnedPost.length > 0 ? ( + <> + {renderAnnouncementPost()} + {renderPinnedPost()} + + ) : ( + + ) ) : ( )} diff --git a/src/v4/social/components/PostContent/PostContent.module.css b/src/v4/social/components/PostContent/PostContent.module.css index a2afeebc..730cad73 100644 --- a/src/v4/social/components/PostContent/PostContent.module.css +++ b/src/v4/social/components/PostContent/PostContent.module.css @@ -261,6 +261,12 @@ color: var(--asc-color-base-shade2); } +.postContent__wrapRightMenu { + display: flex; + align-items: center; + gap: 0.25rem; +} + @keyframes fade-in { from { opacity: 0; diff --git a/src/v4/social/components/PostContent/PostContent.tsx b/src/v4/social/components/PostContent/PostContent.tsx index 31618cb6..d359ef78 100644 --- a/src/v4/social/components/PostContent/PostContent.tsx +++ b/src/v4/social/components/PostContent/PostContent.tsx @@ -39,6 +39,7 @@ import { PageTypes, useNavigation } from '~/v4/core/providers/NavigationProvider import dayjs from 'dayjs'; import { useVisibilitySensor } from '~/v4/social/hooks/useVisibilitySensor'; import { AnnouncementBadge } from '~/v4/social/elements/AnnouncementBadge'; +import { PinBadge } from '~/v4/social/elements/PinBadge'; export enum AmityPostContentComponentStyle { FEED = 'feed', @@ -49,6 +50,7 @@ export enum AmityPostCategory { GENERAL = 'general', ANNOUNCEMENT = 'announcement', PIN = 'pin', + PIN_AND_ANNOUNCEMENT = 'pin_and_announcement', } interface PostTitleProps { @@ -181,7 +183,7 @@ export const PostContent = ({ style, }: PostContentProps) => { const componentId = 'post_content'; - const { themeStyles } = useAmityComponent({ + const { themeStyles, accessibilityId } = useAmityComponent({ pageId, componentId, }); @@ -328,8 +330,14 @@ export const PostContent = ({ }, [post, isVisible, page.type]); return ( -
- {category === AmityPostCategory.ANNOUNCEMENT && ( +
+ {(category === AmityPostCategory.ANNOUNCEMENT || + category === AmityPostCategory.PIN_AND_ANNOUNCEMENT) && ( )}
@@ -356,29 +364,36 @@ export const PostContent = ({
- {style === AmityPostContentComponentStyle.FEED ? ( -
- {!hideMenu && ( - - setDrawerData({ - content: ( - removeDrawerData()} - pageId={pageId} - componentId={componentId} - onPostDeleted={onPostDeleted} - /> - ), - }) - } - /> - )} -
- ) : null} +
+ {(category === AmityPostCategory.PIN || + category === AmityPostCategory.PIN_AND_ANNOUNCEMENT) && ( + + )} + + {style === AmityPostContentComponentStyle.FEED ? ( +
+ {!hideMenu && ( + + setDrawerData({ + content: ( + removeDrawerData()} + pageId={pageId} + componentId={componentId} + onPostDeleted={onPostDeleted} + /> + ), + }) + } + /> + )} +
+ ) : null} +
diff --git a/src/v4/social/components/ReplyComment/ReplyComment.tsx b/src/v4/social/components/ReplyComment/ReplyComment.tsx index 62aa5c0c..4bfa69c7 100644 --- a/src/v4/social/components/ReplyComment/ReplyComment.tsx +++ b/src/v4/social/components/ReplyComment/ReplyComment.tsx @@ -21,6 +21,7 @@ import { CommentOptions } from '~/v4/social/components/CommentOptions/CommentOpt import { CreateCommentParams } from '~/v4/social/components/CommentComposer/CommentComposer'; import { CommentInput } from '~/v4/social/components/CommentComposer/CommentInput'; import styles from './ReplyComment.module.css'; +import useCommunityPostPermission from '~/v4/social/hooks/useCommunityPostPermission'; type ReplyCommentProps = { pageId?: string; @@ -41,6 +42,11 @@ const PostReplyComment = ({ pageId = '*', community, comment }: ReplyCommentProp const [isEditing, setIsEditing] = useState(false); const [commentData, setCommentData] = useState(); + const { isModerator: isModeratorUser } = useCommunityPostPermission({ + community, + userId: comment.creator?.userId, + }); + const isLiked = (comment.myReactions || []).some((reaction) => reaction === 'like'); const toggleBottomSheet = () => setBottomSheetOpen((prev) => !prev); @@ -154,8 +160,7 @@ const PostReplyComment = ({ pageId = '*', community, comment }: ReplyCommentProp {comment.creator?.displayName} - - + {isModeratorUser && } setSearchValue(ev.target.value)} + data-qa-anchor={accessibilityId} /> {searchValue != '' ? ( + diff --git a/src/v4/social/elements/EditPostButton/EditPostButton.tsx b/src/v4/social/elements/EditPostButton/EditPostButton.tsx index cc62b1f8..32e3ea05 100644 --- a/src/v4/social/elements/EditPostButton/EditPostButton.tsx +++ b/src/v4/social/elements/EditPostButton/EditPostButton.tsx @@ -10,7 +10,7 @@ type EditPostButtonProps = ButtonProps & { export function EditPostButton({ pageId = '*', componentId = '*', ...props }: EditPostButtonProps) { const elementId = 'edit_post_button'; - const { config, isExcluded, themeStyles } = useAmityElement({ + const { config, isExcluded, themeStyles, accessibilityId } = useAmityElement({ pageId, componentId, elementId, @@ -18,7 +18,12 @@ export function EditPostButton({ pageId = '*', componentId = '*', ...props }: Ed if (isExcluded) return null; return ( - ); diff --git a/src/v4/social/elements/PinBadge/PinBadge.module.css b/src/v4/social/elements/PinBadge/PinBadge.module.css new file mode 100644 index 00000000..0e795aca --- /dev/null +++ b/src/v4/social/elements/PinBadge/PinBadge.module.css @@ -0,0 +1,3 @@ +.pinBadge__icon { + fill: var(--asc-color-primary-default); +} diff --git a/src/v4/social/elements/PinBadge/PinBadge.tsx b/src/v4/social/elements/PinBadge/PinBadge.tsx index c9173e40..5b150f1d 100644 --- a/src/v4/social/elements/PinBadge/PinBadge.tsx +++ b/src/v4/social/elements/PinBadge/PinBadge.tsx @@ -1,4 +1,5 @@ import React from 'react'; +import styles from './PinBadge.module.css'; import { useAmityElement } from '~/v4/core/hooks/uikit'; import { IconComponent } from '~/v4/core/IconComponent'; import { PinBadgeIcon } from '~/v4/icons/PinBadge'; @@ -10,19 +11,18 @@ interface PinBadgeProps { export const PinBadge = ({ pageId, componentId }: PinBadgeProps) => { const elementId = 'pin_badge'; - const { config, themeStyles, isExcluded, accessibilityId, uiReference, defaultConfig } = - useAmityElement({ - pageId, - componentId, - elementId, - }); + const { config, isExcluded, accessibilityId, uiReference, defaultConfig } = useAmityElement({ + pageId, + componentId, + elementId, + }); if (isExcluded) return null; return ( } + defaultIcon={() => } imgIcon={() => {uiReference}} defaultIconName={defaultConfig.icon} configIconName={config.icon} diff --git a/src/v4/social/elements/PostTextField/PostTextField.module.css b/src/v4/social/elements/PostTextField/PostTextField.module.css index 8be851b0..85b5f687 100644 --- a/src/v4/social/elements/PostTextField/PostTextField.module.css +++ b/src/v4/social/elements/PostTextField/PostTextField.module.css @@ -46,3 +46,9 @@ .editorLink:hover { text-decoration: underline; } + +.postTextField__mentionInterceptor { + width: 100%; + height: 1px; + background-color: var(--asc-color-background-default); +} diff --git a/src/v4/social/elements/PostTextField/PostTextField.tsx b/src/v4/social/elements/PostTextField/PostTextField.tsx index 4d4d8fcc..9ba25416 100644 --- a/src/v4/social/elements/PostTextField/PostTextField.tsx +++ b/src/v4/social/elements/PostTextField/PostTextField.tsx @@ -31,6 +31,8 @@ import useCommunity from '~/v4/core/hooks/collections/useCommunity'; import { MentionItem } from '~/v4/social/internal-components/Lexical/MentionItem'; interface PostTextFieldProps { + pageId?: string; + componentId?: string; communityId?: string | null; attachmentAmount?: number; mentionContainer: HTMLElement | null; @@ -73,7 +75,7 @@ const useSuggestions = (communityId?: string | null) => { } = useUserQueryByDisplayName({ displayName: queryString || '', limit: 10, - enabled: !communityId, + enabled: !isSearchCommunityMembers, }); const onQueryChange = (newQuery: string | null) => { @@ -97,16 +99,16 @@ const useSuggestions = (communityId?: string | null) => { }, [users, members, isSearchCommunityMembers, isCommunityLoading]); const hasMore = useMemo(() => { - if (communityId) { + if (isSearchCommunityMembers) { return hasMoreMember; } else { return hasMoreUser; } - }, [communityId, hasMoreMember, hasMoreUser]); + }, [isSearchCommunityMembers, hasMoreMember, hasMoreUser]); const loadMore = () => { if (isLoading || !hasMore) return; - if (communityId) { + if (isSearchCommunityMembers) { loadMoreMember(); } else { loadMoreUser(); @@ -114,12 +116,12 @@ const useSuggestions = (communityId?: string | null) => { }; const isLoading = useMemo(() => { - if (communityId) { + if (isSearchCommunityMembers) { return isLoadingMember; } else { return isLoadingUser; } - }, [isLoadingMember, isLoadingUser, communityId]); + }, [isLoadingMember, isLoadingUser, isSearchCommunityMembers]); return { suggestions, queryString, onQueryChange, loadMore, hasMore, isLoading }; }; @@ -131,8 +133,11 @@ export const PostTextField = ({ communityId, mentionContainer, dataValue, + pageId = '*', + componentId = '*', }: PostTextFieldProps) => { const [intersectionNode, setIntersectionNode] = useState(null); + const elementId = 'post_text_field'; const editorConfig = getEditorConfig({ namespace: 'PostTextField', @@ -168,7 +173,10 @@ export const PostTextField = ({ : {}), }} > -
+
} placeholder={
What’s going on...
} @@ -218,7 +226,10 @@ export const PostTextField = ({ /> ); })} -
setIntersectionNode(node)} style={{ height: '4px' }} /> +
setIntersectionNode(node)} + className={styles.postTextField__mentionInterceptor} + /> , mentionContainer, ); diff --git a/src/v4/social/elements/ShareStoryButton/ShareStoryButton.tsx b/src/v4/social/elements/ShareStoryButton/ShareStoryButton.tsx index c1741b27..66e4e7e2 100644 --- a/src/v4/social/elements/ShareStoryButton/ShareStoryButton.tsx +++ b/src/v4/social/elements/ShareStoryButton/ShareStoryButton.tsx @@ -38,7 +38,7 @@ export const ShareStoryButton = ({ onClick, }: ShareButtonProps) => { const elementId = 'share_story_button'; - const { config, isExcluded } = useAmityElement({ + const { config, isExcluded, accessibilityId } = useAmityElement({ pageId, componentId, elementId, @@ -50,7 +50,7 @@ export const ShareStoryButton = ({
void; type: 'image' | 'video'; + pageId?: string; + componentId?: string; }) => { const thumbnailUrl = useImage({ fileId: fieldId }); + const elementId = 'remove_thumbnail'; + if (!thumbnailUrl) return null; return ( <> thumbnail - {type === PostContentType.VIDEO && ( diff --git a/src/v4/social/internal-components/ImageThumbnail/ImageThumbnail.tsx b/src/v4/social/internal-components/ImageThumbnail/ImageThumbnail.tsx index 790e9e10..f053d399 100644 --- a/src/v4/social/internal-components/ImageThumbnail/ImageThumbnail.tsx +++ b/src/v4/social/internal-components/ImageThumbnail/ImageThumbnail.tsx @@ -6,6 +6,7 @@ import useFileUpload from '~/v4/social/hooks/useFileUpload'; import { FileRepository } from '@amityco/ts-sdk'; interface ImageThumbnailProps { + pageId?: string; files: File[]; uploadedFiles: Amity.File[]; onChange: (data: { uploaded: Array; uploading: Array }) => void; @@ -16,6 +17,7 @@ interface ImageThumbnailProps { } export function ImageThumbnail({ + pageId = '*', files, uploadedFiles, onChange, @@ -59,11 +61,16 @@ export function ImageThumbnail({ ) : ( <> {(file - diff --git a/src/v4/social/internal-components/Lexical/nodes/MentionNode.ts b/src/v4/social/internal-components/Lexical/nodes/MentionNode.ts index f4366ea5..dbf91919 100644 --- a/src/v4/social/internal-components/Lexical/nodes/MentionNode.ts +++ b/src/v4/social/internal-components/Lexical/nodes/MentionNode.ts @@ -89,6 +89,7 @@ export class MentionNode extends TextNode { createDOM(config: EditorConfig): HTMLElement { const dom = super.createDOM(config); dom.className = styles.mention; //create css + dom.setAttribute('data-qa-anchor', 'mention-preview'); return dom; } diff --git a/src/v4/social/internal-components/PostMenu/PostMenu.tsx b/src/v4/social/internal-components/PostMenu/PostMenu.tsx index 99862ac5..7ac2186a 100644 --- a/src/v4/social/internal-components/PostMenu/PostMenu.tsx +++ b/src/v4/social/internal-components/PostMenu/PostMenu.tsx @@ -183,6 +183,7 @@ export const PostMenu = ({ ) : null} {showEditPostButton ? ( ) : null} {showDeletePostButton ? ( -
) : ( <> - +
- {community ? : } + {community ? ( + + ) : ( + + )}
{renderTabContent()}
diff --git a/src/v4/social/pages/PostDetailPage/PostDetailPage.tsx b/src/v4/social/pages/PostDetailPage/PostDetailPage.tsx index a1486196..be15a52b 100644 --- a/src/v4/social/pages/PostDetailPage/PostDetailPage.tsx +++ b/src/v4/social/pages/PostDetailPage/PostDetailPage.tsx @@ -6,7 +6,7 @@ import { MenuButton } from '~/v4/social/elements/MenuButton'; import { PostMenu } from '~/v4/social/internal-components/PostMenu/PostMenu'; import usePost from '~/v4/core/hooks/objects/usePost'; -import { PageTypes, useNavigation } from '~/v4/core/providers/NavigationProvider'; +import { useNavigation } from '~/v4/core/providers/NavigationProvider'; import { BackButton } from '~/v4/social/elements/BackButton'; import { useAmityPage } from '~/v4/core/hooks/uikit'; import styles from './PostDetailPage.module.css'; @@ -60,9 +60,11 @@ export function PostDetailPage({ id, hideTarget, category }: PostDetailPageProps
{post && ( setReplyComment(comment)} + community={community} /> )}
@@ -97,6 +99,7 @@ export function PostDetailPage({ id, hideTarget, category }: PostDetailPageProps ) : ( post && ( 0 && ( {