Merge pull request #21 from bolt/updates-updates-updates

Redactor 3.5.0 update, Image picker, link-to-content picker, image alignment

config/config.yaml

@@ -1,12 +1,37 @@
-# Settings for Bolt Redactor
+# Settings for the Bolt Redactor field
 
-# All options: html, format, bold, italic, deleted, lists, link, file, line, redo, undo, underline, ol, ul, indent, outdent, sup, sub
+# Options added here, will be used in the Bolt backend to configure Redactor, passed in as
+# parameters to the `$R('#content', { … })` call.
+# See vendor/bolt/redactor/src/RedactorConfig.php::getDefaults for the default values. The values
+# below will be merged or appended with those values.
 default:
-  buttons: [ bold, italic, format, lists, link, html, image ]
-  plugins: [ fullscreen, table, inlinestyle, video, widget ]
-  source: true
+  # All options for buttons: html, format, bold, italic, deleted, lists, link, file, line, redo,
+  # undo, underline, ol, ul, indent, outdent, sup, sub
+  buttons: [ format, bold, italic, lists, link, html, image ]
+
+  # See https://imperavi.com/redactor/plugins/ for available plugins
+  # Common items include video, widget, counter, clips, imagemanager, definedlinks
+  plugins: [ fullscreen, table, video, imagemanager, definedlinks]
+
+  # Set this to false to hide the button to toggle showing the HTML source of the field. Setting it
+  # to plain `true` will override Redactor using the CodeMirror component, and it will show a plain
+  # source code editor instead.
+  # source: false
+
+  # By default, pressing the Enter key will start a new `<p>` paragraph. Set `breakline` to false
+  # to insert a `<br>` tag instead.
+  breakline: false
+
+  # Settings for images
   image:
     thumbnail: 1000×1000×max
+  imageResizable: false
+  imagePosition: true
+
+  # The tags to show in the 'Formatting' drop-down menu. Note: Block-level tags only!
+  # Use the `inlinestyles` plugin for inline tags
+  formatting: ['p', 'blockquote', 'pre', 'h2', 'h3', 'h4', 'h5']
 
-plugins:
-  ~
+# If you have added custom plugins, add them to the mapping below.
+# plugins:
+#   myplugin: ['/assets/myplugin/myplugin.min.js', '/assets/myplugin/myplugin.min.css']

config/services.yaml

@@ -4,6 +4,9 @@ services:
         autowire: true
         autoconfigure: true
 
+    Bolt\Redactor\Controller\Images:
+        tags: ['controller.service_arguments']
+
     Bolt\Redactor\Controller\Upload:
         tags: ['controller.service_arguments']
 

src/Controller/Images.php

