@revenuecat/purchases-ui-js/dist/components/text/text-utils.js

Web components for Paywalls. Powered by RevenueCat

import { getActiveStateProps, getComponentStyles, getSizeStyle, getTextComponentTag, getTextStyles, prefixObject, stringifyStyles, } from "../../utils/style-utils";
import { DEFAULT_BACKGROUND_COLOR, DEFAULT_TEXT_COLOR, } from "../../utils/constants";
export const defaultColor = {
    light: { type: "hex", value: DEFAULT_TEXT_COLOR },
};
export const defaultBackgroundColor = {
    light: { type: "hex", value: DEFAULT_BACKGROUND_COLOR },
};
/**
 * Generates comprehensive styles for text components by combining text, component and size styles
 * @param props - Text component properties including font, color, background, spacing etc.
 * @returns Object containing text style variables and the appropriate HTML tag to render
 */
export const getTextComponentStyles = (props) => {
    const { font_size = "body_m", color = defaultColor, background_color = defaultBackgroundColor, padding, margin, size, purchaseState, } = props;
    const styles = {
        "--width": "unset",
        "--height": "unset",
        "--text-align": "initial",
        "--font-weight": "initial",
        "--font-size": "initial",
        "--font-family": "sans-serif",
        "--background-clip": "unset",
        "--text-fill-color": "unset",
        "--margin-block-start": "0px",
        "--margin-inline-end": "0px",
        "--margin-block-end": "0px",
        "--margin-inline-start": "0px",
        "--padding-block-start": "0px",
        "--padding-inline-end": "0px",
        "--padding-block-end": "0px",
        "--padding-inline-start": "0px",
        "--background": "transparent",
        "--text-color": "inherit",
        "--border": "none",
        "--border-end-start-radius": "0px",
        "--border-end-end-radius": "0px",
        "--border-start-start-radius": "0px",
        "--border-start-end-radius": "0px",
        "--shadow": "none",
        "--flex": "0 1 auto",
    };
    const activeStateProps = getActiveStateProps(props.overrides, props.componentState);
    const tagToRender = getTextComponentTag(font_size);
    const textStyles = getTextStyles({ ...props, ...activeStateProps }, purchaseState.colorMode);
    const componentStyles = getComponentStyles({
        background_color,
        color,
        margin,
        padding,
        colorMode: purchaseState.colorMode,
        ...activeStateProps,
    });
    const sizeStyles = getSizeStyle({ ...size, ...activeStateProps });
    const stylesObject = {
        ...styles,
        ...componentStyles,
        ...textStyles,
        ...sizeStyles,
    };
    return {
        textStyles: prefixObject(stylesObject, "text"),
        tagToRender,
    };
};
export function getTextWrapperStyles(restProps, size, background_color) {
    const styles = {
        "--width": "unset",
        "--height": "unset",
        "--flex": "0 1 auto",
        "--margin-block-start": "0px",
        "--margin-inline-end": "0px",
        "--margin-block-end": "0px",
        "--margin-inline-start": "0px",
        "--padding-block-start": "0px",
        "--padding-inline-end": "0px",
        "--padding-block-end": "0px",
        "--padding-inline-start": "0px",
        "--background": "transparent",
        "--text-color": "inherit",
        "--border": "none",
        "--border-end-start-radius": "0px",
        "--border-end-end-radius": "0px",
        "--border-start-start-radius": "0px",
        "--border-start-end-radius": "0px",
        "--shadow": "none",
        "--position": "relative",
        "--inset": "0",
        "--transform": "initial",
    };
    Object.assign(styles, getComponentStyles({
        background_color,
        ...restProps,
    }), getSizeStyle(size));
    Object.assign(styles, restProps.zStackChildStyles);
    const prefixedStyles = prefixObject(styles, "text");
    return stringifyStyles(prefixedStyles);
}
export function getTextNodeStyles(props) {
    const styles = {
        "--text-margin-block-start": "0px",
        "--text-margin-inline-end": "0px",
        "--text-margin-block-end": "0px",
        "--text-margin-inline-start": "0px",
        "--text-padding-block-start": "0px",
        "--text-padding-inline-end": "0px",
        "--text-padding-block-end": "0px",
        "--text-padding-inline-start": "0px",
        "--text-background": "transparent",
        "--text-text-color": "inherit",
        "--text-border": "none",
        "--text-border-end-start-radius": "0px",
        "--text-border-end-end-radius": "0px",
        "--text-border-start-start-radius": "0px",
        "--text-border-start-end-radius": "0px",
        "--text-shadow": "none",
        "--text-text-align": "initial",
        "--text-font-weight": "initial",
        "--text-font-size": "initial",
        "--text-font-family": "sans-serif",
        "--text-background-clip": "initial",
        "--text-text-fill-color": "initial",
        "--text-width": "unset",
        "--text-height": "unset",
        "--text-flex": "0 1 auto",
    };
    const { tagToRender, textStyles } = getTextComponentStyles(props);
    Object.assign(styles, textStyles);
    return { tagToRender, textStyles: stringifyStyles(styles) };
}
export function getHtmlFromMarkdown(text) {
    if (!text)
        return "";
    const regexpDictionary = {
        newLine: { regexp: /\\\n/g, output: "<br/>" },
        bold: { regexp: /\*\*(.*?)\*\*/g, output: "<b>$1</b>" },
        italic: { regexp: /\*(.*?)\*/g, output: "<i>$1</i>" },
        strikethrough: { regexp: /~(.*?)~/g, output: "<s>$1</s>" },
        code: {
            regexp: /`(.*?)`/g,
            output: "<span style='font-family: monospace'>$1</span>",
        },
        link: {
            regexp: /\[(.*?)\]\((.*?)\)/g,
            output: "<a href=$2 target='_blank' rel='noopener noreferrer'>$1</a>",
        },
    };
    return Object.values(regexpDictionary).reduce((parsedText, { regexp, output }) => {
        return parsedText.replaceAll(regexp, output);
    }, text);
}