On-render tag attributes (not saved on the XML level)

[SychO9]

Hey JoshyPHP!

I'm dealing with a situation where I would like to assign attributes to a tag on-render, those attributes were not configured as part of the tag definition to avoid saving them part of the XML as they only act as visual sugar and are used to determine different XSLT output.

This actually works just fine on the backend, except on the JS side of things, the Tag in JS seems to not accept setting any attributes that were not defined in the tag configuration.

// Configuration
$tag = $config->tags->add('TAGMENTION');
$tag->attributes->add('tagname');
$tag->attributes->add('slug');
$tag->attributes->add('id')->filterChain->append('#uint');

$tag->template = '...';

 $tag->filterChain
            ->prepend([static::class, 'addTagId'])
            ->setJS('function(tag) { return flarum.extensions["flarum-mentions"].filterTagMentions(tag); }')
            ->addParameterByName('actor');

// On render
    Utils::replaceAttributes($xml, 'TAGMENTION', function ($attributes) use ($context) {
            $model = ...;

            if ($model) {
                // Refresh saved attributes
                $attributes['tagname'] = $tag->name;
                $attributes['slug'] = $tag->slug;

                // Stylistic sugar
                $attributes['deleted'] = false;
                $attributes['color'] = $tag->color ?? '';
                $attributes['icon'] = $tag->icon ?? '';
            } else {
                $attributes['deleted'] = true;
            }

            return $attributes;
        };

// JS filterTagMentions
export function filterTagMentions(tag) {
  if ('flarum-tags' in flarum.extensions) {
    const model = app.store.getById('tags', tag.getAttribute('id'));

    if (model) {
      // Registered attributes.
      tag.setAttribute('tagname', model.name());
      tag.setAttribute('slug', model.slug());

      // Has no effect, dumping the tag shows an instance without any of these attrs
      tag.setAttribute('icon', model.icon());
      tag.setAttribute('color', model.color());
      tag.setAttribute('deleted', '0');

      return true;
    }
  }

  tag.invalidate();
}

Any idea what I might be doing wrong, or if the fact that it works in the backend was not intentiona hence why it doesn't work in the frontend?

Thank you!

[JoshyPHP]

As I understand, you have a TAGMENTION tag, to which you want to add icon, color, and deleted attributes after parsing, before rendering. In PHP, the XML can be modified with Utils::replaceAttributes but there's no equivalent in JavaScript so you used a tag filter instead. The issue is that attributes created by your filter are removed at parsing time, as they are not defined.

You added your filter at the beginning of the chain (prepend()) so it adds those attribute values before validation. What you want is to add them after validation, using append() instead. If the values set by addTagId don't need to be validated, you can just replace prepend with append. If you want them to be validated normally, you'll want to split the work into two different filters; The PHP filter prepended at the beginning and without a JavaScript equivalent, and the JavaScript filter appended at the end, with a dummy PHP callback and set with your JavaScript stuff.

I've updated the docs in 15fd5e2 to clarify the filter order.

[SychO9]

That makes sense! I hadn't even paid attention to the prepend bit to understand there were pre & post-validation hooks.

Thanks for taking the time to clarify this!