Copy button on Torchlight codeblock

NativePHP · simonhamp · Sep 15, 2024 · Sep 14, 2024 · Sep 14, 2024 · Sep 14, 2024
commit 8c0ddc7295c0cec65d8715ec2590d6eb07860359
diff --git a/app/Extensions/TorchlightWithCopyExtension.php b/app/Extensions/TorchlightWithCopyExtension.php
@@ -0,0 +1,38 @@
+<?php
+
+namespace App\Extensions;
+
+use Torchlight\Block;
+use Torchlight\Commonmark\V2\TorchlightExtension;
+
+class TorchlightWithCopyExtension extends TorchlightExtension
+{
+    public function defaultBlockRenderer()
+    {
+        return function (Block $block) {
+            $torchlight = parent::defaultBlockRenderer();
+
+            return <<<HTML
+                <div x-data="codeBlock" class="torchlight-with-copy relative md:rounded-md">
+                    <div class="flex space-x items-center absolute top-0 right-0">
+                        <div x-cloak x-show="showMessage" x-transition class="py-1 transition duration-300 text-indigo-400 font-bold">Copied!</div>
+                        <button
+                            type="button"
+                            title="Copy to clipboard"
+                            class="hidden sm:block p-2 transition duration-300"
+                            @click.prevent="copyToClipboard"
+                            :class="{
+                                'text-white/20 hover:text-white/60': !showMessage,
+                                'text-indigo-400 hover:text-indigo-400': showMessage,
+                            }">
+                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="block size-6">
+                              <path stroke-linecap="round" stroke-linejoin=&quo
8000
t;round" d="M11.35 3.836c-.065.21-.1.433-.1.664 0 .414.336.75.75.75h4.5a.75.75 0 00.75-.75 2.25 2.25 0 00-.1-.664m-5.8 0A2.251 2.251 0 0113.5 2.25H15c1.012 0 1.867.668 2.15 1.586m-5.8 0c-.376.023-.75.05-1.124.08C9.095 4.01 8.25 4.973 8.25 6.108V8.25m8.9-4.414c.376.023.75.05 1.124.08 1.131.094 1.976 1.057 1.976 2.192V16.5A2.25 2.25 0 0118 18.75h-2.25m-7.5-10.5H4.875c-.621 0-1.125.504-1.125 1.125v11.25c0 .621.504 1.125 1.125 1.125h9.75c.621 0 1.125-.504 1.125-1.125V18.75m-7.5-10.5h6.375c.621 0 1.125.504 1.125 1.125v9.375m-8.25-3l1.5 1.5 3-3.75" />
+                            </svg>
+                        </button>
+                    </div>
+                    {$torchlight($block)}
+                </div>
+            HTML;
+        };
+    }
+}
diff --git a/app/Support/CommonMark/CommonMark.php b/app/Support/CommonMark/CommonMark.php
@@ -2,12 +2,10 @@
 
 namespace App\Support\CommonMark;
 
+use App\Extensions\TorchlightWithCopyExtension;
 use League\CommonMark\CommonMarkConverter;
-use League\CommonMark\Extension\CommonMark\Node\Block\FencedCode;
 use League\CommonMark\Extension\CommonMark\Node\Block\Heading;
-use League\CommonMark\Extension\CommonMark\Node\Block\IndentedCode;
 use League\CommonMark\Extension\Table\TableExtension;
-use Torchlight\Commonmark\V2\TorchlightExtension;
 
 class CommonMark
 {
@@ -16,7 +14,7 @@ public static function convertToHtml(string $markdown): string
         $converter = new CommonMarkConverter();
         $converter->getEnvironment()->addRenderer(Heading::class, new HeadingRenderer());
         $converter->getEnvironment()->addExtension(new TableExtension());
-        $converter->getEnvironment()->addExtension(new TorchlightExtension());
+        $converter->getEnvironment()->addExtension(new TorchlightWithCopyExtension());
 
         return $converter->convert($markdown);
     }

diff --git a/config/torchlight.php b/config/torchlight.php
@@ -62,5 +62,8 @@
         // When lines are collapsed, this is the text that will
         // be shown to indicate that they can be expanded.
         // 'summaryCollapsedIndicator' => '...',
+
+        // Show or hide the copy button on code blocks.
+        'copyable' => true,
     ]
 ];
diff --git a/resources/css/app.css b/resources/css/app.css
@@ -99,7 +99,7 @@ nav ul li ul {
  overflow-x-auto is recommended.
 */
 .prose pre {
-    @apply p-0 my-4 overflow-x-auto bg-transparent rounded;
+    @apply p-0 my-4 overflow-x-auto bg-transparent rounded-md;
 }
 
 /*

diff --git a/resources/js/alpine/codeBlock.js b/resources/js/alpine/codeBlock.js
@@ -0,0 +1,12 @@
+
+export default () => ({
+    showMessage: false,
+    copyToClipboard() {
+        navigator.clipboard.writeText(
+            // This requires torchlight.options.copyable to be "true" on the PHP side.
+            this.$root.querySelector('.torchlight-copy-target').textContent
+        ).then(() => this.showMessage = true)
+
+        setTimeout(() => (this.showMessage = false), 2000)
+    },
+})
diff --git a/resources/js/app.js b/resources/js/app.js
@@ -1 +1,8 @@
 import './bootstrap';
+import Alpine from 'alpinejs'
+import codeBlock from "./alpine/codeBlock.js";
+
+window.Alpine = Alpine;
+
+Alpine.data('codeBlock', codeBlock)
+Alpine.start()
diff --git a/resources/js/bootstrap.js b/resources/js/bootstrap.js
@@ -9,12 +9,6 @@ window.axios = axios;
 
 window.axios.defaults.headers.common["X-Requested-With"] = "XMLHttpRequest";
 
-import Alpine from "alpinejs";
-
-window.Alpine = Alpine;
-
-Alpine.start();
-
 /**
  * Echo exposes an expressive API for subscribing to channels and listening
  * for events that are broadcast by Laravel. Echo and event broadcasting

diff --git a/resources/views/components/banner.blade.php b/resources/views/components/banner.blade.php
@@ -1,6 +1,6 @@
 <div class="lg:sticky top-0 blur-background text-white bg-gray-50/85 border-b border-gray-100 z-50 dark:bg-gray-800/85 dark:border-0">
 
-{{--    <x-alert />--}}
+    <x-alert />
     <div class="flex items-center justify-between gap-6 px-6 py-3 mx-auto max-w-screen-xl sm:py-4">
         <a
             href="/"

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -6,6 +6,7 @@ export default {
         "./vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php",
         "./storage/framework/views/*.php",
         "./resources/views/**/*.blade.php",
+        "./app/Extensions/**/*.php",
     ],
 
     safelist: ['inline', 'text-red-600', 'mr-2', 'font-bold', 'no-underline'],