Widget Helper stripping attributes?

Development

AI-generated summary

Widget Helper Stripping Attributes

Bas is experiencing issues with the Widget Helper stripping certain attributes when adding an <a> element with classes and attributes. The attributes id, href, and title work fine, but aria-label and _target do not.

vinothkannans suggests the correct way to add attributes is by using the attributes property, as shown in the Discourse header.js.es6 code. Bas confirms this solution works.

In a related issue, gormus is having trouble rendering an SVG object using the h helper. The viewBox attribute is being rendered in all lowercase, causing the SVG image not to render. Although gormus was unable to provide the generated SVG code, they mention that editing the viewbox attribute to viewBox in the browser inspector resolves the issue.

1

I was trying my hand at my first plugin, and to a certain extent it worked quite OK :slight_smile:

However, I’m having trouble with the helper class. The class seems to strip out certain attributes and I have no idea what’s happening.

I’m adding an \<a> with some classes and a few attributes.

I’m trying to add

  • id
  • href
  • title
  • aria-label
  • _target

The first three work fine, the last two don’t.

I’ve tried to reorder and rename the attributes. But it seems there is some sort of selection happening?

Snippet:

decorateWidget('header-icons:before', helper => {
    return h('li.header-dropdown-toggle', [
        h('a.icon.btn-flat', {
                'id': 'my id',
                'href': 'http://example.com',
                'title': 'my title',
                'aria-label': 'my label',
                '_target': "_blank"
            }, [
                h('i.fa.fa-info.d-icon', {
                    'aria-hidden': 'true'
                })
            ]
        ),
    ]);
});

Rendered as

45
451524×208 31.7 KB

2

https://github.com/discourse/discourse/blob/master/app/assets/javascripts/discourse/widgets/header.js.es6#L93-L104

As per above code, I guess it should be like below

decorateWidget('header-icons:before', helper => {
    return h('li.header-dropdown-toggle', [
        h('a.icon.btn-flat', {
                'id': 'my id',
                'href': 'http://example.com',
                'title': 'my title',
                'attributes': {
                    'aria-label': 'my label',
                    'target': "_blank"
                }
            }, [
                h('i.fa.fa-info.d-icon', { 'attributes': {
                    'aria-hidden': 'true'
                }})
            ]
        ),
    ]);
});

Also target is not _target.

3

Works like a charm, thanks! :slight_smile:

4

بمساعدة هذا الموضوع، تمكنت من إنشاء كائن SVG باستخدام المساعد h:

    let logo = h("svg", {
        "attributes": {
          "width": "22",
          "height": "24",
          "viewBox": "0 0 22 24",
          "fill": "none",
          "xmlns": "http://www.w3.org/2000/svg"
        }
      },
      h("path", {
        "attributes": {
          "d": "M11.5992 4.29387L15.4141 ... 0V4.29387Z",
          "fill": "#000000"
        }
      })
    );

ومع ذلك، أرى أن السمة viewBox() يتم عرضها دائمًا بأحرف صغيرة.
يتم إنشاء صورة SVG بجميع السمات المحددة ()، ولكنها لا تُعرض على الصفحة. ما الذي أفتقده؟

أدرك أن هذا مقدم من حزمة virtual-dom، لكنني لم أتمكن من العثور على الحل هناك.

5

مثير للاهتمام.. هل يمكنك ربط/لصق ملف SVG الذي تم إنشاؤه أيضًا؟

7

@Bas للأسف، لم يعد لدي نفس الكود. لقد انتقلت، وقمت بتطبيق الشعار بطرق مختلفة.

ولكن هذا يمكنني أن أخبرك به الآن؛ إذا قمت بفحص المتصفح لصورة SVG، وقمت بتحريرها كـ HTML في المتصفح لإعادة تسمية السمة viewbox إلى viewBox، فستظهر صورة SVG بشكل صحيح في المتصفح.

وستكون مطابقة لصورة SVG الأصلية التي قمت بتفكيكها إلى مساعد h.

8

حسناً، شكراً لإعلامنا. يسعدنا أنك تمكنت من حل الأمر بطريقة مختلفة!