Merge pull request #4885 from Roardom/improve-bbcode-code-blocks

app/Helpers/Bbcode.php

@@ -183,8 +183,8 @@ class Bbcode
         'code' => [
             'openBbcode'  => '/^\[code\]/i',
             'closeBbcode' => '[/code]',
-            'openHtml'    => '<pre>',
-            'closeHtml'   => '</pre>',
+            'openHtml'    => '<div class="bbcode-rendered__clipboard" x-data="clipboardButton"><pre><code>',
+            'closeHtml'   => '</code></pre><div class="bbcode-rendered__clipboard-container"><button class="bbcode-rendered__clipboard-button" x-bind="button"><i class="fa fa-clone"></i></button></div></div>',
             'block'       => true,
         ],
         'pre' => [

resources/js/app.js

@@ -41,6 +41,7 @@ import { Livewire, Alpine } from '../../vendor/livewire/livewire/dist/livewire.e
 // Custom AlpineJS Components
 import './components/alpine/chatbox';
 import './components/alpine/checkboxGrid';
+import './components/alpine/clipboardButton';
 import './components/alpine/dialog';
 import './components/alpine/dislikeButton';
 import './components/alpine/likeButton';

resources/js/components/alpine/clipboardButton.js

@@ -0,0 +1,12 @@
+document.addEventListener('alpine:init', () => {
+    Alpine.data('clipboardButton', () => ({
+        button: {
+            ['x-on:click']() {
+                let text = this.$root
+                    .querySelector('pre > code')
+                    .innerHTML.replace(/<br>/g, '\r\n');
+                navigator.clipboard.writeText(text);
+            },
+        },
+    }));
+});

resources/sass/base/_reset.scss

@@ -25,7 +25,13 @@ a {
 
 code,
 pre {
-    font-family: 'Roboto Mono', Menlo, Monaco, Consolas, 'Courier New',
+    font-family:
+        ui-monospace,
+        SFMono-Regular,
+        SF Mono,
+        Menlo,
+        Consolas,
+        Liberation Mono,
         monospace;
     font-size: 12px;
     line-height: 1.46666667;

resources/sass/components/_bbcode-rendered.scss

@@ -229,12 +229,12 @@
     ol,
     dl,
     table,
-    pre,
     .bbcode-rendered__center,
     .bbcode-rendered__left,
     .bbcode-rendered__right,
     .bbcode-rendered__alert,
-    .bbcode-rendered__note {
+    .bbcode-rendered__note,
+    .bbcode-rendered__clipboard {
         margin-top: 12px;
         margin-bottom: 12px;
     }
@@ -383,17 +383,15 @@
     }
 
     pre {
-        background-color: var(--bbcode-rendered-neutral-muted);
-        color: var(--bbcode-rendered-fg-default);
         border: revert;
-        border-radius: 6px;
         font-size: 12px;
         word-wrap: normal;
-        overflow: visible;
+        overflow: auto;
         line-height: inherit;
         word-break: break-word;
         overflow-wrap: anywhere;
         white-space: pre-wrap;
+        margin: 0;
         padding: 12px;
     }
 
@@ -402,7 +400,7 @@
         margin: 0;
         word-break: normal;
         overflow-wrap: anywhere;
-        white-space: normal;
+        white-space: break-spaces;
         font-size: 13px;
         background-color: var(--bbcode-rendered-neutral-muted);
         border-radius: 6px;
@@ -421,7 +419,9 @@
     }
 
     pre > code {
-        white-space: pre-wrap;
+        word-break: normal;
+        white-space: pre;
+        background-color: transparent;
     }
 
     pre code {
@@ -429,11 +429,36 @@
         padding: 0;
         overflow: visible;
         line-height: inherit;
+        word-wrap: normal;
         overflow-wrap: anywhere;
         background-color: transparent;
         border: 0;
     }
 
+    .bbcode-rendered__clipboard {
+        display: flex;
+        justify-content: space-between;
+        background-color: var(--bbcode-rendered-neutral-muted);
+        color: var(--bbcode-rendered-fg-default);
+        border-radius: 6px;
+        position: relative;
+        overflow: auto;
+    }
+
+    .bbcode-rendered__clipboard-button {
+        display: block;
+        background: transparent;
+        border: none;
+        margin: 6px;
+        color: var(--bbcode-rendered-fg-muted);
+        cursor: pointer;
+    }
+
+    .bbcode-rendered__clipboard-button:hover,
+    .bbcode-rendered__clipboard-button:focus {
+        color: var(--bbcode-rendered-fg-default);
+    }
+
     /* Markdown Extra footnotes */
 
     sup {

resources/sass/components/_mediainfo.scss

@@ -79,3 +79,15 @@
 .mediainfo__encode-settings {
     flex-basis: 100%;
 }
+
+.mediainfo__encode-settings pre,
+.torrent-mediainfo-dump pre {
+    padding: 12px;
+    background-color: var(--bbcode-rendered-neutral-muted);
+    color: var(--bbcode-rendered-fg-default);
+    border-radius: 6px;
+    font-size: 12px;
+    white-space: pre-wrap;
+    word-break: break-word;
+    overflow-wrap: anywhere;
+}

resources/views/torrent/partials/mediainfo.blade.php

@@ -22,7 +22,7 @@
         </div>
     </header>
     <div class="panel__body">
-        <div class="torrent-mediainfo-dump bbcode-rendered" x-cloak x-show="isExpanded">
+        <div class="torrent-mediainfo-dump" x-cloak x-show="isExpanded">
             <pre><code x-ref="mediainfo">{{ $torrent->mediainfo }}</code></pre>
         </div>
         <section class="mediainfo">
@@ -151,9 +151,7 @@
                             @isset($videoElement['encoding_settings'])
                                 <article>
                                     <h4>#{{ $key }}</h4>
-                                    <div class="bbcode-rendered">
-                                        <pre><code>{{ $videoElement['encoding_settings'] ?? __('common.unknown') }}</code></pre>
-                                    </div>
+                                    <pre><code>{{ $videoElement['encoding_settings'] ?? __('common.unknown') }}</code></pre>
                                 </article>
                             @endisset
                         @endforeach