@@ -0,0 +1,148 @@
+<?php
+
+declare(strict_types=1);
+
+namespace Bolt\Redactor\Controller;
+
+use Bolt\Configuration\Config;
+use Bolt\Controller\Backend\Async\AsyncZoneInterface;
+use Bolt\Controller\CsrfTrait;
+use Bolt\Redactor\RedactorConfig;
+use Bolt\Twig\TextExtension;
+use Bolt\Utils\ThumbnailHelper;
+use Sensio\Bundle\FrameworkExtraBundle\Configuration\Security;
+use Symfony\Component\Finder\Finder;
+use Symfony\Component\HttpFoundation\JsonResponse;
+use Symfony\Component\HttpFoundation\Request;
+use Symfony\Component\HttpFoundation\RequestStack;
+use Symfony\Component\HttpFoundation\Response;
+use Symfony\Component\Routing\Annotation\Route;
+use Symfony\Component\Routing\Generator\UrlGeneratorInterface;
+use Symfony\Component\Security\Core\Exception\InvalidCsrfTokenException;
+use Symfony\Component\Security\Csrf\CsrfTokenManagerInterface;
+use Tightenco\Collect\Support\Collection;
+
+/**
+ * @Security("is_granted('ROLE_ADMIN')")
+ */
+class Images implements AsyncZoneInterface
+{
+    use CsrfTrait;
+
+    /** @var Config */
+    private $config;
+
+    /** @var Request */
+    private $request;
+
+    /** @var ThumbnailHelper */
+    private $thumbnailHelper;
+
+    /** @var redactorConfig */
+    private $redactorConfig;
+
+    public function __construct(Config $config, CsrfTokenManagerInterface $csrfTokenManager, RequestStack $requestStack, UrlGeneratorInterface $urlGenerator, ThumbnailHelper $thumbnailHelper, RedactorConfig $redactorConfig)
+    {
+        $this->config = $config;
+        $this->csrfTokenManager = $csrfTokenManager;
+        $this->request = $requestStack->getCurrentRequest();
+        $this->thumbnailHelper = $thumbnailHelper;
+        $this->redactorConfig = $redactorConfig;
+    }
+
+    /**
+     * @Route("/redactor_images", name="bolt_redactor_images", methods={"GET"})
+     */
+    public function getImagesList(Request $request): JsonResponse
+    {
+        try {
+            $this->validateCsrf('bolt_redactor');
+        } catch (InvalidCsrfTokenException $e) {
+            return new JsonResponse([
+                'error' => true,
+                'message' => 'Invalid CSRF token',
+            ], Response::HTTP_FORBIDDEN);
+        }
+
+        $locationName = $this->request->query->get('location', 'files');
+        $type = $this->request->query->get('type', '');
+
+        $path = $this->config->getPath($locationName, true);
+
+        $files = $this->getImageFilesIndex($path, $type);
+
+        return new JsonResponse($files);
+    }
+
+    private function getImageFilesIndex(string $path, string $type): Collection
+    {
+        $glob = '*.{' . implode(',', $this->config->getMediaTypes()->toArray()) . '}';
+
+        $files = [];
+
+        foreach ($this->findFiles($path, $glob) as $file) {
+            $files[] = [
+                'thumb' => $this->thumbnailHelper->path($file->getRelativePathname(), 400, 300, null, null, 'crop'),
+                'url' => $thumbnail = '/thumbs/' . $this->redactorConfig->getConfig()['image']['thumbnail'] . '/' . $file->getRelativePathname(),
+            ];
+        }
+
+        return new Collection($files);
+    }
+
+    /**
+     * @Route("/redactor_files", name="bolt_redactor_files", methods={"GET"})
+     */
+    public function getFilesList(Request $request): JsonResponse
+    {
+        try {
+            $this->validateCsrf('bolt_redactor');
+        } catch (InvalidCsrfTokenException $e) {
+            return new JsonResponse([
+                'error' => true,
+                'message' => 'Invalid CSRF token',
+            ], Response::HTTP_FORBIDDEN);
+        }
+
+        $locationName = $this->request->query->get('location', 'files');
+        $type = $this->request->query->get('type', '');
+
+        $path = $this->config->getPath($locationName, true);
+
+        $files = $this->getFilesIndex($path, $type);
+
+        return new JsonResponse($files);
+    }
+
+    private function getFilesIndex(string $path, string $type): Collection
+    {
+        $fileTypes = $this->config->getFileTypes()->toArray();
+        $glob = '*.{' . implode(',', $fileTypes) . '}';
+
+        $files = [];
+
+        $textExtenion = new TextExtension();
+
+        foreach ($this->findFiles($path, $glob) as $file) {
+            $files[] = [
+                'title' => $file->getRelativePathname(),
+                'url' => '/files/' . $file->getRelativePathname(),
+                'size' => $textExtenion->formatBytes($file->getSize(), 1),
+            ];
+        }
+
+        return new Collection($files);
+    }
+
+    private function findFiles(string $path, ?string $glob = null): Finder
+    {
+        $finder = new Finder();
+        $finder->in($path)->depth('< 3')->sortByType()->files();
+
+        if ($glob) {
+            $finder->name($glob);
+        }
+
+        return $finder;
+    }
+}

src/RedactorConfig.php

@@ -94,11 +94,16 @@ public function getDefaults()
                 'thumbnail' => '1000×1000×max',
             ],
             'imageUpload' => $this->urlGenerator->generate('bolt_redactor_upload', ['location' => 'files']),
+            'imageManagerJson' => $this->urlGenerator->generate('bolt_redactor_images', [
+                '_csrf_token' => $this->csrfTokenManager->getToken('bolt_redactor')->getValue(),
+                'foo' => '1', // To ensure token is cut off correctly
+            ]),
             'imageUploadParam' => 'file',
             'multipleUpload' => 'false',
             'imageData' => [
                 '_csrf_token' => $this->csrfTokenManager->getToken('bolt_redactor')->getValue(),
             ],
+
             'minHeight' => '200px',
             'maxHeight' => '700px',
             'structure' => true,
@@ -143,7 +148,7 @@ public function getDefaultPlugins()
 
     private function getLinks(): array
     {
-        return $this->cache->get('editor_insert_links', function (ItemInterface $item) {
+        return $this->cache->get('redactor_insert_links', function (ItemInterface $item) {
             $item->expiresAfter(self::CACHE_DURATION);
 
             return $this->getLinksHelper();

src/TwigExtension.php

@@ -35,7 +35,7 @@ public function redactorSettings(): string
     {
         $settings = $this->redactorConfig->getConfig();
 
-        return Json::json_encode($settings, JSON_HEX_QUOT | JSON_HEX_APOS);
+        return Json::json_encode($settings, JSON_HEX_QUOT | JSON_HEX_APOS | JSON_PRETTY_PRINT);
     }
 
     public function redactorIncludes(): string

templates/injector.html.twig

@@ -40,7 +40,7 @@
     }
 
     .redactor-styles img {
-        max-width: 50%;
+        max-width: 75%;
     }
 
     .redactor-styles blockquote {