使用hint的at方法报错，并且dark模式的编辑器内容颜色存在缺陷

[HerbertHe]

编辑模式

请选择你遇到问题时使用的编辑模式（把正常情况模式删掉）：

• wysiwyg 所见即所得模式
• ir 即时渲染模式
• sv 分屏编辑预览模式

描述问题

• 问题一：自定义at的光标选择错误

hint: {
  at: (value: string) => return [{value: value, html : `<a href="/${value}">${value}</a>`}]
}

键入内容

@PO123123

回车报下面的错误

index.min.js:formatted:1 Uncaught DOMException: Failed to execute 'setStart' on 'Range': The offset 4294967295 is larger than the node's length (7).

• 问题二：自带的夜间模式显示存在不友好的现象

可能是CSS重叠的问题，希望可以更新写死自带主题字体的颜色

问题只出现在所见即所得和即时渲染模式

期待的结果

正常使用at方法做自定义回调处理，自带的夜间模式字体颜色写死，避免可能出现的CSS污染情况

截屏或录像

其他信息

请提供其他附加信息帮助我们诊断问题。

[Vanessa219]

1. 我这里没有报错，可以给出更详细的场景么？
   

2. Vditor 的主题分为编辑器、内容、代码块。具体可参见 https://hacpai.com/article/1549638745630#%E4%B8%BB%E9%A2%98
   编辑器为 dark 的时候，内容也需设置为 dark，当然也可以使用扩展接口定制自己喜欢的内容样式。

[HerbertHe]

@Vanessa219 第二个问题解决了，是没有设置preview的theme导致的，但是第一个试了很多次之后依然不行。

完整的Vditor对象配置如下

const vditor = new Vditor("nucers-vditor-editor", {
            minHeight: 500,
            outline: false,
            width: "100%",
            placeholder: "写点什么吧...",
            theme: !isNightNow() ? "dark" : "classic",
            toolbar: [
                "emoji",
                "headings",
                "bold",
                "italic",
                "strike",
                "link",
                "|",
                "list",
                "ordered-list",
                "check",
                "outdent",
                "indent",
                "|",
                "quote",
                "line",
                "code",
                "inline-code",
                "insert-before",
                "insert-after",
                "|",
                "table",
                "|",
                "undo",
                "redo",
                "fullscreen",
                "edit-mode",
                {
                    name: "more",
                    toolbar: [
                        "both",
                        "outline",
                        "preview",
                    ],
                },
            ],
            counter: {
                enable: true,
                type: "markdown",
            },
            preview: {
                delay: 500,
                theme: {
                    path:
                        "https://cdn.jsdelivr.net/npm/vditor@latest/dist/css/content-theme",
                    current: !isNightNow() ? "dark" : "light",
                },
            },
            hint: {
                at: (value: string) => {
                    // 在此可以引用推文等
                    console.log(value)
                    return [
                        {
                            value: value,
                            html: value,
                        },
                    ]
                },
            },
        })

使用的场景是利用@对帖子或其他可直接引用的内容，进行直接引用跳转内嵌。类似于bilibili的AV号的功能。但是即使配置了html参数为value仍然报错

[Vanessa219]

你看一下 http://vditor.b3log.org/demo/advanced-hint.html 这个在你浏览器上会报错么？

[HerbertHe]

你看一下 http://vditor.b3log.org/demo/advanced-hint.html 这个在你浏览器上会报错么？

@Vanessa219 不会报错，我知道问题在哪里了！！

示例代码的value设置的时候前面手动加了@符号，就是因为这个符号导致的问题，在手动添加之后就解决了。。。

[Vanessa219]

已经加入注意事项中了，这个主要是用于区别表情和 at 的。