Skip to content

Commit 9e8ba58

Browse files
ioedeveloperioedeveloper
committed
Show comment at node position
1 parent 3dcc43d commit 9e8ba58

File tree

2 files changed

+119
-63
lines changed

2 files changed

+119
-63
lines changed

‎libs/remix-ui/editor/src/lib/helpers/retrieveNodesAtPosition.ts

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -167,11 +167,13 @@ const applyIndentation = (comment: string, indentSize: number): string => {
167167
const indent = '\t'.repeat(indentSize)
168168
return comment.split('\n').map(line => {
169169
if (line.trim() === '') return line
170-
if (line.trim() === '*/' || line.trim() === '/*') return line
170+
if (line.trim() === '*/' || line.trim() === '/*') {
171+
return indent + line.trim()
172+
}
171173
if (line.trim().startsWith('*')) {
172174
const content = line.trim().slice(1).trim()
173175
return indent + '* ' + content
174176
}
175177
return indent + line
176178
}).join('\n')
177-
}
179+
}

‎libs/remix-ui/editor/src/lib/remix-ui-editor.tsx

Lines changed: 115 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -161,6 +161,7 @@ export const EditorUI = (props: EditorUIProps) => {
161161
const [currentDiffFile, setCurrentDiffFile] = useState(props.currentDiffFile || '')
162162
const [isPromptSuggestion, setIsPromptSuggestion] = useState(false)
163163
const [widgetIds, setWidgetIds] = useState<string[]>([])
164+
const [decoratorListCollection, setDecoratorListCollection] = useState<any[]>([])
164165
const defaultEditorValue = `
165166
\t\t\t\t\t\t\t ____ _____ __ __ ___ __ __ ___ ____ _____
166167
\t\t\t\t\t\t\t| _ \\ | ____| | \\/ | |_ _| \\ \\/ / |_ _| | _ \\ | ____|
@@ -828,17 +829,63 @@ export const EditorUI = (props: EditorUIProps) => {
828829
const content = editorModelsState[currentFileRef.current].model.getValue()
829830
const query = intl.formatMessage({ id: 'editor.generateDocumentationByAI' }, { content, currentFunction: currentFunction.current })
830831
const output = await props.plugin.call('remixAI', 'code_explaining', query)
831-
const originalFunctionComments = extractFunctionComments(content, 0, true)
832832
const outputFunctionComments = extractFunctionComments(output, 1, false)
833-
const modifiedContent = outputFunctionComments[currentFunction.current] ? content.replace(originalFunctionComments[currentFunction.current], outputFunctionComments[currentFunction.current]) : content
834-
// @ts-ignore
835-
props.plugin.emit('setValue', uri, modifiedContent)
836-
props.plugin.on('editor', 'didChangeFile', (file) => {
837-
if (file !== uri) return
833+
const funcRange = await props.plugin.call('codeParser', "getLineColumnOfNode", { src: functionNode.src })
834+
const newLineCount = (outputFunctionComments[currentFunction.current] || '').split('\n').length
835+
836+
if (functionNode.documentation) {
837+
const docsRange = await props.plugin.call('codeParser', "getLineColumnOfNode", { src: functionNode.documentation.src })
838+
const docs = editor.getModel().getValueInRange(new monacoRef.current.Range(docsRange.start.line, docsRange.start.column, funcRange.start.line, 1000))
839+
const oldLineCount = (docs || '').split('\n').length - 1
840+
841+
editorRef.current.executeEdits('docsChange', [
842+
{
843+
range: new monacoRef.current.Range(docsRange.start.line + 1, 0, docsRange.start.line + 1, 0),
844+
text: outputFunctionComments[currentFunction.current] + '\n',
845+
},
846+
])
847+
848+
const decoratorList = editorRef.current.createDecorationsCollection([{
849+
range: new monacoRef.current.Range(docsRange.start.line + 1, 0, docsRange.start.line + newLineCount, 1000),
850+
options: {
851+
isWholeLine: true,
852+
className: 'newChangesDecoration',
853+
marginClassName: 'newChangesDecoration',
854+
}
855+
}, {
856+
range: new monacoRef.current.Range(docsRange.start.line + newLineCount + 1, 0, docsRange.start.line + newLineCount + oldLineCount, 1000),
857+
options: {
858+
isWholeLine: true,
859+
className: 'modifiedChangesDecoration',
860+
marginClassName: 'modifiedChangesDecoration',
861+
}
862+
}])
863+
const widgetId = `accept_decline_widget_change_docs`
864+
838865
setCurrentDiffFile(uri)
839-
// setIsDiff(true)
840-
setTimeout(() => showCustomDiff(uri), 1000)
841-
})
866+
setWidgetIds(widgetIds => [...widgetIds, widgetId])
867+
addAcceptDeclineWidget(widgetId, editorRef.current, { column: 0, lineNumber: docsRange.start.line + 2 }, () => acceptHandler(decoratorList, widgetId), () => rejectHandler(decoratorList, widgetId))
868+
} else {
869+
editorRef.current.executeEdits('newDocs', [
870+
{
871+
range: new monacoRef.current.Range(funcRange.start.line + 1, 0, funcRange.start.line + 1, 0),
872+
text: outputFunctionComments[currentFunction.current] + '\n',
873+
},
874+
])
875+
const decoratorList = editorRef.current.createDecorationsCollection([{
876+
range: new monacoRef.current.Range(funcRange.start.line + 1, 0, funcRange.start.line + newLineCount, 1000),
877+
options: {
878+
isWholeLine: true,
879+
className: 'newChangesDecoration',
880+
marginClassName: 'newChangesDecoration',
881+
}
882+
}])
883+
const widgetId = `accept_decline_widget_new_docs`
884+
885+
setCurrentDiffFile(uri)
886+
setWidgetIds(widgetIds => [...widgetIds, widgetId])
887+
addAcceptDeclineWidget(widgetId, editorRef.current, { column: 0, lineNumber: funcRange.start.line + 2 }, () => acceptHandler(decoratorList, widgetId), () => rejectHandler(decoratorList, widgetId))
888+
}
842889
}
843890
_paq.push(['trackEvent', 'ai', 'remixAI', 'generateDocumentation'])
844891
},
@@ -1165,11 +1212,66 @@ export const EditorUI = (props: EditorUIProps) => {
11651212
return widget
11661213
}
11671214

1215+
function acceptHandler(decoratorList, widgetId) {
1216+
const ranges = decoratorList.getRanges()
1217+
1218+
if (ranges[1]) {
1219+
ranges[1].endLineNumber = ranges[1].endLineNumber + 1
1220+
ranges[1].endColumn = 0
1221+
editorRef.current.executeEdits('removeOriginal', [
1222+
{
1223+
range: ranges[1],
1224+
text: null,
1225+
},
1226+
])
1227+
}
1228+
decoratorList.clear()
1229+
setWidgetIds(widgetIds.filter((id) => id !== widgetId))
1230+
}
1231+
1232+
function rejectHandler(decoratorList, widgetId) {
1233+
const ranges = decoratorList.getRanges()
1234+
1235+
if (ranges[0]) {
1236+
ranges[0].endLineNumber = ranges[0].endLineNumber + 1
1237+
ranges[0].endColumn = 0
1238+
editorRef.current.executeEdits('removeModified', [
1239+
{
1240+
range: ranges[0],
1241+
text: null,
1242+
},
1243+
])
1244+
}
1245+
decoratorList.clear()
1246+
setWidgetIds(widgetIds.filter((id) => id !== widgetId))
1247+
}
1248+
1249+
function acceptAllHandler() {
1250+
decoratorListCollection.forEach((decoratorList, index) => {
1251+
const widgetId = `accept_decline_widget${index}`
1252+
1253+
acceptHandler(decoratorList, widgetId)
1254+
editorRef.current.removeContentWidget({
1255+
getId: () => `accept_decline_widget${index}`
1256+
})
1257+
})
1258+
}
1259+
1260+
function rejectAllHandler() {
1261+
decoratorListCollection.forEach((decoratorList, index) => {
1262+
const widgetId = `accept_decline_widget${index}`
1263+
1264+
rejectHandler(decoratorList, widgetId)
1265+
editorRef.current.removeContentWidget({
1266+
getId: () => `accept_decline_widget${index}`
1267+
})
1268+
})
1269+
}
1270+
11681271
function showCustomDiff (uri: string) {
11691272
removeAllWidgets()
11701273
const lineChanges: monacoTypes.editor.ILineChange[] = diffEditorRef.current.getLineChanges()
11711274
let totalLineDifference = 0
1172-
const decoratorListCollection = []
11731275

11741276
lineChanges.forEach((lineChange, index) => {
11751277
const line = editorModelsState[uri].model.getValueInRange(new monacoRef.current.Range(lineChange.modifiedStartLineNumber, 0, lineChange.modifiedEndLineNumber, 1000))
@@ -1203,63 +1305,15 @@ export const EditorUI = (props: EditorUIProps) => {
12031305
}
12041306
}])
12051307

1206-
decoratorListCollection.push(decoratorList)
1207-
1208-
const acceptHandler = (decoratorList) => {
1209-
const ranges = decoratorList.getRanges()
1210-
1211-
ranges[1].endLineNumber = ranges[1].endLineNumber + 1
1212-
ranges[1].endColumn = 0
1213-
editorRef.current.executeEdits('removeOriginal' + index, [
1214-
{
1215-
range: ranges[1],
1216-
text: null,
1217-
},
1218-
])
1219-
decoratorList.clear()
1220-
setWidgetIds(widgetIds.filter((id) => id !== `accept_decline_widget${index}`))
1221-
}
1222-
1223-
const rejectHandler = (decoratorList) => {
1224-
const ranges = decoratorList.getRanges()
1225-
1226-
ranges[0].endLineNumber = ranges[0].endLineNumber + 1
1227-
ranges[0].endColumn = 0
1228-
editorRef.current.executeEdits('removeModified' + index, [
1229-
{
1230-
range: ranges[0],
1231-
text: null,
1232-
},
1233-
])
1234-
decoratorList.clear()
1235-
setWidgetIds(widgetIds.filter((id) => id !== `accept_decline_widget${index}`))
1236-
}
1237-
1238-
const acceptAllHandler = () => {
1239-
decoratorListCollection.forEach((decoratorList, index) => {
1240-
acceptHandler(decoratorList)
1241-
editorRef.current.removeContentWidget({
1242-
getId: () => `accept_decline_widget${index}`
1243-
})
1244-
})
1245-
}
1246-
1247-
const rejectAllHandler = () => {
1248-
decoratorListCollection.forEach((decoratorList, index) => {
1249-
rejectHandler(decoratorList)
1250-
editorRef.current.removeContentWidget({
1251-
getId: () => `accept_decline_widget${index}`
1252-
})
1253-
})
1254-
}
1308+
setDecoratorListCollection([...decoratorListCollection, decoratorList])
12551309

12561310
const widgetId = `accept_decline_widget${index}`
12571311

12581312
setWidgetIds([...widgetIds, widgetId])
12591313
if (index === 0) {
1260-
addAcceptDeclineWidget(widgetId, editorRef.current, { column: 0, lineNumber: modifiedStartLine + 1 }, () => acceptHandler(decoratorList), () => rejectHandler(decoratorList), acceptAllHandler, rejectAllHandler)
1314+
addAcceptDeclineWidget(widgetId, editorRef.current, { column: 0, lineNumber: modifiedStartLine + 1 }, () => acceptHandler(decoratorList, widgetId), () => rejectHandler(decoratorList, widgetId), acceptAllHandler, rejectAllHandler)
12611315
} else {
1262-
addAcceptDeclineWidget(widgetId, editorRef.current, { column: 0, lineNumber: modifiedStartLine + 1 }, () => acceptHandler(decoratorList), () => rejectHandler(decoratorList))
1316+
addAcceptDeclineWidget(widgetId, editorRef.current, { column: 0, lineNumber: modifiedStartLine + 1 }, () => acceptHandler(decoratorList, widgetId), () => rejectHandler(decoratorList, widgetId))
12631317
}
12641318
totalLineDifference += linesCount
12651319
})

0 commit comments

Comments
 (0)