npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@mtcute/html-parser

v0.18.0-rc.5

Published

HTML entities parser for mtcute

Downloads

2,169

Readme

@mtcute/html-parser

📖 API Reference

HTML entities parser for mtcute

NOTE: The syntax implemented here is incompatible with Bot API HTML.

Please read Syntax below for a detailed explanation

Features

  • Supports all entities that Telegram supports
  • Supports nested entities
  • Proper newline/whitespace handling (just like in real HTML)
  • Interpolation!

Usage

import { html } from '@mtcute/html-parser'

tg.sendText(
    'me',
    html`
        Hello, <b>me</b>! Updates from the feed:<br>
        ${await getUpdatesFromFeed()}
    `
)

Syntax

@mtcute/html-parser uses htmlparser2 under the hood, so the parser supports nearly any HTML. However, since the text is still processed in a custom way for Telegram, the supported subset of features is documented below:

Line breaks and spaces

Line breaks are not preserved, <br> is used instead, making the syntax very close to the one used when building web pages.

Multiple spaces and indents are collapsed (except in pre), when you do need multiple spaces use &nbsp; instead.

Inline entities

Inline entities are entities that are in-line with other text. We support these entities:

| Name | Code | Result (visual) | | ---------------- | ---------------------------------------------------------------- | ---------------------------- | | Bold | <b>text</b> | text | | Italic | <b>text</b> | text | | Underline | <u>text</u> | text | | Strikethrough | <s>text</s> | ~~text~~ | | Spoiler | <spoiler>text</spoiler> (or tg-spoiler) | N/A | | Monospace (code) | <code>text</code> | text | | Text link | <a href="https://google.com">Google</a> | Google | | Text mention | <a href="tg://user?id=1234567">Name</a> | N/A | | Custom emoji | <emoji id="12345">😄</emoji> (or <tg-emoji emoji-id="...">) | N/A |

Note: <strong>, <em>, <ins>, <strike>, <del> are not supported because they are redundant

Note: It is up to the client to look up user's input entity by ID for text mentions. In most cases, you can only use IDs of users that were seen by the client while using given storage.

Alternatively, you can explicitly provide access hash like this: <a href="tg://user?id=1234567&hash=abc">Name</a>, where abc is user's access hash written as a hexadecimal integer. Order of the parameters does matter, i.e. tg://user?hash=abc&id=1234567 will not be processed as expected.

Block entities

The only block entity that Telegram supports is <pre>, therefore it is the only tag we support too.

Optionally, language for <pre> block can be specified like this:

<pre language="typescript">export type Foo = 42</pre>

| Code | Result (visual) | | ----------------------------------------------------------------------------------- | ---------------------------- | | <pre>multiline\ntext</pre> | multilinetext | | <pre language="javascript"> export default 42</pre> | export default 42 |

Nested and overlapped entities

HTML is a nested language, and so is this parser. It does support nested entities, but overlapped entities will not work as expected!

Overlapping entities are supported in unparse(), though.

| Code | Result (visual) | |---------------------------------------------------------------------------------------------------------------------|--------------------------------------------------------------------------| | <b>Welcome back, <i>User</i>!</b> | Welcome back, User! | | <b>bold <i>and</b> italic</i> | bold and italic⚠️ word "italic" is not actually italic! | | <b>bold <i>and</i></b><i> italic</i>⚠️ this is how unparse() handles overlapping entities | bold and italic |

Interpolation

Being a tagged template literal, html supports interpolation.

You can interpolate one of the following:

  • string - will not be parsed, and appended to plain text as-is
    • In case you want the string to be parsed, use html as a simple function: html`... ${html('bold')} ...`
  • number - will be converted to string and appended to plain text as-is
  • TextWithEntities or MessageEntity - will add the text and its entities to the output. This is the type returned by html itself:
    const bold = html`**bold**`
    const text = html`Hello, ${bold}!`
  • falsy value (i.e. null, undefined, false) - will be ignored

Note that because of interpolation, you almost never need to think about escaping anything, since the values are not even parsed as HTML, and are appended to the output as-is.