Add basic language selector

assets/sass/_demo.scss

@@ -43,3 +43,17 @@
 .demo__time-split--formatting {
   background: darken($color-accent, 20%);
 }
+
+.demo__languages {
+  display: flex;
+  padding: 0;
+  flex-wrap: wrap;
+  margin-bottom: -.5rem;
+  margin-right: -.5rem;
+
+  li {
+    list-style: none;
+    margin-right: .5rem;
+    margin-bottom: .5rem;
+  }
+}

assets/ts/app.ts

@@ -4,7 +4,7 @@ import 'bootstrap'
 import '@fortawesome/fontawesome-pro/css/all.min.css'
 import 'typeface-raleway'
 import '../sass/style.scss'
-import './try-form'
+import './demo'
 
 $('[data-toggle="tooltip"]').tooltip();
 

assets/ts/demo.tsx

@@ -1,9 +1,38 @@
 import * as React from "react";
 import { useState } from "react";
 import * as ReactDOM from "react-dom"
+import { useFetch } from "react-async";
 
 const formatter = new Intl.NumberFormat(undefined, { maximumFractionDigits: 2 });
 
+type Language = {
+    name: string;
+    class: string;
+    embeddable: boolean;
+    standalone: boolean;
+}
+
+type LanguageSelectorProps = {
+    language: string;
+    onSelect(language: Language): void;
+}
+
+const LanguageSelector = ({ language, onSelect }: LanguageSelectorProps) => {
+    const { data: languages, isPending } = useFetch<Language[]>("/languages", { headers: { "Accept": "application/json" }});
+
+    const regex    = language && new RegExp(`${language}`);
+    const matching = languages && languages.filter(current => !language || current.name.match(regex));
+    const isValidLanguage = languages && typeof languages.find(current => current.name === language) !== "undefined";
+
+    return isPending ? null : <ul className="demo__languages">
+        { (isValidLanguage ? languages : matching).map(language => <li key={ language.name }>
+            <button type="button" className="btn btn-outline-primary btn-sm" onClick={ () => onSelect(language) }>
+                { language.name }
+            </button>
+        </li>) }
+    </ul>
+};
+
 type HighlightFormProps = {
     onSubmit(code: string, language: string);
 }
@@ -19,6 +48,8 @@ const HighlightForm = ({ onSubmit }: HighlightFormProps) => {
 
     const handleSubmit = () => onSubmit && onSubmit(code, language);
 
+    const handleLanguageSelection = language => setLanguage(language.name);
+
     return (
         <form className="demo__form">
             <div className="form-group">
@@ -42,8 +73,7 @@ const HighlightForm = ({ onSubmit }: HighlightFormProps) => {
                 </div>
             </div>
             <div className="form-group">
-                <div id="language-selector" className="standalone languages">
+                <LanguageSelector language={ language } onSelect={ handleLanguageSelection }/>
-                </div>
             </div>
             <div className="demo__actions">
                 <button type="button" className="btn btn-sm btn-outline-danger" onClick={ handleReset }>

config/packages/twig.yaml

@@ -2,4 +2,3 @@ twig:
   default_path: '%kernel.project_dir%/templates'
   globals:
     versioner: '@twig.versioner'
-    keylighter: '@twig.keylighter'

config/services.yaml

@@ -61,7 +61,6 @@ services:
     League\CommonMark\HtmlRenderer: ~
 
     twig.versioner: '@App\Service\KeyLighterVersioner'
-    twig.keylighter: '@App\Twig\KeyLighterTwigAccess'
 
     # controllers are imported separately to make sure they're public
     # and have a tag that allows actions to type-hint services

package.json

@@ -31,5 +31,7 @@
         "watch": "encore dev --watch",
         "build": "encore production --progress"
     },
-    "dependencies": {}
+    "dependencies": {
+        "react-async": "^10.0.1"
+    }
 }

src/Controller/LanguagesAction.php

@@ -0,0 +1,59 @@
+<?php
+
+namespace App\Controller;
+
+use App\Service\KeyLighterVersioner;
+use Kadet\Highlighter\KeyLighter;
+use Symfony\Component\HttpFoundation\JsonResponse;
+use Symfony\Component\Routing\Annotation\Route;
+
+class LanguagesAction
+{
+    private $keylighter;
+    private $versioner;
+
+    public function __construct(KeyLighter $keylighter, KeyLighterVersioner $versioner)
+    {
+        $this->keylighter = $keylighter;
+        $this->versioner  = $versioner;
+    }
+
+    /**
+     * @Route("/languages", name="ajax_languages", methods={"GET"})
+     */
+    public function __invoke()
+    {
+        return new JsonResponse($this->getLanguages()->values()->all());
+    }
+
+    private function getLanguages()
+    {
+        switch (true) {
+            case version_compare(KeyLighter::VERSION, '0.9-dev', '>='):
+                $languages = require $this->versioner->getCurrentDir() . '/Config/metadata.php';
+
+                return collect($languages)->flatMap(function ($metadata) {
+                    return collect($metadata['name'])->map(function ($name) use ($metadata) {
+                        return [
+                            'class' => $metadata[0],
+                            'name' => $name,
+                            'standalone' => $metadata['standalone'],
+                            'embeddable' => $metadata['injectable'],
+                        ];
+                    });
+                });
+
+            default:
+                $languages = collect($this->keylighter->registeredLanguages('name', true));
+
+                return $languages->map(function ($class, $language) {
+                    return [
+                        'name'       => $language,
+                        'class'      => $class,
+                        'standalone' => true,
+                        'embeddable' => true,
+                    ];
+                });
+        }
+    }
+}

src/Twig/KeyLighterTwigAccess.php

@@ -1,53 +0,0 @@
-<?php
-
-
-namespace App\Twig;
-
-
-use App\Service\KeyLighterVersioner;
-use Kadet\Highlighter\KeyLighter;
-use Tightenco\Collect\Support\Collection;
-
-class KeyLighterTwigAccess
-{
-    private $keylighter;
-    private $versioner;
-
-    public function __construct(KeyLighter $keylighter, KeyLighterVersioner $versioner)
-    {
-        $this->keylighter = $keylighter;
-        $this->versioner  = $versioner;
-    }
-
-    public function getLanguages()
-    {
-        switch (true) {
-            case version_compare(KeyLighter::VERSION, '0.9.0', '>'):
-                $languages = require $this->versioner->getCurrentDir().'/Config/metadata.php';
-                $languages = collect($languages);
-
-                $languages = $languages->reduce(function (Collection $collection, $language) {
-                    return $collection->merge(array_fill_keys($language['name'], [
-                        'class'      => $language[0],
-                        'standalone' => $language['standalone'],
-                        'embeddable' => $language['injectable']
-                    ]));
-                }, collect());
-
-                return $languages;
-
-            default:
-                $languages = collect($this->keylighter->registeredLanguages('name', true));
-
-                return $languages->mapWithKeys(function ($class, $language) {
-                    return [
-                        $language => [
-                            'class'      => $class,
-                            'standalone' => true,
-                            'embeddable' => true,
-                        ]
-                    ];
-                });
-        }
-    }
-}

templates/keylighter.html.twig

@@ -24,9 +24,6 @@
 
                 <div class="collapse navbar-collapse right" id="navbarSupportedContent">
                     <ul class="navbar-nav ml-auto">
-                        <li class="nav-item {% if showForm %}visible active{% endif %}" data-toggle="form" data-id="try-form" id="form-toggle">
-                            <a href="#try-form" class="nav-link slim"><i class="{{ fa('chevron-down', 'solid') }}"></i></a>
-                        </li>
                         {{ helper.menu_entry('https://github.com/kadet1090/keylighter', 'GitHub', fa('github', 'brand'), current == 'github') }}
                         {{ helper.menu_entry(url('changelog'), 'Changelog', fa('history'), current == 'changelog') }}
                         {{ helper.menu_entry(url('documentation_show'), 'Docs', fa('book'), current == 'docs') }}

yarn.lock

@@ -5626,6 +5626,11 @@ raw-body@2.4.0:
     iconv-lite "0.4.24"
     unpipe "1.0.0"
 
+react-async@^10.0.1:
+  version "10.0.1"
+  resolved "https://registry.yarnpkg.com/react-async/-/react-async-10.0.1.tgz#575c083f808303d2f6ca52d11ec7554dbdbd9fcd"
+  integrity sha512-ORUz5ca0B57QgBIzEZM5SuhJ6xFjkvEEs0gylLNlWf06vuVcLZsjIw3wx58jJkZG38p+0nUAxRgFW2b7mnVZzA==
+
 react-dom@^16.13.1:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.13.1.tgz#c1bd37331a0486c078ee54c4740720993b2e0e7f"