Add a form so shortcodes can be tried out in the "guide" (#31)

This adds a textarea to the example pages shown in the "shortcode
guide", so that users can modify the example code given and preview the
results.

Author: mpdude

composer.json

@@ -11,6 +11,7 @@
         "symfony/config": "^4.4|^5.0|^6.0",
         "symfony/dependency-injection": "^4.4|^5.0|^6.0",
         "symfony/deprecation-contracts": "^2.5|^3.0",
+        "symfony/form": "^4.4|^5.0|^6.0",
         "symfony/http-foundation": "^5.3|^6.0",
         "symfony/http-kernel": "^4.4|^5.0|^6.0",
         "thunderer/shortcode": "^0.6.5|^0.7",

src/Controller/GuideController.php

@@ -2,6 +2,9 @@
 
 namespace Webfactory\ShortcodeBundle\Controller;
 
+use Symfony\Component\Form\Extension\Core\Type\FormType;
+use Symfony\Component\Form\Extension\Core\Type\TextareaType;
+use Symfony\Component\Form\FormFactoryInterface;
 use Symfony\Component\HttpFoundation\Request;
 use Symfony\Component\HttpFoundation\Response;
 use Symfony\Component\HttpKernel\Exception\NotFoundHttpException;
@@ -13,8 +16,6 @@
  */
 final class GuideController
 {
-    private $twig;
-
     /**
      * @var array
      *
@@ -28,34 +29,69 @@ final class GuideController
      */
     private $shortcodeTags;
 
+    /**
+     * @var Environment|Twig_Environment
+     */
+    private $twig;
+
+    /**
+     * @var ?FormFactoryInterface
+     */
+    private $formFactory;
+
     /**
      * @param Twig_Environment|Environment $twig
      */
-    public function __construct(array $shortcodeTags, $twig)
+    public function __construct(array $shortcodeTags, $twig, FormFactoryInterface $formFactory = null)
     {
-        $this->shortcodeTags = $shortcodeTags;
+        $this->shortcodeTags = array_combine(array_map(function (array $definition): string { return $definition['shortcode']; }, $shortcodeTags), $shortcodeTags);
         $this->twig = $twig;
+        $this->formFactory = $formFactory;
     }
 
     public function listAction(): Response
     {
         return new Response($this->twig->render('@WebfactoryShortcode/Guide/list.html.twig', ['shortcodeTags' => $this->shortcodeTags]));
     }
 
-    public function detailAction($shortcode, Request $request): Response
+    public function detailAction(string $shortcode, Request $request): Response
     {
-        foreach ($this->shortcodeTags as $shortcodeTag) {
-            if ($shortcodeTag['shortcode'] === $shortcode) {
-                // if custom parameters are provided, replace the example
-                $customParameters = $request->get('customParameters');
-                if ($customParameters) {
-                    $shortcodeTag['example'] = $shortcode.' '.$customParameters;
-                }
-
-                return new Response($this->twig->render('@WebfactoryShortcode/Guide/detail.html.twig', ['shortcodeTag' => $shortcodeTag]));
+        if (!isset($this->shortcodeTags[$shortcode])) {
+            throw new NotFoundHttpException();
+        }
+
+        $shortcodeTag = $this->shortcodeTags[$shortcode];
+
+        // if custom parameters are provided, replace the example
+        $customParameters = $request->get('customParameters');
+        if ($customParameters) {
+            $shortcodeTag['example'] = $shortcode.' '.$customParameters;
+        }
+
+        $example = '['.($shortcodeTag['example'] ?? $shortcode).']';
+
+        if ($this->formFactory) {
+            $formBuilder = $this->formFactory->createBuilder(FormType::class, ['example' => $example], ['method' => 'GET']);
+            $formBuilder->add('example', TextareaType::class);
+            $form = $formBuilder->getForm();
+
+            $form->handleRequest($request);
+
+            if ($form->isSubmitted()) {
+                $example = $form->getData()['example'];
             }
+        } else {
+            $form = null;
         }
 
-        throw new NotFoundHttpException();
+        return new Response(
+            $this->twig->render(
+                '@WebfactoryShortcode/Guide/detail.html.twig', [
+                    'shortcodeTag' => $shortcodeTag,
+                    'example' => $example,
+                    'form' => $form ? $form->createView() : null,
+                ]
+            )
+        );
     }
 }

src/Resources/views/Guide/detail.html.twig

@@ -5,7 +5,8 @@
 {% endblock %}
 
 {% block content %}
-    <h1>Shortcode {{ shortcodeTag.shortcode }}</h1>
+    <h1>Shortcode preview</h1>
+    <p><b><tt>[{{ shortcodeTag.shortcode }}]</tt></b></p>
     <p>
         {% if shortcodeTag.description is defined %}
             {{ shortcodeTag.description }}
@@ -14,17 +15,24 @@
         {% endif %}
     </p>
 
-    <h2>Example</h2>
-    {% if shortcodeTag.example is defined %}
-        <p>[{{ shortcodeTag.example }}] becomes:</p>
-        <div id="rendered-example">
-            {{ ('[' ~ shortcodeTag.example ~ ']') |shortcodes }}
-        </div>
+    <p>
+        <a href="{{ path('webfactory.shortcode.guide-list') }}">Back to the shortcodes list</a>
+    </p>
+
+    {% if form %}
+        {{ form_start(form) }}
+        {{ form_widget(form) }}
+        <input type="submit" value="Show example" />
+        {{ form_end(form) }}
+    {% elseif shortcodeTag.example is defined %}
+        <p>Example code: {{ example }}</p>
     {% else %}
         <p>No example configured.</p>
     {% endif %}
 
-    <p>
-        <a href="{{ path('webfactory.shortcode.guide-list') }}">Back to the shortcodes list</a>
-    </p>
+    {% if shortcodeTag.example is defined %}
+        <div id="rendered-example">
+            {{ example|shortcodes }}
+        </div>
+    {% endif %}
 {% endblock %}

src/Resources/views/Guide/list.html.twig

@@ -26,14 +26,14 @@
                             {% if shortcodeTag.description is defined %}
                                 {{ shortcodeTag.description }}
                             {% else %}
-                                No description configured
+                                No description available
                             {% endif %}
                         </td>
                         <td>
                             {% if shortcodeTag.example is defined %}
                                 [{{ shortcodeTag.example }}]
                             {% else %}
-                                No example configured
+                                No example available
                             {% endif %}
                         </td>
                     </tr>
@@ -42,6 +42,6 @@
         </table>
     {% else %}
         <p>No shortcodes configured.</p>
-        <p>See the <a href="https://github.com/webfactory/WebfactoryShortcodeBundle/blob/master/README.md">README.md of the WebfactoryShortcodeBundle</a> to configure some.</p>
+        <p>See the <a href="https://github.com/webfactory/WebfactoryShortcodeBundle/blob/master/README.md">WebfactoryShortcodeBundle README.md</a> on how to configure this documentation.</p>
     {% endif %}
 {% endblock %}