Feature request: setCaretPosition()

[thdoan]

It would be so cool if I could do this:

const codeEditor = basicEditor(
  '#code-editor',
  {
    language: 'javascript',
    theme: 'vs-code-dark',
  },
  () => codeEditor.setCaretPosition(ln, col) // line, column
);

[FIameCaster]

This exists already. API Docs for the returned editor.
The setSelection method does something similar to what you want. The only thing is that you need to convert the line and column to an index in the string value. The method is a simple wrapper around HTMLTextAreaElement.setSelectionRange(), so you might want to read about that too

[thdoan]

This finally worked for me 🥳

const codeEditor = basicEditor(
  '#code-editor',
  {
    language: 'javascript',
    theme: 'vs-code-dark',
    value: code,
  },
  // Editor loaded!
  () => setTimeout(() => {
    codeEditor.textarea.focus();
    codeEditor.setSelection(code.length);
  }, 500)
);

[FIameCaster]

Your example on StackBlitz works, the caret is at the end of the text, but the textarea must be focused for the caret to be shown. This is what you did in your last example. You don't need the setTimeout though. I would remove that so the editor is focused immediately instead of after a delay.

[thdoan]

Ah, I know why I had to use setTimeout -- the editor is being loaded into a modal that has a separate timer to animate a lightbox shadow. The modal inner div (where #code-editor lives) is display:none until after the the modal is finished opening, then changes to display:block. I had to synchronize the setSelection and focus with this timeout since I guess when there is no layout it can't calculate the position. I've updated the StackBlitz to simulate the modal:

https://stackblitz.com/edit/vitejs-vite-anepnm?file=src%2Fmain.ts

[FIameCaster]

My solution would be to do something like this:

// Simulate opening modal
setTimeout(() => {
  document.querySelector('.modal')?.classList.add('open');
  focusTextarea();
}, 300);

let loaded = false;

const focusTextarea = () => {
  if (!loaded) loaded = true;
  else {
    codeEditor.setSelection(code.length);
    codeEditor.textarea.focus();
  }
}

// Initialize code editor
const code = 'console.log(123);';
const codeEditor = basicEditor(
  '#code-editor',
  {
    language: 'javascript',
    theme: 'vs-code-dark',
    value: code,
  },
  // Editor loaded!
  focusTextarea,
);

This way the textarea won't be focused until both the modal is open and the editor is loaded. This example works.

[thdoan]

Great solution, I agree -- this is a better way than trying to sync the setTimeout delay, which someone else could change in the future also.