CKEditor5 twig template plugin

This CKEditor5 plugin allows editing Twig templates.

Demo: mroca.github.io/ckeditor5-twig

Features:

- Display all available variables, their type & children.
- {{ variable|filter }}
- {% tag %} blocks
- {% tag %} with content {% endtag %} blocks
- {# comments #}
- Raw Twig content with Code blocks
- Allow using variables into images src
- Import / Export html code button

Usage

Install CKEditor5.

You must use the same major CKEditor version as the one supported by this plugin (see the package.json file).
If you get a ckeditor-duplicated-modules error, you have mismatching versions.

``bash
yarn add ckeditor5-twig
`

`html
<br /> <h1>My template</h1><br /> {% block twig-template %}<br /> ...<br /> {% endblock %}<br />
`
> Note: you should use a <code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, or a </code><script type="text/template"><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> tags instead of a </code><div><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> one in order to avoid your browser parsing it.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">javascript<br />import TwigPlugin from 'ckeditor5-twig/twig/twigplugin';<br />import 'ckeditor5-twig/twig/plugin.css';</p><p class="my-3">ClassicEditor<br /> .create( document.querySelector( '#editor' ), {<br /> plugins: [ '...', TwigPlugin ],<br /> toolbar: [ '...', 'twigCommands' ],<br /> config: {<br /> ...,<br /> twig: {<br /> variables: {<br /> username: { type: 'string', label: 'The current user\'s username' },<br /> country: {<br /> type: 'object',<br /> nullable: true,<br /> properties: {<br /> name: { type: 'string', label: 'The country name' },<br /> cities: {<br /> type: 'array',<br /> label: 'All the country\'s cities',<br /> children: { type: 'string', label: 'The city name' }<br /> },<br /> }<br /> },<br /> }<br /> }<br /> }<br /> } )<br /> .then( '...' )<br /> .catch( '...' );<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">Translations are currently available for </code>EN<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> and </code>FR<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> locales (see the </code>twig/twigpluginui.js<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> file).</p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">The plugin brings an </code>Image<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> feature allowing to use twig expression as </code>src<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> value, e.g.: </code>"https://cdn.my.site/images/" ~ user.avatar<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><br />When using a twig expression as image </code>src<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, a grey image is displayed with the </code>src<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> value on it.</p><p class="my-3">You must <a href="https://ckeditor.com/docs/ckeditor5/latest/features/image.html" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">install the Image plugin</a><br />in order to use it with the Twig plugin:</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">bash<br />yarn add @ckeditor/ckeditor5-image<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">javascript<br />import Image from '@ckeditor/ckeditor5-image/src/image';</p><p class="my-3">ClassicEditor.create( document.querySelector( '#editor' ), {<br /> plugins: ['...', TwigPlugin, Image]<br />});<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">If you need to write your own twig code, you can use the <a href="https://ckeditor.com/docs/ckeditor5/latest/features/code-blocks.html" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">Code blocks</a> plugin.<br />The required config is described bellow. Behind the woods, the twig plugin will replace all </code><pre><code class="language-twig"><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> tags by </code><code-language-twig><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">javascript<br />import TwigPlugin from 'ckeditor5-twig/twig/twigplugin';<br />import 'ckeditor5-twig/twig/plugin.css';</p><p class="my-3">ClassicEditor<br /> .create( document.querySelector( '#editor' ), {<br /> plugins: [ '...', TwigPlugin, CodeBlock ],<br /> toolbar: [ '...',, 'twigCommands', 'codeBlock' ],<br /> config: {<br /> ...,<br /> twig: { ... },<br /> codeBlock: {<br /> indentSequence: false,<br /> languages: [<br /> { language: 'twig', label: 'Twig' }<br /> // You can add other languages here, see https://ckeditor.com/docs/ckeditor5/latest/features/code-blocks.html#configuring-code-block-languages<br /> ]<br /> }<br /> }<br /> } );<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">> The Twig plugin is also compatible with <a href="https://ckeditor.com/docs/ckeditor5/latest/features/html-embed.html" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">HTML embed</a><br />> if using </code><raw-html-embed><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> tag instead of </code><div class="raw-html-embed"><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, but there are some issues.<br />> As the embed html plugin parses its content, we cannot really use it for twig data:<br />> </code><html>{% if a > b %}</html><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> will be replaced by </code>{% if a > b %}<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">A PHP </code>TwigVariablesExtractor<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> class allows to convert an array of items (objects, entities, arrays, types, ...)<br />into a </code>variables<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> array that can be used as plugin config.</p><p class="my-3">This class is currently located into </code>demo/symfonyapp/src/Extractor<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, and could later be moved into a dedicated repository<br />and composer package.</p><p class="my-3"><strong>Extractor options</strong></p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">php<br />$propertyInfoExtractor = new PropertyInfoExtractor('...');<br />$extractor = new TwigVariablesExtractor($propertyInfoExtractor, [<br /> 'circular_reference_limit' => 1,<br /> 'max_depth' => 4,<br />]);<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><strong>Groups & Serializer</strong></p><p class="my-3">If there are too many object properties to parse, you can use the </code>@Groups<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> serializer annotation, then use the<br /><a href="https://symfony.com/doc/current/components/property_info.html#serializerextractor" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">serializer_groups context option</a></p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">php<br />$extractor = new TwigVariablesExtractor();<br />$variables = $extractor->extract($types, ['serializer_groups' => ['foo']]);<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><strong>Variables types</strong></p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">php<br /><?php</p><p class="my-3">namespace App\Controller;</p><p class="my-3">use App\Extractor\TwigVariablesExtractor;<br />use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;<br />use Symfony\Component\HttpFoundation\Response;</p><p class="my-3">class DefaultController extends AbstractController<br />{<br /> public function index(): Response<br /> {<br /> // Option 1: variables as an array<br /> // $variables = ['name' => ['type' => 'string']];</p><p class="my-3"> // Option 2: TwigVariablesExtractor & variables defined as an object's properties<br /> // $variables = $extractor->extract(MyTemplateVariablesObject::class);</p><p class="my-3"> // Option 3: TwigVariablesExtractor & variables defined in an array<br /> $variables = [<br /> 'app' => [ // Manually defined config<br /> 'type' => 'object',<br /> 'label' => 'All app related global variables',<br /> 'properties' => [<br /> 'debug' => ['type' => 'boolean', 'label' => 'Is debug enabled?'],<br /> 'environment' => ['type' => 'string', 'label' => 'Current app env: dev or prod'],<br /> ]<br /> ],<br /> 'siteTitle' => 'string', // type as string<br /> 'user' => User::class, // object & children<br /> 'article' => BlogArticle::class, // class name<br /> 'comments' => [ // array with ONE item type<br /> Comment::class // array content type<br /> ],<br /> 'calendar' => [ // associative array as object<br /> 'now' => 'datetime', // type name<br /> 'yesterday' => \DateTimeInterface::class, // interface name<br /> 'tomorrow' => new \DateTimeImmutable(), // object<br /> ],<br /> ];</p><p class="my-3"> $extractor = new TwigVariablesExtractor();<br /> return $this->render('default/index.html.twig', [<br /> 'variables' => $extractor->extract($variables),<br /> ]);<br /> }<br />}<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">All translations are defined in the </code>twig/twigpluginui.js<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> file. Each one can be overridden by<br /><a href="https://ckeditor.com/docs/ckeditor5/latest/framework/guides/deep-dive/ui/localization.html#using-the-windowckeditor_translations-object" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">adding the translation</a></p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">Development</h2></p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">bash<br />yarn install<br />yarn watch<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">Then open the </code>index.html<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> file (with the </code>Run<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> button in PhpStorm / WebStorm, for instance).</p><p class="my-3"><strong>Before pushing</strong></p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">bash<br />yarn lint:fix<br />yarn stylelint:fix<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">Install the <a href="https://symfony.com/download" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">Symfony CLI</a>, then:<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">bash<br />cd demo/symfonyapp<br />composer install<br />yarn install<br />(yarn encore dev-server --port 8880 & symfony server:start --port 8000 --no-tls)<br /><h1 class="text-2xl font-bold mt-6 mb-4">or run the two commands in a different terminal</h1><br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">Then access the <a href="http://127.0.0.1:8000" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">demo page</a></p><p class="my-3"><strong>Before pushing</strong></p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">bash<br />cd demo/symfonyapp<br />vendor/bin/php-cs-fixer fix<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">Known issues</h2></p><p class="my-3">- As the twig tags are replaced by a </code>div<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, they cannot be used into </code>a<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, </code>ul<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> list without breaking the html:<br /> </code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">twig<br /> <ul><br /> {% for a in b %}<br /> <li>{{ a }}</li><br /> {% endfor %}<br /> </ul></p><p class="my-3"> <ul><br /> {# This comment should be replaced by a "li" tag, as it is located into an "ul" tag #}<br /> <li>This is a list item</li><br /> </ul><br /> </code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><br />- Inline blocks are not handled for now:<br /> </code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">twig<br /> <p>{% if a %}yes{% else %}no{% endif %}</p><br /> </code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><br />- The block statement content part must have a parent Paragraph in order to be writable.<br /> A Paragraph is currently added into each block content<br />- </code>else<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> is not well-supported for now as part of the graphical </code>if<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> / </code>for<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> block</p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">TODO</h2></p><p class="my-3">- Deal with inline & </code>li<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> statements<br />- Allow passing available functions & filters into the variables list<br />- Validate the twig template with <a href="https://github.com/twigjs/twig.js" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">twig.js</a></p><p class="my-3"><strong>DataExtractor</strong></p><p class="my-3">- object with </code>__toString<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> => </code>object|string`<br />- object => display the class name<br /></p></div><div class="flex justify-center absolute inset-x-0 bottom-0 bg-gradient-to-t from-background via-background to-transparent pb-4 pt-16"><button data-slot="button" class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down mr-1 h-4 w-4"><path d="m6 9 6 6 6-6"></path></svg>Show more</button></div></div></div><template id="P:3"></template><template id="P:4"></template></div></div></div><script>self.__next_f.push([1,"28:[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}]\n29:[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^40.2.0\"}]\n2a:[\"$\",\"$L5\",\"@ckeditor/ckeditor5-utils\",{\"href\":\"/package/%40ckeditor%2Fckeditor5-utils\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"@ckeditor/ckeditor5-utils\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^40.2.0\"}]]}]\n2b:[\"$\",\"$L5\",\"@ckeditor/ckeditor5-widget\",{\"href\":\"/package/%40ckeditor%2Fckeditor5-widget\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"@ckeditor/ckeditor5-widget\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^40.2.0\"}]]}]\n2c:[\"$\",\"$L5\",\"prettydiff\",{\"href\":\"/package/prettydiff\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"prettydiff\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^101.2.6\"}]]}]\n2d:[\"$\",\"$L5\",\"sweetalert2\",{\"href\":\"/package/sweetalert2\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"sweetalert2\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^11.10.2\"}]]}]\n"])</script><script>self.__next_f.push([1,"2e:[\"$\",\"div\",null,{\"data-slot\":\"card\",\"className\":\"bg-card text-card-foreground flex flex-col gap-6 rounded-xl border shadow-sm py-4 lg:col-span-2\",\"children\":[[\"$\",\"div\",null,{\"data-slot\":\"card-header\",\"className\":\"@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6 pb-2\",\"children\":[\"$\",\"div\",null,{\"data-slot\":\"card-title\",\"className\":\"font-semibold flex items-center gap-2 text-base\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-wrench h-4 w-4\",\"children\":[[\"$\",\"path\",\"cbrjhi\",{\"d\":\"M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z\"}],\"$undefined\"]}],\"Dev Dependencies\",[\"$\",\"span\",null,{\"data-slot\":\"badge\",\"className\":\"inline-flex items-center justify-center rounded-md border px-2 py-0.5 font-medium w-fit whitespace-nowrap shrink-0 [\u0026\u003esvg]:size-3 gap-1 [\u0026\u003esvg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden border-transparent bg-secondary text-secondary-foreground [a\u0026]:hover:bg-secondary/90 ml-auto text-xs\",\"children\":24}]]}]}],[\"$\",\"div\",null,{\"data-slot\":\"card-content\",\"className\":\"px-6\",\"children\":[\"$\",\"div\",null,{\"className\":\"grid gap-1 sm:grid-cols-2 lg:grid-cols-3\",\"children\":[[\"$\",\"$L5\",\"@ckeditor/ckeditor5-autosave\",{\"href\":\"/package/%40ckeditor%2Fckeditor5-autosave\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"@ckeditor/ckeditor5-autosave\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^40.2.0\"}]]}],[\"$\",\"$L5\",\"@ckeditor/ckeditor5-basic-styles\",{\"href\":\"/package/%40ckeditor%2Fckeditor5-basic-styles\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"@ckeditor/ckeditor5-basic-styles\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^40.2.0\"}]]}],[\"$\",\"$L5\",\"@ckeditor/ckeditor5-code-block\",{\"href\":\"/package/%40ckeditor%2Fckeditor5-code-block\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[\"$L30\",\"$undefined\"]}],\"@ckeditor/ckeditor5-code-block\"]}],\"$L31\"]}],\"$L32\",\"$L33\",\"$L34\",\"$L35\",\"$L36\",\"$L37\",\"$L38\",\"$L39\",\"$L3a\",\"$L3b\",\"$L3c\",\"$L3d\",\"$L3e\",\"$L3f\",\"$L40\",\"$L41\",\"$L42\",\"$L43\",\"$L44\",\"$L45\",\"$L46\"]}]}]]}]\n"])</script><script>self.__next_f.push([1,"30:[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}]\n31:[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^40.2.0\"}]\n32:[\"$\",\"$L5\",\"@ckeditor/ckeditor5-dev-utils\",{\"href\":\"/package/%40ckeditor%2Fckeditor5-dev-utils\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"@ckeditor/ckeditor5-dev-utils\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^39.5.0\"}]]}]\n33:[\"$\",\"$L5\",\"@ckeditor/ckeditor5-editor-classic\",{\"href\":\"/package/%40ckeditor%2Fckeditor5-editor-classic\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"@ckeditor/ckeditor5-editor-classic\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^40.2.0\"}]]}]\n34:[\"$\",\"$L5\",\"@ckeditor/ckeditor5-essentials\",{\"href\":\"/package/%40ckeditor%2Fckeditor5-essentials\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"@ckeditor/ckeditor5-essentials\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^40.2.0\"}]]}]\n35:[\"$\",\"$L5\",\"@ckeditor/ckeditor5-heading\",{\"href\":\"/package/%40ckeditor%2Fckeditor5-heading\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"@ckeditor/ckeditor5-heading\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^40.2.0\"}]]}]\n36:[\"$\",\"$L5\",\"@ckeditor/ckeditor5-html-embed\",{\"href\":\"/package/%40ckeditor%2Fckeditor5-html-embed\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\","])</script><script>self.__next_f.push([1,"\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"@ckeditor/ckeditor5-html-embed\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^40.2.0\"}]]}]\n37:[\"$\",\"$L5\",\"@ckeditor/ckeditor5-image\",{\"href\":\"/package/%40ckeditor%2Fckeditor5-image\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"@ckeditor/ckeditor5-image\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^40.2.0\"}]]}]\n38:[\"$\",\"$L5\",\"@ckeditor/ckeditor5-inspector\",{\"href\":\"/package/%40ckeditor%2Fckeditor5-inspector\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"@ckeditor/ckeditor5-inspector\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^4.1.0\"}]]}]\n39:[\"$\",\"$L5\",\"@ckeditor/ckeditor5-list\",{\"href\":\"/package/%40ckeditor%2Fckeditor5-list\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"@ckeditor/ckeditor5-list\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^40.2.0\"}]]}]\n3a:[\"$\",\"$L5\",\"@ckeditor/ckeditor5-paragraph\",{\"href\":\"/package/%40ckeditor%2Fckeditor5-paragraph\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"@ckeditor/ckeditor5-paragraph\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono tex"])</script><script>self.__next_f.push([1,"t-xs text-muted-foreground\",\"children\":\"^40.2.0\"}]]}]\n3b:[\"$\",\"$L5\",\"@ckeditor/ckeditor5-theme-lark\",{\"href\":\"/package/%40ckeditor%2Fckeditor5-theme-lark\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"@ckeditor/ckeditor5-theme-lark\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^40.2.0\"}]]}]\n3c:[\"$\",\"$L5\",\"css-loader\",{\"href\":\"/package/css-loader\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"css-loader\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^6.8.1\"}]]}]\n3d:[\"$\",\"$L5\",\"eslint\",{\"href\":\"/package/eslint\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"eslint\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^8.56.0\"}]]}]\n3e:[\"$\",\"$L5\",\"eslint-config-ckeditor5\",{\"href\":\"/package/eslint-config-ckeditor5\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"eslint-config-ckeditor5\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^5.2.1\"}]]}]\n3f:[\"$\",\"$L5\",\"highlight.js\",{\"href\":\"/package/highlight.js\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-"])</script><script>self.__next_f.push([1,"0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"highlight.js\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^11.9.0\"}]]}]\n40:[\"$\",\"$L5\",\"postcss-loader\",{\"href\":\"/package/postcss-loader\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"postcss-loader\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^7.3.4\"}]]}]\n41:[\"$\",\"$L5\",\"raw-loader\",{\"href\":\"/package/raw-loader\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"raw-loader\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^4.0.2\"}]]}]\n42:[\"$\",\"$L5\",\"style-loader\",{\"href\":\"/package/style-loader\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"style-loader\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^3.3.3\"}]]}]\n43:[\"$\",\"$L5\",\"stylelint\",{\"href\":\"/package/stylelint\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"stylelint\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^16.1.0\"}]]}]\n44:[\"$\",\"$L5\",\"stylelint-config-recommended\",{\"href\":\"/package/stylelint-config-recommended\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentCo"])</script><script>self.__next_f.push([1,"lor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"stylelint-config-recommended\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^14.0.0\"}]]}]\n45:[\"$\",\"$L5\",\"webpack\",{\"href\":\"/package/webpack\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"webpack\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^5.89.0\"}]]}]\n46:[\"$\",\"$L5\",\"webpack-cli\",{\"href\":\"/package/webpack-cli\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"webpack-cli\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^5.1.4\"}]]}]\n"])</script><div hidden id="S:3"><div data-state="inactive" data-orientation="horizontal" role="tabpanel" aria-labelledby="radix-_R_aav5ubrb_-trigger-dependencies" hidden="" id="radix-_R_aav5ubrb_-content-dependencies" tabindex="0" data-slot="tabs-content" class="flex-1 outline-none mt-6"></div></div><script>$RS=function(a,b){a=document.getElementById(a);b=document.getElementById(b);for(a.parentNode.removeChild(a);a.firstChild;)b.parentNode.insertBefore(a.firstChild,b);b.parentNode.removeChild(b)};$RS("S:3","P:3")</script><div hidden id="S:4"><div data-state="inactive" data-orientation="horizontal" role="tabpanel" aria-labelledby="radix-_R_aav5ubrb_-trigger-versions" hidden="" id="radix-_R_aav5ubrb_-content-versions" tabindex="0" data-slot="tabs-content" class="flex-1 outline-none mt-6"></div></div><script>$RS("S:4","P:4")</script><script>$RC("B:1","S:1")</script></body></html>