Skip to content

fix(editor): restore cursor position after tag/env-var completion in code editors #3406

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
waleedlatif1 merged 10 commits into from
Mar 4, 2026
Merged

fix(editor): restore cursor position after tag/env-var completion in code editors #3406

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
b3d3312
fix(editor): restore cursor position after tag/env-var completion in …
waleedlatif1 Mar 4, 2026
3983524
lint
waleedlatif1 Mar 4, 2026
a47d64e
refactor(editor): extract restoreCursorAfterInsertion helper, fix wea…
waleedlatif1 Mar 4, 2026
0983950
updated
waleedlatif1 Mar 4, 2026
b9882c7
fix(editor): replace useEffect with direct ref assignment for editorV…
waleedlatif1 Mar 4, 2026
a651923
fix(editor): guard cursor restoration behind preview/readOnly check
waleedlatif1 Mar 4, 2026
f37f92b
fix(editor): escape blockId in CSS selector with CSS.escape()
waleedlatif1 Mar 4, 2026
167f64c
perf(editor): use ref for cursor fallback to stabilize useCallback
waleedlatif1 Mar 4, 2026
a73bd6c
refactor(editor): pass cursor position explicitly from dropdowns
waleedlatif1 Mar 4, 2026
d3e7186
docs(editor): fix JSDoc terminology — macrotask not microtask
waleedlatif1 Mar 4, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
30 changes: 28 additions & 2 deletions ...kflowId]/components/panel/components/editor/components/sub-block/components/code/code.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -539,6 +539,10 @@ export const Code = memo(function Code({
* @param newValue - The new code value with the selected tag inserted
*/
const handleTagSelect = (newValue: string) => {
const textarea = editorRef.current?.querySelector('textarea')
const liveCursor = textarea?.selectionStart ?? cursorPosition
const liveValue = textarea?.value ?? code

if (!isPreview && !readOnly) {
setCode(newValue)
emitTagSelection(newValue)
Expand All @@ -547,8 +551,17 @@ export const Code = memo(function Code({
setShowTags(false)
setActiveSourceBlockId(null)

const insertPos = liveValue.slice(0, liveCursor).lastIndexOf('<')
const searchFrom = insertPos !== -1 ? insertPos : liveCursor
const closingBracket = newValue.indexOf('>', searchFrom)
const newCursorPos = closingBracket !== -1 ? closingBracket + 1 : newValue.length
Comment thread
waleedlatif1 marked this conversation as resolved.
Outdated

setTimeout(() => {
editorRef.current?.querySelector('textarea')?.focus()
if (textarea) {
textarea.focus()
textarea.selectionStart = newCursorPos
textarea.selectionEnd = newCursorPos
}
}, 0)
}

Expand All @@ -557,15 +570,28 @@ export const Code = memo(function Code({
* @param newValue - The new code value with the selected env var inserted
*/
const handleEnvVarSelect = (newValue: string) => {
const textarea = editorRef.current?.querySelector('textarea')
const liveCursor = textarea?.selectionStart ?? cursorPosition
const liveValue = textarea?.value ?? code

if (!isPreview && !readOnly) {
setCode(newValue)
emitTagSelection(newValue)
recordChange(newValue)
}
setShowEnvVars(false)

const insertPos = liveValue.slice(0, liveCursor).lastIndexOf('{{')
const searchFrom = insertPos !== -1 ? insertPos : liveCursor
const closingBraces = newValue.indexOf('}}', searchFrom)
const newCursorPos = closingBraces !== -1 ? closingBraces + 2 : newValue.length

setTimeout(() => {
editorRef.current?.querySelector('textarea')?.focus()
if (textarea) {
textarea.focus()
textarea.selectionStart = newCursorPos
textarea.selectionEnd = newCursorPos
}
}, 0)
}

Expand Down
38 changes: 38 additions & 0 deletions ...nel/components/editor/components/sub-block/components/condition-input/condition-input.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -557,6 +557,12 @@ export function ConditionInput({
const handleTagSelectImmediate = (blockId: string, newValue: string) => {
if (isPreview || disabled) return

const textarea = containerRef.current?.querySelector(
`[data-block-id="${blockId}"] textarea`
) as HTMLTextAreaElement | null
Comment thread
waleedlatif1 marked this conversation as resolved.
const liveCursor = textarea?.selectionStart ?? 0
const liveValue = textarea?.value ?? ''
Comment thread
waleedlatif1 marked this conversation as resolved.
Outdated

shouldPersistRef.current = true
setConditionalBlocks((blocks) =>
blocks.map((block) =>
Expand All @@ -582,11 +588,30 @@ export function ConditionInput({
: block
)
emitTagSelection(JSON.stringify(updatedBlocks))

const insertPos = liveValue.slice(0, liveCursor).lastIndexOf('<')
const searchFrom = insertPos !== -1 ? insertPos : liveCursor
const closingBracket = newValue.indexOf('>', searchFrom)
const newCursorPos = closingBracket !== -1 ? closingBracket + 1 : newValue.length

setTimeout(() => {
if (textarea) {
textarea.focus()
textarea.selectionStart = newCursorPos
textarea.selectionEnd = newCursorPos
}
}, 0)
}

const handleEnvVarSelectImmediate = (blockId: string, newValue: string) => {
if (isPreview || disabled) return

const textarea = containerRef.current?.querySelector(
`[data-block-id="${blockId}"] textarea`
) as HTMLTextAreaElement | null
const liveCursor = textarea?.selectionStart ?? 0
const liveValue = textarea?.value ?? ''

shouldPersistRef.current = true
setConditionalBlocks((blocks) =>
blocks.map((block) =>
Expand All @@ -612,6 +637,19 @@ export function ConditionInput({
: block
)
emitTagSelection(JSON.stringify(updatedBlocks))

const insertPos = liveValue.slice(0, liveCursor).lastIndexOf('{{')
const searchFrom = insertPos !== -1 ? insertPos : liveCursor
const closingBraces = newValue.indexOf('}}', searchFrom)
const newCursorPos = closingBraces !== -1 ? closingBraces + 2 : newValue.length

setTimeout(() => {
if (textarea) {
textarea.focus()
textarea.selectionStart = newCursorPos
textarea.selectionEnd = newCursorPos
}
}, 0)
}

/**
Expand Down
21 changes: 19 additions & 2 deletions ...orkspaceId]/w/[workflowId]/components/panel/components/editor/hooks/use-subflow-editor.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -291,21 +291,38 @@ export function useSubflowEditor(currentBlock: BlockState | null, currentBlockId
const handleSubflowTagSelect = useCallback(
(newValue: string) => {
if (!currentBlockId || !isSubflow || !currentBlock) return

const textarea = textareaRef.current
const liveCursor = textarea?.selectionStart ?? cursorPosition
const liveValue = textarea?.value ?? ''
Comment thread
waleedlatif1 marked this conversation as resolved.
Outdated

collaborativeUpdateIterationCollection(
currentBlockId,
currentBlock.type as 'loop' | 'parallel',
newValue
)
setShowTagDropdown(false)

const insertPos = liveValue.slice(0, liveCursor).lastIndexOf('<')
const searchFrom = insertPos !== -1 ? insertPos : liveCursor
const closingBracket = newValue.indexOf('>', searchFrom)
const newCursorPos = closingBracket !== -1 ? closingBracket + 1 : newValue.length

setTimeout(() => {
const textarea = textareaRef.current
if (textarea) {
textarea.focus()
textarea.selectionStart = newCursorPos
textarea.selectionEnd = newCursorPos
}
}, 0)
},
[currentBlockId, isSubflow, currentBlock, collaborativeUpdateIterationCollection]
[
currentBlockId,
isSubflow,
currentBlock,
collaborativeUpdateIterationCollection,
cursorPosition,
]
)
Comment thread
waleedlatif1 marked this conversation as resolved.
Comment thread
waleedlatif1 marked this conversation as resolved.

// Compute derived values
Expand Down