F
Filament•5mo ago
bernhard

Can't use svg in TextColumn

What I want to achive is a column which shows an icon and when you click on it, a defined text is copied to the clipboard. The problem is, that the IconColumn has no copyable method, so I tried to use the TextColumn: 
TextColumn::make("copy_column")
  ->getStateUsing("Copy")
  ->copyable()
  ->copyableState(fn($record) => $record->id)
TextColumn::make("copy_column")
  ->getStateUsing("Copy")
  ->copyable()
  ->copyableState(fn($record) => $record->id)
this works as expected and it shows the text "Copy". Now I tried to use an icon: 
TextColumn::make("copy_column")
            ->getStateUsing(function() {
                return new HtmlString(
                    '<svg style="width: 20px; height: 20px;" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true">
                      <path stroke-linecap="round" stroke-linejoin="round" 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>');
            })
            ->html()
            ->copyable()
            ->copyableState(fn($record) => $record->id)
TextColumn::make("copy_column")
            ->getStateUsing(function() {
                return new HtmlString(
                    '<svg style="width: 20px; height: 20px;" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true">
                      <path stroke-linecap="round" stroke-linejoin="round" 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>');
            })
            ->html()
            ->copyable()
            ->copyableState(fn($record) => $record->id)
but the column is empty. Any ideas?
Solution:
ugly, but maybe this works ```php ->icon('heroicon-o-clipboard') ->getStateUsing(fn () => '<span></span>') ->html()...
Jump to solution
23 Replies
bernhard
bernhard•5mo ago
Btw. using an (base64) image works: 
TextColumn::make("copy_column")
  ->getStateUsing(function() {
      return new HtmlString(
          '<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAAsQAAALEBxi1JjQAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAADlSURBVEiJ7dWxSgNBFAXQEw2kSGyF1IJdCsvt0lnlM/Qb/IR8UiD+ggnBMrY2SadYRAQtdgaWJbuZhU2R4G0ee7nv3Zk7sI9TR2cPN8ITrmv6vvCA7SGDbul7gGdcYpl2xmbI8ItJWwPLN+iF+hlqSlwRG0zxWiQvahpiXPcJwwXdPPRVYiyPaKx5XJOgz4pk3Q3KcR1C1PWKZJ1BK/g3aGwQH+rjWAYvuMXiWAawbmt4lUGrOG+DXahXibOiblck9220iAHe5L/0lOVzhx/cyDce8s1VhW/MMEQ/wWCFR7wnaE8If/ABIVrL7Im7AAAAAElFTkSuQmCC">');
  })
  ->html()
  ->copyable()
  ->copyableState(fn($record) => $record->id)
TextColumn::make("copy_column")
  ->getStateUsing(function() {
      return new HtmlString(
          '<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAAsQAAALEBxi1JjQAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAADlSURBVEiJ7dWxSgNBFAXQEw2kSGyF1IJdCsvt0lnlM/Qb/IR8UiD+ggnBMrY2SadYRAQtdgaWJbuZhU2R4G0ee7nv3Zk7sI9TR2cPN8ITrmv6vvCA7SGDbul7gGdcYpl2xmbI8ItJWwPLN+iF+hlqSlwRG0zxWiQvahpiXPcJwwXdPPRVYiyPaKx5XJOgz4pk3Q3KcR1C1PWKZJ1BK/g3aGwQH+rjWAYvuMXiWAawbmt4lUGrOG+DXahXibOiblck9220iAHe5L/0lOVzhx/cyDce8s1VhW/MMEQ/wWCFR7wnaE8If/ABIVrL7Im7AAAAAElFTkSuQmCC">');
  })
  ->html()
  ->copyable()
  ->copyableState(fn($record) => $record->id)
LeandroFerreira
LeandroFerreira•5mo ago
->formatStateUsing(fn () => new HtmlString(Blade::render('<x-heroicon-o-clipboard class="w-5 h-5"/>')))
->formatStateUsing(fn () => new HtmlString(Blade::render('<x-heroicon-o-clipboard class="w-5 h-5"/>')))
bernhard
bernhard•5mo ago
Tried that as well, not working.
bernhard
bernhard•5mo ago
Funny thing is, that the cell is empty
No description
bernhard
bernhard•5mo ago
Using Blade:render and just plain return new HtmlString( '<svg style="width: 20px;...
bernhard
bernhard•5mo ago
while using <img> it works
No description
Tim van Heugten
Tim van Heugten•5mo ago
How about when you make it a custom icon as explained here: https://filamentphp.com/docs/3.x/support/icons
Icons - Core Concepts - Filament
Tim van Heugten
Tim van Heugten•5mo ago
Good idea for reusability anyway
bernhard
bernhard•5mo ago
Why? The heroicon-o-clipboard is just fine, I don't need a custom icon.
Tim van Heugten
Tim van Heugten•5mo ago
Oh sorry, thought you were looking for a custom icon.
LeandroFerreira
LeandroFerreira•5mo ago
share the whole code please
awcodes
awcodes•5mo ago
Html runs through symfony/html-sanitizer, it might be that svg isn’t an allowed tag.
bernhard
bernhard•5mo ago
The whole code is just 
TextColumn::make("copy_column")
  ->getStateUsing(function() {
      return new HtmlString(
          '<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAAsQAAALEBxi1JjQAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAADlSURBVEiJ7dWxSgNBFAXQEw2kSGyF1IJdCsvt0lnlM/Qb/IR8UiD+ggnBMrY2SadYRAQtdgaWJbuZhU2R4G0ee7nv3Zk7sI9TR2cPN8ITrmv6vvCA7SGDbul7gGdcYpl2xmbI8ItJWwPLN+iF+hlqSlwRG0zxWiQvahpiXPcJwwXdPPRVYiyPaKx5XJOgz4pk3Q3KcR1C1PWKZJ1BK/g3aGwQH+rjWAYvuMXiWAawbmt4lUGrOG+DXahXibOiblck9220iAHe5L/0lOVzhx/cyDce8s1VhW/MMEQ/wWCFR7wnaE8If/ABIVrL7Im7AAAAAElFTkSuQmCC">');
  })
  ->html()
  ->copyable()
  ->copyableState(fn($record) => $record->id)
TextColumn::make("copy_column")
  ->getStateUsing(function() {
      return new HtmlString(
          '<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAAsQAAALEBxi1JjQAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAADlSURBVEiJ7dWxSgNBFAXQEw2kSGyF1IJdCsvt0lnlM/Qb/IR8UiD+ggnBMrY2SadYRAQtdgaWJbuZhU2R4G0ee7nv3Zk7sI9TR2cPN8ITrmv6vvCA7SGDbul7gGdcYpl2xmbI8ItJWwPLN+iF+hlqSlwRG0zxWiQvahpiXPcJwwXdPPRVYiyPaKx5XJOgz4pk3Q3KcR1C1PWKZJ1BK/g3aGwQH+rjWAYvuMXiWAawbmt4lUGrOG+DXahXibOiblck9220iAHe5L/0lOVzhx/cyDce8s1VhW/MMEQ/wWCFR7wnaE8If/ABIVrL7Im7AAAAAElFTkSuQmCC">');
  })
  ->html()
  ->copyable()
  ->copyableState(fn($record) => $record->id)
Or not working: 
TextColumn::make("copy_column")
            ->formatStateUsing(fn () => new HtmlString(Blade::render('<x-heroicon-o-clipboard class="w-5 h-5"/>')))
            ->html()
            ->copyable()
            ->copyableState(fn($record) => $record->id)
TextColumn::make("copy_column")
            ->formatStateUsing(fn () => new HtmlString(Blade::render('<x-heroicon-o-clipboard class="w-5 h-5"/>')))
            ->html()
            ->copyable()
            ->copyableState(fn($record) => $record->id)
The problem is, that it seems that svg is somehow parsed out everything else works
awcodes
awcodes•5mo ago
See my message
bernhard
bernhard•5mo ago
Oh. That miight be the problem 😮
LeandroFerreira
LeandroFerreira•5mo ago
ahh, use getStateUsing instead of formatStateUsing probably copy_column isnt a column..
bernhard
bernhard•5mo ago
Tried both Thats right, but thats irrelevant, since all other versions are working, including regular text, html and even images. @awcodes is right. SVG gets parsed out. Will make a PR to add copyable to IconColumn ;). Thanks all for your time!
awcodes
awcodes•5mo ago
You could possibly bind to the HtmlSanitizerInterface and modify the settings too. Currently it’s using ->allowSafeElements() and svg isn’t considered a safe element since it’s technically executable markup outside of a code block.
Solution
LeandroFerreira
LeandroFerreira•5mo ago
ugly, but maybe this works 
->icon('heroicon-o-clipboard')
->getStateUsing(fn () => '<span></span>')
->html()
->icon('heroicon-o-clipboard')
->getStateUsing(fn () => '<span></span>')
->html()
bernhard
bernhard•5mo ago
This works. Thanks! Didn't know there was an icon method on the TextColumn 😄
LeandroFerreira
LeandroFerreira•5mo ago
yes, there is.. But it is joining with the state, and I had thought you didn't want this.
bernhard
bernhard•5mo ago
In my case, this doesn't matter, since i dont need the state at all, since I get the state for the clipboard by myself copyableState. Thank you very much
LeandroFerreira
LeandroFerreira•5mo ago
nice, because I didn't like this ->getStateUsing(fn () => '<span></span>') 😅
Want results from more Discord servers?
Add your server
More Posts
How can I dynamically update my Select options based on an APII've got a textInput where a user can enter their zipcode/postcode and a button that does a lookup vCreateOptionForm is not showingI have a working form that contains a select field to set a user's `city_id`. I'm trying to add a crHow to properly set up Filament when building a customer-facing app using TALL Stack presetIt's my first attempt at building a customer-facing Filament app. Here is what I have done step-by-get some field value outside on createOptionForm methodhi i tried $get('some_field') or i add ../ its not workIs it possible to add paramaters to an import action?I want to achieve the following: I got an contact_group and on that contact_group i want to import cAuto-Refresh Not WorkingI've recently installed a new custom theme and followed the necessary steps. However, I have an issuRedirect to panel with notificationDoes anyone know how to redirect from a controller to a panel with a notification? `return redirectTailwind colors doesn't workHi, I have a simple panel in Filament 3, and when I add some Custom Columns with Tailwind colours, iHow to get the Url for a Relation ManagerI am trying to customize the breadcrumb of a custom page and trying to redirect one of the breadcrumHow to show simple array on view page?Hey guys, in my model I have simple array attribute `answers` in this format: ```php [ "Gender" =>