ruby on rails - Inserting styled hyperlinks with ActionText Trix editor

Question

Question

Using Rails 6.1.0 ActionText, how to modify the Trix editor toolbar to insert a clickable styled button/anchor with hyperlink?

1. text and hyperlink are both editable by the user
2. behaves and displays as a block; does not add spurious line breaks inside the button
3. the whole element is clickable when showing (not only its inner text), but not clickable when editing
4. renders with correct style both when editing and showing
5. both styling and linking are applied atomically (avoid expecting user to figure out they must click several toolbar buttons; avoid creation of styled button not linking anywhere)

Attempted solution

// Javascript

import Trix from "trix";

Trix.config.blockAttributes.button = { tagName: "x-button" };

// HACK: 'mute' the inner anchor tag and make the parent x-button handle the click instead
Trix.registerElement("x-button", {
  initialize: function() {
    const anchors = this.getElementsByTagName("a");
    if (anchors.length > 0) {
      this.onclick = () => window.location = anchors[0].href;
    }
  }
});

document.addEventListener("trix-initialize", function(event) {
  var buttonHTML = "<button type="button" class="trix-button" data-trix-attribute="button" title="Button">Button</button>";
  var groupElement = event.target.toolbarElement.querySelector(".trix-button-group--text-tools");
  groupElement.insertAdjacentHTML("beforeend", buttonHTML);
});

// CSS, not for 'design' but for demonstration purposes only!

x-button {
  display: block;
  background-color: red;
  width: max-content;
  padding: 1rem !important;
  cursor: pointer;
  a {
    pointer-events: none;
  }
}

# config/initializers/action_text.rb
Rails.application.config.after_initialize do
  ActionText::ContentHelper.allowed_tags << 'x-button'
end

What works

With the above it's possible to have styling and linking by making use of both the newly registered 'Button' toolbar button and the pre-existing 'Link' button:

The content gets stored as follows in database:

<div>some content...</div><x-button><a href="https://example.com">my button</a></x-button><div>more content...</div>

The button style also shows up fine when showing (see top screenshot).

What doesn't work

• the button navigates to its URL when clicked even when the user actually wants to edit it. As a workaround the button's text needs to be modified/selected with the keyboard. (#3)
• the user needs to remember to first click the 'Button' button, then type the text for the button, then select it, then click the 'Link' button, and finally add the URL in the dialog (#5)

Answer 1

等待大神答复