fix: editor height when having multiple editors in same page

creagia · Jul 10, 2023 · f3dc579 · f3dc579
1 parent 140b799
commit f3dc579
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 16 deletions.
diff --git a/resources/css/plugin.css b/resources/css/plugin.css
@@ -22,11 +22,3 @@
 .cm-content {
     padding: 0.5rem !important;
 }
-
-.cm-scroller {
-    max-height: var(--maxInputHeight) !important;
-}
-
-.cm-scroller, .cm-gutter {
-    min-height: var(--minInputHeight) !important;
-}
diff --git a/resources/dist/filament-code-field.css b/resources/dist/filament-code-field.css
diff --git a/resources/views/code-field.blade.php b/resources/views/code-field.blade.php
@@ -13,12 +13,18 @@
     :disabled="$isDisabled()"
     dir="ltr"
 >
+    @php($codeFieldId = 'code-field-'.\Illuminate\Support\Str::slug($getId()))
+
     <style>
-        :root {
-            --minInputHeight: {{ $getMinHeight() }};
-            --maxInputHeight: {{ $getMaxHeight() }};
+        #{{ $codeFieldId }} .cm-scroller {
+            max-height: {{ $getMaxHeight() }} !important;
+        }
+
+        #{{ $codeFieldId }} .cm-scroller, .cm-gutter {
+            min-height: {{ $getMinHeight() }} !important;
         }
     </style>
+
     <div x-data="filamentCodeField({
         state: $wire.{{ $applyStateBindingModifiers('entangle(\''.$getStatePath().'\')') }},
         displayMode: {{ $displayMode ? 1 : 0 }},
@@ -27,9 +33,10 @@
         withLineNumbers: {{ $lineNumbers ? 1 : 0 }},
         withAutocompletion: {{ $autocompletion ? 1 : 0 }}
     })">
-        <div wire:ignore
-             x-ref="codeBlock"
-             class="bg-white border overflow-hidden block w-full transition duration-75 rounded-lg shadow-sm focus:border-primary-500 focus:ring-1 focus:ring-inset focus:ring-primary-500 disabled:opacity-70 dark:bg-gray-700 dark:text-white dark:focus:border-primary-500 border-gray-300 dark:border-gray-600"
-        ></div>
+        <div id="{{ $codeFieldId }}" wire:ignore>
+            <div x-ref="codeBlock"
+                 class="bg-white border overflow-hidden block w-full transition duration-75 rounded-lg shadow-sm focus:border-primary-500 focus:ring-1 focus:ring-inset focus:ring-primary-500 disabled:opacity-70 dark:bg-gray-700 dark:text-white dark:focus:border-primary-500 border-gray-300 dark:border-gray-600"
+            ></div>
+        </div>
     </div>
 </x-dynamic-component>