diff --git a/packages/uiweb/src/lib/components/parsetext/defaultPatterns.ts b/packages/uiweb/src/lib/components/parsetext/defaultPatterns.ts index ef2bb99e7..8b762f42b 100644 --- a/packages/uiweb/src/lib/components/parsetext/defaultPatterns.ts +++ b/packages/uiweb/src/lib/components/parsetext/defaultPatterns.ts @@ -9,8 +9,103 @@ function renderStyles(matchingString:string) { const match = matchingString.match(pattern); return `${match?match[2]:""}`; + +} + +function newLinestyles(matchingString:string) { + const pattern = /\\n/g; + const match = matchingString.match(pattern); + console.log(match, "Match"); + if(match?.includes('\\n')) { + console.log("New Line"); + const replacedString = matchingString.replace('\\n', "
"); + return `
${replacedString}
`; + } else { + return `
${matchingString}
`; + } } +function renderTextStyles(matchingString: string) { + const pattern = /(.*?)<\/PUSHText>/i; + const match = matchingString.match(pattern); + + if (match) { + const colorName = match[1].toLowerCase(); + let color; + switch (colorName) { + case 'primary': + color = COLORS.PRIMARY; + break; + case 'secondary': + color = COLORS.GRADIENT_SECONDARY; + break; + case 'white': + color = COLORS.WHITE; + break; + // can add more custom color names if needed, couldn't find the tertiary color + default: + color = colorName; + } + let textContent = match[2]; + if(textContent.includes('\\n')) { + textContent = match[2].replace('\\n', "
"); + } + return `${textContent}`; + } + + return matchingString; +} + +function renderLinkWithColor(matchingString: string) { + const pattern = /(.*?)<\/PUSHText>/i; + const match = matchingString.match(pattern); + + if (match) { + const colorName = match[1].toLowerCase(); + let color; + // Map custom color names to specific values + switch (colorName) { + case 'primary': + color = COLORS.PRIMARY; + break; + case 'secondary': + color = COLORS.GRADIENT_SECONDARY; + break; + case 'tertiary': + color = COLORS.GRADIENT_THIRD; + break; + case 'white': + color = COLORS.WHITE; + break; + // Add more custom color names if needed + default: + color = colorName; + } + const link = match[2]; + let textContent; + if(match[3].includes('\\n')) { + textContent = match[3].replace('\\n', "
"); + } else { + textContent = match[3]; + } + return `${textContent}`; + } + + return matchingString; +} + +function convertEpochToHumanReadable(matchingString: string) { + const match = matchingString.match(/\[ts: (\d+)\]/); + if (match) { + const epochTimestamp = parseInt(match[1], 10); // Extracting the epoch timestamp + const humanReadableDate = new Date(epochTimestamp * 1000).toLocaleString(); + return humanReadableDate; + } + return matchingString; +} + + + // -------- Define the required colors const COLORS = { PRIMARY: 'rgba(27.0, 150.0, 227.0, 1.0)', @@ -140,6 +235,16 @@ const DEFAULT_PATTERNS:CustomParseShape[] = [ }, renderText: renderStyles }, + { + pattern: /(.*?)<\/PUSHText>/gi, + style: {}, // we can add aditional styles here if needed + renderText: renderTextStyles + }, + { + pattern: /(.*?)<\/PUSHText>/gi, + style: {}, // can Add additional styles here if needed + renderText: renderLinkWithColor + }, { pattern: /\[(up):([^\]]+)\]/i, // url style: { @@ -188,10 +293,30 @@ const DEFAULT_PATTERNS:CustomParseShape[] = [ renderText: renderStyles }, { - pattern: /\[(i):([^\]]+)\]/i, // italics - style: styles.italics, - renderText: renderStyles + pattern: /\*\*\*(.*?)\*\*\*/g, // bold ***text*** + style: { + ...styles.bold, + ...styles.italics + }, + renderText: (matchingString) => matchingString.replace(/\*\*\*(.*?)\*\*\*/g, '$1'), + }, + { + pattern: /\*\*(.*?)\*\*/g, // bold **text** + style: styles.bold, + renderText: (matchingString) => matchingString.replace(/\*\*(.*?)\*\*/g, '$1'), }, + { + pattern: /\\n/g, + style: {}, + renderText: newLinestyles, + }, + { + pattern: /\*(.*?)\*/g, // italic *some text* + style: { + ...styles.italics, + }, + renderText: (matchingString) => matchingString.replace(/\*(.*?)\*/g, '$1'), + }, { pattern: /\[(bi):([^\]]+)\]/i, // bolditalics style: { @@ -200,6 +325,11 @@ const DEFAULT_PATTERNS:CustomParseShape[] = [ }, renderText: renderStyles }, + { + pattern: /\[ts: (\d+)\]/g, // Match [ts: timestamp_in_epoch] + style: {}, + renderText: convertEpochToHumanReadable, + }, { pattern: /\[(w):([^\]]+)\]/i, // white style: styles.white,