Browse Source

修正占位符渲染器的注释,优化链接样式和事件处理

develop
dash 2 months ago
parent
commit
ddc00a6ef9
  1. 39
      src/renderer/src/components/CodeEditor/PlaceholderContentWidget.ts

39
src/renderer/src/components/CodeEditor/PlaceholderContentWidget.ts

@ -1,7 +1,7 @@
import { monaco } from "./monaco"
/**
* Represents an placeholder renderer for monaco editor
* Represents a placeholder renderer for monaco editor
* Roughly based on https://github.com/microsoft/vscode/blob/main/src/vs/workbench/contrib/codeEditor/browser/untitledTextEditorHint/untitledTextEditorHint.ts
*/
export class PlaceholderContentWidget implements monaco.editor.IContentWidget {
@ -35,13 +35,38 @@ export class PlaceholderContentWidget implements monaco.editor.IContentWidget {
if (!this.domNode) {
this.domNode = document.createElement("div")
this.domNode.style.width = "max-content"
this.domNode.style.pointerEvents = "none"
this.domNode.textContent = this.placeholder
this.domNode.style.pointerEvents = "none" // 整个容器禁用指针事件
this.domNode.style.fontStyle = "italic"
const a = document.createElement("a")
a.href = "https://baiud.com"
a.textContent = "百度"
this.domNode.appendChild(a)
this.domNode.style.opacity = "0.6" // 添加透明度,更像 placeholder
// 创建文本节点
const textNode = document.createTextNode(this.placeholder + " ")
this.domNode.appendChild(textNode)
// 创建链接
const link = document.createElement("a")
link.href = "https://baidu.com"
link.textContent = "AA"
link.style.pointerEvents = "auto" // 只对链接启用指针事件
link.style.color = "#0066cc" // 设置链接颜色
link.style.textDecoration = "underline"
link.style.cursor = "pointer"
link.target = "_blank" // 在新标签页打开
link.rel = "noopener noreferrer" // 安全属性
// 阻止点击链接时编辑器获得焦点
link.addEventListener("mousedown", e => {
e.preventDefault()
e.stopPropagation()
})
link.addEventListener("click", e => {
e.preventDefault()
e.stopPropagation()
// window.open(link.href, "_blank", "noopener,noreferrer")
})
this.domNode.appendChild(link)
this.editor.applyFontInfo(this.domNode)
}

Loading…
Cancel
Save