html specialchars

[cg0012]

This is within a laravel project

I am linking to a shared network folder file. An example of the returned text to copy is:
\\cadd1\ImageArchives\output\RevAL\12146.tif

I have a blade component that seems to be working as expected:

//x-clipboard-copy

@props(['text'])

<div x-data="{ clip: '{!! htmlspecialchars($text) !!}' }">
  <button class="rounded-md shadow-md px-1 py-1 text-xs bg-blue-400 hover:bg-blue-500 text-gray-50 border border-slate-500" type="button" @click="$clipboard(clip)">
    <x-icon.clipboard-copy />
  </button>
</div>

and within my blade file:

<x-clipboard-copy text="{{ $show->file_path }}" />

inspecting the element within dev tools:

<div x-data="{ clip: '\\cadd1\ImageArchives\output\RevAL\12146.tif' }">
  <button class="rounded-md shadow-md px-1 py-1 text-xs bg-blue-400 hover:bg-blue-500 text-gray-50 border border-slate-500" type="button" @click="$clipboard(clip)">
    <svg class="flex-shrink-0 h-5 w-5 transition ease-in-out duration-150" viewBox="0 0 24 24" fill="none" stroke="currentColor">
  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3"></path>
</svg>
  </button>
</div>

looks great..however the text copied is: \cadd1ImageArchivesoutputRevALQ46.tif

any ideas on how I can escape this and get the special characters in the copy? Thanks!

[ryangjchandler]

@cg0012 You might be better of doing something like { clip: @js(htmlspecialchars($text)) } instead.