Skip to content

Commit

Permalink
fix: 修复编辑器装饰器拿到的是旧值问题
Browse files Browse the repository at this point in the history
  • Loading branch information
@song-xiao-lin
song-xiao-lin committed May 11, 2024
1 parent d969561 commit f5fbee0
Showing 1 changed file with 166 additions and 175 deletions.
341 changes: 166 additions & 175 deletions app/renderer/src/main/src/components/yakitUI/YakitEditor/YakitEditor.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -583,203 +583,194 @@ export const YakitEditor: React.FC<YakitEditorProps> = React.memo((props) => {
{wait: 500}
)

const deltaDecorationsRef = useRef<() => any>()
const highLightTextFun = useMemoizedFn(() => highLightText)
useEffect(() => {
if (!editor) {
return
}
return () => {
try {
editor.dispose()
} catch (e) {}
const model = editor.getModel()
if (!model) {
return
}
}, [editor])

useEffect(
() => {
if (!editor) {
return
}
const model = editor.getModel()
if (!model) {
return
}
let current: string[] = []
if (props.type === "http" || props.type === "html") {
/** 随机上下文ID */
const randomStr = randomString(10)
/** 对于需要自定义命令的快捷键生成对应的上下文ID */
let yakitEditor = editor.createContextKey(randomStr, false)
// @ts-ignore
yakitEditor.set(true)
/* limited paste by interval */
let lastPasteTime = 0
let pasteLimitInterval = 80
editor.addCommand(
monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyV,
() => {
const current = new Date().getTime()
const currentInterval = current - lastPasteTime
if (currentInterval < pasteLimitInterval) {
pasteWarning.run()
} else {
lastPasteTime = current
editor.trigger("keyboard", "editor.action.clipboardPasteAction", {})
}
},
randomStr
)
const generateDecorations = (): YakitIModelDecoration[] => {
// const text = model.getValue();
const endsp = model.getPositionAt(1800)
const text =
endsp.lineNumber === 1
? model.getValueInRange({
startLineNumber: 1,
startColumn: 1,
endLineNumber: 1,
endColumn: endsp.column
})
: model.getValueInRange({
startLineNumber: 1,
startColumn: 1,
endLineNumber: endsp.lineNumber,
endColumn: endsp.column
})

const dec: YakitIModelDecoration[] = []
if (props.type === "http") {
;(() => {
try {
;[{regexp: /\nContent-Length:\s*?\d+/, classType: "content-length"}].map((detail) => {
// handle content-length
const match = detail.regexp.exec(text)
if (!match) {
return
}
const start = model.getPositionAt(match.index)
const end = model.getPositionAt(match.index + match[0].indexOf(":"))
dec.push({
id: detail.classType + match.index,
ownerId: 0,
range: new monaco.Range(
start.lineNumber,
start.column,
end.lineNumber,
end.column
),
options: {afterContentClassName: detail.classType}
} as YakitIModelDecoration)
})
} catch (e) {}
})()
;(() => {
try {
;[{regexp: /\nHost:\s*?.+/, classType: "host"}].map((detail) => {
// handle host
const match = detail.regexp.exec(text)
if (!match) {
return
}
const start = model.getPositionAt(match.index)
const end = model.getPositionAt(match.index + match[0].indexOf(":"))
dec.push({
id: detail.classType + match.index,
ownerId: 0,
range: new monaco.Range(
start.lineNumber,
start.column,
end.lineNumber,
end.column
),
options: {afterContentClassName: detail.classType}
} as YakitIModelDecoration)
})
} catch (e) {}
})()
let current: string[] = []
if (props.type === "http" || props.type === "html") {
/** 随机上下文ID */
const randomStr = randomString(10)
/** 对于需要自定义命令的快捷键生成对应的上下文ID */
let yakitEditor = editor.createContextKey(randomStr, false)
// @ts-ignore
yakitEditor.set(true)
/* limited paste by interval */
let lastPasteTime = 0
let pasteLimitInterval = 80
editor.addCommand(
monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyV,
() => {
const current = new Date().getTime()
const currentInterval = current - lastPasteTime
if (currentInterval < pasteLimitInterval) {
pasteWarning.run()
} else {
lastPasteTime = current
editor.trigger("keyboard", "editor.action.clipboardPasteAction", {})
}
if (props.type === "html" || props.type === "http") {
;(() => {
const text = model.getValue()
let match
const regex = /(\\u[\dabcdef]{4})+/gi

while ((match = regex.exec(text)) !== null) {
},
randomStr
)
const generateDecorations = (): YakitIModelDecoration[] => {
// const text = model.getValue();
const endsp = model.getPositionAt(1800)
const text =
endsp.lineNumber === 1
? model.getValueInRange({
startLineNumber: 1,
startColumn: 1,
endLineNumber: 1,
endColumn: endsp.column
})
: model.getValueInRange({
startLineNumber: 1,
startColumn: 1,
endLineNumber: endsp.lineNumber,
endColumn: endsp.column
})

const dec: YakitIModelDecoration[] = []
if (props.type === "http") {
;(() => {
try {
;[{regexp: /\nContent-Length:\s*?\d+/, classType: "content-length"}].map((detail) => {
// handle content-length
const match = detail.regexp.exec(text)
if (!match) {
return
}
const start = model.getPositionAt(match.index)
const end = model.getPositionAt(match.index + match[0].length)
const decoded = match[0]
.split("\\u")
.filter(Boolean)
.map((hex) => String.fromCharCode(parseInt(hex, 16)))
.join("")
const end = model.getPositionAt(match.index + match[0].indexOf(":"))
dec.push({
id: "decode" + match.index,
ownerId: 1,
id: detail.classType + match.index,
ownerId: 0,
range: new monaco.Range(start.lineNumber, start.column, end.lineNumber, end.column),
options: {
className: "unicode-decode",
hoverMessage: {value: decoded},
afterContentClassName: "unicode-decode",
after: {content: decoded, inlineClassName: "unicode-decode-after"}
}
} as IModelDecoration)
}
})()
}
options: {afterContentClassName: detail.classType}
} as YakitIModelDecoration)
})
} catch (e) {}
})()
;(() => {
try {
;[{regexp: /\nHost:\s*?.+/, classType: "host"}].map((detail) => {
// handle host
const match = detail.regexp.exec(text)
if (!match) {
return
}
const start = model.getPositionAt(match.index)
const end = model.getPositionAt(match.index + match[0].indexOf(":"))
dec.push({
id: detail.classType + match.index,
ownerId: 0,
range: new monaco.Range(start.lineNumber, start.column, end.lineNumber, end.column),
options: {afterContentClassName: detail.classType}
} as YakitIModelDecoration)
})
} catch (e) {}
})()
}
if (props.type === "html" || props.type === "http") {
;(() => {
const keywordRegExp = /\r?\n/g
const text = model.getValue()
let match
let count = 0
while ((match = keywordRegExp.exec(text)) !== null) {
count++
const regex = /(\\u[\dabcdef]{4})+/gi

while ((match = regex.exec(text)) !== null) {
const start = model.getPositionAt(match.index)
const className: "crlf" | "lf" = match[0] === "\r\n" ? "crlf" : "lf"
const end = model.getPositionAt(match.index + match[0].length)
const decoded = match[0]
.split("\\u")
.filter(Boolean)
.map((hex) => String.fromCharCode(parseInt(hex, 16)))
.join("")
dec.push({
id: "keyword" + match.index,
ownerId: 2,
id: "decode" + match.index,
ownerId: 1,
range: new monaco.Range(start.lineNumber, start.column, end.lineNumber, end.column),
options: {beforeContentClassName: className}
} as YakitIModelDecoration)
if (count > 19) {
return
}
}
})()
;(() => {
highLightText.forEach(({startOffset = 0, highlightLength = 0, hoverVal = ""}) => {
// 获取偏移量对应的位置
const startPosition = model.getPositionAt(Number(startOffset))
const endPosition = model.getPositionAt(Number(startOffset) + Number(highlightLength))

// 创建装饰选项
dec.push({
id: "hight-light-text_" + startOffset + "_" + highlightLength + "_" + hoverVal,
ownerId: 3,
range: new monaco.Range(
startPosition.lineNumber,
startPosition.column,
endPosition.lineNumber,
endPosition.column
),
options: {
isWholeLine: false,
className: "hight-light-bg-color",
hoverMessage: [{value: hoverVal, isTrusted: true}]
className: "unicode-decode",
hoverMessage: {value: decoded},
afterContentClassName: "unicode-decode",
after: {content: decoded, inlineClassName: "unicode-decode-after"}
}
} as IModelDecoration)
})
}
})()

return dec
}
current = model.deltaDecorations(current, generateDecorations())
;(() => {
const keywordRegExp = /\r?\n/g
let match
let count = 0
while ((match = keywordRegExp.exec(text)) !== null) {
count++
const start = model.getPositionAt(match.index)
const className: "crlf" | "lf" = match[0] === "\r\n" ? "crlf" : "lf"
const end = model.getPositionAt(match.index + match[0].length)
dec.push({
id: "keyword" + match.index,
ownerId: 2,
range: new monaco.Range(start.lineNumber, start.column, end.lineNumber, end.column),
options: {beforeContentClassName: className}
} as YakitIModelDecoration)
if (count > 19) {
return
}
}
})()
;(() => {
highLightTextFun().forEach(({startOffset = 0, highlightLength = 0, hoverVal = ""}) => {
// 获取偏移量对应的位置
const startPosition = model.getPositionAt(Number(startOffset))
const endPosition = model.getPositionAt(Number(startOffset) + Number(highlightLength))

// 创建装饰选项
dec.push({
id: "hight-light-text_" + startOffset + "_" + highlightLength + "_" + hoverVal,
ownerId: 3,
range: new monaco.Range(
startPosition.lineNumber,
startPosition.column,
endPosition.lineNumber,
endPosition.column
),
options: {
isWholeLine: false,
className: "hight-light-bg-color",
hoverMessage: [{value: hoverVal, isTrusted: true}]
}
} as IModelDecoration)
})
})()

return dec
}
return () => {
model.deltaDecorations(current, [])

deltaDecorationsRef.current = () => {
current = model.deltaDecorations(current, generateDecorations())
}
},
[editor, highLightText]
)
editor.onDidChangeModelContent(() => {
current = model.deltaDecorations(current, generateDecorations())
})
}
return () => {
try {
editor.dispose()
} catch (e) {}
}
}, [editor])
useEffect(() => {
if (deltaDecorationsRef.current) {
deltaDecorationsRef.current()
}
}, [highLightText])

/** 右键菜单-重渲染换行符功能是否显示的开关文字内容 */
useEffect(() => {
Expand Down

0 comments on commit f5fbee0

Please sign in to comment.