antontranelis/utopia-ui
1
0
Fork 0
mirror of https://github.com/utopia-os/utopia-ui.git synced 2025-12-13 07:46:10 +00:00
Code Issues Packages Projects Releases Wiki Activity

ItemViewPopup TextView styling / url formatting

Browse Source
This commit is contained in:
Anton 2023-08-30 01:09:46 +02:00
parent 289ea16340
commit bbe755a034
3 changed files with 62 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

77
src/Components/Map/Subcomponents/ItemPopupComponents/TextView.tsx
View File

@ -1,40 +1,65 @@
import * as React from 'react'
import { Item } from '../../../../types'
import { useTags } from '../../hooks/useTags';
import { replaceURLs } from '../../../../Utils/ReplaceURLs';
import reactStringReplace from 'react-string-replace';
import { useAddFilterTag, useResetFilterTags } from '../../hooks/useFilter';
import { hashTagRegex } from '../../../../Utils/HashTagRegex';
import { fixUrls, mailRegex, urlRegex } from '../../../../Utils/ReplaceURLs';
export const TextView = ({item} : {item?: Item}) => {
const tags = useTags();
export const TextView = ({ item }: { item?: Item }) => {
const tags = useTags();
const addFilterTag = useAddFilterTag();
const resetFilterTags = useResetFilterTags();
const addFilterTag = useAddFilterTag();
const resetFilterTags = useResetFilterTags();
return(
<>
{
reactStringReplace(item?.text, hashTagRegex, (match, i) => (
<>
{
tags.filter(t => t.id.toLowerCase() == match.slice(1).toLowerCase()).map(tag =>
<a style={{color: tag.color, fontWeight: 'bold', cursor: 'pointer'}} key={tag.id+i+item?.id} onClick={()=>{
resetFilterTags();
addFilterTag(tag);
}}>#{tag.id}</a>
)
}
</>
))
}
</>
let replacedText;
if (item && item.text) replacedText = fixUrls(item.text);
replacedText = reactStringReplace(replacedText, /(https?:\/\/\S+)/g, (url, i) => {
let shortUrl = url;
if (url.match('^https:\/\/')) {
shortUrl = url.split('https://')[1];
}
if (url.match('^http:\/\/')) {
shortUrl = url.split('http://')[1];
}
return (
<a key={i.toString+item!.id+url} href={url} target="_blank" rel="noopener noreferrer">{shortUrl}</a>
)
});
replacedText = reactStringReplace(replacedText, mailRegex, (url, i) => {
return (
<a key={i.toString+item!.id+url} href={`mailto:${url}`} target="_blank" rel="noopener noreferrer">{url}</a>
)
});
//ts-ignore
replacedText = reactStringReplace(replacedText, hashTagRegex, (match, i) => {
const tag = tags.find(t => t.id.toLowerCase() == match.slice(1).toLowerCase())
return (
<a style={{ color: tag ? tag.color : '#aaa' , fontWeight: 'bold', cursor: 'pointer' }} key={tag ? tag.id+item!.id+i : i} onClick={() => {
resetFilterTags();
addFilterTag(tag!);
}}>{match}</a>
)
})
return (
<p style={{ whiteSpace: "pre-wrap" }} className="!tw-m-0 !tw-mb-2">
{replacedText}
</p>
)
}

20
src/Utils/ReplaceURLs.ts
View File

@ -1,19 +1,17 @@
export function replaceURLs(message: string): string {
if (!message) return "";
const urlRegex = /(^| )(http:\/\/www\.|https:\/\/www\.|http:\/\/|https:\/\/)?[a-z0-9]+([\-\.]{1}[a-z0-9]+)*\.[a-z]{2,10}(:[0-9]{1,10})?(\/.*)?$/gm;
export const urlRegex = /(^| )(http:\/\/www\.|https:\/\/www\.|http:\/\/|https:\/\/)?[a-z0-9]+([\-\.]{1}[a-z0-9]+)*\.[a-z]{2,10}(:[0-9]{1,10})?(\/.*)?$/gm
export const mailRegex = /([a-zA-Z0-9._-]+@[a-zA-Z0-9._-]+\.[a-zA-Z0-9_-]+)/gi;
export function fixUrls(message: string): string {
message = message.replace(urlRegex, function (url) {
let hyperlink = url.replace(' ', '');
if (!hyperlink.match('^https?:\/\/')) {
hyperlink = 'http://' + hyperlink;
}
return '<a href="' + hyperlink + '" target="_blank" rel="noopener noreferrer">' + url + '</a>'
hyperlink = 'https://' + hyperlink;
}
return hyperlink
});
const mailRegex = /([a-zA-Z0-9._-]+@[a-zA-Z0-9._-]+\.[a-zA-Z0-9_-]+)/gi;
message = message.replace(mailRegex, function (mail) {
return '<a href="mailto:' + mail + '">' + mail + '</a>'
});
return message;
}

4
src/types.ts
View File

@ -26,7 +26,7 @@ export interface LayerProps {
}
export class Item {
id: string | number;
id: string ;
name: string;
text: string;
position: Geometry;
@ -37,7 +37,7 @@ export class Item {
api?: ItemsApi<any>;
tags?: Tag[];
[key: string]: any;
constructor(id:string|number,name:string,text:string,position:Geometry, layer?: LayerProps, api?: ItemsApi<any>){
constructor(id:string,name:string,text:string,position:Geometry, layer?: LayerProps, api?: ItemsApi<any>){
this.id = id;
this.name = name;
this.text = text;