github/overleaf
1
0
Fork 0
mirror of https://github.com/overleaf/overleaf.git synced 2024-11-21 20:47:08 -05:00
Code Issues Projects Releases Packages Wiki Activity

Merge pull request #21065 from overleaf/dp-limit-track-change

Browse source 
Truncate text in a tracked change

GitOrigin-RevId: a3c070f0ca2f51545151934d25a26a10c99b7465
This commit is contained in:
David 2024-10-21 09:54:57 +01:00 committed by Copybot
parent efa376f4f4
commit 31154bb9f5
1 changed files with 13 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
services/web/frontend/js/features/review-panel-new/components/review-panel-change.tsx
View file

@ -16,6 +16,15 @@ import { ReviewPanelChangeUser } from './review-panel-change-user'
import { ReviewPanelEntry } from './review-panel-entry' import { ReviewPanelEntry } from './review-panel-entry'
import { useModalsContext } from '@/features/ide-react/context/modals-context' import { useModalsContext } from '@/features/ide-react/context/modals-context'
const TEXT_CHAR_LIMIT = 50
const truncateText = (text: string) => {
if (text.length > TEXT_CHAR_LIMIT) {
return text.slice(0, TEXT_CHAR_LIMIT) + '...'
}
return text
}
export const ReviewPanelChange = memo<{ export const ReviewPanelChange = memo<{
change: Change<EditOperation> change: Change<EditOperation>
aggregate?: Change<DeleteOperation> aggregate?: Change<DeleteOperation>
@ -168,18 +177,18 @@ export const ReviewPanelChange = memo<{
<span> <span>
{t('aggregate_changed')}:{' '} {t('aggregate_changed')}:{' '}
<del className="review-panel-content-highlight"> <del className="review-panel-content-highlight">
{aggregate.op.d} {truncateText(aggregate.op.d)}
</del>{' '} </del>{' '}
{t('aggregate_to')}{' '} {t('aggregate_to')}{' '}
<ins className="review-panel-content-highlight"> <ins className="review-panel-content-highlight">
{change.op.i} {truncateText(change.op.i)}
</ins> </ins>
</span> </span>
) : ( ) : (
<span> <span>
{t('tracked_change_added')}:&nbsp; {t('tracked_change_added')}:&nbsp;
<ins className="review-panel-content-highlight"> <ins className="review-panel-content-highlight">
{change.op.i} {truncateText(change.op.i)}
</ins> </ins>
</span> </span>
)} )}
@ -196,7 +205,7 @@ export const ReviewPanelChange = memo<{
<span> <span>
{t('tracked_change_deleted')}:&nbsp; {t('tracked_change_deleted')}:&nbsp;
<del className="review-panel-content-highlight"> <del className="review-panel-content-highlight">
{change.op.d} {truncateText(change.op.d)}
</del> </del>
</span> </span>
</> </>