update editorjs image block view and add link endpoint

src/core/Controller/Editor/EditorJsController.php

@@ -0,0 +1,52 @@
+<?php
+
+namespace App\Core\Controller\Editor;
+
+use Fusonic\OpenGraph\Consumer;
+use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
+use Symfony\Component\HttpFoundation\JsonResponse;
+use Symfony\Component\HttpFoundation\Request;
+use Symfony\Component\Routing\Annotation\Route;
+use Symfony\Contracts\HttpClient\HttpClientInterface;
+
+/**
+ * @Route("/admin/editor/editorjs")
+ */
+class EditorJsController extends AbstractController
+{
+    /**
+     * @Route("/fetch_url", name="admin_editor_editorjs_fetch_url", options={"expose"=true})
+     */
+    public function fetchUrl(Request $request, HttpClientInterface $client): JsonResponse
+    {
+        $url = filter_var($request->query->get('url'), FILTER_VALIDATE_URL);
+        $datas = [];
+
+        if (!$url) {
+            $data['success'] = 0;
+        } else {
+            try {
+                $consumer = new Consumer();
+                $response = $client->request('GET', $url);
+                $openGraph = $consumer->loadHtml($response->getContent());
+
+                $data = [
+                    'success' => 1,
+                    'link' => $openGraph->url,
+                    'meta' => [
+                        'title' => $openGraph->title,
+                        'description' => $openGraph->description,
+                    ],
+                ];
+
+                if (isset($openGraph->images[0])) {
+                    $data['meta']['image']['url'] = $openGraph->images[0]->url;
+                }
+            } catch (\Exception $e) {
+                $data['success'] = 0;
+            }
+        }
+
+        return $this->json($data);
+    }
+}

src/core/Resources/assets/js/modules/editorjs.js

@@ -1,11 +1,15 @@
 const $ = require('jquery')
 const EditorJS = require('@editorjs/editorjs')
 const InlineTools = require('editorjs-inline-tool')
+const Routing  = require('../../../../../../../../friendsofsymfony/jsrouting-bundle/Resources/public/js/router.min.js')
+const routes = require('../../../../../../../../../public/js/fos_js_routes.json')
 
 const UnderlineInlineTool = InlineTools.UnderlineInlineTool
 const StrongInlineTool = InlineTools.StrongInlineTool
 const ItalicInlineTool = InlineTools.ItalicInlineTool
 
+Routing.setRoutingData(routes)
+
 const tools = {
   header: {
     class: require('@editorjs/header'),
@@ -41,7 +45,9 @@ const tools = {
   },
   link: {
     class: require('@editorjs/link'),
-    inlineToolbar: true
+    config: {
+      endpoint: Routing.generate('admin_editor_editorjs_fetch_url')
+    }
   },
   table: {
     class: require('@editorjs/table'),
@@ -67,10 +73,6 @@ const tools = {
     class: require('@editorjs/underline'),
     inlineToolbar: true
   },
-  linkAutocomplete: {
-    class: require('@editorjs/link-autocomplete'),
-    inlineToolbar: true
-  },
   image: {
     class: require('../components/editorjs/image-tool.js')
   }

src/core/Resources/views/editorjs/image.html.twig

@@ -1,3 +1,3 @@
 {%- block render -%}
-    <img src="{{ source }}" alt="{{ caption }}">
+    <p><img src="{{ source }}" alt="{{ caption }}"></p>
 {%- endblock -%}

src/core/Resources/views/editorjs/link.html.twig

@@ -0,0 +1,7 @@
+{%- block render -%}
+    <p><a href="{{ link }}">{{- meta.title -}}</a></p>
+
+    {%- if meta.description -%}
+        <p>{{- meta.description -}}</p>
+    {%- endif -%}
+{%- endblock -%}

src/core/Twig/Extension/EditorJsExtension.php

@@ -25,6 +25,7 @@ class EditorJsExtension extends AbstractExtension
         'code',
         'raw',
         'image',
+        'link',
     ];
 
     public function __construct(Environment $twig, ParameterBagInterface $params)