{"version":3,"file":"HTMLText.mjs","sources":["../../../src/scene/text-html/HTMLText.ts"],"sourcesContent":["import { TextureStyle, type TextureStyleOptions } from '../../rendering/renderers/shared/texture/TextureStyle';\nimport { AbstractText, ensureTextOptions } from '../text/AbstractText';\nimport { type BatchableHTMLText } from './BatchableHTMLText';\nimport { HTMLTextStyle } from './HTMLTextStyle';\nimport { measureHtmlText } from './utils/measureHtmlText';\n\nimport type { View } from '../../rendering/renderers/shared/view/View';\nimport type { TextOptions, TextString } from '../text/AbstractText';\nimport type { HTMLTextStyleOptions } from './HTMLTextStyle';\n\n/**\n * Constructor options used for `HTMLText` instances. Extends the base text options\n * with HTML-specific features and texture styling capabilities.\n * @example\n * ```ts\n * // Basic HTML text\n * const basicText = new HTMLText({\n *     text: '<b>Bold</b> and <i>Italic</i> text',\n *     style: {\n *         fontSize: 24,\n *         fill: 0xff1010\n *     }\n * });\n *\n * // Rich HTML text with styling\n * const richText = new HTMLText({\n *     text: '<custom>Custom Tag</custom>',\n *     style: {\n *         fontFamily: 'Arial',\n *         fontSize: 32,\n *         fill: 0x4a4a4a,\n *         align: 'center',\n *         tagStyles: {\n *             custom: {\n *                 fontSize: 32,\n *                 fill: '#00ff00',\n *                 fontStyle: 'italic'\n *             }\n *         }\n *     }\n *     textureStyle: {\n *         scaleMode: 'linear',\n *     }\n * });\n * ```\n * @category text\n * @standard\n */\nexport interface HTMLTextOptions extends TextOptions<HTMLTextStyle, HTMLTextStyleOptions>, PixiMixins.HTMLTextOptions\n{\n    /**\n     * Optional texture style to use for the text texture. This allows fine control over\n     * how the text is rendered to a texture before being displayed.\n     *\n     * The texture style can affect:\n     * - Scale mode (nearest/linear)\n     * - Resolution\n     * - Format (rgb/rgba)\n     * - Alpha handling\n     * @example\n     * ```ts\n     * const text = new HTMLText({\n     *     text: 'Crisp Text',\n     *     textureStyle: {\n     *         scaleMode: 'nearest', // Pixel-perfect scaling\n     *     }\n     * });\n     * ```\n     * @advanced\n     */\n    textureStyle?: TextureStyle | TextureStyleOptions;\n}\n\n// eslint-disable-next-line requireExport/require-export-jsdoc, requireMemberAPI/require-member-api-doc\nexport interface HTMLText extends PixiMixins.HTMLText, AbstractText<\n    HTMLTextStyle,\n    HTMLTextStyleOptions,\n    HTMLTextOptions,\n    BatchableHTMLText\n> {}\n\n/**\n * A HTMLText object creates text using HTML/CSS rendering with SVG foreignObject.\n * This allows for rich text formatting using standard HTML tags and CSS styling.\n *\n * Key features:\n * - HTML tag support (<strong>, <em>, etc.)\n * - CSS styling and custom style overrides\n * - Emoji and special character support\n * - Line breaking and word wrapping\n * - SVG-based rendering\n * @example\n * ```ts\n * import { HTMLText } from 'pixi.js';\n *\n * // Basic HTML text with tags\n * const text = new HTMLText({\n *     text: '<h1>Title</h1><p>This is a <strong>bold</strong> and <em>italic</em> text.</p>',\n *     style: {\n *         fontFamily: 'Arial',\n *         fontSize: 24,\n *         fill: 0xff1010,\n *         align: 'center',\n *     }\n * });\n *\n * // Rich HTML text with custom styling\n * const richText = new HTMLText({\n *     text: `\n *         <div class=\"title\">Welcome</div>\n *         <div class=\"content\">\n *             This text supports:\n *             <ul>\n *                 <li>✨ Emojis</li>\n *                 <li>🎨 Custom CSS</li>\n *                 <li>📏 Auto-sizing</li>\n *             </ul>\n *         </div>\n *     `,\n *     style: {\n *         fontSize: 24,\n *         fill: '#334455',\n *         cssOverrides: [\n *             '.title { font-size: 32px; color: red; }',\n *             '.content { line-height: 1.5; }'\n *         ],\n *         wordWrap: true,\n *         wordWrapWidth: 300,\n *     }\n * });\n *\n * // Text with custom texture settings\n * const crispText = new HTMLText({\n *     text: '<div style=\"padding: 10px\">High Quality Text</div>',\n *     style: {\n *         fontSize: 24,\n *         fill: '#4a4a4a',\n *     },\n *     textureStyle: {\n *         scaleMode: 'nearest',\n *     }\n * });\n * ```\n *\n * Platform Considerations:\n * - Rendering may vary slightly between browsers\n * - Requires browser support for foreignObject\n * - Performance similar to Canvas text\n * - Memory usage comparable to Canvas text\n * @category text\n * @standard\n * @see {@link HTMLTextStyle} For detailed style options\n * @see {@link Text} For canvas-based text rendering\n * @see {@link BitmapText} For high-performance static text\n */\nexport class HTMLText extends AbstractText<\n    HTMLTextStyle,\n    HTMLTextStyleOptions,\n    HTMLTextOptions,\n    BatchableHTMLText\n> implements View\n{\n    /** @internal */\n    public override readonly renderPipeId: string = 'htmlText';\n\n    /**\n     * Optional texture style to use for the text.\n     * > [!NOTE] HTMLText is not updated when this property is updated,\n     * > you must update the text manually by calling `text.onViewUpdate()`\n     * @advanced\n     */\n    public textureStyle?: TextureStyle;\n\n    /**\n     * @param {HTMLTextOptions} options - The options of the html text.\n     */\n    constructor(options?: HTMLTextOptions);\n    /** @deprecated since 8.0.0 */\n    constructor(text?: TextString, options?: Partial<HTMLTextStyle>);\n    constructor(...args: [HTMLTextOptions?] | [TextString, Partial<HTMLTextStyle>])\n    {\n        const options = ensureTextOptions<HTMLTextOptions>(args, 'HtmlText');\n\n        super(options, HTMLTextStyle);\n\n        if (options.textureStyle)\n        {\n            this.textureStyle = options.textureStyle instanceof TextureStyle\n                ? options.textureStyle\n                : new TextureStyle(options.textureStyle);\n        }\n    }\n\n    /** @private */\n    protected updateBounds()\n    {\n        const bounds = this._bounds;\n        const anchor = this._anchor;\n\n        const htmlMeasurement = measureHtmlText(this.text, this._style as HTMLTextStyle);\n\n        const { width, height } = htmlMeasurement;\n\n        bounds.minX = (-anchor._x * width);\n        bounds.maxX = bounds.minX + width;\n        bounds.minY = (-anchor._y * height);\n        bounds.maxY = bounds.minY + height;\n    }\n\n    override get text(): string\n    {\n        return this._text;\n    }\n    /**\n     * The text content to display. Use '\\n' for line breaks.\n     * Accepts strings, numbers, or objects with toString() method.\n     * @example\n     * ```ts\n     * const text = new HTMLText({\n     *     text: 'Hello Pixi!',\n     * });\n     * const multilineText = new HTMLText({\n     *     text: 'Line 1\\nLine 2\\nLine 3',\n     * });\n     * const numberText = new HTMLText({\n     *     text: 12345, // Will be converted to '12345'\n     * });\n     * const objectText = new HTMLText({\n     *     text: { toString: () => 'Object Text' }, // Custom toString\n     * });\n     *\n     * // Update text dynamically\n     * text.text = 'Updated Text'; // Re-renders with new text\n     * text.text = 67890; // Updates to '67890'\n     * text.text = { toString: () => 'Dynamic Text' }; // Uses custom toString method\n     * // Clear text\n     * text.text = ''; // Clears the text\n     * ```\n     * @default ''\n     */\n    override set text(text: TextString)\n    {\n        // Sanitise the text to ensure it is valid HTML\n        const sanitisedText = this._sanitiseText(text.toString());\n\n        // Call the parent class's text setter with the sanitised text\n        super.text = sanitisedText;\n    }\n\n    /**\n     * Sanitise text - replace `<br>` with `<br/>`, `&nbsp;` with `&#160;`\n     * @param text\n     * @see https://www.sitepoint.com/community/t/xhtml-1-0-transitional-xml-parsing-error-entity-nbsp-not-defined/3392/3\n     */\n    private _sanitiseText(text: string): string\n    {\n        return this._removeInvalidHtmlTags(text\n            .replace(/<br>/gi, '<br/>')\n            .replace(/<hr>/gi, '<hr/>')\n            .replace(/&nbsp;/gi, '&#160;'));\n    }\n\n    private _removeInvalidHtmlTags(input: string): string\n    {\n        // This regex finds \"<\" followed by anything except \">\" until the next \"<\" or end-of-string\n        // i.e., it finds broken tags like \"<br\" or \"<div id='x'\" that never close\n        const brokenTagPattern = /<[^>]*?(?=<|$)/g;\n\n        return input.replace(brokenTagPattern, '');\n    }\n}\n"],"names":[],"mappings":";;;;;;AA2JO,MAAM,iBAAiB,YAM9B,CAAA;AAAA,EAkBI,eAAe,IACf,EAAA;AACI,IAAM,MAAA,OAAA,GAAU,iBAAmC,CAAA,IAAA,EAAM,UAAU,CAAA,CAAA;AAEnE,IAAA,KAAA,CAAM,SAAS,aAAa,CAAA,CAAA;AApBhC;AAAA,IAAA,IAAA,CAAyB,YAAuB,GAAA,UAAA,CAAA;AAsB5C,IAAA,IAAI,QAAQ,YACZ,EAAA;AACI,MAAK,IAAA,CAAA,YAAA,GAAe,QAAQ,YAAwB,YAAA,YAAA,GAC9C,QAAQ,YACR,GAAA,IAAI,YAAa,CAAA,OAAA,CAAQ,YAAY,CAAA,CAAA;AAAA,KAC/C;AAAA,GACJ;AAAA;AAAA,EAGU,YACV,GAAA;AACI,IAAA,MAAM,SAAS,IAAK,CAAA,OAAA,CAAA;AACpB,IAAA,MAAM,SAAS,IAAK,CAAA,OAAA,CAAA;AAEpB,IAAA,MAAM,eAAkB,GAAA,eAAA,CAAgB,IAAK,CAAA,IAAA,EAAM,KAAK,MAAuB,CAAA,CAAA;AAE/E,IAAM,MAAA,EAAE,KAAO,EAAA,MAAA,EAAW,GAAA,eAAA,CAAA;AAE1B,IAAO,MAAA,CAAA,IAAA,GAAQ,CAAC,MAAA,CAAO,EAAK,GAAA,KAAA,CAAA;AAC5B,IAAO,MAAA,CAAA,IAAA,GAAO,OAAO,IAAO,GAAA,KAAA,CAAA;AAC5B,IAAO,MAAA,CAAA,IAAA,GAAQ,CAAC,MAAA,CAAO,EAAK,GAAA,MAAA,CAAA;AAC5B,IAAO,MAAA,CAAA,IAAA,GAAO,OAAO,IAAO,GAAA,MAAA,CAAA;AAAA,GAChC;AAAA,EAEA,IAAa,IACb,GAAA;AACI,IAAA,OAAO,IAAK,CAAA,KAAA,CAAA;AAAA,GAChB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EA4BA,IAAa,KAAK,IAClB,EAAA;AAEI,IAAA,MAAM,aAAgB,GAAA,IAAA,CAAK,aAAc,CAAA,IAAA,CAAK,UAAU,CAAA,CAAA;AAGxD,IAAA,KAAA,CAAM,IAAO,GAAA,aAAA,CAAA;AAAA,GACjB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOQ,cAAc,IACtB,EAAA;AACI,IAAA,OAAO,IAAK,CAAA,sBAAA,CAAuB,IAC9B,CAAA,OAAA,CAAQ,UAAU,OAAO,CAAA,CACzB,OAAQ,CAAA,QAAA,EAAU,OAAO,CAAA,CACzB,OAAQ,CAAA,UAAA,EAAY,QAAQ,CAAC,CAAA,CAAA;AAAA,GACtC;AAAA,EAEQ,uBAAuB,KAC/B,EAAA;AAGI,IAAA,MAAM,gBAAmB,GAAA,iBAAA,CAAA;AAEzB,IAAO,OAAA,KAAA,CAAM,OAAQ,CAAA,gBAAA,EAAkB,EAAE,CAAA,CAAA;AAAA,GAC7C;AACJ;;;;"}