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

이 게시글 덕분에 h 헬퍼를 사용하여 SVG 객체를 생성할 수 있었습니다:

    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 Unfortunately, I don’t have the same code anymore. I moved on, and implemented the logo via different methods.

But this I can tell you now; if I inspected the browser for the SVG image, and edited as HTML in the browser to rename viewbox attribute to viewBox, the SVG image would render correctly in the browser.

And it would be identical to the original SVG image which I deconstructed into h helper.

8

네, 알려주셔서 감사합니다. 다른 방법으로 문제를 해결하셨다니 기쁘네요!