Merge pull request #7 from dotswan/develop

[BugFix] Dependency Removal, Bug Fixes, and Asset Updates

package.json

@@ -33,7 +33,6 @@
         "@codemirror/lang-json": "^6.0.1",
         "@codemirror/lang-php": "^6.0.1",
         "@codemirror/view": "^6.26.0",
-        "@ryangjchandler/alpine-clipboard": "^2.3.0",
         "cm6-theme-basic-dark": "^0.2.0",
         "cm6-theme-basic-light": "^0.2.0",
         "cm6-theme-gruvbox-dark": "^0.2.0",

resources/css/index.css

@@ -10,9 +10,7 @@
 .cm-editor {
     min-height: inherit !important;
     position: relative;
-    max-width: 100%;
     overflow: auto !important;
-    width: 70vw;
     height: inherit;
 }
 
@@ -21,20 +19,23 @@
     color: #fff;
     padding: 10px 20px;
     border: none;
-    border-radius: 50%;
-    width: 50px;
-    height: 50px;
+    height: 30px;
     cursor: pointer;
     text-align: center;
     display: flex;
     justify-content: center;
     align-items: center;
-    position: absolute;
-    top: -10px;
+    position: relative;
+    top: 1px;
     font-size: 12px;
-    right: -10px;
-    z-index: 100;
 }
 .copy-button:hover {
     background-color: #0066ff;
+}
+
+.code-editor-textarea{
+    position: relative;
+    width: auto;
+    overflow: hidden;
+    border-radius: 5px;
 }

resources/js/index.js

@@ -1,7 +1,5 @@
 import CodeEditorAlpinePlugin from './components/code-editor';
-import Clipboard from '@ryangjchandler/alpine-clipboard';
 
 document.addEventListener('alpine:init', () => {
-    window.Alpine.plugin(Clipboard);
     window.Alpine.plugin(CodeEditorAlpinePlugin);
 })

resources/views/fields/code-editor.blade.php

@@ -9,12 +9,12 @@
     :state-path="$getStatePath()"
     >
 
-    <div style="position: relative;">
+    <div class="code-editor-textarea">
 
-        <div x-data="{ copied: false }" x-show="{{ $getShowCopyButton() }}">
+        <div x-data="{ copied: false}" x-show="{{ $getShowCopyButton() }}">
             <div class="copy-button"
-                @click="$clipboard(`{{ $getState() }}`); copied = true; setTimeout(() => { copied = false; }, 5000)">
-                <span x-show="!copied">Copy</span>
+                @click="copyContent(`{{ $getState() }}`); copied = true; setTimeout(() => { copied = false; }, 5000)">
+                <span x-show="!copied">Copy Content</span>
                 <span x-show="copied">Copied</span>
             </div>
         </div>
@@ -33,4 +33,23 @@
             </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>

src/Fields/CodeEditor.php

@@ -10,7 +10,7 @@ class CodeEditor extends Field
 {
     protected string $view = 'filament-code-editor::fields.code-editor';
 
-    protected int | Closure | null $minHeight = 768;
+    protected int | Closure | null $minHeight = 420;
     protected string | null $customStyle = null;
     protected string | null $darkModeTheme = null;
     protected string | null $lightModeTheme = null;
@@ -54,7 +54,7 @@ public function isReadOnly(bool $isReadOnly = false): static
         return $this;
     }
 
-    public function showCopyButton(bool $showCopyButton = false): static
+    public function showCopyButton(bool $showCopyButton = true): static
     {
         $this->showCopyButton = $showCopyButton;
 
@@ -66,9 +66,9 @@ public function getIsReadOnly(): bool
         return $this->evaluate($this->isReadOnly);
     }
 
-    public function getShowCopyButton(): bool
+    public function getShowCopyButton(): string
     {
-        return $this->evaluate($this->showCopyButton);
+        return $this->evaluate($this->showCopyButton ? "true" : "false");
     }
 
     public function getMinHeight(): ?int