|
|
|
|
@ -12,7 +12,6 @@
@@ -12,7 +12,6 @@
|
|
|
|
|
let { open = $bindable(false), event = $bindable(null) }: Props = $props(); |
|
|
|
|
let jsonText = $derived(event ? JSON.stringify(event, null, 2) : ''); |
|
|
|
|
let copied = $state(false); |
|
|
|
|
let wordWrap = $state(true); // Default to word-wrap enabled |
|
|
|
|
let jsonPreviewRef: HTMLElement | null = $state(null); |
|
|
|
|
|
|
|
|
|
// Highlight JSON when it changes |
|
|
|
|
@ -73,16 +72,6 @@
@@ -73,16 +72,6 @@
|
|
|
|
|
<div class="modal-header"> |
|
|
|
|
<h2>Event JSON</h2> |
|
|
|
|
<div class="header-actions"> |
|
|
|
|
<button |
|
|
|
|
onclick={() => wordWrap = !wordWrap} |
|
|
|
|
class="word-wrap-button" |
|
|
|
|
class:active={wordWrap} |
|
|
|
|
aria-label={wordWrap ? 'Disable word wrap' : 'Enable word wrap'} |
|
|
|
|
title={wordWrap ? 'Disable word wrap' : 'Enable word wrap'} |
|
|
|
|
> |
|
|
|
|
<Icon name="code" size={18} /> |
|
|
|
|
<span>{wordWrap ? 'Wrap: ON' : 'Wrap: OFF'}</span> |
|
|
|
|
</button> |
|
|
|
|
<button onclick={close} class="close-button" aria-label="Close"> |
|
|
|
|
<Icon name="x" size={20} /> |
|
|
|
|
</button> |
|
|
|
|
@ -90,7 +79,7 @@
@@ -90,7 +79,7 @@
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
<div class="modal-body"> |
|
|
|
|
<pre class="json-preview" class:word-wrap={wordWrap}><code bind:this={jsonPreviewRef} class="language-json">{jsonText}</code></pre> |
|
|
|
|
<pre class="json-preview"><code bind:this={jsonPreviewRef} class="language-json">{jsonText}</code></pre> |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
<div class="modal-footer"> |
|
|
|
|
@ -205,47 +194,6 @@
@@ -205,47 +194,6 @@
|
|
|
|
|
color: var(--fog-dark-text, #f1f5f9); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.word-wrap-button { |
|
|
|
|
background: var(--fog-border, #e5e7eb); |
|
|
|
|
border: none; |
|
|
|
|
border-radius: 4px; |
|
|
|
|
cursor: pointer; |
|
|
|
|
padding: 0.375rem 0.75rem; |
|
|
|
|
color: var(--fog-text, #1f2937); |
|
|
|
|
display: inline-flex; |
|
|
|
|
align-items: center; |
|
|
|
|
gap: 0.375rem; |
|
|
|
|
font-size: 0.875rem; |
|
|
|
|
transition: background-color 0.2s; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.word-wrap-button:hover { |
|
|
|
|
background: var(--fog-highlight, #f3f4f6); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.word-wrap-button.active { |
|
|
|
|
background: var(--fog-accent, #64748b); |
|
|
|
|
color: white; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.word-wrap-button.active:hover { |
|
|
|
|
background: var(--fog-accent-dark, #475569); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
:global(.dark) .word-wrap-button { |
|
|
|
|
background: var(--fog-dark-border, #374151); |
|
|
|
|
color: var(--fog-dark-text, #f1f5f9); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
:global(.dark) .word-wrap-button:hover { |
|
|
|
|
background: var(--fog-dark-highlight, #475569); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
:global(.dark) .word-wrap-button.active { |
|
|
|
|
background: var(--fog-accent, #64748b); |
|
|
|
|
color: white; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.close-button { |
|
|
|
|
background: none; |
|
|
|
|
border: none; |
|
|
|
|
@ -267,7 +215,7 @@
@@ -267,7 +215,7 @@
|
|
|
|
|
.modal-body { |
|
|
|
|
padding: 1rem; |
|
|
|
|
flex: 1; |
|
|
|
|
overflow: auto; |
|
|
|
|
overflow: hidden; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.json-preview { |
|
|
|
|
@ -276,19 +224,15 @@
@@ -276,19 +224,15 @@
|
|
|
|
|
border-radius: 4px; |
|
|
|
|
padding: 1rem; |
|
|
|
|
margin: 0; |
|
|
|
|
overflow-x: auto; |
|
|
|
|
max-height: 60vh; |
|
|
|
|
white-space: pre; |
|
|
|
|
text-align: left; /* Ensure text aligns left */ |
|
|
|
|
position: relative; /* Ensure proper stacking context */ |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.json-preview.word-wrap { |
|
|
|
|
overflow-x: visible !important; |
|
|
|
|
overflow-y: auto !important; |
|
|
|
|
max-height: 60vh; |
|
|
|
|
white-space: pre-wrap !important; |
|
|
|
|
word-wrap: break-word !important; |
|
|
|
|
word-break: break-word !important; |
|
|
|
|
overflow-wrap: break-word !important; |
|
|
|
|
text-align: left; /* Ensure text aligns left */ |
|
|
|
|
position: relative; /* Ensure proper stacking context */ |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.json-preview code { |
|
|
|
|
@ -299,20 +243,16 @@
@@ -299,20 +243,16 @@
|
|
|
|
|
font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', 'Droid Sans Mono', 'Source Code Pro', monospace; |
|
|
|
|
font-size: 0.875rem; |
|
|
|
|
line-height: 1.5; |
|
|
|
|
white-space: pre; |
|
|
|
|
position: relative; /* Ensure proper stacking */ |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.json-preview.word-wrap code { |
|
|
|
|
overflow-x: visible !important; |
|
|
|
|
white-space: pre-wrap !important; |
|
|
|
|
word-wrap: break-word !important; |
|
|
|
|
word-break: break-word !important; |
|
|
|
|
overflow-wrap: break-word !important; |
|
|
|
|
overflow-x: visible !important; |
|
|
|
|
position: relative; /* Ensure proper stacking */ |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.json-preview.word-wrap :global(code.hljs), |
|
|
|
|
.json-preview.word-wrap :global(code.hljs *) { |
|
|
|
|
.json-preview :global(code.hljs), |
|
|
|
|
.json-preview :global(code.hljs *) { |
|
|
|
|
overflow-x: visible !important; |
|
|
|
|
white-space: pre-wrap !important; |
|
|
|
|
word-wrap: break-word !important; |
|
|
|
|
|