Merge pull request #23 from itsrafsanjani/feat/embed-tools-support

[2.x] Add Embed Tools Support
alaminfirdows · Oct 2, 2024 · c9ab70e · c9ab70e
2 parents ea04f1a + 8d963ee
commit c9ab70e
Show file tree

Hide file tree

Showing 6 changed files with 369 additions and 1 deletion.
diff --git a/config/laravel_editorjs.php b/config/laravel_editorjs.php
@@ -141,6 +141,14 @@
             //     ],
             //     'title' => 'string',
             // ]
+            'embed' => [
+                'service' => 'string',
+                'source'  => 'string',
+                'embed'   => 'string',
+                'width'   => 'integer',
+                'height'  => 'integer',
+                'caption' => 'string',
+            ],
         ],
     ],
 ];
diff --git a/resources/views/blocks/embed.blade.php b/resources/views/blocks/embed.blade.php
@@ -0,0 +1,241 @@
+@php
+    $service = $data['service'];
+    $source = $data['source'];
+    $embed = $data['embed'];
+    $width = $data['width'] ?? 580;
+    $height = $data['height'] ?? 320;
+    $caption = $data['caption'] ?? '';
+
+    // Helper function to get service-specific class
+    $getServiceClass = function($baseService) use ($service) {
+        return "editorjs-embed__content--$baseService";
+    };
+@endphp
+
+<div class="editorjs-embed">
+    <div class="editorjs-embed__content {{ $getServiceClass($service) }}">
+        @switch($service)
+            @case('youtube')
+                <iframe
+                    class="editorjs-embed__iframe"
+                    width="{{ $width }}"
+                    height="{{ $height }}"
+                    src="{{ $embed }}"
+                    frameborder="0"
+                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+                    allowfullscreen
+                ></iframe>
+                @break
+
+            @case('facebook')
+                <div class="editorjs-embed__facebook">
+                    <iframe
+                        class="editorjs-embed__iframe"
+                        src="https://www.facebook.com/plugins/post.php?href={{ urlencode($source) }}&width={{ $width }}"
+                        width="{{ $width }}"
+                        height="{{ $height }}"
+                        scrolling="no"
+                        frameborder="0"
+                        allowTransparency="true"
+                        allow="encrypted-media"
+                    ></iframe>
+                </div>
+                @break
+
+            @case('instagram')
+                <div class="editorjs-embed__instagram">
+                    <iframe
+                        class="editorjs-embed__iframe"
+                        src="{{ $embed }}"
+                        width="{{ $width }}"
+                        height="{{ $height }}"
+                        frameborder="0"
+                        scrolling="no"
+                        allowtransparency="true"
+                    ></iframe>
+                </div>
+                @break
+
+            @case('twitter')
+                <div class="editorjs-embed__twitter">
+                    <blockquote class="twitter-tweet">
+                        <a href="{{ $source }}"></a>
+                    </blockquote>
+                    <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
+                </div>
+                @break
+
+            @case('twitch-video')
+                <iframe
+                    class="editorjs-embed__iframe"
+                    src="https://player.twitch.tv/?video={{ $embed }}&parent={{ request()->getHost() }}"
+                    height="{{ $height }}"
+                    width="{{ $width }}"
+                    allowfullscreen
+                ></iframe>
+                @break
+
+            @case('twitch-channel')
+                <iframe
+                    class="editorjs-embed__iframe"
+                    src="https://player.twitch.tv/?channel={{ $embed }}&parent={{ request()->getHost() }}"
+                    height="{{ $height }}"
+                    width="{{ $width }}"
+                    allowfullscreen
+                ></iframe>
+                @break
+
+            @case('miro')
+                <iframe
+                    class="editorjs-embed__iframe"
+                    src="{{ $embed }}"
+                    width="{{ $width }}"
+                    height="{{ $height }}"
+                    frameborder="0"
+                    scrolling="no"
+                    allowfullscreen
+                ></iframe>
+                @break
+
+            @case('vimeo')
+                <iframe
+                    class="editorjs-embed__iframe"
+                    src="https://player.vimeo.com/video/{{ $embed }}"
+                    width="{{ $width }}"
+                    height="{{ $height }}"
+                    frameborder="0"
+                    allow="autoplay; fullscreen; picture-in-picture"
+                    allowfullscreen
+                ></iframe>
+                @break
+
+            @case('gfycat')
+                <iframe
+                    class="editorjs-embed__iframe"
+                    src="{{ $embed }}"
+                    width="{{ $width }}"
+                    height="{{ $height }}"
+                    frameborder="0"
+                    scrolling="no"
+                    allowfullscreen
+                ></iframe>
+                @break
+
+            @case('imgur')
+                <iframe
+                    class="editorjs-embed__iframe"
+                    src="{{ $embed }}/embed"
+                    width="{{ $width }}"
+                    height="{{ $height }}"
+                    frameborder="0"
+                    class="imgur-embed-iframe-pub"
+                    allowfullscreen
+                ></iframe>
+                @break
+
+            @case('vine')
+                <iframe
+                    class="editorjs-embed__iframe editorjs-embed__iframe--vine"
+                    src="{{ $embed }}/embed/simple"
+                    width="{{ $width }}"
+                    height="{{ $height }}"
+                    frameborder="0"
+                ></iframe>
+                @break
+
+            @case('aparat')
+                <div class="editorjs-embed__aparat">
+                    <iframe
+                        class="editorjs-embed__iframe"
+                        src="{{ $embed }}"
+                        width="{{ $width }}"
+                        height="{{ $height }}"
+                        frameborder="0"
+                        allowfullscreen
+                    ></iframe>
+                </div>
+                @break
+
+            @case('yandex-music-track')
+                <iframe
+                    class="editorjs-embed__iframe"
+                    src="{{ $embed }}"
+                    width="{{ $width }}"
+                    height="{{ $height }}"
+                    frameborder="0"
+                ></iframe>
+                @break
+
+            @case('yandex-music-album')
+                <iframe
+                    class="editorjs-embed__iframe"
+                    src="{{ $embed }}"
+                    width="{{ $width }}"
+                    height="{{ $height }}"
+                    frameborder="0"
+                ></iframe>
+                @break
+
+            @case('yandex-music-playlist')
+                <iframe
+                    class="editorjs-embed__iframe"
+                    src="{{ $embed }}"
+                    width="{{ $width }}"
+                    height="{{ $height }}"
+                    frameborder="0"
+                ></iframe>
+                @break
+
+            @case('coub')
+                <iframe
+                    class="editorjs-embed__iframe"
+                    src="{{ $embed }}"
+                    width="{{ $width }}"
+                    height="{{ $height }}"
+                    frameborder="0"
+                    allow="autoplay"
+                ></iframe>
+                @break
+
+            @case('codepen')
+                <iframe
+                    class="editorjs-embed__iframe"
+                    src="{{ $embed }}"
+                    width="{{ $width }}"
+                    height="{{ $height }}"
+                    frameborder="0"
+                    scrolling="no"
+                    allowfullscreen
+                ></iframe>
+                @break
+
+            @case('pinterest')
+                <iframe
+                    class="editorjs-embed__iframe"
+                    src="{{ $embed }}"
+                    width="{{ $width }}"
+                    height="{{ $height }}"
+                    frameborder="0"
+                    scrolling="no"
+                ></iframe>
+                @break
+
+            @case('github')
+                <script src="{{ $source }}"></script>
+                @break
+
+            @default
+                <iframe
+                    class="editorjs-embed__iframe"
+                    src="{{ $embed }}"
+                    width="{{ $width }}"
+                    height="{{ $height }}"
+                    frameborder="0"
+                ></iframe>
+        @endswitch
+    </div>
+
+    @if($caption)
+        <div class="editorjs-embed__caption">{{ $caption }}</div>
+    @endif
+</div>
diff --git a/src/Facades/LaravelEditorJs.php b/src/Facades/LaravelEditorJs.php
@@ -4,10 +4,13 @@
 
 use Illuminate\Support\Facades\Facade;
 
