serialization of custom attributes on tags

[GabiGrin]

Hey,
I'm trying to figure out the best way to add a custom attribute ("target") into links (This is a more generic version of #55)
Digging into the code, I found that by adding a new attribute in Trix.config.textAttributes and also adding "target" to allowedAttributes here I was successfully able to have "target" in the text piece attributes, meaning that deserialization worked.

My problem is that I can't find a way to serialize the attribute "target" back into the tag. After some time messing around with the code, I came to the conclusion that the current design does not allow for adding attributes on top of another tag. Looks like for each attribute defined in Trix.config.textAttributes, it will either create a new tag or group it with a tag, but there is no apparent way of applying the attributes as pure html attributes to a matching element.

Am I missing something? we will probably need it soon for other tags, like images and maybe classes.

If it's something that makes sense to you guys I'll be happy to try and contribute.

Thanks!

[GabiGrin]

Update: after some more investigation, I think I'm starting to understand the reasoning behind this. The "target" attribute has no real value outside of a link context.

To quickly answer our needs, I ended up adding "target" as a valid attribute to avoid sanitation, made the href attribute on text get the target as well, and to finalize I enhanced the makeElement function to deal with attributes that are objects. Commit is here.

It still feels hacky, but I think that the only other way around it is to express dependencies between attributes.

[javan]

That's correct, there's no way to define additional / arbitrary attributes currently. I can see how that would be useful and I'd be happy to review a PR that allows defining them. I imagine the API to be something like:

Trix.config.textAttributes =
  href:
    groupTagName: "a"
    attributes: 
      target: "_blank"
      class: "decorated"
     ...

Which would add all key / value pairs in attributes as attributes on the element, e.g.<a href="..." target="_blank" class="decorated">.

If you're just interested in opening links in a new window, you could consider post-processing the HTML in your app or handling click events and opening a new window then.

[GabiGrin]

Thanks for the reply @javan.

Something is still left unclear for me, before trying a PR: in your API example, the attributes are hard-coded. For my needs (and in general, to allow parsing and rendering tags with these attributes correctly) these attributes should be parsed from the tag, and also be considered while rendering the element.

In my fork, I did it by extending the href to output an object containing the href and target properties, but maybe each attribute can have it's own parser? and what about exposing the actual element rendering logic into the textAttributes file? it might make things clearer and more extensible.

Waiting for your opinion on this.

[javan]

For my needs (and in general, to allow parsing and rendering tags with these attributes correctly) these attributes should be parsed from the tag, and also be considered while rendering the element.

How do those attributes get there in the first place? If you'd like to describe your exact use case maybe I can provide better feedback.

[GabiGrin]

The use case is that we need to allow our users to add links that open in a new tab, and links that don't. We have a checkbox in our add-link modal (we are not using the built in UI but mostly relying on the editor API and using custom modals) and want its state (checked/unchecked) to affect whether the target="_blank" or not, and also parse existing target attributes on pasted elements.

[javan]

Following my example above, you could think about external links being a separate attribute rather than a target attribute on href. Something like:

Trix.config.textAttributes.external_href =
  groupTagName: "a"
  attributes: 
    target: "_blank"

Then you'd apply either an href or external_href attribute depending on the checkbox state in your UI.