Broken link underlining in `RichEditor`

[bakerkretzmar]

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

• Create any RichEditor field and enter any text in it.
• Turn any text into a link.
• Remove the link.

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

[danharrin]

If you disable the underline button, does it work? The underline button is custom to Filament.

[bakerkretzmar]

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.

[danharrin]

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')
    },
}

[bakerkretzmar]

@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?

[danharrin]

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

[raphaelportmann]

@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).

[mikebirch]

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".

[raphaelportmann]

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);
            }
        });
    });
});

[therezor]

I can confirm that issue is exists. When creating and removing a link it make text underlined, without ability to remove underline from text

[danharrin]

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.

[therezor]

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

[danharrin]

Unfortunately we can't remove it, that would be a breaking change.