Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Editor: customizing configuration of tiptap extension #990

Closed
3 tasks done
gdebrauwer opened this issue Jan 14, 2025 · 2 comments
Closed
3 tasks done

Editor: customizing configuration of tiptap extension #990

gdebrauwer opened this issue Jan 14, 2025 · 2 comments

Comments

@gdebrauwer
Copy link

gdebrauwer commented Jan 14, 2025 •
edited
Loading

Flux version

v1.1.2

Livewire version

v3.5.18

What is the problem?

In a project, I added custom protocols to the link extension using the following code:

window.customElements.whenDefined('ui-editor').then(() => {
    document.querySelectorAll('ui-editor').forEach(uiEditor => {
        let editor = uiEditor.editor;
        let toolbar = uiEditor.querySelector('ui-toolbar');

        editor.extensionManager.extensions.filter(extension => extension.name == 'link')[0].options.protocols = ['mailto', 'page', 'procedure', 'legislation'];
        editor.setOptions();
    });
})

This works if the editor does not have any content yet. If the editor is loaded with existing content and the content contains links with those custom protocols, then the links with those custom protocols are purged by TipTap. This is because those custom protocols are added to the extension's configuration after loading the initial editor.

This is related to #746

Code snippets

Add the following code to your app.jsfile:

window.customElements.whenDefined('ui-editor').then(() => {
    document.querySelectorAll('ui-editor').forEach(uiEditor => {
        let editor = uiEditor.editor;
        let toolbar = uiEditor.querySelector('ui-toolbar');

        editor.extensionManager.extensions.filter(extension => extension.name == 'link')[0].options.protocols = ['mailto', 'page', 'procedure', 'legislation'];
        editor.setOptions();
    });
})

Create following livewire component:

<?php

use Livewire\Volt\Component;

new class extends Component {
    public $content = <<<HTML
        <p><a href="procedure://123">link with custom protocol</a></p>
    HTML;

};

?>

<div class="px-4">
    <flux:editor wire:model="content" />
</div>

The link in 'content' livewire property will be removed by the editor.
If you add a new link procedure://123 to the content using the editor, then the editor will correctly render it as a link.

How do you expect it to work?

Ability to customize the configuration of the pre-installed tiptap extensions.

Please confirm (incomplete submissions will not be addressed)

  • I have provided easy and step-by-step instructions to reproduce the bug.
  • I have provided code samples as text and NOT images.
  • I understand my bug report will be closed if I haven't met the criteria above.
@jeffchown
Copy link

@gdebrauwer As far as I know, there isn't yet support for adding extensions to TipTap.

There is an ongoing thread in Discussions discussing this desired feature: #739

@joshhanley
Copy link
Member

@gdebrauwer thanks for reporting! I'm going to close this in favour of #746, as we want to try and keep it all contained in that issue so Caleb can review it all together when he gets to it. I understand this may seem slightly different but the extension customisation story is all related. Can I ask you add a comment to that issue with some of the details here? Thanks!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@joshhanley @gdebrauwer @jeffchown