Sanitize url before fetching favicon and display letter avatar if it can't be retrieved (#1035)
* Sanitize url before fetching favicon and display letter avatar if it can't be retrieved Co-authored-by: v1b3m <vibenjamin6@gmail.com> Co-authored-by: RubensRafael <rubensrafael2@live.com> * Priorotise www for apple.com domain Co-authored-by: v1b3m <vibenjamin6@gmail.com> Co-authored-by: RubensRafael <rubensrafael2@live.com> * Add requested changes Co-authored-by: v1b3m <vibenjamin6@gmail.com> Co-authored-by: RubensRafael <rubensrafael2@live.com> * Fix the tests Co-authored-by: v1b3m <vibenjamin6@gmail.com> Co-authored-by: RubensRafael <rubensrafael2@live.com> * Change avatar generation strategy Co-authored-by: v1b3m <vibenjamin6@gmail.com> Co-authored-by: RubensRafael <rubensrafael2@live.com> --------- Co-authored-by: v1b3m <vibenjamin6@gmail.com> Co-authored-by: RubensRafael <rubensrafael2@live.com>
This commit is contained in:
@ -8,6 +8,7 @@ import {
|
||||
ViewFieldDefinition,
|
||||
ViewFieldURLMetadata,
|
||||
} from '@/ui/table/types/ViewField';
|
||||
import { sanitizeURL } from '~/utils';
|
||||
|
||||
import { GenericEditableURLCellEditMode } from './GenericEditableURLCellEditMode';
|
||||
|
||||
@ -33,7 +34,9 @@ export function GenericEditableURLCell({
|
||||
<EditableCell
|
||||
editModeHorizontalAlign={editModeHorizontalAlign}
|
||||
editModeContent={<GenericEditableURLCellEditMode viewField={viewField} />}
|
||||
nonEditModeContent={<InplaceInputURLDisplayMode value={fieldValue} />}
|
||||
nonEditModeContent={
|
||||
<InplaceInputURLDisplayMode value={sanitizeURL(fieldValue)} />
|
||||
}
|
||||
></EditableCell>
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,3 +1,4 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
import styled from '@emotion/styled';
|
||||
|
||||
import { isNonEmptyString } from '~/utils/isNonEmptyString';
|
||||
@ -86,6 +87,20 @@ export function Avatar({
|
||||
type = 'squared',
|
||||
}: OwnProps) {
|
||||
const noAvatarUrl = !isNonEmptyString(avatarUrl);
|
||||
const [isInvalidAvatarUrl, setIsInvalidAvatarUrl] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
if (avatarUrl) {
|
||||
new Promise((resolve) => {
|
||||
const img = new Image();
|
||||
img.onload = () => resolve(false);
|
||||
img.onerror = () => resolve(true);
|
||||
img.src = getImageAbsoluteURIOrBase64(avatarUrl) as string;
|
||||
}).then((res) => {
|
||||
setIsInvalidAvatarUrl(res as boolean);
|
||||
});
|
||||
}
|
||||
}, [avatarUrl]);
|
||||
|
||||
return (
|
||||
<StyledAvatar
|
||||
@ -95,7 +110,8 @@ export function Avatar({
|
||||
type={type}
|
||||
colorId={colorId}
|
||||
>
|
||||
{noAvatarUrl && placeholder[0]?.toLocaleUpperCase()}
|
||||
{(noAvatarUrl || isInvalidAvatarUrl) &&
|
||||
placeholder[0]?.toLocaleUpperCase()}
|
||||
</StyledAvatar>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user