reactjs - Ace 编辑器使用自动完成功能显示两次图标

Question

所以我在使用 Ace 编辑器时遇到问题，其中某些自动完成功能使图标翻了一番

我正在创建一个自定义自动完成器，如下所示：

const customCompleter = {
            identifierRegexps: [/[a-zA-Z_0-9\.\$\-\u00A2-\uFFFF]/],
            getCompletions: (
                editor: Ace.Editor,
                session: Ace.EditSession,
                pos: Ace.Point,
                prefix: string,
                callback: Ace.CompleterCallback
            ): void => {
                var completions: any[] = [];
                completions.push({
                    value: "custom",
                    className: "iconable"
                });
                if (prefix == "custom.") {
                        RList = ["custom.Base64Decode",
                            "custom.AnotherMethod",
                            "custom.Method3",
                            "custom.TestingFunction"
                        ];
                        RList.forEach(function (w) {
                            completions.push({
                                value: w,
                                className: "iconable"
                            });
                        });
                }
                callback(null, completions);
            }
        }

        langTools.addCompleter(customCompleter);

因此，当我推动时，completions我添加了一个“iconable”的类名。CSS 文件如下所示：

.ace_iconable:after {
    font-family: "Font Awesome 5 Free";
    content: "\f1b2";
    display: inline-block;
    padding-right: 10px;
    padding-left: 10px;
    vertical-align: middle;
    font-weight: 900;
}

不知道为什么会这样，但如果有人之前遇到过这种情况，请告诉我！谢谢

Answer 1

看起来你实际上可以稍微改变一下css。

您可以使用.ace_iconable:last-child:after它，它将停止复制图标。当自动完成在单词中途开始的完成时，看起来使用了多个跨度。（例如用户输入“a”，自动完成提示“bad”）

这意味着该图标将显示两次。