Closed bakerkretzmar closed 1 year ago
If you disable the underline button, does it work? The underline button is custom to Filament.
If you disable the underline button, does it work?
Nope. If the underline button is disabled/hidden, creating a link underlines it and then if you remove the link there's actually no way to remove the underline at all.
This is a Trix bug, but only happens if you enable the underline in JavaScript:
Trix.config.textAttributes.underline = {
style: { textDecoration: 'underline' },
inheritable: true,
parser: (element) => {
const style = window.getComputedStyle(element)
return style.textDecoration.includes('underline')
},
}
@danharrin I'm not sure I understand your comment. I'm not doing anything in JavaScript, this is Filament's behaviour out of the box. If I disable the underline button, link some text, and then unlink it, it's underlined with no way to remove the underline. Is that code snippet something I need to add somewhere? Or is it what Filament is currently doing?
Filament adds an underline button to Trix, as Trix doesnt have that functionality out of the box. We are not doing anything special, the Trix-reccomended way. There's nothing we can do our end to fix it, as far as I can see. https://github.com/filamentphp/filament/blob/3.x/packages/forms/resources/js/components/rich-editor.js#L21-L29
@bakerkretzmar Did you find a way to fix this? @danharrin The problem still persists. I'm not sure if the bug originates from Trix. As described in the issue it isn't the default behaviour of Trix. When removing links in their demo, there is no underline added to the text. When using the Filament RichEditor field it gets added and has to be removed manually. If it is caused by the added underline functionality of Filament there might be a way to fix it on this side. Currently the only way is to remove the link functionality from the toolbar. Removing the underline button doesn't fix the problem (probably because the underline functionality is still added regardless).
I’m having the same problem. Link text is wrapped with with spans, which is useful in the editor. For some reason the spans are added to the outputted HTML too, which is annoying if your CSS does not include underlines for links.
e.g.
<a href="https://github.com"><span style="text-decoration: underline;">GitHub</span></a>
When the link is removed, the "a" tag is removed, but not the "span".
The issue still persists. I added a workaround fix on my project for now. It's hacked together so if you find improvements or better solutions, let me know.
// workaround fix for issue with underline after link removal in filament richtext field
// https://github.com/filamentphp/filament/issues/6860
Livewire.hook('element.init', ({ el }) => {
const inputs = el.querySelectorAll('[data-trix-dialog="href"] input[data-trix-method="removeAttribute"]');
inputs.forEach(input => {
input.addEventListener('click', () => {
const editorEl = input.closest('.fi-input-wrp')?.querySelector('trix-editor');
if (editorEl) {
setTimeout(() => {
editorEl.editor.deactivateAttribute('underline');
}, 10);
}
});
});
});
I can confirm that issue is exists. When creating and removing a link it make text underlined, without ability to remove underline from text
It is the default behaviour of Trix if you also implement an underline feature. It is not the default behaviour if you do not have an underline button, hence why their demo is not broken.
It is the default behaviour of Trix if you also implement an underline feature. It is not the default behaviour if you do not have an underline button, hence why their demo is not broken.
I completely understand that. I think underline should be excluded from editor as it causes some issues. It is style not markup tag. BTW, tiptap and other editors still use tag. So there should be a way to implement it use tag
Who is searching easy way to fix issue, just rebuild styles for admin panel change tailwind typography links not to use underline
Unfortunately we can't remove it, that would be a breaking change.
Package
filament/filament
Package Version
2.17.49
Laravel Version
10.13.5
Livewire Version
No response
PHP Version
8.2.7
Problem description
Creating a link underlines the link text, but removing the link does not remove the underline. This makes it unnecessarily complicated to completely remove a link, and if underlining is not enabled in the editor it's actually impossible to remove.
Note: this is not Trix's default behaviour—at https://trix-editor.org, adding links underlines their text and removing the link removes the underline.
Expected behavior
Removing a link should also un-underline the link text.
Steps to reproduce
Demo:
https://github.com/filamentphp/filament/assets/18192441/26aab522-a1f2-4b40-9a4c-0972170a075d
Reproduction repository
https://github.com/bakerkretzmar/filament-underline-issue
Relevant log output
No response