diff --git a/.gitignore b/.gitignore index 712a4d8b..d66dbf00 100644 --- a/.gitignore +++ b/.gitignore @@ -165,4 +165,5 @@ yarn-debug.log* yarn-error.log* .vscode -.cursor \ No newline at end of file +.cursor +.claude \ No newline at end of file diff --git a/AGENTS.md b/AGENTS.md index 15eaad1a..57fd227e 100644 --- a/AGENTS.md +++ b/AGENTS.md @@ -107,6 +107,26 @@ Discover and install skills from the open agent skills ecosystem. npx skills add https://github.com/vercel-labs/skills --skill find-skills ``` +### playwright-cli (browser automation) + +Use **playwright-cli** for browser automation—navigation, form filling, screenshots, testing, and data extraction. The CLI + skill approach is token-efficient: it avoids loading large MCP tool schemas and verbose accessibility trees into context. + +**Do NOT use browser MCPs** (cursor-ide-browser, playwright-mcp, chrome MCP, etc.) for this project. MCP servers inject heavy tool definitions and page snapshots into the context window, degrading quality and response speed. + +**Install** (globally, once per machine). Agents working on this project without playwright-cli should run: + +```bash +npm install -g @playwright/cli@latest +``` + +Then from the project root, install the skill so the agent can use it: + +```bash +playwright-cli install --skills +``` + +The skill installs to `.cursor/skills/playwright-cli/` (or `.claude/skills/` for Claude Code). Agents invoke commands via Bash (e.g. `playwright-cli open`, `playwright-cli snapshot`, `playwright-cli click e1`). + ## AI Agent Hooks (Recommended) If you're using an AI coding assistant (Cursor, Claude Code, Codex, etc.), set up hooks to automatically enforce code quality. Most modern AI agents support lifecycle hooks. @@ -192,6 +212,10 @@ For Dependabot security alerts, GitHub Actions logs, issue/PR searches, or cross If not available, suggest the user install it. +### Browser MCPs — Do NOT Use + +**Avoid browser-related MCP servers** for this project (cursor-ide-browser, playwright-mcp, chrome MCP, etc.). Use **playwright-cli** (skill) instead—see [playwright-cli (browser automation)](#playwright-cli-browser-automation) above. Browser MCPs bloat the context window with tool schemas and page snapshots; the CLI + skill workflow is more token-efficient for coding agents. + ### Context Window Warning Each MCP server injects its tool definitions into the context window, consuming tokens even when the tools aren't being used. Too many servers will: diff --git a/package.json b/package.json index 6be0eac4..fca8c2f8 100644 --- a/package.json +++ b/package.json @@ -11,7 +11,7 @@ "@capacitor/status-bar": "7.0.1", "@capawesome/capacitor-android-edge-to-edge-support": "7.2.2", "@floating-ui/react": "0.26.1", - "@plebbit/plebbit-react-hooks": "https://github.com/plebbit/plebbit-react-hooks.git#df3cb6901f63054870dc127cd7565c98617c2a4f", + "@plebbit/plebbit-react-hooks": "https://github.com/plebbit/plebbit-react-hooks.git#e197af2381ad651e5b74a93bcb705de78f94742c", "@react-spring/web": "9.7.5", "@types/node": "20.8.2", "@types/react": "18.2.25", @@ -138,6 +138,7 @@ "wait-on": "9.0.3" }, "resolutions": { + "axios": "1.13.5", "js-yaml": "4.1.1", "baseline-browser-mapping": "^2.9.11", "vite": "npm:rolldown-vite@7.3.1", diff --git a/scripts/release-body.js b/scripts/release-body.js index 247dd821..ac954ca9 100644 --- a/scripts/release-body.js +++ b/scripts/release-body.js @@ -102,8 +102,7 @@ const htmlSection = section('Static HTML build', [htmlZip && `- 5chan-html (zip) const downloads = [macSection, winSection, linuxSection, androidSection, htmlSection].filter(Boolean).join('\n\n'); // One-liner summary of what changed in this release. Update before each release. -const oneLinerDescription = - 'This version adds multiple-replying support, 4chan-like user anonymity with or without user IDs depending on the board, and several bug fixes.'; +const oneLinerDescription = 'This version adds backlinks for quoted posts, improves reply functionality with proper quote references, and includes several bug fixes.'; const releaseBody = `${oneLinerDescription} diff --git a/src/components/board-buttons/board-buttons.tsx b/src/components/board-buttons/board-buttons.tsx index 6ee39ad0..87fcaf6b 100644 --- a/src/components/board-buttons/board-buttons.tsx +++ b/src/components/board-buttons/board-buttons.tsx @@ -20,7 +20,7 @@ import CatalogSearch from '../catalog-search'; import Tooltip from '../tooltip'; import { ModQueueButton } from '../../views/mod-queue/mod-queue'; import styles from './board-buttons.module.css'; -import _ from 'lodash'; +import { capitalize } from 'lodash'; interface BoardButtonsProps { address?: string | undefined; @@ -510,13 +510,13 @@ const PostPageStats = () => { const linkCount = useCountLinksInReplies(comment); const displayReplyCount = replyCount !== undefined ? replyCount.toString() : '?'; - const replyCountTooltip = replyCount !== undefined ? _.capitalize(t('replies')) : t('loading'); + const replyCountTooltip = replyCount !== undefined ? capitalize(t('replies')) : t('loading'); return ( - {pinned && `${_.capitalize(t('sticky'))} / `} - {closed && `${_.capitalize(t('closed'))} / `} - / + {pinned && `${capitalize(t('sticky'))} / `} + {closed && `${capitalize(t('closed'))} / `} + / ); }; diff --git a/src/components/board-header/board-header.tsx b/src/components/board-header/board-header.tsx index 920acf00..96447a58 100644 --- a/src/components/board-header/board-header.tsx +++ b/src/components/board-header/board-header.tsx @@ -14,7 +14,7 @@ import useIsMobile from '../../hooks/use-is-mobile'; import useIsSubplebbitOffline from '../../hooks/use-is-subplebbit-offline'; import { shouldShowSnow } from '../../lib/snow'; import Tooltip from '../tooltip'; -import _ from 'lodash'; +import { startCase } from 'lodash'; import { BANNERS } from '../../generated/asset-manifest'; const ImageBanner = () => { @@ -78,7 +78,7 @@ const BoardHeader = () => { : isInSubscriptionsView ? '/subs/ - Subscriptions' : isInModView - ? _.startCase(t('boards_you_moderate')) + ? startCase(t('boards_you_moderate')) : defaultSubplebbit?.title || stableSubplebbit?.title; const subtitle = isInAllView ? '' : isInSubscriptionsView ? subscriptionsSubtitle : isInModView ? '/mod/' : `${address || subplebbitAddress || ''}`; diff --git a/src/components/catalog-row/catalog-row.tsx b/src/components/catalog-row/catalog-row.tsx index 19aca254..2b1f386a 100644 --- a/src/components/catalog-row/catalog-row.tsx +++ b/src/components/catalog-row/catalog-row.tsx @@ -22,7 +22,7 @@ import useWindowWidth from '../../hooks/use-window-width'; import { ContentPreview } from '../../views/home/popular-threads-box'; import PostMenuDesktop from '../post-desktop/post-menu-desktop'; import styles from './catalog-row.module.css'; -import _ from 'lodash'; +import { capitalize } from 'lodash'; import { selectPostMenuProps } from '../../lib/utils/post-menu-props'; interface CatalogPostMediaProps { @@ -286,7 +286,7 @@ const CatalogPost = memo( t('posted_by') )}{' '} - {author?.displayName || _.capitalize(t('anonymous'))} + {author?.displayName || capitalize(t('anonymous'))} {isCatalogPostAuthorMod && {` ## Board ${catalogPostAuthorRole}`}} {(isInAllView || isInSubscriptionsView) && subplebbitAddress && ` to p/${Plebbit.getShortAddress({ address: subplebbitAddress })}`} @@ -295,7 +295,7 @@ const CatalogPost = memo(
{t('last_reply_by')}{' '} - {lastReply?.author?.displayName || _.capitalize(t('anonymous'))} + {lastReply?.author?.displayName || capitalize(t('anonymous'))} {isLastReplyAuthorMod && ` ## Board ${lastReplyAuthorRole}`} {getFormattedTimeAgo(lastReply?.timestamp)} diff --git a/src/components/catalog-search/catalog-search.tsx b/src/components/catalog-search/catalog-search.tsx index 3be3ad64..86685b30 100644 --- a/src/components/catalog-search/catalog-search.tsx +++ b/src/components/catalog-search/catalog-search.tsx @@ -4,7 +4,7 @@ import { useLocation, useNavigate } from 'react-router-dom'; import styles from './catalog-search.module.css'; import useIsMobile from '../../hooks/use-is-mobile'; import useCatalogFiltersStore from '../../stores/use-catalog-filters-store'; -import _ from 'lodash'; +import { debounce } from 'lodash'; const CatalogSearch = () => { const { t } = useTranslation(); @@ -44,7 +44,7 @@ const CatalogSearch = () => { // Create a debounced version of setSearchFilter and URL update // eslint-disable-next-line react-hooks/exhaustive-deps const debouncedSetSearchFilter = useCallback( - _.debounce((text: string) => { + debounce((text: string) => { if (text.trim()) { setSearchFilter(text); updateURL(text); diff --git a/src/components/challenge-modal/challenge-modal.tsx b/src/components/challenge-modal/challenge-modal.tsx index 1eb1b3b2..eb4120cf 100644 --- a/src/components/challenge-modal/challenge-modal.tsx +++ b/src/components/challenge-modal/challenge-modal.tsx @@ -6,7 +6,7 @@ import useIsMobile from '../../hooks/use-is-mobile'; import useChallengesStore from '../../stores/use-challenges-store'; import useTheme from '../../hooks/use-theme'; import styles from './challenge-modal.module.css'; -import _ from 'lodash'; +import { capitalize } from 'lodash'; import { useSpring, animated } from '@react-spring/web'; import { useDrag } from '@use-gesture/react'; @@ -269,7 +269,7 @@ const Challenge = ({ challenge, closeModal }: ChallengeProps) => { {isIframeChallenge && !showIframeConfirmation ? null : ( <>
- +
{title && (
diff --git a/src/components/comment-content/comment-content.tsx b/src/components/comment-content/comment-content.tsx index dacedfd5..29e08097 100644 --- a/src/components/comment-content/comment-content.tsx +++ b/src/components/comment-content/comment-content.tsx @@ -14,7 +14,7 @@ import ReplyQuotePreview from '../../components/reply-quote-preview'; import Markdown from '../../components/markdown'; import Tooltip from '../../components/tooltip'; import styles from '../../views/post/post.module.css'; -import _ from 'lodash'; +import { capitalize } from 'lodash'; const QuotedCidLink = ({ cid, postCid }: { cid: string; postCid: string }) => { const commentFromStore = useSubplebbitsPagesStore((state) => state.comments[cid]); @@ -88,16 +88,16 @@ const CommentContent = ({ comment: post }: { comment: Comment }) => { ({t('this_post_was_removed')})

- {`${_.capitalize(t('reason'))}: "${reason}"`} + {`${capitalize(t('reason'))}: "${reason}"`} ) : ( - {_.capitalize(t('this_post_was_removed'))}. + {capitalize(t('this_post_was_removed'))}. ) ) : deleted ? ( reason ? ( <> {t('user_deleted_this_post')}{' '} - {`${_.capitalize(t('reason'))}: "${reason}"`} + {`${capitalize(t('reason'))}: "${reason}"`} ) : ( {t('user_deleted_this_post')} @@ -159,7 +159,7 @@ const CommentContent = ({ comment: post }: { comment: Comment }) => { address: subplebbitAddress && Plebbit.getShortAddress({ address: subplebbitAddress }), timestamp: getFormattedDate(post?.author?.subplebbit?.banExpiresAt), interpolation: { escapeValue: false }, - })}${reason ? `. ${_.capitalize(t('reason'))}: "${reason}"` : ''}`} + })}${reason ? `. ${capitalize(t('reason'))}: "${reason}"` : ''}`} /> )} diff --git a/src/components/edit-menu/edit-menu.tsx b/src/components/edit-menu/edit-menu.tsx index ed969bea..07c9bd64 100644 --- a/src/components/edit-menu/edit-menu.tsx +++ b/src/components/edit-menu/edit-menu.tsx @@ -12,7 +12,7 @@ import { import styles from './edit-menu.module.css'; import { alertChallengeVerificationFailed } from '../../lib/utils/challenge-utils'; import useChallengesStore from '../../stores/use-challenges-store'; -import _ from 'lodash'; +import { capitalize } from 'lodash'; import useIsMobile from '../../hooks/use-is-mobile'; import useAuthorPrivileges from '../../hooks/use-author-privileges'; @@ -277,14 +277,14 @@ const EditMenu = ({ post }: { post: Comment }) => {
{isContentEditorOpen && ( @@ -307,13 +307,13 @@ const EditMenu = ({ post }: { post: Comment }) => { {' '}
@@ -322,7 +322,7 @@ const EditMenu = ({ post }: { post: Comment }) => { [ ] @@ -331,7 +331,7 @@ const EditMenu = ({ post }: { post: Comment }) => { [ ] @@ -339,7 +339,7 @@ const EditMenu = ({ post }: { post: Comment }) => { [ ] @@ -378,7 +378,7 @@ const EditMenu = ({ post }: { post: Comment }) => { )}
- {_.capitalize(t('reason'))}? ({t('optional')}) + {capitalize(t('reason'))}? ({t('optional')}) {deleted ? ( - _.capitalize(t('deleted')) + capitalize(t('deleted')) ) : removed ? ( - _.capitalize(t('removed')) + capitalize(t('removed')) ) : displayName ? ( displayName.length <= 20 ? ( displayName @@ -254,7 +254,7 @@ const PostInfo = ({ /> ) ) : ( - _.capitalize(t('anonymous')) + capitalize(t('anonymous')) )} {!(deleted || removed) && authorRole && ( @@ -328,7 +328,7 @@ const PostInfo = ({ <> No. - {state === 'failed' || stateString === 'Failed' ? _.capitalize(t('failed')) : state === 'pending' ? _.capitalize(t('pending')) : ''} + {state === 'failed' || stateString === 'Failed' ? capitalize(t('failed')) : state === 'pending' ? capitalize(t('pending')) : ''} )} @@ -346,7 +346,7 @@ const PostInfo = ({ [ !cid && e.preventDefault()}> - {_.capitalize(t('reply'))} + {capitalize(t('reply'))} ] @@ -438,6 +438,14 @@ const PostInfo = ({ reply?.cid && !(reply?.deleted || reply?.removed) && , )} + {cid && + !parentCid && + quotedByMap + ?.get(cid) + ?.map( + (reply: Comment) => + reply?.cid && !(reply?.deleted || reply?.removed) && , + )}
); @@ -498,9 +506,9 @@ const PostMedia = ({ )} {t('link')}:{' '} - {spoiler ? _.capitalize(t('spoiler')) : url && url.length > 30 ? url.slice(0, 30) + '...' : url} + {spoiler ? capitalize(t('spoiler')) : url && url.length > 30 ? url.slice(0, 30) + '...' : url} {' '} - ({type && _.lowerCase(getDisplayMediaInfoType(type, t))} + ({type && lowerCase(getDisplayMediaInfoType(type, t))} {mediaDimensions && `, ${mediaDimensions}`}) {!showThumbnail && (type === 'iframe' || type === 'video' || type === 'audio') && ( @@ -769,6 +777,7 @@ const PostDesktop = ({ isPublishing={isPublishing} onApprove={onApprove} onReject={onReject} + quotedByMap={quotedByMap} /> {!isHidden && !content && !(deleted || removed) &&
} {!isHidden && } diff --git a/src/components/post-desktop/post-menu-desktop/post-menu-desktop.tsx b/src/components/post-desktop/post-menu-desktop/post-menu-desktop.tsx index 0f3c0013..e61d0ef7 100644 --- a/src/components/post-desktop/post-menu-desktop/post-menu-desktop.tsx +++ b/src/components/post-desktop/post-menu-desktop/post-menu-desktop.tsx @@ -12,7 +12,7 @@ import { getBoardPath } from '../../../lib/utils/route-utils'; import { useDirectories } from '../../../hooks/use-directories'; import { isAllView, isCatalogView, isPostPageView, isSubscriptionsView } from '../../../lib/utils/view-utils'; import useHide from '../../../hooks/use-hide'; -import _ from 'lodash'; +import { capitalize } from 'lodash'; import { PostMenuProps } from '../../../lib/utils/post-menu-props'; type CopyLinkButtonProps = @@ -99,7 +99,7 @@ const ImageSearchButton = ({ url, onClose }: { url: string; onClose: () => void ref={refs.setReference} onClick={onClose} > - {_.capitalize(t('image_search'))} » + {capitalize(t('image_search'))} » {isImageSearchMenuOpen && (
diff --git a/src/components/post-form/post-form.tsx b/src/components/post-form/post-form.tsx index 2cea55fc..4fc8b088 100644 --- a/src/components/post-form/post-form.tsx +++ b/src/components/post-form/post-form.tsx @@ -18,7 +18,7 @@ import usePublishReply from '../../hooks/use-publish-reply'; import FileUploader from '../../plugins/file-uploader'; import styles from './post-form.module.css'; import { Capacitor } from '@capacitor/core'; -import _ from 'lodash'; +import { capitalize, debounce } from 'lodash'; const isAndroid = Capacitor.getPlatform() === 'android'; @@ -79,7 +79,7 @@ const PostFormTable = ({ closeForm, postCid }: { closeForm: () => void; postCid: const [lengthError, setLengthError] = useState(null); const checkContentLength = useRef( - _.debounce((content: string, t: Function) => { + debounce((content: string, t: Function) => { const length = content.trim().length; if (length > 2000) { setLengthError(`${t('error')}: ${t('comment_field_too_long', { length })}`); @@ -247,7 +247,7 @@ const PostFormTable = ({ closeForm, postCid }: { closeForm: () => void; postCid: { const newDisplayName = e.target.value.trim() || undefined; @@ -326,7 +326,7 @@ const PostFormTable = ({ closeForm, postCid }: { closeForm: () => void; postCid: type='checkbox' onChange={(e) => (isInPostView ? setPublishReplyOptions({ spoiler: e.target.checked }) : setPublishPostOptions({ spoiler: e.target.checked }))} /> - {_.capitalize(t('spoiler'))}? + {capitalize(t('spoiler'))}? ] diff --git a/src/components/post-mobile/post-mobile.tsx b/src/components/post-mobile/post-mobile.tsx index efc5c928..b05a5324 100644 --- a/src/components/post-mobile/post-mobile.tsx +++ b/src/components/post-mobile/post-mobile.tsx @@ -30,7 +30,7 @@ import PostMenuMobile from './post-menu-mobile'; import ReplyQuotePreview from '../reply-quote-preview'; import Tooltip from '../tooltip'; import { PostProps } from '../../views/post/post'; -import _ from 'lodash'; +import { capitalize, lowerCase } from 'lodash'; import useReplyModalStore from '../../stores/use-reply-modal-store'; import { selectPostMenuProps } from '../../lib/utils/post-menu-props'; import useChallengesStore from '../../stores/use-challenges-store'; @@ -204,9 +204,9 @@ const PostInfoAndMedia = ({ post, postReplyCount = 0, roles, threadNumber }: Pos {removed ? ( - _.capitalize(t('removed')) + capitalize(t('removed')) ) : deleted ? ( - _.capitalize(t('deleted')) + capitalize(t('deleted')) ) : displayName ? ( displayName.length <= 20 ? ( displayName @@ -217,7 +217,7 @@ const PostInfoAndMedia = ({ post, postReplyCount = 0, roles, threadNumber }: Pos /> ) ) : ( - _.capitalize(t('anonymous')) + capitalize(t('anonymous')) )}{' '} {!(deleted || removed) && authorRole && ( @@ -242,9 +242,9 @@ const PostInfoAndMedia = ({ post, postReplyCount = 0, roles, threadNumber }: Pos <> (ID: {''} {removed ? ( - _.lowerCase(t('removed')) + lowerCase(t('removed')) ) : deleted ? ( - _.lowerCase(t('deleted')) + lowerCase(t('deleted')) ) : ( No. - {state === 'failed' || stateString === 'Failed' ? _.capitalize(t('failed')) : state === 'pending' ? _.capitalize(t('pending')) : ''} + {state === 'failed' || stateString === 'Failed' ? capitalize(t('failed')) : state === 'pending' ? capitalize(t('pending')) : ''} )} @@ -384,28 +384,40 @@ const ReplyBacklinks = ({ post, quotedByMap }: PostProps) => { const { cid, parentCid } = post || {}; const { replies } = useReplies({ comment: post, flat: true, accountComments: { newerThan: Infinity } }); - return ( + const opBacklinks = cid && - parentCid && - (replies.length > 0 || quotedByMap?.get(cid)?.length) && ( -
- {replies.map( + !parentCid && + quotedByMap + ?.get(cid) + ?.map( + (reply: Comment) => + reply?.cid && !(reply?.deleted || reply?.removed) && , + ) + .filter(Boolean); + + const replyBacklinks = cid && parentCid && ((replies?.length || 0) > 0 || quotedByMap?.get(cid)?.length) && ( + <> + {replies?.map( + (reply: Comment, index: number) => + reply?.parentCid === cid && reply?.cid && !(reply?.deleted || reply?.removed) && , + )} + {quotedByMap + ?.get(cid) + ?.map( (reply: Comment, index: number) => - reply?.parentCid === cid && + reply?.parentCid !== cid && reply?.cid && - !(reply?.deleted || reply?.removed) && , + !(reply?.deleted || reply?.removed) && , )} - {quotedByMap - ?.get(cid) - ?.map( - (reply: Comment, index: number) => - reply?.parentCid !== cid && - reply?.cid && - !(reply?.deleted || reply?.removed) && , - )} -
- ) + ); + + return opBacklinks?.length > 0 || replyBacklinks ? ( +
+ {opBacklinks} + {replyBacklinks} +
+ ) : null; }; const Reply = ({ postReplyCount, reply, roles, threadNumber, quotedByMap }: PostProps) => { @@ -434,7 +446,7 @@ const Reply = ({ postReplyCount, reply, roles, threadNumber, quotedByMap }: Post > {!hidden && (!(removed || deleted) || ((removed || deleted) && reason)) && } - +
@@ -588,6 +600,7 @@ const PostMobile = ({ {shouldShowSnow() && } + {!isInPostView && !isInPendingPostView && (showReplies || isModQueue) && (
diff --git a/src/components/reply-modal/reply-modal.tsx b/src/components/reply-modal/reply-modal.tsx index 2a237ad5..d7d8ea8f 100644 --- a/src/components/reply-modal/reply-modal.tsx +++ b/src/components/reply-modal/reply-modal.tsx @@ -13,7 +13,7 @@ import usePublishReply from '../../hooks/use-publish-reply'; import useIsMobile from '../../hooks/use-is-mobile'; import styles from './reply-modal.module.css'; import { LinkTypePreviewer } from '../post-form'; -import _ from 'lodash'; +import { capitalize, debounce } from 'lodash'; import FileUploader from '../../plugins/file-uploader'; import { Capacitor } from '@capacitor/core'; import { useSpring, animated } from '@react-spring/web'; @@ -56,7 +56,7 @@ const ReplyModal = ({ closeModal, showReplyModal, parentCid, parentNumber, threa const [lengthError, setLengthError] = useState(null); const checkContentLength = useRef( - _.debounce((content: string, t: Function) => { + debounce((content: string, t: Function) => { const length = content.trim().length; if (length > 2000) { setError(null); @@ -68,7 +68,7 @@ const ReplyModal = ({ closeModal, showReplyModal, parentCid, parentNumber, threa ).current; const onPublishReply = () => { - const currentContent = textRef.current?.value.slice(contentPrefix.length).trim() || ''; + const currentContent = textRef.current?.value.trim() || ''; const currentUrl = urlRef.current?.value.trim() || ''; if (!currentContent && !currentUrl) { @@ -186,16 +186,19 @@ const ReplyModal = ({ closeModal, showReplyModal, parentCid, parentNumber, threa } }, []); - const contentPrefix = `>>${parentNumber ?? '?'}\n`; + const defaultParentQuote = `>>${parentNumber ?? '?'}\n`; - // enable spellcheck after the prefix is set + // Enable spellcheck after initial content is injected into the textarea. useEffect(() => { if (showReplyModal && textRef.current) { textRef.current.spellcheck = false; - textRef.current.value = contentPrefix + (selectedText || ''); + textRef.current.value = `${defaultParentQuote}${selectedText || ''}`; const len = textRef.current.value.length; lastSelectionStartRef.current = len; lastSelectionEndRef.current = len; + const formattedContent = formatMarkdown(textRef.current.value); + setPublishReplyOptions({ content: formattedContent }); + checkContentLength(formattedContent, t); setTimeout(() => { if (textRef.current) { @@ -203,24 +206,17 @@ const ReplyModal = ({ closeModal, showReplyModal, parentCid, parentNumber, threa } }, 100); } - }, [showReplyModal, contentPrefix, selectedText]); + }, [showReplyModal, defaultParentQuote, selectedText]); const handleContentInput = (e: React.ChangeEvent) => { - const { value } = e.target; - if (!value.startsWith(contentPrefix)) { - e.target.value = contentPrefix + value.slice(contentPrefix.length); - } lastSelectionStartRef.current = e.target.selectionStart ?? e.target.value.length; lastSelectionEndRef.current = e.target.selectionEnd ?? lastSelectionStartRef.current; }; const handleContentChange = (e: React.ChangeEvent) => { - const contentWithoutPrefix = e.target.value.slice(contentPrefix.length); - const formattedContent = formatMarkdown(contentWithoutPrefix); - if (textRef.current && textRef.current.value !== formattedContent) { - setPublishReplyOptions({ content: formattedContent }); - checkContentLength(formattedContent, t); - } + const formattedContent = formatMarkdown(e.target.value); + setPublishReplyOptions({ content: formattedContent }); + checkContentLength(formattedContent, t); }; useEffect(() => { @@ -244,12 +240,11 @@ const ReplyModal = ({ closeModal, showReplyModal, parentCid, parentNumber, threa const isFocused = document.activeElement === textarea; const rawStart = isFocused ? (textarea.selectionStart ?? textarea.value.length) : lastSelectionStartRef.current; const selectionEnd = isFocused ? (textarea.selectionEnd ?? rawStart) : lastSelectionEndRef.current; - const minStart = contentPrefix.length; - const start = Math.max(rawStart, minStart); - const end = Math.max(selectionEnd, minStart); + const start = Math.max(rawStart, 0); + const end = Math.max(selectionEnd, 0); const before = textarea.value.slice(0, start); const after = textarea.value.slice(end); - const needsLeadingNewline = before.length > minStart && !before.endsWith('\n'); + const needsLeadingNewline = before.length > 0 && !before.endsWith('\n'); let insertion = `${needsLeadingNewline ? '\n' : ''}${quote}\n`; if (selectedQuote) { insertion += `${selectedQuote}\n`; @@ -263,11 +258,10 @@ const ReplyModal = ({ closeModal, showReplyModal, parentCid, parentNumber, threa lastSelectionStartRef.current = nextCursor; lastSelectionEndRef.current = nextCursor; - const contentWithoutPrefix = nextValue.slice(contentPrefix.length); - const formattedContent = formatMarkdown(contentWithoutPrefix); + const formattedContent = formatMarkdown(nextValue); setPublishReplyOptions({ content: formattedContent }); checkContentLength(formattedContent, t); - }, [showReplyModal, quoteInsertRequestId, quoteInsertNumber, quoteInsertSelectedText, contentPrefix, setPublishReplyOptions, checkContentLength, t]); + }, [showReplyModal, quoteInsertRequestId, quoteInsertNumber, quoteInsertSelectedText, setPublishReplyOptions, checkContentLength, t]); // on android, auto upload file to image hosting sites with open api const [isUploading, setIsUploading] = useState(false); @@ -333,7 +327,7 @@ const ReplyModal = ({ closeModal, showReplyModal, parentCid, parentNumber, threa { setAccount({ ...account, author: { ...account?.author, displayName: e.target.value } }); setPublishReplyOptions({ displayName: e.target.value }); @@ -344,7 +338,7 @@ const ReplyModal = ({ closeModal, showReplyModal, parentCid, parentNumber, threa { setUrl(e.target.value); setPublishReplyOptions({ link: e.target.value }); @@ -392,7 +386,7 @@ const ReplyModal = ({ closeModal, showReplyModal, parentCid, parentNumber, threa [ ] diff --git a/src/components/reply-quote-preview/reply-quote-preview.tsx b/src/components/reply-quote-preview/reply-quote-preview.tsx index d35ee248..6432e844 100644 --- a/src/components/reply-quote-preview/reply-quote-preview.tsx +++ b/src/components/reply-quote-preview/reply-quote-preview.tsx @@ -1,6 +1,6 @@ import { useEffect, useRef, useState } from 'react'; import { createPortal } from 'react-dom'; -import { Link, useNavigate } from 'react-router-dom'; +import { Link, useLocation, useNavigate } from 'react-router-dom'; import { Comment, useAccount } from '@plebbit/plebbit-react-hooks'; import { useFloating, offset, shift, size, autoUpdate, Placement } from '@floating-ui/react'; import { useDirectories } from '../../hooks/use-directories'; @@ -63,6 +63,13 @@ const handleQuoteHover = (cid: string, onElementOutOfView: () => void) => { } }; +const scrollToThreadCardTop = (threadCid: string) => { + const threadCard = document.querySelector(`[data-cid="${threadCid}"][data-post-cid="${threadCid}"]`); + if (!threadCard) return false; + threadCard.scrollIntoView({ behavior: 'auto', block: 'start' }); + return true; +}; + const DesktopQuotePreview = ({ backlinkReply, quotelinkReply, isBacklinkReply, isQuotelinkReply, isOP }: ReplyQuotePreviewProps) => { const [hoveredCid, setHoveredCid] = useState(null); const [outOfViewCid, setOutOfViewCid] = useState(null); @@ -107,12 +114,18 @@ const DesktopQuotePreview = ({ backlinkReply, quotelinkReply, isBacklinkReply, i }, [update]); const navigate = useNavigate(); + const location = useLocation(); - const handleClick = (e: React.MouseEvent, cid: string | undefined, subplebbitAddress: string | undefined) => { + const handleClick = (e: React.MouseEvent, cid: string | undefined, subplebbitAddress: string | undefined, isOpQuote = false) => { e.preventDefault(); if (cid && subplebbitAddress) { const boardPath = getBoardPath(subplebbitAddress, directories); - navigate(`/${boardPath}/thread/${cid}`); + const threadRoute = `/${boardPath}/thread/${cid}`; + if (isOpQuote && location.pathname === threadRoute) { + scrollToThreadCardTop(cid); + return; + } + navigate(threadRoute); } }; @@ -175,7 +188,7 @@ const DesktopQuotePreview = ({ backlinkReply, quotelinkReply, isBacklinkReply, i className={styles.quoteLink} onMouseOver={() => handleMouseOver(quotelinkReply?.cid)} onMouseLeave={() => handleMouseLeave(quotelinkReply?.cid)} - onClick={(e) => handleClick(e, quotelinkReply?.cid, quotelinkReply?.subplebbitAddress)} + onClick={(e) => handleClick(e, quotelinkReply?.cid, quotelinkReply?.subplebbitAddress, !!isOP)} > {`>>${quotelinkReply?.number ?? '?'}`} {isOP && ' (OP)'} @@ -217,12 +230,18 @@ const MobileQuotePreview = ({ backlinkReply, quotelinkReply, isBacklinkReply, is }, [update]); const navigate = useNavigate(); + const location = useLocation(); - const handleClick = (e: React.MouseEvent, cid: string | undefined, subplebbitAddress: string | undefined) => { + const handleClick = (e: React.MouseEvent, cid: string | undefined, subplebbitAddress: string | undefined, isOpQuote = false) => { e.preventDefault(); if (cid && subplebbitAddress) { const boardPath = getBoardPath(subplebbitAddress, directories); - navigate(`/${boardPath}/thread/${cid}`); + const threadRoute = `/${boardPath}/thread/${cid}`; + if (isOpQuote && location.pathname === threadRoute) { + scrollToThreadCardTop(cid); + return; + } + navigate(threadRoute); } }; @@ -300,7 +319,7 @@ const MobileQuotePreview = ({ backlinkReply, quotelinkReply, isBacklinkReply, is : `/thread/${quotelinkReply.cid}` : '#'; return ( - handleClick(e, quotelinkReply?.cid, quotelinkReply?.subplebbitAddress)}> + handleClick(e, quotelinkReply?.cid, quotelinkReply?.subplebbitAddress, !!isOP)}> {' '} # diff --git a/src/components/settings-modal/avatar-settings/avatar-settings.tsx b/src/components/settings-modal/avatar-settings/avatar-settings.tsx index 58ab356d..aee274b7 100644 --- a/src/components/settings-modal/avatar-settings/avatar-settings.tsx +++ b/src/components/settings-modal/avatar-settings/avatar-settings.tsx @@ -5,7 +5,7 @@ import styles from './avatar-settings.module.css'; import { Trans, useTranslation } from 'react-i18next'; import LoadingEllipsis from '../../loading-ellipsis'; import ErrorDisplay from '../../error-display/error-display'; -import _ from 'lodash'; +import { capitalize } from 'lodash'; const AvatarPreview = ({ avatar }: any) => { const { t } = useTranslation(); @@ -132,7 +132,7 @@ const AvatarSettings = () => {
- {_.capitalize(t('chain_ticker'))}: + {capitalize(t('chain_ticker'))}: {
- {_.capitalize(t('timestamp'))}: + {capitalize(t('timestamp'))}: { />
- {_.capitalize(t('paste_signature'))}: + {capitalize(t('paste_signature'))}: { walletsArray.length > 0 ? (
- {_.capitalize(t('chain_ticker'))}: + {capitalize(t('chain_ticker'))}: setWalletsArrayProperty(selectedWallet, 'chainTicker', e.target.value)} @@ -111,7 +111,7 @@ const CryptoWalletsForm = ({ account }: { account: Account | undefined }) => { />
- {_.capitalize(t('wallet_address'))}: + {capitalize(t('wallet_address'))}: setWalletsArrayProperty(selectedWallet, 'address', e.target.value)} @@ -133,7 +133,7 @@ const CryptoWalletsForm = ({ account }: { account: Account | undefined }) => {
- {_.capitalize(t('timestamp'))}: + {capitalize(t('timestamp'))}: setWalletsArrayProperty(selectedWallet, 'timestamp', Number(e.target.value))} @@ -142,7 +142,7 @@ const CryptoWalletsForm = ({ account }: { account: Account | undefined }) => { />
- {_.capitalize(t('paste_signature'))}: + {capitalize(t('paste_signature'))}: setWalletsArrayProperty(selectedWallet, 'signature', e.target.value)} diff --git a/src/components/settings-modal/interface-settings/interface-settings.tsx b/src/components/settings-modal/interface-settings/interface-settings.tsx index 9be9bf36..8146db14 100644 --- a/src/components/settings-modal/interface-settings/interface-settings.tsx +++ b/src/components/settings-modal/interface-settings/interface-settings.tsx @@ -4,7 +4,7 @@ import useAvatarVisibilityStore from '../../../stores/use-avatar-visibility-stor import useTheme from '../../../hooks/use-theme'; import packageJson from '../../../../package.json'; import styles from './interface-settings.module.css'; -import _ from 'lodash'; +import { capitalize } from 'lodash'; import useInterfaceSettingsStore from '../../../stores/use-interface-settings-store'; import useCatalogFiltersStore from '../../../stores/use-catalog-filters-store'; import useExpandedMediaStore from '../../../stores/use-expanded-media-store'; @@ -138,16 +138,16 @@ const InterfaceSettings = () => { return (
- {_.capitalize(t('version'))}: + {capitalize(t('version'))}:
- {_.capitalize(t('update'))}: + {capitalize(t('update'))}:
- {_.capitalize(t('style'))}: