Fix snip edit form

(remove code blocks, made obsolete by markdown)

composer.json

@@ -14,6 +14,7 @@
         "league/pipeline": "^1.0",
         "phpdocumentor/reflection-docblock": "^5.6",
         "phpstan/phpdoc-parser": "^2.1",
+        "symfony/asset": "7.2.*",
         "symfony/console": "*",
         "symfony/dotenv": "*",
         "symfony/flex": "^2",
@@ -29,6 +30,7 @@
         "symfony/uid": "*",
         "symfony/validator": "*",
         "symfony/yaml": "*",
+        "tempest/highlight": "^2.11",
         "twig/extra-bundle": "^2.12|^3.0",
         "twig/twig": "^3.0"
     },

composer.lock

@@ -4,7 +4,7 @@
         "Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies",
         "This file is @generated automatically"
     ],
-    "content-hash": "638cbc9841226f386ba27215e24c5410",
+    "content-hash": "6bdfa9b2a81e0169ca083ef4d344b876",
     "packages": [
         {
             "name": "dflydev/dot-access-data",
@@ -2370,6 +2370,75 @@
             },
             "time": "2024-09-11T13:17:53+00:00"
         },
+        {
+            "name": "symfony/asset",
+            "version": "v7.2.0",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/symfony/asset.git",
+                "reference": "cb926cd59fefa1f9b4900b3695f0f846797ba5c0"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/symfony/asset/zipball/cb926cd59fefa1f9b4900b3695f0f846797ba5c0",
+                "reference": "cb926cd59fefa1f9b4900b3695f0f846797ba5c0",
+                "shasum": ""
+            },
+            "require": {
+                "php": ">=8.2"
+            },
+            "conflict": {
+                "symfony/http-foundation": "<6.4"
+            },
+            "require-dev": {
+                "symfony/http-client": "^6.4|^7.0",
+                "symfony/http-foundation": "^6.4|^7.0",
+                "symfony/http-kernel": "^6.4|^7.0"
+            },
+            "type": "library",
+            "autoload": {
+                "psr-4": {
+                    "Symfony\\Component\\Asset\\": ""
+                },
+                "exclude-from-classmap": [
+                    "/Tests/"
+                ]
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Fabien Potencier",
+                    "email": "fabien@symfony.com"
+                },
+                {
+                    "name": "Symfony Community",
+                    "homepage": "https://symfony.com/contributors"
+                }
+            ],
+            "description": "Manages URL generation and versioning of web assets such as CSS stylesheets, JavaScript files and image files",
+            "homepage": "https://symfony.com",
+            "support": {
+                "source": "https://github.com/symfony/asset/tree/v7.2.0"
+            },
+            "funding": [
+                {
+                    "url": "https://symfony.com/sponsor",
+                    "type": "custom"
+                },
+                {
+                    "url": "https://github.com/fabpot",
+                    "type": "github"
+                },
+                {
+                    "url": "https://tidelift.com/funding/github/packagist/symfony/symfony",
+                    "type": "tidelift"
+                }
+            ],
+            "time": "2024-10-25T15:15:23+00:00"
+        },
         {
             "name": "symfony/cache",
             "version": "v7.2.6",
@@ -6436,6 +6505,64 @@
             ],
             "time": "2025-04-04T10:10:11+00:00"
         },
+        {
+            "name": "tempest/highlight",
+            "version": "2.11.4",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/tempestphp/highlight.git",
+                "reference": "5a239a92ad6bd3e506ca86a0de3e99ac9dbcb0dd"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/tempestphp/highlight/zipball/5a239a92ad6bd3e506ca86a0de3e99ac9dbcb0dd",
+                "reference": "5a239a92ad6bd3e506ca86a0de3e99ac9dbcb0dd",
+                "shasum": ""
+            },
+            "require": {
+                "php": "^8.3"
+            },
+            "require-dev": {
+                "assertchris/ellison": "^1.0.2",
+                "friendsofphp/php-cs-fixer": "^3.21",
+                "league/commonmark": "^2.4",
+                "phpstan/phpstan": "^1.10.0",
+                "phpunit/phpunit": "^10.0",
+                "symfony/var-dumper": "^6.4|^7.0"
+            },
+            "suggest": {
+                "assertchris/ellison": "Allows you to analyse sentence complexity",
+                "league/commonmark": "Adds markdown support"
+            },
+            "type": "library",
+            "autoload": {
+                "psr-4": {
+                    "Tempest\\Highlight\\": "src/"
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Brent Roose",
+                    "email": "brendt@stitcher.io"
+                }
+            ],
+            "description": "Fast, extensible, server-side code highlighting",
+            "support": {
+                "issues": "https://github.com/tempestphp/highlight/issues",
+                "source": "https://github.com/tempestphp/highlight/tree/2.11.4"
+            },
+            "funding": [
+                {
+                    "url": "https://github.com/brendt",
+                    "type": "github"
+                }
+            ],
+            "time": "2025-03-19T05:38:35+00:00"
+        },
         {
             "name": "twig/extra-bundle",
             "version": "v3.21.0",

public/github-light-default.css

@@ -0,0 +1,87 @@
+pre, code {
+    color: #1f2328;
+    background-color: #ffffff;
+}
+
+.hl-keyword {
+    color: #cf222e;
+}
+
+.hl-property {
+    color: #8250df;
+}
+
+.hl-attribute {
+    font-style: italic;
+}
+
+.hl-type {
+    color: #EA4334;
+}
+
+.hl-generic {
+    color: #9d3af6;
+}
+
+.hl-value {
+    color: #0a3069;
+}
+
+.hl-literal {
+    color: #0a3069;
+}
+
+.hl-number {
+    color: #0a3069;
+}
+
+.hl-variable {
+    color: #953800;
+}
+
+.hl-comment {
+    color: #6e7781;
+}
+
+.hl-blur {
+    filter: blur(2px);
+}
+
+.hl-strong {
+    font-weight: bold;
+}
+
+.hl-em {
+    font-style: italic;
+}
+
+.hl-addition {
+    display: inline-block;
+    min-width: 100%;
+    background-color: #00FF0022;
+}
+
+.hl-deletion {
+    display: inline-block;
+    min-width: 100%;
+    background-color: #FF000011;
+}
+
+.hl-gutter {
+    display: inline-block;
+    font-size: 0.9em;
+    color: #555;
+    padding: 0 1ch;
+    margin-right: 1ch;
+    user-select: none;
+}
+
+.hl-gutter-addition {
+    background-color: #34A853;
+    color: #fff;
+}
+
+.hl-gutter-deletion {
+    background-color: #EA4334;
+    color: #fff;
+}

src/Controller/SnipController.php

@@ -22,7 +22,8 @@ class SnipController extends AbstractController
 {
     public function __construct(
         private readonly SnipRepository $repository,
-    ) {}
+    ) {
+    }
 
     #[Route('/', name: '_index')]
     public function index(#[MapQueryCached] SnipFilterRequest $request): Response
@@ -66,8 +67,7 @@ class SnipController extends AbstractController
             ->setVary(['Accept', 'Accept-Encoding'])
             ->setEtag(md5($response->getContent()))
             ->setTtl(3600)
-            ->setClientTtl(300)
+            ->setClientTtl(300);
-        ;
 
         if (!$request->isNoCache()) {
             $response->isNotModified($request);
@@ -90,11 +90,9 @@ class SnipController extends AbstractController
             $this->addFlash('error', 'Snip is not the latest version, changes will not be saved.');
         }
 
-        $form = $this->createForm(SnipType::class, $snip);
+        $form = $this->createForm(SnipType::class, $snip)
-        $form->add('Save', SubmitType::class);
+            ->add('Save', SubmitType::class);
-        if ($snip->getId()) {
         $form->get('content')->setData($snip->getActiveText());
-        }
 
         $form->handleRequest($request);
         if ($form->isSubmitted() && $form->isValid()) {
@@ -128,10 +126,31 @@ class SnipController extends AbstractController
     {
         $snip = new Snip();
         $snip->setCreatedAtNow()
-             ->setCreatedBy($this->getUser())
+            ->setCreatedBy($this->getUser());
-        ;
 
-        return $this->edit($snip, $request, $contentService);
+        $form = $this->createForm(SnipType::class, $snip);
+        $form->add('Create', SubmitType::class);
+
+        $form->handleRequest($request);
+        if ($form->isSubmitted() && $form->isValid()) {
+            $this->repository->save($snip);
+            $contentService->update(
+                $snip,
+                $form->get('content')->getData(),
+                $form->get('contentName')->getData()
+            );
+
+            $this->addFlash('success', sprintf('Snip "%s" created', $snip));
+
+            return $this->redirectToRoute('snip_single', [
+                'snip' => $snip->getId(),
+            ]);
+        }
+
+        return $this->render('snip/create.html.twig', [
+            'snip' => $snip,
+            'form' => $form->createView(),
+        ]);
     }
 
     #[Route('/delete/{snip}', name: '_delete')]

src/Service/SnipParser/AbstractParser.php

@@ -20,7 +20,7 @@ abstract class AbstractParser implements ParserInterface
         try {
             return $this->safeParseView($content);
         } catch (\Exception $exception) {
-            return sprintf('<pre><code class="hljs">%s</code></pre>', htmlspecialchars($exception->getMessage()));
+            return sprintf('<pre><code>%s</code></pre>', htmlspecialchars($exception->getMessage()));
         }
     }
 

src/Service/SnipParser/Generic/GenericParser.php

@@ -17,9 +17,9 @@ class GenericParser extends AbstractParser
         $builder = new PipelineBuilder();
         $pipeline = $builder
             ->add(new HtmlEscapeStage())
+//            ->add(new ReplaceBlocksStage('<pre>', '</pre>', '```'))
+//            ->add(new ReplaceBlocksStage('<code>', '</code>', '``'))
             ->add(new ReplaceStage(PHP_EOL, '<br>'))
-            ->add(new ReplaceBlocksStage('<pre><code class="hljs">', '</code></pre>', '```'))
-            ->add(new ReplaceBlocksStage('<code class="hljs">', '</code>', '``'))
             ->add($this->referenceStage)
             ->add($this->includeStage)
             ->build()
@@ -27,13 +27,4 @@ class GenericParser extends AbstractParser
 
         return $pipeline->process($content);
     }
-
-    public function parseRaw(string $content): string
-    {
-        return str_replace(
-            ['```', '``'],
-            '',
-            $content
-        );
-    }
 }

src/Service/SnipParser/Generic/ReplaceBlocksStage.php

@@ -4,13 +4,14 @@ namespace App\Service\SnipParser\Generic;
 
 use InvalidArgumentException;
 use League\Pipeline\StageInterface;
+use Tempest\Highlight\Highlighter;
 
-class ReplaceBlocksStage implements StageInterface
+readonly class ReplaceBlocksStage implements StageInterface
 {
     public function __construct(
-        public readonly string $openTag = '<pre><code>',
+        public string $openTag = '<pre><code>',
-        public readonly string $closeTag = '</code></pre>',
+        public string $closeTag = '</code></pre>',
-        public readonly string $delimiter = '```'
+        public string $delimiter = '```'
     ) {}
 
     public function __invoke(mixed $payload): string
@@ -26,8 +27,9 @@ class ReplaceBlocksStage implements StageInterface
     {
         $pattern = sprintf('/%s(.+?)%s/s', preg_quote($this->delimiter), preg_quote($this->delimiter));
 
-        return preg_replace_callback($pattern, function ($matches) {
+        $highlighter = new Highlighter()->withGutter();
-            return $this->openTag . trim($matches[1]) . $this->closeTag;
+        return preg_replace_callback($pattern, function ($matches) use ($highlighter) {
+            return $this->openTag . $highlighter->parse(trim($matches[1]), 'php') . $this->closeTag;
         }, $text);
     }
 }

src/Service/SnipParser/Html/HtmlParser.php

@@ -3,11 +3,14 @@
 namespace App\Service\SnipParser\Html;
 
 use App\Service\SnipParser\AbstractParser;
+use Tempest\Highlight\Highlighter;
 
 class HtmlParser extends AbstractParser
 {
     public function safeParseView(string $content): string
     {
-        return sprintf('<pre><code class="hljs">%s</code></pre>', htmlspecialchars($content));
+        $highlighter = new Highlighter()->withGutter();
+
+        return '<pre data-lang="html" class="notranslate">' . $highlighter->parse($content, 'html') . '</pre>';
     }
 }

src/Service/SnipParser/Markdown/MarkdownParser.php

@@ -6,11 +6,16 @@ use App\Repository\SnipRepository;
 use App\Service\SnipParser\AbstractParser;
 use League\CommonMark\Event\DocumentParsedEvent;
 use League\CommonMark\Extension\CommonMark\Node\Inline\Link;
+use League\CommonMark\Extension\DefaultAttributes\DefaultAttributesExtension;
+use League\CommonMark\Extension\Footnote\FootnoteExtension;
+use League\CommonMark\Extension\Table\Table;
 use League\CommonMark\GithubFlavoredMarkdownConverter;
 use League\CommonMark\Node\Inline\Text;
 use League\CommonMark\Node\Query;
 use Symfony\Component\DependencyInjection\Attribute\Autowire;
 use Symfony\Component\Routing\RouterInterface;
+use Tempest\Highlight\CommonMark\HighlightExtension;
+use Tempest\Highlight\Highlighter;
 
 class MarkdownParser extends AbstractParser
 {
@@ -21,8 +26,25 @@ class MarkdownParser extends AbstractParser
 
     public function safeParseView(string $content): string
     {
-        $converter = new GithubFlavoredMarkdownConverter();
+        $config = [
-        $converter->getEnvironment()->addEventListener(DocumentParsedEvent::class, $this->documentParsed(...));
+            'default_attributes' => [
+                Table::class => [
+                    'class' => 'table table-hover',
+                ],
+                Link::class => [
+                    'class' => 'btn btn-sm btn-secondary',
+                ],
+            ],
+        ];
+
+        $converter = new GithubFlavoredMarkdownConverter($config);
+        $converter
+            ->getEnvironment()
+            ->addExtension(new HighlightExtension(new Highlighter()->withGutter()))
+            ->addExtension(new FootnoteExtension())
+            ->addExtension(new DefaultAttributesExtension())
+            ->addEventListener(DocumentParsedEvent::class, $this->documentParsed(...))
+        ;
         return $converter->convert($content);
     }
 
@@ -32,11 +54,17 @@ class MarkdownParser extends AbstractParser
 
         $linkNodes = new Query()
             ->where(Query::type(Link::class))
-            ->findAll($document);
+            ->findAll($document)
+        ;
 
+        /** @var Link $linkNode */
         foreach ($linkNodes as $linkNode) {
             $url = $linkNode->getUrl();
 
+            if (!is_numeric($url)) {
+                continue;
+            }
+
             $snip = $this->snipRepo->find($url);
             if ($snip === null) {
                 continue;

templates/snip/base.html.twig

@@ -54,21 +54,3 @@
         </div>
     </div>
 {% endblock %}
-
-{% block css %}
-    {{ parent() }}
-    <link rel="stylesheet"
-          href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/default.min.css">
-{% endblock %}
-
-{% block js %}
-    {{ parent() }}
-    <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
-    <script>
-        const codeBlocks = document.querySelectorAll('code.hljs');
-
-        codeBlocks.forEach((block) => {
-            hljs.highlightElement(block);
-        });
-    </script>
-{% endblock %}

templates/snip/create.html.twig

@@ -0,0 +1,7 @@
+{% extends 'base/one.column.html.twig' %}
+
+{% set title = 'Create Snip' %}
+
+{% block body %}
+    {{ form(form) }}
+{% endblock %}

templates/snip/edit.html.twig

@@ -1,10 +1,6 @@
 {% extends 'snip/base.html.twig' %}
 
-{% if snip.id %}
 {% set title %}{{ snip }} - Edit{% endset %}
-{% else %}
-    {% set title = 'Create Snip' %}
-{% endif %}
 {% set active = 'edit' %}
 
 {% block buttons %}

templates/snip/single.html.twig

@@ -15,18 +15,5 @@
 
 {% block css %}
     {{ parent() }}
-    <link rel="stylesheet"
+    <link rel="stylesheet" href="{{ asset('github-light-default.css') }}">
-          href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/default.min.css">
-{% endblock %}
-
-{% block js %}
-    {{ parent() }}
-    <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
-    <script>
-        const codeBlocks = document.querySelectorAll('code.hljs');
-
-        codeBlocks.forEach((block) => {
-            hljs.highlightElement(block);
-        });
-    </script>
 {% endblock %}