code entry

composer.json

@@ -20,6 +20,7 @@
         "orchestra/testbench": "^9.0|^10.0",
         "pestphp/pest": "^3.7",
         "pestphp/pest-plugin-laravel": "^3.0",
+        "phiki/phiki": "^1.1",
         "phpstan/extension-installer": "^1.1",
         "phpstan/phpstan": "^2.1",
         "pragmarx/google2fa": "^8.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": "54f951cd0450f7078a42e0e083084475",
+    "content-hash": "ef0dfd9d827a9411d8910f72b9627688",
     "packages": [],
     "packages-dev": [
         {
@@ -5918,6 +5918,60 @@
             },
             "time": "2022-02-21T01:04:05+00:00"
         },
+        {
+            "name": "phiki/phiki",
+            "version": "v1.1.5",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/phikiphp/phiki.git",
+                "reference": "30280485e06201b28532f4e441580c2c969e539e"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/phikiphp/phiki/zipball/30280485e06201b28532f4e441580c2c969e539e",
+                "reference": "30280485e06201b28532f4e441580c2c969e539e",
+                "shasum": ""
+            },
+            "require": {
+                "league/commonmark": "^2.5.3",
+                "php": "^8.2"
+            },
+            "require-dev": {
+                "illuminate/support": "^11.30",
+                "laravel/pint": "^1.18.1",
+                "pestphp/pest": "^3.5.1",
+                "phpstan/extension-installer": "^1.4.3",
+                "phpstan/phpstan": "^2.0",
+                "symfony/var-dumper": "^7.1.6"
+            },
+            "bin": [
+                "bin/phiki"
+            ],
+            "type": "library",
+            "autoload": {
+                "psr-4": {
+                    "Phiki\\": "src/"
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Ryan Chandler",
+                    "email": "support@ryangjchandler.co.uk",
+                    "homepage": "https://ryangjchandler.co.uk",
+                    "role": "Developer"
+                }
+            ],
+            "description": "Syntax highlighting using TextMate grammars in PHP.",
+            "support": {
+                "issues": "https://github.com/phikiphp/phiki/issues",
+                "source": "https://github.com/phikiphp/phiki/tree/v1.1.5"
+            },
+            "time": "2025-04-06T23:40:06+00:00"
+        },
         {
             "name": "php-di/invoker",
             "version": "2.3.6",

packages/forms/resources/js/components/code-editor.js

@@ -1,12 +1,12 @@
 import { EditorView, basicSetup } from 'codemirror-v6'
-import { EditorState } from '@codemirror/state'
-import { keymap } from '@codemirror/view'
 import { indentWithTab } from '@codemirror/commands'
 import { css } from '@codemirror/lang-css'
 import { html } from '@codemirror/lang-html'
 import { javascript } from '@codemirror/lang-javascript'
 import { json } from '@codemirror/lang-json'
 import { php } from '@codemirror/lang-php'
+import { EditorState } from '@codemirror/state'
+import { keymap } from '@codemirror/view'
 
 export default function codeEditorFormComponent({ isDisabled, state }) {
     return {

packages/infolists/composer.json

@@ -11,7 +11,8 @@
         "php": "^8.2",
         "filament/actions": "self.version",
         "filament/schemas": "self.version",
-        "filament/support": "self.version"
+        "filament/support": "self.version",
+        "phiki/phiki": "^1.1"
     },
     "autoload": {
         "psr-4": {

packages/infolists/resources/css/components/code.css

@@ -0,0 +1,20 @@
+.fi-in-code {
+    & .phiki {
+        @apply overflow-x-auto rounded-lg px-4 py-3 shadow-sm ring-1 ring-gray-950/10 dark:ring-white/20;
+    }
+
+    @variant dark {
+        & .phiki,
+        & .phiki span {
+            color: var(--phiki-dark-color) !important;
+            background-color: var(--phiki-dark-background-color) !important;
+            font-style: var(--phiki-dark-font-style) !important;
+            font-weight: var(--phiki-dark-font-weight) !important;
+            text-decoration: var(--phiki-dark-text-decoration) !important;
+        }
+    }
+
+    &.fi-copyable {
+        @apply cursor-pointer;
+    }
+}

packages/infolists/resources/css/index.css

@@ -1,3 +1,4 @@
+@import './components/code.css' layer(components);
 @import './components/color.css' layer(components);
 @import './components/entry.css' layer(components);
 @import './components/key-value.css' layer(components);

packages/infolists/src/Components/CodeEntry.php

@@ -0,0 +1,153 @@
+<?php
+
+namespace Filament\Infolists\Components;
+
+use Closure;
+use Filament\Support\Components\Contracts\HasEmbeddedView;
+use Filament\Support\Concerns\CanBeCopied;
+use Illuminate\Support\Js;
+use Phiki\Grammar\Grammar;
+use Phiki\Phiki;
+use Phiki\Theme\Theme;
+
+class CodeEntry extends Entry implements HasEmbeddedView
+{
+    use CanBeCopied;
+
+    protected string | Grammar | Closure | null $grammar = null;
+
+    protected string | Theme | Closure | null $lightTheme = null;
+
+    protected string | Theme | Closure | null $darkTheme = null;
+
+    public function grammar(string | Grammar | Closure | null $grammar): static
+    {
+        $this->grammar = $grammar;
+
+        return $this;
+    }
+
+    public function getGrammar(): string | Grammar | null
+    {
+        return $this->evaluate($this->grammar);
+    }
+
+    public function lightTheme(string | Theme | Closure | null $theme): static
+    {
+        $this->lightTheme = $theme;
+
+        return $this;
+    }
+
+    public function getLightTheme(): string | Theme | null
+    {
+        return $this->evaluate($this->lightTheme);
+    }
+
+    public function darkTheme(string | Theme | Closure | null $theme): static
+    {
+        $this->darkTheme = $theme;
+
+        return $this;
+    }
+
+    public function getDarkTheme(): string | Theme | null
+    {
+        return $this->evaluate($this->darkTheme);
+    }
+
+    public function toEmbeddedHtml(): string
+    {
+        $state = $this->getState();
+
+        $attributes = $this->getExtraAttributeBag()
+            ->class([
+                'fi-in-code',
+            ]);
+
+        if (blank($state)) {
+            $attributes = $attributes
+                ->merge([
+                    'x-tooltip' => filled($tooltip = $this->getEmptyTooltip())
+                        ? '{
+                            content: ' . Js::from($tooltip) . ',
+                            theme: $store.theme,
+                        }'
+                        : null,
+                ], escape: false);
+
+            $placeholder = $this->getPlaceholder();
+
+            ob_start(); ?>
+
+            <div <?= $attributes->toHtml() ?>>
+                <?php if (filled($placeholder !== null)) { ?>
+                    <p class="fi-in-placeholder">
+                        <?= e($placeholder) ?>
+                    </p>
+                <?php } ?>
+            </div>
+
+            <?php return $this->wrapEmbeddedHtml(ob_get_clean());
+        }
+
+        $phiki = new Phiki;
+        $grammar = $this->getGrammar();
+        $lightTheme = $this->getLightTheme();
+        $darkTheme = $this->getDarkTheme();
+
+        if (is_array($state)) {
+            $state = json_encode($state, flags: JSON_PRETTY_PRINT);
+            $grammar ??= Grammar::Json;
+        }
+
+        $grammar ??= Grammar::Html;
+        $lightTheme ??= Theme::GithubLight;
+        $darkTheme ??= Theme::GithubDarkHighContrast;
+
+        $isCopyable = $this->isCopyable($state);
+
+        $copyableStateJs = $isCopyable
+            ? Js::from($this->getCopyableState($state) ?? $state)
+            : null;
+        $copyMessageJs = $isCopyable
+            ? Js::from($this->getCopyMessage($state))
+            : null;
+        $copyMessageDurationJs = $isCopyable
+            ? Js::from($this->getCopyMessageDuration($state))
+            : null;
+
+        $attributes = $attributes
+            ->merge([
+                'x-on:click' => $isCopyable
+                    ? <<<JS
+                        window.navigator.clipboard.writeText({$copyableStateJs})
+                        \$tooltip({$copyMessageJs}, {
+                            theme: \$store.theme,
+                            timeout: {$copyMessageDurationJs},
+                        })
+                        JS
+                    : null,
+                'x-tooltip' => filled($tooltip = $this->getTooltip($state))
+                    ? '{
+                        content: ' . Js::from($tooltip) . ',
+                        theme: $store.theme,
+                    }'
+                    : null,
+            ], escape: false)
+            ->class([
+                'fi-copyable' => $isCopyable,
+            ]);
+
+        ob_start(); ?>
+
+        <div <?= $attributes->toHtml() ?>>
+            <?= $phiki->codeToHtml($state, $grammar, [
+                'light' => $lightTheme,
+                'dark' => $darkTheme,
+            ]) ?>
+        </div>
+
+        <?php return $this->wrapEmbeddedHtml(ob_get_clean());
+    }
+}