| 1 |
import { decodeEntities } from '@wordpress/html-entities'; |
| 2 |
import { chevronRightSmall, Icon } from '@wordpress/icons'; |
| 3 |
|
| 4 |
// A started label reads as still running, so a finished step drops its dots. |
| 5 |
const stepText = ({ label, started }) => |
| 6 |
decodeEntities(label || started.replace(/\s*(\.\.\.|…)$/, '')); |
| 7 |
|
| 8 |
const resultText = (result) => |
| 9 |
typeof result === 'string' ? result : JSON.stringify(result, null, 2); |
| 10 |
|
| 11 |
// highlightAll clears every block it painted, so each call covers them all. |
| 12 |
const SELECTOR = 'pre > code.language-json'; |
| 13 |
|
| 14 |
export const highlightToolSteps = (root) => { |
| 15 |
// Without the Custom Highlight API the JSON stays plain text. |
| 16 |
if (!window.CSS?.highlights || !root?.querySelector(SELECTOR)) return; |
| 17 |
import('microlighter') |
| 18 |
.then(({ highlightAll }) => highlightAll({ root, selector: SELECTOR })) |
| 19 |
.catch(() => {}); |
| 20 |
}; |
| 21 |
|
| 22 |
export const ToolStep = ({ details }) => { |
| 23 |
if (details.result === undefined) { |
| 24 |
return ( |
| 25 |
<div className="mb-2 ms-2 me-2 ps-5 text-sm text-gray-700"> |
| 26 |
{stepText(details)} |
| 27 |
</div> |
| 28 |
); |
| 29 |
} |
| 30 |
return ( |
| 31 |
<details className="group mb-2 ms-2 me-2 text-sm text-gray-700"> |
| 32 |
<summary className="flex w-fit cursor-pointer list-none items-center gap-0.5 hover:text-gray-900 [&::-webkit-details-marker]:hidden"> |
| 33 |
<Icon |
| 34 |
icon={chevronRightSmall} |
| 35 |
size={20} |
| 36 |
className="fill-current transition-transform group-open:rotate-90 rtl:-scale-x-100" |
| 37 |
/> |
| 38 |
<span>{stepText(details)}</span> |
| 39 |
</summary> |
| 40 |
<pre className="m-0 mt-1 max-h-[200px] overflow-auto whitespace-pre-wrap break-words rounded-sm bg-gray-100 p-2 font-mono text-xs text-gray-800"> |
| 41 |
<code |
| 42 |
className={ |
| 43 |
typeof details.result === 'string' ? undefined : 'language-json' |
| 44 |
} |
| 45 |
> |
| 46 |
{resultText(details.result)} |
| 47 |
</code> |
| 48 |
</pre> |
| 49 |
</details> |
| 50 |
); |
| 51 |
}; |
| 52 |
|
