adicionando botao de copiar texto e ajustando estilos

Author: bernardoazevedo

public/assets/js/script.js

@@ -41,7 +41,7 @@ $(document).ready(function(){
         root.style.setProperty('--backgroundColor', newColor);
     });
 
-    $('#titleMargin').on('change', function(){
+    $('#titleMargin').on('change', function( ){
         let newTitleMargin = $(this).val();
         root.style.setProperty('--titleMargin', newTitleMargin+'px');
     });
@@ -50,4 +50,22 @@ $(document).ready(function(){
         let newMarginHeight = $(this).val();
         root.style.setProperty('--marginHeight', newMarginHeight+'px');
     });
+
+    $('.copy-button').click(function() {
+        event.preventDefault();
+
+        let elementName = $(this).children()[0].value;
+        elementToCopy = $('#'+elementName);
+
+        let textToCopy = elementToCopy.text();
+        if(textToCopy == ''){
+            textToCopy = elementToCopy.val();
+        }
+
+        let tempTextarea = $('<textarea>');
+        $('body').append(tempTextarea);
+        tempTextarea.val(textToCopy).select();
+        document.execCommand('copy');
+        tempTextarea.remove();
+      });
 });

resources/views/components/color-input.blade.php

@@ -1,3 +1,3 @@
 @props(['disabled' => false])
 
-<input @disabled($disabled) type="color" {{ $attributes->merge(['class' => 'rounded p-1 w-full h-10 cursor-pointer border border-stone-300 bg-white shadow-sm hover:bg-stone-100 focus:border-emerald-500 focus:ring-emerald-500 focus:border-2']) }}>
+<input @disabled($disabled) type="color" {{ $attributes->merge(['class' => 'rounded p-1 w-full h-10 cursor-pointer border border-stone-300 bg-white shadow-sm hover:bg-stone-100 focus:border-emerald-500 focus:ring-emerald-500 focus:border-2 transition ease-in-out duration-150']) }}>

resources/views/components/copy-button.blade.php

@@ -0,0 +1,13 @@
+@props(['value'])
+
+<button {{ $attributes->merge(['class' => "copy-button cursor-pointer inline-flex items-center px-1 py-1 bg-white border border-stone-300 rounded-md font-semibold
+        text-xs text-stone-700 uppercase tracking-widest shadow-sm hover:bg-stone-50 focus:outline-none focus:ring-2 focus:ring-emerald-500
+        focus:ring-offset-2 disabled:opacity-25 transition ease-in-out duration-150"])
+    }}>
+    <input type="hidden" name="elementToCopy" value="{{ $value ?? '' }}">
+    {{ $slot }}
+    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
+        <path stroke-linecap="round" stroke-linejoin="round" d="M15.666 3.888A2.25 2.25 0 0 0 13.5 2.25h-3c-1.03 0-1.9.693-2.166 1.638m7.332 0c.055.194.084.4.084.612v0a.75.75 0 0 1-.75.75H9a.75.75 0 0 1-.75-.75v0c0-.212.03-.418.084-.612m7.332 0c.646.049 1.288.11 1.927.184 1.1.128 1.907 1.077 1.907 2.185V19.5a2.25 2.25 0 0 1-2.25 2.25H6.75A2.25 2.25 0 0 1 4.5 19.5V6.257c0-1.108.806-2.057 1.907-2.185a48.208 48.208 0 0 1 1.927-.184" />
+    </svg>
+</button>
+

resources/views/components/text-input.blade.php

@@ -1,3 +1,3 @@
 @props(['disabled' => false])
 
-<input @disabled($disabled) {{ $attributes->merge(['class' => 'border-stone-300 focus:border-emerald-500 focus:ring-emerald-500 rounded shadow-sm hover:bg-stone-100']) }}>
+<input @disabled($disabled) {{ $attributes->merge(['class' => 'border-stone-300 focus:border-emerald-500 focus:ring-emerald-500 rounded shadow-sm hover:bg-stone-100 transition ease-in-out duration-150']) }}>

resources/views/content/partials/parsed-content.blade.php

@@ -1,5 +1,8 @@
 <x-section class="col-span-5 order-2 lg:col-span-2 lg:order-3 flex flex-col">
-    <header class="text-lg font-medium px-4 py-2">Preview Content</header>
+    <header class="text-lg font-medium px-4 py-2 flex justify-between items-center">
+        <span>Preview Content</span>
+        <x-copy-button value='htmlText'></x-copy-button>
+    </header>
 
     <div id="htmlText" class="parsedown flex flex-col gap-y-2 sm:w-auto p-4 h-max grow rounded-b">
         Formatted content will appear here

resources/views/content/partials/write-content.blade.php

@@ -1,9 +1,12 @@
 <x-section class="col-span-5 order-1 lg:col-span-2 lg:order-2">
-    <header class="text-lg font-medium px-4 py-2">Write here</header>
+    <header class="text-lg font-medium px-4 py-2 flex justify-between items-center">
+        <span>Write here</span>
+        <x-copy-button value='text'></x-copy-button>
+    </header>
 
-    <div class="grow-wrap dont-break-out">
+    <div id="replicated-value" class="grow-wrap dont-break-out">
         <textarea id="text" name="text" type="text" rows="27" cols=""
-            class="p-4 block w-full rounded-b border-white focus:border-emerald-500 focus:ring-emerald-500 focus:border-1"
+            class="p-4 block w-full rounded-b border-white focus:border-emerald-500 focus:ring-emerald-500 focus:border-1 transition ease-in-out duration-150"
             required autofocus autocomplete="text" placeholder="Type here"
             onInput="this.parentNode.dataset.replicatedValue = this.value"></textarea>
     </div>

resources/views/layouts/app.blade.php

@@ -53,5 +53,5 @@
 
     <script src="{{ url('assets/js/jquery-3.7.1.min.js') }}"></script>
     <script src="{{ url('assets/js/js.cookie.min.js') }}"></script>
-    <script src="{{ url('assets/js/script.js?v1') }}"></script>
+    <script src="{{ url('assets/js/script.js?v2') }}"></script>
 </html>