Merge pull request #5 from Astrotomic/issue-3

#3 add ability to replace multiple emojis in plain text

Author: Gummibeer

README.md

@@ -21,6 +21,10 @@ composer require astrotomic/php-twemoji
 
 ## Usage
 
+### Single Emojis
+
+You can use the `Twemoji::emoji()` method to get the Twemoji image URL for a single emoji.
+
 ```php
 use Astrotomic\Twemoji\Twemoji;
 
@@ -34,6 +38,39 @@ Twemoji::emoji('🎉')->base('https://twemoji.astrotomic.info')->url();
 // https://twemoji.astrotomic.info/svg/1f389.svg
 ```
 
+### Multiple Emojis in Text
+
+If you have a text and want to replace all emojis with Twemoji image tags (Markdown or HTML) you can use the `Twemoji::text()` method.
+This isn't aware of emojis in attributes or anything - it just finds and replaces all Emojis in the given string.
+
+```php
+use Astrotomic\Twemoji\Twemoji;
+
+Twemoji::text("Hello 👋🏿")->toMarkdown();
+// Hello ![👋🏿](https://twemoji.maxcdn.com/v/latest/svg/1f44b-1f3ff.svg)
+
+Twemoji::text("Hello 👋🏿")->png()->toMarkdown();
+// Hello ![👋🏿](https://twemoji.maxcdn.com/v/latest/72x72/1f44b-1f3ff.png)
+```
+
+In case you want to configure the replacer once and bind it to your container for example you can do that as well.
+
+```php
+use Astrotomic\Twemoji\Replacer;
+
+$replacer = (new Replacer())->png();
+
+$replacer->text("Hello 👋🏿")->toMarkdown();
+// Hello ![👋🏿](https://twemoji.maxcdn.com/v/latest/72x72/1f44b-1f3ff.png)
+```
+
+You can also override the replacer configuration for the specific replace operation without altering the replacer configuration.
+
+```php
+$replacer->text("Hello 👋🏿")->svg()->toMarkdown();
+// Hello ![👋🏿](https://twemoji.maxcdn.com/v/latest/svg/1f44b-1f3ff.svg)
+```
+
 ## Testing
 
 ```bash

composer.json

@@ -23,7 +23,8 @@
     },
     "require-dev": {
         "pestphp/pest": "^0.3.0",
-        "spatie/emoji": "^2.2.0"
+        "spatie/emoji": "^2.3.0",
+        "spatie/pest-plugin-snapshots": "^1.0"
     },
     "suggest": {
         "spatie/emoji": "*"

src/Concerns/Configurable.php

@@ -0,0 +1,40 @@
+<?php
+
+namespace Astrotomic\Twemoji\Concerns;
+
+use Astrotomic\Twemoji\Twemoji;
+
+trait Configurable
+{
+    protected string $type = Twemoji::SVG;
+
+    protected string $base = 'https://twemoji.maxcdn.com/v/latest';
+
+    public function base(string $base): self
+    {
+        $this->base = rtrim($base, '/');
+
+        return $this;
+    }
+
+    public function type(string $type): self
+    {
+        $this->type = $type;
+
+        return $this;
+    }
+
+    public function svg(): self
+    {
+        $this->type = Twemoji::SVG;
+
+        return $this;
+    }
+
+    public function png(): self
+    {
+        $this->type = Twemoji::PNG;
+
+        return $this;
+    }
+}

src/EmojiText.php

@@ -0,0 +1,74 @@
+<?php
+
+namespace Astrotomic\Twemoji;
+
+use Astrotomic\Twemoji\Concerns\Configurable;
+use Closure;
+
+/**
+ * @internal
+ */
+class EmojiText
+{
+    use Configurable;
+
+    protected string $text;
+
+    public function __construct(string $text)
+    {
+        $this->text = $text;
+    }
+
+    public function toMarkdown(?Closure $alt = null): string
+    {
+        return $this->replace('![%{alt}](%{src})', $alt);
+    }
+
+    public function toHtml(?Closure $alt = null, array $attributes = []): string
+    {
+        $attributes = array_merge([
+            'width' => 72,
+            'height' => 72,
+            'loading' => 'lazy',
+            'class' => 'twemoji',
+        ], $attributes);
+
+        $attrs = implode(' ', array_map(
+            fn (string $key, string $value): string => "{$key}=\"{$value}\"",
+            array_keys($attributes),
+            array_values($attributes)
+        ));
+
+        return $this->replace('<img src="%{src}" alt="%{alt}" '.$attrs.' />', $alt);
+    }
+
+    protected function replace(string $replacement, ?Closure $alt = null): string
+    {
+        $text = $this->text;
+
+        $text = preg_replace_callback(
+            $this->regexp(),
+            fn (array $matches): string => str_replace(
+                ['%{alt}', '%{src}'],
+                [
+                    $alt
+                        ? $alt($matches[0])
+                        : $matches[0],
+                    Twemoji::emoji($matches[0])
+                        ->base($this->base)
+                        ->type($this->type)
+                        ->url(),
+                ],
+                $replacement
+            ),
+            $text
+        );
+
+        return $text;
+    }
+
+    protected function regexp(): string
+    {
+        return '/(?:'.json_decode(file_get_contents(dirname(__FILE__).'/regexp.json')).')/u';
+    }
+}

src/Replacer.php

@@ -0,0 +1,17 @@
+<?php
+
+namespace Astrotomic\Twemoji;
+
+use Astrotomic\Twemoji\Concerns\Configurable;
+
+class Replacer
+{
+    use Configurable;
+
+    public function text(string $text): EmojiText
+    {
+        return (new EmojiText($text))
+            ->base($this->base)
+            ->type($this->type);
+    }
+}

src/Twemoji.php

@@ -2,20 +2,19 @@
 
 namespace Astrotomic\Twemoji;
 
+use Astrotomic\Twemoji\Concerns\Configurable;
 use JsonSerializable;
 
 class Twemoji implements JsonSerializable
 {
-    protected const SVG = 'svg';
-    protected const PNG = 'png';
+    use Configurable;
+
+    public const SVG = 'svg';
+    public const PNG = 'png';
 
     /** @var string[] */
     protected array $codepoints;
 
-    protected string $type = self::SVG;
-
-    protected string $base = 'https://twemoji.maxcdn.com/v/latest';
-
     /**
      * @param string[] $codepoints
      */
@@ -38,25 +37,9 @@ public static function emoji(string $emoji): self
         return new static($normalized);
     }
 
-    public function base(string $base): self
-    {
-        $this->base = rtrim($base, '/');
-
-        return $this;
-    }
-
-    public function svg(): self
-    {
-        $this->type = self::SVG;
-
-        return $this;
-    }
-
-    public function png(): self
+    public static function text(string $text): EmojiText
     {
-        $this->type = self::PNG;
-
-        return $this;
+        return new EmojiText($text);
     }
 
     public function url(): string

src/regexp.json

@@ -3,8 +3,7 @@
 use Spatie\Emoji\Emoji;
 
 dataset('spatie-emojis', function () {
-    $class = new ReflectionClass(Emoji::class);
-    foreach ($class->getConstants() as $name => $emoji) {
+    foreach (Emoji::all() as $name => $emoji) {
         yield [$emoji, $name];
     }
 });

tests/Datasets/SpatieEmojis.php

@@ -0,0 +1,52 @@
+<?php
+
+use Astrotomic\Twemoji\Replacer;
+use function Spatie\Snapshots\assertMatchesTextSnapshot;
+
+it('can replace emojis in plain text to markdown', function () {
+    $replacer = new Replacer();
+    assertMatchesTextSnapshot($replacer->text("Hello \u{1F44B},\nEmojis are so cool! 🚀🎉")->toMarkdown());
+});
+
+it('can replace emojis in plain text to markdown using png', function () {
+    $replacer = new Replacer();
+    $replacer->png();
+    assertMatchesTextSnapshot($replacer->text("Hello \u{1F44B},\nEmojis are so cool! 🚀🎉")->toMarkdown());
+    assertMatchesTextSnapshot($replacer->text("Hello \u{1F44B},\nEmojis are so cool! 🎉🚀")->toMarkdown());
+});
+
+it('can replace emojis in plain text to markdown using png once', function () {
+    $replacer = new Replacer();
+    assertMatchesTextSnapshot($replacer->text("Hello \u{1F44B},\nEmojis are so cool! 🚀🎉")->png()->toMarkdown());
+    assertMatchesTextSnapshot($replacer->text("Hello \u{1F44B},\nEmojis are so cool! 🎉🚀")->toMarkdown());
+});
+
+it('can replace emojis in plain text to html', function () {
+    $replacer = new Replacer();
+    assertMatchesTextSnapshot($replacer->text("Hello \u{1F44B},\nEmojis are so cool! 🚀🎉")->toHtml());
+});
+
+it('can replace emojis in plain text to html using png', function () {
+    $replacer = new Replacer();
+    $replacer->png();
+    assertMatchesTextSnapshot($replacer->text("Hello \u{1F44B},\nEmojis are so cool! 🚀🎉")->toHtml());
+    assertMatchesTextSnapshot($replacer->text("Hello \u{1F44B},\nEmojis are so cool! 🎉🚀")->toHtml());
+});
+
+it('can replace emojis in plain text to html using png once', function () {
+    $replacer = new Replacer();
+    assertMatchesTextSnapshot($replacer->text("Hello \u{1F44B},\nEmojis are so cool! 🚀🎉")->png()->toHtml());
+    assertMatchesTextSnapshot($replacer->text("Hello \u{1F44B},\nEmojis are so cool! 🎉🚀")->toHtml());
+});
+
+it('can replace multi codepoint emojis in plain text', function () {
+    $replacer = new Replacer();
+    assertMatchesTextSnapshot($replacer->text(implode(PHP_EOL, [
+        'Hello 👋',
+        'Hello 👋🏻',
+        'Hello 👋🏼',
+        'Hello 👋🏽',
+        'Hello 👋🏾',
+        'Hello 👋🏿',
+    ]))->toMarkdown());
+});

tests/Unit/ReplacerTest.php

@@ -3,6 +3,7 @@
 use Astrotomic\Twemoji\Twemoji;
 use function PHPUnit\Framework\assertEquals;
 use function PHPUnit\Framework\assertMatchesRegularExpression;
+use function Spatie\Snapshots\assertMatchesTextSnapshot;
 
 it('can generate url', function (string $emoji, string $twemoji) {
     assertEquals(
@@ -38,3 +39,11 @@
         Twemoji::emoji($emoji)->url()
     );
 })->with('spatie-emojis');
+
+it('can replace emojis in plain text to markdown', function () {
+    assertMatchesTextSnapshot(Twemoji::text("Hello \u{1F44B},\nEmojis are so cool! 🚀🎉")->toMarkdown());
+});
+
+it('can replace emojis in plain text to html', function () {
+    assertMatchesTextSnapshot(Twemoji::text("Hello \u{1F44B},\nEmojis are so cool! 🚀🎉")->toHtml());
+});

tests/Unit/TwemojiTest.php

@@ -0,0 +1,2 @@
+Hello <img src="https://twemoji.maxcdn.com/v/latest/svg/1f44b.svg" alt="👋" width="72" height="72" loading="lazy" class="twemoji" />,
+Emojis are so cool! <img src="https://twemoji.maxcdn.com/v/latest/svg/1f680.svg" alt="🚀" width="72" height="72" loading="lazy" class="twemoji" /><img src="https://twemoji.maxcdn.com/v/latest/svg/1f389.svg" alt="🎉" width="72" height="72" loading="lazy" class="twemoji" />

tests/__snapshots__/ReplacerTest__it_can_replace_emojis_in_plain_text_to_html__1.txt

@@ -0,0 +1,2 @@
+Hello <img src="https://twemoji.maxcdn.com/v/latest/72x72/1f44b.png" alt="👋" width="72" height="72" loading="lazy" class="twemoji" />,
+Emojis are so cool! <img src="https://twemoji.maxcdn.com/v/latest/72x72/1f680.png" alt="🚀" width="72" height="72" loading="lazy" class="twemoji" /><img src="https://twemoji.maxcdn.com/v/latest/72x72/1f389.png" alt="🎉" width="72" height="72" loading="lazy" class="twemoji" />

tests/__snapshots__/ReplacerTest__it_can_replace_emojis_in_plain_text_to_html_using_png__1.txt

@@ -0,0 +1,2 @@
+Hello <img src="https://twemoji.maxcdn.com/v/latest/72x72/1f44b.png" alt="👋" width="72" height="72" loading="lazy" class="twemoji" />,
+Emojis are so cool! <img src="https://twemoji.maxcdn.com/v/latest/72x72/1f389.png" alt="🎉" width="72" height="72" loading="lazy" class="twemoji" /><img src="https://twemoji.maxcdn.com/v/latest/72x72/1f680.png" alt="🚀" width="72" height="72" loading="lazy" class="twemoji" />

tests/__snapshots__/ReplacerTest__it_can_replace_emojis_in_plain_text_to_html_using_png__2.txt

@@ -0,0 +1,2 @@
+Hello <img src="https://twemoji.maxcdn.com/v/latest/72x72/1f44b.png" alt="👋" width="72" height="72" loading="lazy" class="twemoji" />,
+Emojis are so cool! <img src="https://twemoji.maxcdn.com/v/latest/72x72/1f680.png" alt="🚀" width="72" height="72" loading="lazy" class="twemoji" /><img src="https://twemoji.maxcdn.com/v/latest/72x72/1f389.png" alt="🎉" width="72" height="72" loading="lazy" class="twemoji" />

tests/__snapshots__/ReplacerTest__it_can_replace_emojis_in_plain_text_to_html_using_png_once__1.txt

@@ -0,0 +1,2 @@
+Hello <img src="https://twemoji.maxcdn.com/v/latest/svg/1f44b.svg" alt="👋" width="72" height="72" loading="lazy" class="twemoji" />,
+Emojis are so cool! <img src="https://twemoji.maxcdn.com/v/latest/svg/1f389.svg" alt="🎉" width="72" height="72" loading="lazy" class="twemoji" /><img src="https://twemoji.maxcdn.com/v/latest/svg/1f680.svg" alt="🚀" width="72" height="72" loading="lazy" class="twemoji" />

tests/__snapshots__/ReplacerTest__it_can_replace_emojis_in_plain_text_to_html_using_png_once__2.txt

@@ -0,0 +1,2 @@
+Hello ![👋](https://twemoji.maxcdn.com/v/latest/svg/1f44b.svg),
+Emojis are so cool! ![🚀](https://twemoji.maxcdn.com/v/latest/svg/1f680.svg)![🎉](https://twemoji.maxcdn.com/v/latest/svg/1f389.svg)

tests/__snapshots__/ReplacerTest__it_can_replace_emojis_in_plain_text_to_markdown__1.txt

@@ -0,0 +1,2 @@
+Hello ![👋](https://twemoji.maxcdn.com/v/latest/72x72/1f44b.png),
+Emojis are so cool! ![🚀](https://twemoji.maxcdn.com/v/latest/72x72/1f680.png)![🎉](https://twemoji.maxcdn.com/v/latest/72x72/1f389.png)

tests/__snapshots__/ReplacerTest__it_can_replace_emojis_in_plain_text_to_markdown_using_png__1.txt

@@ -0,0 +1,2 @@
+Hello ![👋](https://twemoji.maxcdn.com/v/latest/72x72/1f44b.png),
+Emojis are so cool! ![🎉](https://twemoji.maxcdn.com/v/latest/72x72/1f389.png)![🚀](https://twemoji.maxcdn.com/v/latest/72x72/1f680.png)

tests/__snapshots__/ReplacerTest__it_can_replace_emojis_in_plain_text_to_markdown_using_png__2.txt

@@ -0,0 +1,2 @@
+Hello ![👋](https://twemoji.maxcdn.com/v/latest/72x72/1f44b.png),
+Emojis are so cool! ![🚀](https://twemoji.maxcdn.com/v/latest/72x72/1f680.png)![🎉](https://twemoji.maxcdn.com/v/latest/72x72/1f389.png)

tests/__snapshots__/ReplacerTest__it_can_replace_emojis_in_plain_text_to_markdown_using_png_once__1.txt

@@ -0,0 +1,2 @@
+Hello ![👋](https://twemoji.maxcdn.com/v/latest/svg/1f44b.svg),
+Emojis are so cool! ![🎉](https://twemoji.maxcdn.com/v/latest/svg/1f389.svg)![🚀](https://twemoji.maxcdn.com/v/latest/svg/1f680.svg)

tests/__snapshots__/ReplacerTest__it_can_replace_emojis_in_plain_text_to_markdown_using_png_once__2.txt

@@ -0,0 +1,6 @@
+Hello ![👋](https://twemoji.maxcdn.com/v/latest/svg/1f44b.svg)
+Hello ![👋🏻](https://twemoji.maxcdn.com/v/latest/svg/1f44b-1f3fb.svg)
+Hello ![👋🏼](https://twemoji.maxcdn.com/v/latest/svg/1f44b-1f3fc.svg)
+Hello ![👋🏽](https://twemoji.maxcdn.com/v/latest/svg/1f44b-1f3fd.svg)
+Hello ![👋🏾](https://twemoji.maxcdn.com/v/latest/svg/1f44b-1f3fe.svg)
+Hello ![👋🏿](https://twemoji.maxcdn.com/v/latest/svg/1f44b-1f3ff.svg)

tests/__snapshots__/ReplacerTest__it_can_replace_multi_codepoint_emojis_in_plain_text__1.txt

@@ -0,0 +1,2 @@
+Hello <img src="https://twemoji.maxcdn.com/v/latest/svg/1f44b.svg" alt="👋" width="72" height="72" loading="lazy" class="twemoji" />,
+Emojis are so cool! <img src="https://twemoji.maxcdn.com/v/latest/svg/1f680.svg" alt="🚀" width="72" height="72" loading="lazy" class="twemoji" /><img src="https://twemoji.maxcdn.com/v/latest/svg/1f389.svg" alt="🎉" width="72" height="72" loading="lazy" class="twemoji" />

tests/__snapshots__/TwemojiTest__it_can_replace_emojis_in_plain_text_to_html__1.txt

@@ -0,0 +1,2 @@
+Hello ![👋](https://twemoji.maxcdn.com/v/latest/svg/1f44b.svg),
+Emojis are so cool! ![🚀](https://twemoji.maxcdn.com/v/latest/svg/1f680.svg)![🎉](https://twemoji.maxcdn.com/v/latest/svg/1f389.svg)