Widget Helper stripping attributes?

Development

AI 生成的摘要

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 不幸的是，我不再拥有相同的代码了。我已经向前推进，并通过不同的方法实现了 logo。

但我现在可以告诉你的是；如果我在浏览器中检查 SVG 图像，并在浏览器中将其编辑为 HTML，将 viewbox 属性重命名为 viewBox，SVG 图像将在浏览器中正确呈现。

它将与我分解为 h 辅助函数的原始 SVG 图像完全相同。

8

好的，感谢告知。很高兴您能用其他方法解决！