Refactor Code Editor Component

- Enhanced the code editor component to support dynamic themes based on user preferences.
- Updated the initialization logic to determine the theme from the Alpine store or system settings.
- Removed the isReadOnly property from the CodeEditor class and replaced it with a disabled state.
- Simplified the Blade view for the code editor, removing unnecessary elements and scripts.
- Added a new Tailwind CSS configuration file for the code editor component.
- Ensured proper loading of CSS and JS assets for the code editor in the service provider.

Author: cklei-carly

composer.json

@@ -24,7 +24,6 @@
     "require": {
         "php": ">=8.2",
         "laravel/framework": "^11.0|^12.0",
-        "dotswan/filament-code-editor": "^1.1",
         "filament/spatie-laravel-translatable-plugin": "^3.2",
         "guava/filament-icon-picker": "^2.0",
         "pboivin/filament-peek": "^2.0",

package.json

@@ -2,9 +2,13 @@
     "private": true,
     "type": "module",
     "scripts": {
-        "dev:styles": "npx tailwindcss -i ./resources/css/index.css -o ./resources/dist/inspirecms.css --postcss --watch",
+        "dev:code-editor-css": "npx tailwindcss -c ./tailwind-code-editor.config.js -i ./resources/css/components/code-editor.css -o ./resources/dist/components/code-editor.css --watch",
+        "dev:main-css": "npx tailwindcss -i ./resources/css/index.css -o ./resources/dist/inspirecms.css --postcss --watch",
+        "dev:styles": "npm run dev:main-css && npm run dev:code-editor-css",
         "dev:scripts": "node ./bin/build.js --dev",
-        "build:styles": "npx tailwindcss -i ./resources/css/index.css -o ./resources/dist/inspirecms.css --postcss --minify",
+        "build:code-editor-css": "npx tailwindcss -c ./tailwind-code-editor.config.js -i ./resources/css/components/code-editor.css -o ./resources/dist/components/code-editor.css  --postcss --minify",
+        "build:main-css": "npx tailwindcss -i ./resources/css/index.css -o ./resources/dist/inspirecms.css --postcss --minify",
+        "build:styles": "npm run build:main-css && npm run build:code-editor-css",
         "build:scripts": "node ./bin/build.js",
         "purge": "filament-purge -i resources/dist/inspirecms.css -o resources/dist/inspirecms.css -v 3.x",
         "dev": "npm run dev:styles && npm run dev:scripts",

resources/css/components/code-editor.css

@@ -0,0 +1,19 @@
+.cm-scroller {
+    min-height: inherit !important;
+    height: 70vh;
+}
+
+.cm-gutter{
+    overflow: visible !important;
+}
+
+.cm-editor {
+    min-height: inherit !important;
+    position: relative;
+    overflow: auto !important;
+    height: inherit;
+}
+
+.code-editor-textarea {
+    width: auto;
+}

resources/dist/components/code-editor.css

@@ -19,9 +19,9 @@ import { gruvboxDark } from 'cm6-theme-gruvbox-dark'
 
 export default function codeEditorFormComponentEnhace({
     state, 
-    isReadOnly, 
     darkTheme, 
     lightTheme,
+    isReadOnly, 
 }) {
     return {
         state,
@@ -69,12 +69,20 @@ export default function codeEditorFormComponentEnhace({
             dark: basicDark,
         },
         init: function () {
+            let theme = window.Alpine.store('theme') || 'system';
+            if (theme === 'system') {
+                theme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+            }
+
             this.isReadOnly = isReadOnly;
             this.theme.dark = darkTheme;
             this.theme.light = lightTheme;
             this.themeConfig = new Compartment();
-            this.mode = 'dark';
+            this.mode = theme;
             this.render();
+
+            this.toggleTheme(theme);
+
         },
         toggleTheme(mode) {
             const selectedStyle = mode === 'dark' ? this.theme.dark : this.theme.light;

resources/dist/components/code-editor.js

@@ -1,4 +1,9 @@
-<x-filament-forms::field-wrapper 
+@php
+    $statePath = $getStatePath();
+@endphp
+<x-dynamic-component
+    :component="$getFieldWrapperView()"
+    :field="$field"
     :id="$getId()" 
     :label="$getLabel()" 
     :label-sr-only="$isLabelHidden()" 
@@ -8,57 +13,40 @@
     :required="$isRequired()" 
     :state-path="$getStatePath()"
 >
-
-    <div class="code-editor-textarea">
-
-        <div x-data="{ copied: false}" x-show="{{ $getShowCopyButton() }}">
-            <div class="copy-button"
-                @click="copyContent(`{{ $getState() }}`); copied = true; setTimeout(() => { copied = false; }, 5000)">
-                <span x-show="!copied">Copy Content</span>
-                <span x-show="copied">Copied</span>
-            </div>
-        </div>
-
-        <div style="overflow: auto;" 
-            @theme-changed.window="function(e) {toggleTheme(e.detail)}" 
-            x-init="() => {
-                let theme = $store.theme ?? 'light';
-                if (theme === 'system') {
-                    theme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
-                }
-                toggleTheme(theme);
-            }"
+    <x-filament::input.wrapper
+      :disabled="$isDisabled"
+      :valid="! $errors->has($statePath)"
+      :attributes="
+          \Filament\Support\prepare_inherited_attributes($getExtraAttributeBag())
+              ->class(['code-editor-textarea relative overflow-hidden'])
+      "
+    >
+        <div class="code-editor-textarea-wrapper-ctn overflow-auto"
+            @theme-changed.window="(e) => toggleTheme(e.detail)" 
             x-data="codeEditorFormComponentEnhace({
                 state: $wire.{{ $applyStateBindingModifiers('entangle(\'' . $getStatePath() . '\')') }},
-                isReadOnly: @js($getIsReadOnly()),
                 darkTheme: @js($getDarkModeTheme()),
                 lightTheme: @js($getLightModeTheme()),
+                isReadOnly: @js($isDisabled()),
             })"
             x-load
             x-load-src="{{ \Filament\Support\Facades\FilamentAsset::getAlpineComponentSrc('filament-code-editor', 'solution-forest/inspirecms') }}"
+            x-load-css="[@js(\Filament\Support\Facades\FilamentAsset::getStyleHref('filament-code-editor', package: 'solution-forest/inspirecms'))]"
         >
-            <div wire:ignore class="w-full code-editor-textarea-wrapper" x-ref="codeEditor"
-                style="height:{{ $getMinHeight() }};overflow: hidden; {{ $getCustomStyle() }}">
+            <div wire:ignore 
+                x-ref="codeEditor"
+                {{
+                    $getExtraInputAttributeBag()
+                      ->class([
+                        'code-editor-textarea-wrapper',
+                        'w-full overflow-hidden', 
+                      ])
+                      ->style([
+                        'height:' . ($getMinHeight() ?? '200px'),
+                      ])
+                }}
+            >
             </div>
         </div>
-    </div>
-
-    <script>
-        async function copyContent(content) {
-          try {
-            if (navigator.clipboard && window.isSecureContext) {
-              await navigator.clipboard.writeText(content);
-            } else {
-              const el = document.createElement('textarea');
-              el.value = content;
-              document.body.appendChild(el);
-              el.select();
-              document.execCommand('copy');
-              document.body.removeChild(el);
-            }
-          } catch (err) {
-            console.error('Failed to copy text: ', err);
-          }
-        }
-      </script>
-</x-filament-forms::field-wrapper>
+    </x-filament::input.wrapper>
+</x-dynamic-component>

resources/dist/inspirecms.css

@@ -3,31 +3,21 @@
 namespace SolutionForest\InspireCms\Filament\Forms\Components;
 
 use Closure;
+use Filament\Forms\Components\Concerns\HasExtraInputAttributes;
 use Filament\Forms\Components\Field;
 
 class CodeEditor extends Field
 {
+    use HasExtraInputAttributes;
+
     protected string $view = 'inspirecms::filament.forms.components.code-editor';
 
     protected int | string | Closure | null $minHeight = 420;
 
-    protected string | Closure | null $customStyle = null;
-
     protected string | Closure | null $darkModeTheme = null;
 
     protected string | Closure | null $lightModeTheme = null;
 
-    protected bool | Closure $isReadOnly = false;
-
-    protected bool | Closure $showCopyButton = false;
-
-    public function customStyle(?string $customStyle): static
-    {
-        $this->customStyle = $customStyle;
-
-        return $this;
-    }
-
     public function minHeight(int | string | Closure | null $minHeight = 768): static
     {
         $this->minHeight = $minHeight;
@@ -49,25 +39,6 @@ public function darkModeTheme(?string $darkModeTheme): static
         return $this;
     }
 
-    public function isReadOnly(bool | Closure $isReadOnly = false): static
-    {
-        $this->isReadOnly = $isReadOnly;
-
-        return $this;
-    }
-
-    public function showCopyButton(bool | Closure $showCopyButton = true): static
-    {
-        $this->showCopyButton = $showCopyButton;
-
-        return $this;
-    }
-
-    public function getIsReadOnly(): bool
-    {
-        return boolval($this->evaluate($this->isReadOnly));
-    }
-
     /**
      * @return ?string
      */
@@ -86,22 +57,6 @@ public function getMinHeight()
         return null;
     }
 
-    /**
-     * @return string
-     */
-    public function getShowCopyButton()
-    {
-        return $this->evaluate($this->showCopyButton ? 'true' : 'false');
-    }
-
-    /**
-     * @return ?string
-     */
-    public function getCustomStyle()
-    {
-        return $this->evaluate($this->customStyle);
-    }
-
     /**
      * @return ?string
      */

resources/js/components/code-editor.js

@@ -61,7 +61,7 @@ public function table(Table $table): Table
                     })
                     ->form([
                         TemplateResourceHelper::getThemeFormComponent()->disabled(),
-                        TemplateResourceHelper::getContentFormComponent()->isReadOnly(true),
+                        TemplateResourceHelper::getContentFormComponent()->disabled(),
                     ])
                     ->mutateRecordDataUsing(fn (Template $record) => [
                         'theme' => $this->theme,