Add HTML parsing features

.gitignore

@@ -1,2 +1,3 @@
 /composer.lock
 /vendor/
+.phpunit.result.cache

composer.json

@@ -22,13 +22,16 @@
         "ext-mbstring": "*"
     },
     "require-dev": {
-        "pestphp/pest": "^0.3.0",
+        "pestphp/pest": "^1.21",
         "s9e/regexp-builder": "^1.4",
         "spatie/emoji": "^2.3.0",
-        "spatie/pest-plugin-snapshots": "^1.0"
+        "spatie/pest-plugin-snapshots": "^1.0",
+        "symfony/var-dumper": "^6.1",
+        "wa72/htmlpagedom": "^2.0 || ^3.0"
     },
     "suggest": {
-        "spatie/emoji": "*"
+        "spatie/emoji": "*",
+        "wa72/htmlpagedom": "*"
     },
     "minimum-stability": "dev",
     "prefer-stable": true,
@@ -38,7 +41,10 @@
         }
     },
     "config": {
-        "sort-packages": true
+        "sort-packages": true,
+        "allow-plugins": {
+            "pestphp/pest-plugin": true
+        }
     },
     "scripts": {
         "generate": "php ./generate.php",

src/HtmlReplacer.php

@@ -0,0 +1,60 @@
+<?php
+
+namespace Astrotomic\Twemoji;
+
+use Astrotomic\Twemoji\Concerns\Configurable;
+use RuntimeException;
+use Wa72\HtmlPageDom\HtmlPageCrawler;
+
+/**
+ * @internal This class is marked as Internal as it is considered Experimental. Code subject to change until warning removed.
+ */
+class HtmlReplacer
+{
+    use Configurable;
+
+    public function __construct()
+    {
+        if (! class_exists(HtmlPageCrawler::class)) {
+            throw new RuntimeException(
+                sprintf('Cannot use %s method unless `wa72/htmlpagedom` is installed.', __METHOD__)
+            );
+        }
+    }
+
+    public function parse(string $html): string
+    {
+        // Parse the HTML page or fragment...
+        $parsedHtmlRoot = new HtmlPageCrawler($html);
+        // Filter parsed HTML "root" into the twemoji relevant parts...
+        $parsedHtml = $this->whenHtmlDocFilterBody($parsedHtmlRoot);
+        // Use xpath to filter only the "TextNodes" within every "Element"
+        $textNodes = $parsedHtml->filterXPath('.//*[normalize-space(text())]');
+
+        // If the filtered DOM fragment doesn't have TextNode children, return the input HTML.
+        if ($textNodes->count() === 0) {
+            return $html;
+        }
+
+        $textNodes->each(function (HtmlPageCrawler $node) {
+            $twemojiContent = (new EmojiText($node->innerText()))
+                ->base($this->base)
+                ->type($this->type)
+                ->toHtml();
+            $node->makeEmpty()->setInnerHtml($twemojiContent);
+
+            return $node;
+        });
+
+        return $parsedHtmlRoot->saveHTML();
+    }
+
+    private function whenHtmlDocFilterBody(HtmlPageCrawler $htmlRoot): HtmlPageCrawler
+    {
+        if ($htmlRoot->isHtmlDocument()) {
+            return $htmlRoot->filter('body');
+        }
+
+        return $htmlRoot;
+    }
+}

src/Twemoji.php

@@ -25,7 +25,7 @@ public function __construct(array $codepoints)
 
     public static function emoji(string $emoji): self
     {
-        $chars = preg_split('//u', $emoji, null, PREG_SPLIT_NO_EMPTY);
+        $chars = preg_split('//u', $emoji, -1, PREG_SPLIT_NO_EMPTY);
 
         $codepoints = array_map(
             fn (string $code): string => dechex(mb_ord($code)),
@@ -58,6 +58,7 @@ public function url(): string
         );
     }
 
+    #[\ReturnTypeWillChange]
     public function jsonSerialize()
     {
         return $this->url();

tests/Pest.php

@@ -0,0 +1,10 @@
+<?php
+
+use Astrotomic\Twemoji\HtmlReplacer;
+
+function htmlReplacerPngParser(string $html): string
+{
+    $htmlReplacer = (new HtmlReplacer())->png();
+
+    return $htmlReplacer->parse($html);
+}

tests/Unit/HtmlReplacerFragmentTest.php

@@ -0,0 +1,73 @@
+<?php
+
+use function Spatie\Snapshots\assertMatchesTextSnapshot;
+
+it('can convert a single emoji paragraph', function () {
+    assertMatchesTextSnapshot(htmlReplacerPngParser('<p>🚀</p>'));
+});
+
+it('will not convert an emoji within HTML attributes', function () {
+    assertMatchesTextSnapshot(htmlReplacerPngParser('<img src="" alt="🎉"/>'));
+});
+
+it('will not convert an emoji within SCRIPT tags', function () {
+    assertMatchesTextSnapshot(htmlReplacerPngParser("<script>document.innerHTML = '🤷‍♂️';</script>"));
+});
+
+it('can convert many Emoji in an HTML comment section', function () {
+    $commentsHtml = <<<'HTML'
+<section class="comment-box">
+    <div class="comment-content">
+        <h2>Time for a ElePHPant RAVE!</h2>
+        <p>🐘🐘🐘🐘</p>
+        <p>🐘🐘🐘</p>
+        <p>🐘🐘🐘🐘🐘</p>
+        <p>🐘🐘</p>
+    </div>
+    <section class="sub-comments">
+        <section class="comment-box">
+            <div class="comment-content">
+                <h2>Time for a cRUSTation RAVE!</h2>
+                <p>🦀🦀🦀🦀</p>
+                <p>🦀🦀</p>
+                <p>🦀🦀🦀🦀</p>
+                <p>🦀</p>
+            </div>
+        </section>
+        <section class="comment-box">
+            <div class="comment-content">
+                <p>but what if the crabs and elephants rave together?!</p>
+            </div>
+        </section>
+    </section>
+</section>
+HTML;
+    assertMatchesTextSnapshot(htmlReplacerPngParser($commentsHtml));
+});
+
+it('can convert many Emoji in an HTML article', function () {
+    $commentsHtml = <<<'HTML'
+<article>
+    <p>Lorem 😂😂 ipsum 🕵️‍♂️dolor sit✍️ amet, consectetur adipiscing😇😇🤙 elit, sed do eiusmod🥰 tempor 😤😤🏳️‍🌈incididunt ut 👏labore 👏et👏 dolore 👏magna👏 aliqua.</p>
+    <p>Ut enim ad minim 🐵✊🏿veniam,❤️😤😫😩💦💦 quis nostrud 👿🤮exercitation ullamco 🧠👮🏿‍♀️🅱️laboris nisi ut aliquip❗️ ex ea commodo consequat.</p>
+    <p>💯Duis aute💦😂😂😂 irure dolor 👳🏻‍♂️🗿in reprehenderit 🤖👻👎in voluptate velit esse cillum dolore 🙏🙏eu fugiat🤔 nulla pariatur.</p>
+    <p>🙅‍♀️🙅‍♀️Excepteur sint occaecat🤷‍♀️🤦‍♀️ cupidatat💅 non💃 proident,👨‍👧 sunt🤗 in culpa😥😰😨 qui officia🤩🤩 deserunt mollit 🧐anim id est laborum.🤔🤔</p>
+</article>
+HTML;
+    assertMatchesTextSnapshot(htmlReplacerPngParser($commentsHtml));
+});
+
+it('can handle text with an outer P tag', function () {
+    $textContent = '<p>This is some fancy-💃 Markdown/WYSIWYG text with surrounding &lt;p&gt; tags enabled. 🎉</p>';
+    assertMatchesTextSnapshot(htmlReplacerPngParser($textContent));
+});
+
+it('can handle text without outer P tag', function () {
+    $textContent = 'This is some fancy-💃 Markdown/WYSIWYG text with surrounding &lt;p&gt; tags disabled. 🎉';
+    assertMatchesTextSnapshot(htmlReplacerPngParser($textContent));
+});
+
+it('can handle text without outer P tag but inner HTML', function () {
+    $textContent = 'This is some fancy-💃 Markdown/WYSIWYG text with surrounding <code><p></code> tags disabled. 🎉';
+    assertMatchesTextSnapshot(htmlReplacerPngParser($textContent));
+});

tests/Unit/HtmlReplacerPageTest.php

@@ -0,0 +1,98 @@
+<?php
+
+use function Spatie\Snapshots\assertMatchesTextSnapshot;
+
+it('will not mangle an Empty HTML page', function () {
+    $pageHtml = <<<'HTML'
+<!DOCTYPE html>
+<html lang="en">
+  <head></head>
+  <body></body>
+</html>
+HTML;
+    assertMatchesTextSnapshot(htmlReplacerPngParser($pageHtml));
+});
+
+it('will replace a single Emoji on an page', function () {
+    $pageHtml = <<<'HTML'
+<!DOCTYPE html>
+<html lang="en">
+  <head></head>
+  <body>Hey 🚀</body>
+</html>
+HTML;
+    assertMatchesTextSnapshot(htmlReplacerPngParser($pageHtml));
+});
+
+it('will not replace a single Emoji in the Title', function () {
+    $pageHtml = <<<'HTML'
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <meta http-equiv="X-UA-Compatible" content="ie=edge">
+        <title>HTML 5🚀 Boilerplate</title>
+        <link rel="stylesheet" href="style.css">
+    </head>
+    <body></body>
+</html>
+HTML;
+    $results = htmlReplacerPngParser($pageHtml);
+    expect($results)->toContain('5🚀')->not()->toContain('&#');
+    assertMatchesTextSnapshot($results);
+});
+
+it('will replace the Emoji on page, but not in head - OLD Charset Method', function () {
+    $pageHtml = <<<'HTML'
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <meta http-equiv="X-UA-Compatible" content="ie=edge">
+        <title>HTML 5🚀 Boilerplate</title>
+        <link rel="stylesheet" href="style.css">
+    </head>
+    <body>
+        <h1>Do a quick kickflip! 🛹</h1>
+        <p>This is HTML text that should be replaced, but the emoji in the head should not.</p>
+        <h2>Time for a CRAB RAVE!</h2>
+        <p>🦀🦀🦀🦀🦀</p>
+        <p>🦀🦀🦀</p>
+        <p>🦀🦀🦀🦀🦀</p>
+        <h2>🙏🐘</h2>
+    </body>
+</html>
+HTML;
+    $results = htmlReplacerPngParser($pageHtml);
+    expect($results)->toContain('5🚀')->not()->toContain('&#');
+    assertMatchesTextSnapshot($results);
+})->skip('This will fail due to "incorrect" meta charset method, we need to consider how to address that.');
+
+it('will replace the Emoji on page, but not in head - NEW Charset Method', function () {
+    $pageHtml = <<<'HTML'
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+    	<meta http-equiv="content-type" content="text/html; charset=utf-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <meta http-equiv="X-UA-Compatible" content="ie=edge">
+        <title>HTML 5🚀 Boilerplate</title>
+        <link rel="stylesheet" href="style.css">
+    </head>
+    <body>
+        <h1>Do a quick kickflip! 🛹</h1>
+        <p>This is HTML text that should be replaced, but the emoji in the head should not.</p>
+        <h2>Time for a CRAB RAVE!</h2>
+        <p>🦀🦀🦀🦀🦀</p>
+        <p>🦀🦀🦀</p>
+        <p>🦀🦀🦀🦀🦀</p>
+        <h2>🙏🐘</h2>
+    </body>
+</html>
+HTML;
+    $results = htmlReplacerPngParser($pageHtml);
+    expect($results)->toContain('5🚀')->not()->toContain('&#');
+    assertMatchesTextSnapshot($results);
+});

tests/__snapshots__/HtmlReplacerFragmentTest__it_can_convert_a_single_emoji_paragraph__1.txt

@@ -0,0 +1 @@
+<p><img src="https://twemoji.maxcdn.com/v/latest/72x72/1f680.png" alt="&#128640;" width="72" height="72" loading="lazy" class="twemoji"></p>

tests/__snapshots__/HtmlReplacerFragmentTest__it_can_convert_many_Emoji_in_an_HTML_article__1.txt

@@ -0,0 +1,6 @@
+<article>
+    <p>Lorem <img src="https://twemoji.maxcdn.com/v/latest/72x72/1f602.png" alt="&#128514;" width="72" height="72" loading="lazy" class="twemoji"><img src="https://twemoji.maxcdn.com/v/latest/72x72/1f602.png" alt="&#128514;" width="72" height="72" loading="lazy" class="twemoji"> ipsum <img src="https://twemoji.maxcdn.com/v/latest/72x72/1f575-fe0f-200d-2642-fe0f.png" alt="&#128373;&#65039;&zwj;&#9794;&#65039;" width="72" height="72" loading="lazy" class="twemoji">dolor sit<img src="https://twemoji.maxcdn.com/v/latest/72x72/270d.png" alt="&#9997;" width="72" height="72" loading="lazy" class="twemoji">&#65039; amet, consectetur adipiscing<img src="https://twemoji.maxcdn.com/v/latest/72x72/1f607.png" alt="&#128519;" width="72" height="72" loading="lazy" class="twemoji"><img src="https://twemoji.maxcdn.com/v/latest/72x72/1f607.png" alt="&#128519;" width="72" height="72" loading="lazy" class="twemoji"><img src="https://twemoji.maxcdn.com/v/latest/72x72/1f919.png" alt="&#129305;" width="72" height="72" loading="lazy" class="twemoji"> elit, sed do eiusmod<img src="https://twemoji.maxcdn.com/v/latest/72x72/1f970.png" alt="&#129392;" width="72" height="72" loading="lazy" class="twemoji"> tempor <img src="https://twemoji.maxcdn.com/v/latest/72x72/1f624.png" alt="&#128548;" width="72" height="72" loading="lazy" class="twemoji"><img src="https://twemoji.maxcdn.com/v/latest/72x72/1f624.png" alt="&#128548;" width="72" height="72" loading="lazy" class="twemoji"><img src="https://twemoji.maxcdn.com/v/latest/72x72/1f3f3-fe0f-200d-1f308.png" alt="&#127987;&#65039;&zwj;&#127752;" width="72" height="72" loading="lazy" class="twemoji">incididunt ut <img src="https://twemoji.maxcdn.com/v/latest/72x72/1f44f.png" alt="&#128079;" width="72" height="72" loading="lazy" class="twemoji">labore <img src="https://twemoji.maxcdn.com/v/latest/72x72/1f44f.png" alt="&#128079;" width="72" height="72" loading="lazy" class="twemoji">et<img src="https://twemoji.maxcdn.com/v/latest/72x72/1f44f.png" alt="&#128079;" width="72" height="72" loading="lazy" class="twemoji"> dolore <img src="https://twemoji.maxcdn.com/v/latest/72x72/1f44f.png" alt="&#128079;" width="72" height="72" loading="lazy" class="twemoji">magna<img src="https://twemoji.maxcdn.com/v/latest/72x72/1f44f.png" alt="&#128079;" width="72" height="72" loading="lazy" class="twemoji"> aliqua.</p>
+    <p>Ut enim ad minim <img src="https://twemoji.maxcdn.com/v/latest/72x72/1f435.png" alt="&#128053;" width="72" height="72" loading="lazy" class="twemoji"><img src="https://twemoji.maxcdn.com/v/latest/72x72/270a-1f3ff.png" alt="&#9994;&#127999;" width="72" height="72" loading="lazy" class="twemoji">veniam,<img src="https://twemoji.maxcdn.com/v/latest/72x72/2764.png" alt="&#10084;" width="72" height="72" loading="lazy" class="twemoji">&#65039;<img src="https://twemoji.maxcdn.com/v/latest/72x72/1f624.png" alt="&#128548;" width="72" height="72" loading="lazy" class="twemoji"><img src="https://twemoji.maxcdn.com/v/latest/72x72/1f62b.png" alt="&#128555;" width="72" height="72" loading="lazy" class="twemoji"><img src="https://twemoji.maxcdn.com/v/latest/72x72/1f629.png" alt="&#128553;" width="72" height="72" loading="lazy" class="twemoji"><img src="https://twemoji.maxcdn.com/v/latest/72x72/1f4a6.png" alt="&#128166;" width="72" height="72" loading="lazy" class="twemoji"><img src="https://twemoji.maxcdn.com/v/latest/72x72/1f4a6.png" alt="&#128166;" width="72" height="72" loading="lazy" class="twemoji"> quis nostrud <img src="https://twemoji.maxcdn.com/v/latest/72x72/1f47f.png" alt="&#128127;" width="72" height="72" loading="lazy" class="twemoji"><img src="https://twemoji.maxcdn.com/v/latest/72x72/1f92e.png" alt="&#129326;" width="72" height="72" loading="lazy" class="twemoji">exercitation ullamco <img src="https://twemoji.maxcdn.com/v/latest/72x72/1f9e0.png" alt="&#129504;" width="72" height="72" loading="lazy" class="twemoji"><img src="https://twemoji.maxcdn.com/v/latest/72x72/1f46e-1f3ff-200d-2640-fe0f.png" alt="&#128110;&#127999;&zwj;&#9792;&#65039;" width="72" height="72" loading="lazy" class="twemoji"><img src="https://twemoji.maxcdn.com/v/latest/72x72/1f171.png" alt="&#127345;" width="72" height="72" loading="lazy" class="twemoji">&#65039;laboris nisi ut aliquip<img src="https://twemoji.maxcdn.com/v/latest/72x72/2757.png" alt="&#10071;" width="72" height="72" loading="lazy" class="twemoji">&#65039; ex ea commodo consequat.</p>
+    <p><img src="https://twemoji.maxcdn.com/v/latest/72x72/1f4af.png" alt="&#128175;" width="72" height="72" loading="lazy" class="twemoji">Duis aute<img src="https://twemoji.maxcdn.com/v/latest/72x72/1f4a6.png" alt="&#128166;" width="72" height="72" loading="lazy" class="twemoji"><img src="https://twemoji.maxcdn.com/v/latest/72x72/1f602.png" alt="&#128514;" width="72" height="72" loading="lazy" class="twemoji"><img src="https://twemoji.maxcdn.com/v/latest/72x72/1f602.png" alt="&#128514;" width="72" height="72" loading="lazy" class="twemoji"><img src="https://twemoji.maxcdn.com/v/latest/72x72/1f602.png" alt="&#128514;" width="72" height="72" loading="lazy" class="twemoji"> irure dolor <img src="https://twemoji.maxcdn.com/v/latest/72x72/1f473-1f3fb-200d-2642-fe0f.png" alt="&#128115;&#127995;&zwj;&#9794;&#65039;" width="72" height="72" loading="lazy" class="twemoji"><img src="https://twemoji.maxcdn.com/v/latest/72x72/1f5ff.png" alt="&#128511;" width="72" height="72" loading="lazy" class="twemoji">in reprehenderit <img src="https://twemoji.maxcdn.com/v/latest/72x72/1f916.png" alt="&#129302;" width="72" height="72" loading="lazy" class="twemoji"><img src="https://twemoji.maxcdn.com/v/latest/72x72/1f47b.png" alt="&#128123;" width="72" height="72" loading="lazy" class="twemoji"><img src="https://twemoji.maxcdn.com/v/latest/72x72/1f44e.png" alt="&#128078;" width="72" height="72" loading="lazy" class="twemoji">in voluptate velit esse cillum dolore <img src="https://twemoji.maxcdn.com/v/latest/72x72/1f64f.png" alt="&#128591;" width="72" height="72" loading="lazy" class="twemoji"><img src="https://twemoji.maxcdn.com/v/latest/72x72/1f64f.png" alt="&#128591;" width="72" height="72" loading="lazy" class="twemoji">eu fugiat<img src="https://twemoji.maxcdn.com/v/latest/72x72/1f914.png" alt="&#129300;" width="72" height="72" loading="lazy" class="twemoji"> nulla pariatur.</p>
+    <p><img src="https://twemoji.maxcdn.com/v/latest/72x72/1f645-200d-2640-fe0f.png" alt="&#128581;&zwj;&#9792;&#65039;" width="72" height="72" loading="lazy" class="twemoji"><img src="https://twemoji.maxcdn.com/v/latest/72x72/1f645-200d-2640-fe0f.png" alt="&#128581;&zwj;&#9792;&#65039;" width="72" height="72" loading="lazy" class="twemoji">Excepteur sint occaecat<img src="https://twemoji.maxcdn.com/v/latest/72x72/1f937-200d-2640-fe0f.png" alt="&#129335;&zwj;&#9792;&#65039;" width="72" height="72" loading="lazy" class="twemoji"><img src="https://twemoji.maxcdn.com/v/latest/72x72/1f926-200d-2640-fe0f.png" alt="&#129318;&zwj;&#9792;&#65039;" width="72" height="72" loading="lazy" class="twemoji"> cupidatat<img src="https://twemoji.maxcdn.com/v/latest/72x72/1f485.png" alt="&#128133;" width="72" height="72" loading="lazy" class="twemoji"> non<img src="https://twemoji.maxcdn.com/v/latest/72x72/1f483.png" alt="&#128131;" width="72" height="72" loading="lazy" class="twemoji"> proident,<img src="https://twemoji.maxcdn.com/v/latest/72x72/1f468-200d-1f467.png" alt="&#128104;&zwj;&#128103;" width="72" height="72" loading="lazy" class="twemoji"> sunt<img src="https://twemoji.maxcdn.com/v/latest/72x72/1f917.png" alt="&#129303;" width="72" height="72" loading="lazy" class="twemoji"> in culpa<img src="https://twemoji.maxcdn.com/v/latest/72x72/1f625.png" alt="&#128549;" width="72" height="72" loading="lazy" class="twemoji"><img src="https://twemoji.maxcdn.com/v/latest/72x72/1f630.png" alt="&#128560;" width="72" height="72" loading="lazy" class="twemoji"><img src="https://twemoji.maxcdn.com/v/latest/72x72/1f628.png" alt="&#128552;" width="72" height="72" loading="lazy" class="twemoji"> qui officia<img src="https://twemoji.maxcdn.com/v/latest/72x72/1f929.png" alt="&#129321;" width="72" height="72" loading="lazy" class="twemoji"><img src="https://twemoji.maxcdn.com/v/latest/72x72/1f929.png" alt="&#129321;" width="72" height="72" loading="lazy" class="twemoji"> deserunt mollit <img src="https://twemoji.maxcdn.com/v/latest/72x72/1f9d0.png" alt="&#129488;" width="72" height="72" loading="lazy" class="twemoji">anim id est laborum.<img src="https://twemoji.maxcdn.com/v/latest/72x72/1f914.png" alt="&#129300;" width="72" height="72" loading="lazy" class="twemoji"><img src="https://twemoji.maxcdn.com/v/latest/72x72/1f914.png" alt="&#129300;" width="72" height="72" loading="lazy" class="twemoji"></p>
+</article>