+/**
+ * @see \AlAminFirdows\LaravelEditorJs\LaravelEditorJs
+ */
 class LaravelEditorJs extends Facade
 {
     protected static function getFacadeAccessor()
     {
         return 'laravel-editorjs';
     }
-}
+}
diff --git a/src/LaravelEditorJs.php b/src/LaravelEditorJs.php
@@ -15,6 +15,7 @@ class LaravelEditorJs
      *
      * @param string $data
      * @return string
+     * @throws Exception
      */
     public function render(string $data): string
     {

diff --git a/tests/Feature/Blocks/EmbedBlockTest.php b/tests/Feature/Blocks/EmbedBlockTest.php
@@ -0,0 +1,93 @@
+<?php
+
+namespace AlAminFirdows\LaravelEditorJs\Tests\Feature\Blocks;
+
+use AlAminFirdows\LaravelEditorJs\Tests\TestCase;
+
+class EmbedBlockTest extends TestCase
+{
+    /**
+     * Get Youtube embed block data
+     */
+    protected function getYoutubeBlockData()
+    {
+        return [
+            'type' => 'embed',
+            'data' => [
+                'service' => 'youtube',
+                'source' => 'https://www.youtube.com/watch?v=kBH6HLuAq14',
+                'embed' => 'https://www.youtube.com/embed/kBH6HLuAq14',
+                'width' => 580,
+                'height' => 320,
+                'caption' => 'Test Caption',
+            ],
+        ];
+    }
+
+    /**
+     * Get expected HTML for Youtube embed
+     */
+    protected function getYoutubeBlockHtml()
+    {
+        return '<div class="editorjs-embed"><div class="editorjs-embed__content editorjs-embed__content--youtube"><iframe class="editorjs-embed__iframe" width="580" height="320" src="https://www.youtube.com/embed/kBH6HLuAq14" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div><div class="editorjs-embed__caption">Test Caption</div></div>';
+    }
+
+    /**
+     * Get Twitter embed block data
+     */
+    protected function getTwitterBlockData()
+    {
+        return [
+            'type' => 'embed',
+            'data' => [
+                'service' => 'twitter',
+                'source' => 'https://twitter.com/jack/status/20',
+                'embed' => 'https://twitter.com/jack/status/20',
+                'width' => 580,
+                'height' => 320,
+                'caption' => 'Test Twitter Caption',
+            ],
+        ];
+    }
+
+    /**
+     * Get expected HTML for Twitter embed
+     */
+    protected function getTwitterBlockHtml()
+    {
+        return '<div class="editorjs-embed"><div class="editorjs-embed__content editorjs-embed__content--twitter"><div class="editorjs-embed__twitter"><blockquote class="twitter-tweet"><a href="https://twitter.com/jack/status/20"></a></blockquote><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script></div></div><div class="editorjs-embed__caption">Test Twitter Caption</div></div>';
+    }
+
+    /** @test */
+    public function render_youtube_embed_block_test(): void
+    {
+        $this->assertHtml(
+            $this->renderBlocks($this->getEditorData([$this->getYoutubeBlockData()])),
+            $this->getYoutubeBlockHtml()
+        );
+    }
+
+    /** @test */
+    public function render_twitter_embed_block_test(): void
+    {
+        $this->assertHtml(
+            $this->renderBlocks($this->getEditorData([$this->getTwitterBlockData()])),
+            $this->getTwitterBlockHtml()
+        );
+    }
+
+    /** @test */
+    public function render_embed_block_with_custom_dimensions_test(): void
+    {
+        $blockData = $this->getYoutubeBlockData();
+        $blockData['data']['width'] = 800;
+        $blockData['data']['height'] = 600;
+
+        $expectedHtml = '<div class="editorjs-embed"><div class="editorjs-embed__content editorjs-embed__content--youtube"><iframe class="editorjs-embed__iframe" width="800" height="600" src="https://www.youtube.com/embed/kBH6HLuAq14" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div><div class="editorjs-embed__caption">Test Caption</div></div>';
+
+        $this->assertHtml(
+            $this->renderBlocks($this->getEditorData([$blockData])),
+            $expectedHtml
+        );
+    }
+}