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 * as React from 'react'
import { Item } from '../../../../types' import { Item } from '../../../../types'
import { useTags } from '../../hooks/useTags'; import { useTags } from '../../hooks/useTags';
import { replaceURLs } from '../../../../Utils/ReplaceURLs';
import reactStringReplace from 'react-string-replace'; import reactStringReplace from 'react-string-replace';
import { useAddFilterTag, useResetFilterTags } from '../../hooks/useFilter'; import { useAddFilterTag, useResetFilterTags } from '../../hooks/useFilter';
import { hashTagRegex } from '../../../../Utils/HashTagRegex'; import { hashTagRegex } from '../../../../Utils/HashTagRegex';
import { fixUrls, mailRegex, urlRegex } from '../../../../Utils/ReplaceURLs';
export const TextView = ({item} : {item?: Item}) => { export const TextView = ({ item }: { item?: Item }) => {
const tags = useTags(); const tags = useTags();
const addFilterTag = useAddFilterTag(); const addFilterTag = useAddFilterTag();
const resetFilterTags = useResetFilterTags(); const resetFilterTags = useResetFilterTags();
return(
<> let replacedText;
{
reactStringReplace(item?.text, hashTagRegex, (match, i) => ( if (item && item.text) replacedText = fixUrls(item.text);
<>
{
tags.filter(t => t.id.toLowerCase() == match.slice(1).toLowerCase()).map(tag => replacedText = reactStringReplace(replacedText, /(https?:\/\/\S+)/g, (url, i) => {
<a style={{color: tag.color, fontWeight: 'bold', cursor: 'pointer'}} key={tag.id+i+item?.id} onClick={()=>{ let shortUrl = url;
resetFilterTags(); if (url.match('^https:\/\/')) {
addFilterTag(tag); shortUrl = url.split('https://')[1];
}}>#{tag.id}</a> }
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 { 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
if (!message) return ""; export const mailRegex = /([a-zA-Z0-9._-]+@[a-zA-Z0-9._-]+\.[a-zA-Z0-9_-]+)/gi;
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 function fixUrls(message: string): string {
message = message.replace(urlRegex, function (url) { message = message.replace(urlRegex, function (url) {
let hyperlink = url.replace(' ', ''); let hyperlink = url.replace(' ', '');
if (!hyperlink.match('^https?:\/\/')) { if (!hyperlink.match('^https?:\/\/')) {
hyperlink = 'http://' + hyperlink; hyperlink = 'https://' + hyperlink;
} }
return '<a href="' + hyperlink + '" target="_blank" rel="noopener noreferrer">' + url + '</a>' 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; return message;
} }

4
src/types.ts
View File

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